UI Components Game Design Lecture
•Download as KEY, PDF•
1 like•3,758 views
This week's lecture looks at UI components and how to select the correct component for a data input / output need. This lecture leans heavily on Kr
Recommended
More Related Content
What's hot
What's hot (20)
Similar to UI Components Game Design Lecture
Similar to UI Components Game Design Lecture (20)
More from David Farrell
More from David Farrell (20)
Recently uploaded
Recently uploaded (20)
UI Components Game Design Lecture
- 1. 2011 Game Design 2 Lecture 4: UI Components
- 2. Buttons etc.
- 3. Interaction Options • Push Buttons • Radio Buttons (toggle) • Sliders • Lists • Text Fields • Drop Down Menus
- 8. Radio Buttons • Used to either • toggle • OR select from a group
- 9. Scroll Bars • Used to show more data than fits in space • Horizontal or vertical • Often have arrows at each side to allow for more controlled scrolling
- 12. Sliders • Adjust values with wide range. • Numeric ranges. • Music volume • Often used for settings • Analogue or Digital
- 14. Lists & Drop Downs • Used to display ordered data • Used to allow navigation • Can be single or multiple select • Either selection can move or list can move
- 17. Text Fields • User input for naming or communication • Intuitive with PC. • OK with iOS or Android etc... • Annoying with console
- 20. Expand / Contract • Symbols used to open and close branches on a tree structure • Familiar from Windows / Mac OS
- 23. Summary • Each of these components has a specific place where they should be used. • Try to use the correct UI component in your designs.
- 24. Mass Effect’s Interface • Most of this content sourced from Krystian Majewski’s great posts at: http://j.mp/4Itnhd http://j.mp/6FXxR9 http://j.mp/5s7At5 • Krystian Majewski’s game Trauma is part of the Humble Synapse Bundle
- 25. Character & HUD
- 34. Items
- 43. Navigation & Dialogue Spelling out awful button choices doesn’t make them good
- 45. Dialogue
- 49. The point of this is not to ‘slag off’ the Mass Effect design team - these are the kinds of problems that you find all over (most) games. We want to set a higher expectation here. Everything you design MUST have a purpose. You MUST think about the user at all times. Have a good reason for your design decisions.
Editor's Notes
- \n
- \n
- These are common UI components.\n\nWe’re going to look at these - they are each good for a specific task.\n
- Standard buttons all follow the same kind of format.\n\nUp / Over / Down / Hit.\n
- Over is rollover\n
- Down is when you press the button.\n\n
- Hit, as you’ve seen from your ActionScript classes is the part of the button that defines the actual functionality shape of the button.\n\nIt’s the area that you can hit the button - so imagine a button with curved corners or transparent areas - there is no art there, but you still want it to be clickable there.\n\n\n
- The visual element here differs by a box vs a circle.\n\nCheck boxes tend to be individual - where radio buttons tend to be grouped. \nSo, if you want one of three buttons, you would use radio buttons - but check box would be for independent things.\n
- \n
- \n
- here is a screenshot from Elemental - a sort of Civ / RPG hybrid. They opted to create their own UI for a scrollable area. Can you see it?It’s indicated by the wee circle / arrow next to the crown. The arrow is certainly a communicative element of design - but it’s not as obvious to the user as a scroll bar would be and indeed, when the game launched MANY people didn’t use the spells and options that were to the right of the panel. \n\nThis was redesigned in a patch - I haven’t played since though!\n\n
- Obviously used to adjust numbers.\n\n
- They don’t have to be boring and ‘standard’ - and in fact, in games, you often do diverge from visual standards. These are from the book.\n\nThink about how you would use a slider. You’re wanting the user to select a value from a range. You could use a pulldown menu - but when you have a wide range, that would be cumbersome. It’s much nicer to ask the user to select by dragging.\n\nHow would you expect these three sliders to behave?\nYou would expect top to be an integer style jump between discrete boxes\nthe middle would be very smooth an analogue\nthe boat, you would probably expect to jump large gaps each time between the various bars.\n\n\n
- What if you want the user to select between quite a few options - but they are not numeric? \n\nWell a list or a drop down is viable here. \n\nSo you can have different types of lists and drop downs.\n\nA list will display all items at once - a drop down will hide until you tell it to open.\n\nYou wouldn’t want a HUGE list to be open all the time - if you’re not expecting the user to either need to see them all at once, or if you’re short of space, or if there are so many you’d have to scroll etc..\n\n
- The last item on that previous screen said that either the selection can move, or the list can move.\n\nWhat we mean by this is that you can keep the highlighted / selected item stationary and move the list - or you can do the more common thing of moving the selection.\n\nThe slide shows one way you might move the actual list. \n\nX Box UI has this - you push right on stick and the whole list of options moves.\n\nAnother example is the madden trophy room - each ‘bit’ of the room contains trophies and records and is an interactable screen - and left and right jumps between screens - you can think of these screens as being a list.\n
- So here’s an example of a very information rich screen from Civ.\n\nYou can see sliders for scrolling - and note how they look different when there is other content and when there is not.\n\nAlso notice the difference between the ‘greyed out’ pulldowns and those you CAN pull down.\n\nCheckboxes... etc\n\nSee at top - when it makes no sense to have pulldown (e.g. Closed) they remove the widget but don’t leave blank - it’s less confusing on the eye in this case.\n\nAlso, notice how they have used colour differently here to separate the sections.\n
- Easy on certain platforms - but of course on mobile you wouldn’t necessary want to type long form.\n
- Some problems with this.\nno submit\nno case\nno delete\nno numbers (is that problem?)\nSLOOWWW\n\nthis is why arcade games have just 3 chars!\n
- example from xbox - look at how they’ve treated this box. \n\nThis is a credit card entry - why SHOW the chars? Why allow select? Why not wrap?\n
- \n
- Here is an example of using a non-game UI element in a game that’s quite innovative.\n\nEach icon on left is a city. You can tell how many buildings and how many units by looking at the coloured boxes next to the icon.\n\nYou can click the + to expand.\n
- When you expand, it shows the actual units.\nThis is a cool UI element - and this is something I want you to try to do - don’t just judge a game - try to find the good bits of bad games and bad bits of good games. These guys were the first to introduce an element like this - and whilst it has some difficulties scaling to a very large empire, it’s a really nice wee piece of functionality.\n
- \n
- \n
- Quite a capable character generation system.\n\nBUT - Blind re-use of generic interface elements.\n\nThe game make heavy use of the horizontal slider. \nOK for analogue things like mouth width.\n\nCan anyone see problem here with that?\n\nMouth SHAPE\nWhy use a linear value thing here? This is a collection of various discrete presets - a slider is the worst possible control from this.\n\nTo make a decision, you have to go through each of the items, seeing only one item at a time.\n\nAlso, the sliders are continuous and you don't have visible segmentation - so no idea about how many presets there are or which one you're currently looking at. \n\nHow would you find a preset you like?\n
- Thumbnail buttons\ncan see many options at once \nno need to cycle through them all to find one you like\n\nSo why is ME's one shit?\nIt's not the right tool for the job.\nIt's a solution to save time for a few programmers at the expense of millions of players.\nThis solution is the kind of thing that happens in a scenario where resources like programmer time is scarce. I.e you only see this screen once.\n\nIf you see crappy design in a screen that you only interact with once - fair enough.\n\n
- Hud is more common (throughout entire game)\nAlso, ME is an action game with only a little Information design so not as hard to communicate as a stat heavy game or that customisation screen.\n\nStyle over function\n\nSo let’s actually break down the UI here and see where they could improve it\n
- Firstly - italics \nhard to compare when the health bars are aligned across diagonals.but WHY italics? Nowhere else in the entire interface do they use italics\n\nAlso - not Shepard's bar is longer than the others\nimplication is that he has more health?\nnot the case.\nhealth bars don't increase in size as the character levels up.\nso it's just a %age bar\n\nmaking a %age bar longer than other you compare it to is a major information design failure.\nit implicitly makes players arrive at wrong model of how the interface works.\nit just makes comparisons between the three health bars MORE difficult than it already is with the italics\n\nPerhaps the goal here was to highlight Shepard as the main character.\ngraphic design solution should be larger font, put his name on top of list… use spacing… text indent to show second order of other characters.\n\n
- Let’s have a closer look at the icons next to the health bars here.\n
- Ask someone who didn't play ME to identify the two icons\n\nUpper is related to health yes..\nThe health one is weird but recognisable due to cross\n\nLower is a grenade \nIn ME the grenades are discs\nthis is example of graphic designer with poor understanding of semiotics\nthe designer has used a visual representation of the game grenade instead of a symbol that would communicate the purpose of the icon.\n\nAlso, note the poor font choice. Very little space around the number and also italicised and hard to read at a glance.\n\n
- The game does a poor job of communicating successes. \n\nSee that box to the right?\n
- \nEverytime you kill an enemy or complete a quest you get short summary of xp / money / loot / notification of ding\n\nonly flashes for a few seconds\nno way to bring it back up or read it in a log of messages\nalso tiny font\n\nalso - missing important info. If I get XP - I get no info on how much to take me to next level.\n\ngames like this are driven by a cycle. Killing baddies to get better at killing baddies\n\nyou need to help the player SEE that they are getting better.\n\n
- OK, so let’s move onto some of the more info rich screens.\n\nLet’s say you level up - this is where you go to upgrade your character.\n\nLooks OK at first - but you’ll notice that the information doesn’t quite add up to full picture.\n\nE.g\nRegenerate 5 HPS\nonly useful if you know current rate of HPS regen\nonly good if you know whether this increases the HPS or replaces it\nAlso - characters use stat-boosting equipment - so what does this mean in the context of all my stat boosts?\n\nThe REALLY IMPORTANT message here is that information is USELESS without context.\n\nThey’ve probably been trying to simplify the traditional RPG experience but they’ve damaged their design - there’s a phrase by Tufte that we’ll come back to later - but he says “To clarify, add detail” - and in this case, it would actually make the game easier to understand if you added more detail to this screen.\n\nInconsistent use of Visualisations Vs Quantifications\n\nThree different values with different visualisation strategies.\n\nHealth Points - Paragon & Renegade bars - Experience points\n\nEach uses a different representation strategy.\n\nXP is two numbers with a slash\nHP is two numbers as a fraction.\nParagon & Renegade are curved %age bars.\n\nThere doesn’t seem a good reason to use such dramatically different strategies.\n\nThese strategies also clash with how these numbers are used elsewhere in the game.\n\ni.e - in the HUD, you don’t see actual number of HP - you just see the %age bars (as seen earlier).\n\nConversely, in the action view - when you receive paragon or renegade points, you see the actual number - which you can’t see here.\n\nThis effectively PROHIBITS information transfer from one part of the game to another.\n\nAnd as insult to injury - the actual choices are poor! The curved bars are stylish - but the prevent comparisons.\n\nThe XP points lack punctuation for easy number reading. They don’t have a fixed width font here so a smaller number may actually look bigger than a large number!\n\nThere is an additional, hidden problem with this screen that isn’t obvious.\nYou see that you can flip through your team members with LT and RT. \n\nHidden problem is that although you can acquire 6 characters, you can only access 3 at a time. You can only see the stats of characters with you on a mission.\n\nHowever, since you can only CHOOSE your team upon beginning a mission, you have to begin a mission with a character in order to see their stat sheet. It’s not a HUGE deal since chars on your ship also receive xp\n\n.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n