Mockups and Prototypes PostPC Computing Mockups and Prototypes Prof. Scott Kirkpatrick, HUJI Amnon Dekel, Bezalel 12/10/2018
From Analysis to Design Creating rough mockups and prototypes 12/10/2018
What is a Mockup? A mockup is an easily made and changeable draft of at least part of design. Mockups range from extremely low-fidelity sketches to extremely high fidelity interactive simulations. Types: Sketches Sketches with movable objects Computer made graphic sketches Computer based linear GUI presentations (PPT, etc) Computer based GUI simulations (Director, Supercard, Toolbook, VB) (*): Some see only this as a prototype. 12/10/2018
Why Prototype? Saves money Moves ideas in the realm of the concrete Fosters alternatives and alterations Allows the user to insert real input at the design stage 12/10/2018
Where to Start? Your focus may be on : The flow of screens for major tasks The overall metaphor and how it will be carried out. The screen layout of the basic task screen. The screen layouts for all screens. Alternative metaphors and other alternative design ideas. 12/10/2018
Paper Prototypes Set up a grid. Consistency Coherency Different parts of the application might need different grids. Try to be consistent across grids. Don’t insert all details at first. 12/10/2018
Evaluating Prototypes Does the prototype: Convey a consistent conceptual model? Match the users’ mental model? Use the users’ vocabulary? Cover the tasks that users expect to be able to do with the product? Streamline the task for the users? Divide the work well between the user and computer? Maintains consistency in look and feel across screens? Maintains consistency in button, icon, and navigational element location across screens? Maintains consistency in vocabulary across screens? 12/10/2018
Walking through the Prototype Take a brief scenario or use flow and go through the design step by step. Look for potential problems: Illogical design. Misleading design. Steps that cannot be accomplished. Processes that require too many steps. You want to see if users will be able to accomplish the tasks easily and quickly given your design. 12/10/2018
User Testing a Prototype It is beneficial to do in-team walkthroughs often to see if you aren’t missing something. But only doing it with users will give you real answers. A basic method is for you to act as the computer. You act as computer. User uses "Talking out loud method" Ask questions to get clear answers: e.g. What would you do? How would you move to the next field? Would you press a key? Which key? Would you use the mouse? What would you do with the mouse? Etc… 12/10/2018
Testing Alternative Designs Using the paper prototypes you can quickly test alternative designs. Instead of arguing which design is better, test it. Testing Navigation Schemes and Hierarchies: Make sure the users can: Find what they need. Understand what they find. Know where they are. Know where they came from. Know how to get back. 12/10/2018
Iterate towards completion! We have seen that running tests on paper prototypes can help you gather a wealth of information on where your design is succeeding and where it might need redesign. Creating higher fidelity prototypes helps you gather clearer usability feedback. A simulation will generate the most information regarding the usability of a design since it is closest to the final product. 12/10/2018
Some Important Points Demo’s are NOT usability tests. Looking good is not the same as being useful and usable. Users may not be able to predict the problems they will have. Users don’t know what they don’t know. 12/10/2018
Initial Grid design (Photoshop) Example- PSUM Initial Grid design (Photoshop) 12/10/2018
Example- PSUM Initial VB design 12/10/2018
Example- PSUM Initial VB design 12/10/2018
Example- PSUM Initial VB design 12/10/2018
Example- PSUM Final Max design 12/10/2018
Example- PSUM Final Max design 12/10/2018
Example- PSUM Final Max design 12/10/2018