Forums » General
Hi all,
I've been thinking about Vendetta's heads-up-display (HUD) for a little bit, thinking about how it can be approached in a more clean, intuitive and attractive way. Not to say that the current interface isn't satisfactory, as I have been using it since medieval times. :)
But I challenged myself to come up with something, and one 100+ layer Photoshop comp later, I get this:
http://twofoldstudios.com/vendetta/vohud01.jpg
I've been wrestling around with it for a few days. The only thing I can't seem to really re-design is the chatbox. The rest of the HUD seems to be organized and in line, but the chatbox is left-justified and I can't seem to place it somewhere. I put it up on the top of the screen, where it seems most useful, but there must be some way to move it or modify it without losing the entire look, feel, and direction.
I tried not to vary so far from original Vendetta placement, such as the radar, the targeting elements and the speed and power bars. But I did move the what-you-have-targetted area to the left, and put your-active-ship on the top right, instead of center left. That clears up room to see what's going on during battles. I did sacrifice some information in exchange for better placement. The distance meter: I put it back on the bottom, where (I think) it should be.
As for everything else, just a general update and replacement. I used the font Conduit ITC throughout. If any of you want to have a look at the PSD file, just reply and I can upload it. I'll compress it first, though... it's 48 MB!
Your feedback would be appreciated! Thank you.
Edit: Just want to make note, that this is not a skin, and will most likely never be a skin -- unless the design is worked somehow into the original code. The skin functionality is very limited to replacing images in the current setup and not rearranging items, adding new effects, and (to my knowledge) changing fonts. This is a substantial overhaul from previous designs and if it would be considered as a replacement design, it would need to be addressed by the developer team.
I've been thinking about Vendetta's heads-up-display (HUD) for a little bit, thinking about how it can be approached in a more clean, intuitive and attractive way. Not to say that the current interface isn't satisfactory, as I have been using it since medieval times. :)
But I challenged myself to come up with something, and one 100+ layer Photoshop comp later, I get this:
http://twofoldstudios.com/vendetta/vohud01.jpg
I've been wrestling around with it for a few days. The only thing I can't seem to really re-design is the chatbox. The rest of the HUD seems to be organized and in line, but the chatbox is left-justified and I can't seem to place it somewhere. I put it up on the top of the screen, where it seems most useful, but there must be some way to move it or modify it without losing the entire look, feel, and direction.
I tried not to vary so far from original Vendetta placement, such as the radar, the targeting elements and the speed and power bars. But I did move the what-you-have-targetted area to the left, and put your-active-ship on the top right, instead of center left. That clears up room to see what's going on during battles. I did sacrifice some information in exchange for better placement. The distance meter: I put it back on the bottom, where (I think) it should be.
As for everything else, just a general update and replacement. I used the font Conduit ITC throughout. If any of you want to have a look at the PSD file, just reply and I can upload it. I'll compress it first, though... it's 48 MB!
Your feedback would be appreciated! Thank you.
Edit: Just want to make note, that this is not a skin, and will most likely never be a skin -- unless the design is worked somehow into the original code. The skin functionality is very limited to replacing images in the current setup and not rearranging items, adding new effects, and (to my knowledge) changing fonts. This is a substantial overhaul from previous designs and if it would be considered as a replacement design, it would need to be addressed by the developer team.
oh no! where's your targetless?
Ok, I'm suitably impressed; that looks very nice. However, as drazed made note of, the apparent lack of Targetless functionality in the design (or, at least, lack of consideration for such) is an overt caveat. Work that in, and I'd definitely be sold.
Another problem: How does it scale to lower resolutions like 1024x768 and 800x600?
simple answers to simple questions, it's a photoshop picture. a suggestion, not a skin(my understanding). targetless could easily go on the left or right side of the screen where it can be placed now, and (no offense drazed) targetless is a script added by players, not by guild software. and who uses 800x600 anyway?
anywho, i like it! :P
anywho, i like it! :P
More simple answers: I use 800x600. Of course I understood that this is a mockup, but scaling is a major issue to be considered for interface design.
I love it!
yeah. it's pretty.
The horizontal space in between each "swoosh" on the top and bottom is repeated and scalable. To adapt the design for 4:3 ratio screens (or smaller) the space is shortened:
http://twofoldstudios.com/vendetta/vohud03.jpg
And elements (such as the clock) are moved to their most approximate locations.
http://twofoldstudios.com/vendetta/vohud03.jpg
And elements (such as the clock) are moved to their most approximate locations.
Make the Chat Box movable?
OR
You could put the Chat Box on the Left.
OR
You could put the Chat Box on the Left.
No offense taken Waffles, I made that initial comment as a joke to emphasize that re-doing the HUD this much would cause alot of headaches for players who have contributed their bit to VO. I could easily re-do and re-release so it's not a personal concern, but how many skins would be reusable? How many plugins would crash because the HUD is now missing something that was being removed/appended to?
Additionally, 800x600 is supported by the game, thus things need to scale to that size, if you don't like that too bad! These designs are 1640x1200px, and 1920x1200px. How many people play at that size? And how much could you really scale that down? I'm not complaining for myself here, as I have 1920x1080 and 1680x1050 screen sizes, but the majority of gamers (and especially VO gamers) do not!
When I made targetless I tried as much as possible to support the full range of display sizes that it may be ran on (including 800x600). And the number of complaints/issues I had reported with people who had 'lower' resolutions greatly surprised me, a great many people DO use 800x600, and the majority of VO'rs are probably running at 1024x768 or similar.
If you're gonna continue these designs you should work on a 1024x768 resolution sample to show us. I could see (and agree that it should) 800x600 being non-standard pretty soon (although with the sub-notes coming out, there is more want/need for these low-res then ever before), but I very much doubt we will be making the standard higher then 1024x768 any time soon.
PS. The HUD pics are pretty indeed, and I had similar thoughts on what the HUD 'should' look like.
Additionally, 800x600 is supported by the game, thus things need to scale to that size, if you don't like that too bad! These designs are 1640x1200px, and 1920x1200px. How many people play at that size? And how much could you really scale that down? I'm not complaining for myself here, as I have 1920x1080 and 1680x1050 screen sizes, but the majority of gamers (and especially VO gamers) do not!
When I made targetless I tried as much as possible to support the full range of display sizes that it may be ran on (including 800x600). And the number of complaints/issues I had reported with people who had 'lower' resolutions greatly surprised me, a great many people DO use 800x600, and the majority of VO'rs are probably running at 1024x768 or similar.
If you're gonna continue these designs you should work on a 1024x768 resolution sample to show us. I could see (and agree that it should) 800x600 being non-standard pretty soon (although with the sub-notes coming out, there is more want/need for these low-res then ever before), but I very much doubt we will be making the standard higher then 1024x768 any time soon.
PS. The HUD pics are pretty indeed, and I had similar thoughts on what the HUD 'should' look like.
drazed,
I hope you do not think I am planning to replace Vendetta's current HUD and design direction. As Waffles pointed out, this is not a skin or intended expansion. I understand your concerns about current plug-in functionality, but there is no need to discuss that at such a level.
Additionally, I created the 1640x1200 composition in an effort to demonstrate that 4:3 ratios could be achieved using this design. I did not assert that a majority of users are running that screen resolution, and I certainly did not express any distain for users that are currently running at 800x600 or 1024x768. To answer your question, I prepared two more compositions of the design, at both 1024x768 and at 800x600.
http://twofoldstudios.com/vendetta/vohud1024.jpg
http://twofoldstudios.com/vendetta/vohud800.jpg
The goal of interface design (as I'm sure you know) is to provide an effective, sensible and universal approach to the interaction between a user and the features or functions of the application. In a more literal design and approach sense, all display resolutions must be considered and adjusted for (in the most responsible and transparent method possible). From my education, it is never acceptable (when scaling) to omit, rearrange, or do anything to the interaction elements to force the user to reassert his/her knowledge or "re-learn" the natural flow and parameters of the interaction.
Consider the way Vendetta handles resolution and scaling:
http://twofoldstudios.com/vendetta/comp.jpg
At first glance, it looks as if all three images are the same. But they are not, they were taken from the game at three different resolutions. Closer inspection shows that the game engine resizes (or scales) the game graphics to fit "readable" size on each resolution. The game viewport stays the same (to ensure fairness across all platforms) but the chatbox and other UI elements scale up in lower resolutions to ensure that the user can see them. When the resolution is higher, the game engine will scale the elements down because their content/information can be expressed with more allotted space. It may seem simple, but the process is tricky: to ensure the same game interaction across as many different platforms as possible.
Then we arrive at the question: how much does the game scale graphics from the original 100%? What is considered 100%? Let's take the ship direction icon (from Obsidian 2, an excellent skin by a member whose name escapes me at the moment):
Original size in the game files, 100%
Taken from the screenshot in 1920x1200
Taken from the screenshot in 1024x768
Taken from the screenshot in 800x600
As you can see, the game engine will automatically scale down or up graphics, from their original size, to better suit resolutions with smaller pixel count, allowing the same amount of graphic elements to be displayed on screen without crowding; following the rules by not omitting, rearranging, or re-establishing controls in a new location.
When designing for Vendetta, I made sure to take into account a certain scale factor between resolutions: that if all the graphics, at 100%, would fit in an area of 1920x1200, then with every incremental decrease of the resolution, the graphics would scale down at that size. But we quickly realize there is a problem: the HUD graphics, at 800x600, would be too small to interact with. So they are manually scaled in relation to the rest of the HUD, which is what I applied to both images attached at the beginning of this post.
Regardless of screen resolution or pixel count, the HUD layout should scale up or down, which is what I tried to express in the mock-ups above.
I hope you do not think I am planning to replace Vendetta's current HUD and design direction. As Waffles pointed out, this is not a skin or intended expansion. I understand your concerns about current plug-in functionality, but there is no need to discuss that at such a level.
Additionally, I created the 1640x1200 composition in an effort to demonstrate that 4:3 ratios could be achieved using this design. I did not assert that a majority of users are running that screen resolution, and I certainly did not express any distain for users that are currently running at 800x600 or 1024x768. To answer your question, I prepared two more compositions of the design, at both 1024x768 and at 800x600.
http://twofoldstudios.com/vendetta/vohud1024.jpg
http://twofoldstudios.com/vendetta/vohud800.jpg
The goal of interface design (as I'm sure you know) is to provide an effective, sensible and universal approach to the interaction between a user and the features or functions of the application. In a more literal design and approach sense, all display resolutions must be considered and adjusted for (in the most responsible and transparent method possible). From my education, it is never acceptable (when scaling) to omit, rearrange, or do anything to the interaction elements to force the user to reassert his/her knowledge or "re-learn" the natural flow and parameters of the interaction.
Consider the way Vendetta handles resolution and scaling:
http://twofoldstudios.com/vendetta/comp.jpg
At first glance, it looks as if all three images are the same. But they are not, they were taken from the game at three different resolutions. Closer inspection shows that the game engine resizes (or scales) the game graphics to fit "readable" size on each resolution. The game viewport stays the same (to ensure fairness across all platforms) but the chatbox and other UI elements scale up in lower resolutions to ensure that the user can see them. When the resolution is higher, the game engine will scale the elements down because their content/information can be expressed with more allotted space. It may seem simple, but the process is tricky: to ensure the same game interaction across as many different platforms as possible.
Then we arrive at the question: how much does the game scale graphics from the original 100%? What is considered 100%? Let's take the ship direction icon (from Obsidian 2, an excellent skin by a member whose name escapes me at the moment):
Original size in the game files, 100%
Taken from the screenshot in 1920x1200
Taken from the screenshot in 1024x768
Taken from the screenshot in 800x600
As you can see, the game engine will automatically scale down or up graphics, from their original size, to better suit resolutions with smaller pixel count, allowing the same amount of graphic elements to be displayed on screen without crowding; following the rules by not omitting, rearranging, or re-establishing controls in a new location.
When designing for Vendetta, I made sure to take into account a certain scale factor between resolutions: that if all the graphics, at 100%, would fit in an area of 1920x1200, then with every incremental decrease of the resolution, the graphics would scale down at that size. But we quickly realize there is a problem: the HUD graphics, at 800x600, would be too small to interact with. So they are manually scaled in relation to the rest of the HUD, which is what I applied to both images attached at the beginning of this post.
Regardless of screen resolution or pixel count, the HUD layout should scale up or down, which is what I tried to express in the mock-ups above.
Do you think someone could make a skin with it and have it available in the VO Community Projects board? I really like it!
In theory, yes, but it would probably require a custom version of the interface code.
That looks good, but I'm afraid it fills space without serving a useful purpose. Look at everything in the display and ask the questions:
1. Why is it THERE?
2. Do we need it/would it be better somewhere else?
3. Can you represent the data/information in a better fashion?
1. Why is it THERE?
2. Do we need it/would it be better somewhere else?
3. Can you represent the data/information in a better fashion?
I personally think this design is very pretty, because it's symmetric. Symmetry is beautiful! The current HUD lacks symmetry =(
PS.. I see you've found your targetless in the RL ingame pics you posted =9
PS.. I see you've found your targetless in the RL ingame pics you posted =9
An interesting article I came across while researching the topic and refining the design:
Off With Their HUDs!: Rethinking the Heads-Up Display in Console Game Design
http://www.gamasutra.com/features/20060203/wilson_01.shtml
Although the article focuses on console design, the concept is the same. Along with input from Leebs and others, I'm working on another design, one which might convey information in a more concise, approachable way.
Off With Their HUDs!: Rethinking the Heads-Up Display in Console Game Design
http://www.gamasutra.com/features/20060203/wilson_01.shtml
Although the article focuses on console design, the concept is the same. Along with input from Leebs and others, I'm working on another design, one which might convey information in a more concise, approachable way.
"from Obsidian 2, an excellent skin by a member whose name escapes me at the moment)"
*Cough*
*Cough*
Yes. I like it. Very much actually. But here is a downside, at least for me. I think that it would be a bit distracting in use. Perhaps if the upper and lower "swoosh" areas could be user customized as far as transparency is concerned (?).
Oh. And I use 1920 x 1200 all the time....
Oh. And I use 1920 x 1200 all the time....
Can the VO Devīs add this GUI to the Game please?
Itīs very nice :)
Itīs very nice :)