WebApp Interface Design | Interface Design Principles and Guidelines | Interface Design Workflow | Mapping User Objectives

WebApp Interface Design 

• Introduction : WebApp interface design should be perfect so it answers three primary questions for the end user.
• Where am I? The interface should 
• provide an indication of the WebApp that has been accessed 
• inform the user of her location in the content hierarchy.
• What can I do now? The interface should always help the user understand his current options 
• what functions are available? 
• what links are live? 
• what content is relevant? 
• Where have I been, where am I going? The interface must facilitate navigation. Provide a "map".
• An effective WebApp interface must provide answers for each of these questions as the end user navigates through content and functionality.

Interface Design Principles and Guidelines

• Anticipation (Expectation) 
• A WebApp should be designed so that it anticipates the user's next move. 
• For example, consider a customer support WebApp developed by a manufacturer of computer printers. 
• The designer of the WebApp should anticipate that the user might request a download of the driver and should provide navigation facilities that allow to download latest driver without searching. 
• Communication
• The interface should communicate the status of any activity initiated by the user. 
• Communication can be obvious (e.g., a text message) or displaying a current location of page.
• Consistency 
• The use of navigation controls, menus, icons, and aesthetics (e.g., color, shape, layout) should be consistent throughout the WebApp. 
• Controlled autonomy 
• The interface should facilitate user movement throughout the WebApp, but it should be in a manner that enforces navigation conventions that have been established for the application. 
• For example, navigation to secure portions of the WebApp should be controlled by userID and password.
• Efficiency 
• The design of the WebApp and its interface should optimize the user's work efficiency, not the efficiency of the developer who designs and builds it or the client server environment that executes it.
• Flexibility 
• The interface should be flexible enough to enable some users to accomplish tasks directly 
• Focus 
• The WebApp interface (and the content it presents) should stay focused on the user task(s) at hand. 
• Fitt's Law 
• "The time to acquire a target is a function of the distance to and size of the target."
• Human interface objects
• A vast library of reusable human interface objects has been developed for WebApps.
• Latency reduction 
• Rather than making the user wait for some internal operation to complete (e.g., downloading a complex graphical image), the WebApp should use multitasking in a way that lets the user proceed with work as if the operation has been completed.
• Learnability
• A WebApp interface should be designed to minimize learning time, and once learned, to minimize relearning required when the WebApp is revisited.
• Metaphors (Symbol / Image) 
• An interface that uses an interaction metaphor is easier to learn and easier to use, as long as the metaphor is appropriate for the application and the user.
• Maintain work product integrity 
• A work product (e.g., a form completed by the user, a user specified list) must be automatically saved so that it will not be lost if an error occurs.
• Readability 
• All information presented through the interface should be readable by young and old.
• Track state 
• When appropriate, the state of the user interaction should be tracked and stored so that a user can logoff and return later to pick up where she left off.

Interface Design Workflow

• Review information contained in the analysis model and refine as required. 
• Develop a rough sketch of the WebApp interface layout. 
• Map user objectives into specific interface actions.
• Define a set of user tasks that are associated with each action.
• Storyboard screen images for each interface action.
• Refine interface layout and storyboards using input from aesthetic design.
• Identify user interface objects that are required to implement the interface.
• Develop a procedural representation of the user’s interaction with the interface.
• Develop a behavioral representation of the interface. 
• Describe the interface layout for each state.
• Refine and review the interface design model.

Mapping User Objectives 

Interface Design Steps | Interface Design Issues

Interface Design Steps

• Introduction : Once interface analysis has been completed, all tasks (or objects and actions) required by the end user have been identified in detail and the interface design activity commences. 
• Interface design, like all software engineering design, is an iterative process. 
• Many different user interface design models have been proposed, all suggest some combination of the following steps : 
• Define interface objects and actions (operations). 
• Information developed during interface analysis, 
• Define events (user actions) 
• that will cause the state of the user interface to change. Model this behavior. 
• Depict (Represent) each interface state 
• It will actually look to the end-user. 
• Indicate how the user interprets the state of the system from information provided through the interface.

Interface Design Issues

• Introduction : Four common design issues almost always surface:
• (1) System response time,
• (2) User help facilities,
• (3) Error information handling,
• (4) Command labeling.
• It is far better to establish each as a design issue to be considered at the beginning of software design, when changes are easy and  costs are low.

(1) System response time,

• System response time is the primary complaint for many interactive applications.
• In general, system response time is measured from the point at which the user performs some control action (e.g., hits the return key or clicks a mouse) until the software responds with desired output or action.

(2) Help facilities, 

• Almost every user of an interactive, computer-based system requires help now and then.
• In some cases, a simple question addressed to a knowledgeable colleague can do the trick.
• In others, detailed research in a multivolume set of “user manuals” may be the only option.
• In most cases, however, modern software provides online help facilities that enable a user to get a question answered or resolve a problem without leaving the interface.

(3) Error Handling,

• Every error message or warning produced by an interactive system should have the following characteristics.
• The message should describe the problem in descriptive that the user can understand.
• The message should provide constructive advice for recovering from the error.
• The message should indicate any negative consequences of the error (e.g., potentially corrupted data files)
• The message should be accompanied by an audible or visual cue.
• The message should be “nonjudgmental.” That is, the wording should never place blame on the user.

(4) Menu and command labeling.

• The typed command was once the most common mode of interaction between user and system software and was commonly used for applications of every type.

User Interface Design Process | Interface Analysis | User Analysis

User Interface Design Process

• The user interface analysis and design process begins at the interior of the spiral and includes four distinct framework activities
• (1) Interface analysis and modeling, 
• (2) Interface design, 
• (3) Interface construction, 
• (4) Interface validation. 
• The spiral shown in Figure implies that each of these tasks will occur more than one time…

• Interface analysis : 
• It focuses on the profile of the users who will interact with the system. 
• Skill level, business understanding, and general , different user categories are defined. For each user category, requirements are elicited. 
• The goal of interface design is to define a set of interface objects and actions (and their screen representations) that enable a user to perform all defined tasks in a manner that meets every usability goal defined for the system.
• Interface construction normally begins with the creation of a prototype that enables usage scenarios to be evaluated. 
• Interface validation focuses on 
• (1) The ability of the interface to implement every user task correctly, to accommodate all task variations, and to achieve all general user requirements; 
• (2) the degree to which the interface is easy to use and easy to learn, 
• (3) the users’ acceptance of the interface as a useful tool in their work.

Interface Analysis

• Interface analysis means understanding 
• (1) the people (end-users) who will interact with the system  
• through the interface;
• (2) the tasks that end-users must perform to do their work,
• (3) the content that is presented as part of the interface
• (4) the environment in which these tasks will be conducted.

User Analysis

• Introduction : The following set of questions will help you to better understand the users of a system
• Are users trained professionals, technician, clerical, or manufacturing workers?
• What level of formal education does the average user have?
• Are the users capable of learning from written materials or have they expressed a desire for classroom training?
• Are users expert typists or keyboard phobic?
• What is the age range of the user community?
• How are users compensated for the work they perform? 
• Do users work normal office hours or do they work until the job is done? 
• Is the software to be an integral part of the work users do or will it be used only occasionally? 
• What is the primary spoken language among users? 
• What are the consequences if a user makes a mistake using the system? 
• Are users experts in the subject matter that is addressed by the system? 
• Do users want to know about the technology the sits behind the interface?