UI Stack in Web Design

Original: Scotthurff’s Post

WebDesignUiStack

For every UI design (i.e. screens) you’ll design, they can have up to 5 different states.

Ideal State

  • Serves as foundation for other states
  • When the product is working properly, providing maximum value, full of useful, actionable content.
  • After everything have loaded, the actual page

Empty State

  • Provide incredible first impression
  • Spur them to action, keep them interested, remind them the value of product

First time user / onboarding

WebDesignUiStack_AirbnbExample

  • Opportunity to encourage action, help them understand the value
  • Call them to adventure, take them through known challenges, transform them into a more powerful individual
  • Be encouraging & uplifting in copywriting (eg. “Nothing to see here” VS tell them what button to press)
  • Offer example screenshot of ideal state
  • Use product’s content to instruct users (first-time message for message application eg. email)

User-cleared data

WebDesignUiStack_InboxZeroExample

  • User voluntarily removed data from screen
  • Eg. Complete tast list, read all notifications, archived all emails, Downloading all songs
  • Reward customers to spur further action (eg. Downloaded all music? Good, now go listen to it)

No Results

  • Account for misspellings or similar search
  • Returns closest match to what user wants
  • Give them something to work with
  • Suggest an alternative path

Error State

  • When things go wrong
  • Eg. Missing data, unable to connect to network, leaving page without submitting
  • Should keep user input safe (shouldn’t destroy or undo in event of error)
  • Make error message human, suited to audience

Partial State

WebDesignUiStack_LinkedinExample

  • No longer empty and sparsely populated
  • Prevent people from getting discouraged and giving up on product
  • Keep them hooked

Loading State

  • Represent situation when fetching data
  • Spinners & Loaders encourages users to watch the clock, putting focus on the progress
  • Focused on the indicator & Not the progress
  • Make it clear you are advancing towards the goal, not just waiting around
  • Skipping it all together (“Like” is instant to user, but in the background, the request is running)
  • Skeleton screens places focus on content as they load (gradually filling up the missing piecies)

WebDesignUiStack_SkeletonScreenExample