Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Lecturer: Prof Jim Warren Based on Chapter 5 of The Resonant Interface HCI Foundations for Interaction Design First Edition by Steven Heim Lecture 22: Physical Design

1-2 Physical Design The physical design involves: – What it will look like – What components it will require – How the screens will be laid out We use the following tools during this phase: – Low-fidelity prototypes – Evaluations – Wireframes – Functional prototypes

1-3 Physical Design - Low-fidelity prototypes Nielsen distinguishes between two types of prototypes – Horizontal – Vertical Always a challenge with prototypes to decide where to put the effort – You want to get the maximum quality of feedback from the minimum of effort – So build (prototype) what is needed to get feedback on the key elements of the design (e.g. to support your most important Scenario(s))

1-4 Physical Design - Low-fidelity prototypes The three main criteria for low-fidelity prototypes: – Easy and inexpensive to make. – Flexible enough to be constantly changed and rearranged. – Complete enough to yield useful feedback about specific design questions.

1-5 Physical Design - Low-fidelity prototypes People are more comfortable criticizing paper prototypes You will have to make some decisions before you begin: – What feedback do you need at this point in the design process? – How much of the design should you prototype? – Should you cover all of the areas but without great detail (breadth vs. depth)? – Should you cover one area in great detail? These questions will help you to define the scope of the prototype and focus on what you want to accomplish

1-6 Physical Design - Low-fidelity prototypes Advantages of paper prototypes: – They can be used early and often. – They are inexpensive and easy to create. – They make design ideas visual. – Can often tell at this stage whether a design idea will ‘work’ – No special knowledge is required; all team members can create them. Disadvantage of paper prototypes: – They are not interactive. – They cannot be used to calculate response timings. – They do not deal with interface issues such as color or font size.

Student examples from past offerings of COMPSCI 345 Your first paper prototypes should be very rough (lines only) By time you hand them in they should be like this 7

1-8 Evaluation Begin evaluations early in the design process. Evaluation is an integral part of the development process and can take the form of an informal walkthrough or a more structured heuristic evaluation. Formal usability testing can begin once a prototype has been developed. The earlier you find a problem with a design, the easier (and/or more possible!) it is to correct, and hence to end up with a better, more successful solution in the production software system

1-9 Evaluation – Heuristic Evaluation (as you now know from earlier in the semester…) Heuristic evaluations are performed by usability experts using a predetermined set of criteria designed to measure the usability of a proposed design. The evaluator follows a scenario through the design and tests each step against the heuristic criteria. The evaluator makes recommendations to the design team either through a written document or during a team meeting.

1-10 Evaluation – Nielsen’s Heuristics In collaboration with Rolf Molich, Jakob Nielsen developed a set of 10 heuristics for interface design The revised set based on a factor analysis of 249 usability problems (the list we’ve used in Assignment 1 and in tutorial)

1-11 Physical Design Cont. - Wireframes Wireframes define: – Basic page layout – Screen components Wireframes are developed from flowcharts and paper prototypes They are basically more evolved paper prototypes that include detailed information about the interface elements

1-12 Physical Design Cont. - Wireframes Wireframes help to create template layouts that can be used to impose a consistent structure throughout the interface

1-13 Physical Design Cont. – Wireframes Web Formats – Web sites from different domains use layouts particular to that domain Use page layouts that are common to the domain (always good to exploit the user’s prior experience and fit their expectations if a workable solution can do so) Use flexible design for Web pages (e.g. Use CSS technology that separate style from content and allows end user browser preferences and system spec differences to manifest – not a ‘locked down to the last pixel’ layout)

1-14 Evaluation – Functional Prototypes Functional prototypes are interactive prototypes that represent various degrees of functionality – They can either be horizontal or vertical Functioning prototypes can be created using RAD environments, such as: – Microsoft Visual Studio – Adobe Flash Dreamweaver Director

Interface design standards GUI environments created for major operating systems have attained a degree of standardisation in terms of types of interface component and the ways in which they interact Using tools that promote these standards makes prototyping – Faster – More reliable – Meet user expectations

1-16 Types of standard-promoting tools These tools promote standards-based designs that have a consistent look and feel – Graphical libraries (e.g., OpenGL) – User interface toolkits (e.g. Swing) – Visual interface builders – Web development tools (which is all to the good for not ‘surprising’ the user in unnecessary or unhelpful ways – instead, they can stay focused on their task) Working in a standardized environment increases efficiency and promotes learning (Cooper & Reimann, 2003)

What about innovation? Working with standard tools (e.g., Windows and Microsoft Visual Studio) gives a reliable result, but shouldn’t we try to be innovative? – Decide when and how If you want to do something that will be differentiated by distinctly different interaction, then maybe time to innovate But development cost will be high and you’ll have to win over your user base – iPhone is innovative and promotes some interaction that was rare before – Same could be said for Nintendo Wii with acceleration and level based control action and its Opera OS

The new old Apple is particularly legendary for finding new ways of doing things, but the these new ways of doing things become the standards (rapidly as an expectation, and more slowly in terms of tools) e.g., Macintosh popularised the windowing bitmapped GUI WIMP office productivity environment – Although XEROX pioneered the technology, and now Microsoft and Office is the most common example of it At first the Mac environment required the programmer to make all the expected behaviours happen through explicit programming effort Bit by bit tools emerged to support programmers to make interfaces act that way and conventions became more settled

Novelty File/Exit not File/Quit is firmly established – arbitrary, but one less thing for end-user to worry about Fit the task – Conceptual model well tuned to Personas and Scenarios, and adhering to Nielsen’s heuristics But go with interaction standards and tools that are easy and reliable unless you have a very specific reason – Each variation adds to the user’s cost in learning the tool and adds to effort and maintenance in development

Summary Physical design is where you start to see what the interface will look like Prototypes can be horizontal or vertical – they should fit your Scenario(s) Lo-fi paper prototypes are best for rapid early feedback You may progress to wireframes to establish the template of the user interface Standards and development tools make it faster and easier to make working prototypes that fit with user expectations