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!