Suggestions for Stonehearth UI Improvement

Suggestions
1

Hey everyone,

I saw the recent Desktop Tuesday on some UI improvements for Stonehearth, specifically concerning the soon-to-be-release crafter++ features. As a fan of Stonehearth and a full-time UI designer, I saw some room for improvement in what was presented. So I thought that I’d take some time to present some suggestions on how the crafting UI could be improved.

Note: I’m aware that these designs are presented with little context to what happens internally during the development of Stonehearth. I’m sure some of the stuff I’ll note might have already been addressed or is being worked on internally.

Another Note: The mockups I’m presenting are really low fidelity wireframes. Mostly because I don’t have access to the Stonehearth UI files and didn’t feel like re-creating the entire Stonehearth interface to get some of my points across.

Final Note: If anyone on the Stonehearth team wants to take some “inspiration” from these suggestions and put them into the game, feel free to do so!

Ok, here we go!

On crafting requirements

The final comp presented in the Desktop Tuesday doesn’t have crafting requirements organized in a way that I think will be best for players. Requirements (including crafter requirements, ingredient requirements, and other requirements) for an item are far apart from each other. I think this could cause player confusion or just make it more difficult for the player to understand what they lack to make an item.

Here’s my layout for the crafting screen:

SHS1.png1280×801 46 KB

A few things to note:

  • All of the crafting requirements are under the same section. This makes it extremely simple for a player to scroll through the requirements, see what they’re missing, and make a plan to gather those ingredients, level a crafter, or build a workbench.
  • The name of everything needed is also listed. I think that this will help immensely when there are many different crafting materials that may look similar (such as types of wood) in the game.
  • There’s plenty of room for really verbose errors that can help players quickly understand why that may not be able to craft a specific item.

On communicating crafting needs to the player

There are a few screens in the Desktop Tuesday that show what happens if a player can’t craft an item. I wanted to explore what that might look like with the UI improvements I suggested above and how it improves the existing UI.

Here’s an example screen showing the same item above if the player didn’t meet all the required crafting requirements:

SHS2.png1280×801 46.4 KB

A few things to note:

  • There’s a clear indication that the player can’t craft the item not because the item icon is blocked out, but because what they usually click to craft the item is now visibly disabled.
  • The requirement that the player doesn’t have is highlighted in some way (it’s darker in this comp), drawing attention to it hopefully helping the player find out what they are missing. In this case, it’s a lv. 5 carpenter.

There’s also a greater opportunity here to inform the player even more when they go to click the crafting button. The crafting button, when hovered over, could display a popover telling the user exactly what they’re missing:

SHS3.png1280×801 49.2 KB

There are potential issues with this (Such as what happens when the player doesn’t have 5 or 10 of the required crafting materials? How does the popover look then?), but those are certainly solvable problems.

On UI helping the player

There’s also room, I think, for the UI to proactively help the player get to what they need quicker.

For example, what if a player doesn’t have the required level crafter? How does a player handle that? What is the UI could show the player the 3 crafters closest to the required level and, when clicked, select the citizen in the game?

SHS4.png1280×801 50.7 KB

Or, if a workbench is required for this item that the player doesn’t have built, the UI allowing them to click that required work bench to go directly to that recipe in the crafting UI?:

SHS5.png1280×801 46.9 KB

That’s it

That’s all I had the time to explore. I have plenty more ideas on how the Stonehearth UI could be improved (not just the crafting interface!). Maybe I’ll do more of this is people enjoy it.

If you have some comments on the UI or what I suggested, I’d love to hear them!

I want to close out noting that none of these suggestions couldn’t have been made without the already great UI work done by the Stonehearth team. Keep it up!

12 Likes
2

hey there @joey! I’d say welcome aboard, but you’ve been here since May 2013?

why do I not recall seeing you around the campfire? :smile:

but I digress … nice work! i absolutely love your take on the UI, and while I’m stuck on my phone and can’t really get a feel for the visuals, what you’ve written makes a ton of sense…

your UI experience certainly seems well contributed here, and I hope you do consider taking a crack at other areas of the game … I’m sure the team would love to hear more!

having a fresh perspective on something is always a good thing… :+1:

4 Likes
3

