15 replies to this topic

[teyken]

Realmstone - Youtube video here
(formerly Pilgrims of Parnassus)

The game is coming along really well but I have a serious problem;
Most people who try my do not really understand the mechanics or get stuck quite early on, If i spend about 10 minutes explaining the core mechanics i get really positive feedback.
I just don't seem to be able to present the amount of options available in an intuitive fashion. I could really use some pointers from someone with more experience creating user interfaces.

This is the menu I cam currently running:

This is one of the first screens the player will meet, from this screen the player chooses the champion he is going to play in the world.

I have marked five critical locations on this screen:

1 This i the physical setup pf the character, the looks and the gear - but also the archetype and subclass

2 These are these are the abilities the champion will know when he enters the world, in the beginning very few are available

3 These buttons are extremely important as the switch between the three different screens available, but they do not become important before the player has gotten his hands on some loot and experience points.

4 The exit button leaves the house screen and makes the player enter then world, this button is replace by a 'hire' button when the house does not currently have a champion, the disband button releases the current champion from service.

5 Resource bar, first line displays the resources available, second line displays cost of current champion.



This is the upgrade house screen, from here you can purchase new champion options

1 This line of buttons filters the upgrades by categories

2 These are the currently available upgrades in the chosen category, hovering the mouse over one displays info about that upgrade in the lover right corner (5) and clicking it selects it and displays what will be unlocked by purchasing this upgrade in the right side of the screen (4), clicking it will also enable a 'Buy' button just above the info field (5)

3 As you can see the 'Upgrades' button is now highlighted to show that we are currently in the upgrade screen - you can navigate back to champion selection by clicking the one named 'Champion'

4 In this field the currently selected upgrade is displayed and all unlocks are listed below it.

5 This is the info box, this box exists in all screens and will display info about anything the mouse is currently hovering over.


