• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
 

Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes

on

  • 7,383 views

This lecture focuses on two techniques for

This lecture focuses on two techniques for

Statistics

Views

Total Views
7,383
Views on SlideShare
5,403
Embed Views
1,980

Actions

Likes
5
Downloads
115
Comments
0

9 Embeds 1,980

http://www.comu346.com 1343
http://www.scoop.it 389
http://students.expression.edu 236
http://www.pinterest.com 7
http://www.gcu.ac.uk 1
http://www.plurk.com 1
http://webcache.googleusercontent.com 1
http://scenttrail.tumblr.com 1
https://hootsuite.scoop.it 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes Presentation Transcript

  • 2011 Game Design 2 Lecture 5: Game Interface (paper) Prototyping Partially adapted from: Joel Laumans - Introduction to Wireframes - http://bit.ly/48uVt7http://www.comu346.com david.farrell@gcu.ac.uk
  • 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
  • Tools• Flow Charts (see lecture on menus) • use case flow • final menu flow• Wireframes• Paper Prototype
  • Wireframes are:A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behaviour of an interface.
  • Wireframes are:A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behaviour of an interface.
  • Blueprints of design• Formalise ideas• communicate ideas• test usability
  • Uses for Wireframes• Structure• Content• Information Hierarchy• Functionality• Behaviour
  • Structure• How is the interface put together?
  • Content• What is displayed in the interface?
  • Information Hierarchy• How is the data organised?
  • Functionality• How does the interface work? Player clicks on ‘city’ button
  • Behaviour• How do the player and interface interact?
  • Types of Wireframes• Sketches are good for experimentation• Sketch out different ways of representing data• Useful for ‘workshopping’ areas of interface
  • Low Fidelity• Block Diagrams• Don’t represent function• Do represent content• Good for testing flow of interface
  • Hi-Fidelity• Detailed wireframes• Include comments• Describe behaviour• Intuitive• Blueprint for final design
  • Notes (dots)
  • Notes (arrows)
  • 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)
  • Wireframes• Visual design • NOT graphical elements • NOT branding, mood etc.• Avoid unnecessary elements• Focus on content and interaction
  • Wireframe Reading• What, Where and Why of Wireframes http://bit.ly/w_w_w_wireframe
  • Wireframe Tools• Similar to flowcharting, any vector graphics program is suitable • Visio on Windows • OmniGraffle on OS X • Inkscape on Windows, Mac, Linux
  • 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
  • Creation• Draw UI components• Model different states• Ideal for work-shopping each part of interface• More visual than wireframing • may feature platform UI components
  • • 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
  • eeeee
  • • Can also help identify physical interface problems
  • 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
  • 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
  • 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’
  • Useful Tools• A List Apart article on paper prototyping http://www.alistapart.com/articles/paperprototyping/• An article about wireframes & tools http://bit.ly/wireframetools• Yahoo UI Stencils http://developer.yahoo.com/ypatterns/about/stencils/• iPad stencils http://speckyboy.com/2010/04/30/iphone-and-ipad-development-gui-kits- stencils-and-icons/ (hint hint)• Wireframe grid paper http://konigi.com/tools/graph-paper