I think you have some good ideas in there. Those tooltips look pretty nice and being able to click-through the workbench icon to the recipe for it would be pretty sweet.

I agree that there are situations where you’d want to just see the name of the material rather than having to mouse-over it to get the information. Wood isn’t really a good example though. The concept the team have for wood is that you can use any kind of wood log to make any item that requires wood. Eventually that could lead to your carpenter being ordered to make a Dining Table, randomly picking up an Oak Log and making an Oak Dining Table in the same way that a Level 3 carpenter might randomly make a Fine Dining Table. A good example might be “I can’t tell immediately if this recipe requires a Silver Bar or Tin Bar because their shape is the same and their color is nearly the same, but they can’t be used interchangeably”.

I do like the idea of blocking out the crafting button when you can’t actually craft the currently selected recipe. That should definitely be a thing that happens.

Not sure if intentional, but I think the way you chose to highlight what was wrong by bolding the text was a good idea. The standard Stonehearth approach is to simply change the color of the text, but this is not enough for color blind players. They may have to develop a bold version of their font though. I don’t know.

However, I think there is an argument to be made for having the Workbench and Job/Level requirements off to the side. Here are a few reasons that seem valid to me:

  • So there is a clear explanation of why you can’t do something yet and how you can fix it, without having to mouse-over.
  • The workbench and job/level requirements are requirements for unlocking the recipe, not ingredients for the recipe. They aren’t going to be consumed when you use the recipe, so they probably shouldn’t be listed in the same place as the ingredients.
  • After you’ve satisfied the unlock conditions for a recipe, you won’t want to look at them again in that game, but you will care about the ingredients for the recipe. Don’t make the player have to scan past the unlock conditions for the recipe every time they want to look at the recipe!
  • There is more room for the large picture of the craftable item. Squinting at a tiny icon to see what you are going to craft doesn’t help you understand what the item will look like as much as having a large image to check out.
  • It helps retain the blueprint/design plan feel for that section of the workshop. Not sure if this is a super important reason though.
2 Likes
4

Thanks for the reply, @Tuhalu!

Here’s replies to some of your comments:

Ideally that would be reflected in the requirements list, either through color or another marker (a red X being on top of the icon of something that you don’t have yet). This wouldn’t require a mouseover.

I think this is a valid point. You could break out those requirements outside of the materials list in something like this:

1280×801 44.4 KB

What if you get attacked by a titan that wipes our half of your population (including crafters) and most of your crafting stations? What if you need to change the job of your lv.5 crafter to a footman to help protect your town? I think right now in the game things are fairly peaceful, but as it gets closer to launch (with more content) there will be plenty of times that you’ll need to know if those base (non-material) requirements are met. I don’t think removing those base requirements helps with that.

To your point, though, it might be interesting to collapse requirements or just tell the player that crafter level and crafting station requirements have been met when they are met (to reduce interface space and focus more on materials), rather than listing those requirements out. Definitely room for improvement there.

Yeah, I had that thought, too. I think that problem could be solved in a few ways, but all of them require more work:

  1. Allow the icon of an item in the item detail to be clicked. This brings up either a larger picture of item or a window that allows the item to be seen in full-3d.
  2. Have a “preview” that can be clicked on to view the item in more detail. For example, if it were a shield we were making, you’d be able to see how the shield looks on a footman (and other classes) in addition to its iconic version. If it was a table, you’d be able to see how the table looks while placed (potentially with a citizen next to it for scale), and the iconic version as well.

Both of these, while more work for the dev team, provide a richer experience while viewing an item when it needs to be viewed in detail. I don’t think, in the normal course of a game, that the icons that denote different items need to be super large. Sure, the first few times you see an item you might need it to be big but the rest of the time (when you’re making potentially dozens of them), the image becomes less important.

Yeah, I agree that would be lost a bit here and that aesthetic is cool. Maybe there’s a middle ground between what I designed and keeping that type of aesthetic?

2 Likes
5

If a titan wipes out half your population, then you’ll notice the requirements aren’t met (crafting icon crossed out, recipe icon greyed out, many items in your queue are red, etc.) and can go look to see why.

I do think that in their final revision of the workshop, the Workbench and Crafter information fills up a bit too much screenspace. I’m just not sure how else they can place them without using up more vertical screen-space. It looks like the thing that the team had the biggest struggle with too.

