DESIGN GUIDELINES

JACOB NIELSON
 1. VISIBILITY OF SYSTEM STATUS
1. Visibility of System Status:
When we were working on a 3rd party API for image cropping in our
TutorsWeb application, we observed one usability issue. When the user
uploads an image for cropping, he/she needs to wait until the image
appears on screen with the square box. Depending on internet speed,
this load time varies for many users. There is no way for the user to
know if he needs to wait or continue to the next page.
This principle states that the user should know whats going on inside
the system. We need to give a feedback of his/her action within a
reasonable time. This feedback is normally associated with points of
action and can be provided using a color change, loader, time-left
graphics, etc.
One example is twitter making a swoosh sound when a tweet is being
posted. Another example is Google Drive showing the status of a
document upload.
1. VISIBILITY OF SYSTEM STATUS
 2. MATCH BETWEEN SYSTEM AND THE REAL
WORLD
2. Match between system and the real world:
Is there something on your application that a user may not understand? This is very
common to miss since we get associated with the product for over a period of time.
Its also important for the application to speak the language of the target user base.

The system should speak the users' language, with words, phrases and concepts
familiar to the user, rather than system-oriented terms. Follow real-world conventions,
making information appear in a natural and logical order.
 3. USER CONTROL AND FREEDOM
3. User Control and Freedom:
This principle talks about giving the user the freedom
to navigate and perform actions. The freedom to
undo any accidental actions. This principle can be
best illustrated by the Gmails flash message with
undo action when we accidentally delete an email.
3. USER CONTROL AND FREEDOM
 4. CONSISTENCY AND STANDARDS
4. Consistency and Standards:
Consistency is the key. A Submit button in one page should look the same
across the site on any page. If we show the data in a particular table format
on one page, it should look the same the next time data is being shown in
tabular format. If the header is displayed in a certain way on the public pages,
it should be the same when he/she logs in.

How the same button can transform across different pages of the same site.
Note that this is not a change of state.
Externally, its risk-less to follow the standard conventions. A How It Works
link invokes similar expectation for a user across sites. Google Plus
ambitiously launched +1 to counter Facebooks Like without much
success. Facebooks Like already became a standard and sites like LinkedIn
adopted it without contesting.
CONSISTENCY AND STANDARDS
4. CONSISTENCY AND STANDARDS
 5. ERROR PREVENTION
5. Error Prevention:
How many times did your outlook remind you that there is no attachment in the email
while you mentioned that something is attached? Outlook intuitively scans the email
for such keywords and alerts the user before sending. This is Error Prevention.
Below is an example of Google Search trying to correct my spelling:

If you have set some rules for the format of user password, try to validate it as the user
types rather than waiting for him to click submit.
 5. ERROR PREVENTION

If you have set some rules for the format of user password, try to validate it as
the user types rather than waiting for him to click submit.
5. ERROR PREVENTION
 6. RECOGNITION AND RECALL
6. Recognition rather than recall:
Its always better to suggest the user a set of options than to let him remember and type
the whole thing. The goal is to minimize the application of user memory.
Below is an example of Quora suggesting possible questions based on what I am trying to
type.

One more example is when Quora lets you pick the topics of interest from a list of options
rather than asking you to type all of them which would have been disastrous.
6. RECOGNITION AND RECALL
6.RECOGNITION AND RECALL
 7. FLEXIBILITY AND EFFICIENCY OF USE
7. Flexibility and Efficiency of use:
The Interface should be flexible transforming itself between a novice user and an
advanced user. One frequents this option while installing a new software that asks if
the user wants to go ahead with default installation or custom installation. An
advanced user chooses a custom installation to cut out the unnecessary services.
Below is an example of setting up Exchange on Android which hides the complex
features under Advanced.
7. FLEXIBILITY AND EFFICIENCY OF USE
8. AESTHETIC AND MINIMALIST DESIGN
8. Aesthetic and minimalist design:
Prioritization comes to play when this aspect is being considered. For the designer or
the developer, all the information thats being presented on the page is relevant. The
product manager needs to ask the end user if it is so. Is every information displayed on
interface necessary and useful?
Google has been resisting the temptation to show more information on their search
page for years. This is could be shown as the example of the best possible minimalist
design.
8. AESTHETIC AND MINIMALIST DESIGN
Interfaces need to be cleared of unnecessary elements and content that do
not support the page goals and tasks. Apple provides only the basic
information of feature hiding additional information under Learn More.
Check the same product on a retail website to understand the importance of
clutter-free experience.
 9. HELP USER REVOGNIZE, DIAGNOSE AND
RECOVER FROM ERRORS
9. Help users recognize, diagnose, and recover from errors:
Errors are inadvertent in the user journey. A check needs to be made if those errors
are being explained to the user in understandable language. In the below example, I
have entered a fictitious username and password and the error message I got is either
the username or the password is incorrect. Here we are not informing the user if the
username is invalid or if the password is wrong.
 9. HELP USER REVOGNIZE, DIAGNOSE AND
RECOVER FROM ERRORS
Below is the example of how MailChimp is handling this
scenario:
9. HELP USER REVOGNIZE, DIAGNOSE AND
RECOVER FROM ERRORS
 10. HELP AND DOCUMENTATION
10. Help and Documentation:
If a user has reached this step, something is not right with the interface. A great user
interface lets the user navigate through it;s features without any documentation or
training. But if there is any user who could not make it out, adequate help should be
provided within the product.
Below is an example of GoDaddys Help page. While there is a search field, there are
main categories and frequently asked queries on the same page.
10. HELP AND DOCUMENTATION