Interface Design Workshop Shad Valley Waterloo, 2003 (Day 1 of 4) Presenter: Danny Ho Advanced Interface Design Lab University of Waterloo

Today’s Topics What is a User Interface? Norman’s Principles UCD Principles Design Measures Mental Models Task Analyses (Procedural / Hierarchical / Object Oriented) Card Sorting Design Walkthrough

What is a User Interface?

Norman's Principles of Good Design for Understandability and Usability Make sure that ·        The user can figure out what to do ·        The user knows what is going on By paying attention to affordances and Using the following principles ... ·        provide a good conceptual model ·        make things visible ·        provide good mappings ·        provide appropriate feedback (remember trip to IBM, DB2 problem?)

User-Centred Design A design philosophy that puts the user at the centre of the design process Benefits of Applying UCD: ·        minimize cost of service & hotline calls ·        increase sales and repeat sales ·        acquire a competitive edge in market ·        minimize risk of releasing flawed or potentially dangerous products ·        determine usability benchmarks for future releases ·        contribute to fundamental research regarding human-system research - from Rubin, J (1994) The Handbook of Usability Testing. New York: Wiley & Sons.

User-Centred Design Main objectives of user-centred design ·        Enhance user abilities (what the user can do) ·        Overcome user limitations (what the user can't do) ·        Foster user acceptance (what the user will do) How do you know what the user can, can't and will do? ·        literature reviews on related areas of physical and cognitive ergonomics ·        anthropometric data tables ·        observation of users carrying out tasks with products in question ·        interviews/survey of users who have experience with task or product

Design Measures Objective measures and subjective measures for the purposes of design evaluation and why it is important to collect both kinds of data. * objective measures = measure without user bias (observable) - quantitative (e.g. reaction time, error rates)   * subjective measures = measure users interpretation of events - tend to be qualitative (e.g. thoughts, opinions, ratings) - can involve interviews, surveys, questionnaires - used in focus groups, design walkthroughs, paper-&-pencil evaluations

What do YOU think is a mental model? Draw one… Mental Models What is a Mental Model? A perception of context, content, interactions and their boundaries How are Mental Models Developed? ·          Use system ·          Observe someone else use system ·          Training on system ·          Documentation What do YOU think is a mental model? Draw one…

Mental Models Different types of mental models: Analogical models (graphical manipulation, linguistic) ·          user believes system is like something else ·          (e.g. word processor like typewriter) Mapping models for repeated actions ·          Memory based executable steps (don't know why just do - start car) Object-Action Models ·          Number of objects that user can manipulate to perform task ·          (paint program) State-transition Models ·          Systems that can switch between modes (key modal - digital phone voice mail)

Procedural Task Analysis Procedural analysis breaks down the mental and/or physical steps that the learner must go through so that the task can be successfully achieved. The steps that make up a task are arranged linearly and sequentially, illustrating where the learner begins and ends. Oftentimes, the steps throughout the task, from start to finish, as well as any decisions that the learner must make are arranged in a flowchart, but they can also be done in an outline form. http://classweb.gmu.edu/ndabbagh/Resources/Resources2/taskanalysis2.htm

Hierarchical Task Analysis A hierarchy is an organization of elements that, according to prerequisite relationships, describes the path of experiences a learner must take to achieve any single behavior that appears higher in the hierarchy (Seels & Glasgow, 1990, p. 94). Thus, in a hierarchical analysis, the instructional designer breaks down a task from top to bottom, thereby, showing a hierarchical relationship amongst the tasks, and then instruction is sequenced bottom up. http://classweb.gmu.edu/ndabbagh/Resources/Resources2/hierarchical_analysis.htm Main Idea behind Task Analysis for UCD: Identifying the task decomposition and the plans is not the analysis. The Analysis part of an HTA involves identifying those components where there may be problems (in terms of usability), the nature of the problems, and how the problems may be solved. This can be related back to design requirements, design specifications, as well as function allocation. Scenario 1: Having cereal for breakfast Scenario 2: Driving

Object Oriented Task Analysis Traditional task analysis tends to be process oriented. Focus is on breaking the task down into detailed steps or components Object-oriented task analysis tends to be product oriented Focus is on identifying all tools or objects that will be needed to successfully meet the task goal From design perspective, it is usually better to identify user interface objects, and then determine the underlying processes Work through a hypothetical example of a task in order to identify potential object (tools) to help the user complete the task. Scenario 1: Having cereal for breakfast Scenario 2: Driving

Card Sorting (Concept Grouping) Main Idea behind method: - to get at the user's mental model for product - how user groups concepts/tasks together is an indication of the existing mental model What you need: - list of concepts (functions, tasks) - cards (receipe cards, sticky notes, separate pieces of paper) How the method is performed: - ask the user to sort the cards into groups of similar concepts - record which concepts are sorted together - repeat (reshuffle cards and have user do again) - can specify how many groups (2, 3, 4, 5, etc) - can have user "name" groups

Card Sorting (Examples) - Bank Transaction System Music Store Menu System Online Purchasing

Design Walkthrough Prototypes come in 3 forms: Low (post-its), Medium (scripted), High (working) A design walkthrough is intended to shed light on usability concerns by ‘walking’ participants through a prototype (of any fidelity) Norman’s Principles and UCD design principles should be considered and reflected upon when performing a design walkthrough. Examples include: Visibility Action Association Feedback

Design Walkthrough (www.lib.uwaterloo.ca) Does the UW Library have any electronic dictionaries? - Clicked on “Find It”, then E-texts -  On next page, clicked on “E-data” - Search was wrong – back to home - Clicked on “Help”, then “Site Index and Search” - Clicked on “E” for anything electronic – nothing found - Clicked on “D” for dictionaries – found “Dictionaries” hypertext, and clicked on it - Clicked on the “Webster On-Line Dictionary” – this was determined by the user to be an electronic dictionary Activity Summary - Help => Site Index and Search => Dictionaries => Webster On-Line Dictionary

Design Walkthrough (Group 1) Is the University Map and Design Library open on weekends? How would you find if the library has Margaret Atwood’s Alias Grace? I need to contact the librarian for my department – how do I find his/her phone number or email? Does the Library have any electronic dictionaries? Where can I find electronic maps? Where do I find the URL for Yahoo? Where can I find a database in which to locate articles on Anthropology subjects? Where can I find information on how to cite web sites? Can I read an article of a journal without coming to the library? Guelph library has books I need. How do I have them brought to UW?

Design Walkthrough (Group 2)   How can I discover if any materials have been placed on Reserve for my courses? How can I discover when my UW library books are due? I am visually impaired – does the library offer any special services for me? Where can I find the exam timetables? How can I find out if my course textbook is in stock at the UW Bookstore? Where can I find instructions about connecting from home? Getting a copy of a book from a remote library Getting an article from a journal at University of Guelph Where to start to do research on a subject What library orientation sessions are offered for grad students this term?

Day 1 – Topics Summary What is a User Interface? Norman’s Principles UCD Principles Design Measures Mental Models Task Analyses (Procedural / Hierarchical / Object Oriented) Card Sorting Design Walkthrough