6

Very good initiative!

A thought, why the workbench should be a requirement for a thing you already have? Not sure to understand well… I mean, this interface appear if you click on the workbench so technically you do have it already. Or do I miss something?

7

In the new crafter system, you’ll be able to access the workshop through a menu that has all the different crafter classes on it. There may also be several different workbenches for any given job. For example: even if you click on the anvil workbench to get the blacksmith workshop; if you want to smelt an iron bar, your blacksmith will need to use a forge workbench.

3 Likes
8

I think you kinda touched upon this, but I think the way that would bridge this gap is by having it collapsible, but not necessarily collapse by itself. Just have the standard +/- next to the title you can click to drop down or hide the requirements subsection, that way there’s always an option to check and see if

  1. you might be close to losing that requirement for whatever reason
  2. An action you take might remove your ability to make that, etc.

I think that player choice in these things is generally the best middle-ground; nothing is lost or hidden, except for what the player no longer wants/needs to see. Just my two cents worth.

2 Likes
9

@joey agreed.
I definitely look forward to reading more from you.

If I may, what would happen if instead of actually having the names of the requirement written we would just have a distinct image of it?

I believe technology UI efficiency is heading towards minimalistic.

One could still continue to put the mouse over the image and get a game dialogue message specifying the actual unit’s name, also clicking on the page could open:

Image: Farmer Icon with a clear “Lv. 1” written inside the image.

Image and image border would have color only if available or requirements met, else black and white would show us something is missing.

As a side note I have an unsolved concern, what would happen with those players assigning production queves based on future stocks?

Example:
Build: Normal Bed x 10 ( Keep in storage )
Build: Comfty Bed x 10 ( Keep in storage )

In the case this UI proposes I would not be able to assign a production for the Comty Beds until I have the normal ones ready, thus not being able to have a chain production set since Comty beds would have a big red X

10

Thank you!

I don’t think removing text just to achieve a “minimalist” aesthetic is useful. Icons are most effective when combined with text. Very rarely can an icon stand alone and provide a better experience than an icon with text (or text alone). If I were to remove all the text from the requirements of the comp that I made, it’d take the player potentially 2-3x the amount of time to understand what the requirements of the recipe are. Sure, that might not be a whole ton of time but how many times are you going to need to understand recipe requirements? Potentially hundreds of times throughout the timespan of a single play through.

However, I do like your idea of working in other icons to denote what requirements are met. A checkmark is a great way to tell the player that that requirement is met. An X is a great way to show them that requirement is not met.

I think this is a huge issue that Stonehearth as a game is going to have in the future (specifically lengthy production chains). I think this is an issue that could be solved within the UI I suggested.

With your normal/comfy bed example, a normal bed would just be a requirement of the comfy bed and factor into the overall material costs. The UI would look similar to how the original crafting requirement materials looked like: the normal bed would be an additional requirement with the materials that make up the normal bed listed underneath it. If you make a work order for a comfy bed, the game would be smart enough to make the normal bed first and then make the comfy bed automatically without the player needing to manage the supply of normal beds.

This solution gets a little more complicated if you’re making an item that requires an item that requires an item, but that can be solved by making recipes that aren’t that super complex haha.

11

There are a lot of good ideas here. But a few points:

  • I actually LIKE that I can choose to craft something that I don’t actually have the materials for. I might have a Carpenter queued up to make 50 Fences, for example, even if I only have 2 pieces of wood. As the wood comes in, he’ll just automatically run over and make more Fences as it comes in, and I really like that.

