Tuesday, July 19, 2011

The Bag Lady Experience

So I think I may be going around the bend on inventory and crafting. I have this tingling feeling, and I can't tell if it's spidey sense warning me against over-ambition for my game, or if it's just some healthy fear of the unknown.

A few posts ago, I unveiled my first draft of inventory management. And as usability for inventory management often goes, it hobbled around shakily in the wild for a few moments before being torn asunder by a razor-sharp predator. I had Rochelle test it, while I watched over her shoulder (holding my tongue). Let's just say it didn't fare well. Even my own testing showed some extreme tediousness moving things around. And Mitchell's comment only further extinguished any doubt that this was the wrong approach. It was pretty clear version #1 wasn't going to cut it.

Version #1
Which is a shame, since it was really elegant on the coding side: simple and extensible. But, as should've guessed from previous experience, simple and elegant code doesn't necessarily translate into ease-of-use.

So my next draft was going to include a somewhat more graphic UI. Instead of clicking on arrows alongside names of body parts to see the contents of that body part, the user could click on body parts in a silhouette to see items stored there. It looked something like this:

Version #2
I think this was an improvement. In this version, rolling over any body part highlighted it, and clicking on it showed installed items for that body part in the center of the screen. In this mocked-up example, three items can be equipped into the current slot. I guess I figured I'd want to be able to wear three shirts at the same time, to simulate "the bag-lady experience." Alongside each slot is a storage area, that would only appear if an item was installed with storage space.

There were still some flaws, though. As Mitchell pointed out, it's nice to see everything you've got at once, and not have to click on menus to see additional items. In this case, one could (at best) see items on the paper doll, and in the current slot, before clicking. And that's assuming I could find a clever way to show all the items on the paper doll. Just looking at it, there's no way the hands and "HOLD" slots could fit some of the objects I envisioned going there (like a quarterstaff, or a rifle). And showing layered clothing was only going to complicate it further.

The three icons on the left were supposed to be other inventory-related screens one could get to. Dragging any item from the paper doll or center area onto one of those icons moves it to the first available slot in that icon's category. I figured the user could pile stuff into the crafting area, then switch to that screen to craft stuff.

But Mitchell's comment kept nagging at me. Why couldn't I try to show all items equipped and held at once? Why not bend over backwards to make the UI as easy as possible on the user? So I went back to the drawing board, and made version #3.

Version #3
Ok, so now we can see everything the user is carrying at once. Equipped items show up over the silhouette, in place. Any equipped items with storage space enable the storage boxes surrounding the player. I backed-off "the bag-lady experience" and allow only one item per slot now. (Except for necklaces and rings, which have blow-out slots on the top and top-left, respecitvely)

In theory, this makes personal inventory management a breeze. Just drag-and-drop items around to equip or store them. No clicking sub-menus to see each set of items. And now that slots are restricted to one item each, I can actually display items on the paper doll.

But there are still two issues. First of all, this is going to be a bitch to make. There's going to be some special-case code in here, for sure. And the paper doll means extra artwork to make equipped items look good when combined. It's more work, but I think it's worthwhile work. Usability trumps elegant code, in this case.

The second issue is what to do about the other item-related UIs. All down the left-hand side of the screen are icons for other UIs that involve items. From top-to-bottom, they are:
  1. Items - The current screen: personal inventory and paper doll.
  2. Vehicle - Any vehicle the user has found and equipped (anything from a shopping cart to a pick-up)
  3. Crafting - This is to be the screen where the user combines items and skills to craft other items.
  4. Respond - This is to be the screen where the user combines items and skills to respond to an encounter.
#1 is solved in the above image. #2 can probably work a lot like #1. it just wouldn't fit on the same screen because I wanted the vehicle to potentially have a ton of storage space. It's unfortunate the two can't co-exist simultaneously on-screen, but I think I can manage the next best thing by having the screens flip when the user rolls over each screen icon with the mouse. In this design, the user could potentially grab an item from the backpack on the above screen, and drag it over to the "Vehicle" icon. The screen would auto-flip to the vehicle storage area, where the user could drag into the storage space. Alternatively, the user could just drop the item onto the "Vehicle" icon and the game would try to auto-add it to the vehicle.

It's #s 3 and 4 that scare me. Honestly, I spent half a day working on mockups of #3, and I'm still not satisfied. I looked at other crafting UIs out there too. I just haven't come up with anything that seems both intuitive and easy-to-use. Here's a rough mockup so far:

