Transcript Creating a User Interface

Creating a User Interface
Objectives
•
•
•
•
Plan an application
Complete a TOE chart
Use a text box, table layout panel, and timer
Explain the difference between a primary window
and a dialog box
• Designate a default button and a cancel button
• Explain the difference between a modal form and
a modeless form
• Add a splash screen and a dialog box to an
application
7/21/2015
2
Planning an Application
7/21/2015
3
Planning an Application
(continued)
• Plan the application before creating the
user interface
• Work jointly with the user
• TOE (Task, Object, Event) chart:
– Shows application’s tasks, objects, and
events
• Tasks, objects, and events should be
identified in the first 3 steps of planning
7/21/2015
4
Skate-Away Sales
• Skate-Away Sales:
– Sells skateboards at $100 each
– Two colors: blue and yellow
– Currently the salespeople calculate the order
total
• Develop an order-taking application for
this company
7/21/2015
5
Identifying the Application’s Tasks
(continued)
• First, review current user procedures and
forms
• Steps:
– Identify the desired outputs
– Identify the necessary inputs
– Identify the processing needed to change the
inputs into the outputs
– Identify how the user will end the application
– Identify the need to clear the screen between
7/21/2015
6
transactions
Identifying the Application’s Tasks
(continued)
7/21/2015
7
Identifying the Objects
• Assign each task to an object in the TOE
• TextBox tool: instantiates a text box
control
• Text box:
– Used to allow the user to input information
• Use buttons to initiate the calculations
• Use labels to guide the user
7/21/2015
8
Identifying the Objects (continued)
7/21/2015
9
Identifying the Objects (continued)
7/21/2015
10
Identifying the Events
• Text boxes: no special events needed for
user to enter the text
• Labels: no special events needed to display
the prompts
• Buttons:
– Action must occur when each button is clicked
7/21/2015
11
Identifying the Events (continued)
7/21/2015
12
Identifying the Events (continued)
7/21/2015
13
Designing the User Interface
• Follow Windows standards for:
– Consistency
– Ease of use
– Familiar look and feel
• Primary window:
– The main window in an application
• Dialog boxes: windows used to support and
supplement a user’s activities in the primary
window
7/21/2015
14
Designing the User Interface
(continued)
• Primary windows can be resized,
minimized, maximized, and closed by the
user
• Primary window’s title bar includes:
– Minimize, Maximize, and Close buttons on
the right
– Control menu on the left
• Dialog boxes can be closed only
• Dialog box’s title bar includes:
– Close button and optionally a Help button
– No control menu
7/21/2015
15
Designing the User Interface
(continued)
• Form object used to create primary window and
dialog boxes
• FormBorderStyle property:
– Sets border style
– Use default setting of Sizable for primary window
– Use FixedDialog setting for dialog boxes
• MinimizeBox property and MaximizeBox
property control the existence of Minimize and
Maximize buttons
• Splash screen:
– Set FormBorderStyle to FixedSingle
– Set ControlBox property to False to remove control
7/21/2015 menu
16
Designing the User Interface
(continued)
7/21/2015
17
Arranging the Controls
• Guidelines:
– Information should flow either vertically or
horizontally
– Group related controls together using white
space or container controls
• Container controls:
– Group box control
– Panel control
– Table layout panel control
7/21/2015
18
Arranging the Controls
(continued)
7/21/2015
19
Arranging the Controls
(continued)
7/21/2015
20
Arranging the Controls
(continued)
7/21/2015
21
Arranging the Controls
(continued)
7/21/2015
22
Arranging the Controls
(continued)
7/21/2015
23
Arranging the Controls
(continued)
• More guidelines:
– Use a label with each text box
– Left-align the label’s text
– Position label to left of or above the text box it
identifies
– Labels and button captions should be 1 to 3
words only, and appear on one line
– Labels and captions should be meaningful
– Use sentence capitalization for labels
7/21/2015
24
Arranging the Controls
(continued)
• Sentence capitalization:
– Only first letter in the first word is usually
capitalized
• Book title capitalization:
– First letter in each word is capitalized (except
articles, conjunctions and prepositions)
7/21/2015
25
Arranging the Controls
(continued)
• More guidelines:
– Maintain a consistent margin from all edges of
the form
– Size buttons relative to each other
– Minimize the number of different margins by
aligning control borders where possible
– Interface should not distract the user from
doing the work
7/21/2015
26
Including Graphics in the User
Interface
• Human eye is drawn to pictures before text
• Include graphics only if necessary
– Use for aesthetic purposes
– Use to clarify a portion of the screen
7/21/2015
27
Including Different Fonts in the
User Interface
• Font property: used to change the type,
style, and size of the font
• Font:
– General shape of characters in text
– Size is measured in points
• Point: 1/72 of an inch
• Serif: a light cross stroke at top or bottom
of a character
• Sans serif fonts: do not have the cross
strokes
7/21/2015
28
Including Different Fonts in the
User Interface (continued)
• Guidelines:
– Use sans serif fonts on screens
– Use only one font type for the text in a form
– 12-point font is easiest to read at high screen
resolution
– Avoid italics and underlining
– Use bold only for titles, headings, and key
terms
7/21/2015
29
Including Color in the User
Interface
• Human eye is drawn to color before B&W
• Guidelines:
–
–
–
–
–
Use color sparingly
Some people have trouble distinguishing colors
What is “acceptable” in colors is subjective
Color may have specific meaning in certain cultures
Use black or dark text on a white or light
background
– Use maximum of 3 different colors that complement
each other
– Do not use color as the only means of identification
7/21/2015
30
Assigning Access Keys
• Access key:
– Allows user to select an object using Alt +
access key
– Appears underlined on the button caption
– Is not case-sensitive
• Guidelines:
– Assign access keys to each control that can
accept user input
– Exceptions: OK and Cancel buttons
7/21/2015
31
Assigning Access Keys
(continued)
• Advantages of using access keys:
– User does not need mouse to navigate and
activate controls
– Allows fast typists to keep hands on keyboard
– Facilitates use of the application by people with
disabilities
• Include & in front of the character to be
used as the access key:
– &Calculate Order  Calculate Order
7/21/2015
32
Setting the TabIndex Property
• TabIndex property:
– Determines the order in which a control
receives the focus when the Tab key is pressed
– Starts at 0
• Focus: the state of being able to accept
user input
• Default TabIndex values are set according
to the order in which the controls were
added to the form
7/21/2015
33
Setting the TabIndex Property
(continued)
7/21/2015
34
Designating Default and Cancel
Buttons
• Default button: activated when user
presses Enter key
• AcceptButton property:
– A form property
– Designates the name of the default button
• Cancel button: activated when user
presses Esc key
• CancelButton property:
– A form property
– Designates the name of the cancel button
7/21/2015
35
Including Splash Screens and
Dialog Boxes in an Application
7/21/2015
36
Including Splash Screens and
Dialog Boxes in an Application
(continued)
7/21/2015
37
Including Splash Screens and
Dialog Boxes in an Application
(continued)
• Show method: displays a form as a
modeless form
• Modeless form:
– Can remain displayed while user uses other
forms
• ShowDialog method: displays a form as a
modal form
• Modal form:
– Requires user to take action in the form
– Rest of the application is not usable until the
modal form is closed
7/21/2015
38
Including Splash Screens and
Dialog Boxes in an Application
(continued)
7/21/2015
39
The Timer Tool
• Timer tool: instantiates a Timer control
• Timer control: processes code at one or
more regular intervals, specified by Interval
property
• Tick event: occurs after each interval has
elapsed
• Timer control does not appear on the form,
but in the component tray
• Component tray: area in the IDE that
stores all controls that do not appear in the
user interface at runtime
7/21/2015
40
The Timer Tool (continued)
7/21/2015
41
Summary
• Plan the application jointly with the user
• Identify tasks, objects, and events, and
build a TOE chart
• Textbox control: allows user to enter text
• Primary window: where most of the user
interfacing takes place
• Dialog window: used to support the
primary window
•7/21/2015
Follow Windows standards for GUI design42
Summary (continued)
• Align controls to flow horizontally or vertically
• Group related controls visually with white space
or container controls, and maintain consistent
margins
• Use meaningful labels and captions of 1-3 words
• Use graphics and colors sparingly
• Use sans serif font types for readability
• Use TabIndex property to control where the
focus goes when Tab key is used
7/21/2015
43
Summary (continued)
• AcceptButton property designates which button
on a form is activated with the Enter key
• CancelButton property designates which button
on a form is activated with the Esc key
• Show method shows a form modeless
• ShowDialog method shows a form modally
• Timer control allows execution of code at
specified intervals
• A form’s Load event procedure executes code
before the form is displayed
7/21/2015
44