User Interface Design

2nd IAT SCHEME AND SOLUTION

1 List down the four specialized operable controls and write short notes describing various [10] CO4 L1
aspects of each control.

2 Define Text Entry/Read Only Controls. Explain the different types of Text Entry/Read [10] CO4 L1
only Controls

3 Explain the different types of Combination Entry/Selection Controls [10] CO4 L2

4 Explain the various kinds of tests performed on an Interface Design. [10] CO5 L2

5 What is a prototype? What is the purpose of prototypes. Explain any 4 prototypes with their [10] CO5 L2
relevance to system developers

6 Explain the different types of Presentation Controls. [10] CO4 L2

List down the four specialized operable controls and write short notes describing various
1 aspects of each control.

Solution
The four specialized operable controls are
1. Buttons
2. Text entry/read only controls
3. selection,
4. combination entry/selection,
Operable controls are those that permit the entry, selection, changing, or editing of a
particular value, or cause a command to be performed.
Buttons
A square or rectangular-shaped control with a label inside that indicates action to be
accomplished. The label may consist of text, graphics, or both.
Purpose:
1. To start actions
2. To change properties
Advantages
1. Always visible, reminding one of the choices available
2. It can provide meaningful descriptions of the actions that will be performed.
Disadvantages
1. Consumes larger screen spaces.
Button comes in three styles
Style1:

Style2:
The second style is square or rectangular in shape with an icon or graphic inside. It
may have anassociated labe
2 Define Text Entry/Read Only Controls. Explain the different types of Text Entry/Read
only Controls

Solution:
A Text Entry/Read-Only control contains text that is exclusively entered or modified
through thekeyboard. It may also contain entered text being presented for reading or
display purposes only.
Text Boxes
A control, usually rectangular in shape, in which:
• Text may be entered or edited.
• Text may be displayed for read-only purposes.
— Usually possesses a caption describing the kind of information contained within it.
— An outline field border:
■ Purpose:
— To permit the display, entering, or editing of textual information.
— To display read-only information.
■ Advantages:
— Very flexible.
— Familiar.
■ Disadvantages:
— Requires use of typewriter keyboard.
■ Proper usage:
— Most useful for data that is:
Single-Line and Multiple-Line Text Boxes
■ Single line:
— Description:
• A control consisting of no more than one line of text.
— Purpose:
• To make textual entries when the information can be contained
within one line of thescreen.
— Typical uses:
• Typing the name of a file to save.
Typing the path of a file to copy

3 Explain the different types of Combination Entry/Selection Controls

Solution
The types of combination entry/selection fields are
1. Spin Boxes
2. attached combination boxes
3. drop-down/pop-up combination boxes
Spin boxes
A single-line field followed by two small, vertically arranged buttons. The top
button has an arrow pointing up.The bottom button has an arrow pointing down.
 Selection/entry is made by:
1.Using the mouse to point at one of the directional buttons and clicking. Items will
change by one unit or step with each click.
2.Keying a value directly into the field itself.

Fig: spin Boxes

2. Combo Boxes
■ Description:
A single rectangular text box entry field, beneath which is a larger
rectangular list box(resembling a drop-down list box) displaying a list of options
— The text box permits a choice to be keyed within it.
— The larger box contains a list of mutually exclusive choices from which one
may be selected forplacement in the entry field.
• Selections are made by using a mouse to point and click.
— As text is typed into the text box, the list scrolls to the nearest match.

Fig: Combo Boxes

3.Drop-down/pop-up combo boxes
A single rectangular text box with a small button to the side and an associated
hidden list ofoptions. The button provides a visual cue that an associated
selection box is available buthidden.
■ Purpose:
— To allow either typed entry or selection from a list of options in a list box that
may be closed andretrieved as needed.
■ Advantages:
— Unlimited number of entries and choices.
— Reminds users of available options.
— Flexible, permitting selection or typed entry.

4 Using Illustrations explain the various kinds of tests performed on an Interface Design.
Solution
A test is a tool that is used to measure something. The “something” may be:
 Conformance with a requirement.
 Conformance with guidelines for good design.
 Identification of design problems.
  Ease of system learning.
 Retention of learning over time.
 Speed of task completion.
 Speed of need fulfillment.
 Error rates.
 Subjective user satisfaction.
