|
|
Graphical User Interface Design
|
This paper describes the Design process for Graphical User Interfaces.
Making a good Graphical User Interface (GUI) is quite often the make or break
point of creating a brilliant application. The functionality of an application
can be programmed perfectly, but if the GUI is hard to figure out or annoying to
use, then the program ultimately will be a failure and the end user will likely
choose something easier or more convenient. Since making a good GUI is vital to
the success of a program, it can be the hardest part of creating a program.
In highly-funded projects, the teams that design the GUI can consist of many
people with diverse skills. Graphics design artists, programmers, sound editors
and even psychologists have teamed up together in search of the most intuitive
and efficient GUI’s possible.
This report will concentrate on the characteristics great GUI’s have in common.
It will also focus on why some GUI’s fail. Finally, it will take a look at the
difference in creating a GUI for a web application vs. creating a GUI for a
desktop application. While this is a big topic, the majority of the detail will
be about what to concentrate on when building a GUI and not a run down on how to
build the GUI.
Key Ideas of GUI Design
GUI design is a relatively new portion of modern computing. The initial graphic
user interface to bridge computers and users wasn’t even available to the
general public until the first Apple computers were released on the market. The
biggest advancements in user interface happened when Xerox labs created the
mouse and the modern point-and-click interface. For the purpose of this paper,
GUI will refer to a point-and-click interface that is able to be used on the
majority of PC’s. Though more efficient GUI’s are capable through the use of PC
tablets and touch-screen devices, the majority of users still use a mouse and
keyboard interface.
All OS GUI’s have certain things in common: a method of starting programs from a
list of available applications , a way of browsing the file structure, and if
the OS supports multi-tasking then it will also have a way of accessing what
programs are running currently. Most OSs do this pretty similarly. They use the
same basic components—windows, icons, menus and taskbars make up a good portion
of the default GUI experience. This is known as the WIMP interface. Applications
expand on this and provide a variety of controls to make communication between
the user and the application as smooth as possible.
GUI design and the WIMP interface has come a long ways since Apple took out 26
pages of advertising in several major publications to explain how a mouse works
in an attempt to sell their new idea. Reading tutorials on GUI design from 5-10
years ago serves little value to a developer other than as entertainment value
in comparing the way things used to be with the way they are now.
GUI design in today’s world has an emphasis on being intuitive. An intuitive
application is created by designing a predictable GUI that is consistent in its
behavior to a users input. Obviously, looks are important but the feel is
ultimately what the user deals with in a GUI. A simple GUI that is predictable
and consistent provides the ideal experience for the user.
A simple GUI is geared towards the target audience to be within their realm of
knowledge. If an application is being developed for senior citizens, then using
a tree view is probably not the best way to display data because the majority of
them don’t have enough experience with computers to feel comfortable with that
method of displaying data. The GUI should be appropriate to its audience and
shouldn’t be any more complex than is necessary to provide the ideal
functionality. Ideally, a great GUI accommodates its users. It is as transparent
as possible while allowing the user to work freely, with the focus on the
content of the work while being visible enough to allow the user to freely
access the controls being used to work.
A great GUI not only needs to be intuitive and simple at taking input from the
user, but it needs to be responsive, so the user knows immediately what the
result of the input was. This is often done with sounds and status bars.
The Good and the Bad
In the assumption that most users are familiar with computing in a GUI
interface, designers are allowed to make things as simple as possible while
remaining intuitive. This is the ultimate balance to strike when making a great
GUI. A great example of a simple yet intuitive interface that still provides a
lot of functionality over a large set of controls is the Adobe Photoshop UI. In
the opinion of the author, Adobe Photoshop is a success as a GUI because it lets
a relative novice do complex graphics manipulations with very little training.
The interface is made of components that are mostly familiar. The icons on the
left represent do a good job representing the tool associated with them, and the
arrows in the lower right hand corners of the icons mean that there are more
related tools to select in the group. The windows on the right display
information associated with a subject. The top window shows data about the whole
image. The window below it shows information about color selections. The windows
can be closed and opened using shortcut keys or the mouse.
What makes the interface worth mentioning is how intuitive it is to most users.
If the controls are familiar to the user, the user can figure them out pretty
quickly. The multiple icon interface used on the tool pane on the left is pretty
unique to Adobe products, but once a user learns it, it provides a fast way to
find a tool that the user isn’t certain where to find. The intuitive user
interface allows the user to learn as they get work done.
The final beauty of the Photoshop interface is that it represents simply a lot
of different tools and methods to get things done. By having a simple interface
that stays out of the user’s way, the user doesn’t feel overwhelmed. The
workflow using a product with a simple but intuitive user interface is bound to
be much higher than using something with a user interface that interferes with
the user.
An example of an interface that interferes with the user is apparent in GUI’s
that use two list boxes to organize information. If they aren’t designed with
the utmost care, a simple mistake can completely ruin the usefulness of the
product.
Here we can see in a screen from Microsoft Outlook, it is impossible to read the
entire text of the selected member of the list. This is an example of a user
interface being more complex that it needs to be and getting in the way of the
user causing a slowdown in work flow or mistakes. In the case of the example, a
mistake could be quite embarrassing.
Another example of a common and fatal error in GUI design is to use a scroll bar
where a list box should be used. The user is forced to scroll through many
options when a list box could be used to list all of the options and the user
could select from the list box. Once again, this is an example of a user
interface being more complex than it needs to be.
Using drop-down menus to provide input is more tedious than it needs to be more
often than not. While it may be desirable when inputting data into a form for a
database, it is probably easier on the designer and the user to create a method
of verifying the information and then making the user correct it or even
offering a guess to the right answer. The control used to communicate with the
user always needs to be the appropriate one for the job.
A lot of the confusion in GUI design happens when the designer attempts to take
short cuts in designing the program. GUI programming takes a lot of attention to
detail and a lot of tedious double-checking to make sure every last touch is
added. Forgetting a small detail here or there can cause the end user tremendous
frustration as they have to deal with a poorly programmed control or deal with a
user interface that gets in their way and interrupts their work.
Desktop vs. Web
GUI design is important no matter what medium the application is being developed
in. Although the differences between developing an application for a desktop PC
and developing it for a web browser are becoming less and less they are still
significant and certain things must be remembered when differentiating between
the two.
The major difference is that web-based applications do not easily support
manipulation of objects when compared to their PC based counter parts. It would
be nearly impossible to find a good multimedia editor that runs as a web
application because supporting the manipulation of objects in that situation
would be nearly impossible.
When developing for a PC, the interaction between the user and the program is a
lot more immediate and allows for a lot more complex object manipulation. There
is no excuse to not acknowledge every action of the user. Something should
visibly change or be audible to the user when an action is performed. In a web
application it is somewhat excusable to ignore this, especially in form-based
applications where pressing submit causes the browser to inform the user that an
action was performed.
Another important thing to keep in mind when designing web applications vs.
designing desktop applications is that web applications typically operate in one
view. Traceable paths are very important so the user of a web application
doesn’t feel lost. This emulates having multiple windows open in a desktop
application.
When developing for the web, it is helpful to mind the similarities than the
differences between developing for the web and for the desktop. By replacing the
functionality provided on the desktop in an intuitive or natural manner, a web
application will provide great functionality without frustrating or alienating
the user.
Conclusion
When it comes to great GUI design, several key points ensure that the developer
concentrates on the right things. The main idea of a GUI is to accommodate an
interface with the application’s user in an intuitive and simple manner. The GUI
should be out of the users way until functionality from the GUI is needed at
which point that functionality should be easy to locate. The GUI should be
responsive and immediately let a user know that an action has been performed.
Finally, no detail should be over looked so that multiple ways to do each
function are provided and the GUI has a feeling that it is well-put together.
Still have some questions? Ask us in our
software development forum!
Ready to get a quote on your next project? Get Started.
|
