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