Paper prototyping and wireframes for game UI design

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