CS1015%20USER%20INTERFACE%20DESIGN%20-%20notes

CS1015 User Interface Design

CS1015 USER INTERFACE DESIGN

AIM

To implement the basics and in-depth knowledge about UID. It enables the students to

take up the design the user interface, design, menu creation and windows creation and

connection between menu and windows.

OBJECTIVES

‡ 7o study the concept of menus, windows, interfaces.

‡ 7R VWXG\ DERXW EXVLQHVV IXQFWLRQV.

‡ 7R VWXG\ WKH FKDUDFWHULVWLFV DQG FRPSRQHQWV RI

ZLQGRZV.

‡ 7R VWXG\ WKH YDULRXV FRQWUROV IRU WKH ZLQGRZV.

‡ 7R VWXG\ DERXW YDULRXV SUREOHPV LQ ZLQGRZV GHVLJQ ZLWK FRORr, text, graphics.

‡ 7R VWXG\ WKH WHVWLQJ PHWKRGV

UNIT I

8

Introduction-Importance-Human-Computer

interface-characteristics

of

graphics

interface-Direct manipulation graphical system - web user

interface-popularity-characteristic & principles.

UNIT II

10

User interface design process obstaclesusabilityhuman characteristics in design

-Human interaction speed-business

functions-requirement analysis-Direct-Indirect

methods-basic

business

functions-Design

standards-system

timings

-

Human

consideration in screen design - structures of menus - functions of menus-contents of

menu-formatting -phrasing the menu - selecting menu choice-navigating menus-graphical

menus.

UNIT III

9

Windows:

Characteristics-components-presentation

stylestypesmanagementsorganizationsoperationsweb systemsdevicebased controls: characteristicsScreen

-based controls: operate control - text boxes-selection control-combination control-custom

control-presentation control.

UNIT IV

9

Text for web pages - effective feedback-guidance &

assistance-Internationalization-accesssibility-Icons-Image-Multimedia -coloring.

UNIT V

9

Windows layouttest :prototypes kinds of tests retest Information search

-visualization - Hypermedia - www - Software tools.

TOTAL : 45

TEXT BOOK

.