Crafting UI Mockup
As you can see, it's extremely busy and clunky looking. I envisioned the user dropping items in the storage area on the left side (much like how the vehicle would work, above), toggling one or more pertinent skills in the middle list, and then clicking craft to create an item in the right storage area.

The trouble is that I think this'll be really tedious to use. I want this UI to support two types of behavior. First of all, I want the user to feel encouraged to experiment with item and skill combos to make stuff. That means lots of trial and error. Getting items into this screen is probably already too clunky to begin with, without having to do it dozens of times with different combos to see what results.

Secondly, I want the user to be able to quickly use already-discovered recipes. Somehow, the user should be able to browse recipes they already know, see whether they have the requisite materials, and craft one or more copies.

I'm not sure what to do. My brain became pretty burned-out after mocking up both the "Items" screen and this much of the "Crafting" screen. I needed a break from the UI design, so I decided to try and implement the "Items" screen as-designed, and come back to crafting later. I think "Items" is about as easy on the user as it can get, so it's probably safe to work on. The only thing better would be to integrate the other screens into the "Items" screen so the user didn't have to page-flip. But there's just not enough real-estate to do that.

Has anyone seen a crafting screen layout that might work here? Maybe I've made incorrect assumptions on the required inputs? I assumed skills would be a fun thing to include in recipes, since they act almost like verbs on the nouns of the item ingredients. But is that over-engineering? Do the skills add value? Maybe skills should be passive, so the user creates things with items only, and their skills determine the success rate or quality of the output? Maybe the user doesn't drag items from other screens into this one, but instead just sees all items they own here, and picks them from this screen?

Like I said. My brain was on "E" after hours on this problem, so I'll need to recharge before revisiting it. If anyone has insight, though, I'm all ears!


  1. Take a page from Terraria and leave the UI for now and continue working on the core gameplay. Its not pretty (the Terraria UI) and gets cluttered easily, but you're not going to know to what extent your needs are until you actually get all the items in game and tested for balance.

    Who knows, you may never have a quarterstaff, or a rifle because you find them overly overpowered. You may even decide to allow mule NPCs, chests or other things.

    Functional wins, at least in this stage.

  2. That's true. A lot of this is system design through imagination, and the rigors of actual use may tear them apart. For now, I'm doing what you suggest: taking a decent enough crack at it to cover immediate needs, and leaving it open to further tweaking as the game develops. The UI designer in me bleeds a little, but the producer in me needs to fry bigger fish.

    And Terraria looks fun! I heard about it while at BioWare, but never gave it a try. Then I saw it again while researching crafting. Took a lot of strength not to download it!

  3. I've been playing way too much of it lately thanks to the Steam sale. It's a good exercise in seeing what rough corners can be left til later, considering their really rapid development cycle - also a bit of how much reusing/reskinning items and behaviors goes a long way.

  4. Hmm. Looks like you've made it to the front lines of the realism vs. ease of use fight.
    Games lean towards some abstraction for inventory management because realism can quickly become tedium.
    The description/pictures you've shown also make me thing you're quite close to recreating World of Warcraft's inventory. (all non-slot inventory consolidated into the main "backpack" area, with additional containers able to be opened). It's worth checking theirs out (plus the most common UI mods) for research.

    That said, I agree with dataferret. No one is going to come to your game just for the inventory management. Inventory structure should respond to the core gameplay. (I originally was going to add "not influence it" here, but that's not entirely true. As ME1 taught us, you need to spare a few thoughts to how items will be used, to cap your designs within the realm of human capability.)

  5. For Crafting, there's two ways to go about it, I think.

    I'd try a recipe book, that is quick to flip through and will tell you if you have the right ingredients (and make the item right there if you wish). Then the more tedious crafting interface is only needed once (or less) per recipe, when experimenting or cheating from the wiki.
    That method puts the emphasis on finding and discovering recipes.

    The other method has a good example in Terraria. The emphasis is on finding the components instead.. all the recipes are immediately available, and you can show the Guide NPC an ingredient to get a list of everything it can be used for. Digging/collecting things is a core game thread, so this works well with that. (versus the experimentation and discovery of the other method).

  6. Thanks for the WoW UI tip. I checked out some of the mods, and it seems some of the more popular ones revolve around tabbed views of bags, and saving whole outfits for use later. Very useful ideas to consider!

    And for crafting, I think the recipe book is a definite yes. No need to go through lengthy assembling once you've found a recipe that works. I'd feel better about the trial-and-error tedium if it's only once per recipe.

    And yeah, maybe it's time to let this iteration of UI steep a bit, and focus on gameplay some more. Iterations to the UI will be better-informed once I've used them in-situ for a while.