User Interface redesign of an educational public display

100_1440

On an earlier post I discussed how I used User Experience methodologies for my Masters Thesis to enhance a educational Bluetooth enabled system for the developing world context. This is detailed version of how I went about redesigning the actual display interface for an educational context using User Centred Design methods.

215

As part of the Rapid Development approach, prototypes are a useful in rapidly testing out design ideas without implementing the full system. The main focus of the prototyping stage was to create the best interface for the display system that would be suitable for an educational setting. The main goals of the prototyping, were to design a display that

  • Supports interaction that is initiated and controlled by the user
  • Supports multi-user interaction
  • Generate appropriate feedback to user actions
  • Accommodates educational material and makes efficient use of screen collateral
  • Display concise but understandable instructions

 

SnapAndGrabNew

Original design

A pragmatic design approach was used to create new technology from a pre-existing application. This still implied the use of a heuristic evaluation in order to analyse aspects of the interface and to identify potential usability problems. Two Computer Science Honours students on a similar project along with myself acted the roles of evaluation experts  because we were well versed with the system and its usability aspects. Jacob Nielsen’s usability heuristics

state_diagram

The state diagram of the Snap and Grab system

The state diagram gives insights into various scenarios that could occur. This state diagram was used during the heuristic evaluation to identify all system cues during user interaction. Each expert did 2 passes through the original Snap and Grab board independently, carefully inspecting the product using heuristics for guidance.

The first pass was to feel for the flow of interaction and the product’s scope. The second pass focused on specific interface elements in the context of the whole product such as the status bar and instructions. Problems were recorded on paper by all evaluators then a debriefing session was held to discuss the findings, prioritize problems and suggest solutions. Most of the messages the original display were not clear and had to be revised.

Tools

I used Microsoft Expression Blend to redesign the original display interface to satisfy the above design criteria. Microsoft Expression Blend runs on the Silverlite platform and separates the design information (XAML markup) from the application logic (C#, C++, etc).

Design Improvements

The evaluation drew out the following design improvements using the various states of the system:

1. Interaction that is controlled by the user

The user is meant to initiate interaction with the screen but this is not so obvious with the original display. The original display has the label “ready” displayed at the top of the screen, implying that the system is ready for a user to send a photo of their desired media. A status bar with an orange border was included at the bottom of the screen, displaying a clear message about how to initiate interaction with the board. When idle, the message “Ready to receive photo”, is displayed in the status bar. An orange color was distinctly used to strike a contrast with the background and draw the users’ attention to the status bar.

status1

 

2. The support of multi-user interactions

The original display system supports multiple interactions but does not notify the users who is who. Instead, differently colored bounding boxes around the selected media captions on the display are used to differentiate users. The board’s status was redesigned so that when multiple users interact with the system, they are identified by a unique number. The status bar reads “Student 1” identifying the first connection with the board. Subsequent connections are assigned a number accordingly. This could be extended to using a user’s phone make but confusion might arise if two similar phone are used.

status2

 

3. Generating appropriate feedback

In addition to displaying messages related to multiple users and initiating a dialogue with the display system, the improved system displays appropriate feedback for each interaction in a polite and concise manner. The picture below shows the message status when the system is busy.

status3

 

4. Efficient use of screen collateral

The original Snap and Grab board had eight media spots on its screen at any given moment. The interactive prototype would be deployed in the Computer Science department as part of a field study therefore; it housed Computer Science course material. Computer Science courses were chosen due to the convenience of acquiring this course information. In total, there were five Computer Science courses running in the semester and therefore, five media spots were used with an additional media spot for Help or promotional media packages. Each spot was assigned a picture from the online educational management system and each media spot appropriately labelled. The layout of the courses helped to accommodate the status bar at the bottom and instructions on the right.

status4

 

5. Concise but understandable instructions

Instructions were originally laid out across the bottom of the screen but users who evaluated the original board complained about not having seen the instructions because they do not stand out. For the improved version, instructions and the status were bounded by brightly colored orange borders and clearly labeled. To make the instructions more noticeable, they were arranged vertically on the right side of the display.

status-5

The final interface design

 

status6

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s