:LOEHQW. 2. *DOLW] ,³7KH (VVHQWLDO *XLGH WR 8VHU ,QWHUIDFH 'HVLJQ´, -RKQ :LOH\&

Sons, 2001.

REFERENCE

S

.

%HQ 6KHLGHUPDQ,

³'HVLJQ WKH8VHU ,QWHUIDFH´,

3HDUVRQ

(GXFDWLRQ,

((

.

. $ODQ &RRSHU, ³7KH (VVHQWLDO RI 8VHU ,QWHUIDFH 'HVLJQ´, :LOH\ ± Dream Tech Ltd.,

2002.

CS1015 User Interface Design

© Einstein College of Engineering

Introductio n

• Defining the User

Interface It is the parts of the computer and its software that people can touch ,

feel, talk to ,or otherwise understand and direct. It is a sub field to Human-computer interactionstudy.

User interface design is a subset of a field of study called human computer

interaction. (HCI).

HCI is the study,planning and design of how people and computers work

together.User interface has 2 components: Input, Output

Input is how a person communicates his or her needs or desires to the computer.

Ex. Keybord,mouse.

Output is how the computer conveys its results of its computations and requirements to the user.

Ex. Display screen

Importance of good design:

• The Importance of Good

Design Its very important to our users.

It is the window to view the capabilities of the system

The reasons for ineffient and confusing design is,

• No care on design

• Not enough time

• _{Not knowing what really makes good} design

• Not possessing common sense.

A well designed interface and screen is very important to the users.it is the main window to

view the capabilities of the system.A screen design affect a person in a variety of ways. If the

design is confusing and inefficient, people will have greater difficulty and make more

mistakes,Chase some people away from the system.It also leads to aggravation,frustration and

increased stress.

Benefits of good design:

• Poor clarity forced screens force the users to take more time to

process. The screen clarity and reability is done

by making

screens less crowded.Seperate items are placed in separate

lines.

• Reformatting enquiry screens with good design principles

• Increase productivity

• _{Good recognization of the} system

CS1015 User Interface Design

Human Computer

Interface:_{The humantcomputer interface can be described as the point of} communication

between the human user and the computer. The flow of information between the human and

computer is defined as the loop of interaction. The loop of interaction has several aspects to it

including:

• Task Environment: The conditions and goals set upon the user.

• Machine Environment: The environment that the computer is connected to, i.e a laptopin a college student's dorm

room.

• Areas of the Interface: Non-overlapping areas involve processes of the human and

computer not pertaining to their interaction. Meanwhile, the overlapping areas only

concern themselves with the processes pertaining to their interaction.

• Input Flow: The flow of information that begins in the task environment, when the user

has some task that requires using their computer.

• Output: The flow of information that originates in the machine environment.

• Feedback: Loops through the interface that evaluate, moderate, and confirm processes

as they pass from the human through the interface to the computer and back.

Introduction of the Graphical User

Interface:_{A graphical user interface (GUI), often pronounced gooey , is a type of user i} nterface

that allow

s users to i nteractwith programs i n more ways thantyp i ngsuch as

computers. Graphical user interfaces, such as M i crosoft Windows and the one used by the AppleMac i ntosh , feature the following basic

components:_{pointer : A symbol that appears on the d i splay screen and that you move to ·} select

objects and commands . Usually, the pointer appears as a small angled arrow. Text

-processing appl i cat i ons , however, use an I -beam po i nter that is shaped like a capital I .

· pointing device : A dev i ce , such as a mouse or trackbal l, that enables you to selectobjects on the display

screen.

·icons : Small pictures that represent commands, fi l es , or windows . By moving the

pointer to the icon and pressing a mouse button, you can execute a command or convert the icon into a window. You can also move the icons around the display

screen

as if they were real objects on your desk.

· desktop : The area on the display screen where icons are grouped is often referred to

as the desktop because the icons are intended to represent real objects on a real

desktop.

· windows: You can divide the screen into different areas. In each window, you can run

a different program or display a different file. You can move windows around the display

screen, and change their shape and size at will.

· menus : Most graphical user interfaces let you execute commands by selecting a

choice from a menu.

CS1015 User Interface Design

© Einstein College of Engineering

• _{Symbols recognized faster than} text

• Faster learning

• _{Faster use and problem solving} • _Easier remembering • _More natural • _{Exploits visual/spatial} cues

• _{Fosters more concrete} thinking • Provides context • _Fewer errors • _{Increased feeling of} control • Immediate feedback • _{Predictable system} responses • Easily reversible actions

• Less anxiety concerning use

• More attractive

• May consume less space

• Replaces national

• Easily augmented with text

• Low typing requirements

• Smooth transition from command language system Disadvantages • Greater design complexity • Learning still necessary

• Lack of experimentally-derived design principles

• Inconsistencies in technique and terminology

• Working domain is the present • _{Not always} familiar • Human comprehension limitations • Window manipulation requirements • _Production limitations

• Few tested icons exist

• Inefficient for touch typists

• _{Inefficient for expert} users

• Not always the preferred style of interaction

• _{Not always the fastest style of} interaction

• _{Increased chances of clutter and} confusion

• The futz and fiddle

• _{May consume more screen} space

• _Hardware limitations

CS1015 User Interface Design

Characteristics Of The Graphical User Interface:

• Sophisticated Visual Presentation

• Pick-and-Click Interaction

• Restricted Set of Interface Options • Visualizatio n • Object Orientation • Use of Recognition Memory • Concurrent Performance of Functions Direct Manipulation

System:Direction manipulation system is one in which the user is able to select an object and

then specify which actions are to be taken.

• _{System is portrayed as extension of real} world

• Continuous visibility of objects and actions• Virtual

reality • _WYSIWYG

• What you see is what you get

• Actions are rapid and incremental with visible display of results

• Incremental actions are easily reversible

Example:

The "trash" on the desktop is an excellent example of direct manipulation within

computer systems. Users can see both the trash and the files or folders they want to move to

the trash. They then physically select the files and drag them to the trash can. While the user isdoing this, all of the selected files move as well, illustrating which items the user has

selected.

When the mouse is placed over the trash, there is a shading indication that it has been selected.The user then has to release the mouse button to move the files to the trash. If there are

many

files, a dialogue box will show up illustrating the progress of moving files to the trash. Once the

action is completed, the files are no longer visible in their original location. The user can changeher mind at any time while dragging the files to the trash. Even after placing them there,

they

can as easily be taken out of the trash and put back in place.

Indirect Manipulation

• Results

from:• Operations being difficult to conceptualize in the graphical system

• Graphics capability of the system being limited

• Amount of space available for placing manipulation controls in the window

border being limited •

Difficulties for people to learn and remember all the necessary operations and

CS1015 User Interface Design

© Einstein College of Engineering

Interface:• Interaction Styles

• _{The Graphical User} Interface• The Popularity of

Graphics

• The Concept of Direct Manipulation

• _{Advantages / Disadvantages}

• Characteristics of the Graphical User Interface

• The Web User

Interface• The Popularity of the Web

• Characteristics of a Web Interface

• The Merging of Graphical Business Systems

and the Web

• Characteristics of an Intranet vs. Internet

• Extranets

• Principles of User Interface Design

• Principles for the Xerox STAR

• General Principles

The Blossoming of the World Wide Web:

The World Wide Web, abbreviated as WWW and commonly known as the Web, is a

system of interlinked hypertext documents accessed via the I nternet . With a web browser , one

can view web pages that may contain text, images, videos, and other mu l t i media and navigatebetween them via hyperl i nks.

Functions of

WWW:The terms Internet and World Wide Web are often used in every-day speech without

much distinction. However, the Internet and the World Wide Web are not one and the same.

The Internet is a global system of interconnected computer networks. In contrast, the Web is

one of the services that runs on the Internet. It is a collection of interconnected documents and

other resources, linked by hyperlinks and URLs. In short, the Web is an appl i cat i on running on the Internet. Viewing a web page on the World Wide Web normally begins either by typing the

URL of the page into a web browser , or by following a hyperl i nk to that page or resource. Theweb browser then initiates a series of communication messages, behind the scenes, in order

tofetch and display it.

First, the server-name portion of the URL is resolved into an I P address using the global,

distributed I nternet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server . The browser then requests the resource by sending an HTTP request to the Web server at that particular address. In the case of a typical web page,

the

HTML text of the page is requested first and parsed immediately by the web browser, whichthen makes additional requests for images and any other files that complete the page

image.

Statistics measuring a website's popularity are usually based either on the number of page viewsor associated server ' h i ts' (file requests) that take

place.

While receiving these files from the web server, browsers may progressively render the page onto the screen as specified by its HTML, Cascad i ng Sty l e Sheets (CSS), or other

CS1015 User Interface Design

composition languages. Any images and other resources are incorporated to produce the

on-screen web page that the user sees. Most web pages contain hyperl i nks to other related pagesand perhaps to downloadable files, source documents, definitions and other web

resources.

Such a collection of useful, related resources, interconnected via hypertext links is dubbed a web of information. Publication on the Internet created what T i m Berners-Lee first called

theWorldWideWeb (in its original Came l Case , which was subsequently discarded) in

November1990.

The Popularity of the Web:

The Web we know now, which loads into a browser window in essentially static

screenfulls, is only an embryo of the Web to come. The first glimmerings of Web 2.0 are

beginning to appear, and we are just starting to see how that embryo might develop. The Web

will be understood not as screenfulls of text and graphics but as a transport mechanism, the_{ether through which interactivity happens. It will [...] appear on your computer screen, [...]}

on

your TV set [...] your car dashboard [...] your cell phone [...] hand-held game machines [...] maybe even your microwave oven.Her use of the term deals mainly with Web design and_{aesthetics; she argues that the Web is "fragmenting" due to the widespread use of}

portable_{Web-ready devices. Her article is aimed at designers, reminding them to code for an}

ever-increasing variety of hardware. As such, her use of the term hints at t but does not directly_{relate to t the current uses of the}

term.

The term did not resurface until 2003. These authors focus on the concepts currently

associated with the term where, as Scott Dietzen puts it, "the Web becomes a universal,

standards-based integration platform".In 2004, the term began its rise in popularity when

O'Reilly Media and MediaLive hosted the first Web 2.0 conference. In their opening remarks,

John Battel l e and T i m O ' Rei ll y outlined their definition of the "Web as Platform", where

software applications are built upon the Web as opposed to upon the desktop. The unique aspect of this migration, they argued, is that "customers are building your business for

you".

[10 ]

They argued that the activities of users generating content (in the form of ideas, text, videos, orpictures) could be "harnessed" to create value.O'Reilly et al. contrasted Web 2.0 with what

theycalled "Web 1.0". They associated Web 1.0 with the business models of Netscape and theEncyc l opedia Britannica On li ne . For

example,_{Netscape framed "the web as platform" in terms of the old software paradigm:} their

flagship product was the web browser, a desktop application, and their strategy was to use theirdominance in the browser market to establish a market for high-priced server products.

Controlover standards for displaying content and applications in the browser would, in theory, give

Netscape the kind of market power enjoyed by Microsoft in the PC market. Much like the

"horseless carriage" framed the automobile as an extension of the familiar, Netscape promoted

a "webtop" to replace the desktop, and planned to populate that webtop with information

updates and applets pushed to the webtop by information providers who would purchase

Netscape

servers._{In short, Netscape focused on creating software, updating it on occasion,} and

distributing it to the end users. O'Reilly contrasted this with Google, a company which did not atthe time focus on producing software, such as a browser, but instead focused on providing

a

service based on data. The data being the links Web page authors make between sites. Google

exploits this user-generated content to offer Web search based on reputation through its "page

CS1015 User Interface Design

© Einstein College of Engineering

rank" algorithm. Unlike software, which undergoes scheduled releases, such services are

constantly updated, a process called "the perpetual

beta". A similar difference can be seen between the Encyclopedia Britannica Online and

Wikipedia: while the Britannica relies upon experts to create articles and releases them

periodically in publications, Wikipedia relies on trust in anonymous users to constantly and

quickly build content. Wikipedia is not based on expertise but rather an adaptation of the open

source software adage "g i ven enough eyebal l s, al l bugs are sha ll ow" , and it produces and updates articles

constantly._{O'Reilly's Web 2.0 conferences have been held every year since 2004,} attracting

entrepreneurs, large companies, and technology reporters. In terms of the lay public, the term

Web 2.0 was largely championed by bloggers and by technology journalists, culminating in the2006

T I ME magaz i ne Person of The Year t "You" . That is, T I ME selected the masses of users who

were participating in content creation on soc i al networks , blogs, wikis, and media sharing sites.The cover story author Lev Grossman

explains:_{It's a story about community and collaboration on a scale never seen before. It's} about

the cosmic compendium of knowledge Wikipedia and the million-channel people's network

YouTube and the online metropolis MySpace. It's about the many wresting power from the few

and helping one another for nothing and how that will not only change the world, but also change the way the world

changes.

Since that time, Web 2.0 has found a place in the lexicon; in 2009 Global Language Mon i tor declared it to be the one-millionth English

word.

Characteristics of a Web

Interface: Web 2.0 websites allow users to do more than just retrieve information. They

can build on the interactive facilities of "Web 1 . 0" to provide "Network as p l atform"

computing,allowing users to run software-applications entirely through a browser. Users can own the data

on a Web 2.0 site and exercise control over that data. These sites may have an "Architecture ofparticipation" that encourages users to add value to the application as they use

it.

The concept of Web-as-part i c i pat i on-platform captures many of these characteristics. BartDecrem, a founder and former CEO of Flock, calls Web 2.0 the "participatory Web" and

regards

the Web-as-information-source as Web 1.0.

The impossibility of excluding group-uuŒﾐÁZ}}v[š }všŒ]µšš}šZ‰Œ}À]ﾐ]}v}(P}}ﾐ ﾐ

