A Good UI Goes a Long Way

From the model, view, control architecture of programming, the model and control aspects are the undoubtedly the most important.   Without a solid back-end code base, an application might as well not exist.  However, from an end user perspective, the view can make  all of the difference.  After all, that is always their first impression of the application.

For standard users, the User Interface is going to be their only interaction with the whole application.  It will shape their  perception of the application, how it operates and what it’s actual functionality is.  I’ve seen users refer application functions  by what is on the button icon (like the “faucet” or the “light bulb”).  If any aspect of a front-end UI is confusing, illogical or  buggy, user adoption will suffer.

During my time both working on applications and using them, I’ve seen what what works well for UI design and what doesn’t.  These  might seem like common sense, but but it is amazing how often they are overlooked.

Simplicity

Minimalist design is useful to not overwhelm users.  Providing tons of options upfront to the users can scare them.   Buttons and textboxs all over the starting form may seem like a good idea to a developer, but it will most likely lead to  frustration for anyone actually using the system.  It can also lead to added complexity and bugs in the application, as giving the  user more things to click on can give them more things to break.
A good example of a good minimilist design is the standard Google homepage, which just provides a logo, a search box and a button,  all on a white background.  There is no confusion as to what the user should be doing from there.

A Flowing Layout

Does the form flow well?  The labels, textboxes and buttons should be positioned to move the user through the form  in the same manner that they would normally read text (left to right, top to bottom, for example).  If a logo is used, it should be  placed in a location that is not obtrusive to the user, like the top left corner or on the side.  Buttons should be grouped together  and should be a uniform size with each other, not wildly different.  The order in which a user tabs through the application should  make sense, not have the user jump all over the form.  Basically, is navigating your form intuitive to the user or do the need a three week course in its basic operation?

Scalability

Can your application be resized?  Does it look good maximised, or when the user starts to shrink the window below it’s  default size?  Or when the window is stretched, do all of the pieces just stay in place and leave room for a large grey blob of  nothing?  If the form controls are not supposed to move, it is always a good idea to make sure the form cannot be resized or the web  application is a static width (for a good example of static width, see the site for Nexus ECM).  Also, keep in mind how your form looks on different sized monitors.  It might look just fine on your  1680 by 1050 pixel screen, but it might be too large for someone who is running 800 by 600.

Standards

This one applies a bit more to desktop applications than web sites.  When the application is open, does it blend in nicely with the rest of the operating system, or is it wildly out of  place.  While a unique color scheme and style can make an application look refreshing, it can also be a distraction to the user,  constantly reminding them that your application is different from the rest.  Good applications can integrate themselves into  whatever system they are running in, but still offer a unique look and feel to the user.
A good example of matching operating system standards is FireFox 3, which has adapted its default theme to blend in based on the user’s operating system, whether it is Windows XP, Vista, Mac OSX or Linux.

I will continue to delve deeper and explore these concepts in future blog posts, diving further into aspects of desktop and web  application UI design.

Richard Franzen
Developer
ImageSource, Inc.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s