Your SlideShare is downloading. ×

Game Design 2 (2013): Lecture 5 - Game UI Prototyping

1,152

Published on

Paper prototyping and wireframes for game UI design

Paper prototyping and wireframes for game UI design

Published in: Education, Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,152
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 3. Tools • Flow Charts (see lecture on menus) • user scenarios flow • final menu flow • Wireframes • Paper Prototype
  • 4. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behaviour of an interface.
  • 5. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behaviour of an interface.
  • 6. Blueprints of design • Formalise ideas • communicate ideas • test usability
  • 7. Uses for Wireframes • Structure • Content • Information Hierarchy • Functionality • Behaviour
  • 8. Structure • How is the interface put together?
  • 9. Content • What is displayed in the interface?
  • 10. Information Hierarchy • How is the data organised?
  • 11. Functionality • How does the interface work? Player clicks on ‘city’ button
  • 12. Behaviour • How do the player and interface interact?
  • 13. Types of Wireframes • Sketches are good for experimentation • Sketch out different ways of representing data • Useful for ‘workshopping’ areas of interface
  • 14. Low Fidelity • Block Diagrams • Don’t represent function • Do represent content • Good for testing flow of interface
  • 15. Hi-Fidelity • Detailed wireframes • Include comments • Describe behaviour • Intuitive • Blueprint for final design
  • 16. Notes (dots)
  • 17. Notes (arrows)
  • 18. 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)
  • 19. Wireframes • Visual design • NOT graphical elements • NOT branding, mood etc. • Avoid unnecessary elements • Focus on content and interaction
  • 20. Wireframe Reading • What, Where and Why of Wireframes http://bit.ly/w_w_w_wireframe
  • 21. Wireframe Tools • Similar to flowcharting, any vector graphics program is suitable • Visio on Windows • OmniGraffle on OS X • Inkscape on Windows, Mac, Linux
  • 22. 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
  • 23. Creation • Draw UI components • Model different states • Ideal for work-shopping each part of interface • More visual than wireframing • may feature platform UI components
  • 24. • 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
  • 25. eeeee
  • 26. • Can also help identify physical interface problems
  • 27. 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
  • 28. 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
  • 29. 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’
  • 30. 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

×