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