game design 2 (2013): lecture 5 - game ui prototyping
DESCRIPTION
Paper prototyping and wireframes for game UI designTRANSCRIPT
![Page 1: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/1.jpg)
Game Design 2Lecture 5: Game Interface (paper) Prototyping
http://gcugd2.com [email protected]
Partially adapted from:Joel Laumans - Introduction to Wireframes - http://bit.ly/48uVt7
2013
![Page 2: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/2.jpg)
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
![Page 3: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/3.jpg)
![Page 4: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/4.jpg)
![Page 5: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/5.jpg)
Tools
• Flow Charts (see lecture on menus)
• user scenarios flow
• final menu flow
• Wireframes
• Paper Prototype
![Page 6: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/6.jpg)
Wireframes are:
A visual representation of an interface; used to communicate the structure, content,
information hierarchy, functionality, and behaviour of an interface.
![Page 7: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/7.jpg)
Wireframes are:
A visual representation of an interface; used to communicate the structure, content,
information hierarchy, functionality, and behaviour of an interface.
![Page 8: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/8.jpg)
![Page 9: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/9.jpg)
Blueprints of design
• Formalise ideas
• communicate ideas
• test usability
![Page 10: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/10.jpg)
Uses for Wireframes
• Structure
• Content
• Information Hierarchy
• Functionality
• Behaviour
![Page 11: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/11.jpg)
Structure• How is the interface put together?
![Page 12: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/12.jpg)
Content• What is displayed in the interface?
![Page 13: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/13.jpg)
Information Hierarchy• How is the data organised?
![Page 14: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/14.jpg)
Functionality• How does the interface work?
Player clicks on ‘city’ button
![Page 15: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/15.jpg)
Behaviour• How do the player and interface interact?
![Page 16: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/16.jpg)
Types of Wireframes
• Sketches are good for experimentation
• Sketch out differentways of representingdata
• Useful for ‘workshopping’ areasof interface
![Page 17: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/17.jpg)
Low Fidelity
• Block Diagrams
• Don’t representfunction
• Do represent content
• Good for testingflow of interface
![Page 18: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/18.jpg)
Hi-Fidelity
• Detailed wireframes
• Include comments
• Describe behaviour
• Intuitive
• Blueprint for final design
![Page 19: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/19.jpg)
Notes (dots)
![Page 20: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/20.jpg)
Notes (arrows)
![Page 21: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/21.jpg)
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)
![Page 22: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/22.jpg)
Wireframes
• Visual design
• NOT graphical elements
• NOT branding, mood etc.
• Avoid unnecessary elements
• Focus on content and interaction
![Page 23: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/23.jpg)
Wireframe Reading
• What, Where and Why of Wireframeshttp://bit.ly/w_w_w_wireframe
![Page 24: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/24.jpg)
Wireframe Tools
• Similar to flowcharting, any vector graphics program is suitable
• Visio on Windows
• OmniGraffle on OS X
• Inkscape on Windows, Mac, Linux
![Page 25: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/25.jpg)
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
![Page 26: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/26.jpg)
Creation
• Draw UI components
• Model different states
• Ideal for work-shopping each part of interface
• More visual than wireframing
• may feature platform UI components
![Page 27: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/27.jpg)
![Page 28: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/28.jpg)
• 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
![Page 29: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/29.jpg)
![Page 30: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/30.jpg)
![Page 31: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/31.jpg)
eeeee
![Page 32: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/32.jpg)
• Can also help identify physical interface problems
![Page 33: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/33.jpg)
![Page 34: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/34.jpg)
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
![Page 35: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/35.jpg)
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
![Page 36: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/36.jpg)
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’
![Page 37: Game Design 2 (2013): Lecture 5 - Game UI Prototyping](https://reader033.vdocuments.net/reader033/viewer/2022051400/553a97b6550346bd418b4595/html5/thumbnails/37.jpg)
Useful Tools• A List Apart article on paper prototyping
http://www.alistapart.com/articles/paperprototyping/
• An article about wireframes & toolshttp://bit.ly/wireframetools
• Yahoo UI Stencilshttp://developer.yahoo.com/ypatterns/about/stencils/
• iPad stencilshttp://speckyboy.com/2010/04/30/iphone-and-ipad-development-gui-kits-stencils-and-icons/ (hint hint)
• Wireframe grid paperhttp://konigi.com/tools/graph-paper