from sharing profits gives rise to the possibility that rational members will prefer to withhold

their contribution of effort and free-ride on the contribution of others. This requires what is

sometimes called Rad i cal Trust by the management of the website. According to Best, the

characteristics of Web 2.0 are: rich user experience, user participation, dynamic content,

metadata, web standards and scalab ili ty. Further characteristics, such as openness, freedom andcollective intelligence by way of user participation, can also be viewed as essential attributes

of

CS1015 User Interface Design

Principles Of User Interface Design: General Principles• Accessibilit y • Aesthetically Pleasing • Availabilit y • Clarit y • Compatibilit y • Configurabilit y • Consistenc y • Contro l • Directness • Efficienc y • Familiarit y • Flexibility • Forgiveness • Immersion • Obviousness • _Operability • Perceptibilit y • Positive First Impression • _{Predictabilit} y • Recover y • Responsivenes s • _Safety • Simplicity • Transparenc y • Trade-offs • Visibilit y Accessibilit

y • Systems should be designed to be usable, without modification, by as many people as

possible. Aesthetically

Pleasing• Provide visual appeal

by:• Providing meaningful contrast between screen elements

• Creating groupings

• Aligning screen elements and groups • _{Providing three-dimensional}

representation

• Using color and graphics effectively and simply

Availabilit

y • Make all objects available at all times.

• _{Avoid the use of modes.} Clarit

CS1015 User Interface Design

© Einstein College of Engineering

• The interface should be visually, conceptually, and linguistically clear, including:• Visual

elements • Functions • Metaphors • Words and text Compatibilit

y • _{Provide compatibility with the} following:• The user

• The task and job • _{The product}

• }‰ššZµﾐŒ[ﾐ‰Œ ‰ﾐ š]ÀX Configurabilit

y • Permit easy personalization, configuration, and reconfiguration of settings.• Enhances a sense of

control

• Encourages an active role in understanding

Consistenc

y • A system should look, act, and operate the same throughout. Similar components should: • Have a similar look • Have similar uses • Operate similarly

• The same action should always yield the same result.

• The function of elements should not change.

• The position of standard elements should not change.

Inconsistency

causes:• More specialization by system users

• _{Greater demand for higher} skills

• More preparation time and less production time

• More frequent changes in procedures

• _{More error-tolerant systems (because errors are more} likely)

• More kinds of documentation

• More time to find information in documents

• _{More unlearning and learning when systems are} changed

• More demands on supervisors and managers

• More things to do wrong Contro

l • The user must control the interaction.

• The context maintained must be from the perspectiv e

of the user.

• The means to achieve goals should be flexible and compatible with the user's

skills, experiences

, habits

and

preferences.

• Avoid modes because they constrain the actions available.

• _{Permit the user to customize the interface but provide} defaults.

Directness

• _{Provide direct ways to accomplish} tasks.

CS1015 User Interface Design

• Available alternatives should be visible.

• The effect of actions on objects should be visible.

Efficienc

y • Minimize eye and hand movements, and other control

actions.• Transitions between various system controls should flow easily and freely.

• _{Navigation paths should be as short as possible.}

• Eye movement through a screen should be obvious and sequential.

• vš]]‰ššZµﾐŒ[ﾐÁvšﾐvvﾐÁZvÀŒ‰}ﾐﾐ]oX Familiarit

y • Employ familia

r concepts and use a language that is familiar to the user • <‰šZ]všŒ(všµŒoUu]u]l]vPšZµﾐŒ[ﾐZÀ]}Œ ‰ššŒvﾐ • Use real-world metaphors Flexibility

