Home‎ > ‎My Notebook‎ > ‎

UI/UA Design

Oct 2008: User Interface and User Assistance design notes. Hope you find them useful. :-)

As software increases in complexity we need to be smarter in how we design our software. Our customers demand it of us.

Today's Software

Software development has matured and we now know:
  • Users don't read the help unless they have to.
  • Software UI needs to be more intuitive.
  • Each screen should deal with one task at a time.,
  • Embed User Assistance where possible to clarify the task at hand.
  • Document only where help is needed. We currently over document. It's costly to write help that nobody reads.
Users can go for weeks without using a software package. Every time they reopen the software they often need to relearn it. So we need to reduce the learning curve.

We know users just want to get the job done without the burden of learning complex software. If they have a problem they want to solve it quickly and get back to the task at hand. They don't want to be shown a 30 page help document. We need to know our customers so we can know where they struggle then write UI and UA that helps them quickly over those hurdles.

The Modern Approach to UA

"We should design UI to put the help author out of a job (wont happen but that's what we strive for)". That's a quote from a Microsoft person whose name alludes me at present. They checked their logs and found that out of the 1000's of MSN online help pages only a few were ever accessed. The had been writing help that nobody read. They deleted the pages and have heard not one complaint. They now put their effort into doocumenting just the problem areas (which they find from FAQ, feedback, talking to customers etc).

The modern approach:
  1. Design intuitive UI that deals with one task at a time.
  2. If more help is required, then add some embedded UA (Extra UI text; Expando help; Hover tips; Hyper links to specific help etc).
  3. If more help is required, then write some formal help (CHM; Or web help etc).
  4. If more help is required, then link to FAQs, Forums & Support. etc Don't leave the user frustrated at a dead-end.
The new IUI (Intuitive User Interface) Guidelines tell us
  1. Give the user one task to do at a time.
  2. Use proper English sentences and don't use engineering or in-house Jargon.
  3. Make the UI discoverable (eg. Embedded text, hyperlinks and hover tips that reveal concise relevant  User Assistance where needed).
  4. Keep the UI simple. Don't use too many overlapping screens so the user loses theor work.
UA should help the user succeed at the current task at hand. It should be brief and to the point and quick to access. Users want to be productive not spend time reading pages of irrelevant help.

This is Microsoft's approach at the moment. It's a work in progress. :-)

Want to Learn More?

Design rules are documented on the Microsoft site:
    User Interface Design and Usability (MS web site)

A short article on UI and UA:
    UI & UA Changes on the Road to Longhorn - by Rob Chandler

Screen Examples

The MS Ribbon Bar

Many new applications are using the latest Office 2007 style ribbon bar UI.
The ribbon bar is intuitive. Notice the embedded UI for clear description of controls.

A great improvement over the old simple toolbars (a 16x16 icon and short hover tip).

Page Tabs break the ribbon bar into logic sections. Rich hover tips bring the UA to the user.

A user configurable tool bar is still available along the very top of the window.

Use of images brings clarity to the interface.

An image of an actual watermark in the hover tip makes the command clearer for the user.

Page icons mark the most commonly used page sizes. Less choices to make.
And the gallery drop down clearly shows the page sizes.

Some kind of step by step guide is very useful. Especially for those who use your software infrequently.

Space, Color, Fit & Trim.

Something we are very poor at in software is providing a feeling of space. But monitors are larger these days we can afford proper spacing.

Most web interfaces are good with space and color. Notice on this typical web page there are ample borders around text and around blocks of content. And nowhere do we see an overuse of the old battle ship gray color that typically dominates older Windows software. Pleasant to the eye. Looks clear and easy to use.

White has been the in color for while now. However you will notice a lot more black, gray scale and alpha blending coming in.

Building Community

Web 2.0 is about being hyper connected with each other. Discussion groups not only connect our users together but allow companies to gather valuable feedback from customers. Spend a day reading a discussion group and you will quickly learn what is frustrating the users.

Here we offer a link to our online discussion group. The idea is that Shift+F1 is contextual and will take you directly to a web page that has community information (wiki) and discussion about the current software page.

RSS Feeds - Be Up To Date

RSS feeds are everywhere. You simply paste the website's RSS feed URL into your RSS Reader and new information comes to you without having to visit the site directly, The RSS reader visits the site for you and collects the updates so you can view them all at once from one location.

What if you don't have an RSS reader? What if you forget to check your RSS feed reader regularly?

Better to add RSS feed notification directly into your application. That way you don't need to open a special reader.
Here the application checks (in the background) for any updates of our news and announcements blog and flashes the orange RSS icon when new announcements are found. The user can click the RSS feed icon at any time to go and read our the announcements blog.

Varian Galaxie Software

Early 2008 we released HPLC Galaxie software at Varian, The UI shows how we have evolved the UI.

User response has been excellent so far. Obviously users love nice design. It's in our makeup to judge things on appearance and how the product feels.

Galaxy has an old fashion gray style UI. Our new HPLC driver could not change that, but we could update our device UI screens that embed inside Galaxie.

The use can access the Instrument Status screen by using the link or button (see red boxes above).

We allowed the user to float the status screen in its own window. This was a break through as it allows the user to position the HPLC devices status screen in a separate monitor and to view both screens at the same time. Also the status can be viewed full screen (instead of embedded into the lower section of the Galaxie main window).

Below we see the white web page type look. Nice layout, plenty of space around controls. Nice use of color for trim. Flash Instrument artwork is used to show the status of the instrument hardware. Parts flash when attention is required (device is performing an action or has a fault). Hover tips provide more information. Glass bottles can be resized and dragged to positions that mimic the actual laboritory situation.

The side bar shows the status of each device. Each box displays live device information and has an LED that flashes with the Instrument display to draw attention to activity or a fault state.

We didn't use tradition group boxes because we wanted cleaner UI similar to the Office 2007 UI.

Each group and status box can be "rolled up" using the [+] / [-] controls, so if space is limited you can better focus on the part of the screen you want.

Embedded UA: We added text and super tips where needed. We wanted to embed as much help as necessary right into the UI. This meant that the Software engineers had to work much more closely with the word smiths.

Here we see a warning message embedded into the screen. And a hover tip gives extra information.
In the olden days we'd typically leave this vital information buried in the help file somewhere.

Similarly the Method screens also have the clean spacious web look. This screen shows an embedded information tip. We've used an Information icon to emphasize the tip (Warning icons are only used if the user could lose work or be greatly inconvenienced). Again a hover tip provides some extra information.

== END ==

Additional Notes to a friend

Use Space

Monitors are big. Use generous margins and padding.
Look at the modern web page ... large images expand across the screen, larger clear non-serif fonts, everything bite size. Text brief and to the point.

Bury Detail

Tell your UI designers to bury detail (stuff seldom used like defaults) in dialogs.  
The main screens must remain clean and simple. So what if you have to dig deeper to get to seldom used complexity.

In your office... things that are important that you use all the time are on the desk.
Things you use once or twice a week are in a lower draw. Things that you seldom use are over in a cupboard somewhere.

Evolution not Revolution 

Most of the time we are in a cycle, iterating through customer feedback and implementing improvements.
The first White Goods would have had numerous dials and settings.  Complex, unfriendly & regular breakdowns.
Today a fridge has just a single temperature knob and is mostly set and forget. :-)

Moving complexity and seldom used stuff off to the side is a big part of creating clean intuitive UI.