: Mirror HUD GUI design resources I am developing software, in which the user will be reading information from a heads up display style mirror and interacting with the HUD GUI via voice commands.

@Debbie163

I don't have any resource to suggest you but planning this kind of work should be similar to planning an app or a dynamic website.

From what I understand, you'd like to know how you can show to your superior a nice "proof" or first draft of your interface to give them a feel of the process and how it will work.



The plan

First step will be to make a plan on paper, and sort the logicical elements, and how it should work. For example your first page will be a welcome screen, and then the next page will be the result of the first action, identified logically depending on what button #1 do and if there is any kind of "goto". I know you mentioned voice activated stuff but basically it's like a button being pushed. I'm not sure if I make sense. But anyway, you probably know that part already and that's the one that takes the most time in the preparation of your project.

As for the "priority" of what to put on top or bottom, or left or right and how big... That's stuff you'll figure out according to how often the features on your GUI will be used and what needs to always be visible without moving the head too much. If you play computer games, some of their UI are made to look straight, not move the head too much and have the health bar easily visible only by moving the eyes; maybe you can get some inspiration from some of them. The features that are the most used should be at the level of the eyes; The things that are the least used or secondary functions should be smaller and on the bottom or sides.

And for the text size, the logic is the titles must be the biggest elements so people don't need to guess what is going on on the screen and where they are. Then the subtitles (or title of each graphs) should be a bit smaller and not take the attention away from the main titles.

One way to know if you have a good balance is simply asking yourself "where do my eyes go first", and if it's where you want them to go, that's a good size, style and position. That part, you'll probably do it while working on the layout. But it's good to plan ahead for the texts though or you'll lose your focus when you'll start doing the design. The same principle can be used for the graphical elements.



The graphics

If you want to find nice graphics that will show the data in an original way without having to draw everything from scratch, you can have a look at stock picture websites, and search for keywords such as "infographic". Usually these files contain vector graphics that can be used individually and all kinds of original ways to show graph and tables. If you don't have a budget for your first proof, maybe it's possible to find some of them online for free. If you can't find any, you can at least create that kind of graphics by taking screenshots of similar UI or create them yourself.

Here are some examples:
www.istockphoto.com/vector/education-infographics-vector-37457426?st=98492d9 www.istockphoto.com/vector/vector-image-of-infographic-elements-35677988?st=98492d9 www.istockphoto.com/vector/business-infographic-elements-37428886?st=98492d9 www.123rf.com/photo_12837356_different-indicators-collection.html?term=infographic www.123rf.com/photo_17533676_infographic-elements-pack.html?term=infographic www.123rf.com/photo_10933489_set-of-infographic-charts-icons-and-design-elements.html?term=infographic www.123rf.com/photo_13219642_elements-of-infographics-with-buttons-and-menus.html?term=infographic
Already you can choose a style you like and see if there is anything useful that can present the data you need to show in a proper way (and in a logical way too.) You can use the low resolution image comp files (demo files) available on the stock images websites first, and make some tests with them to get a preview of how it will look like in each part of your GUI before buying the pictures. Once you buy them, if you can get vectors, they will be very easy to use individually and to modify as you want/need to.



The layout in general

For the layout, it should be similar to any kind of layout and it needs to be balanced. If you use a basic 1-2-3 columns style, it should be easy for you to fit your menus, tables and graphs.

