The Daily Click ::. Forums ::. General Chat ::. HUD (Heads Up Display) Design
 

Post Reply  Post Oekaki 
 

Posted By Message

Jess Bowers

Cake > Pie

Registered
  09/01/2009
Points
  310

Has Donated, Thank You!GOTM FEB - 2010 - WINNER!GOTW Winner!
11th December, 2009 at 14:32:40 -


Originally Posted by alastair john jack
Diablo III's HUD is the best in the Diablo series I think, as you can see it was cloned in Torchlight too.



Diablo 3 UI explained:

Image

Also, I'm not sure Runic really "cloned" the Diablo 3 HUD to make Torchlight. The guys who designed Diablo and Diablo 2, Max Schaefer and Erich Schaefer, co-founded Runic with Travis Baldree, the designer of Fate and Mythos. Who knows... its possible that Blizzard "cloned" their ideas for Diablo 3.

Interestingly enough too, Matt Uelmen (the guy who created the Diablo and Diablo II stoundtracks) also made the soundtrack for Torchlight. It's pretty good... I've given it a couple of listens on my MP3 player.

 

Sketchy

Cornwall UK

Registered
  06/11/2004
Points
  1970

VIP MemberWeekly Picture Me This Round 43 Winner!Weekly Picture Me This Round 47 WinnerPicture Me This Round 49 Winner!
11th December, 2009 at 14:38:24 -

A couple more...

I must admit I've never played this...
Image

I liked the HUD in "Speial Forces", but everything else about the interface was awful - I remember it took me half an hour just to figure out how to select and start a mission - and that was without individually selecting and equipping my squad members first...
Image

 
n/a

aphant



Registered
  18/05/2008
Points
  1242
11th December, 2009 at 23:58:30 -

Any good HUD should display only relevant information, and any screen space used to create it should be used to its fullest. If you have some sort of passive upgrade, like something that allows you to double jump, then you shouldn't show that on the main HUD; Player decisions won't be affected by knowing at all times that they can double jump. Any item that is consumed (such as a key when opening a door) should be displayed on the HUD, as that information is needed to make a decision of where to go next (or what they can do in the case of explosives!)

Irrelevant information that can't be used to make a decision is clutter and shouldn't be displayed. Text and icons that mean the same thing (such as an icon for health and the text "Health" next to it) is redundant, and clutter; Pick one or the other, or find a way to cut down on both (perhaps by making the value a specific color?)

Artwork is a problem that is difficult to address. On the one hand, art makes an HUD more interesting. On the other, too much art is clutter.

 

AndyUK

Mascot Maniac

Registered
  01/08/2002
Points
  14586

Game of the Week WinnerSecond GOTW AwardHas Donated, Thank You!VIP Member
12th December, 2009 at 20:16:03 -

I think some HUDs were made large to help keep up performance. Basically the bigger the main game window is, the slower the fillrate is. So a big HUD helps somewhat. So in some of those examples where the HUD could be smaller, there is most likely a reason for it.

 
.

Jess Bowers

Cake > Pie

Registered
  09/01/2009
Points
  310

Has Donated, Thank You!GOTM FEB - 2010 - WINNER!GOTW Winner!
13th December, 2009 at 05:33:01 -


Originally Posted by Spaceman Strife
Wow, I didn't expect such a thorough explanation! Thanks a million, Jess.



No problem. My pleasure!


Originally Posted by Spaceman Strife
I played around with the menu based on some of your suggestions, and here's the result so far...

Image

Seems like a little bit of texturing can make a world of different, aye?



Great job, Strife! Huge improvement. Honestly, your HUD (and the HUD of all RPGs) will be far more complex than the HUDs for these shooters. So, you've got more work to do than I do.

