1 / 15

Designing the User Interface

Designing the User Interface. User Interface. User interface is everything the end user comes into contact with while using the system To the user, the interface is the system Human-computer interaction (HCI) is used to refer to the study of end users and their interaction with computers.

nakeisha-johnson
Télécharger la présentation

Designing the User Interface

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing the User Interface

  2. User Interface • User interface is everything the end user comes into contact with while using the system • To the user, the interface is the system • Human-computer interaction (HCI) is used to refer to the study of end users and their interaction with computers

  3. Identifying and Classifying Inputs and Outputs • Approaches to Inputs and Outputs • Traditional: Data flows on DFDs / Event tables • OO: Message entering or leaving system • User versus system interfaces • System interfaces: I/O requiring minimal human interaction • User interfaces: I/O requiring human interaction

  4. Aspects of User Interface • Physical • Devices the user touches • Manuals, documentation, and forms • Perceptual • Everything the user sees, hears, or touches beyond physical devices • Screen objects, menus, and buttons • Conceptual • What the user knows about the system • Logical function of the system • Business processes behind the system

  5. Evaluating the Usability of the User Interface • Objective data (e.g., statistical testing of input devices with children) • User attitudes • Surveys, focus groups, observation • Iterative development • prototyping

  6. Fields Contributing to the Study of HCIFigure 11-2

  7. Metaphors for Human-Computer Interaction • Direct object manipulation(e.g., Visio) • User interacts with objects on display screen • Desktop evolution • Document • Computer is involved with browsing and entering data on electronic documents • Word processing, spreadsheets, hypertext, and hypermedia • Dialog • Much like carrying on a conversation • Search engines – refining a search • e.g. ICQ/MSN, medical database navigation • Future? Voice? Coworker?

  8. Desktop Metaphor Based on Direct Manipulation Shown on Display Screen

  9. Document Metaphor Shown as Hypermedia in a Web Browser Figure 11-4

  10. Guidelines for DesigningUser Interfaces Standards for interface design (e.g., usoft and Apple) • Visibility • All controls should be visible (e.g., add rows in table on right mouse click in Word) • Provide feedback to indicate control is responding • Affordance • Appearance of control should suggest its functionality • Grey out if not available

  11. Eight Golden Rules for Interactive Interface Design 1. Strive for Consistency 2. Enable Frequent Users to Use Shortcuts 3. Offer Informative Feedback 4. Design Dialogs to Yield Closure (see notes) 5. Offer Simple Error Handling 6. Permit Easy Reversal of Actions 7. Support Internal Locus of Control 8. Reduce Short-Term Memory Load

  12. Forms Design Issues • Layout and consistency • Headings, labels, logos • Font sizes, highlighting, colors • Order of fields • Data keying and entry • Text boxes, list boxes, combo boxes, etc. (how does the tab key work) • How is a correction done in case of an error? • Navigation and support controls (can’t get back after a search) • Help support • Tutorials, indexed, context-sensitive

  13. Object Information Fig. 8.1 Main screen of the Tall Jawa information system Object Image Main Menu Registration Information Record Controls Search Controls

  14. Guidelines for Designing Web Sites • Name and logo on every page • Search function > 100 pages • Headlines explaining page purpose • Chunk information • Use secondary pages for drill down • E.g. general, specs, purchase, reviews • Use limited photos / thumbnails • Use link titles to inform/preview where link will go • Consistency over the whole site • How many clicks to get to what you want? • Do what other people do!

  15. Dialogs and Storyboards • Many methods exist for documenting dialogs • Written descriptions following flow of events (e.g. PO) • Narratives • Sketches of screens • Storyboarding

More Related