Anyone else struggling to have good UI design? I’m using CoherentUI so I have full HTML5 and CSS3 at my disposal, but I still can’t figure out how I’d like to go about my UI. To me it seams like it always looks terrible. Anyone have any resources to research good UI design and see some design examples? What’s even funnier is i’m a professional web developer so you’d think this wouldn’t be a problem, but am quickly discovering web UI and game UI are significantly different or maybe I’m just over thinking all of this.
Below is my current UI.
Top left is unit counters, top right is time played, and bottom is skill bar. I’m not particularly happy with any of it, but it functions at least.
Below is the UI in actual gameplay.
If it’s relevant the game is Lemmings meets Minecraft sort of concept. You’ve little skeletons to get from Point A to Point B and all they do is move back and forth as well as respect gravity. You get to place various tools like bridges, boxes, bounce pads, torches, etc… as well as are able to destroy blocks to get them to Point B. It’ll be PC release so mobile UI is of no concern.
I struggle with UI every time. And, when I’m stuck, I have two things that help me: a) simplicity, and b) juice. Simplicity means, getting to your core - delete anything you can, until there’s nothing else you can remove. and Juice … well, Martin and Petri are the best place to start for making apps Juicy!.
Looking at your UI, I notice that it’s already simple, which is great! And, I wonder if it couldn’t be further simplified by removing the 00:26 or the clock. And, you are already using icons for your data, which is juicier than text, and we can take that a step further by adding more juice! Make the icons bigger! Make them bounce wiggle. Whenever a red goes up, make the red face punch out (ie scale). Make it glow! If you want to get crazy, use a glowing, growing stack of skulls, instead of 5 0. And add more juice to the icons on the bottom! Make them touchable! Put a box around them vice the 1-pixel line. Slap a gradient on the box. Make it wiggle. Juice == touchable == lovable == fun.
Great feedback, thank you; I’ll look into making some of those changes! I’ll be replacing the skull with one that’s not a 3D model compressed to 2D and using more Vector graphics instead as well. I’ve a few icon packs in mind so should make it simpler. I’m also going to be adding Twitter Bootstrap for button toolbar that is interactive (mouseover, depressed when active, glow, etc…). The skulls do glow, but it’s very little and will increase it a good bit when I replace their icons. I’m trying to represent the UI as best as possible with icons and avoiding text to avoid language barriers.
I’m pretty sure that only people who are good at UI design struggle with it. People who aren’t good at it don’t struggle because they either don’t care or don’t know that what they’ve got isn’t that good.
To get my UIs “right” I prototype lots, show them to lots of people, and either throw them away or refine them until I get compliments rather than critique. For my current game it took me five ground-up approaches to get it right, not including a lot of paper-only concepts. The bright side of that is that it’s now good enough that I can show it to other people and get unprompted compliments about how slick the UI is.
So I think that’s the trick - gather lots of feedback, be patient, and be willing to start over.
Oh yeah, and rather than asking people what they think, just hand them your game and shut up and watch. You’ll learn more from that than you’ll learn from making people conscious of what they’re doing. What do they most have trouble with and how can you best help them with it?
And on that note, even from the start, it comes down to thinking about the user, putting them at the center of every decision you make. What do they need to know? How can you most easily get them that information? What do they need to do? How can you most easily help them do it?
Ok, did a complete redesign and have my pause menu done with graphics options also done (gameplay, audio, and controls options not done yet). Below is the new design using CoherentUI all done in HTML5/CSS3/jQuery.
Just to throw in another 2 cents here. A large reason icons > text is that they are easier for localization. People in Japan can easily understand a stack of skulls faster than they can read English text, and faster than you can translate that text to Japanese and create a new build.
Fun Fact: The concept of a corporate logo and store sinage originated in the dark ages, when most of the population couldn’t read. Store owners would just create a picture to symbolize what their shop provided so everyone would know.
Yup, but icons can’t be used for everything. They make since on mobile games, which are much more simple of course. I do however plan to localize the UI. The UI is done entirely in HTML5, CSS3, and JS. I’ll have localization files in JS that contain all the strings then under Gameplay will be a language selector. When selecting a language it’ll load in the appropriate JS file replacing all the strings. So basically I’ll be able to support every language extremely easily.
Edit: I’m also considering exposing the entire UI so those with web development experience could easily redesign it if they wanted; still considering if I want to allow this or not. All values sent back to the game are sanitized so there’s no possibility of cheating as well. Do you guys think this is something players would like to have? Note my game is PC only and not mobile.
Really like the aesthetics of the updated screens, particularly the options and the inventory/action icon bar.
Information is way too spread out. The focus would appear to be your inventory (bottom middle) which is fine, but then other ‘important’ information is placed at opposite extremes of the screen, requiring considerable eye movement to view. This is probably not helped by the wide screen view resolution.
I would be tempted to find some alternative solution for displaying the skulls and timer. Perhaps trying them either side of the inventory, placing the beneath/above the inventory or maybe getting rid of them or changing their current design so that they fit in better when moved adjacent to the inventory.
Timer - use either the clock or the numbers but not both. Looks like you ditched the clock in your update, though I was going to say the choice should probably come down to how important the timer is and how important it is to have an exact value. If the value isn’t important I might be tempted to go with a circle that fills/unfills over time. A visual representation of the time my be more ‘instantly’ readable then actual numbers ticking down.
Icon size
Skulls and timer could probably do with being larger, they seem to get lost currently. If you move them from the corners, their relative size might be ok.
Skulls
In combination with their size and position (hidden away in the corner) they don’t come across as very important or very readable/noticeable. If they are really not that important to the game, consider dropping them or presenting the information they convey in a different manner. If they are important, think of how you can make them stand out a little more (though obviously not too much that they would over-power the rest of the UI or game). As was mentioned above by Gigwoo, they need a bit of ‘jucing’.
Inventory/action bar
Though I like the aesthetic of the strong white icons, the boxes that encompass them are rather drab and get lost in the game, even the highlighted one. Think these could be improved.
Its just you, I suggest removing your shades when indoors
Actually its hard to tell as the background/game is currently very dark with just some spot lighting effects. If you compare the new designs with the ones in the OP, its clear that the UI can be bright and stand out from the background. However I just assumed that the game/background is going to end up much brighter than it is currently and thus the UI wont look so dark?
However this does bring up an interesting point, that its probably not beneficial to design too much of the UI without an accurate representation of the brightness/colourfulness of the game to compare against.
Quite nice, very happy with the change. Much easier to work with as well. Basically I attach the CoherentUI view to my main camera, point to my HUD HTML file, press Play and it loads. I then just make my HUD in pure HTML/CSS/JS. There are JS that help it communicate with Unity so it’s very simple. I even wrote PlayMaker actions so communication with my UI is entirely done in PlayMaker.
My resolution is extremely high. Setting to a lower resolution also adjusts UI resolution to match. So is purely based off how the player wants it, but will see if UI needs to be global scaled up during alpha testing.
Exact time is important for calculating time bonus, so needs be an actual timer by the second. I didn’t like the timer icon so decided to ditch it.
Something I’ll keep in mind when doing play testing when I get to an Alpha build and see what players think. As is seams ok. Screenshots really don’t do it too much justice; everything looks much better in actual gameplay.
They’re very important. Red skull is number of active skeletons. Blue skull is number of escaped skeletons. Will keep this in mind when passing off the testers when I have an Alpha available. There will also be tutorial levels explaining the UI.
Skill bar is designed to match the rest of the menu system. It may need to be brightened up. Will also keep this in mind during testing. I’ve redesigned it 4 times now so want to hold off on doing that again until I can see player opinion.
No, would give too much visual representation as there could be 100 skeletons on screen. The Spawn portal (red) implodes once it’s spawned every skeleton as well.
When the pause menu is open the background is faded. During Gameplay (first screenshot) the UI isn’t as dark. It’s also a compressed JPG so it’s not the best quality. There is also a brightness slider to increase the brightness.
The game is dark, it’s supposed to be. There is a brightness setting though if it’s too dark for someone. One of the features of the game is to be able to place Torches to add more lighting as well.
Great feedback everyone. Thank you very much for your time! I’ll be sure to let everyone know more UI progress and when I have an Alpha available. Next on my list is the Controls option menu to change skillbar button binding.
Below is a screenshot of the brightness increased. This is purely using the brightness slider found in the Graphics options.
Game is best enjoyed being as dark as you can handle, but I don’t want to alienate a group of visually challenged so it can be turned to completely bright. The above is almost 50% brightness.
I understand that, but look at the relative scale between the skill bar and its (overall) icon buttons and the size of the skulls. In comparison the skulls and the information they present look rather small and to me look a little ‘lost’.
Just to be clear I’m not talking about losing the actual gaming timing, just not to present it to the player as actual numbers for the seconds. Though its pivotal to your game mechanics, I wonder if knowing the exact second is so important to the user, at least on the game screen? After all it would be easy to add a level complete screen where you display the actual seconds left and the bonus score associated with them.
Personally i’m not so sure it is that important, certainly in your new screnshots the time is very small, tucked away at the top of the screen where the player is unlikely to be looking. In which case my suggestion was could it be replaced (visually) by a circular countdown graphic, or even just a long bar across the screen.
It may be worth checking out some old Lemming game screenshots to see how they solved these design issues - well actually I can tell you, all the information was displayed along the bottom of the screen nex to the skill icons
As I said I like the skill icons, and obviously they are bright, its the ‘box’ elements around them that look dark/feint. However I agree you don’t want to keep redesigning this, and these sort of choices will be very dependant upon the overall brightness and consistency of brightness of the game during play, along with whether its always going to be black beneath the skill bar or if the game environment will be there.
You are heading down the left path - sidetracked by brambles. Soon, you will be lost, and sometime after that, you’ll give up. Get back on the right path! Build small products! Finish them! Set a date, 10-12 weeks from now, and be FINISHED!
I’m not sure what relevance this has to my topic… exposing my UI adds absolutely zero time to my development as it’s already exposed. It’d add time to my development to prevent it from being exposed by implementing achieve handling of the UI zipped under assets. Lets keep this on topic (discussing good UI design, examples, etc…) please.
Righto! The new popup-dialogs are nice and clean. They look well spaced, with large text on them. They are so much better that the buttons on the bottom of your in-game interface now stand out as inferior. Take a few hours and download some of the new and noteworthy apps, like ‘Take It Easy’ or ‘Monsters HD’. Even though they are iOS products, they show what it means to be JUUIIICCCYY!!! Your in-game app needs more juice. (see my earlier post above for a link).
