|
|
       |
|
 |
The WebPhone began as a Windows-based product with a custom user interface. We were called in to perform a detailed product evaluation and make recommendations for a new product design. Later, the company was moving to a web-based product and was changing features. They called us in to design the new version. We developed a dozen alternate visual designs and also wrote a user interface specification for the product. The total cost of the evaluation and new design work in 2000 was $9,200.
In 2000, Netspeak contacted Two Rivers to help them improve both the usability and the appearance of their Windows-based product, the WebPhone. They wanted to move the product to be a web-based interface and to improve it to reach a broader audience. They also had new considerations, like supporting advertising, co-branding, and user selected "skins" for the application.
|
 After |
We looked at their old interface and provided a report that outlined some of the problems we saw. This excerpt discusses only the main window of the product.
Colors
Overall, the dark colors are difficult to read. In order to use the product effectively, we were forced to turn the brightness and contrast all the way up on both our laptop and desktop PC and this made other applications uncomfortably bright. Even with the levels this high it still required the user to strain to read some of the controls. Some examples:
- It's impossible to make out the top left edge of the numbered buttons on the main window.
- When you press the Line 1 button in, the difference between "up" and "down" for its state is nearly impossible to notice.
- The X in the lower right corner reads as a % and without the tooltips we would have had no guess as to its purpose.
- The amount of contrast between the white letters and dark background is too low. It would be better to use a bolder, larger font to make the text more readable.
Size of Controls
Many of the controls are just too small to hit accurately with a mouse.
Buttons, in particular, are much too small. The vertical area where you can successfully click is even shorter than the height of the text labels. Most users are not consciously aware of the location of the hotspot on the cursor -- they simply move the "visual center" of the cursor over the object and click. In the case of the hand pointer, the visual center is the ridge of folded fingers. If users point at these buttons in their typical "sloppy" manner, they will miss them most of the time. This is an unnecessary aggravation for users.
The buttons on the bottom of the main window are also very small targets. It's quite common for a user to miss a mark and click nearby. Buttons and elements in the UI need to be large enough to strike easily and have enough space between them that there is a margin for misses.
Changing and moving a standard control
On the main window the standard controls for closing and minimizing a window have been moved to the bottom of the window and their appearance has been changed a great deal. They no longer look like the Windows controls.
In our experience, it is better to keep one of these two factors stable; either leave the controls in the same position and change their appearance OR leave their appearance the same and change their location. Changing both makes it impossible to recognize this UI element.
Disabling controls
It took us a while to realize that the method used to indicate disabled buttons and controls is through a change in cursor (the cursor changes to a fist instead of an open, pointing hand). This change is just too subtle. First, it requires that the user actually try to engage the control before he can find out that it is unavailable. Second, the difference between the open and closed hand is so subtle that the user may have no idea that the cursor has changed. Third, the closed hand actually looks as if you're grabbing the button in some way.
When a user looks at a window in any interface, some of the controls are often disabled. And this is information -- it tells the user what sorts of things can and cannot be done. When the user begins to enter some information and controls become active in the process, this is also information. It means that you can do something. All of this meaning and information is lost when you rely on a cursor change to communicate a disabled control.
We recommend that you develop disabled states for your UI elements and have their appearance change when they are unavailable.
Keyboard shortcuts
Avoiding a menu based user interface has robbed you of the chance to teach your users about keyboard shortcuts. The only way to learn these is to consult the help system. Recommend: Develop new ways to help people learn keyboard shortcuts.
Next, we set out to design a new interface that would include the product's important features, bring it to a web-based world, and greatly enhance its appearance.
We started with a series of window sketches that demonstrated our basic ideas and gave us an opportunity to discuss the design.
Sketch of Design for WebPhone
After the client selected a sketch, we produced visual design examples.
Design Concept #1 for WebPhone
Design Concept #2 for WebPhone
We also worked with them to develop some of the different skins (styles) that would be used in the application. These are some samples:
Different Skins for WebPhone
The information in the Display area will change, depending on the state of the call and connection. Below are samples of the possibilities. Note that the icons are placeholders and will be replaced with icons whose state changes.
Description
Appearance
The product is just starting up: it's currently offline.
The product is connected to the server and is now Online.
The server has experienced an error. The entire display is replaced with an error message.
Call being placed.
Connected call.
Name and phone number are known.
Call is on hold.
| Home | Makeover | Design | Demo | Research | Who We Are | Portfolio |
Copyright ©2008 Two Rivers Consulting Corporation.
All Rights Reserved.
Telephone: 978.352.2585 and ask for Hagan Rivers
We are located on the North Shore of Massachusetts
Email: moreinfo at tworivers.com (we don't link to our email address so we won't get spam)
Two Rivers Consulting Corporation never sends mass mailings (spam). If you think you have received spam mail from us, then you have been misled. We detest spam mail and we do not support its use. The Coalition Against Unsolicited Commercial Email can help you track down and stop unsolicited email.
