Sw User Interface Design Evaluation


Published on

Published in: Economy & Finance, Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Sw User Interface Design Evaluation

  1. 1. SWUIDesignEvaluation SW
  2. 2. Definitions <ul><li>User Interface (UI) Issues – mental activities, memory, learning, problem solving vs physical - ergonomic issues – distance from the screen, keyboard height, display contrast. </li></ul><ul><li>A Good UI – respond to user interaction needs, in an appropriate manner – task oriented design process. </li></ul><ul><li>UI Design </li></ul><ul><ul><li>Specific guidelines for final interfaces- how menus, tables, icons, etc.. should be designed </li></ul></ul><ul><ul><li>Appropriate combinations of user actions to perform tasks. </li></ul></ul>
  3. 3. Task Oriented Design Process Task and User Analysis Description Feature Inspection Engineering Analysis Mock up Prototype Series of paper Sketches - Steps Through Representative Tasks Iterations Design Implementation Test Tracking Feedback Similar Tasks And Interfaces
  4. 4. Task and User Analysis <ul><li>Understanding of user tasks to be performed </li></ul><ul><ul><li>Application context </li></ul></ul><ul><ul><li>User group characteristics - background knowledge </li></ul></ul><ul><ul><ul><li>names for menus </li></ul></ul></ul><ul><ul><ul><li>help files design </li></ul></ul></ul><ul><ul><ul><li>training materials </li></ul></ul></ul><ul><li>UI Task - Doing what’s needed </li></ul><ul><li>Participatory Design – “with” rather than “for” </li></ul><ul><li>Storyboards </li></ul><ul><ul><li>Scenarios for simple tasks </li></ul></ul><ul><ul><li>What the user will have to do to accomplish a task step by step. </li></ul></ul><ul><li>Inquiry methods: Field observations, Proactive field study, Contextual Inquiry, Focus groups, Interviews, Blind voting, Card Sorting, Logging actual use, Journaled Sessions, Self-reporting logs, Surveys, Questionnaires, Screen Snapshots . </li></ul><ul><li>Task example: </li></ul>
  5. 5. Similar Tasks and Interfaces <ul><li>High Level Interaction Paradigms </li></ul><ul><ul><li>Ex: Drag-drop, Copy-paste </li></ul></ul><ul><li>Low Level Control/Display Decisions </li></ul><ul><ul><li>Ex: Placement of menus </li></ul></ul><ul><li>Interface frameworks: Windows, Mac, Motif </li></ul><ul><li>Styleguides + SW Tools </li></ul><ul><ul><li>UI Objects with the code that implements them </li></ul></ul><ul><li>Existing Applications: add-ons </li></ul><ul><li>Interaction techniques from the user’s context </li></ul><ul><ul><li>Cognitive walk troughs </li></ul></ul><ul><ul><li>Why things are done the way thy are </li></ul></ul><ul><ul><li>Choices that make sense to you </li></ul></ul>
  6. 6. Design Description on Paper <ul><li>How features are presented to the user </li></ul><ul><li>Task Centered </li></ul>MS Windows 98: Menu item selection
  7. 7. UI Design Arguments <ul><li>Size: Small elements are harder to hit with the mouse cursor than large elements </li></ul><ul><li>Proximity: Long mouse movements are slower than short ones. </li></ul><ul><li>Typing: Many keystrokes take longer to type. </li></ul><ul><li>Learning: Accelerators learning is slower. </li></ul><ul><li>Diversity: Different preferences for interaction styles. </li></ul><ul><li>Problem solving: Features allow the user to interact with UI elements in a way that allow him or her to perform tasks. </li></ul><ul><li>Provide feedback after each action. </li></ul><ul><ul><ul><li>Context help. </li></ul></ul></ul><ul><li>Users do make mistakes – possibility to back out. </li></ul><ul><li>User attention: </li></ul><ul><ul><li>Information with a major change in the display more likely to be read. </li></ul></ul><ul><ul><li>Information passed close to where the user is looking is more likely to be read. </li></ul></ul><ul><li>Innovation: Use the interaction style the user is familiar with. </li></ul><ul><ul><li>A useful UI feature to be added – apply the entire UI design process. </li></ul></ul>
  8. 8. UI Design – Graphic Principles <ul><li>Item placement on the screen, size/font to use, colors </li></ul><ul><li>Clustering principle </li></ul><ul><ul><li>Screen split into visually separated blocks, preferably with a name-title – simplified searching, conceptual organization </li></ul></ul><ul><ul><li>Controls: menus, dialog boxes, on screen buttons, other graphic input elements </li></ul></ul><ul><li>Visibility reflects usefulness </li></ul><ul><ul><li>Frequently used controls always visible, easy to access - toolbars with show/hide options </li></ul></ul><ul><li>Consistency principle </li></ul><ul><ul><li>Similar screens for similar functions </li></ul></ul><ul><li>Reduced clutter principle </li></ul><ul><ul><li>Screen overload </li></ul></ul><ul><li>The color as a supplement principle </li></ul><ul><ul><li>Color is not reliable to carry information, different colors mean different things </li></ul></ul><ul><ul><li>Minimal color design principles </li></ul></ul><ul><ul><li>Color set options for the UI </li></ul></ul>
  9. 9. Color Perception Example Do you perceive the same color for the green boxes?
  10. 10. Feature Inspection <ul><li>Usefulness </li></ul><ul><ul><li>features to support a task </li></ul></ul><ul><li>Completeness </li></ul><ul><ul><li>all task to be supported </li></ul></ul><ul><li>Usability attributes: easy to learn, efficient to use, easy to remember, few errors. </li></ul>
  11. 11. Engineering Analysis <ul><li>Strengths and weaknesses of an interface before building it. </li></ul><ul><li>Approaches: </li></ul><ul><ul><li>Cognitive walkthroughs </li></ul></ul><ul><ul><li>Design - discovery , optimization </li></ul></ul><ul><ul><li>Action Analysis: </li></ul></ul><ul><ul><ul><li>Count keystrokes - Mental operations: </li></ul></ul></ul><ul><ul><ul><ul><li>GOMS analysis - average times for decisions, keystrokes, mouse movements. </li></ul></ul></ul></ul>
  12. 12. Action Analysis - Phases <ul><li>PHASE I: Identify the mental of physical steps a user will perform to complete the task of an interface </li></ul><ul><li>PHASE II: Analyze the steps, looking for optimizations </li></ul><ul><ul><li>Formal key-stroke level analysis – time completion estimation. [GOMS] </li></ul></ul><ul><ul><li>“ Back to the envelope” approach – interface learning ability. </li></ul></ul>
  13. 13. GOMS Task Decomposition Retrieve a single item from a long-term … 1.2s Learning a single step in a procedure 25s Execute a mental step .075s Respond to a brief light .1s Recognize a 6 letter word .34s Move eyes to a new location on the screen (saccade) .23s Enter one keystroke on a standard keyboard .28s Use mouse to point at an object on screen 1.5s Move head to pointing device or function key .3s Physical movements Visual perception Mental actions Choose among methods 1.2s
  14. 14. “ Back to the envelope” approach <ul><li>PHASE I </li></ul><ul><ul><li>List user actions </li></ul></ul><ul><li>PHASE II </li></ul><ul><ul><li>Analyze – think about them </li></ul></ul><ul><ul><ul><li>Simpler action sequence to accomplish a task. </li></ul></ul></ul><ul><ul><ul><li>Less amount of time for frequent tasks. </li></ul></ul></ul><ul><ul><ul><li>Facts and steps that an user has to learn. </li></ul></ul></ul>
  15. 15. UI-Inspection-Test Methods <ul><li>Cognitive Walkthrough </li></ul><ul><ul><li>perform tasks, task scenarios, evaluations </li></ul></ul><ul><li>Feature Inspection </li></ul><ul><ul><li>analyze each feature for its availability, understandability, other aspects </li></ul></ul><ul><li>Heuristic Evaluation </li></ul><ul><ul><li>against guidelines or general principles </li></ul></ul><ul><li>Pluralistic Walkthrough </li></ul><ul><ul><li>(diverse) group working together </li></ul></ul><ul><li>Standards Inspection </li></ul><ul><ul><li>compliance to interface standards </li></ul></ul><ul><li>Perspective - Based Inspection </li></ul><ul><li>Consistency inspection </li></ul><ul><ul><li>consistency across multiple products, for the same development efforts </li></ul></ul>Source US WEST - Human Factors Group D T D D T D T D T D D D T D D T T D D T D D T T D T D D Design Test
  16. 16. UI-Inspection-Test Methods (cont) <ul><li>Coaching Method </li></ul><ul><li>Co-discovery Learning </li></ul><ul><ul><li>pair of testers, perform tasks together, encouraged to explain what they are thinking about </li></ul></ul><ul><li>Performance Measurement </li></ul><ul><ul><li>data called from a group >5 users, no tester intervention </li></ul></ul><ul><li>Question-asking Protocol </li></ul><ul><ul><li>testers prompt users during walkthrough-interaction with direct questions about the UI </li></ul></ul><ul><li>Remote Testing </li></ul><ul><ul><li>users observed by the tester, some time or journaled sessions </li></ul></ul><ul><li>Retrospective Testing </li></ul><ul><ul><li>video tape of a usability test session </li></ul></ul><ul><li>Shadowing Method </li></ul><ul><ul><li>user to explain walkthrough-interactions to the tester </li></ul></ul><ul><li>Teaching Method </li></ul><ul><ul><li>test user asked to explain the UI to novice user </li></ul></ul><ul><li>Thinking Aloud Protocol </li></ul><ul><ul><li>verbalize thoughts using a usability test, feelings opinions while interacting. </li></ul></ul>D T D D T T D T D D T D D T T D T D D T D T T T T T D T T T D D T D Design Test
  17. 17. Nielsen and Molich Heuristics <ul><li>Heuristic: translate general principles into specifications. </li></ul><ul><li>List of general UI Design principles: </li></ul><ul><li>1. Simple and natural delivery </li></ul><ul><ul><li>no irrelevant information, </li></ul></ul><ul><li>2. Speak user language </li></ul><ul><ul><li>words form user context rather that engineering terms </li></ul></ul><ul><li>3. Minimize user memory load </li></ul><ul><ul><li>intuitive interfaces </li></ul></ul><ul><li>4. Be consistent </li></ul><ul><ul><li>an action sequence learned may be applied for similar results in other parts of the UI </li></ul></ul><ul><li>5. Provide feedback </li></ul><ul><ul><li>let user know the effect of actions </li></ul></ul><ul><li>6. Provide clearly marked exits </li></ul><ul><ul><li>to select different actions </li></ul></ul><ul><li>7. Provide Accelerators </li></ul><ul><ul><li>for repetitive tasks, avoiding lengthily dialogs </li></ul></ul><ul><li>8. Error messages </li></ul><ul><ul><li>guide users to appropriate actions </li></ul></ul><ul><li>9. Prevent errors </li></ul><ul><ul><li>how user interaction errors may be avoided </li></ul></ul>
  18. 18. Performance Measurement <ul><li>Time user takes to complete a task </li></ul><ul><li>Number of tasks of various kinds that can be completed within a given time limit </li></ul><ul><li>Ratio between successful interactions and errors </li></ul><ul><li>Time spent recovering from errors </li></ul><ul><li>Number or user errors </li></ul><ul><li>Number of unused features or commends </li></ul><ul><li>Number of features that the user can remember during a debriefing after the test </li></ul><ul><li>Frequency of use of manuals and or the help system, and the time spent using them </li></ul><ul><li>Proportion of users who say that they would prefer using the designed UI over some specific competitor </li></ul><ul><li>Proportion of users using efficient walk strategies in case the are multiple ways to perform a task </li></ul>Source Cisco Systems Usability Team
  19. 19. Mock Up Prototype - Step Through <ul><li>Series of paper sketches </li></ul><ul><ul><li>How a task is performed </li></ul></ul><ul><li>Step through representative tasks </li></ul><ul><ul><li>verification, removal of hidden misunderstandings </li></ul></ul><ul><li>Prototypes: </li></ul><ul><ul><li>Features, functionality: Low-Fidelity, High-Fidelity, </li></ul></ul><ul><ul><ul><li>Horizontal (all features on the screen, no functionality) </li></ul></ul></ul><ul><ul><ul><li>Vertical (subset of functional features of the feature set) </li></ul></ul></ul><ul><li>Prototyping tools for UI </li></ul><ul><ul><li>Hypercard </li></ul></ul>
  20. 20. Web Interface Design Source France Telecom R&D - Web Site Design Analysis Center <ul><li>Usability </li></ul><ul><li>Orientation </li></ul><ul><li>Intuitive design </li></ul><ul><li>Easy to navigate </li></ul><ul><li>Coherence </li></ul><ul><li>Visibility </li></ul><ul><li>Efficient to use </li></ul><ul><li>Accurate </li></ul>
  21. 21. Mobile Handsets Interface Design <ul><li>Issue: Interface hierarchy </li></ul><ul><ul><li>User interface features include: </li></ul></ul><ul><ul><ul><li>handset functionality (handset, phone functionality) </li></ul></ul></ul><ul><ul><ul><li>service-network operator (call management, sync connectivity ) </li></ul></ul></ul>Handset UI Services Network Operator, Infrastructure Accessories User Interface Service Interface External Interface Source: Nokia Mobile Handsets-Research Center - Research Paper
  22. 22. Managing the UI Design Process <ul><li>Process </li></ul><ul><ul><li>Provide UI Design from abstract specifications, several design iterations </li></ul></ul><ul><li>Design Team </li></ul><ul><ul><li>Variety of skills and experience, for quality: interaction with real users. </li></ul></ul><ul><li>Responsibility </li></ul><ul><ul><li>Coordinate interface efforts with manuals and training. </li></ul></ul><ul><li>Usability Objectives </li></ul><ul><ul><li>Speed to perform representative tasks </li></ul></ul><ul><ul><li>Number of errors avoidable </li></ul></ul>