Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Standard view
Full view
of .
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
10 Important UI Design Considerations for Web Apps

10 Important UI Design Considerations for Web Apps

Ratings: (0)|Views: 15|Likes:
Published by DAI2011

More info:

Published by: DAI2011 on Jun 02, 2011
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less





May 30 2011 by Marc Gayle |When I finished building my first web app (CompVersions, which allows you to collectfeedback from clients), I was surprised at the number of user interface decisions andconsiderations I hadn’t accounted for at the beginning of my journey. I’d like to share someof those things with you.Many of these design considerations might seem superficially obvious, but once you’regoing through the design and development process, it’s easy to forget about them becausethey’re like condiments — you hardly notice them when they’re there, but if they’remissing, your food just doesn’t taste right.
Blank State
The blank state is how your app will look and function when the user hasn’t entered anydata yet (except perhaps their email address after signing up for an account). This is thefirst interaction and scenario that your user will encounter with your app and it can make or  break their first experience and impression.This state is a critical time for retaining users, because, at this point, users haven’t hadenough invested into using the app for them to be discouraged to look for another solution.One way of dealing with the blank state is to use media to show the user how to use your interface, e.g., a video or a product tour with screenshots. For example, upon signing up for a Fitbitaccount and logging in as an authenticated user for the first time, you’re presented with a slideshow of the different components of the app.
You can also provide your UI with cues, tips, and hints for first-time users, pointing outfeatures in-line. For example, below, you can see thatFreshBooks displays a message that tells you that you haven’t created any estimates yet, and then provides you with a link for creating one.For my web app, the first time you log in, you’ll see four boxes that are numberedsequentially. You can’t progress to the second box without completing the first one so thatthere’s no guessing and the user immediately knows what to do to get started. There’s alsoonly one textbox and button visible at the blank state, so there’s no ambiguity about whatthe next step should be. As users complete each step, the next box is unlocked for them, andthey can proceed.
Let’s look at a couple more examples of blank states. AtBasecamp, the first thing theyshow users is a video that gives you an overview of the way the web app works.Dropboxhas an interesting approach. They start you at a "Get Started" tab that has anumbered list of action items that steps you through what you need to do to get maximumvalue from using Dropbox.

Activity (2)

You've already reviewed this. Edit your review.
1 hundred reads
1 hundred reads

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->