User Interface Design Components

1. User Interface Design Components Chapter 11 Handout

2. Objectives • To understand principles for navigation and design • To understand principles for input design • To understand principles for output design • To have the ability to design a user interface

3. Introduction • Interface design is the process of defining how the users will interact with the system and how that system accepts inputs and produces outputs • Three main mechanisms • Navigation • Input • Output • Don’t forget about the GUI’s

4. Navigation Design • The goal is to make the system as simple to use—and so that the user hardly gives it any thought • Use the assumption that people will not read manuals • Use typical controls (like installation prompts) • Use clear controls

5. Basic Navigation Principles • Prevent mistakes • Use multiple menus • Gray out commands • Confirm important actions • Simplify recovery from mistakes • Allowing the use of UNDO • Use consistent grammar order • File-save • Copy-paste

6. Navigation Controls • Languages • Natural versus programming like SQL • Use of Office Assistant • Menus • Broad and shallow as opposed to narrow and deep • One rule—no more than 8 items and 2-3 mouse clicks or keystrokes to execute action • Grouping by interface objects (Customers, Orders) instead of by action (New, Update, Format) • Direct Manipulation • Windows Explorer, PowerPoint

7. Messages • Error Messages • First should explain the problem • Second, describe how to correct it • Third, provide button(s) for user response • Confirmation • Acknowledgement • Delay • Help • Polite versus impolite • Avoid humor and negative wording

8. Input Design • Facilitates the input of data into the system and ??? • Basic principles • Online or batch processing • Can you think of examples for both kinds? • Capture data at the source • Avoid multiple entry of same info • Can utilize source data automation [examples???] • Minimize keystrokes • Utilizing default values

9. Types of Input • Text • Numbers • Selection box • Input Validation • Completeness check • Format check • Range check • Check digit check • Consistency check • Database check

10. Output Design • Perhaps the most important part of system design because of its visibility and because of ???? • Basic Principles • Understand report usage • Types of report—all general or specific, real-time or batch—look at business value of the report • Manage information load • Balance needed information as opposed to all information available • Minimize bias • Ie utilizing alphabetical or numerical listing • Graphical displays of bar chart information

11. Types of Outputs • Types of Output • Reports • Detailed • Summary • Turnaround document • Graphs • Media • Paper • Electronic—web, CD, others??

12. Now what? • Well how do you go about actual creating the interface? • Do you just jump right in? • You could but….

13. User Interface Design Principles • First, user design is an art • You must make the interface • pleasing to the eye • simple to use • Minimize the potential for errors • One of the biggest challenges is managing space • That is, how do you include all the necessary information without overload the user (well see this in a little bit)

14. Six Main Principles • Layout • Content Awareness • Aesthetics • User Experience • Consistency • Minimal User effort

15. Layout • The interface should be a series of areas on the screen that are used consistency for different purposed • Top area for commands and navigation • A middle area for input or output • Bottom area for status information

16. Content Awareness • Users should always be aware of where they are in the system and what information is being displayed • Including titles, and location menu • Ie Home>>GBA 577>>Lecture Slides • Also applies to form/field labels • Proper date formatting MM/DD/YYYY

17. Aesthetics • Interfaces should be functional and inviting to users through careful use of white space, colors, and fonts • Be careful of trade off concerning white space • Try to keep density of form low • Design of text should be kept to same size and type • 10 point font is often preferred and no less than 8 point • Serif font best for printed reports, sans serif better for computer screens, headings • Color and patterns should be used carefully and sparing (10% of men are colorblind)—but of course there are always exceptions • Be careful of high contrast in colors

18. User Experience • Although ease of use and ease of learning often lead to similar design decisions, there is another tradeoff • Trying to negotiate between experienced users and novices (ie difference between full and partial menus) • Ease of learning – how quickly users can learn new systems • Ease of use – how quickly users can use the system once they have learned it

19. Consistency • Enables users to predict what will happened before they perform the function • Trying to make programs simulate windows or macs • Trying to make web interfaces similar to other models (Amazon) • Try to use consistent terminology • Customer versus client • Use the same terms/field names for both forms and reports

20. Minimal User Effort • Making the interface easy to use, actions should be no more than 3 clicks away

21. User Interface Design Process • Use Scenario Development • Interface Structure Design • Interface Standards Design • Interface Design Prototyping • Interface Evaluation

22. Use Scenario Development • An outline of the steps that the users perform to accomplish some part of their work • Think of the library project • Some users may need to find specific information • Others may need more general search results • One helpful tool is to think of processes and use modeling tools

23. Interface Structure Design • Defines the basic components of the interface and how they work together to provide functionality to the users. • This is similar to modeling in the user scenario—except that you draw out how each menu/screen is related to each other • Most similar to a Data Flow Diagram (DFD)

24. Specific Interface Standards • Interface Metaphors • Using a real world concept as a model for a computer system • Paper form or table • Online version of a check • Interface Objects • Applying an understandable name to the fundamental building blocks of a system • Shopping cart example • Interface Actions • Specifies the navigation and command style (menus), and grammar • Interface Icons • Be careful as some icons are not intuitive • Interface Templates • Designing the same appearance for each different page in the system

25. Interface Design Prototyping • A mock-up or simulation of a computer screen, form, or report. • Storyboard • Hand-drawn pictures of what the screens will look like • HTML Prototype • Language Prototype • How do you select which technique?

26. Interface Evaluation • The objective is to understand how to improve the design of the system before it is completed. • There are four main common approaches • Heuristic evaluation • Walk-Through evaluation • Interactive evaluation • Formal usability testing

27. Heuristic Evaluation • Examines the interfaces by comparing it to a set of heuristics or principles of interface design. • Checked separately by at least three members of the project team and then meet together to compare answers

28. Walk-Through Evaluation • A meeting conducted with users who will ultimately have to operate the system • This usually occurs in the interface design prototyping stage

29. Interface Evaluation • Users work individually with a member of the project team on a prototype of the model and discuss what their likes/dislikes • Provides additional information or missing functionality

30. Formal Usability Testing • Generally some type of scientific testing process that mostly can only be done with language prototypes • Can include surveys, video camera recording • It is very expensive and must include more than 5 users, but not really more than 10

31. Conclusion • At this point you should be able to • Understand the navigation, input, and output design principles and techniques • Understand the fundamental user interface design principles. • Understand the process of user interface design • Understand how to design the user interface structure • Understand how to design the user interface standards