BYU Home pageBRIGHAM YOUNG UNIVERSITY
  Office of Digital Humanities
Back     BYU LiveCode Lessons Gateway

DigHT 210/310
Principles of Interface Design


Human Interface refers to the "face" that your software presents to the user. Interface design is a complex topic that I can't hope to cover in a single lecture. I would recommend that if you are interested in the subject that you take a course and read in this area. However, I will try to present some principles that you may use as a guide when designing our own interface.

Know Your User

For any interface to be successful, you must try to predict as accurately as possible how your user thinks. For this reason, it is essential to have a clear idea of your audience, including age, education and computer experience.

One way of avoiding having to do a great deal of research into the way users think is to adopt an existing interface model, one that is proven through research, testing, and use. Whatever you choose to do, whether you use your own interface or adopt an existing one, there are guidelines you can use to make your design a successful one.

The Mental Model vs. the Functional Specification

The functional specification of your software is a checklist of all the features the software should have. But it says nothing about how the features should be organized or how the user will proceed through the program. (A. Marcus, New Media, Feb. 95, p. 100)

The mental (or cognitive) model represents the way the user will encounter your program's functions and data. Research has shown that for your interface to be successful, the user must be able to form a consistent mental model of how the software works and how it is organized. This requires you to plan carefully so that you can assist the user in forming this mental model.

The Interface Metaphor

A key in your effort in helping the user to form an effective mental model of your software is the selection of an appropriate metaphor.

[Look at the metaphor of the MacOS Finder or Windows desktop. This is a good point to discuss what class members found while doing their conventions assignments.]

Both of these interfaces use a desktop metaphor—elements are arranged much as your common workplace environment might be. It is a surface upon which users can place tools, documents and file folders. Menus allow you to give commands and instructions to objects on your desktop. The mouse lets you manipulate them in various ways.

Other commonly used metaphors are the book (cf. Toolbook) and the stack (cf. HyperCard, LiveCode).

The most important concerns in developing an effective metaphor are simplicity, consistency and clarity. Common elements should operate in the same way throughout the program.

Let's look at a few goals and principles to help you in designing an effective metaphor. [based in part on Computer Interface Design Guidelines, by Sallie Gordon. This presentation was excerpted from S. Gordon, Systematic Training Program Design: Maximizing Effectiveness and Minimizing Liability, Prentice Hall, 1994. Additional information drawn from Macintosh Human Interface Guidelines.]

At the same time, the system should display what the system is currently doing, if anything.

Static Screen Design (Screen Layout)
[For more information, see Deborah Mayhew, Principles and Guidelines in Software User Interface Design.]

Designing Interactions

Instructional computer systems should be transparent, that is, at least two things should be readily apparent to the user:

User should know how to accomplish goals, whether they are vague (I'm lost--what do I do next?) or specific (How do I quit?)

Here are some basic guidelines for developing interaction in instructional programs:

In summary, a design team must create a simple and obvious system for the user interface, and stick to that system consistently thoughout the instructional program.

Most design teams do this by creating a style sheet, which specifies the characteristics of interface elements in careful detail. Along with this it may also be useful to create a template card, so that for each new card added to your stack, you can simply paste a copy of the template, then change the elements or information unique to that card. HyperCard's card-background structure is very conducive to this approach, allowing you to put common elements on the background so that the design remains consistent.


References

Web:

http://www.baddesigns.com - Examples of poor industrial design.

http://www.webpagesthatsuck.com/ - Often hilarious, always insightful site that gives "awards" for the ugliest or worst web sites. (PG-13 language warning.)

http://homepage.mac.com/bradster/iarchitect/ - Aging but still insightful commentary on computer human interface design, good and bad. Mostly Windows examples.

http://www.d.umn.edu/itss/support/Training/Online/webdesign/usability.html - Many links to usability guidelines for web page design, but also generally applicable to designing interface layout.

http://www.mackido.com - Human interface commentary. Heavily pro-Mac.

http://www.usabilityfirst.com - Even more user interface design commentary.

http://www.xvsxp.com/interface/index.php - A comparison of interface features of Mac OS X and Windows XP from a usability perspective.

Macintosh Human Interface Guidelines, Apple Computer, Inc. Internet document: http://developer.apple.com/techpubs/mac/HIGuidelines/HIGuidelines 2.html

Windows Usability Guidelines, Microsoft Corp. Internet document: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwui/html/uidesign.asp

Nielsen, Jakob, “Ten Usability Heuristics”, http://www.useit.com/papers/heuristic/heuristic_list.html

Print:

Burger, Jeff, "An Elegant Interface Design," New Media. September 1995, p. 77.

Corry, Michael D., "Mental Models and HyperMedia User Interface Design," Educational Technology Review. Spring/Summer 1998, pp. 20-24.

Gordon, Sallie, Systematic Training Program Design: Maximizing Effectiveness and Minimizing Liability. Englewood Cliffs, NJ: Prentice Hall, 1994.

Heckel, P., Elements of Friendly Software Design. San Fransisco, CA: Sybex Books, 1991.

Helander, M., Handbook of Human-Computer Interaction. Amsterdam: North Holland, 1988.

Marcus, A., Graphic Design for Electronic Documents and User Interfaces. New York: ACM Press/Addison-Wesley, 1991.

Mayhew, D., Principles and Guidelines in Software User Interface Design. Englewood Cliffs, NJ: Prentice Hall, 1992.

McFarland, Ronald D., "Ten Points for the Human Interface to Instructional Media", T.H.E. Journal. February 1995, pp. 67-69.

Salvendy, G. (Ed.), Handbook of Human Factors. New York: John Wiley & Sons, 1987.

Salvendy, G. and Smith, M. J., Human-Computer Interaction: Software and Hardware Interfaces. Amsterdam: Elsevier, 1993.

Schneiderman, B., Designing the User Interface. Reading, MA: Addison-Wesley Publishing Co., 1987.

"Six Tips for Better Interfaces," Byte. July 1996, p. 86. (10/1/09 - article seems to be unavailable. Hoping it will reappear soon.—DNA)
 


Back     BYU LiveCode Lessons Gateway
Maintained by Devin Asay.
Copyright © 2005 Brigham Young University