• _{A system must be sensitive to the differing needs of its users, enabling a level and} type of performance based upon:• ZµﾐŒ[ﾐlv}ÁoPvﾐl]ooﾐ • ZµﾐŒ[ﾐƉŒ]v • ZµﾐŒ[ﾐ‰Œﾐ}vo ‰Œ(Œv • _{ZµﾐŒ[ﾐZ]šﾐ}

• The conditions at that moment Forgiveness

• Tolerate and forgive common and unavoidable human errors

• Prevent errors from occurring whenever possible

• Protect against possible catastrophic errors

• When an error does occur, provide constructive messages

Immersion

• A state of mental focus so intense that awareness and sense of the real world is lost

• Foster immersion within tasks

Obviousness

• A system should be easily learned and understood:• What to look at

• What it is • What to do • _{When to do it} • Where to do it • Why to do it • _{How to do} it

• Flow of actions, response, visual presentations, and information should be:• _{In a sensible} order • _{Easy to} recollect • Easy to place in context Operability

CS1015 User Interface Design

© Einstein College of Engineering

• Ensure that a system's design can be used by everyone, regardless of a person's physicalcapabilities

. Perceptibilit

y • Ensure that a system's design can be perceived, regardless of a person's sensory

capabilities .

Positive First

Impression• Create a positive first impression of the system.• Points of prospect • Minimal barriers • Progressive lures Predictabilit

y • The user should be able to anticipate the natural progression of each task.• Provide distinct and recognizable screen

elements

• Provide cues to the result of an action to be performed

• All expectations should be fulfilled uniformly and completely.

Recover

y • _{A system should permit:}

• Commands or actions to be abolished or reversed

• Immediate return to a certain point if difficulties arise

• _{Ensure that users never lose their work as a result} of: • An error on their

part

• _{Hardware, software, or communication} problems

Responsivenes

s • dZﾐÇﾐšuuµﾐšŒ‰]oÇŒ ‰ﾐ }vš}šZµﾐŒ[ﾐŒ‹µﾐšﾐX • _{Provide immediate acknowledgment for all}

actions:• Visual • Textual • _Auditory Safety

• Protect the user from making mistakes. • Provide visual cues• Reminders • Lists of choices • Other aids as necessary Simplicity

• Provide as simple an interface as possible.

• Five ways to provide

simplicity:• Use progressive disclosure, hiding things until they are needed• Present common and necessary functions

first

• Prominently feature important functions

• _{Hide more sophisticated and less frequently used} functions

• Provide defaults

• Minimize screen alignment points

• _{Make common actions simple at the expense of uncommon actions being} made

harder

• _{Provide uniformity and} consistency

CS1015 User Interface Design

© Einstein College of Engineering

y • Permit the user to focus on the task or job, without concern for the mechanics of the

interface

. • Workings and reminders of workings inside the computer should be invisible to

the user

Trade-Offs• Final design will be based on a series of trade-offs balancing often-conflicting design

principles.

• W}‰o[ﾐŒ‹µ]ŒuvšﾐoÁÇﾐšl‰Œv }ÀŒšZv]oŒ‹µ]ŒuvšﾐX

Visibilit

y • A system's status and methods of use should be clearly visible.

• Improve visibility through • Hierarchical

organization • Context

sensitivity Unit II:

What Comprises Good Design? • Understanding of:

• people, how we see, understand, and think

• how information must be visually presented to enhance human acceptance and

comprehension

• how eye and hand movements must flow to minimize the potential for fatigue

and injury

• _{Must consider the capabilities and limitations of the hardware and software of} thehuman-computer

interface

Guidelines for the Interface Design Process• Know your user or

client

• Understand the basic business function • Understand the principles of good screen

design

• Develop system menus and navigation schemes • Select the proper kinds of

windows

• Select the proper device-based controls

• Choose the proper screen-based controls

• Write clear text and messages

• Provide effective feedback and guidance and assistance

• Provide effective internationalization and accessibility

• Create meaningful graphics, icons, and images

• Choose the proper colors

• Organize and layout windows and pages • Test, test, and retest

Graphical User

Interface: ^PŒ‰Z]oﾐÇﾐšu}vﾐ]ﾐšﾐ}(}išﾐvš]}vﾐXKišﾐŒÁZš‰}‰oﾐ

on the screen. They are manipulated as a single unit. A well-designed system keepsµﾐŒﾐ(}µﾐ}všZ}išﾐUv}š}vZ}Áš}ŒŒÇ}µšš]}vﾐX_

CS1015 User Interface Design

© Einstein College of Engineering

ﾐ

ﾐšo]ﾐZXv}iš[ﾐ

ﾐ

ﾐššﾐZ}µo always be automatically preserved when the user changes it.

Obstacles in User Interface Design process:

The general observations in design process:

• _{Nobody ever gets it right the first} time.

• Development is chock-full of surprises.

• Good design requires living in a sea of changes.

• _{Making contracts to ignore change will never eliminate the need for} change.

• Even if you have made the best the system humanly possible, people will still

make mistakes when using it. • Designers need good tools

• You must have behavioral design goals like performance design goals

Pitfalls are,

• No early anoÇﾐ]ﾐvµvŒﾐšv]vP}(šZµﾐŒ[ﾐvﾐvƉšš]}vﾐ • A focus on using design features or components that are

neat.

• Little or no creation of design element prototypes.

• No usability testing.

• No common design team vision of user interface design goals.

• Poor communication between members of the development team.

Pit falls can be eliminated by the following design commandments:

• _{Gain a complete understanding of users and their tasks} • Solicit early and ongoing user

involvement

• Perform rapid prototyping and testing • _{Modify and iterate the design as much as}

necessary

• Integrate the design of all the system components

Usability

:Common Usability

Problems:• Ambiguous menus and icons

• Languages that permit only single-direction movement through a system

• Input and direct manipulation limits • Highlighting and selection

limitations • Unclear step

sequences

• More steps to manage the interface than to perform tasks

• Complex linkage between and within applications

• Inadequate feedback and confirmation

• Lack of system anticipation and intelligence

CS1015 User Interface Design

© Einstein College of Engineering

• Inadequate error messages, help, tutorials, and documentation

How to Measure

Usability:• How effective is the interface? Can the required range of tasks be accomplished.

• _{How learnable is the} interface?

• How flexible is the interface?

• What are the attitudes of the users?

Principles of Good Screen Design:

A well-designed

screen:• Reflects the capabilities, needs, and tasks of its users

• Is developed within the physical constraints imposed by the hardware on which it is

displayed.

• Effectively utilizes the capabilities of its controlling software

• Achieves the business objectives of the system for which it is designed

Interface Design Goals:• Reduce visual

work • _{Reduce intellectual} work • Reduce memory work • Reduce motor work

• _{Minimize or eliminate any burdens or obstructions imposed by} technology

Test of a Good Design:

• _{Can all screen elements be identified by cues other than by reading the words that} makethem up?

• The best interfaces make everything on the screen obvious

Elements of Good Screen Design:• Upper-left starting