By playing around with the information placement and mechanics of your HUD... you're actually dabbling in a field called "Usability". (http://en.wikipedia.org/wiki/Usability) When I used to work in Software Quality Assurance (a while back), I worked with Usability Engineers that would do nothing but develop software interfaces. They used detailed processes, created wireframes, conducted user focus groups, etc... all in an effort to develop the most appropriate user interface. In the gaming world, no company does this better than Blizzard. You'd be surprised how many people they have dedicated to the engineering of their game interfaces.

I think you're headed in the right direction. Honestly, you'd could spend a TON of time developing your HUD and never get it perfect. However, some time invested now in developing your HUD will certainly pay off later. Players will play your game longer and get frustrated less with an "easy to use" interface.

One quick note: Taking a look at your buttons in the bottom left, you might consider making them icon-tabs. Something like this:

Image

Again, great work and keep at it!

Sketchy - Thanks for posting the HUDs! I hadn't seen that Special Forces HUD and you're right... it is good!





 

Strife

Administrator
Der Dairy Crick

Registered
  21/11/2002
Points
  2305

VIP MemberGOTW AWARD! -Astro Dude - part 1 GOTM JULY - 2009 - 3RD PLACE!It's-a me, Mario!Has Donated, Thank You!I donated an open source project
13th December, 2009 at 18:48:10 -

Sounds awesome! When I was in college, my Data Structures class touched a little bit on GUIs, but it wasn't anything overly complicated.

Looking at that screenshot, the tabs do look like add a nice touch. I think the main issue i'd run into is the fact that the inventory/skill menus are displayed using the IconView object, which always has a black border. If I draw the tab buttons the right way though, I might be able to find a way around that. The least I can do is perhaps change them into graphic buttons, which would make the MENU button stand out more.

And thank you.

 

Sketchy

Cornwall UK

Registered
  06/11/2004
Points
  1970

VIP MemberWeekly Picture Me This Round 43 Winner!Weekly Picture Me This Round 47 WinnerPicture Me This Round 49 Winner!
13th December, 2009 at 20:10:04 -

I think you're trying to display far more information than the player needs, making it more cluttered than it should be.
All you really need to show are the health and magic(?) bars.

They don't need to be constantly reminded what experience level they've reached, or what items they are carrying.
Instead, you can just pop up a message telling them when they gain experience or find an item, and they will just remember it.

If they need a reminder, pressing a key would bring up a fullscreen menu, from which they could use items, and see more detailed information (eg. precise experience level, description of skills, etc).

If you want items to be used more directly, then you could show two item "slots" - primary and secondary, corresponding to button A and button B (or maybe one item and one weapon - you could use another button to cycle items).

You will remember that Zeliard's HUD was very simple - that's because all the unimportant stuff is viewed from a separate menu screen:
Image



 
n/a

Strife

Administrator
Der Dairy Crick

Registered
  21/11/2002
Points
  2305

VIP MemberGOTW AWARD! -Astro Dude - part 1 GOTM JULY - 2009 - 3RD PLACE!It's-a me, Mario!Has Donated, Thank You!I donated an open source project
14th December, 2009 at 11:11:50 -

Actually, the items that appear on the HUD aren't the player's inventory - they're the shortcut keys. During the game, the player can select items from their inventory and then assign them to one of the 10 shortcut keys, so all they need to do is press the corresponding key in-game instead of opening up the inventory.

Also, I do have a full-screen menu, which is accessible by pressing the M key or clicking MENU at the bottom-left of the HUD. To be honest, I think the full-screen menu is more cluttered than the HUD now.

 

Del Duio

Born in a Bowling Alley

Registered
  29/07/2005
Points
  1078

GOTW WINNER CUP 1!GOTW WINNER CUP 2!GOTW WINNER CUP 3!GOTW WINNER CUP 4!Evil klikerHasslevania 2!The OutlawSanta Boot
14th December, 2009 at 13:27:35 -

Just stopping in to say thank you to Jess Bowers for starting this thread. I read some the other day and it really made me want to make my own game's HUD look better so I did just that.

EDIT:

Here's before:
Image

And here's after:
Image

Edited by Del Duio

 
--

