©2011

INTERACTION DESIGNChapter 6

©2011

Low-fidelity Prototype

Source: Heim, S. (2008), p. 188

www.id-book.com 3

www.id-book.com 4

Login Task - Flowchart

©2011

www.id-book.com 5

www.id-book.com 6

www.id-book.com 7

©2011

Storyboards

•Often used with scenarios, workflow - adds detail

•It is a series of sketches showing how a user might progress through a task using the device

©2011

Workflow example

Created by: Marc Garlitz, Elizabeth Woodhead, Brendan Easley, Zhong Lin, Vanessa Scheeler, David Laird

©2011

©2011

©2011

©2011

©2011

©2011

Wireframe (web)

• Basic screen layout.

• Blueprint of the screen layout, groupings, hierarchy, etc.

Source: Heim, S. (2008), p. 190

Wireframes

www.id-book.com 17

Visual Comp & High level prototype

©2011

Source: http://www.uxbooth.com/

Design & development process

©2011

Interaction mode

• Interaction type: • what the user is doing when interacting with a

system, e.g. instructing, talking, browsing, etc.

• Interaction style:• kind of interface used to support the mode, e.g.

speech, menu-based, gesture

©2011

Interfaces

• Today there is a diversity of interfaces.

• How to design interfaces for different environments, people, places, and activities?

• Chapter 6 presents several interface types, starting with command-based and ending with brain-computer.

©2011

Interfaces• Numerous adjectives have been used to describe the

different kinds of interfaces, including • graphical• command • speech• multimodal• mobile• touchless• natural

©2011

Interfaces

• Some interface types are primarily concerned with a function (e.g., conversational, instructing, etc.),

• …while others focus on the interaction style used (e.g. command, graphical, multimedia), the input/output device used (e.g. pen-based, speech-based), or the platform being designed for (e.g., PC, mobile, tabletop).

©2011

Overview

• Which Interface type?

• Consider which interface is best for a given application or activity.

©2011

Interfaces

©2011

Mobile• Handheld devices intended for used while on move

• Become pervasive, increasingly used in all aspects of everyday and working life

•Applications running on handhelds have greatly expanded, e.g.,• used in restaurants to take orders • car rentals to check in car returns• supermarkets for checking stock• in the streets for multi-user gaming• in education to support life-long learning

©2011

The advent of the iPhone app

• A whole new user experience that was designed primarily for people to enjoy• many apps not designed for any need, want or use but purely for idle moments to have some fun

• e.g. iBeer developed by magician Steve Sheraton

• ingenious use of the accelerometer that is inside the phone (fee Apps) (Accelerometer)

©2011

iBeer app

©2011

Mobile challenges• Small screens, small number of keys and restricted number of controls

• Devices now use multi-touch surface displays

• Innovative physical designs including: roller wheels, 2-way and 4-way directional keypads, softkeys, silk-screened buttons

• Usability and preference varies• depends on the dexterity and commitment of the user

©2011

Research and design issues

• mobile interfaces can be tricky and cumbersome to use for those with poor manual dexterity or ‘fat’ fingers

• Key concern is designing for small screen real estate and limited control space

©2011

Research and design issues• Mobile interfaces have a small screen and limited control

space.

• Designers have to think carefully about:• what type of dedicated controls to use, • where to place them on the device, and • then how to map them onto the software.

©2011

Research and design issues• Applications designed for mobile interfaces need to take

into account that:• navigation will be restricted and • text input entry slow, whether using touch, pen or keypad input.

• Vertical and horizontal scrolling provides a rapid way of scanning though images, menus and lists.

©2011

NATIVE VERSUS WEB APP

www.id-book.com 32

©2011

Web Apps

•The three main technologies • HTML• CSS• JavaScript

©2011

What is a Web App?

• Web app – • User interface built with web standard technologies• Available at a URL (public, private, or perhaps behind a login), and • Optimized for the specifics of the iPhone.

©2011

What is a Native App?

• Native apps installed on the iPhone,

• Have access to hardware• Written with Objective-C. • Available in the iTunes App store

(A native application is one written to run on a specific operating system/device.)

©2011

Mobile Design• iDevices screen size

• Apple

• Page View Controllers