Week 6: Design Framework

Disadvantages of low-fidelity

- limited error checking - poor detailed specification - limited usefulness for usability tests - navigational and flow limitations

Advantages of low-fidelity

- lower development cost, cheap - evaluate multiple design concepts - useful communication device - address screen layout issues - useful for identifying market requirements

Benefits of Paper Prototype

"A valuable testing tool" - puts the designer in the role of the user - shows present and missing functionality - shows how navigation and task flow will work

Mockups

"Same role as paper prototypes" - arrangement of text and pictures

Building a paper prototype

- Cut up hand drawn paper pieces for screen elements (buttons, windows, dropdown menus, etc)

Limitations of Paper Prototype

- Look and feel difficult to be evaluated - responsive time cannot be calculated - users are more deliberate as they don't bash the system

Advantages of high-fidelity

- complete functionality - fully interactive - user driven - clearly defines navigational scheme - look and feel of final product - marketing and sales tool

Disadvantages of high fidelity

- expensive to develop - time-consuming to create - not effective for requirements gathering

Paper Prototype Interaction

- someone stimulates the computer's response to the user's interactions (paper pieces when the user clicks) - rearranging pieces, writing custom responses, verbal description of complex effects

High Fidelity

- using digital prototypes - similar to finished product

Low-fidelity

- using paper prototypes - more like a sketch missing details

Digital and Software Prototyping

Apps that allow you to create high fidelity mock ups with scripted interfaces so you could test them (its ease of use)

Look and feel fidelity

Look: prototype appearance Feel: how the user interacts with the prototype (Posture - the attitude the app presents to the user, vibe and feel)

Storyboard

a comic-strip-like set of drawings about what your interface does and how it is used to accomplish tasks in a real usage scenario - Setting, sequence, satisfaction

Dataflow diagrams

creating diagrams and charts for your task

Mental Models

mental representation of how something works in real world (e.g checkout process on a shopping website)

Information Architecture

structural design of shared information environments

Fidelity

to illustrate a concept, model design alternatives or test an app

Card Sorting

to structure the information space based on how you view the content