point• WŒ}À]v}À]}µﾐﾐšŒš]vP‰}]vš]všZﾐŒv[ﾐµ‰‰Œ-left corner

• Screen navigation and flow • Visually pleasing composition• Balanc e • Symmetry • Regularit y • Predictabilit y • Sequentiality • Economy • Unity • Proportio n • Simplicity (complexity) • Groupings Human characteristics in Design: Perception :

is our awareness and understanding of the elements and objects of our environment

through the physical sensation of our various senses including sight sound, sound, smell and so forth.

CS1015 User Interface Design

© Einstein College of Engineering

There two components:

Long term memory contains the knowledge we posses.

Short termreceives information from either the senses or the long term memory.

Sensory storage:

is the buffer where the automatic processing of information collected from our

senses takes place.

Visual acuity:

The capacity of the eye to resolve the details

Foveal and peripheral vision:

Foveal vision is used to focus directly on something

Peripheral vision senses anything in the area surrounding the location .It can not be

clearly resolved. Information Processing:

The information that our senses collect that is deemed important enough to do

something about then has to be processed insome meaningful way. Mental Models: ]ﾐ ﾐ ﾐ]u‰oÇv]všŒvoŒ‰Œﾐvšš]}v}(‰Œﾐ}v[ﾐµŒŒvšµvŒstanding of something. Movement Control:

The response from the computer is a movement. Movements include such activities as

pressing keyboard keys, moving the screen pointer.

Learning:

is the process of encoding in long-term meomory information that is contained in

short-term memory. Skill:

The goals of human performance is to perform skillfully.The essence of skill is

performance of actions or movements in the correct time sequence with adequate precision.

Individual differences:

CS1015 User Interface Design

© Einstein College of Engineering

in looks, feelings, motor abilities, intellectual abilities, learning abilities and speed. Human considerations in design: dZµﾐŒ[ﾐlv}ÁoPvƉŒ]vW • Computer literacy. • System Experience • Application experience • Task experience

• _{Other system use} • Education

• Reading level

• _{Typing skill}

• Native language and culture dZµﾐŒ[ﾐšﾐlﾐvvﾐW • Mandatory or discretionary use • Frequency of use • _{Task or need} importance • Task structure • Social interactions • _{Primary training} • Turnover rate • Job category • Lifestyl e dZµﾐŒ[ﾐ‰ﾐÇZ}o}P]l characteristics

• Attitude and Motivation • Patienc e • Stress level • Expectation s • Cognitive style dZµﾐŒ[ﾐ ‰ZÇﾐ]oZŒšŒ]ﾐš]ﾐ • Age • Hearing vision • _Cognitive processing • Gender • _Handedness Human interaction speeds:

CS1015 User Interface Design

© Einstein College of Engineering

• _{Major form of navigation through a} system

• If properly designed, assist the user in developing a mental model of the system

• Must reflect the conflicting needs of both inexperienced and experienced users

Structures of menus:

Defines the amount of control given to the user in performing a task. The most

common structures are the following:

Single Menus: S

ﾐ]vPoﾐŒv}ŒÁ]v}Á]ﾐ‰Œﾐvšš}ﾐlšZµﾐŒ[ﾐ]v‰µš}ŒŒ‹µﾐšvš]}vš} be performed.

Sequential linear menus:

are represented on a series of screens possessing only one path. The objective of

the menu is specifying parameters or for entering data.

Simultaneous menus:

All menu options are available simultaneously. The menu may be completed in

the order desired by the user, choices being skipped and returned to later.

Event trapping menus:

WŒ}À] v ÀŒ ‰Œﾐvš lPŒ}µv }( }všŒ}o }ÀŒ šZ ﾐÇﾐšu[ﾐ ﾐšš v parameters while the user is working on a foreground task.The functions are,

• _{they may immediately change some parameter in the current} environment

• they may take the user out of the current environment to perform a function

• They may exit the current environment and allow user to move to a totally new environment Functions of Menus: • Navigation to a new menu • Execute an action or procedure • Displaying information • Data or parameter input Contents of Menus: • _{menu context}

provides information to keep the user oriented.

CS1015 User Interface Design

provides the context for the current set of choices.

• choice

descriptionsare the alternatives available to the user. These descriptions can range

from a mnemonic, numeric, or alphabetized listing of choices to single

words or phrases to full sentences or more.

• completion

instructionstell the users to indicate their choices. Formatting menus: Guidelines for formatting: Consistency : • WŒ}À]}vﾐ]ﾐšvÇÁ]šZšZµﾐŒ[ﾐƉšš]}vﾐX • Provide consistency in

menu:• Formatting, including organization, presentation,and choice ordering.

• Phrasing, including titles, choice descriptions, and instructions. • Choice selection methods • _Navigation schemes. Display:

• if continual or frequent references to menu options ar necessary, permanently

display the menu in an area of the screen that will not obscure other screen

data

• if only occasional references to menu options are necessary, the menu may be

presented on demand.

• Critical options should be continuously displayed.

Presentatio n

• _{Ensure that a menu and its choices are obvious to the user by presenting} them

with a unique and consistent structure, location, and display technique.

• Ensure that other system components do not posses the same visual qualities as

menu choices. Organization:

• provide a general menu • display

• match the menu structure to the structure of the task

• _{minimize the number of menu levels within limits of} clarity

• Be conservative in the number of menu choices presented on a screen

• Provide decreasing direction menus, if sensible

• _{Never require menus to be} scrolled

• Provide users with an easy way to restructure a menu according to how work is

CS1015 User Interface Design

© Einstein College of Engineering

:

• Provide both simple and complex menus. • Simple: a minimal set of actions and

menus

• _{Complex: a complete set of actions and} menus.

Item

arrangement:

• _{align alternatives or choices into single columns whenever} possible

• if a horizontal orientation of descriptions must be maintained, organize for left

to right reading. Ordering:

• order lists of choices by their natural order

• for lists associated with numbers,use numeric order.

Groupings:

• create groupings of items that are logical,distinctive, meaningful, and mutually

exclusiv e

• Categorize them.

• Present nomore than six or seven groupings on the screen

• _{Order categorized groupings in a meaningful} way.

• Create arbitary visual groupings.

• _{Separate groupings}

• _{Provide immediate access to critical or frequently chosen} items

Line separators

• _{Separate vertically arrayed groupings with subtle solid} lines.

• Separate veritically arrayed subgroupings with subtle dotted or dashed lines.

• For subgroupings within a category:

• left-justify the lines under the first letter of the columnized

choice descriptions.

• right-justify the lines under the last letter of the longest choice

descriptions. • for independent groupings:

• extend the line to the left and right menu boders Phrasing the

menu:

A menu must communicate to the user information about:

- the nature and purpose of the menu itself - the nature and purpose of each presented

choice

- How the proper choice may be selected.

Navigating menus:

CS1015 User Interface Design

Navigation is an efficient navigational structure, is the most important element in

