Creating an Efficient UI in ASP.NET. Part 1

Preface: 

I've tried to be as thorough as possible in this series of articles,  this articles assume above beginner knowledge of CSS, ASP.NET controls, and AJAX Control Toolkit items.  The series is scheduled for 5 parts and at the end of the series I will provide a link to an example project that incorporates and demonstrates the items we'll talk about throughout the series. 

Considerations:

Typically when we think of web applications we think of "websites" or home pages, or even at the very best, e-commerce, or pages and models dedicated highly to marketing efforts, user funneling and / or tunneling to a sale or product.  There is however an entirely different type of web application out there, as widely or more widely used than the previously mentioned.  The business web client.  This application typically fills a role in a company's infrastructure and invariantly lack by design, the typical elements that make their counterparts successful.

Graphics - Typically most graphic elements, stock photos, stunning backgrounds, animation, or other media type elements are removed for efficiency.  They are reduced to icons that communicate specific tasks or processes and are generally related in some way.  (IE:  A Gear icon button that performs a worker process)

Animation - Animation is typically left out, not usually by design, but more as a cost factor.  animation, even small - is a cost factor, taking more time to create than it's benefit.  Popular Software like Windows Vista, Apples IPhone OS and Kodak's Digital picture frames, have taught us a few things about small efficient animations that aid the user experience rather than decorate it, but we are a long way from this being mainstream in web based business applications other than animating long running process progress, or static animation while navigating.

Communication - There is really two goals with this consideration.  To communicate to the user operating your software, thus reducing the learning curve and making the use of your software more desirable.  Secondly, marketing your software to users that have never seen it.  Using real designers that take the time to analyze trends in colors, special effects (like reflections and shadows) and the psychology of the UI is a MUST.  In lieu of having a real designer or two on staff - your job as a developer is to keep your software as CLEAR and CONSISE as possible.  Remember, your users are nothing like you in most cases.  If they were they'd be writing their own software.  You may think it's cool to see the hex address count of the memory blocks in use by a running process displayed in the status bar - I can guarantee you're users will be confused by it, or wholly ignore it. 

The golden rule:

Never decorate, communicate.  The end goal of the golden rule is simple.  Allow you're users to categorize and prioritize information as it comes at them.  To demonstrate, here's a real quick simplified example.

thequickbrownfoxjumpedoverthemoonwiththesilverplatedteacup

The quick brow fox jumped over the moon with the silver plated tea cup.

I know I know...very simple example right?  In the first example, nothing is present in ANY way to allow the user to prioritize information, they have to muddle through it till they come up with the intent of the information, requiring users to incorporate skills of deduction and interpretation...two things your UI should never force the user to be doing.

The second example clearly allows the user to prioritize a little bit better, but is still a linear presentation of data, here's a third example.

The above table represents a non linear view.  Allowing the user to choose to prioritize information differently, and categorize it, while retaining the intent.

So how do we accomplish all these divine communications you ask?   First a statement that illustrates a good point: "If everyone in a room is screaming, is any single person heard?"  Lets examine a simple list of rules below to follow, these are some of the most often overlooked in maintaining a UI that users can feel comfortable with.

• Consistent font faces, weights and sizes. 
• Consistent use of colors, borders and dividers.
• Static placement of navigation.
• Avoid duplicated elements performing the same task.
• Avoid sub level nesting.

Short list right?  By incorporating these things, your UI's will get better already.  Here's an example of a short plan that incorporates all the above rules. 

I'm going to create a new website.  I've decided that my consistent fonts are going to be verdana for all headings, and corbel for all paragraph text.  Main headings are going to be size 14 bold, sub headings will be 12 bold, paragraph text will be 12 corbel.  All the hyperlinks in my site are going to be orange, with a dark orange rollover.  The menu is going to be at the top of the page in a horizontal format.  Every page in my site I will link to from the menu, and no pages in my site will link to other pages that you cant reach through the menu.  Red backgrounds will accompany all cancel buttons, green will accompany all process buttons, and on popup type windows or controls I've developed a standard close button that will always be placed in the same spot on the popup.

Obviously this is a simplified example, larger e-commerce sites, have to incorporate more advanced methods, sometimes outright ignoring these rules on purpose as a way to funnel the users towards purchases, keep in mind the scope of this article is a truly useful business UI that looks, and functions in a User Friendly manner.

Good luck, see you in Part 2.