"Del Duio has received 0 trophies. Click here to see them all."

"To be a true ninja you must first pick the most stealthy of our assorted combat suits. Might I suggest the bright neon orange?"

DXF Games, coming next: Hasslevania 2- This Space for Rent!

Jess Bowers

Cake > Pie

Registered
  09/01/2009
Points
  310

Has Donated, Thank You!GOTM FEB - 2010 - WINNER!GOTW Winner!
16th December, 2009 at 22:03:11 -


Originally Posted by Del Duio
Just stopping in to say thank you to Jess Bowers for starting this thread. I read some the other day and it really made me want to make my own game's HUD look better so I did just that.



Your welcome, Del Duio! I'm just like you guys... I'm designing a game and want it to have a cool HUD. Right now, my HUD is pretty basic but doing this research has really helped me come up with some fresh ideas. It may be awhile before I get to implement those ideas but I'm really looking forward to playing with different HUD designs. Whenever I get something drafted, I will definitely post it here to get some feedback from everyone.

Also, you're game looks fantastic. Great work!

 

Del Duio

Born in a Bowling Alley

Registered
  29/07/2005
Points
  1078

GOTW WINNER CUP 1!GOTW WINNER CUP 2!GOTW WINNER CUP 3!GOTW WINNER CUP 4!Evil klikerHasslevania 2!The OutlawSanta Boot
17th December, 2009 at 12:50:48 -

Thanks a lot!

I agree, having a good HUD makes a huge difference. It's the part of your game that's really not going to change much over the course of playing and you don't want it too complicated.

For mine I've been incorporating some corner tabs that appear over that squarish playfield depending on the circumstance because I didn't want to mess with what I had already. The upper LH corner is reserved for the Whore's pet HP tab and the new one I did last night is for the upper RH corner for a star / score bonus thing that expands outwards and to the left. I guess if I can think of 2 more reasons to use tabs they'll go in the lower LH and RH corners but I don't want to risk covering up too much of the actual gamefield if it's not necessary.

 
--

"Del Duio has received 0 trophies. Click here to see them all."

"To be a true ninja you must first pick the most stealthy of our assorted combat suits. Might I suggest the bright neon orange?"

DXF Games, coming next: Hasslevania 2- This Space for Rent!

Jess Bowers

Cake > Pie

Registered
  09/01/2009
Points
  310

Has Donated, Thank You!GOTM FEB - 2010 - WINNER!GOTW Winner!
21st April, 2011 at 22:39:10 -

Hey guys,

Andy and I put together an entry for GameBuilder's 20 Event Competition. It's called Dungeon Dash and both the EXE and MFA source can be downloaded here:
http://www.gamebuilder.info/world/content/dungeon-dash

We did the game in about three weeks (mostly late nights) and I had a lot of fun working on the HUD - so I thought I'd post it here. It's the first HUD I've done for an RPG so I looked at a lot of other examples (Diablo, Torchlight, etc.). Let me know what you think! Thanks!

Screen 1 - Title Page
Image

Screen 2 - Play Screen
Image

Screen 3 - Inventory
Image

P.S. The top left spot of this Inventory screenshot contains a pair of leather boots. My daughters said they looked like hot dogs.

 

Duncan

Thelonious Dunc

Registered
  18/05/2002
Points
  552

VIP Member
21st April, 2011 at 23:01:02 -

OMG incredible HUD porn thread!

I'll be perusing this one ASAP!

 
n/a

Johnny Look

One Happy Dude

Registered
  14/05/2006
Points
  2942

VIP Member
22nd April, 2011 at 04:44:20 -

I love those screenshots jess, it's a shame I'm not at home I can't wait to try your game

 
n/a

tetsuya_shino



Registered
  12/08/2004
Points
  491
22nd April, 2011 at 14:38:49 -

This is a really great thread. I learned a few things, thanks for making it.

 
n/a
   

Post Reply



 



Advertisement

Worth A Click