System Design: Designing the User Interface Dr. Dania Bilal IS582 Spring 2009

What is Design? Dynamic process, creative, unpredictable Transformational –Incremental –Iterative –Ultimately leads to final design Based on well-defined goals, ideas, and criteria gathered via using different methods

Pillars of Successful Design Three pillars 1.Guidelines, documents, processes 2.User interface software tools 3.Expert reviews & usability testing Source: Shneiderman & Plaisant, 2009, chap. 3. Available on reserve

Interface Design Based on data collected during system analysis –Gather user data –Analyze user data –Interpret user data –Use guidelines, documents (e.g., SOW), documented processes –Use interface software tools –Construct prototype –Assess expert reviews; conduct usability testing –Make refinements –Beta testing –Final release

1. Guidelines, Documents, Processes Based on set of working guidelines generated early in design process by user- interface designer and/or other people Guidelines provide a set of principles for application developers to follow –Ensure harmony in design across interfaces or products –Needs vary across interfaces

Pillar I. Guidelines, Documents, Processes Guidelines have 5 main components –Each components has a number of factors 1.Words, icons, graphics 2.Screen layout issues 3.Input & output devices 4.Action sequences 5.Training

Pillar I. Guidelines, Documents, Processes Guidelines are living texts –Can be adapted to changing user needs –Are refined through gained experience –Revised based on using new technologies –Reviewed regularly to keep up-to-date Creating guidelines is a social process –Based on theories and models involve people in agency

Pillar II. User-Interface Software Tools Design is unpredictable –Users may not have clear idea how system design will look like when completed –Costly, time-consuming, complex –Need to prototype using software tools Software engineering tools can be expensive

Pillar II. User Interface Software Tools Interface mock-up tools –Non-interactive Paper and pencil, word processers, Powrpoint – Interactive Flash MX, Dreamweaver, Macromedia Director –Can generate animated, interactive designs for distribution on the Web – need to deal with database creation Microsoft Visio can be configured to design interfaces –Other visual development tools available

Pillar II. Layers of Software Tools Layer 4: interface generators User interface management systems or model- based building tools; programming required –Example: Microsoft Access; Sybase PowerDesigner Layer 3: specialized language or application frameworks to generate GUI interfaces Focus on visual building tools –Example: Macromedia Director; Microsoft MFC

Pillar II. 1. Layers of Software Tools Layer 2: GUI Toolkit –Interface builder; visual then other type –Known as Rapid Prototyper; Rapid Application Developer; User Interface Builder –Extensive programming needed Example: Microsoft Visual Studio Layer 1: Windowing system –Extensive programming by experienced software engineers –Used to build full applications

Interaction Styles Direct manipulation Menu selection Form filling Command language Natural language See (Shneiderman & Plaisant, 2009, chap. 2) for advantages/disadvantages

Pillar III. Expert Reviews Usability Testing Expert Reviews –Early, during, or late in the design process –Note problems and issues with design –Suggest solutions to problems –Can be short or lengthy

Pillar III. Expert Reviews Usability Testing Methods for expert reviews techniques –Heuristic evaluation –Cognitive walkthrough –Guidelines review –Consistency inspection –Usability testing Will be covered on April 6

Rules for Designing Interfaces Flexibility and consistency –Users should be able to move freely between fields –Data should not be permanently saved until the user explicitly requests this –Each key and command should be assigned to one function

Rules for Designing Interfaces Use standard formats similar to paper- based forms and reports Screen navigation on data entry screens should be left-to-right, top-to-bottom, as on paper forms Interface design should reduce user data entry errors

Rules for Designing Interfaces Keep in mind user tasks and anticipate user errors –Design features that helps avoid, detect, and correct user mistakes Employ validation test techniques to detect user errors –Example: validate number of characters allocated for data entry of a user SSN (9 digits?)

Feedback Design 1.Status of operation –Keeps users informed of what is going on in system –Displays status if an operation takes longer than a second or two 2.Error and warning Messages –Messages should be specific and free of error codes and jargon –User should be guided toward a result rather than scolded –Be consistent in format and placement of messages

Help Design Guidelines –Simplicity Help messages should be short and to the point –Organization Information in help messages should be easily absorbed by users –Demonstrate It is useful to explicitly show users how to perform an operation (Explore websites on the list of sources)

Sources Shneiderman, B., & Plaisant, C. (2009). Designing the User Interface. 4 th ed. Boston: Addison-Wesley. Jakob Neilsen’s website – Ten usability heuristics – ml User interface design: Tips and techniques –