23. You startled the Witch The “Witch” in Left 4 Dead is preceded by sobbing noises & haunting music. Then an onscreen indicator & dramatic music signal her arrival.
38. Standard Fonts * - The displayed font is not Helvetica! I’m too cheap to buy it Font Family Readability Arial Sans Serif Readable, pt 10+ Comic Sans MS Cursive Difficult, even 12+ Georgia Serif Most readable Serif Font, designed for web Helvetica (*) Sans Serif Readable,10+, Apple favorite Impact Sans Serif Poor, Used for print & headlines Segoe UI Sans Serif Good, 10+, MS Favorite Times New Roman Serif Good at 12+ Trebuchet MS Sans Serif Readable, pt 10+ Verdana Sans Serif Most readable San Serif, designed for web
49. Normal Deuteranopia - Red-Green Color Blindness (6% of male gamers, 0.1% of female gamers) Protanopia - Red-Green Color Blindness (1% of male gamers, 0.01% of female gamers) Tritanopia - Blue-Yellow Color Blindness (0.01% of male gamers, 0.01% of female gamers)
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
Hinweis der Redaktion
UI & UX go hand in hand, they dove tail together What I hope to do is show you standardized concepts and approaches to UI design that improves UX This is not going to be a deep dive into usability or user psychology or eye tracking or heat maps or all the other technical mumbo jumbo What I want to show is solutions and consideration to common user problems
hard wired into our generic makeup Evoking positive emotions as soon as we look at something Common examples Apple software, modern automobile
Response times are a classic example Feels bad to sit & wait for an app to load Or maybe you were confused by new UI changes – Office 2007 ribbon (quick show of hands, does anyone actually like it!?) Subconscious, automatic
Does it evoke a happy memory? That word prestigious there is kind of important Generic products versus name brand (Cheerios – branded box that is ¼ the size of the generic product, same price) Why do we pay the difference? Because it was ingrained in us My wife always made a big deal about Cheerios when I went grocery shopping. Switched the contents of a boxed cereal, asked her and she couldn’t tell
In order of priority You want as many of these as possible Strengthen others to make up for weaknesses Not cumulative!
Here’s where things get interesting What do we really mean by recognition Recognition Includes feelings of familiarity, item matching, multiple choice exams, True/False questions, recognizing someone you know... Recognition memory can be subdivided into two components: recollection and familiarity, sometimes referred to as "remembering" and "knowing" Recall Includes: coming up with the name for person you recognized, recalling where you were when Obama won the presidency?, fill-in-the-blank or essay exams That statement TIP OF THE TONGUE, that’s your Recall mechanism kicking in Ultimately Easier / faster to recognize something than it is to remember or reconstruct a description of it and then recognize it
Words may trigger a need to read, a need to recall If there is prior art established for how something should operate, then use it or emulate it
Standardized playback control buttons. This screenshot isn’t a great example but illustrates the point See reverse, fast forward, stop, play and record The only one that’s non-standard is the first one, what could it be? possible a refresh or reset? What happens when I press it? And what do those “C” numbers stand for? Where’s the manual? Slippery slope towards a bad user experience
1981, actually the third model of the walkman Here we are looking at 30 years of innovation, but those fundamental playback controls are still the same
Bet your first reaction was that this was a real blue screen of death That was your recognition memory kicking in due to previous stimulus
Not just for UI but for brand names as well Coca-cola hasn’t changed their core font style in 100 hundred years, Pepsi evolves theirs constantly
Immediacy is a little tricky to discuss Not just waiting time for something to load Every single round trip of stimulus generates immediacy
Perceived time waiting is exponential MS Reversing progress bar / inaccurate timer Vista’s “UAC” User Access Control feature = negative immediacy What do we mean by cost? Time, money, public perception, reputation Slow respawn rates are negative, cause frustration, versus fast immediacy / restart
In Episode 2 of the BBC’s excellent “ Genius of Design ” series, ( available on Vimeo ), there is an interesting section on the Frankfurt Kitchen . Designed by Margarete Schütte-Lihotzky, the Frankfurt Kitchen was a response to the need for cost-efficient housing in Germany after WW1.
Wii, you have the immediate feedback of real world movement having an effect on the game Geometry Wars – Really fast meny options to dive in, restart levels. When you exit a game, it immediately takes you back to that same game type to be selected. It’s fast, it’s almost addictive. Make a mistake, keep that adrenaline rush going and jump right back in with 3 rapid button presses Super Metroid – Defeat Mother Brain, the final boss, game throws a curve ball at you. The base is self-destructing, you have 3 minutes to escape fighting your way back through the labyrinth. Adrenaline rush And then, if you make it back to your ship, you get a different ending based on the amount of time it took to beat the game and the number of items you collection, pushing you to replay it
Speed of clicking onscreen elements Same reason why homepages use their logo as a link to home page
I think I can wait to mell or taste in a game. Wii remote has a cool little speaker for special sound effects Dreamcast tried the VMU for a personalized video interaction, but who wants to look at their controller at a non-backlit display to pick a football play? There was a novelty Bit of a hot topic is touch… By touch, in my mind I am thinking of the vibration built into a controller or using a stylus to interact True haptic response
By the time you see a threat, it’s already too late Intensity, loudness, tone, crescendos Don’t just stick with a flat palette of sounds, be dynamic, diverse, surprise the brain with stimulus
So, who’s the most influential designer of Feedback driven games..? Las Vegas Casinos!
Las vegas
Here is where I talk about how awesome Popcap is http://www.youtube.com/watch?v=gflGglx7kcc&feature=related
Better to have a few helpful features than many unhelpful ones
Elegant design. What team are you on? What class are you playing? How much time is left? How much ammo? How much life?
March 1998
Prettier, but essentially the same basic UI layout and iconography w/ room for expansion 12 years later Immediacy, the portrait
Helps users process in to manageable units Doesn’t necessarily have to be white
Human brain can get bored by over stimulation The human brain is also good at processing isolated areas
How many average users say or believe they have a Tivo because that is the defacto brand name it became the verb? Luckily, DVR and VCR sounds similar for people to pick up on the similarities. If your name is established, then you’ve got it made. You can Facebook me your website so I can Google it when I get home after Tivoing my favorite show. Looking back at Starcraft… “Vespene gas”… Does the typical player care about “Vespene”? Even mineral might not be acknowledge. There’s really just gas & crystals
Recognition!
Hopefully the typography geeks out there are cringing at my use of Papyrus Transparency - Your not even realizing its there. Vector fonts – Adobe Illustrator – Effects > Rasterize. 3 options, Anti-Alias, Art Optimized (Supersampling), Type Optimized (Hinted)
Helvetica is also a fascinating documentary on Netflix
Syndicate Wars… anyone remember Syndicate? As much as I love cyberpunk, this is a little overkill
Masters of the Visual Heiarchy Completely customizable UIs Panels, transparencies, Indicators, custom colors & fonts for special items, damage level, Centereed error messages & warnings
The big studios have not taken this seriously Developing trend in Independent gaming Tidalus, puzzle game by Arceb… mentions color blind support Popcap has been a huge implementer of accessiblity options
Pro tan opia
For any elements in the foreground & background. Red text on a green background is a problem WoW – Item rarity in Beta
Julian Murdoch story – graphic card glitch while playing Lord of the Rings w/ friends, 15 minute seizure