Interface Prototyping

Embedded displays with touchscreen interfaces are more prevalent in a wide range of products. Cell phones, copiers, cars and even home appliances such as ovens, microwaves and fridges are now designed with touchscreen interfaces. Depending on the thought and design that went into the interface, interacting with one of these products can either be a pleasant experience or rather frustrating, leading to mistakes or avoidance.

This course helps students understand the concepts and theories in interface design and how prototypes can be used to test and evaluate a design. Like a physical prototype within the traditional product design process, interface prototypes provide a valuable tool to the development of the interface displays. A prototype provides the critical feedback from users, thus validating concepts and theories used in a design or indentifying areas of further development or redesign.

Interface prototypes are also being used in other important ways in the design process. They serve as a way to document the graphic and interaction design of an interface. Programmers and engineers no longer have to look at a graphic file or flowchart but can experience the real “look & feel” of the interface through the prototype. Interface prototypes can also be used as a marketing tool, allowing an interactive kiosk or display to be setup on showroom floor. Consumers can experience the interface or product before purchasing it.

Through a series of lectures on UI concepts and theories, and hands-on assignments, students will have the opportunity to design, develop and prototype a new range of devices that will be capable of wireless communication and interaction with the world around us. You will learn about the wide variety of prototypes available, the pro/cons of each kind and how to quickly and effectively create the different kinds of prototypes.

Learning Outcomes

Upon completion of the course, students are expected to demonstrate knowledge, skill and abilities in the following areas:

  • Understand the different kinds of interface prototypes that can be created
  • Understand how an interface prototype fits into the design process
  • Learn the different tools and theories that can be used to create an interface prototype
  • Demonstrate how to create different kinds of interface prototypes on real and demonstration hardware (iPhone, iPad, etc)

Prerequisites

Strong graphics and 3D experience along with some programming experience

Course Materials

Required Text: The UX Book: Process and Guidelines for Ensuring a Quality User Experience. Morgan Kaufmann, 2012 (ISBN-13: 978-0123852410)
Links: UX Books Website with a link to Amazon – www.theuxbook.net

Class Time & Location

12:05 – 1:25 pm, Tuesday & Thursday
Room 358, New Architecture Building

Week

Tuesday

Thursday

1 Class Introduction Presentation – What is a Prototype?
2 Low Fidelity PrototypeUX Lifecycle Contextual Inquiry & Analysis
3 Design Req. & Design-Informing Models Constructing Paper Prototypes
4 Design Thinking, Ideation & Sketching Assignment 1 Due
5 Medium Fidelity Prototype
Mental Models & Conceptual Design
Linear Prototypes Using Keynote & PowerPoint
6 Design Production
Graphic Design Principles
Linear Prototypes Using InDesign & Interactive PDFs
7 US Goals, Metrics & Targets Linear Prototypes Using Axure
8 UX Evaluation Prototyping
Interaction Design Principles
9 Assignment Work Assignment 2 Due
10 High FidelityPrototype
Flash Animation
Flash File Setup
11  Program Concepts  Variables & Listeners
12 Video & Sound Key-broad Input
13 Demo Modes Debugging
14 Assignment Work Assignment 3 Due
15 3D Prototypes
Integrating Renderings & Animation
Flash 3D
16 Assignment Work Assignment Work
17 Assignment 4 Due

Low Fidelity Prototype (Paper)


Assignment-1Students explore creating a low fidelity prototype using hand drawn sketches or graphic programs that give a hand draw look & feel.

Medium Fidelity Prototype (Low Interactive)


Assignment-2Students explore creating a medium fidelity prototype using Photoshop template files and using programs like Keynote, PowerPoint and InDesign to present designs on tablet devices.

High Fidelity Prototype (Fully Interactive)


rendering_hardware_shade_2Students explore creating a high fidelity prototype using programing environments such as ActionScript in Flash and Javascript to create a highly functional and interactive prototype.

3D Prototype


rendering_hardware_shade_1Students explore creating a prototype that mixes interactivity with 3D to create a more robust and in depth interaction.

Low Fidelity Prototype (Paper) Resources

iPhone Sketch Elements – Illustrator file that allows quick paper prototypes of an iPhone app

iPad Sketch Elements – Illustrator file that allows quick paper prototypes of an iPad app

Better Use of Paper in UX Design – A UX Magazine article

Software

Balsamiq – Rapid Wireframing Tool (this is the free, online website for this class)

Balsamiq Projects – A set of resources for Balsamiq

Pencil – An open source prototyping tool – lacks interaction capability

How-to Tutorial

Turn Any Font Into a Sketch Font – A great tutorial on how to make a font look “sketched”.  Same techniques can be  used on graphic objects.

Articles

Streamlining the Design Process with Paper Prototyping: An Interview with Carolyn Snyder

 


Medium Fidelity Prototype (Low Interactive) Resources

Persona

Interaction Design Foundation – Very detail information presented as part of chapter

Example Persona by Interaction Design – A good overview of what a persona should contain and possible look like

Design Personas – A good list of what a persona should contain

Software

Proto.io – Silly-fast mobile prototyping.

ProtoPie – Create superior hi-fi prototypes as easy as Pie.

Framer – An all-in-one design workflow.

Axure – Design Interactive HTML Prototypes for Web & Apps

InVision – Free Web & Mobile Mockup and UI Prototyping Tool


High Fidelity Prototype (Fully Interactive) Resources

Crank Software – Embedded GUI Prototype and Development

AS3 Tutorial at lynda.gatech.edu: ActionScript 3.0 in Flash CS3 Professional Essential Training (http://www.lynda.com/tutorial/423?org=gatech.edu)

AS3 Tutorial at lynda.gatech.edu: ActionScript 3.0 in Flash Professional CS5 Essential Training (http://www.lynda.com/tutorial/67685?org=gatech.edu)

GhostReader – Create audio files from text (http://www.assistiveware.com/education)

AT&T Natural Voices® – Online resource to create audio files from text (http://www2.research.att.com/~ttsweb/tts/demo.php)

Greensock Tweening Engine


3D Prototype Resources

Flash Tutorials on adding video files though AS3:

Tutorials

Lynda Tutorials – http://www.lynda.gatech.edu/

Software

3D Programs

Showcase – Autodesk Student Engineering & Design Community– Autodesk offers full versions of their software for students to use.

Keyshot – 3D rendering and animation software.

Other Information

The UX Book – Website for the book

21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development

11 Principles of Interaction Design Explained

Principles of User Interface Design – Wikipedia

 Multi Touch and Gesture User Interaction Design Principles

Principles of User Interface Design

A collection of UI guidelines

Official Usability, User Experience & User Interface Guidelines From Companies

Tools for Creating iPhone App Mockups