UI & UA Changes
on the road to Longhorn (2/4)

 

<< Previous Page Next Page >>

 

Sections


   Following The Leader
 

Remember when product releases were once every three years? Today the pressure is on companies to deliver software releases and updates once or even twice a year.

What can we do to fast track development?

Following Microsoft's lead will save you time and money.

  1. Use the Microsoft design guidelines.
    They will reduced your design time, and your customers will feel more comfortable with your software. (Part of Windows success is "Learn one application and you learn them all.")
     
  2. Keep up to date.
    We are in a time of rapid change. Keep up-to-date by attending Microsoft free conferences and reading web articles and books.
     
  3. Programmers need to be familiar with the Microsoft Windows APIs.
    Reinventing software libraries is a waste of time. The Microsoft APIs are used by millions of programmers, and are well documented and tested. Also the Internet has volumes of material written on them.
     
  4. Programmers move to managed code.
    .Net framework applications are more robust and the future of coding. Longhorn WinFX is all managed code. Even if your company is not ready to program in .NET, you can still start learning a .NET language now to be ready for the future.

     

Microsoft Design Guidelines

 


   Inductive User Interface (IUI)
 

Microsoft IUI guidelines, although still evolving, are an essential read for all designers.

Microsoft is simplifying software by arranging screens so that only one "task" is displayed at a time. Using descriptive headings and hyperlinks and embedded user assistance directly into the UI helps the user to quickly grasp what they need to do. 

Here is one highlight I've pulled out of the Microsoft IUI guidelines.

 

"IUI is an extension of the common Web-style interface. In the Web environment, pages have to be simple and task-based because each piece of information has to be sent to a server over a relatively slow connection. The server then responds with the next step, and so on. Good Web design means focusing on a single task per page and providing navigation forward and backward through pages. Similarly, inductive navigation starts with focusing the activity on each page to a single, primary task."

 

IUI Example: The Windows XP User Accounts dialog (non-domain login):

  

After reading the IUI Guidelines, you will notice several things about the above screen.

  1. The screen is focused is on a single task.
  2. The title and text clearly state the task.
  3. The screen's content suits the task.
  4. The Back/Forward/Home and hyperlinks provide web-like navigation to other tasks.

 

What else can we say about this screen?

1. The Web Page Look

Windows dialogs are looking more like web pages. Buttons, being more prominent, are still being used for the main OK/Cancel type actions, and descriptive hypertext is being used for all other links that launch dialogs and UA.

Small images have been used to clarify the purpose of some links, in this case Help, file browsing, and navigation.

There is not much of the familiar battleship grey dialog colors.

 

2. Embedded UA

Did you notice the embedded user assistance? And the lack of a "What's this [?] button"?

Help text is integrated directly into the dialog. The user has all the information needed to quickly grasp the concepts of the screen.

Extra help is available in the form of tool tips. Notice the "Welcome screen" hyperlink just opens the tool tip and has a dotted underline to indicating that.

"Related Tasks" - IUI is focused on tasks, not topics; on doing things, not features.

There is no general Help button that throws the user into the middle of paragraphs of dense Help text, which leads to a bad user experience. Instead, there is one Help link "[?] Using your own picture" which opens a simple task focused Help pane.

Notice in particular that Microsoft has not written Help for every control on the dialog (which is what we typically do today). The embedded Help is enough. There is no need to document every control, and the more difficult task of "Using your own picture" is the only additional Help written.

 

3. No Overlapping windows

Another feature of this dialog is that there are no overlapping windows. Related tasks appear in the same window and links move you between tasks.

Microsoft usability tests show that novice users get confused with multiple windows. So as much as possible, Microsoft is trying to keep multiple windows to a minimum.

 

4. Avoid Technical Language

Longhorn will try and avoid technical language as much as possible. Not everyone is on the same technical level. If we can explain while avoiding technical jargon, all the better.

The examples above simply talk about "Pictures". The discussion never heads off into JPEG and GIF files.

 

Longhorn embedded UA example

In this Longhorn Help example, the user assistance changes as you mouse over the radio buttons or change focus.

 

The Task pane

Newer applications implement a "Tasks Pane" containing a list of commonly used tasks. The tasks are grouped by category and ordered if possible by work flow.

Typically, in complex software, a user climbs a steep learning curve, get productive, then after a break from the application needs to climb the learning curve again. The Tasks Pane is a great idea as it puts the common tasks in plain view, where normally they are hidden and scattered throughout the main menu.

The tasks can be shown/hidden by selecting the "View > Tasks" menu option or by clicking the "Tasks" toolbar button.

Here are screen shots of Microsoft Movie Maker 2 and Microsoft Digital Image Suite 9.

              

<< Previous Page Next Page >>