Session 4
David Mullich
Game PreProduction
The Los Angeles Film School
UI and UX
The terms UI and UX are sometimes (incorrectly) used
interchangeably, but they have specific meanings.
UI, or Us...
UI and UX
To look at it another way:
 The UI of a car is its steering wheel, its pedals, the dials and
controls on the da...
What Does Good UI Do?
A good UI tells you what you need to
know, and then gets out of the way.
What Does Bad UI Do?
This.
Fundamental Questions
1. Does this interface tell me what I need to know right now?
2. Is it easy to find the information ...
Screen Flow
Draw a box of each of your game screens
and connect them with lines to mark basic
interactions and behavior.
T...
Screen Flow
Wireframes
Everyone loves pixel-perfect mockups, but there’s a huge issues with
polished designs: they take too much time ...
Wireframes
Wireframes
Wireframes
Create a page in your Concept PowerPoint that
shows the following:
 Camera: What view do we have into this world
(first p...
1. Complete your Controls Wiki page:
 Describe your controls and what they do
 Explain why you chose this control scheme...
2. Complete your Interface Wiki page
 Create flowchart of your game screens. Examples of screens that might be in your
ga...
Upcoming SlideShare
Loading in...5
×

LAFS PREPRO Session 4 - User Interface

212

Published on

Game Design lecture and assignments for Session 4 of The Los Angeles Film School's Game PreProduction course.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
212
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "LAFS PREPRO Session 4 - User Interface"

  1. 1. Session 4 David Mullich Game PreProduction The Los Angeles Film School
  2. 2. UI and UX The terms UI and UX are sometimes (incorrectly) used interchangeably, but they have specific meanings. UI, or User Interface, refers to the methods (keyboard control, mouse control) and interfaces (inventory screen, map screen) through which a user interacts with your game. UX, or User Experience, refers to how intuitive and enjoyable those interactions are.
  3. 3. UI and UX To look at it another way:  The UI of a car is its steering wheel, its pedals, the dials and controls on the dashboard.  The UX of the car comes from intangibles like the brake pedal being responsive, the engine smoothly accelerating when you step on the gas, the gear stick having just the right amount of resistance - those things that make the car enjoyable to drive.
  4. 4. What Does Good UI Do? A good UI tells you what you need to know, and then gets out of the way.
  5. 5. What Does Bad UI Do? This.
  6. 6. Fundamental Questions 1. Does this interface tell me what I need to know right now? 2. Is it easy to find the information I'm looking for, or do I have to look around for it? (Are the menus nested so deep that they hide information from the player?) 3. Can I use this interface without having to read instructions elsewhere? 4. Are the things I can do on this screen obvious? 5. Do I ever need to wait for the interface to load or play an animation? 6. Are there any tedious or repetitive tasks that I can shorten (with a shortcut key, for example) or remove entirely? Desi Quintans
  7. 7. Screen Flow Draw a box of each of your game screens and connect them with lines to mark basic interactions and behavior. This first step allows to the team to understand how large a game will be. It also helps with defining controls, data and programming requirements.
  8. 8. Screen Flow
  9. 9. Wireframes Everyone loves pixel-perfect mockups, but there’s a huge issues with polished designs: they take too much time you can afford in the beginning. So, in the Preproduction phase, we usually create line drawings, or “wireframes”, of what each screen will look like. As a result of this wireframing process we get clear estimates and visual documentation, directions to work in and every teammate comprehending how an app will work and how components interact between each other.
  10. 10. Wireframes
  11. 11. Wireframes
  12. 12. Wireframes
  13. 13. Create a page in your Concept PowerPoint that shows the following:  Camera: What view do we have into this world (first person, third person, top- down, isometric, side-scrolling, 2D, 3D)?  Controls: How you will use the mouse, keyboard or keypad to control the game? List the main controls and what actions they perform.  Main Gameplay Screen Wireframe: Label all the relevant buttons, icons, indicators. PowerPoint
  14. 14. 1. Complete your Controls Wiki page:  Describe your controls and what they do  Explain why you chose this control scheme 2. Complete your Camera Wiki page:  What view do we have into this world (first person, third person, top- down, isometric, side-scrolling, 2D, 3D)?  How does the camera behave as the player moves? 3. Complete your Character Wiki page:  Who are we controlling and what can this character do? Think in verbs.  What special abilities does the the character have (e.g., magic, combo attacks, BFGs)? How do they work?  How does the character move? Are there different modes (walk, run, swim, fly, swing, crawl, climb, jump, vehicles) or speeds? Wiki
  15. 15. 2. Complete your Interface Wiki page  Create flowchart of your game screens. Examples of screens that might be in your game include: ○ Title Screen ○ Main Menu ○ Gameplay ○ Settings (volume control, difficulty setting, restart button, quit game) ○ Help ○ Win ○ Lose  Create wireframes for all game screens. Wiki
  1. A particular slide catching your eye?

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

×