2

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.

I am not a graphic designer, however I have been tasked with throwing up a prototype GUI for the system and I want it to look at least half decent when I show it to my superiors, my question is are there any good resources for gaining some insight into how to develop an intuitive GUI for this unique style of system?

The "feel" we are going for is a high-tech, clinical look (think about that scene in minority report)

Apologies if this comes across as a heavily opinion based question (usually not appreciated on Stack Exchange sites), if someone would suggest a better place for me to post this, I'll happy delete my question and move it there.

Thanks

  • Hi Aphire, welcome to GDSE and thanks for your question. If you want to know more about the site, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site! – Vincent Jun 4 '15 at 11:39
  • 2
    I think this is just a poorly worded question. You should add some screenshots of similar things you are looking for, what you've tried, why you think its not working..... etc. "Mirror GUI samples" is pretty open-ended and not well defined. – Scott Jun 19 '15 at 18:06
  • Context is everything. It all depends on the particular needs of the user. – DA01 Jun 19 '15 at 19:33
  • This question in its current form is, bounty or no bounty, mostly impossible to answer in a way that would bring any value to you. While the medium really matters for the design, what the gui is trying to do matters even more. So its not the opinion problem its also a problem of what your asking us to do. – joojaa Jun 20 '15 at 8:45
  • I actually agree entirely, the reason I have left it so vague and not posted screenshots or anything is because I can't actually find any resources that match what I am looking for. I really posted this question looking for some pearls of wisdom from a community that I know could do a better job of this than myself. – Aphire Jun 23 '15 at 11:34
1
+100

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:

http://www.istockphoto.com/vector/education-infographics-vector-37457426?st=98492d9

http://www.istockphoto.com/vector/vector-image-of-infographic-elements-35677988?st=98492d9

http://www.istockphoto.com/vector/business-infographic-elements-37428886?st=98492d9

http://www.123rf.com/photo_12837356_different-indicators-collection.html?term=infographic

http://www.123rf.com/photo_17533676_infographic-elements-pack.html?term=infographic

http://www.123rf.com/photo_10933489_set-of-infographic-charts-icons-and-design-elements.html?term=infographic

http://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:

3-columns design sample

4 Columns:

4-columns design sample

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 of UI

Example with menu:

Example of UI 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:

Adobe Kuler Vibrand color scheme example

Different tones, more commercial/medical style:

Kuler Adobe color scheme blue, gray, turquoise

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:

Mirror UI project eye and vision focus example 5 zones

And here with 6 zones:

Mirror UI project eye and vision focus example 6 zones

I hope this helps!

  • Hi go-me, thanks for the long and detailed answer, I know this question is quite difficult to answer meaningfully. Unless something spectacular turns up in the next day or so i'll be awarding you the bounty, cheers. – Aphire Jun 23 '15 at 11:21
  • Thanks for the feedback. I understand you probably cannot post a screenshot of what you're really working on (or a prototype) and give too many details either for obvious reasons. Maybe you already knew about the details I added, maybe not. Let's hope it will be useful somehow. – go-junta Jun 24 '15 at 5:10
-1

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.

  • Apologies if this comes across as ignorant (I may be generalizing all graphic designers), but I think you might be selling them short there. The ones I have worked with in the past have managed a lot more than just colouring in, they usually decide the whole feel of the product, what goes where and what does what etc, they are trusted to ensure the product is intuitive to use, as well as making it look nice – Aphire Jun 8 '15 at 9:17
  • May you actually be referring to UX and UI designers? – Silly-V Jun 15 '15 at 18:16
  • I probably am, that's what I meant by I may very well be generalizing designers, would this stack exchange site still be the best place for such questions? – Aphire Jun 19 '15 at 11:08
  • If I'm understanding you correctly, your core question is not "How do I make this look good?" but "How do I make this work well?". This is the right place to ask the first question, but UXSE would be better at answering the second. – Leslie P. Jun 19 '15 at 13:34
  • 1
    Hi Leslie, to be honest, i'm kinda after both. with regards to what kind of theme / feel can I use to ensure this looks good (as its a fairly unique platform when you can see yourself in the screen) as well as how I can display information that isn't in the way, but can still be easily read and users can navigate the system well. I hope this makes sense.. Thanks for the reply – Aphire Jun 19 '15 at 15:43
-1

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.