Graphical User Interface - Design Concepts
Written by Stéphane Richard (Mystikshadows)
INTRODUCTION:
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.
SCREEN CONSIDERATIONS:
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.
COLOR COMBINATION CONSIDERATIONS:
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.
CONTROL SIZE AND SPACING CONSIDERATIONS:
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.
USER INTERACTION CONSIDERATIONS:
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?
- User Input: (What you expect from the user)
Most GUIs provide a set of controls presented to the user when some kind if input is expected from them. Some common controls are textboxes, checkboxes, radio buttons, selection lists, command buttons and the likes. It's not enough to know they exist and throw them together on a window to say that the screen is functionally correct. You need to think about things a bit. The bottom line is users need to be comfortable with using the many screens provided by your GUI or by applications that uses your GUI. Alot of common sense and a bit of layout skills is all you need. Try to keep a screen specific to a single subject. For example if you have an option screen to change different aspects of your GUI. Keep them in functional groups. Colors should be on a different screen. Other visual options should be on different screens (or tabs on a single form). Just that goes a long way in keeping your GUI easy to use. It is also important to consider implementing your GUI for both mouse and keyboard operations. Different users come from different computing backgrounds. Some users might be more proficient with your GUI if they can do everything from the keyboard. Other users will prefer to use the mouse. It's good to consider this throughout your GUI development.
Another important aspect is to keep everything consistent. if the F2 key serves to open a new file, it should server to open a new document in everything you develop for your GUI. If you have a file menu for file operations, it should be present in all programs that perform some file manipulation. This will greatly reduce the learning curve for new users and we all know users like to be in control of what's happening as soon as possible. When expecting input from the user, it should be very clear what is expected of the user and where on the screen the expected value will be entered. Likewise if you can minimize human error (such as a selection list when a fixed set of values is needed instead of making the user enter the value manually) is always a good idea especially when the expected value is an important one. You just have to sit down and think about what the quickest way to get what need is and also what's the best way for the user to give you that information. - User Feedback: (What you gve back to the user)
I define User Feedback as how well the user knows what's going at all time while he or she uses an application or a GUI. There truely is such a thing as exagerated feedback. However you need to think about when the user should be warned or told what is going on or what is about to happen. User confirmation is a good first start especially on operations that could modify or delete a file. Making sure the users know what they are about to do and making sure they have a chance to cancel the operation is a vital part of user feedback. Also, have you ever clicked a button and were under the impression that nothing was happening and tried pressing the button again? How do you feel when that happens? Lost, like you have no idea what the program is doing? Of course you did. And if you don't like that feeling, you can imagine that the users of your GUI won't like it either. Here are a few tricks to help give the user the right kind of feedback so that he's never in this state of confusion.
- If a lenghty process can be seperated in clear defined steps, a good idea is to list those steps with check boxes and once one of those step is completed you just check the box for the step. Users will see this happen and know that what they decided to do is indeed being executed.
- If it can't be broken up into steps but you know it can take a good long time, perhaps a progress bar is a better approach. Progress Bars indicate progress by filling up a rectangular area proportional to the percentage of work that has been done. This is a good visual indicator that shows the user how much is done and how much is left to be done.
- If the process will take atleast a bit of time but not too long, then changing the cursor image while the process is being executed may be enough. The important thing is to indicate, somehow, that the system is currently busy executing a task. It could be a simple BUSY written on the taskbar (or the menu) or wherever you want it to be shown on your GUI.
MULTIMEDIA CONSIDERATIONS:
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.
SYSTEM RESOURCES CONSIDERATIONS:
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.
GENERAL DESIGN NOTES AND CONSIDERATIONS:
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.
IN CONCLUSION:
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
srichard@adaworld.com