workshop_mockup

Desktop Tuesday: UX Mockups

Hey Everyone, Stephanie here. The team is fixing bugs across the board, which is interesting but doesn’t make for very pretty pictures, so I thought I’d spend some time today talking about some UI improvements we have in the works for A12’s improved crafter feature.

User Experience Mockups for Crafter ++

As some of you may remember, in A12 we plan for crafters to use multiple workshops to do their magic, and for all crafters of a type to share one global town queue. This created several new requirements for the UI:

  • queue must be clearly global to the town
  • workshops must be create-able from the same queue as craftable items
  • recipe requirements now include both an optional workshop section, in addition to material requirements.

On the plus side the new inventory implementation will allow us to show the player when they do not have the materials required to craft an item, so we want to be sure to implement hinting for that and for stuck crafters also.

Since lots of people on the team have opinions about the crafting UI, the fastest way to resolve discussions is (for once) not to implement a version and revise, but to create a few screenshots of potential workshop UIs in a program like Photoshop. The first version, which is usually an edited version of a screencap of an existing UI is often really ugly. It’s only purpose is to lay out all the requirements in the loudest and least subtle way possible, so everyone knows what’s required of the design:

DT_cut1

The first version also aims to turn all the relevant moving pieces into distinct Photoshop layers, so that they can be moved around and rearranged with minimum fuss.

layers

Subsequent revisions experiment with abstraction, minimalism, and layout possibilities:

DT_cut2

DT_cut3

DT_cut_4

Once we’ve explored the full space of user experience options, we create a final version, with the actual, in-game fonts. As Tom as talked about on stream, this final mock-up is as pixel-accurate as possible, so that we’re not surprised by “things not fitting” or “things looking bad” when we actually lay all the UI elements down in code.

In this particular instance, our revisions of the crafter UI showed us that there was no good way to easily convey all the data we wanted in the original space allotted to the dialog. We decided to widen the dialog, and draw inspiration from the existing promotion UI for showing requirements via both text and icon-cues.

DT_final_1

 

Here’s what it looks like when you try to craft something you don’t actually have the requirements for:

DT_final_2

 

And finally, clicking on the queue on the right takes you to a tab dedicated to managing the queue:

DT_final_3

We haven’t actually put this UI into the game yet, so it may still change a lot before you see it, but hopefully that should give you a sense of how we decide what goes into our game UIs, and how we test out whether they’ll work before we implement them.

Misc Announcements

It looks like Stonehearth might be going to PAX Prime as part of Indie Megabooth this year! If you’re going to be in Seattle in the weekend of Aug 28th, please drop by and say hi!