Home arrow Design Usability arrow Page 4 - EasyChart: a Usability Teaching Tool to Demonstrate Interface Design from Hell

EasyChart: a Usability Teaching Tool to Demonstrate Interface Design from Hell

Do you have students or programmers who don't quite seem to "get" the importance of following the rules to  make an interface that is easy for the end user to deal with? Maybe you should make them use EasyChart. Created as an educational tool to deliberately break every design usability rule, it just might lead to an "a-ha" awakening. Eliana Stavrou walks you through some telling examples from the program.

Author Info:
By: Eliana Stavrou
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
March 08, 2005
  1. · EasyChart: a Usability Teaching Tool to Demonstrate Interface Design from Hell
  2. · Demonstration
  3. · Help Documentation
  4. · Build a chart

print this article

EasyChart: a Usability Teaching Tool to Demonstrate Interface Design from Hell - Build a chart
(Page 4 of 4 )

Since there is no help documentation to use, you decide to use the trial and error method. So you select the “Edit” option from the main menu.

The sub-menu has 4 options. The first one, which is “Change presentation configuration,” is not clear as to what it does, but you try it anyway. You get the following message window:

Lucky you, you found what you were looking for (more or less). The previous window breaks the “Visibility of system status” principle as it does not accurately inform the user about the resulting action of changing the chart type.

As you can see, with the “Chart type” message you can change the current chart type. Hmmm… do you know the current chart type? To which chart type are you going to change the current one? Nether of these two issues are included in this window so that the user canl select what he wants, breaking the “Error Prevention” principle. In addition, the improper title of the message breaks “The visibility of system status” principle because it is a general title that does not indicate the “change” action.

You choose the “Yes” button and the following message window is presented:

Let’s take a few minutes to discuss this dialog box. First, the window does not have an appropriate title, breaking the “Visibility of system status” principle; the “Consistency” principle is violated with the reference made to “graph” rather to chart; and the “Error prevention” principle is violated as there is no indication about the available chart types which the user must remember from the previous window, which also breaks the “Recognition rather than recall” principle.

Among the other violations, there is another one regarding the “Error prevention” and “Consistency” principles due to the usage of “Cancel” button instead of using the common “OK” button. Anyway, this window could have been included in the previous message to avoid all these violations and possible errors, and save time by minimizing the number of windows and actions taken by the user; this adds to the violation list the “Aesthetic and minimalist design” principle violation.

Suppose you remember the chart types and you enter the “Pie” into the text box. You get the following window:

The message windows are endless and they follow one another! Again this window violates a number of design principles for the same reasons explained previously; there is no appropriate title and the name of the buttons are not consistent or matched with real-world conventions (it would be more appropriate to use a Yes / No combination rather than OK / No). In addition, the “User control and freedom” principle is violated because when you select the “No” button you expect to return to the previous window to select another chart type but instead it throws you out of the chart type selection dialogue and returns you to the main window. By clicking the “OK” button, if you have provided a correct chart type you get the following message:

Well, you can not complain any more that there is no information provided about system status! However, there are a number of problems associated with this window. First, the text in the window takes some time to appear, which can confuses users as what is going to happen. Next, the window does not disappear after 200 CPU cycles, so the user is unaware of when it is okay to continue. Indeed, the language used (talking about 200 CPU cycles) is not appropriate for the end user, who thinks in seconds and minutes rather than CPU cycles.  In addition, the lack of "OK" or "Cancel" buttons confuses the user even more. All these violate the “Visibility of system status,” “User control and freedom” and “Match between the system and the real world” principles. Anyway, at the end you have to click on the X to close the window.

The Result

After all the trouble, the chart figure is presented in the main window.

Yes, there is nothing wrong with your eyes; we haven’t entered the values yet! And we won’t! I think that by now you get the point about the tool and its usage, and the importance of following design usability principles. The tool is launched in dos mode with the name “InterfaceFromHell;” I think that says it all! You can use this tool as a “good” example to train people to avoid violations of design usability principles such as the ones presented with EasyChart tool. Keep in mind that if you play with this tool you will see that it violates even more principles than the ones presented in this article.  

Now you have to excuse me if I’m not going to show you how to complete the chart, I have to visit the pharmacy to get some medicine for the headache I have after using the tool… However, you may use this tool to torture your students or employees. If you're feeling merciful, try to keep some aspirin handy. 


EasyChart Tool and Documentation

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials