0
Game Design 2
                 Lecture 10: Game Interface Prototyping



                                         Partiall...
Why?
• Games are expensive
 • Large teams, extended development time
• Game designers, programmers, artists will
  all spe...
Tools
• Card Sorting
• Flow Charts
 • use case flow
 • final menu build
• Wireframes
• Paper Prototype
Wireframes are:

A visual representation of an interface; used
   to communicate the structure, content,
 information hier...
Wireframes are:

A visual representation of an interface; used
   to communicate the structure, content,
 information hier...
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 id the data organised?
Functionality
• How does the interface work?
Behaviour
• How do the player and interface interact?
Types of Wireframes
      Types of wireframes

• Sketches are good
      Sketches
      Quick / experiment
  for experimen...
Low Fidelity
  Types of wireframes

• Block Diagrams
  Sketches
  Quick / experiment

• Don’t represent
  Good for feedbac...
Hi-Fidelity
• Detailed wireframes
       Types of wireframes

       Sketches


• Include comments
       Quick / experime...
Notes (dots)


n
Notes (arrows)
o the
o use
ements to
Wireframes

• Visual design
 • NOT graphical elements
 • NOT branding, mood etc.
• Avoid unnecessary elements
• Focus on c...
Wireframe Tools

• Similar to flowcharting, any vector graphics
  program is suitable
  • Visio on Windows
  • OmniGraffle o...
Paper Prototyping
• Even with a wireframe, it is possible to miss
  important interface elements
• A digital prototype wil...
Creation
• Draw UI components
• Model different states
• Ideal for work-shopping each part of
  interface
• More visual th...
• Sketch an outcome for every possible
  action on your interface
• This might seem like a lot of work but it’s
  far far ...
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 devel...
Usability Testing
• Present user with first ‘screen’
• have library of ‘screens’ and widgets
  available
• ask them to perf...
Usability Testing
• layer widgets and replace screens as
  required.
• If user confused to an action, give them
  paper an...
Useful Tools
• A List Apart article on paper prototyping
  http://www.alistapart.com/articles/paperprototyping/


• An art...
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
Upcoming SlideShare
Loading in...5
×

Games Design 2 - Lecture 10 - Game Interface Prototyping

6,091

Published on

Lecture 10 in the Caledonian University class COMU346 - Games Design 2

Published in: Education, Technology, Design

Transcript of "Games Design 2 - Lecture 10 - Game Interface Prototyping"

  1. 1. Game Design 2 Lecture 10: Game Interface Prototyping Partially adapted from: Joel Laumans - Introduction to Wireframes - http://bit.ly/48uVt7 http://www.comu346.com dfarrell@davidlearnsgames.com
  2. 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. 3. Tools • Card Sorting • Flow Charts • use case flow • final menu build • Wireframes • Paper Prototype
  4. 4. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behaviour of an interface.
  5. 5. Wireframes are: A visual representation of an interface; used to communicate the structure, content, information hierarchy, functionality, and behaviour of an interface.
  6. 6. Blueprints of design • Formalise ideas • communicate ideas • test usability
  7. 7. Uses for Wireframes • Structure • Content • Information Hierarchy • Functionality • Behaviour
  8. 8. Structure • How is the interface put together?
  9. 9. Content • What is displayed in the interface?
  10. 10. Information Hierarchy • How id the data organised?
  11. 11. Functionality • How does the interface work?
  12. 12. Behaviour • How do the player and interface interact?
  13. 13. Types of Wireframes Types of wireframes • Sketches are good Sketches Quick / experiment for experimentation Good for feedback • Sketch out different ways of representing data • Useful for ‘workshopping’ areas of interface
  14. 14. Low Fidelity Types of wireframes • Block Diagrams Sketches Quick / experiment • Don’t represent Good for feedback Lo-fidelity function Block diagrams Good for testing flows • Do represent content • Good for testing flow of interface
  15. 15. Hi-Fidelity • Detailed wireframes Types of wireframes Sketches • Include comments Quick / experiment Good for feedback Lo-fi / Content only • Describe behaviour Block diagrams Good for testing flows Hi-fidelity • Intuitive Detailed wireframes Including comments Describe content & behavior • Blueprint for “Blueprint for final design” Should be understood without explanation final design CMD Rotterdam | Interaction Design - Wireframes
  16. 16. Notes (dots) n
  17. 17. Notes (arrows) o the o use ements to
  18. 18. Wireframes • Visual design • NOT graphical elements • NOT branding, mood etc. • Avoid unnecessary elements • Focus on content and interaction
  19. 19. Wireframe Tools • Similar to flowcharting, any vector graphics program is suitable • Visio on Windows • OmniGraffle on OS X • Inkscape on Windows, Mac, Linux
  20. 20. 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
  21. 21. Creation • Draw UI components • Model different states • Ideal for work-shopping each part of interface • More visual than wireframing • may feature platform UI components
  22. 22. • 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
  23. 23. eeeee
  24. 24. • Can also help identify physical interface problems
  25. 25. 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
  26. 26. 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’
  27. 27. 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
  28. 28. 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/ • Inkscape - wireframe & drawing tool http://www.inkscape.org/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×