1) Wireframes are visual representations of interfaces used to communicate structure, content, hierarchy, functionality, and behavior to help formalize and test interface design ideas. 2) Paper prototyping allows designers to create inexpensive mockups of interfaces to identify problems and test usability by modeling different interface states that can be handed to users. 3) Usability testing with paper prototypes involves presenting users with paper "screens" and having them perform tasks while designers observe, take notes, and identify required changes based on user feedback and confusion points.

1. 2013
Game Design 2
Lecture 5: Game Interface (paper) Prototyping
Partially adapted from:
Joel Laumans - Introduction to Wireframes - http://bit.ly/48uVt7
http://gcugd2.com
david.farrell@gcu.ac.uk

2. Why?
• Games are expensive
• Large teams, extended development time
• Game designers, programmers, artists will
all spend a lot of time implementing the
interface
• prototypes are a design aid
• prototypes are a communication aid

5. Tools
• Flow Charts (see lecture on menus)
• user scenarios flow
• final menu flow
• Wireframes
• Paper Prototype

6. Wireframes are:
A visual representation of an interface; used
to communicate the structure, content,
information hierarchy, functionality, and
behaviour of an interface.

7. Wireframes are:
A visual representation of an interface; used
to communicate the structure, content,
information hierarchy, functionality, and
behaviour of an interface.

9. Blueprints of design
• Formalise ideas
• communicate ideas
• test usability

10. Uses for Wireframes
• Structure
• Content
• Information Hierarchy
• Functionality
• Behaviour

11. Structure
• How is the interface put together?

12. Content
• What is displayed in the interface?

13. Information Hierarchy
• How is the data organised?

14. Functionality
• How does the interface work?
Player clicks on ‘city’ button

15. Behaviour
• How do the player and interface interact?

16. Types of Wireframes
• Sketches are good
for experimentation
• Sketch out different
ways of representing
data
• Useful for
‘workshopping’ areas
of interface

17. Low Fidelity
• Block Diagrams
• Don’t represent
function
• Do represent
content
• Good for testing
flow of interface

18. Hi-Fidelity
• Detailed wireframes
• Include comments
• Describe behaviour
• Intuitive
• Blueprint for
final design

19. Notes (dots)

20. Notes (arrows)

21. Tips
• Use potentially ‘real’ text, not fake ‘Lorem
Ipsum’ style text
• Start with the largest part of interface first
(main canvas) and work from largest to
smallest.
• Remember audience is mixed (artist,
designer, programmer, producer, user)

22. Wireframes
• Visual design
• NOT graphical elements
• NOT branding, mood etc.
• Avoid unnecessary elements
• Focus on content and interaction

23. Wireframe Reading
• What, Where and Why of Wireframes
http://bit.ly/w_w_w_wireframe

24. Wireframe Tools
• Similar to flowcharting, any vector graphics
program is suitable
• Visio on Windows
• OmniGraffle on OS X
• Inkscape on Windows, Mac, Linux

25. Paper Prototyping
• Even with a wireframe, it is possible to miss
important interface elements
• A digital prototype will allow for expert
and user testing
• Even this is quite expensive
• Paper prototyping allows a relatively cheap
method of evaluating

26. Creation
• Draw UI components
• Model different states
• Ideal for work-shopping each part of
interface
• More visual than wireframing
• may feature platform UI components

28. • Sketch an outcome for every possible
action on your interface
• This might seem like a lot of work but it’s
far far lest work than a digital mock-up or a
real interface

31. eeeee

32. • Can also help identify physical interface
problems

34. Where does it fit?
• Where a wireframe shows flow, a paper
prototype shows UI elements and can be
handed off to a developer.
• Can be used along side wireframes to pitch
to team / publisher
• Can be used to test with audience

35. Usability Testing
• layer widgets and replace screens as
required.
• If user confused to an action, give them
paper and ask them to sketch what they
would expect.
• video sessions and label user sketches to
help identify required changes

36. Usability Testing
• Present user with first ‘screen’
• have library of ‘screens’ and widgets available
• ask them to perform an action and state steps
• every step should be a verb like ‘click on this’ or
‘press this button’

37. Useful Tools
• A List Apart article on paper prototyping
• An article about wireframes & tools
• Yahoo UI Stencils
• iPad stencils
http://www.alistapart.com/articles/paperprototyping/
http://bit.ly/wireframetools
http://developer.yahoo.com/ypatterns/about/stencils/
http://speckyboy.com/2010/04/30/iphone-and-ipad-development-gui-kitsstencils-and-icons/ (hint hint)
• Wireframe grid paper
http://konigi.com/tools/graph-paper