system usability. A simple and clear navigational structure is the backbone which all system_{(šµŒﾐ]ﾐŒ‰X}

Œ

ﾐÇﾐšu[ﾐ}ŒPv]Ìš]}voﾐšŒµšµŒv]šﾐvÀ]Pš]}voš}}oﾐ]v(oµvšZ ﾐÇﾐšu[ﾐvÀ]Pš]}voﾐ}(µﾐX

Web site navigation problems: • Technical issues. • Usage problems. Navigation goals:

A well designed navigational system facilitates quick and easy navigation

between components. A good navigational scheme and navigational tools will minimize, if not

eliminate, the problems associated with cognitive or

mental overload and feelings of

disorientation. Control

:

• For multilevel menus, provide one simple action to • return to the next higher-level

menu.

• _{Return to the main menu}

• provide multiple path ways through a menu hierarchy when ever possible

Menu navigation aids:

• _{to aid menu navigation and learning, provide an easily} accessible:• menu maps

• _{look aheads} • navigation history Web site

navigation:

Web site Navigation focuses specifically on website navigation design It will review

website organizational schemes, the navigational components including browser command

button ,links, website toolbars and command butt and the characteristics and the components

of a website. Website organization:

• Divide the content into logical units, fragments, or chunks.

• _{Establish a hierarchy of generality or} importance

• Structure the relationships among content fragments, units, or chunks. • Create a well-balanced hierarchical

tree. •

Kinds of Graphical Menus:

• Menu bar

• To identify and provide access to common and frequently used actions

CS1015 User Interface Design

© Einstein College of Engineering

• For frequently used application actions that take place in a wide variety of different windows • _{Cascading menu} • To simplify a higher-level menu • Pop-up menu

• _{For frequent users and frequently used contextual} commands

• Tear-off

menu• For items sometimes frequently or infrequently selected

• _{Iconic menu}

• To designate applications available and special functions within an application

• Pie Menu

A pie menu is a circular representation of menu items, that can be used as an

alternative to a pull-down or pop-up menu.

Unit III: Window:

The application program in Windows operating system is opened in rectangular area on

the desktop. This rectangular area is known as window.

Components of window:

The application program in Windows operating system is opened in rectangular area on

the desktop. This rectangular area is known as window. In Windows operating system multiple

programs can be simultaneously opened in multiple windows. It is because this operating

CS1015 User Interface Design

The bar located at the top of the application window is known as Title Bar. Usually the TitleBar contains the name of application program and the name of current document. In the

above(]PµŒU šZ d]šo Œ Zﾐ v ‰‰o]š]}v vu ^D]Œ}ﾐ}(š t}Œ_ v šZ }µuvš vu ]ﾐ ﾐ

^}µuvšî_XdZµﾐŒvŒPvŒ}‰šZÁ]v}Á(Œ}u}vo}š]}n to other on the screen

by dragging its Title Bar.

More than one application windows of different programs can be opened vertically or

horizontally. The Title Bar of the active window will be darker in color than the Title Bar color of

other window (inactive window). The active window is one in which you are currently working.

Control Icon

The icon that appears on the left most side of the Title Bar of every application window is knownas Control Icon. It is used to control the application window. When the Control Icon is clicked,

a

control menu appears with a group of commands. These commands are used to set the

dimension of window as well as to close the window (application program). The commands of

control menu and their functions are:

Restores t the application window to its original size.

Move t Enables the application window to be moved on the desktop, if it is minimized.

Size t Used to change the size of application window.

Minimize t Used to minimize the current application window.

Maximize t Used to maximize the current application window.

Close t Used to close the application window along with application program.

Control Buttons

The buttons that appear on the right most side of the Title Bar of every application window are

known as Control Buttons. Like control menu, these are also used to control the dimension of

window by using only mouse. These buttons provide the shortcut method to control the window. The control buttons and their functions

are:

Minimize Button t By clicking this button, the current window is minimized and disappearedfrom desktop.

Maximize Button t By clicking this button, the current window is maximized and fills the entirescreen. When window is maximized, a restore button is appeared in place of maximize

button.

Restore Button t By clicking this button, the window restores to its original size.

Close Button t By clicking this button, the window is closed and its button is also removed fromthe task bar.

CS1015 User Interface Design

© Einstein College of Engineering

Bar

The bar located at the bottom of application window is known as Status Bar. It provides some

basic information about the status of current document or objects in window. For example, the }všŒ}oWvo[ﾐ ﾐ ﾐššµﾐŒšooﾐÇ}µZ}ÁuvÇ}išﾐ‰‰Œ]všZÁ]v }ÁX Scroll Bars

When information displayed .in application window is larger and cannot fit in it then scroll bars

appear automatically at the right or bottom borders. In this case, a part of the information is

displayed and remaining information remains hidden. The hidden information can be displayed

by moving the scroll bars of the window. Each scroll bar has two arrows also at its ends. Byclicking these arrows you can move around the window but very slowly (line by line or

column

by column). The scroll Bar also has a scroll box. By dragging this box, you can quickly move

around the window. Menu

Bar

The bar that contains drop-down menus and appears immediately below the title bar is known

as Menu Bar. The commands that are used to perform different tasks are grouped together on

the Menu Bar. The Menu bar is accessed by clicking mouse or by using keyboard

shortcuts.When any menu option from Menu Bar is clicked, a drop down menu appears with a list of

commands. You can select a command from the list by clicking it. The drop-down menu may

contain some commands as active and some as inactive. The inactive command is not availablefor selection and appears as dim, usually in light gray color. You can select only from the

activecommands.

To access the Menu Bar using mouse, follow these steps:

 _{Bring the mouse pointer on the desired menu option and click it. A drop down} menu appears with a list of

commands.

 _{Point to the command you want to use and click it to execute. The command} is

executed and drop down menu is disappeared.

To disappear the menu without selecting any command, point the mouse pointer to the empty

area of window (or desktop) and click it or use Esc key.

Dialog Boxes

A dialog box is a command element in Windows and its application programs. It is used to

collect information from the user before processing a command. In a dialog box, the user has to

enter information such as file names or has to select options etc. For example, when a Savecommand is selected to save the work (or document) the Save As dialog, box appears to get

thename of file. Similarly, when Open command is selected to open an existing file the Open dialogbox appears to get the name fiIe to be opened. The dialog boxes are also used to

display

messages or to provide information to the user. For example, to alert the user about the

problem occurred in the computer or about any other error.

The dialog box also contains command buttons to send the input to the application, program

(or, computer) to take action or to get help about the dialog box. For example the Ok commandbutton is clicked to proceed after making selection or entering information. Similarly,

clicking

Cancel button ends the current operation without giving any information to computer.

Device Based Controls:

CS1015 User Interface Design

They are the mechanism through which people communicate their