The only thing I REALLY feel is missing is a display of current resources. It doesn’t need to prevent me from doing something, it just needs to show me what I have. If I want to build a chair, it should show me: “Requires 1 Wood, You Currently Have 15 Wood” (obviously in a more simple format, like “15/1” or something.

Same thing applies to making buildings. “3/4 Mean Beds” or whatever.

In fact, I would go so far as to have a button for “Create Missing Components”. That would automatically add the appropriate items to the queue for the relevant workman. In this example, it would add “1 Mean Bed” to my Carpenter’s queue. It would save a LOT of the going back and forth, back and forth, between different screens to get the info I need.

2 Likes
12

I see your point but I don’t think that you should be able to do that with the “craft x right now” option. From my perspective, that is a weird interacting. Why? The “craft X right now” option is supposed to be immediate - as such, if I don’t have the materials required, the item can’t be crafted right now.

Maybe there’s another option that appears if you don’t have the required materials called “craft x when you have the necessary materials”. This way, the player knows that the item will be crafted when materials are available and they understand that.

Yeah, I was thinking about adding your entire stockpile of items to the number on the interface. I think that’s a great idea.

I think I mentioned it in a reply above, but that feels like another button that doesn’t need to be in the interface. If you are missing an item that’s needed to craft an item, the costs of the item you need to craft the item should be factored into the overall crafting costs of the item you want to craft. The game would understand that a comfy bed requires a mean bed and automatically craft the mean bed to fulfill the requirements of the comfy bed without the player needing to navigate to the mean bed and make X of them (to fulfill the requirements of the comfy bed). This removes the need for the player to click a button or track inventory of a whole bunch of items that are requirements for other, better, items. It would just lend itself to a much better player experience, especially late in game where there may be plenty of items that are requirements for other items.

1 Like
13

I believe we found something which bothers us but we are not having it addressed properly.

Where would those willing to craft the item find fun from? Where’s the challenge?
I mean, isn’t that the whole reason why we have a game of the craftable and find ourselves investing SO much time thinking on the crafting UI?

[quote=“Sam_Riche, post:11, topic:15142”]In fact, I would go so far as to have a button for “Create Missing Components”. That would automatically add the appropriate items to the queue for the relevant workman. In this example, it would add “1 Mean Bed” to my Carpenter’s queue. It would save a LOT of the going back and forth, back and forth, between different screens to get the info I need.
[/quote]

So, would we need a better understanding and controls on the crafting system?
Maybe another different way for us to interact with the “production” / “workshop” menu?

14

I think the fun comes from crafting better and better items and upgrading your workers. I personally don’t want Stonehearth to become a game of managing a giant inventory of items and keeping track of production. I think there should be an element of that, but it should not be the main focus of the game (which it would become if you needed to manually track and create all items that are requirements for other items).

1 Like
15

Yes. I feel like there should be a Workshop button on the bottom interface (alongside Zones and Build and whatnot). It would bring up a list of the Workshops you own. Click it, and it brings you straight to the normal Workshop interface.

Also, all Workshop and Character Sheet screens should have Left/Right Arrows to cycle through different workshops/hearthlings.

2 Likes
16

Check out the article about Crafter Workshops that got this topic started. You’ll find that there is going to be a workshop menu added. You’ll also find that crafters will share workshops, so there won’t be any need to juggle workshops to get things done.

17

Oooh, nice. But I do notice one thing that looks WORSE. And that’s adding even MORE types of Workshops to shuffle between. “Let’s see, this Comfy Bed requires a Bolt of Cloth. Where is that the Weaver? [Close Carpenter, locate and open Weaver] Nooo, not here. Hm… [Close Weaver, locate and open Loom] Ah, there it is. What was I doing again?”

The interactions need to be “snappier”. I find right now, everything takes too many steps as it is. It’s such a huge pain jumping all over trying to figure out what’s in stock, where I make what, who makes what, and what’s required for what.

In the “ingredients” list on the Comfy Bed, it should list current stock of the ingredients, as well as include a mouse-over tooltip with information about the ingredient and a direct link.

Bolt of Cloth
Current Stock: 16
Created at Loom.
Click to open Loom

18

You’ll have one window for each class. The only interaction you have with workbenches is when you ask your crafters to craft them and then place them in the world. So at worst you’d just click on the menu bar and open the weaver workshop and select cloth for crafting. Job done.

19

OOooh, I understand now. I was completely misunderstand the blog post. I was thinking “Current System, but with extra crafting stations”.

But yeah, if the station is simply a requirement, and the whole interface is in one place, that makes a lot more sense. Heck, why not just one big crafting interface for ALL recipes?

That’s actually kind of exciting, from a builder’s standpoint. I’d love to make a Smithy with the Forge, Anvil, and even Mason in one place. Same for the various crafters. This could be great!