Chapter 10: Design User Interface

metaphor in which objects on a display are manipulated to look like physical objects (pictures) or graphic symbols that represent them (icons)

Direct manipulation metaphor (e.g., user drags folder icon to a recycle bin image for deletion)

- To help users discover "hidden" features or objects. - Active discovery (mouse hovers, pop-ups, tool tips . Visual Diagrams to guide user)

Discoverability (Principle of User Interface Design)

metaphor in which data is visually represented as paper pages or forms

Document metaphor

reports that provide details or summary information about transactions or operating results that fall outside a predefined normal range of values

Exception reports

reports used by high level managers to assess overall organizational health and performance

Executive reports

Metaphors are used to think about the nature of the user interface, and they include direct manipulation, desktop, document, and dialog metaphors.

True

Other key principles include consistency, shortcuts, feedback, dialog closure, error handling, and reversal of actions

True

Poorly designed user interface can make the information system unusable

True

Story boards are a powerful tool for UI design

True

The design of the user interface has a long history as human computer interaction (HCI) and relies on user-centered design, which focuses early on users, evaluates designs to ensure usability, and uses iterative development

True

Use cases are organized into one or more menu hierarchies to arrange functionality for users

True

User Interface is a dialog goes on between actor and system

True

User interface design must consider the entire user experience

True

User interfaces involve direct user interaction with the system

True

User interface design must focus on entire User Experience (Human Computer Interaction -HCI)

True (Usability is the objective)

- Shortcut keys for experienced users - Meaningful error messages - Simplicity - KISS

Usability and Efficiency (Principle of User Interface Design)

inputs and outputs that directly involve a human user/actor

User Interface

functions, organizations, ads, links, views, etc.

user-interface: Application

Screen, keyboard, chair, light, etc.

user-interface: Equipment

Touchscreen, screen size, brightness, resolution, hotspots, response times.

user-interface: Mobile equipment

Windows, buttons, pictures, animations, colors, etc.

user-interface: Screen elements

Key user interface concepts include affordance and visibility for controls

True

Metaphors of Human Computer Interaction

- Direct manipulation metaphor - Desktop metaphor - Document metaphor - Dialog metaphor

Principles of User Interface Design (cont'd)

- Discoverability - Closure - Readability and Navigation - Usability and Efficiency

Electronic Reports

- Drill down - Graphical and Multimedia Reports

Components of the user-interface

- Equipment - Screen elements - Application - Mobile equipment

Dialogs and Storyboards: For each use case, think of the natural flow of a dialog between user and computer

- Based on the flow of activities in use case description and/or the system sequence diagram - Use natural language to emphasize feedback to user. - - Create a storyboard of the dialog, showing the sequence of sketches of the screen each step of the dialog. (storyboarding) -Review the storyboard with users

User Interface design

- Data Entry - Navigation and Visibility

User Interface design: Questions

- Is the system a custom application or browser based? - What kinds of devices will the user-interface need to support? - What operating systems will the user-interface run on?

Drill down

- To view additional detail related to an item - Linking reports to other reports - View data grouped various categories

Transitioning from Analysis to UI Design: Use Cases and the Menu Hierarchy

- We design use case by use case - Menus are a typical way to organize access to use case functionality - Different types of users might have different menus - Useful to design an overall menu hierarchy and then subsets for different users - Once the hierarchy is established, menus can be implemented in a variety of ways

the appearance of the object suggests its function

Affordance

Principles of User Interface Design

Affordance Consistency: - Across platforms - Within a suite of applications - Within a particular application Continuity: - Consistency across releases over time

metaphor in which user and computer accomplish a task by engaging in a conversation or dialog via text, voice, or tools such as labeled buttons

Dialog metaphor (e.g., user interacting with a troubleshooter)

Graphical and Multimedia Reports

Charting and graphing of data

- Closure on Dialogues, End of a series of action. - Protect user's work, at end and for partially complete work. - Provide undo to reverse actions.

Closure (Principle of User Interface Design)

Text box, list box, combo box, radio buttons, check boxes (Include online editing to minimize errors)

Data Entry

metaphor in which the visual display is organized into distinct regions, with a large empty workspace in the middle and a collection of tool icons around the perimeter

Desktop metaphor

reports that contain specific information on business transactions

Detailed reports

Small phones and small mobile devices

Layout and formatting: Rotating view, resizing, visible navigation, scrolling Data entry and user actions: Fat finger and accidental touches Navigation and visibility: - Show site map - Use action bar - Visual clues - Back button

Minimize, maximize, close, scroll bars, resize

Navigation and Visibility

- Readable text for all users (type, size, color) - Clear navigation - Reverse navigation - a way out - breadcrumbs navigation

Readability and Navigation (Principle of User Interface Design)

Designing reports, statements, and turnaround documents

Report types: - Detailed reports - Summary reports - Exception reports - Executive reports

UI for Tablets

Similar to smartphones, except more real estate to display

Small phones and small mobile devices: Challenges

Small screen size, small keyboards and touch screens, limited network capacity, app design guidelines and toolkits

reports that summarize detail or recap periodic activity

Summary reports

Designing inputs involves identifying devices and mechanisms, identifying inputs and the data content, and determining the controls necessary

True

Designing outputs includes designing detailed reports, summary report, exception reports, and executive reports

True

Dialogs and storyboards are used to design the interaction for each use case based on use case flow of activities and system sequence diagrams

True

Electronic reports and other outputs can include drill down, graphics, and multimedia

True

Good user interfaces are based on good design principles - visibility, affordance, feedback, etc.

True

Guidelines are available for designing for Windows, Web browsers, and Handheld devices

True