Graphical User Interface Design*

   by Howard Prince, (LCGuy), Partner, Lunar Concepts

   One of the very best features PhotoImpact has is its’ ability to quickly and easily provide realistic looking “real world” materials, that we can shape and configure to look like almost anything we dream of. It’s this power and ability that has brought our beloved PI to the forefront of web imaging use, however, I have been using it for a bit more than that for some time now- I use it to design GUI’s (graphical User Interfaces) for my web sites and software/web applications.

   “What is a GUI?”, you ask?

   Simply put, a GUI is the part of any program (software), or physical element (such as the ATM machine at your local bank) that allows you to access the software or device functions in the most easily understood, and pleasant way; it’s what lies between the user and the “guts”; hence - “interface”.Think of it as a virtual “liason” between the really technical inner workings and the user.

   Imagine, if you will, going to a web site that had 1000 pictures on it, that you had to access. If, for example, all the web site designer did was to put each picture on a separate page, how would you know how to get to each one of them from the main page? Obviously, he’d put a list there of all 1000, right? But, isn’t that kind of clumsy, and asking the user to do allot of work by reading all of the 1000 links at once to find the ones they are interested in?

   Yep. So, he would break it down into subcategories.. but, now, he’d be complicating the web page.. categories, subcategories, and THEN link to the picture. Once you view the picture, then what? You have to get back to the main page, right. So, that has to built into the design, also.

   Of course, he could do all of this in plain HTML text.. it would be simple, and fast, but there would be no style, no “experience” to make people stay on the site. or even enjoy using it, right?

   Now, let’s to go to the other end of the spectrum: if, at your local ATM you are trying to get some cash, and the program that was written to run it (that you interact with to tell it from what account, and how much) is confusing to you, that too would be a VERY bad thing, right?

   Enter the GUI.

   These are not just pretty pictures, but, when executed correctly, they “guide” the user through the web site/software application, without making the user feel lost, confused, or disoriented; this is where the device/application/program either succeeds or fails.

   Back to software stuff... 

   My education and training as an architect has been a very structured one, and, in-as-much, I had to learn to balance my meager artistic tendencies with hard pragmatic functionality. Perhaps that is why I see a major similarity between the design of a building and the design of a software application/web site; each has an “entry” point, a method of “circulation”, and would be a blatant failure if the visitor ever gets lost or disoriented, once inside.

   Having said that.....

   One of my very own observances over the past years is that, indeed, people can become very intimidated when using a new device, or a software program/web application. I’ve seen it too many times. If the problem isn’t too much “perceived complexity”, then it’s not providing enough information to help the user get on with the experience of using the program. So, in that observation, I have developed a concept that is based on a process of designing a GUI with the sole purpose of providing the user with just the “right” amount of information, in a fashion that hopefully they find easy to use. My personal style has been to emulate some real world materials in the design of the GUI to help people feel comfortable more quickly when recognizing a “familiar” material, rather than provide fancy and artistic patterns and graphical/abstract art compositions; the reason is as I just mentioned: while it might look great to some who can appreciate that (and let’s face it, not everyone appreciates “art”), more than a good amount of the users will, in my very humble opinion, likely not understand it, appreciate it, or even take the time to try to get used to it; at that point, the site/application loses the visitor, and it is a failure, no matter how “good” it looks.

   I’ve seen some fantastically designed web sites and applications do just that... they look really cool, but fail miserably, because of this very thing. And this is why my own work, in both web design and application design, has taken on the more “tactile” feel.. materials like metal, glass, mirror, plastic, put together into “real world” recognizable elements such as buttons, pipes, metal trim, metal panels, etc... stuff that the user can easily associate with the “real world”, which, hopefully, will make the user experience one that is less “alienating”, while yielding more “comfort”, thereby enabling his/her use of the site/program/application to a fuller degree.

   For example, I recently finished a web site for MGJ Associates; they are mechanical engineers who work as project consultants for many architects here in NY. Their web site has almost 100 pages with many subcategories and sections. But, long before the web site was up, the site had to be totally organized, broken down into logical sections, and then an assigned an “overall” design theory that would be consistent throughout the site, without being intimidating to the visitor; and all of THAT required a carefully thought out GUI, as discussed above.

   The first step is always the hardest.. coming up with the aesthetic appearance that works well for the client. Using PI, I came up with a highly technical user interface design as the theme (a structural theme.. which suggests “engineering”, I thought), and worked their logo into it, also. This wound up being the one submitted to them in the preliminary submission:

   

   The key here was that I had to appeal to the MGJ’s main target visitor: architects.

   An analysis of the design of this interface is as follows; perhaps you will find it useful: the use of consistent colors throughout is an attempt to maintain consistency with a clear navigation scheme. I separated the site navigation (top menu bar) from the site utilities (bottom), and put the content inside the middle portion, which is where all “real” work is done later on. Company ID is on top, and stays there throughout the site experience, assuring the client proper credit and association with content, without having to be redundant inside the actual content, which is a waste of valuable space.

   Again, using “real world” materials (steel strusses, chrome, background grid of metal panels, glass, etc.. ) that will appeal to the known visitor.. architects, so that they will feel comfortable and familiar with the site. Just my own style and theory; everyone has thier own, and there is no ONE “right” way, remember that.

    Now, if you, the reader, were assigned this project, I have no doubt that you would design this differently (perhaps, even better!). How would you do this type of GUI? What do you think would appeal to “architects”, and how would you keep thier interest? How would you like to organize the various types of information this site has to offer, so that it is easily accessible, but not overpowering to the visitor?

   Here is an example of a different type of some GUI work I’ve done, but not for a web site, rather, an application - a utility I designed called the “Time Clock”. (It’s a free download for anyone who wants it, by the way, feel free). For this application to be an acceptable utility for the average user, it had to be functional, and small, yet visually appealing (hopefully) and easy to use, as it is a desktop timer that one uses to keep track of tasks that require time tracking. In that, the application had to be compact in both physical (we don’t want it taking up too much of the desktop while it is open) and file size (memory issues, but that is a story for a different article), but clearly easy to use, and “simple”. Again, my “artist easel” was PI, and here is the base image I came up with, using mostly the path tool and some metal finishes:

   

   If you compare the above base image with the actual finished application, I think you will be able to see how it was designed for/around the particular function of the application itself. It’s small, with clearly indicated buttons, “tactile”, yet, with a definite sense of “organization”. Again, we don’t want to intimidate the user; judge this for yourself.. is it successful? Or, how would YOU do it?

   For a final example, I’d like to show you something that is more “conceptual”, if I may. Please take a look at this:

   

   Just something for fun; perhaps a menu bar for a new “OS”?? Whatever, PI sure made it easy as pie... this would be a great exercise for you to try, if you like. Try it, see what comes out of it, and let yourself go. Remember, there is no “right” way, as long as you are successful in YOUR stated goals for the design.

   For those of you who are interested in GUI design, I suggest that you study the applications that you have on your desktop, to see what is “good” and “bad”. And, then go to the Web, and look at various sites, to see which ones are, as I mentioned earlier, the “look great, but hard to get around in” type. Learn from others’ mistakes, and try to develop your own style and theory of approaching this design element.

   Then, it’s just a matter of opening up PI and letting your imagination help you come up with some ideas; just make sure you have a set of rules to go by when designing, regarding who the user is, what the function of the site/application is, and how you want them to experience the site.

   After all, that is what it’s all about, isn’t it?

   *Sincerest thanks to Cedge, for helping me get some perspective while writing this article. Cedge, You da man!

Current list of LCGuy Mini-Tutorials for
Ulead PhotoImpact and/or Strata 3D Pro:

Files for download: