10 Design Critiques: bad designs and suggested improvements

This  paper was written as part of my participation in the graduate course Computer Interface Design for Learning at the George Washington University. Having read Donald Norman's book, "The Design of Everyday Things" we were challenged to identify bad designs in our everyday life and suggest improvements. Here are mine.

Object 1: School Intercom Control Panel

Description

Public Address Console makes too much visible and offers no conceptual model for operation

Fig 1: Public Address Console makes too much visible and offers no conceptual model for operation

The purpose of this control panel is to enable communication to the entire school, groups of classrooms, or individual classrooms. It is also capable of broadcasting recorded messages to targeted areas. In order to send a message, the user first selects the message source from five options, identifies the message target identifying selected rooms if required or all for a global broadcast.

The panel does provide colour feedback for active switches and instructions accompany the various controls. Colour coding is also used to differentiate between message source and target controls.

Problematic Design

While button functions are colour coded, for the casual user, there is a lot of text on the control panel to process. Many potential users are baffled by the range of buttons, switches, and dials, and are quick to ask the clerical staff to make the announcement for them. Mutually exclusive control buttons can be simultaneously depressed, and the linear rows of room targets do not correspond to the rooms’ position in the school. While there is evidence of logical design to the panel, it is only divined after some thoughtful consideration and analysis.

Recommendations

A decision-tree interface could simply prompt users with two questions:

  1. What do you want to broadcast?
    1. a voice announcement
    2. a recording
    3. Who will receive the broadcast?
      1. Everyone
      2. Selected Room(s)

i.      Enter the rooms on a keypad, or make a selection on a touchscreen map of the school to identify broadcast targets

  1. Press play, or begin speaking into the microphone

Simple switch labels with an icon to represent source and target selections provides instruction without loading the interface with text. These changes could be implemented by simply replacing the console cover with the streamlined instructions.

A more ideal interface could use a touchscreen to ask the two questions and then provide a map of the building to select targets for the broadcast.

 

 

Object 2: Batman DVD Player

Description

DVD front console bat-shaped button panel

Fig 3: DVD front console bat-shaped button panel

DVD batman themed remote control

Fig 2: DVD batman themed remote control

This DVD and remote control design reflects a Batman theme. The sleek curved remote has a fluid looking button panel and the console has a silver bat-shaped insert and a convenient button panel on the front offers the most common DVD player commands. A central yellow LCD display provides playback and status information.

Problematic Design

The remote control was designed for appearance, not for ease of use. While no two buttons are identical there are no tactile indications of a button’s function. Buttons are grouped by function but the layout provides no clues as to function. Text on each button is small and hard to read. These controls are virtually impossible to see in the conditions under which this device would normally be used, in the evening or at night in a dark room or home theatre.

On the console, frequently used buttons are quite visible and each button is labeled as well as embossed with conventional video control icons but the light grey lettering is hard to see in low lighting, and the control icons too shallowly embossed to be easily discernable by sight or touch.

Recommendations

Reduce the number of remote control buttons to essential functions to make essential commands more visible. Backlight the buttons in recognition that the user will most likely be using the device in low lighting. Mimic the button arrangement on the console panel for consistency and map the functions

 

 

 

Object 3: Streets in Calgary, Alberta

Description

Map of Calgary, Alberta suburb with identically named roadways (Image source: Google Maps)

Fig 5; Map of Calgary, Alberta suburb with similarly named neighbourhoods (Image source: Google Maps)

Map of Calgary, Alberta suburb with identically named roadways (Image source: Google Maps)

Fig 4: Map of Calgary, Alberta suburb with identically named roadways (Image source: Google Maps)

Roadways are commonly named after significant figures, locations, institutions or events. The type of roadway generally depends on its’ position, or orientation to the compass: streets run north-south while avenues run east-west. In suburban Calgary, roadways are named after the development in which they are constructed. All streets in a neighborhoods have the same name and are only differentiated by roadway type.

Problematic Design

In little more than one square kilometer, there are no less than 15 different roadways with the name Royal Oak in a single neighborhood. (There is a Royal Oak Crescent, Boulevard, Road, Mews, Heights, Way, Court (x2), Circle, Grove, Bay (x2), Terrace, View, Green, Lane, and Manor)