If you have any ideas on how to improve this menu system I would be very grateful!
(also is there a way for me to display my screenshots in 100% width in my post - I'm unsure how to write the tag, sorry)

Edit* Forgot to mention that there is a playable Alpha available at http://www.realmstone.erethic.eu/ in the download section (VOIP homepage)

Edited by teyken, 13 September 2012 - 03:35 PM.

[Casey Hardman]

Since you have some space along the bottom, you could make a box of text explaining what each field means when the player mouses over them.

For example, it could explain what the archetype is when the mouse is over it, and the same for the subclass. When a player is 'inspecting' (whatever you want to call it) a field like this, you could put an outline around the specific field so they know which one you're talking about. Then, since the main menu's "section 2" is rather self-explanatory, you could just have the entire section outlined explaining "This is where you determine which skills you have, and which buttons you'll be pressing to use them" rather than explaining what each field is individually (which would be unnecessary since they're all so similar, just attached to different buttons).

[PyroDragn]

I'm going to make some simple suggestions relating to the first screenshot. I think I would have to fiddle to see exactly what's going on in the second screen before suggesting what to do to it.

The first thing I would do is basically what you've done in the screenshots, group things together in a box and title them:
Put a box around '1' and title it "Champion Creation"
Put a box around '2' and title it "Ability Setup"
Put a box around '3' to try and make it more like a 'navigation bar', or alternatively put a border around the entire screen and try to integrate the three buttons like 'tab headings'
Put a box around '5', differentiate the two rows of resources, and like you've titled the bottom row, title the top row "Current Resources"
Put a box around the Trade Goods just to keep consistency.

If I'm interpreting this correctly, the disband button is only used for Disbanding the current champion, and the exit button is what you use to leave the house and return to play. If you don't have a champion, the exit button is replaced with a 'hire' button (ie, you can't leave if you don't have a champion)

If the above is correct, then I would do the following:

Enlarge the 'Exit' button.
Move the 'Disband' Button to the Character Setup portion of the screen (I would put it just on the bottom edge of the character portrait).
If you do not have a champion, I would make the "Disband" button a "Hire" button, and grey out the Exit button.
Add a tooltip to say "You may not exit without a hired champion" when the exit button is greyed out.
Possibly, rename the "Exit" button to "Return to World" or something of the sort.


Hopefully these help. Obviously they're not gospel, but I think it would clear things up.

[teyken]

@Pyro Thanks a bunch! those are excellent suggestions!
I will implement them all today, you are hereby added to the 'thanks to' section
I am impressed at how well you got the interface and how quickly you where able to think up improvements, I really struggle when i comes to intuitive user interfaces.

[Ashaman73]

Add an advanced button and reduce the number of displayed elements using a default configuration for these element.

For example 2 seems to be more advanced settings which should be hidden to new players. The players will get curious over time and will play around with the advanced settings once they got familiar with the basics.

[PyroDragn]

@Pyro Thanks a bunch! those are excellent suggestions!
I will implement them all today, you are hereby added to the 'thanks to' section
I am impressed at how well you got the interface and how quickly you where able to think up improvements, I really struggle when i comes to intuitive user interfaces.

Glad you liked my suggestions. I didn't get a chance last night to install the alpha but I'll have a look after work today to see if I can come up with anything for the second screen.

Honored to be included in the "Thanks to" section, makes me feel warm and fuzzy inside. ^^

Add an advanced button and reduce the number of displayed elements using a default configuration for these element.

For example 2 seems to be more advanced settings which should be hidden to new players. The players will get curious over time and will play around with the advanced settings once they got familiar with the basics.

I agree in principle that hiding any advanced features is a good idea to simplify the UI for newer players, but I disagree with the fact that '2' classifies as an advanced setting.

In the early stages when the abilities are limited it is essentially control setup for your character, which I think should be made obvious rather than hidden. Just make it obvious that you will unlock further abilities as you progress, and then it's understandable that you can add to it later but for now you can change what button does what.

[Shaquil]

What follows is my personal take on design in general. Maybe you'll only agree with parts of it. I only want to give you another outlook on things.

Interestingly enough, when I saw that first screen shot, in its tiny thumbnail form, I thought "Oh god, far too much stuff is happening on that screen." When I enlarged it, I still felt that way; but after a few seconds of just looking at it, I realized it was straightforward and not too hard to understand. But that's not a good thing. In my time testing out some simple games with friends/family and justbeing a gamer myself, I've realized that you just cannot underestimate the fact that players absolutely refuse to do two things:

1. Wait
2. Read

I don't know why this is the case, but I've caught myself falling into this attitude plenty of times. A menu pops up, I assume it's too complicated, and just try to keep clicking through because I don't want to deal with it at the moment.

The solution? I think you need to try to design your menus around very specific gameplay scenarios. Imagine what your menus would be like for a player who's just jumping into your game to try it out for 20 to 30 minutes. He's playing your game with a sense of some self-imposed urgency, and wants to get the breadth of the experience with very little depth. He doesn't want to customize anything, learn any special techniques or experience any subtle nuances. If a menu comes up, 9 times out of 10 he's going to click around until it goes away. Designing around this case, it might be best to do as someone else before me has said: Just have some default settings and "next" and "back" buttons that let the user glide through a menu, glossing it over.

Another gameplay scenario might be the I'm in a terrible mood case. We've all been like this. You wanna try something new out, but you're also in an awful mood; you're just waiting for a reason to decide that it's garbage and move on. And usually what's the first thing that gets you to toss the game aside? It's either unintuitive controls: It takes more than one try to get the gist of how the game is played; or bad menus: It takes more than 5 seconds to understand the gist of what any given menu is asking of you.

The solution? I think you should use very obvious human tendencies in your favor. What do we tend to focus on in any given situation? The center of something. Putting something in the center almost inextricably ties it to a meaning of "This is the focus. Look at this. This is what you care about." Anything on the side will literally be treated as a side item. It's not important, or so it seems. So you might want to center the most important stuff, and put the less important stuff (Like controls, which probably should be in their own unique menu) on the sides. Also note that symmetry means a ton. If your screen is vertically symmetrical, the player will feel like there's some inherant meaningful connection between where an option is and what it actually does. This means you'll have to make sure options are where players expect them to be. How do you do that? I dunno. Try some different layouts on people, watch what they do rather than asking them what they think. Follow the mouse (or whatever cursor is used), and you'll see where the common tendencies are. You can then re-arrange the most important items.

I hope these ideas at least help you out.

[Sandman]

Interestingly enough, when I saw that first screen shot, in its tiny thumbnail form, I thought "Oh god, far too much stuff is happening on that screen." When I enlarged it, I still felt that way; but after a few seconds of just looking at it, I realized it was straightforward and not too hard to understand.

Seconded.

One of the things that jumps out at me is the one thing that doesn't appear to have been mentioned anywhere. What's the deal with the 'Trade Goods' section down the side? This does not appear to bear any relevance to character creation or anything else that belongs on this page. If feels out of place and seems to add confusing clutter that detracts from the focus of the screen. If it's not relevant to this screen (character creation), stick it somewhere else. If it does belong here, it might need to be split into a separate screen.

I think a vertical resource bar might be better. At the moment, the sheer width of it makes it impossible to take in at a glance, whereas with a vertical bar you'd be able to put the icons closer together while still having space to fit some big numbers next to them. Failing that, if they can be reasonably categorised into regular columns, use a grid.

Consider breaking the character creation/upgrade process into a step by step wizard. Doing this means you can present the player with a minimum set of controls to perform one very specific task, and a continue button to go onto the next step. On upgrades, certain steps (where there are no new options) might be skipped entirely. The process of buying upgrades (which can then be added to the control scheme) could also form a step in this wizard. This way you don't waste the user's time trying to figure out what's new, and what they need to do, as well as giving you more screen real estate to use for clearer text, help text, and maybe even lists so that multiple options can be viewed at once (often preferable to than spin/dropdown style controls, if you have the space)

[PyroDragn]

Consider breaking the character creation/upgrade process into a step by step wizard. Doing this means you can present the player with a minimum set of controls to perform one very specific task, and a continue button to go onto the next step. On upgrades, certain steps (where there are no new options) might be skipped entirely. The process of buying upgrades (which can then be added to the control scheme) could also form a step in this wizard. This way you don't waste the user's time trying to figure out what's new, and what they need to do, as well as giving you more screen real estate to use for clearer text, help text, and maybe even lists so that multiple options can be viewed at once (often preferable to than spin/dropdown style controls, if you have the space)

I don't believe that using a wizard would be an option except perhaps the first time you create a character. Looking at the video of gameplay it looks like you are able to change aspects of your champion on the fly. I would rather not have to launch a wizard each time I wanted to change something, and I think it'd be better then to have the one way of creating a champion consistent throughout rather than have a wizard and then a different option for making changes.

One of the things that jumps out at me is the one thing that doesn't appear to have been mentioned anywhere. What's the deal with the 'Trade Goods' section down the side? This does not appear to bear any relevance to character creation or anything else that belongs on this page. If feels out of place and seems to add confusing clutter that detracts from the focus of the screen. If it's not relevant to this screen (character creation), stick it somewhere else. If it does belong here, it might need to be split into a separate screen.

Agree with this. I don't know what the trade goods is there for, I couldn't work it out from the screenshot. Maybe it's obvious through gameplay but I haven't got to trying the game out yet. I don't feel that it's really out of place. It seems that way for me because I don't know what it's for. If it has a purpose relating to this screen, then I think it would be fine where it is. If it doesn't, then it needs to go.

[m.m.fox]

i didn't read all the others posts, and didn't have chance yet to try your game, but what i can tell from you initial post is:


there seems to be way to much going on - which means that the player will have to read a lot, and not play; as axel cholewa puts it in his post on gamastura: "Players want to play. If you want to teach players, make them play!" (http://gamasutra.com/blogs/AxelCholewa/20120808/175498/Players_dont_want_to_read.php)

so what you may ask yourself is: how far can i strip all this stuff down so that the game is still playable? and how can i introduce all those features gradually?
introducing all these mechanics (and thusly the corresponding parts in the interface) at a time would give you a lot of advantages:
x you can provide a smooth learning curve
x you gain rewards for your player, in unlocking all those functionality in a gradual fashion - "oh sweet, i can trade resources now?"
x you won't alienate players by providing (on the first glance) a too complex interface
...

and is it really necessary providing all the different resources right from the start? john shafer (civ5) for example said: "We didn’t bother teaching the player what iron or other strategic resources were good for until it actually mattered." (http://jonshaferondesign.com/2012/04/16/loweringthegates/)

it also seems to me that the option to configure your keys might be a little out of place in the first screenshot - i don't think that players will want to change the controls too often, so i suggest to put it somewhere less prominent.

i think a few icons might also make things more appealing - for example for the equipment slots etc.

other thoughts:
i think the disband button should be nearer to the champion himself, i wouldn't name the exit-button "exit" - as some players might think it may leave the game itself, aaand.. there doesn't seem to be such an exit button from inside the upgrade-menu (which is actually on the same layer as the champion-button?)

so i hope i made some sense/didn't just repeat what has already been said,
best of luck for you beta! keep it up

[teyken]

Thank you all for the feedback, you are absolutely right! There is just too much on one screen - I have a tendency to over complicate my mechanics and I think I just needed to hear it again

There is an auction house but you can only trade what you carry, so if you want to sell your Stone or Metal you have to put it on a champion and walk it all the way, with the risk of getting robbed on the way by other players.

This seemed like a really cool idea back when it was implemented but I'm no longer sure such an idea is actually fun.

Plus, just making you able to sell directly from your house stores would make it far more intuitive.

I think I will just remove it.

Then I can put the champion in the center instead.

I worked a bit on the suggestions by PyroDragn today and here is a VOIP of the menu as it is now :



The borders are not complete and the 'tabs' need to work better with the rest - I also added buttons to the character window to let the player choose sex and appearance (before you could do it by left or right clicking the portrait)

I imagine this screen would work a lot better centered and without the tradegoods bar.

[jefferytitan]

I haven't had a chance to try the game, but my thoughts on your latest screenshot:

• Still a bit busy - would look better without trade goods.
• Do the trade goods correspond to the resources? If so the order and icons should match for consistency.
• I wonder if it would be a good idea to do a wizard when you first setup, which literally takes you through the same set of tabs you would see normally, just in a particular order with defaults and validation.
• For easy comprehension maybe a nice big icon for each tab. Note that icons only help if any idiot can tell what they mean - they did NOT help my family and I when we bought an Italian oven.
• I wonder whether the background image behind the UI controls just adds to the confusion. Maybe a general background image, but the editable area something plain and simple like wood grain, flat colour, or an Aero-like dark blur?
• If you expect people to try a demo, maybe have a quick-start mode that creates the character for them.

[teyken]

I have now given the house screens a thorough overhaul and I am very pleased with the result. Thank you all so much for you help and advice!

Champion screen


Upgrade screen


Resource screen


I will be putting up a new build that includes the new screen this evening.

[m.m.fox]

yeah, i'd say that looks _much_ better overall - glad you lost that background.
maybe the icons on the avatar frame might be not recognized as icons tho', i'd imagine some players might think those are merely decorative elements.

[PyroDragn]

I agree that it looks a lot better overall.

Another slight change I would make on the Character screen, I would highlight the buttons on the character frame. While playing and cycling through the character images it took me a while to realise that the change gender button was actually a button and not just a part of the artwork.

[teyken]

Thank you, I will do just that.