Here is an example for the balance (sorry it's a Photoshop done very quickly):

3 Columns:



4 Columns:



As you can see I always use the same kind of logic with 3 and 4 columns, as if my page was made of 9 or 12 squares, and simply added my boxes depending on the width or height I need. You can use 2-3-4-5-6 columns, it's up to you, but in general that kind of 3-4 columns layout is easy to balance and to visualize when you do your layout. If you have a lot of small elements then maybe it's better to use more columns. The principle is similar to what is used to create the classified ads section in newspapers.

As I mentioned for the titles and subtitles, the most important part of the UI should be the biggest or at least be clearly visible. There's many ways to do this; by adding shadows around the border, by adding a thicker border, a background with a contrast color, a bigger title or a title in bold while the other titles are thinner, by having this section in color and the others in grayscale, etc. The important is to not make people "search" for the important or most used features.... and also limit the number of operation to get somewhere. That's why the plan in the previous section is so important.

Example without menu:



Example with menu:



The elements that need to be monitored at the same time or together should be close to each others in order to let the user easily focus on them, so he doesn't need to always move his eyes around. It's more comfortable for a user to be able to simply move the eyes up and down, or right and left and have the main elements still in the field of vision when looking at at the secondary ones. That's why the main elements need to really have emphasis, it's kind of easier to get the focus back on them. The other elements should be grouped in a logical way, based on their priority.

On my examples above, I tried to make the focus go from top to bottom for the main elements (eg. more important on top, less important on the bottom.), but my "secondary" priority has been put from left to right so they can still scan the UI up and down for the main categories of features, but their eyes should do a right-left on top, most of the time. I hope I make sense.

Since you want something very "high tech", I don't suggest you use too many colors for your background and main UI. A nice pale gray with soft gradients, in the same style as the Apple MacOSX interface would be very stylish and easy to match with anything.

If you think you'll need a lot of graphics or buttons, use them to add some accent color to your interface. Try to not use more then 3-4 colors, unless you use different tones of the same one.

If you need ideas for color, you can find nice color palettes online or you can use a scheme that comes with the infographic examples I mentioned previously. You can also have a look at "Kuler" that is accessible as color palette in your Illustrator, for example. Some nice color schemes were created already by other Adobe users and might inspire you.

Just an opinion: the gray fits very well with a red, green, blue and it's very classical. But you could also use different shades of blue for example or the colors of your company or the color of the client of your superior. That will really have a positive effect on them. You don't need to use the bright standard red-green-blue colors, you can use some "washed out" tones instead, it may look more modern.

Red, green, blue example:



Different tones, more commercial/medical style:



If the user of the interface will need to look at it a lot, you should avoid colors and contrasts that are too bright. You can even use a dark gray background to compensate for the brightness of the display.



The proof

Once you've done the plan, selected the graph styles and the colors, you can create a proof to show to your superior. As you said, proofs should be very nice and show the final result as much as possible (and make the superior wants to hug you). What you can do is to create your graphic interface elements on a Photoshop or Illustrator file and show them flat, eg. as JPG. But in your case, you might want to add a bit of dynamism.

If that's something you can do, I have 2 suggestions that could be better for this:

1) Create some animated gif that will show how each element work and what they do when activated. Since you'll probably show this on a laptop or desktop computer, the size of the files isn't really important and you can really make nice animation easily with the timeline in Photoshop. If you have a lot of "stages" on your GUI, this could be a bit hard to clearly show what each things does though.

2) Create a very simple proof in basic HTML with Adobe Dreamweaver, Adobe Muse or whatever you prfer for this. You can really create something quickly with Muse and it works in a similar way as Photoshop and Illustrator but has way less tools.

All you'll need to do is to prepare the image for your buttons or graphs individually in .png, and add them on top of the background (also in png or a colored rectangle in Muse) in the software Muse. And then add some hyperlinks to the graphics, buttons, etc.. Each page should be a new "stage" or result of an action. Once you're done adding your graphics and hyperlinks to link all the pages together, you can simply export this package in HTML and host it somewhere or show it to your superior by dragging the index.html file on your web browser on your computer.

The basics of Adobe Muse are not very hard to learn and it has some nice little features to create fake "popup" or rollovers or fields for examples. You can add text in it, draw simple shapes, lines, etc. It's a very easy graphical way to create simple webpages. If you have elements such as navigation menus (or many), you can simply create different master pages that you can apply to each page. If you haven't use Muse yet, maybe you'll need to play around with features and tools a bit but the learning curve isn't huge for simple pages. You can really create a nice quick proofs with it and it might in fact be faster than flat JPG or animated gif if you have many "stages".

What could look even nicer if you have graphs with variable data and moving graphs is to add these as gif images in your Muse file.



Edit: If all this is to much work for you to put together or you simply don't have time for this, you can always show your plan as you probably usually do with your other projects but add to this some color swatches, examples of graphics like the urls I mentioned above with infographics, and online screenshots of website you like. This will already give to your superior a good idea of what he can expect. And these details can be given to the designer team as a guideline for their own work.

Edit: Since your said in a comment "as its a fairly unique platform when you can see yourself in the screen", instead of filling the middle part of your screen with elements, you might want to spread them around the "shape" of the reflection. And instead of going from top to bottom for the emphasis on the elements, you might prefer to place the important ones at the height of the eyes, then up, and then the least important ones on the bottom. You'll probably need to make some tests with your own plans once they're done, and see what feels the most comfortable.

I don't know what this is all about, but one way I would focus the elements is this way or similar (the side doesn't matter.) I separated the areas in 5 zones:



And here with 6 zones:



I hope this helps!

Vote Up Vote Down

@Moriarity648

A way to get a "resource" for the design is just looking at other examples (movies, designers, video games, etc...) then you can try to sketch it on paper and see how it looks,try to use max 3 colors since it's a HUD, in my experience it's the best way to get something done.
First: analyze all the elements that a HUD requires
Second: find the idea see various concepts and try to sketch it
Third: once you have all your sketches try to look how it goes and if you need help try to contact a designer, (I'll be glad to help).

Vote Up Vote Down

@Shanna688

I am not sure about resources, I think that graphics are one thing, but to create an actual GUI is probably on yourself, isn't it? You know what you want the result to be, as long as you can draw it on a napkin in pencil, anyone who is a graphic designer can color it up for you and make it look good, if they are skilled.

Vote Up Vote Down