©2011 INTERACTION DESIGN Chapter 6

©2011 Low-fidelity Prototype Source: Heim, S. (2008), p. 188

4 Login Task - Flowchart

©2011

6

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

Wireframe (web) Basic screen layout. Blueprint of the screen layout, groupings, hierarchy, etc.

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

Visual Comp & High level prototype

©2011 Source: 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)fee AppsAccelerometer

©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

©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