A test is usually formal; it is created and applied intentionally and with a
purpose. It is usually based upon some kind of criteria, an understanding of
what a good result would be. Several testing techniques, at varying levels
of sophistication and cost, are available to exercise the system.
Guidelines Review
■Description:
— A review of the interface in terms of an organization’s standards and design
guidelines.
■Advantages:
— Can be performed by developers.
— Low cost.
— Can identify general and recurring problems
— Particularly useful for identifying screen design and layout problems.
■Disadvantages:
— May miss severe conceptual, navigation, and operational problems.
Choosing a Testing Method
Unfortunately, there is little published detailed advice on which tests to
use, when to use them, and which tests work best together. Beer,
Anodenko, and Sears (1997) suggest a good pairing is cognitive
walkthroughs followed by think-aloud evaluations. Using cognitive
walkthroughs early in the development process permits the identification
and correction of the most serious problems. Later, when a functioning
prototype is available, the remaining problems can be identified using a
think-aloud evaluation.
A substantial leap forward in the testing process would be the creation of a
software tool simulating the behavior of people. This will allow usability
tests to be performed without requiring real users to perform the necessary
tasks. One such example is asystem, described by Hornof and Kieras
(1997), called Executive Process Interactive Control (EPIC). Formal
evaluations by a tool such as this have the potentialto greatly improve the
quality of many user interfaces.
In conclusion, each testing method has strengths and weaknesses. A
well-rounded testing program will use a combination of some, or all, of
these methods to guarantee the usability of its created product. It is very
important that testing start as early as possible in the design process and,
continue through all developmental stages.

5 What is a prototype? What is the purpose of prototypes. Explain any 4 prototypes with their
relevance to system developers
Solution
A prototype is primarily a vehicle for exploration, communication, and
evaluation. Its purpose is to obtain user input in design, and to provide feedback to
designers. Its major function is the communicative role it plays, not accuracy or
thoroughness. A prototype enables a design to be better visualized and provides
insights into how the software will look and work. It also aids in defining tasks, their
flow, the interface itself, and its screens.
A prototype is a simulation of an actual system that can be quickly created. A
prototype may be a rough approximation, such as a simple hand-drawn sketch, or it
may be interactive, allowing the user to key or select data using controls, navigate
through menus, retrieve displays of data, and perform basic system functions. A
prototype need not be perfectly realistic, but it must be reasonably accurate and
legible. A prototype also need not be functionally complete, possessing actual files
or processing data. Today, many software support tools for prototyping are available
that permit the prototype to be integrateddirectly into the application code.
Hand Sketches and Scenarios
■Description:
— Screen sketches created by hand.
— Focus is on the design, not the interface mechanics.
— A low-fidelity prototype.
■Advantages:
— Can be used very early in the development process.
— Suited for use by entire design team.
— No large investment of time and cost.
— No programming skill needed.
Interactive Paper Prototypes
■Description:
— Interface components (menus, windows, and screens) constructed of
common paper technologies (Post-It notes, transparencies, and so on).
— The components are manually manipulated to reflect the dynamics of the
software.
— A low-fidelity prototype.
■Advantages:
— More illustrative of program dynamics than sketches.
— Can be used to demonstrate the interaction.
— Otherwise, generally the same as for hand-drawn sketches and scenarios.
Programmed Facades
■Description:
— Examples of finished dialogs and screens for some important aspects of the
system.
— Created by prototyping tools.
— Medium-fidelity to high-fidelity prototypes.
■Advantages:
— Provide a good detailed specification for writing code.
Prototype-Oriented Languages
■Description:
— An example of finished dialogs and screens for some important aspects of the
system.
— Created through programming languages that support the actual programming
process.
— A high-fidelity prototype.
■Advantages:
— May include the final code.
 Explain the different types of Presentation Controls.
6
Solution Presentation controls are purely informational. They provide details about
other screen elements or controls, or assist in giving the screen structure. Common
presentation controls are:
1. Static text fields,
2. Group boxes
3. Column headings
4. Toll Tips
5. Balloon tips
6. Progress indicators
Static text fields
Read-only textual information.
■ Purpose:
— To identify a control by displaying a control caption.
— To clarify a screen by providing instructional or prompting information.
Static Text Field Guidelines
■ Captions:
— Include a colon (:) as part of the caption.
— Include a mnemonic for keyboard access.
— When the associated control is disabled, display it dimmed.
Group Boxes
■ Description:
— A rectangular frame that surrounds a control or group of controls.
— An optional caption may be included in the frame’s upper-left corner.
■ Guidelines:
— Label or heading:
 Typically, use a noun or noun phrase for the label or heading.
 Provide a brief label or heading, preferably one or two words.
 Relate label or heading’s content to the group box’s content.
 Capitalize the first letter of each significant word.
 Do not include and ending colon ( : ).
— Follow all other guidelines presented for control and section borders.

Column Headings
■ Description:
— Read-only textual information that serves as a heading above columns of text or
numbers.
■ Guidelines:
— Heading:
 Provide a brief heading.
 Can include text and a graphic image.
ToolTips
■Description:
— A small pop-up window containing descriptive text that appears when a
pointer is moved over acontrol or element either:
• Not possessing a label.
Balloon Tips
■ Description:
— A small pop-up window that contains information in a word balloon.
— Components can include:
 Title.
 Body text.
 Message Icons.
Balloon Tip Guidelines
• General:
— Use a notification tip to inform the user about state changes.
— Use a reminder tip for state changes that the user might not usually notice.
— Point the tip of the balloon to the item it references.
— Do not use them to replace ToolTips.
— Do not overuse balloon tips.
Progress Indicators
■ Description:
— A rectangular bar that fills as a process is being performed, indicating the
percentage of theprocess that has been completed.
■ Purpose:
To provide feedback concerning the completion of a lengthy operation