Graphical User Interface - Design Concepts

Written by Stéphane Richard (Mystikshadows)


This article is now about telling you how your GUI projects should look like or how they should operate. This article is all about the little details that you'd need to consider in order to help make sure your GUI will be used so to speak. It will cover such things as why you should make your form elements be a given size, and other such design concepts. How the GUI looks as far as visual features is up to you. Where you decided to put things is also up to you. This article will cover a few guidelines that will help make your GUIs easier to use for the putential user.

At the end of this document, I will have given you a full range of design concepts and considerations so that when you do design the visual aspect and behaviors of your GUIs that people will want to use them and really like what you've done with your GUI project. As you know many commercial and personal GUI Projects have been created and are still being created today. This means that users have a wide range of choices available to them. My Mission is to help make sure your GUI stands out from other GUIs out there enough for people to look at it and want to atleast give it a try.


Before any visual design can begin, it's important to consider the screen resolution and color depth you'll be offering your users. Of course this depends on what the main goal of your GUI project is. Is it to offer a base environment for all other programs to abide by? Is it a GUIs specifically design for a game or a series of games? Is it a GUI that needs the most amount of colors which superseeds how big a screen resolution can be? Right before you do anything else, you should ask yourself these questions because it will greatly influence the whole design of your GUI.

When you think about it in advance, it's just a better way to prepare yourself to begin designing your GUI. IF you know the resolution you'll need, you'll be able to plan the rest of the GUI intelligently based on the screen resolution and color depth you decided on. Other things that can influence this kind of decision is the language you use, the screen resolution available on your specific system, third party libraries you may use and what they support and the likes. All in all though These are things you probably already know since they were probably a set of criteria you picked the language and library (if any) for.


Any color is great by itself, this is a known fact. I don't think I have a favorite color per se. However, this is about when you take two (or more) colors and use them together. If some color combinations are hard enough to look at on a painting, you can be sure they will be even worse on a computer screen. I'm not saying you should stick to one color or one color palette to be sure of yourselves. there are plenty of colors to choose from and plenty of color combinations that do make sense together.

The bottom line is this. First if this a GUI for a game or for a program that you know won't be used all day and every day, you can probably experiment a bit more with color combinations. However if your GUI is for something the users will use all the time, considerations should be in place to select colors that are more erstful to the eyes when you look at them for a long time. Go by common sense, if the colors are hard on your eyes, they'll be just as hard on everybody else's eyes. It's a good idea to open a paint program and seperate the canvas in say 3 or 4 sections to try colors together a bit and see how they fit. Once you choose a "winning" combination. Use it consistently.


As you can imagine, the selected screen resolution has everything to do with this section. The main reason to give a control (button, textbox, lable, scrollbar or others) a given size is so that it can easily be seen and easily be used as well. Not everyone Thinks about both of these considerations. If your controls are too small, people will have a harder time aiming atthem with the mouse pointer which will make a GUI mich harder to use. This is also why the selected screen resolution is so important. What seems small on an 1024x768 screen resolution might be just right at 800x600. However, they might be too big on a 640x480 resolution. Knowing the resolution you'll use will help determine sizes so that both considerations can be used intelligently.

Many companies have had many meetings and developed standards in control size and spacing, this alone should help illustrate just how important control sizes and spacing actually really is as far as GUI usability goes. It's not the only factor as you'll see later in this document, but it's definitaly an important part of it. For example, here is a link to the Microsoft Visual Design Guide which explains how they go about sizing the different windows controls you see and use in the programs you use every day. This guide was developed for the sole purpose to help make sure that any applications developed for the Windows Operating System be as usable as they possibly could be. Even though in your GUI, controls might look different and be in different locations, this guide might be a good read nonetheless which is why I provided it. Take a look at it, you just might like what it talks about.


Exactly what is User Interaction? The best way to describe this concept is to say that User Interaction is how the application gets input from the user AND how the application talks back to the user so to speak. Let's take a look at both of these in more details shall we?


NOt too long ago, this section would have applied mostly to GUIs designed for games. However, today, with all the advancing technologies users like (and almost expect) all the bells and whistles that a GUI may have to offer. 3D animations, Music, sounds are all part of what makes a GUI cool by today's expectations. And I fall in this Category. I like the little animations when you copy files to a different location. I like the sounds that you hear when you close windows or get error messages. It's just all fun to see and hear.

It's one thing to want your GUI to do all this stuff. However, coding for it can be a pain. If you want to include such features in your GUI, you're more than welcome to. It will help users get to like your GUI I'm sure since Today sounds, music and 3D are all hot topics. Just remember that you are coding a GUI, not a game. Typically one of the main goals of a GUI is to be functional, not entertaining. So again common sense is a good tool to deciding how much of these features you'll want your GUIs to have. If you are coding a GUI for a game then you can let yourself loose and do what you want. But if it's a GUI only, you might want to use these features moderately.

