Loading States5:56 with Hope Armstrong
The loading state occurs when the UI is receiving content or action is taking place.
- Loading state: A transitionary moment when the UI is receiving content or action is taking place.
- Skeleton screen: A blank version of a page into which information is gradually loaded.
- Uber - Jump - loading animation on Dribbble
- Dribbble - loading state while uploading an image
- Medium.com - progressive article loading
- Font Awesome - Free spinner icons
- How to fix a bad user interface - Scot Hurff
- Everything you need to know about Loading Animations - Lisa Dziuba
- Mobile Design Details: Avoid The Spinner - Luke Wroblewski
The final state we'll look at is the loading state. 0:00 The loading state occurs when the UI is receiving content or 0:03 action is taking place. 0:09 It can be triggered by an action, such as opening an app, 0:11 uploading a file, or narrowing results with a filter. 0:15 On mobile, apps are opened by tapping a launcher icon. 0:19 This initiates the app's loading state. 0:24 Take a look at Uber's design for their JUMP app, which is for 0:27 renting bicycles in cities. 0:31 The red screen makes the logo and 0:33 branding clear to orient the user to the app they're opening. 0:35 Then, it has a cinematic feeling as it 0:39 pans into the map to show the available bicycles. 0:42 Another loading state you may be familiar with are progress bars. 0:46 When you upload an image to the creative community on dribbble.com, 0:51 the image is overlaid with a progress bar as it uploads. 0:55 Another popular solution is a spinner icon. 1:01 There are some basic ones available for free in the Font Awesome icon set. 1:04 I included a link in the teachers' notes. 1:09 While spinners do inform the user the system is still active, 1:13 there's an opportunity to do something more custom to fit a brand and 1:17 add more visual interest to the page. 1:21 Check out these creative ones from an article written by Lisa Dziuba. 1:25 It's a good write-up about loading animations, so 1:29 be sure to check out the link in the teachers' notes. 1:32 It's also worth noting that while a spinner doesn't inform the user the app is 1:41 still active and not frozen, it's not always the best solution. 1:45 If you're able to show progress or an estimation of completion, 1:50 that is a more transparent solution than an infinite spinner. 1:54 Also, if you know the general layout of the data to come, you can show a preview. 1:59 There is a technique called progressive loading UI. 2:06 Visit the publishing website medium.com to see this technique in use. 2:09 Note that I've throttled the network to emulate a slow 3G connection here. 2:15 It doesn't actually load this slowly with my normal Internet speed. 2:20 As the home page begins to load, boxes appear as placeholders. 2:24 These boxes are called skeleton screens. 2:30 The term first appeared in a blog post written by Luke Wroblewski, 2:34 called Mobile Design Details: Avoid The Spinner. 2:39 Per his definition, a skeleton screen is a blank 2:42 version of a page into which information is gradually loaded. 2:47 This creates the sense that things are happening immediately as 2:53 information is incrementally displayed on the screen. 2:58 It essentially looks like a wireframe version of the UI. 3:02 And then the text appears and then the images are loaded. 3:07 By the way, images can be progressively loaded as well. 3:13 Let's look at medium.com for an example. 3:17 See how the images load? 3:21 They start out blurry and then crisp up. 3:23 As you design the loading state, consider perception. 3:26 Does the loading state make it seem like the system is sluggish? 3:30 A spin around the loading screen can sometimes give the impression that the app 3:34 is slow, whereas a progressive loading UI can make it seem like the app 3:38 is fast even if both solutions take the same amount of time to load. 3:43 The changes seen in progressive loading can trick the brain into staying engaged. 3:49 For my app, I'd like the trip images to load progressively. 3:55 Here's how I've mocked that experience up in Figma. 3:59 Before the image loads, a colored rectangle will appear. 4:03 The color will be based on the key or predominant color in the image. 4:07 There are tools that help developers systematically detect the color. 4:12 But for our purpose in Figma, we can select a color using the eye dropper tool. 4:16 I've also turned the card text into rectangles 4:22 to represent where the text will appear. 4:24 This is an example of a skeleton screen. 4:27 For the next step, the images are displayed but they aren't in focus yet. 4:33 This gives the user a hint at what's to come while the app loads the full 4:38 resolution. 4:43 You can see here that the text is loaded at this point so 4:44 no more skeleton UI is needed there. 4:48 The final step is to show the images in full resolution. 4:51 The app has fully loaded at this point. 4:55 That covers the five states. 4:58 As you design for 5:01 these states, consider the transitions between the states as well. 5:01 As author Scott Hurff puts it, It's 5:06 the five screen states and the seamless transitions between them. 5:11 Without these transitionary elements, we risk confusing or 5:16 surprising our customers as new states appear and disappear. 5:20 So be careful of how users will perceive a new state and carefully guide them. 5:26 This can mean leaving the essential parts of the app in the same position. 5:32 Looking back at my app states, you can see how I left the navigation and 5:36 the map as is. 5:40 This consistency helps the user stay oriented and 5:42 allows them to get comfortable with the UI. 5:47 Stick around for the next video where I'll get into more details of dynamic states. 5:50
You need to sign up for Treehouse in order to download course files.Sign up