Brave new world designing the destiny ui david candland
•Download as PPTX, PDF•
10 likes•5,496 views
A game as nuanced and filled with depth as Bungie’s Destiny requires a user interface that can present everything to the player in a way that comes naturally and is easy to digest. Learn about the challenges we faced, designs we explored, and ultimately, what led us to the decisions we made to create the game UI that the internet has been buzzing about.
Recommended
Recommended
More Related Content
More from Mary Chan
More from Mary Chan (20)
Recently uploaded
Recently uploaded (20)
Brave new world designing the destiny ui david candland
- 2. David Candland Designing the Destiny UI
- 3. Features discussed in-depth • The Free Cursor • Time-gated interactions • The Director
- 6. Why a Free Cursor? • A free cursor and tooltips allow for high information density on a single screen. • Free scrolling screens with animating interactive elements are sexy • Free cursor screens work in both 4:3 and 16:9 aspect ratios.
- 8. Why a Free Cursor? • A free cursor and tooltips allow for high information density on a single screen. • Free scrolling screens with animating interactive elements are sexy. • Free cursor screens work in both 4:3 and 16:9 aspect ratios. • A free cursor enables interactive elements of a screen to not be grid aligned
- 10. Free Cursor Goals • Spend “autoaim” time to make it feel right • Embrace it completely • Counterscrolling required
- 12. Screen with margin image
- 14. Picture of Avatar screen
- 16. Time-Gated Interactions • Avoid confirmation dialogs in our game
- 22. The Director • Create an always available, always populated list of starting points for adventure. • Incentivize players to be activity omnivores • Offer direction to inexperienced players.
- 27. The Director • Create an always available, always populated list of starting points for adventure. • Incentivize players to be activity omnivores • Offer direction to inexperienced players. • Offer a sense of place • Show you your past & future, provide a sense of accomplishment and aspiration • Display dependencies between activities.
- 30. Takeaways • Work from goals, not from specific studio requests. • Prototype early, prototype often, with small teams. • Test on coworkers, external candidates, and yourself. • Schedule plenty of time for iteration.
Editor's Notes
- Introduction David candland, ui design lead at bungie Today marks 14 years at Bungie Helped make and design the UI for halo, halo 2, halo 3, odst, reach and new game, destiny Who here has played destiny (show of hands)? UI in destiny been getting a lot of buzz around the internet, which is unusual for people to talk about game UI Today I’m going to talk about that
- 30 minutes not a lot of time, so instead of going broad and talking a little about a lot of aspects, I’m going deep about three For each of these, I’m going to go into the why, how, and the result of each of these aspects of our game and hopefully give you a few takeaways on the design process. The free cursor Time-gated interactions The Director
- The Free cursor Typical game UI to d-pad or stick around various UI elements Almost never see a cursor on a game console.
- What is the free cursor? Destiny is a game that combines shooter, social, and RPG aspects together This is one of my characters Invoke UI to get a better look at all the armor I have equipped Selection is controlled with this cursor that moves freely about the UI The background counterscrolls in the opposite direction Your inventory can fill with things like guns, armor, materials We made each item have a tangible feeling tile with an image. You feel like you’ve been collecting objects instead of just names of things. When you compare or equip items, you’re really just swapping out these tiles that you select with your cursor You can have a lot in your inventory Trying to accomplish simple functions like equipping a helmet, comparing items, and equipping a weapon a rocket launcher would’ve taken a lot of time and many, many directional clicks of the d-pad just to pull this off
- A free cursor and tooltips allow for high information density on a single screen without a lot of presses to navigate through it all Free scrolling screens with animating interactive elements are sexy Pro tip: Best way to make someone think your UI is easy to use: make it sexy. Free cursor screens work in both 4:3 and 16:9 aspect ratios Without layout changes or large dead areas on HDTVs.
- This is how the UI looks in standard def. We were able to use (for the most part) the same ui screens that we have in widescreen because the cursor allows us to simply counterscroll the content that doesn’t fit right off the screen.
- So, there were these 3 reasons, the last one, is…
- What do Director is map of solar system, Navigation around area would be guesswork… mostly left or mostly down? Arduous and unpredictable DPAD navigation requires predictable, linear alignment of interactive elements Skywatch to mothyards, is it left, or down? Could be wrong 50% of the time. Feels bad.
- We’d prototyped Came to the conclusion that we needed to move forward with this decision. Jason Jones (Project director) agreed, but gave me the following goals to work from: It’s important to work from goals. When you tell designers what to do, you stifle exploration. These were the goals For each of these, I’m going to go into the why, how and the result of each of these aspects of our game and hopefully give you a few takeaways on the design process. make it feel right This hearkens back to Halo 1. We had moved from a PC platform to a console. Aiming with thumbs was really hard. Spent weeks and weeks of time to figure out target magnetism, bullet spread, autaim, etc. Getting precision out of your thumbs is tricky. We had to address many of the same issues. Embrace it completely; no scroll bars, d-padding, required zooming or other modifier buttons Counterscrolling required. Static elements when you move the cursor feel wrong.
- When counterscrolling, the content moves from one end of the screen to the other. Essentially becomes a big scrollbar that operates on 2 different axis. Big question 1 – do you vary the speed of the cursor or vary the speed of the background Question 2 – how do you handle screens that are disproportionately long? Fast on one axis, then slow on the other? Prototyped in after Effects, then in engine to try and help us find solutions to these.
- Best solution was to make both a non-issue. Take the most screen real estate you will need, then create a buffer, a margin of space on all ends to ensure all screens counterscrolled appropriately and evenly. What about all the extra space? Scroll stuff off the screen? Yeah, but nobody chooses to move their cursor there because there’s nothing to see there. Selecting items Thumbs not too dexterous Need assistance to help you land the cursor on an object
- Investigated 2 main techniques Gravity well Friction All the variables… what if less gravity if you pegged your sticks? How much friction? What if friction only on the way in? etc. prototyped each. Ruled out gravity well. Dense screen means erratic cursor movement and lack of control. Friction felt good, got global settings to tweak from engineering Too much friction, people circumvent all the icons Too little, and cant hit targets without frustration
- Found the sweet spot , but felt wrong on the extreme cases dense and open. Asked for screen overrides to tweak down on dense screens so even though cursor speed and friction felt consistent. The thing about design, is even though on paper and mathematically things may be correct, they may not feel that way, and sometimes you need to fudge things differently to make them feel consistent and the same.
- In the end, very happy with result. Nothing perfect, we still look at ways we can improve the experience. In this last video You may have noticed the interaction prompt to bring up the vendor screen. This nicely segeways into my next topic.
- Request from Jason – I hate getting asked if I really meant to do something when I do something. I would like to eliminate confirmation dialogs from the game. How in the heck do we do that?
- To answer this question, Let’s step back a minute Many interactions in game that require holding the X button How do you communicate “hold” ? ** Now start movie ** Player taps X button, sees meter move. “oh, I guess I hold this” After having this functionality in the game, we realized we could re-use the same functionality to achieve this goal of avoiding confirmation dialogs.
- The idea that we used was to add a timer on destructive actions to give players the chance to bag out. Timer = emotional response – are you sure? This is permanent, and we’re giving you time to change your mind.
- In this example the timer is on leaving an activity prematurely. Also flashed red warning that the activity was incomplete.
- The more severe the consequences of the action, the longer the timer was, so you didn’t get in a funk of repetitive tasks. Something different is happening… Why is this taking so long?? Oh! That’s my exotic weapon! Leaving activity early takes much longer than summoning sparrow. IF you’re party leader, leaving early and bringing everyone with you takes up to 7 seconds.
- Couldn’t eliminate the dialog completely due to cert requirements, but we got rid of a lot. One we kept was deleting your character. Permanent, lose a lot of time. Didn’t want cat to sit on controller and delete your character 10 second timer, followed by confirmation on different button. It’s kind of a unique approach to the problem. Sometimes its faster, sometimes a dialog would be faster, either way, it’s far less intrusive.
- The last feature I’m going to discuss today is the director Jason gave us the following goals to work from
- First piece of UI we prototyped for Destiny back in 2010 Keep in mind this was a very early mockup, before we had any locations or story figured out. Solar system and exploration Had issues: Too much digging in and out Everything equal, what should I do next? Players that have played our halo games for many years would probably buy Desinty too, many spent years wanting to just shoot other dudes, where is that?
- One of our personas we were designing for, Todd, the drunken frat boy. How does he get to play what he wants?
- We started iterating. We tried lots of ideas. Trying to design the UI while the rest of the game was being designed concurrently, plans would changed daily. Anyone in game development knows that’s just how it goes. Sometimes we’d create problems for ourselves by trying to solve for things like including the gas giants or multiple destinations at each planet, only to find out later that those weren’t even going to be issues. So trying to not get hung up on the details was a challenge. If you’re watching this later on video and pausing to pick through all the details, here’s the voice of sanity: Sometimes it’s much easier to make data up rather than track the writers down or read story documentation, so try not to get hung up on mission details here. Much of that we pulled out of thin air. Some designs didn’t make it past b/w motion comps, some made it all the way into the engine About 8-9 major revisions, each one solving the issues the last one had. At one point,we’d completely eliminated the director altogether and combined it with the orbit lobby on one screen. Finally ended up here.
- We had streamlined the process, solved lots of issues, made it easy to do what you want and do so efficiently. But, by doing so, we had totally sucked the cool out of the most important piece of UI in the game. Looking back, the solar system was so neat, provided sense of exploration, wonder and dozens of other intangibles. Wed been chopping trees, but hadn’t been looking at the forest. We’d had directives from Jason, but he re-evaluated what was most important, and revised our goals:
- 11th hour, few months to ship, we went for it, and changed the director one more time. We knew it was right, but we were very cautious. Last chance, do it right. Went through several visual designs,
- Built working prototype as rapid as possible, pilfered web guy using html, CSS & Java script Out of time. Specs mostly finished and most details figured out, started executing. Not optimal, but we had to move.
- Very happy with result, love the design, and the solutions we arrived at.
- So that’s some insight on our design process, for better or worse. Some takeaways from these 3 examples of why, how and result: slide – conclusion – 3 takeaways: 3.Request, Can you make the button to my feature flash red? Goal, players should understand that they will get better rewards by playing a more challenging activity. Save time and money if you can root out issues early on Play from the mindset of the new user. Really easy to get in a slump of “Dev Brain” Force yourself to role play. Some issues don’t present themselves until you get them in the hands of people. Expect to revise.