desires to the system, also known as input devices.

Characteristics of device Based Controls: _•

To point an object on the screen.

• _{To select the object or identify it as the focus of} attention

• To drag an object across the screen

• To draw something free form on the screen

• _{To track or follow a moving} object

• To orient or position an object

• To enter or manipulate data or information

The example devices

are, _{- Trackbal} l - Joystick - Graphic Tablet - Touch screen - Light pen - Voic e - Mouse - Keyboard Track ball: Description:

- A spherical object that rotates freely in all directions in its socket

- Direction and speed is tracked and translated into cursor movement

Advantages:

- direct relationship between hand and pointer movement in terms of

direction and speed

- Does not obscure vision of screen

- Does not require additional desk space

Disadvantages:

- Movement is indirect, in a plane different from the screen

CS1015 User Interface Design

© Einstein College of Engineering

- No direct relationship exists between hand and pointer movement in

terms of distance

- Requires a degree of eye-hand coordination

- Requires hand to be moved from keyboards

- Requires different hand movements

- Requires hand to be moved from keyboards keys

- Requires additional desk space

- May be difficult to control

- May be fatiguing to use over extended time

Joystick :

Description:

A joystick is an input device consisting of a stick that pivots on a base and reports its

angle or direction to the device it is controlling. Joysticks are often used to control video games,_{and usually have one or more push-buttons whose state can also be read by the}

computer. Advantages:

- Direct relationship between hand and pointer movement in terms of

direction.

- Does not obscure vision of screen

- Does not require additional desk space

Disadvantages:

- Movement is indirect, in a plane different from the screen

- No direct relationship exists between hand and pointer movement in

terms of distance

- Requires a degree of eye-hand coordination

- Requires hand to be moved from keyboards

- Requires different hand movements

- Requires hand to be moved from keyboards keys

- Requires additional desk space

CS1015 User Interface Design

- May be fatiguing to use over extended time

- May be slow and inaccurate

Graphic tablet:

A graphics tablet (or digitizer,

digitizing tablet, graphics pad, drawingtablet) is a

computer i nput dev i ce that allows one to hand-draw images and graphics, similar to the way one draws images with a pencil and paper. These tablets may also be used to capture data

or

handwritten signatures. It can also be used to trace an image from a piece of paper which istaped or otherwise secured to the surface. Capturing data in this way, either by tracing

or

entering the corners of linear poly-lines or shapes is called d i g i t i z i ng .

Advantages:

- direct relationship between touch and pointer movement in terms of

direction and speed

- Does not obscure vision of screen

- More comfortable horizontal operating plane

Disadvantages:

- Movement is indirect, in a plane different from the screen

- Requires hand to be moved from keyboards

- Requires hand to be moved from keyboards keys

- Requires different hand movements

- Requires additional desk space

- Finger may be too large for accuracy with small objects

Touch screen:

A touch screen is an electron i c visua l display that can detect the presence and location

of a touch within the display area. The term generally refers to touching the display of the

device with a finger or hand . Touch screens can also sense other passive objects, such as

a sty l us.

The touch screen has two main attributes. First, it enables one to interact directly with

what is displayed, rather than indirectly with a cursor controlled by a mouse or touchpad .

Secondly, it lets one do so without requiring any intermediate device that would need to be held_{in the hand.}

CS1015 User Interface Design

© Einstein College of Engineering

- direct relationship between hand and pointer movement in terms of

direction, distance and speed

- requires minimal additional desk space

- Stands up in high-use environments - More accurate than finger

touching

- Movement is direct, in the same plane as screen

Disadvantages:

- very fatiguing to use over extended time

- requires picking it up to use

- requires moving the hand far from the keyboard to use

- hand may obscure part of screen

Voice :

Automatic speech recognition by the computer

Advantages:

- Simple and direct

- Useful for people who cannot use a keyboard

- hﾐ(µoÁZvšZµﾐŒ[ﾐZvﾐŒ}µ‰] Disadvantages;

- High error rates due to difficulties in:

♦ _{Recognizing boundaries between spoken} words

♦ Blurred word boundaries due to normal speech patterns

- slower throughput than with typing - difficult to use in noisy

environments

- impractical to use in quiet environments

CS1015 User Interface Design

Mouse:

mouse is a po i nt i ng dev i ce that functions by detecting two-d i mensiona l motion relative

to its supporting surface. Physically, a mouse consists of an object held under one of the user's_{hands, with one or more buttons}.

Advantages:

- direct relationship between hand and pointer movement in terms of

direction, distance and speed

- Does not obscure vision of screen

- More comfortable horizontal operating plane

- Selection mechanisms are included on mouse

Disadvantages:

- Movement is indirect, in a plane different from the screen

- Requires hand to be moved from keyboards

- Requires additional desk space

- May require long movement distances

- Requires a degree of eye-hand cocordination

Keyboard :

Standard typewriter keyboard and cursor movement keys Advantages: - familia r - accurat e

- does not take up additional desk space - very useful

for:

♦ entering text and alphanumeric data ♦ inserting in text and alphanumeric data ♦ keyed shortcuts -

accelerators

♦ _{keyboard mnemonics t} equivalents

CS1015 User Interface Design

© Einstein College of Engineering

for:

♦ performing actions when less than three mouse buttons exist

♦ _{use with very large} screens

♦ _{touch typists}

Disadvantages:

- slow for non-touch-typist

- slower than other devices in pointing

- requires discrete actions to operate

- no direct relationship between finger or hand movement on the keys

and cursor movement on screen in terms of speed and distance

Screen based controls:

Are the elements of a screen that constitute its body. The example includes, - buttons - text entry/read-only controls - selection controls - combination entry/selection controls - specialized operable controls - custom controls - presentation controls - web controls Buttons:

The Command button is a common c ontrol frequently used in VB programming. This is one of the first c ontr ols that beginners learn to

place

CS1015 User Interface Design

control object. An event procedure is something that happens in response

to a user action such as a click or a "mou se over". (If an object on a form

has no corresponding code written by the programmer, nothing will happen

if the user clicks on the co ntrol or atte mpts any other action

with that

control.)

Double-clicking on a Command button in the toolbar will place it onto the

center of your form. Left click on it the "draw" it onto the form by dragging

the mouse and at the same time, holding down the left mouse key while

dragging. Release the left mouse key when the object is the size you want it

to be. You can also "drag" an object in th e work area by first selecting the

object with a single mouse click then dragging the object by positioning the

mouse pointer over the object, holding down on the left mouse key, and

moving the object to a new location in the work area, then releasing the

left mouse button to s top the move and f inally, by clicking somewhere off

the object to deselect the obje ct that was j ust moved.

While the mouse pointer is over the Command butt on, click and release the

