Creating a User Interface (Chapter 2)

Abstract

CIS 125, Visual Basic .NET I, Spring 2006

Planning an Application

  1. Identify the tasks the application needs to perform.

  2. Identify the objects needed to perform those tasks.

  3. Identify the events required to trigger an object into performing its assigned tasks

  4. Design the user interface

TOE Chart

3. What is a TOE Chart?
4. Identifying the Objects
5. Identifying the Events

What is a TOE Chart?

Write out all Tasks

Determine what Objects & Events are needed

Identifying the Objects

TextBox, Button, Label, ...

Object Naming Conventions (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbceide/htm/ideintro_15.asp)

Identifying the Events

Click

Designing the User Interface

7. User Interface
8. Aranging Controls
9. Fonts
10. Color
11. Assign access keys
12. Tab Index
13. Default and Cancel Button

User Interface

Primary Window

Where primary editing and Viewing takes place

Dialog Box

Supplemental Information

Aranging Controls

See Figure 2.10, 2.11

  • White Space

  • Group Box Control

  • Panel Control

  • Text box's identifying label should end with a colon (:)

  • Labels should use Sentence Capitalization

  • Book Title Capitalization capitalizes first letter of each word, except for articles, conjunctions, and prepositions that do not occur at either the beginning or the end of the caption.

  • Size buttons relative to each other. Use same height and widths if possible

Fonts

  • Measured in points. One point is 1/72 of an inch

  • Serifis a light cross stroke that appears at the top or bottom of a character.

    Sans Serif meaning "without". Easier to read on Screen. Tahoma is a recommended font

Color

  1. Some users may use monochrome monitors.

  2. Many people have some form of either color-blindness or color confusion, so they will hjave trouble distinguishing colors.

  3. Color is very subjective; a pretty color to you may be hideous to someone else.

  4. A color may have a different meaning in a different culture.

  • Best to use black text on white, off-white, or light gray background.

  • Limit the number of colors. (3 not including white, black, gray)

  • Never use color as only means of identification.

Assign access keys

  1. Allow a user to work without a mouse.

  2. Allows Faster typing by keeping hands on keyboard.

  3. Assists people with disabilities.

Include an ampersand (&) in the caption of the label

Tab index of label is one less than control.

&Name: would make N the access key.

Tab Index

  • Allow you to scroll through form by pressing the tab key

  • Start at index zero

  • By default tabindex increases by one with each added item.

Tab index of label is one less than control.

Default and Cancel Button

AcceptButton - set under in the Form Misc. Event on button fired when Enter key is pressed

CancelButton - set under in the Form Misc. Event on button fired when Esc key is pressed