Making a better, cleaner and more user-friendly RPG UI:
(Refresh page for images to resize)
There have been a large number of RPG projects started up that have evidently taken their UI layouts from the generic layout most common in MMOs these days, the most popular example being the World of Warcraft UI. The problem with this is that, as any serious WoW player knows, for player versus environment and player versus player, replacing your basic UI with a custom one will nearly universally improve your playing.
Think about your UI:
Where will the player be looking at most?
The most important information should be near the player's center of attention (their character)
Less important things should take up less space and be farther
Does your system really benefit from a combat log?
Does your flavor art add or detract from your UI (Balancing pretty versus cluttered)
Why the WoW UI layout is bad:
The problem with this is that the Warcraft UI is simply bad. It is ugly, cluttered and entirely non-user-friendly. I have decided to make this tutorial to hopefully steer Starcraft 2 RPGs away from the Warcraft UI layout and towards one that is better on the eyes, fingers and mind.
First, we will take a look at the WoW UI. Although this image is rather old, the UI has seen very minor changes since it's release.
What's wrong with the Wow image?:
Alot of wasted space in the area of the player, party and raid bars means that they take up over 25% of the screen.
Alot of useless information displayed
Player and target frames are far from the players' focus
Buttons for menu and bags take up a disproportionate amount of space for their frequency of useage.
Button layout is all over the place.
Buffs take up an unnecessarily large portion of the screen.
Combat log has 40 characters worth of abilities flashing by every second.
What are some elements of a good UI?
Most important things near center of screen where player is looking
Players status (health, mana, buffs) near the center of the screen
Targets status (health, mana, buffs) near the center of the screen
Health bars clearly visible
Essential information (Cooldown useage, readiness) clearly visible
Nonessentials at far top or bottom of screen
Hotkeys near center of the screen in a square or circle pattern (Many people are 'clickers' meaning they ignore hotkeys)
Color coded messaging (Group, Game, Combat)
Color coded bars (Health, Mana, classes)
Timestamped messages (Is this doable in Sc2?)
Objective-oriented Minimap (Questgivers, points of interest, etc marked on minimap)
Near death indicators for when you are about to die
Some simple changes:
What is different in this image?:
Raid members status is shown in large clear, color coded bars.
Less important information like menus, bags, gold etc is all put at the very top
Buffs take up minimal room (They are the icons with numbers underneath at top right)
Player and targets health bars are much closer to player's centre of focus.
This UI is an improvement, but more changes can be made.
Here is an example of a better laid out UI (albeit not perfect. Btw, yes I used MSpaint lol). It also shows off a Heads-Up display. These can be a great optional feature in a mod as many people swear by these. An equal number dislike them though.
What's good about this UI?
1. Target debuffs are near player. This lets you see what you and others have done to this target.
2. Target buffs. This lets you know if there are any buffs on your target that are a threat and should be dispelled.
3. The spell the target is currently casting. This lets you know what your target is up to. (Its usually better to make this more obvious)
4. Heads up display Mana bar for target allows you to use your peripherals to see their mana total
5. Heads up display Cast timer lets you know how close your target is to finishing their spell
6. Heads up display mana bar for yourself lets you know your present mana situation
7. Heads up Display Health Bar for yourself
8. Heads up Display for target
9. Players current status very close to them for quick appraisal
10. Targets current status very close to them
11. Target's target current status allows player to quickly determine what their enemy is attacking
12. Target's castbar is large and clear (Could be larger)
13. Self cast bar is large and clear
14. Less important information such as gold, menus, backpacks are out of the way
15. Buttons are all close to player
In general this UI is nicely done. Heads up displays if implemented should be toggleable as many players do not like them. Some prefer to simply use closely placed status boxes (as shown in this picture). The Hud could also be placed closer to the player as the closer it is the easier it will be for you to only have to use your peripherals to keep track. Also, the minimap is in the very center. Deciding whether your minimap should be in the center depends on whether your map is the type that requires the player needing more help navigating a map. In a map with a small or simple layout, the center should be used for more important things.
What's good about this UI?
1. Lots of player information close at hand. This shows in descending order: Short Duration player buffs, Target (+health bar), Player(+health/mana bar), Health and Mana totals in numbers. Separated for clarity
2. Lots of target information close at hand.
3. Buffs are shown with icons alone and shorthand time durations.
4. Raid members are shown via small square box. This was an addon called grid. By adding small colored icons to each players box, grid was able to give a lot of information about a raid or party member suchas any reduced healing affects, if player had aggro, if the player required a buff from you, etc. All in a condensed box.
5. Chat box is far from center as it does not contain urgent information. (Urgent messaging in WoW was handled through the raidwarning command that enabled a person to define a message as important by typing /rw. Messages typed this way appear large and in the center of the screen.)
6. Cast bar
7. Hotkeys with attached cooldown timers
8. Other game information box: Loot, faction, rep gains.
9. Enemy cooldown useage.
10. Less important information is far from center.
This is a very simplified UI yet can show everything the first WoW pic showed and more.
What have we learned?
In summary, I would just say that the most important lessons to be taken away from this and in general when making a UI are:
1. Put the player's life near the center of the screen next to the unit they will inevitably be looking at all game.
2. Remember this rule: The more important something is, the closer to the center it should be.
3. Think mouseclick distances when designing UI. Square and circle layouts are always better than long rows of icons.
Please leave your feedback and any suggestions to add to this!
seriously: maybe its helpful for someone, but imo everyone should think about this ui himself. this will also bring some more creatitivy and more difference between maps.
I am entirely a fan of unique and creative UIs, Mille25. Encouraging people to make their own UIs is the entire point of this tutorial. Have you taken a look at most of the RPGs in development right now? They copy the WoW layout exactly. Buttons in rows at bottom, health bars completely out of the way, etc.
The purpose of this is to
Make people NOT copy the WoW UI and,
Remember some simple tips for a good UI
I don't want to show people exactly how to make their UI, that's why i showed 3 good layouts instead of one. It's also why I called it tips instead of a guide. I didn't want people to just think they should copy one of these. I fully encourage people to make their own unique UIs.
Also, in the summary I note what I feel are the 3 most important guidelines. All 3 of which are applicable to an infinite number of designs.
3. Think mouseclick distances when designing UI. Square and circle
layouts are always better than long rows of icons.
An interesting claim... fitts law would agree but for the fact that a row of buttons along a screen edge is alot faster to click. (Mac OS X uses this logic to justify the Dock & Top-Of-Screen menus they use)
With a square button along the screen edge, you can overshoot and still hit the button (the screen edge stops the cursor, allowing you to point much faster and removing over/under shooting concerns). Circle shapes dont allign RIGHT to the edge of the screen so (at least appare to) require accuracy when pointing to them, this increases the time to do so, also a segmented circle is usually limited to 4-5 buttons before becomeing cluttered (rings do better but still)... (Ooh and the grid layout option will cause most (if not all) of your buttons to be floating away from the screen edge, so is bad for the same reason)
Your wow UI is great for an expert user, (I would happly use it myself) as high level users use hotkeys. But for a novice they are ALOT more likely to point and click most of their spells rather than hotkey them. Most UMS maps will be played a few dozen times at most by any given player. Therefore design your UI to reduce the learning curve, and to optomise point-and-click use of spells.
Blizzard employs some very skilled UI designers, theres always a reson to what they do, BUT its not always a reson that is applicable to a UMS map. Wow has a good UI for a newbie confronted with 2^1337 abbilitys (For a UMS map this realy is far to many)... it gets his/her 20-30 'regulers' on the screen and has the space to deal with em, its optomised for the fact he/she still clicks rather than hotkeys... (space for 24 square buttons touching the screen edge is just good sense for a noob given the flood of abbilitys they have to deal with).
As a side note, spend your time making a good map/ui not adding customiseation... (No one wants to play a 2nd rate map, even if the password screen is quite possibly the most customisable, beautiful, teachnologicaly advanced creation this side of the 25th century)
For high skill players the WoW hotkey inefficent UI is highly customisable (no two skilled players are going to want the same layout). This lesson does not apply at all to most UMS maps... With XMLs if you find your map has gone cult and you are the new icefrogs by ALL means allow customisation ('experting' of hotkeys or even the UI itself!!!) but untill you go tripple platnium customisation is not a major concern in a UMS.
For a bit more info about the science of point and click visit
You bring up some great points. I will be making some tweaks to this Tutorial as time progresses, and I'll definitely make mention of those things. Thanks for the feedback!
1. Put the player's life near the center of the screen next to the unit they will inevitably be looking at all game.
Disagree here. There is a reason nearly every game ever has your health in one corner, your map in another corner, and your "to do" stuff at the bottom. The reason is simple; put too much information in one place and the player will just tunnel their vision on that place. Using WoW as an example, I'm sure you've heard of healers that do nothing but stare at Grid. They tend to be awful players. It's poor design to promote that attitude.
You want people to take in the whole screen. The best way to do that is to spread out the important information so that players aren't just staring at one small space.
3. Think mouseclick distances when designing UI. Square and circle layouts are always better than long rows of icons.
I disagree with this too. Ideally you don't want your players clicking at all. Bars are space saving when placed at the bottom of your screen, because the edges of your screen (especially the bottom) are rarely important for situational awareness. Naturally, a bar will take up more "useless space" than a square would.
@Eiviyn: Go
The reason they all layout their UIs similarly is so the User is familiar with the layout without any instruction. For example, the windows operating system. Everyone is familiar where all the basics are even when switching from say XP to Vista.. Yet I don't think anyone would argue that Windows is very user-friendly. This doesn't mean we can't compromise and benefit from both. None of these rules revolutionize the UI, they simply rearrange easily identifiable parts. Moving a health bar from the top right to bottom center will not cause someone to say "Where's the health bar, ahhh!" It will make it more readily available to the user though.
As for information being spread around the screen to increase player awareness. That's just not true. Think about driving a car. All the important information (odometer, fuel gauge, RPMs) are located directly under where you are looking at all times. They are not spread across the entire interior of the car. If a player can take one glance to see their hp, their enemies and their cooldowns, they have more time available to check their position/in-game situation.
In regards to keybinding, of course keybinds are the ideal method of doing anything on a computer. But 90% of users out there continue to click and if you ignore this large group when designing your UI, you will be alienating a majority of your potential audience.
Bars are space efficient, but do not facilitate ease of use except when at the edge of the screen as UmbraLamina said, wherein they allow novice users to minimize the chance of overshooting the target. This requires the buttons to be at the very edge of the screen though and a majority of UIs do not place their buttons on the edge of the screen thereby negating the benefit of bars entirely. Either way, designing your UI entirely based on what was the most efficient use of workspace is probably a bad idea. It's a user interface, not a storage shed :p
Edit: I guess I should add that space efficiency is very important, but can usually be made up in so many ways that making up for it in abilities (arguably a persons most used component) is probably a worst-case scenario.
Edit2: I totally realized I didn't put in an important point on why having you abilities near the center of the screen can be very useful, and this is obviously a very game-specific reason: Many cooldowns are stated on the button icons and must be tracked. If your game has a different method for tracking cooldowns though, this would not be an issue. I will add this to the Tutorial when I revise it.
It's funny that you mention cars. Yes, your dashboard is rather compact. You could almost consider that your action bar. However, you are constantly checking your wing mirrors, rear window and looking ahead. You have reason to look at every aspect of what you can see, and this would not be reflected in a UI that is very centralised.
You're also missing the point with "If a player can take one glance to see their hp, their enemies and their cooldowns, they have more time available to check their position/in-game situation". Again I'll refer back to Grid. If you have all information displayed in one place, players won't bother looking elsewhere. It's just instinctive and Grid is a fine example that it is a very real issue.
"90% of users out there continue to click" is, frankly, made up and wrong. I watch people sit down with WoW that have never played it before and very quickly get used to pushing 1-5 for abilities. Sure, not many players get past the "keybinding more than 0-9" phase, but nearly every player reaches it. Also, as I said, it's important to not promote clicking. You don't want to force your players to not click, but at the same time you want to guide them towards keybindings.
Bars to not need to be at the very edge of the screen, just near the edge.
@Eiviyn: Go
Mirror's aren't a good example as they are placed where they are because of how mirrors work. I'm not sure if you've seen, but many manufacturers have been attempting to get important info closer to the windshield. For example Heads Up displays that show Odometer right on the windshield. If cameras eventually replaced mirrors, their screens would not be near the side windows (Like mirrors currently). They would be close to the steering wheel.
I wasn't missing the point in regards to grid. Grid is an amazing addon for raid healing. The problem is in wow that if you aren't paying attention to a tanks health bar for more than 3 seconds, they very likely could die. What this means is that grid has REPLACED your main screen as the most important thing to be looking at because of how raid healing works in that game. You always want to make sure in your game that the main screen (your in-game character) is more important than any single UI component. You can increase your in-game characters importance by putting important information near it. Using a HUD or hp bars near your main hero lets you look at your hero at ALL times AND know how much health, etc you have. You never have to move your eyes away from the action on the screen.
Ok, 90% of people clicking is an arbitrary amount, I'll rephrase it to 'a vast majority of players click'. Just because they keybind 5 abilities and click the other 10 doesn't mean they are not clickers anymore. Therefore it's important to design around clicking.
Bars can be placed away from the edge, they just become less easy to use than a radial, square, or bars placed along edge.
I do encourage anyone with opinions or thoughts related to UI design to post. It's obviously important and Umbra and Eiviyn have brought up some unique perspectives.
I'm a fan of seeing large bright vibrant bars laid vertically to display health/energy/mana.
Why?
Once I get used to the game I can use "peripheral vision" (in a sense) to easily monitor my units health + energy/mana while clicking and controlling the unit. And because the health bars are not in a corner my eyes don't have to wander to that spot that is otherwise useless.
This also leaves the bottom open for things like ability bars, chat boxes, inventory boxes, etc, so it's not clogging up the screen.
Making a better, cleaner and more user-friendly RPG UI:
(Refresh page for images to resize)
There have been a large number of RPG projects started up that have evidently taken their UI layouts from the generic layout most common in MMOs these days, the most popular example being the World of Warcraft UI. The problem with this is that, as any serious WoW player knows, for player versus environment and player versus player, replacing your basic UI with a custom one will nearly universally improve your playing.
Think about your UI:
Why the WoW UI layout is bad:
The problem with this is that the Warcraft UI is simply bad. It is ugly, cluttered and entirely non-user-friendly. I have decided to make this tutorial to hopefully steer Starcraft 2 RPGs away from the Warcraft UI layout and towards one that is better on the eyes, fingers and mind.
First, we will take a look at the WoW UI. Although this image is rather old, the UI has seen very minor changes since it's release.
What's wrong with the Wow image?:
What are some elements of a good UI?
Some simple changes:
What is different in this image?:
Here is an example of a better laid out UI (albeit not perfect. Btw, yes I used MSpaint lol). It also shows off a Heads-Up display. These can be a great optional feature in a mod as many people swear by these. An equal number dislike them though.
What's good about this UI?
In general this UI is nicely done. Heads up displays if implemented should be toggleable as many players do not like them. Some prefer to simply use closely placed status boxes (as shown in this picture). The Hud could also be placed closer to the player as the closer it is the easier it will be for you to only have to use your peripherals to keep track. Also, the minimap is in the very center. Deciding whether your minimap should be in the center depends on whether your map is the type that requires the player needing more help navigating a map. In a map with a small or simple layout, the center should be used for more important things.
What's good about this UI?
This is a very simplified UI yet can show everything the first WoW pic showed and more.
What have we learned?
In summary, I would just say that the most important lessons to be taken away from this and in general when making a UI are:
Please leave your feedback and any suggestions to add to this!
Reserved
very good post, five stars, if only i could vote it :D
10/10 :O
right there i stopped reading.
seriously: maybe its helpful for someone, but imo everyone should think about this ui himself. this will also bring some more creatitivy and more difference between maps.
I am entirely a fan of unique and creative UIs, Mille25. Encouraging people to make their own UIs is the entire point of this tutorial. Have you taken a look at most of the RPGs in development right now? They copy the WoW layout exactly. Buttons in rows at bottom, health bars completely out of the way, etc.
The purpose of this is to
I don't want to show people exactly how to make their UI, that's why i showed 3 good layouts instead of one. It's also why I called it tips instead of a guide. I didn't want people to just think they should copy one of these. I fully encourage people to make their own unique UIs.
Also, in the summary I note what I feel are the 3 most important guidelines. All 3 of which are applicable to an infinite number of designs.
Good tutorial, but HOW do I create an UI in SCII?
Here's a fully customized UI created by Onetwo. You can download the map to see how he implemented it.
Map Download
Most of your post is very good... 1 & 1/2 thumbs up :D For purely visual elements you make some very good points... 11/10
Though I can't agree w/ you on button layout designs (at least not for the purposes we will have in most UMS maps.)
An interesting claim... fitts law would agree but for the fact that a row of buttons along a screen edge is alot faster to click. (Mac OS X uses this logic to justify the Dock & Top-Of-Screen menus they use)
With a square button along the screen edge, you can overshoot and still hit the button (the screen edge stops the cursor, allowing you to point much faster and removing over/under shooting concerns). Circle shapes dont allign RIGHT to the edge of the screen so (at least appare to) require accuracy when pointing to them, this increases the time to do so, also a segmented circle is usually limited to 4-5 buttons before becomeing cluttered (rings do better but still)... (Ooh and the grid layout option will cause most (if not all) of your buttons to be floating away from the screen edge, so is bad for the same reason)
Your wow UI is great for an expert user, (I would happly use it myself) as high level users use hotkeys. But for a novice they are ALOT more likely to point and click most of their spells rather than hotkey them. Most UMS maps will be played a few dozen times at most by any given player. Therefore design your UI to reduce the learning curve, and to optomise point-and-click use of spells.
Blizzard employs some very skilled UI designers, theres always a reson to what they do, BUT its not always a reson that is applicable to a UMS map. Wow has a good UI for a newbie confronted with 2^1337 abbilitys (For a UMS map this realy is far to many)... it gets his/her 20-30 'regulers' on the screen and has the space to deal with em, its optomised for the fact he/she still clicks rather than hotkeys... (space for 24 square buttons touching the screen edge is just good sense for a noob given the flood of abbilitys they have to deal with).
As a side note, spend your time making a good map/ui not adding customiseation... (No one wants to play a 2nd rate map, even if the password screen is quite possibly the most customisable, beautiful, teachnologicaly advanced creation this side of the 25th century)
For high skill players the WoW hotkey inefficent UI is highly customisable (no two skilled players are going to want the same layout). This lesson does not apply at all to most UMS maps... With XMLs if you find your map has gone cult and you are the new icefrogs by ALL means allow customisation ('experting' of hotkeys or even the UI itself!!!) but untill you go tripple platnium customisation is not a major concern in a UMS.
For a bit more info about the science of point and click visit
http://en.wikipedia.org/wiki/Fitts's_law#Success_and_implications
Edit: Nothing against the UI customisation libary itself, just... use moderation, keep your development time balanced...
You bring up some great points. I will be making some tweaks to this Tutorial as time progresses, and I'll definitely make mention of those things. Thanks for the feedback!
Disagree here. There is a reason nearly every game ever has your health in one corner, your map in another corner, and your "to do" stuff at the bottom. The reason is simple; put too much information in one place and the player will just tunnel their vision on that place. Using WoW as an example, I'm sure you've heard of healers that do nothing but stare at Grid. They tend to be awful players. It's poor design to promote that attitude.
You want people to take in the whole screen. The best way to do that is to spread out the important information so that players aren't just staring at one small space.
I disagree with this too. Ideally you don't want your players clicking at all. Bars are space saving when placed at the bottom of your screen, because the edges of your screen (especially the bottom) are rarely important for situational awareness. Naturally, a bar will take up more "useless space" than a square would.
@Eiviyn: Go
The reason they all layout their UIs similarly is so the User is familiar with the layout without any instruction. For example, the windows operating system. Everyone is familiar where all the basics are even when switching from say XP to Vista.. Yet I don't think anyone would argue that Windows is very user-friendly. This doesn't mean we can't compromise and benefit from both. None of these rules revolutionize the UI, they simply rearrange easily identifiable parts. Moving a health bar from the top right to bottom center will not cause someone to say "Where's the health bar, ahhh!" It will make it more readily available to the user though.
As for information being spread around the screen to increase player awareness. That's just not true. Think about driving a car. All the important information (odometer, fuel gauge, RPMs) are located directly under where you are looking at all times. They are not spread across the entire interior of the car. If a player can take one glance to see their hp, their enemies and their cooldowns, they have more time available to check their position/in-game situation.
In regards to keybinding, of course keybinds are the ideal method of doing anything on a computer. But 90% of users out there continue to click and if you ignore this large group when designing your UI, you will be alienating a majority of your potential audience.
Bars are space efficient, but do not facilitate ease of use except when at the edge of the screen as UmbraLamina said, wherein they allow novice users to minimize the chance of overshooting the target. This requires the buttons to be at the very edge of the screen though and a majority of UIs do not place their buttons on the edge of the screen thereby negating the benefit of bars entirely. Either way, designing your UI entirely based on what was the most efficient use of workspace is probably a bad idea. It's a user interface, not a storage shed :p
Edit: I guess I should add that space efficiency is very important, but can usually be made up in so many ways that making up for it in abilities (arguably a persons most used component) is probably a worst-case scenario.
Edit2: I totally realized I didn't put in an important point on why having you abilities near the center of the screen can be very useful, and this is obviously a very game-specific reason: Many cooldowns are stated on the button icons and must be tracked. If your game has a different method for tracking cooldowns though, this would not be an issue. I will add this to the Tutorial when I revise it.
@Aemigma
It's funny that you mention cars. Yes, your dashboard is rather compact. You could almost consider that your action bar. However, you are constantly checking your wing mirrors, rear window and looking ahead. You have reason to look at every aspect of what you can see, and this would not be reflected in a UI that is very centralised.
You're also missing the point with "If a player can take one glance to see their hp, their enemies and their cooldowns, they have more time available to check their position/in-game situation". Again I'll refer back to Grid. If you have all information displayed in one place, players won't bother looking elsewhere. It's just instinctive and Grid is a fine example that it is a very real issue.
"90% of users out there continue to click" is, frankly, made up and wrong. I watch people sit down with WoW that have never played it before and very quickly get used to pushing 1-5 for abilities. Sure, not many players get past the "keybinding more than 0-9" phase, but nearly every player reaches it. Also, as I said, it's important to not promote clicking. You don't want to force your players to not click, but at the same time you want to guide them towards keybindings.
Bars to not need to be at the very edge of the screen, just near the edge.
@Eiviyn: Go
Mirror's aren't a good example as they are placed where they are because of how mirrors work. I'm not sure if you've seen, but many manufacturers have been attempting to get important info closer to the windshield. For example Heads Up displays that show Odometer right on the windshield. If cameras eventually replaced mirrors, their screens would not be near the side windows (Like mirrors currently). They would be close to the steering wheel.
I wasn't missing the point in regards to grid. Grid is an amazing addon for raid healing. The problem is in wow that if you aren't paying attention to a tanks health bar for more than 3 seconds, they very likely could die. What this means is that grid has REPLACED your main screen as the most important thing to be looking at because of how raid healing works in that game. You always want to make sure in your game that the main screen (your in-game character) is more important than any single UI component. You can increase your in-game characters importance by putting important information near it. Using a HUD or hp bars near your main hero lets you look at your hero at ALL times AND know how much health, etc you have. You never have to move your eyes away from the action on the screen.
Ok, 90% of people clicking is an arbitrary amount, I'll rephrase it to 'a vast majority of players click'. Just because they keybind 5 abilities and click the other 10 doesn't mean they are not clickers anymore. Therefore it's important to design around clicking.
Bars can be placed away from the edge, they just become less easy to use than a radial, square, or bars placed along edge.
I do encourage anyone with opinions or thoughts related to UI design to post. It's obviously important and Umbra and Eiviyn have brought up some unique perspectives.
I'm a fan of seeing large bright vibrant bars laid vertically to display health/energy/mana.
Why?
Once I get used to the game I can use "peripheral vision" (in a sense) to easily monitor my units health + energy/mana while clicking and controlling the unit. And because the health bars are not in a corner my eyes don't have to wander to that spot that is otherwise useless.
This also leaves the bottom open for things like ability bars, chat boxes, inventory boxes, etc, so it's not clogging up the screen.
Great thread...