Slipping up on an address is extremely easy and providing directions requires extreme precision as roadway names lack features distinguishing enough to get a good conceptual model for travel. Street layouts are not in grids and no two neighborhoods have the same street layout contributing to frequent traveler error.

Neighboring communities are named Royal Birch, Royal Elm, and Royal Ridge and all have the same naming scheme. While it is easy to identify the neighborhood in which a person resides, locating the specific home is a challenge. Conceptually, this naming scheme works on a macro level when thinking about the city as a whole. When it comes to on-the-road travel, both description and associative action errors are common as commuters

Recommendations

Roadway names should be sufficiently different from one another to reduce the precision required for successful navigation. Simplifying the task in this case means making everything different rather than the same.

While maze-like roadways reduce pass-through traffic and gives a neighborhood character, it increases the likelihood of commuter error in navigation.  Knowledge of conventional grid and quadrant city layout does not apply here and users are left to construct new mental models of these communities. Limiting access points to a neighborhood creates physical constraints that can also reduce traffic in a neighborhood. With that in place, roadway layout can be simplified for ease of navigation.

 

 

 

Object 4: Bluetooth Sound Dock Adapter

Description

Bluetooth sound dock adapter (Image Source: thinkgeek.com)

Fig 6: Bluetooth sound dock adapter (Image Source: thinkgeek.com)

This device receives streamed audio from a mobile device using a Bluetooth connection and plays the music through a docking station. Users can listen to a device’s audio through a docking station without having to have the device physically attached to the dock.

On the top of the adapter is one multi-function button with a single LED that can display blue, and red light. The button serves as a power switch and also initiates pairing with a Bluetooth enabled device. When attached to the dock, one button press turns on the device. Feedback is provided with different flashes of blue and/or red light and an audible blips.

Problematic Design

The single button offers a clean design and, in the small space available, provides the functionality necessary to make the device work. As such, the user must reference the manual to understand how the device functions.

  • A 3 second press-and-hold turns the device on
  • A 5 second press-and-hold turns the device off (or it can be removed from the dock).
  • A 7 second press-and-hold when the device is off activates the pairing function.

Attempting a pairing when the device is already on will turn off the device.

Time-related responses require a greater degree of precision and results in frequent mode errors. The absence of labels or icons on the device means the user must consult a manual for successful operation. Seemingly arbitrary light flashes and audible blips are not mapped to any conventional understandings of the device operation and their meaning is only understood with reference to the manual, or after committing the codes to memory.

Recommendations

Reprogramming the device so it is in an always-on state would eliminate the need for two of the three button functions. The button with a clear Bluetooth icon could then be used solely for pairing with a device. Simplifying the button to one function eliminates the need for timed precision in interaction, the icon communicates the button function without needing a manual. Flashing red, the LED indicates readiness to pair. Steady blue means pairing was successful.

 

 

 

Object 5: PS Touch

Description

Screenshot of PS Touch for the iPad

Fig 7: Screenshot of PS Touch for the iPad

Photoshop provides a tremendous array of tools for working with digital images. Such functionality comes with a vast array of commands and dialogues.

PS Touch is Adobe’s Photoshop redesign for tablets. Bars along the top and side display a few icons representing groups of tools. When tapped, the bar contents are replaced with a tool subset. This unclutters the interface leaving plenty of room for the work space.

Problematic Design

While the appearance looks neat and clean, the absence of text labels makes learning the program more challenging. The side bar icons are familiar to Photoshop users, but the top bar icons are new and replace what was, in the past, text. Tapping an icon on the top bar drops down a menu with commands described with both icons and text. It takes a lot of tapping and resulting mode errors exploring through the menus for the desired command.

Recommendations

Include text labels for the top bar icons with an option to hide them until the user is used to the new interface. Additionally, a question mark icon could provide visibility on demand by temporarily overlaying menu labels.

 

 

 

Object 6: Microsoft Office access to special characters

Description

Microsoft Word's Insert Symbol window

Fig 8: Microsoft Word's Insert Symbol window

Foreign language teachers often use accented characters. Using a code typed while pressing the ALT key, these characters can be inserted into text. Holding ALT while typing 130 will insert an E with a grave accent: é. An E with the same

