• Introduction
• Getting Started
  • Getting Started
  • Administration and Setup
  • Subdomain Registration
• Site Architecture
  • Site Architecture Part 1
  • Site Architecture Part 2
  • Site Architecture Part 3
• Contribute Usage
  • Contribute Intro
  • Contribute Interface
  • Contribute Basics
  • Editing Text
  • Using Styles
  • How to Add a Link
  • How to Add a Folder
  • How to Add a Webpage
  • Editing Menus
  • Add a Photo
• Going Live
  • Testing
  • Going Live
• Design Tips
  • File Names and Conventions
  • File Optimization
  • Good User Interface Practices
  • Graphic/Table Dimensions

IT Web Services: UMass Template Training

Information Technology
Webservices
phone: 617-287-5220
helpdesk@umb.edu

Good User Interface

Aesthetic. Every visual element that appears on the screen potentially competes for the user's attention. Provide an environment that is pleasant to work in and contributes to the user's understanding of the information presented.

Brief. Keep copy enough to fit easily on a standard browser screen. Copy that scrolls more than two screens down is too long and should be divided into 2 pages.

Clear. A clear interface helps prevent user errors, makes important information obvious, and contributes to ease of learning and use.

Consistent. A consistent interface allows users to apply previously learned knowledge to new tasks. Effective applications are both consistent within themselves and consistent with one another. Use consistency in format and presentation of copy. Do not have content in a wide variety for font size, color or style. Keep this consistency throughout your web site. Limit the use of punctuation's to one and only one per sentence. Avoid this type of page format:

Example of bad user interface:

Evangeline !!!! ---------Henry Wadsworth Longfellow--------- Introductory THIS is the forest primeval. The murmuring pines and the hemlocks, Bearded with moss, and in garments green, indistinct in the twilight, Stand like Druids of eld, with voices sad and prophetic, Stand like harpers hoar, with beards that rest on their bosoms. Loud from its rocky caverns, the deep-voiced neighboring ocean Speaks, and in accents disconsolate answers the wail of the forest. This is the forest primeval; but where are the hearts that beneath it Leaped like the roe, when he hears in the woodland the voice of the huntsman???? Where is the thatch-roofed village, the home of Acadian farmers ???????

Direct. Users must see the visible cause-and-effect relationship between the actions they take and the objects on the screen. This allows users to feel that they are in charge of the computer's activities.

Forgiving. Users make mistakes. User actions should be reversible. A good interface facilitates exploration and trial and error learning.

Images. If you wish to add images to your web page keep the size to under 60KB. Use images sparingly since they take a longer time to download. The images should be relevant to the page. Avoid 'cute' pictures that may look nice but have nothing to do with the content.

Linking. When linking to an external site: select “new window” as target frame. When linking to a non html page, provide the file type and byte size.

• Ex. Student Application (30K doc)
• Ex. Student Application (100K pdf)
• Ex. Student Application (60K xls

Provide feedback. Keep the user informed and provide immediate feedback. Also, ensure that feedback is appropriate to the task.

Simple. The best interface designs are simple. Simple designs are easy to learn and to use and give the interface a consistent look. A good design requires a good balance between maximizing functionality and maintaining simplicity through progressive disclosure of information.

User-Controlled. The user, not the computer, initiates and controls all actions.