User:Issa/Design/Guidelines

{| align="left" cellspacing="10px" cellpadding="0" width=100% font-size: 120%; font-weight: bold; background-color: rgb(204, 244, 198); border-radius: 3px 3px 0 0;">Principles 
 * - valign="top"
 *  ux-visual-hierarchy Controls that are more important or more commonly used should leverage visual variables such as size and contrast so that they have more dominance and weight relative to other controls.  ux-minimalism Interfaces should be as simple as possible, both visually and interactively. Interfaces should avoid redundancy. [Source: Nielsen]  ux-efficiency Interfaces should be as efficient as possible, minimizing the complexity of actions and the overall time to complete a task. [Source: Nielsen]  ux-interruption Interfaces should not interrupt the user. Interfaces should never ask the user a question that they are not prepared to answer simply for a false sense of control. In general, software should only speak when spoken to.  ux-consistency Software should be internally consistent with itself and externally consistent with similar interfaces to leverage the user's existing knowledge, unless this would be detrimental to usability. [Source: Nielsen]

Self-Explanatory
 ux-affordance Controls should visually express how the user should interact with them. [Source: Norman]  ux-natural-mapping Controls should be placed in the correct location relative to the effect that they will have. [Source: Norman]  <big style="margin-bottom: 5px; display: inline-block;">ux-feedback Interfaces should provide feedback about their current status. Users should never wonder what state the system is in. [Source: Nielsen] <div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-discovery Users should be able to discover functionality and information by visually exploring the interface, they should not be forced to recall information from memory. [Source: Nielsen] <div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-jargon Users should not be required to understand any form of implementation-level terminology. (This principle is a special case of ux-implementation-level). [Source: Nielsen]

Errorproof
<div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-undo Actions should support undo so that users remain in control. <div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-error-recovery Interfaces should proactively help users recover from both user errors and technology errors. (A preferable case is to address through ux-error-prevention so that the error does not occur). [Source: Nielsen] <div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-error-prevention Interfaces should proactively try to prevent errors from happening. [Source: Nielsen] <div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-mode-error Users should not encounter errors because the interface is in a different state than they expected it to be. (This principle is a special case of ux-error-prevention). <div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-implementation-level Interfaces should not be organized around the underlying implementation and technology in ways that are illogical, or require the user to have access to additional information that is not found in the interface itself. [Source: Nielsen, Cooper] <div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-control Users should always feel like they are in control of their software. [Source: Nielsen]

Polite
<div style="float: left; width: 30%; max-width: 250px; border: 1px solid #106802; border-radius: 3px; padding: 10px; margin: 0 1% 1% 0; min-height: 170px;"> <big style="margin-bottom: 5px; display: inline-block;">ux-tone Interfaces should not blame the user, or communicate in a way that is overly negative or dramatic.


 * }