Alternate keyboards provide quick access to accented characters.

Problematic Design

There are four methods of inserting accented characters into a text document:

  • Using the Insert Symbol dialogue
  • Using an alternative keyboard layout
  • Using ALT codes (ex: ALT + 144 for È)
  • Using special key combinations (ex: CTRL + ` + SHIFT + E for È)

A simple crème brûlée requires:

  • 9 keystrokes and at least 15 mouse clicks using the Insert Symbol dialogue,
  • 17 keystrokes for both the French Canadian keyboard layout and the special key combinations if you can remember which key activates each accent
  • 21 keystrokes and three different ALT codes.

The accented characters are only visible when calling up the Insert dialogue or if the user purchases a special keyboard showing those characters. The ALT codes are arbitrary and there is no way to discern a pattern for which numeric code corresponds to which character. The special key combinations are more closely mapped to visual understandings of accents by combining punctuation and symbols that look like the accent with the letter and the CTRL key.

Recommendations

Introducing a CHARACTER key could activate a contextual menu with options that look like the next letter pressed. For example, pressing CHAR + E could show all the accented E characters and the user could select the correct one using the arrow keys or mouse.

 

 

 

Object 7: Lawn Tractor Safety Shut-Off

Safety Shut-Off Switch (Image source: mytractorforum.com)

Fig 9: Safety Shut-Off Switch (Image source: mytractorforum.com)

Shut-off switch in seat turns off tractor when the seat is empty. Moving switch to the chassis or shocks would allow the user to stand on the tractor or lean over to avoid bushes / trees without having the tractor shut off.

Description

A switch underneath the seat on a lawn tractor completes a circuit when someone is sitting in the seat. The user’s weight depresses the switch completing a circuit allowing the tractor to operate. When the user is no longer sitting in the seat, the circuit is broken and the tractor immediately turns off. This safety feature is intended to prevent users from stepping off onto the mowing bed or off the tractor while it is still running.

Problematic Design

Avoiding branches while mowing near hedges, bushes or trees may require the user to stand or lean out of the way to avoid being scratched. Doing so causes the tractor to stop when the user is most at risk of minor injury. The constraint requiring the tractor operator to be seated does not accommodate frequent conditions in some properties where movement is necessary. A quick search online reveals that many users are bypassing or disabling this safety feature because it is interfering with the tractor’s usability.

Recommendations

Positioning the switch to the tractor chassis in such a way that the switch is engaged when sufficient weight is on the tractor, not just on the seat. In this way, a user could stand or lean while the tractor is in operation, but the safety shut-off would engage with the user gets off the tractor.

 

 

 

Object 8: Microsoft 8 Mail App

Description

Windows 8 Mail App Setup Screen

Fig 10: Windows 8 Mail App Setup Screen

Windows 8 Mail App Error Message

Fig 11: Windows 8 Mail App Error Message

Microsoft’s new operating system keeps the familiar desktop interface but also introduces a graphical tablet-like interface radically redesigning methods of interaction. The Mail App is part of the system install and offers complete integration with the operating system.

Problematic Design

Launching the Mail app from the start screen, users encounter the screen above. If the user does not have or want a Microsoft account the user is inclined to click Cancel. Doing so results in the screen below. Often users encounter screens such as the Mail error message which fills the entire window. The only visible option is to Try Again. There are no other buttons or options other than to return to the previous screen.

Pressing an x in the corner of the screen was a familiar way to exit a window. Pressing the escape key was also a familiar way to get out of computer dead ends. There are no menu bars, and no other visible means of interaction. Microsoft has changed the conceptual model people had about how operating systems work and has provided little to no information on the screen to help the new user. No commands are visible, the user is constrained along a particular path with no visible way to escape. Traditional commands are ineffective, and while the screens are simple, they are not helpful.

Recommendations

Radical shifts in interface design to a product widely used by a large population are bound to be resisted and challenged. Changes should be purposeful and serve to ease the effort required and time needed to do a job, or to introduce new ways of engaging with the technology that adds value. Completely new models of interacting with technology take time and guidance to appreciate and integrate into existing understandings. If the change is radical, there must be some guidance and support during the transition.

 

 

 

Object 9: Pearson Miller Analogies Login Screen

Description

Simulation of Admission Ticket for MAT

Fig 12: Simulation of Admission Ticket for MAT

The Miler Analogies Test (MAT) is used for admission to graduate study programs. Upon arriving at an approved test site, the test-taker receives an entry ticket showing name, date of test, date of birth, and an access code. The Proctor logs in to the program then the test-taker is prompted to enter his/her date of birth then click the Log In button. As testing conditions are strictly controlled I was prohibited from taking screenshots of the problem but have created simulations of the interface as shown above.

Problematic Design

The test-taker log-in screen has only two fields and a button. One field labeled is labeled “Access Code” and the second field is labeled, “Date of Birth”. This field shows two slashes to separate date components. The button is labeled, “Log In”. The test-taker’s date of birth and access code are printed on the entry ticket the user receives on site. Entering the data as it appears on the ticket and clicking Log In gives no response. The screen remains unchanged and the information, as entered, remains visible.

The user must reverse the month and day as it appears on the ticket in order to successfully log in.

Recommendations

Simulated solution to MAT login issue

Fig 14: Simulated solution to MAT login issue

Simulation of MAT Login Screen

Fig 13: Simulation of MAT Login Screen

There are many solutions to this problem. Have the date of birth field order mapped same in both media. Better, the birth date order could be made visible between the slashes as shown in the simulation to the right. Additionally, the Log In button could flash when clicked to provide feedback and an error message could provide direct instruction to the test-taker. A pop-up calendar or drop-down menu for date, month and year could provide visual mapping of the entry task and provide constraints as to the order required.

 

 

 

Object 10: Toshiba Laptop

Description

Toshiba laptop with ports on the side

Fig 15: Toshiba laptop with ports on the side

Possibilities for expansion and connecting peripheral devices is a desirable feature for laptop computers. This Toshiba laptop offered an RGB and HDMI output, three USB ports and an Ethernet port for wired network connectivity. As someone who often works with a second monitor, and uses a mouse rather than the track the ability to work with a third

Problematic Design

Early laptop design positioned peripheral ports at the back of the device keeping cords and cables out of the way while working. This lack of visibility prompted a designer somewhere to re-position the ports for accessibility. Ports on the side of the laptop increases visibility, but use of the ports create physical barriers to natural everyday use.

On this Toshiba laptop all but one of the ports are positioned on the right hand side near the front of the laptop. While this is convenient for accessing the ports, it means that, as a right-handed person, mouse work is shifted to the right by about 10 centimeters affecting arm position and places extra strain on the shoulder. Shifting the keyboard to the left moves the keyboard off centre and presents similar challenges. This design flaw may not lead to user slips or mistakes, but it does create physical discomfort.

Recommendations

Admittedly, rear-facing ports were awkward to access, but time spent primarily with keyboard and mouse work, not accessing cables. USB ports for memory sticks and mobile devices are frequently used and could be positioned one on each side near the back to accommodate both left and right-handed people. Monitor ports should be rear-facing so they are out of the way. They are not frequently accessed during a typical user session and need not be visible.

 

Image Sources

Fig. 1, 2, 3,15: photos by Miles MacFarlane
Fig. 4, 5: Google Maps
Fig. 6: retrieved from thinkgeek.com
Fig. 7: screenshot by Miles MacFarlane of Adobe Systems’ PS Touch
Fig. 8: screenshot by Miles MacFarlane of Microsoft Word 2013
Fig. 9: retrieved from mytractorforum.com
Fig. 10: screenshot by Miles MacFarlane of Windows 8 Mail App
Fig. 11: screenshot by Miles MacFarlane of Windows 8 Mail App
Fig. 12, 13, 14: graphics by Miles MacFarlane

For the next couple of years much of my time will be spent on coursework as I have enrolled in George Washington University's Master of Arts in Education and Human Development (Education Technology Leadership). In the spirit of learning in public, I plan to use my blog as a thinking and processing space. I'll use the #GWETL tag here on the blog and the same hashtag when tweets are course related. At the moment, I'm registered in Critical Issues in Distance Education and Computer Interface Design for Learning.

What do you think? Share you thoughts below...

%d bloggers like this: