Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Designing Dynamic UI States

Well done!

You have completed Designing Dynamic UI States!

Sign up for Treehouse Back to Library

Loading States

5:56 with Hope Armstrong

The loading state occurs when the UI is receiving content or action is taking place.

New terms:

  • 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.

Resources:

Further Reading:

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up