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.
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:
This is Microsoft's approach at the moment. It's a work in progress. :-)
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
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.
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.
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.
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.
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
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.
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.