1. Mockups and Prototypes
PostPC Computing
Mockups and Prototypes
Prof. Scott Kirkpatrick, HUJI
Amnon Dekel, Bezalel
12/10/2018

2. From Analysis to Design
Creating rough mockups and prototypes
12/10/2018

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. Initial Grid design (Photoshop)
Example- PSUM
Initial Grid design (Photoshop)
12/10/2018

14. Example- PSUM
Initial VB design
12/10/2018

15. Example- PSUM
Initial VB design
12/10/2018

16. Example- PSUM
Initial VB design
12/10/2018

17. Example- PSUM
Final Max design
12/10/2018

18. Example- PSUM
Final Max design
12/10/2018

19. Example- PSUM
Final Max design
12/10/2018