Of course, if your GUI incorporates libraries that allows you or others to include all these features in their own project that will definitaly encourage users who are programmers to create things for your GUI. So although not recommend as part of the GUI's design and usage, it's recommended as part of the GUI's capabilities.


Keeping in mind that today, RAM, Harddisk space and other resources are less and less costly, It's still no reason to waist space and use up all the RAM for your GUI. Today, when you create a GUI, you can start thinking about bigger features. But there is such a thing as bloating your GUI. Bloating a software means to make it bigger than it needs to be which makes it run slower than it needs to run to perform a given task. When talking about pictures used in toolbars for example, if you have buttons that are 32 by 32 they will logically take up more space (and resources) than if you can keep your images to 20 by 20 pixels instead. Sometimes just doing an overall in reducing graphics sizes is enough to do a great bit twards keeping your GUI resource efficient.

Another aspect of GUI efficiency is at the code level. Depending on the language you use to create your GUI, they usually offer a faster way to do the same thing. You can find, on the web, on the web, a whole bunch of tips and tricks to help keep your application's executable size smaller and make it execute itself faster. Code optimization techniques is all you have to look for. I've seen some cases where a simple different way to formulate an IF statement would make a loop executed even up to 4 times faster. Really depends which way you do things. So Coding is yet a very important aspect of your GUI design without a doubt.


You might remember my mentionning the importance of consistency. This is very important for keyboard functionality of course, but it's also important where the mouse is concerned. If you click on something with the mouse button everything that same item pops up, it should expect the same kind of clicking. For example, if you have a save button on a form. If you only need to click it once, then you should make sure that all your forms that have a save button only need one click to do their job all over your GUI. Again this is so that the user can form his or her own habits when using your GUI. Hence reduce the learning curve.

Another very important aspect of consistency is, of course, in the Visual Design of your GUI, forms and controls. You're most definitaly free to choose how your buttons will look and feel. But again, for the sake of easy learning and easy usability. It's a good idea to use the same visual buttons and make sure they look the same in all GUI components your build. Some use color to help identify functions like green for save, red to delete, yellow to cancel, etc etc... Some use shapes for the same purpose, triangle to save, square to delete, etc etc... the style of the GUI is really up to you. But if you can make sure that whatever you decide to create is consistent (as in looks the same and acts the same) throughout your GUI, you'll definitaly help your GUI be as usable as it can be. And users definitally like that.

Here's another aspect of GUI Design that I think is important to consider. Some of you might have heard about the concept of Common Dialogs and some of your might have not heard of it. Think of it this way, ultimately, alot, if not all the programs you'd likely to create for your GUI will do some very common functionalities. Fir example, Opening a file, saving a file, selecting colors, printing a document or a picture in someway and if you have many fonts available for your GUI a font selection tool would come most handy to your users. It is, to me, a good idea to create a basic set of dialogs that will accomodate for these very comon functionalities and provide a way for people that program applications or games for your GUI to use them in their applications. this will not only help in consistency of the visual aspect of your GUI, but also for the consistency of coding for your GUI. Windows among others has it's set of common dialogs that can be used by any application that is built for it. To me, it's also a big reason for it's success and I don't believe it should be overlooked to quickly.


All in all GUI design is all about personal taste really. Since you are coding it, you're likely to want to create it to your own personal taste and you'll want it to work the way you choose. That's allright really. In many cases, your way of doing things are likely to be functional and usable to some other users as well. This article, like I said earlier isn't about changing your way of creating your GUI and it's certain not to force you to abide by any standards per se. This whole document is a list of things that I believe will help you make a GUI that the most possible amount of potential users will like to see available. Typically if you take the time to consider everything I mentionned here, there's alot of common sense here. How things look is to your taste Visually speaking and it will also make your GUI unique. But considering the aspects mentionned here when designing your GUI will show the effort that you put into your GUI to make it easy to use and learn. Users being humans, will like the fact that no matter what your GUI looks like, they can get used to it fast enough if the design is consistent and if special considerations towards the user are in place.

As always I'm always opened to suggestions about this. I tried to be clear and to the point. However it's very possible that some parts are obscure to your. If that's the case, my email is in my signature at the bottom, feel free to let me know how you liked it and if there's any parts of it that you'd like to know more about. I'm always open to helping people out and making sure that what I try to teach is learnt and learnt well. So feel free to leave me comments and suggestions. Until next time, happy coding.

Stéphane Richard