left mouse button to highlight (select) the Command button. You will see

resizing handles appear which you can drag diagonally, horizontally

, or

vertically to change the size of the Command button. The only reason you

would want to do this is to fit a large caption onto the butt on. Most of the

time, you will not need to resize the Command button. Beginners like to

play with the resizing so have fun with it.

Another way to place a Command button onto a form is to single -click on

the Command button in the Toolbar. Then place the mouse pointer over the

form and hold down on the left mouse button while dragging a short diagonal line from corne

r to corner where you want t he but ton to be placed. If the size is not right, left -click on the but ton and drag the re

-sizing

handles to make it the size you need.

T h e N a m e a n d N a m i n g C o n v e n t i o n s

Getting down to serious business, the Command button will need to have a

name. It is named whi le it is highlighted (selected) on the form. While the

Command button on the f orm is selected, go to the Properties Window and

select the Alphabetical tab. At the top of this list the first item to appear

will be Name. Click on Name and to the right of tha t, double click in the

Name space to highlight the words Command1. Start typing a name for your

Command button beginning with the lowercase letters "cmd" without the

quotation marks, just plain cmdName where Name is the one you select,

such as cmdShow3.

Naming conventions for controls and variable

s (textbook naming

conventions for first and second semester VB students) are discussed in the

article Hungar i an Notat i on . Many programmers begin the name part (after

the cmd prefix) with a capital letter to make it easier

to read, such as cmdLarge. If two words

are to be in the name of any control such as a Command button, be sure you do not allow any spaces in the name.

Begin

the second word with a capital letter like this: cmdSecondWord. This is only

CS1015 User Interface Design

© Einstein College of Engineering

done to make it easier to read. cmdsecondword is also legal but is harder to

read. CAS E

(Uppercase or lowercase )

does not matter. THIS is the same word as this. Visual Basi

c will rever t back to whate ver uppercase an d lowercase letters were used in a variable at the time you write the

Dim

statement to dimension the variable. More on this latter. A total of 255

characters are permissible in a control or variable name. Technically, after

the variabl

e nam e begins with at least one letter, any combination of letters, numerals, and underscores may be used. Special character

s like

period or ampersand (&) are not allowed and all students are encouraged by

programmers to please use the Hungarian notation c onven tions when naming controls and

variables.

The Hungarian Notation prefixes (again, for VB students) are used for ease

in debugging, to help you remember what type of variable or control you

made (afte

r a long time has elapsed you may not remember). Hungaria n notation has been accepted by programmers as a type of naming

convention

or standardization in coding and in naming controls and variables. Many times programmers work on modules -- little pieces of larger programs

and

many people work on one program. Wi thout the Hungarian Notatio n protocols your own variables would make less sense to another person. The

prefix tells another person what type of control or variabl

e you have

created .

T h e C a p t i o n :A n d U s i n gt h e a m p e r s a n d( & ) i n a C o m m a n db u t t o n C a p t i o n

Capti on is a Property of the Command control button (the command button). Left click on the Command butto n again on the form, to select

it.

Return to the Properties window. Click on the Alphabetical tab. Scroll down

until Caption is read and click on it. Double click on the words to the right

of Caption and start typing the words you want to appear on your butto n.

For an exit button type E&xit for the Caption and touch ENTER. Why the

ampersand? You can use an ampersand (&) one time in each Control button

Caption. This will underline one letter in the caption. It is the letter followin

g the ampersand that will be underlined. That underlined letter signifies which corresponding keyboard letter key can be used along

with

the ALT key to access the Control button. By using the ALT key (held down)

while pressing the corresponding letter key on the keyboard you would get

the same program output as if you had "pressed" on a Command button by clicking on it with the mouse instead. To rephrase this: if the exit

button

has a Caption of E&xit, the letter x is unde rlined then you could press AL T +

x to exit the program instead of having to c lick on the exit button.

T h e D e f a u l t P r o p e r t y o f t h e C o m m a n d c o n t r o l b u t t o n This is a nice property to set at design time. The only two pos sible

values

are Default = False or Default = True. Only one command button per form

should have a Default = True setting. With Default = True set for a particular Command button, then that bu tt on's click_event can be

achieved

by pressing the ENTER key ins tead of having to use the mouse. If you do no tdo anything at all with this Default property, Visual Basic will always set the

CS1015 User Interface Design

Default = False option. This is convenient in that most all Command buttons

will need to have a false Default setting since only one button with the true

Default setting can be accesse d

with th e ENTE R

key (per form). In the Properties window (F4 shortcut to the pr operties window), scroll down

to

Default and click on the drop down arrow to see two choices. Click on True,

if changing the Default to true. Do not hing and it will be left at the Default

= False, automatically.

T h e C a n c e l P r o p e r t y o f t h e C o m m a n d b u t t o n

The Cancel Property determines whether or not a Command button is the

cancel button of the form, the button wh ose action of cancelling a form is

accessed by the Escape key (ESC on the k eyboard). Visual Basic by default

sets Escap e

= False for all command bu ttons, since only one Command button per form can be ac cessed by the ESC key (escape). I use the

Exit

button if I have one on the form and a t design time in the Propertie s

Window I set the Cancel option to True. To do this, select the Command

button which is to be the cancel button. Scroll in the Properties Window to

the Cancel property. Click on the drop down arrow and click on True. Touch

ENTER key. (Just like the Default property there are only two settings for

the Cancel property, True or False.). Again, do no thing and the setting will

automatically be False.

Now, a quick recap: There are three ways for a user to access the cmd Exit (command button): • C l i c k o n t h e b u t t o n • U s et h e k e y b o a r ds h o r t - c u t ,A L T+ X , i f t h e p r o g r a m m e rh a s u s e d E & x i t i n t h e C a p t i o n s o t h a t X w i l l b e a " h o t k e y " t o u s e w i t h A L T k e y . • U s et h e E S Ck e y( E s c a p e ) ,i f t h e C a n c e lP r o p e r t yo f c m d E x i t h a s b e e n s e t t o T r u e b y t h e p r o g r a m m e r ( a t D e s i g n t i m e ) . Note: An additional way to exit or cancel the form fr om Run mode is

the

obvious Windows method of clicking on the exit button in the Title bar of

the form.

T o o l T i p sP r o p e r t yf o r a n y c o n t r o lo b j e c t ,i n c l u d i n gt h e C o m m a n d b u t t o n

The Cancel

Property and the Default Property were inherent only to the Command button. Many properties available to the command button

may

also be set with other control o bjects fro m the toolbar, and even objects

not from the to olbar. The T oolTips pro perty is available for setting with any

of the Visual Basic contr ol objects.

The ToolTips property is a clever way to have the user read a message about

a control object simply by hovering with the mouse pointer over that object

for a couple of seconds.