Beruflich Dokumente
Kultur Dokumente
TOTAL : 45
TEXT BOOK
:LOEHQW.
. 2. *DOLW] ,³7KH (VVHQWLDO *XLGH WR 8VHU ,QWHUIDFH 'HVLJQ´, -RKQ :LOH\&
Sons, 2001.
REFERENCES
. %HQ 6KHLGHUPDQ, ³'HVLJQ WKH8VHU ,QWHUIDFH´,
3HDUVRQ (GXFDWLRQ,.
. $ODQ &RRSHU, ³7KH (VVHQWLDO RI 8VHU ,QWHUIDFH 'HVLJQ´, :LOH\ ± Dream Tech Ltd.,
2002.
UNIT I
Introduction
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.
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.
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
© Einstein College of Engineering
CS1015 User Interface Design
· pointing device : A dev i ce , such as a mouse or trackbal l, that enables you to select
objects on the display screen.
· 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.
Advantages
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
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
actions
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 navigate
between 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. The
web browser then initiates a series of communication messages, behind the scenes, in order to
fetch 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, which
then 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 views
or 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 page
© Einstein College of Engineering
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 pages
and 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 the
WorldWideWeb (in its original Came l Case , which was subsequently discarded) in November
1990.
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
[10 ]
aspect of this migration, they argued, is that "customers are building your business for you".
They argued that the activities of users generating content (in the form of ideas, text, videos, or
pictures) could be "harnessed" to create value.O'Reilly et al. contrasted Web 2.0 with what they
called "Web 1.0". They associated Web 1.0 with the business models of Netscape and the
Encyc 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 their
dominance in the browser market to establish a market for high-priced server products. Control
over 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 at
the 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
© Einstein College of Engineering
CS1015 User Interface Design
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 the
2006 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 of
participation" 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. Bart
Decrem, 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 and
collective intelligence by way of user participation, can also be viewed as essential attributes of
Web 2.0.
General Principles
Accessibility
Aesthetically Pleasing
Availability
Clarity
Compatibility
Configurability
Consistency
Control
Directness
Efficiency
Familiarity
Flexibility
Forgiveness
Immersion
Obviousness
Operability
Perceptibility
Positive First Impression
Predictability
Recovery
Responsiveness
Safety
Simplicity
Transparency
Trade-offs
Visibility
Accessibility
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
Availability
Make all objects available at all times.
Avoid the use of modes.
Clarity
Efficiency
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
Familiarity
Employ familiar 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}ÁoPvl]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
Ensure that a system's design can be used by everyone, regardless of a person's physical
capabilities.
Perceptibility
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
Predictability
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.
Recovery
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
Responsiveness
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
Transparency
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
Visibility
A system's status and methods of use should be clearly visible.
Improve visibility through
Hierarchical organization
Context sensitivity
Unit II:
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 the
human-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š]}vXKišŒÁZš‰}‰o
on the screen. They are manipulated as a single unit. A well-designed system keeps
µŒ(}µ}všZ}išUv}š}vZ}Áš}ŒŒÇ}µšš]}vX_
© Einstein College of Engineering
CS1015 User Interface Design
WŒ]švWšZu]všvv}(šš}v]š]šo]ZXv}iš[ššZ}µo
always be automatically preserved when the user changes it.
No early anoÇ]vµvŒšv]vP}(šZµŒ[vvƉšš]}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.
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
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.
Memory:
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:
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:
Skill:
Individual differences:
speed.
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µŒ[šlvvW
Age
Hearing vision
Cognitive processing
Gender
Handedness
Human interaction speeds:
Reading
Listening
Speaking
Keying
Hand printing
Menus
Defines the amount of control given to the user in performing a task. The most
common structures are the following:
Single Menus:
]vPoŒv}ŒÁ]v}Á]‰Œvšš}lšZµŒ[]v‰µš}ŒŒ‹µšvš]}vš}
be performed.
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.
menu title
© Einstein College of Engineering
CS1015 User Interface Design
choice descriptions
are 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 instructions
tell the users to indicate their choices.
Formatting menus:
Consistency:
WŒ}À]}v]švÇÁ]šZšZµŒ[Ɖšš]}vX
Provide consistency in menu:
Formatting, including organization, presentation,and choice ordering.
Phrasing, including titles, choice descriptions, and instructions.
Choice selection methods
Navigation schemes.
Display:
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:
Complexity:
Navigating menus:
Technical issues.
Usage problems.
Navigation goals:
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:
Menu bar
To identify and provide access to common and frequently used actions
© Einstein College of Engineering
CS1015 User Interface Design
Pull-down menu
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:
Components of window:
Title bar.
Control icon.
Status bar.
Menu bar.
Toolbar.
Title Bar
The bar located at the top of the application window is known as Title Bar. Usually the Title
Bar 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 known
as 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 disappeared
from desktop.
Maximize Button t By clicking this button, the current window is maximized and fills the entire
screen. 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 from
the task bar.
Status 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. By
clicking 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 available
for selection and appears as dim, usually in light gray color. You can select only from the active
commands.
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 Save
command is selected to save the work (or document) the Save As dialog, box appears to get the
name of file. Similarly, when Open command is selected to open an existing file the Open dialog
box 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 command
button 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:
Advantages:
Disadvantages:
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:
Disadvantages:
Graphic tablet:
A graphics tablet (or digitizer, digitizing tablet, graphics pad, drawing tablet) 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 is
taped 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:
Disadvantages:
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.
© Einstein College of Engineering
CS1015 User Interface Design
Advantages:
Disadvantages:
Voice:
Advantages:
- h(µoÁZvšZµŒ[ZvŒ}µ‰]
Disadvantages;
Mouse:
Advantages:
Disadvantages:
Keyboard :
Advantages:
- familiar
- accurate
- advantageous for:
touch typists
Disadvantages:
- buttons
- selection controls
- custom controls
- presentation controls
- web controls
Buttons:
TheNameandNamingConventions
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 variables (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
TheDefaultPropertyoftheCommandcontrolbutton
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 t
do anything at all with this Default property, Visual Basic will always set the
© Einstein College of Engineering
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 accessed with th e ENTER 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.
TheCancelPropertyoftheCommandbutton
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 Escape = 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 Properties
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):
Clickonthebutton
Use the keyboard short-cut, ALT + X, if the programmer has
usedE&xitintheCaptionsothatXwillbea"hotkey"touse
withALTkey.
Use the ESC key (Escape), if the Cancel Property of cmdExit
hasbeensettoTruebytheprogrammer(atDesigntime).
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.
Setting the message of this property is very simple. Just click on the
Command button or another object to select it and then in the Properties
Window (F4), scroll down to To olTips and double click in the space to the
right of ToolTips and s tart t yping your message without quotation marks.
You will need to run the program (F5 shortcut) , and hold your mouse
pointer over the objec t in order f or your ToolTip message to appear. Always
check your ToolTips in the Run mode just to make certain they are
functioning the way you want them to. Remember, set this Property,
preferably at Design time.
Description
A text-entry field is a text field where a user can type or place characters, as arguments, in an
application.
Text-Entry Field
When to Use
Recommended
Provide a text-entry field to allow the user to enter characters.
Guidelines
Required
Support insert mode for all entry of text.
Required
Do not support replace mode when nontextual elements (for example, icons or choices)
are included as elements in text and laid out as characters.
Recommended
Provide replace mode for text entry if the text is displayed using a fixed-width font.
Recommended
If you provide replace mode, allow the user to switch between insert and replace mode
by pressing the Insert key.
Recommended
If the user will typically replace the initial value in the text-entry field, use a persistent
selection to select the entire initial value so that the data can be replaced by typing the
first input character.
Recommended
When using an explicit focus policy, if the information entered by the user into a text-
entry field is not acceptable and focus is on another control, display a warning message
that includes a choice that returns focus to the text-entry field.
Optional
If the information entered by the user into a text-entry field is not acceptable and focus
has been moved out of the text-entry field, mark the field in some way (for example,
with a new color) so that the user can locate and correct it.
Insert Mode
Required
In insert mode, position the text cursor between adjacent elements.
Required
In insert mode, when the user types a character, insert the character before the cursor.
Replace Mode
Required
In replace mode, display the text cursor as if it were on a character. However, with
respect to the rules for navigation and selection, treat it as if it were positioned prior to
the character on which it is displayed. When the cursor is at the end of a line, it should
appear to be on an empty character following the last character on the line.
Required
In replace mode, when the cursor is not at the end of a line and the user types a printing
character, delete the character on which the cursor appears before inserting the new
character. This should have the effect of replacing the character.
Required
© Einstein College of Engineering
CS1015 User Interface Design
In replace mode, when the cursor is at the end of the line and the user types a printing
character, insert the character before the cursor position.
Behavior
Required
When a control supports text entry, support primary, clipboard, and drag-and-drop
transfer in the text field.
Required
Allow the user to scroll data in a text-entry field when more text can be typed or when
more information is available than can be displayed in the field.
Required
In text, when the user presses Space or Shift Space, insert a space.
Required
In a text-display field or a single-line text-entry field, when the user presses Enter,
invoke the default action.
Required
In a multiline text-entry field, when the user presses Enter, insert a new line. End the
current line with the character preceding the current cursor position and start a new
line with the following character.
Required
In a text-display field, use Tab and Shift Tab for tab-group navigation.
Required
In a multiline text-entry field, use Tab and Shift Tab for internal navigation.
Use Tab either to insert a tab or to skip to the next tab stop. Shift Tab should have either
no effect or should skip back to the previous tab stop.
Required
In a single-line text-entry field, use Tab and Shift Tab either for tab-group navigation or
for internal navigation as in a multiline text-entry field.
Recommended
In a text-entry field, when the user presses Ctrl Delete, delete the characters following
the cursor to the end of the line. If text is selected, delete the selection instead.
Guidelines
Label the entry field with a text label above it or to its left, using sentence cap i tal i zat i on .
Provide an access key in the label that allows the user to give focus directly to the entry
field.
Right-justify the contents of entry fields that are used only for numeric entry, unless the
convention in the user's locale demands otherwise. This is useful in windows where the
user might want to compare two numerical values in the same column of controls. In this
case, ensure the right edges of the relevant controls are also aligned.
When the user gives focus to an entry field using the keyboard, place the text cursor at
the end of the existing text and highlight its contents (but don't overwrite the existing
PRIMARY clipboard selection). This makes it easy to immediately overtype or append new
text, the two most common operations performed on entry fields.
Size text entry fields according to the likely size of the input. This gives a useful visual
cue to the amount of input expected, and breaks up the dialog making it easier to scan.
Don't make all the fields in the dialog the same width just to make everything line up
nicely.
In an instant-apply property or preference w i ndow , validate the contents of the entry
field when it loses focus or when the window is closed, not after each keypress.
Exception: if the field accepts only a fixed number of characters, such as a hexadecimal
color code, validate and apply the change as soon as that number of characters have been
entered.
Provide a static text prompt for text boxes that require input in a particular format or in
a particular unit of measurement. For example:
Figure 6-4 Text entry field with static text prompt
Where possible, provide an additional or alternative control that limits the required
input to the valid range. For example, provide a sp i nbox or sl i der if the required input is
one of a fixed range of integers, or provide access to a GtkCalendar control if the user has
to enter a valid date:
Figure 6-5 Text entry field requiring a date as input, with a button beside it to pop up a
GtkCalendar control to simplify the task
This is less error-prone than expecting the user to format their text input in some
arbitrary format. You may still want to provide the entry field control as well, however,
for expert users who are familiar with the required format.
If you implement an entry field that accepts only keystrokes valid in the task context,
such as digits, play the system warning beep when the user tries to type an invalid
character. If the user types three invalid characters in a row, display an alert that explains
the valid inputs for that textfield.
The cursor blink rate is globally defined by the XSettings "gtk-cursor-blink" and "gtk-
cursor-blink-time". Standard toolkit controls use these and they must not be altered in
applications by any means. New controls with text cursors must respect these global
values.
Selection control:
Presents on the screen all the alternatives, conditions, or choices that may exist
for entity, property or value.
Radio Buttons:
A radio button is a Windows control made of two sections: a round box O and a label. The
label informs the user as to what the control is used for. The user makes his or her decision by
selecting or clicking the round box X/v‰Œš]oµPUŒ]}µšš}v]}u‰v]Ç}v
or more other radio buttons that appear and behave as a group. The user decides which
button is valid by selecting only one of them. When the user clicks one button, its round box
fills with a (big) dot: XtZv}vµšš}v]všZPŒ}µ‰]ošUšZ}šZŒŒ}µvµšš}v}(
the (same) group are empty. The user can select another button by clicking a different choice,
which empties the previous selection. This technique of selecting is referred to as mutually-
exclusive.
Windows
Events
The Paints
Windows
The most pervasive element used in GUIs is the window. It could be considered to be a
metaphor for a "window" into the computer, but it is dependent on idioms for its operation. The
video screen itself can be considered to be a window into the computer. In character-based
interfaces it was the only window into the computer and was not really thought of as such. The
GUI paradigm, however, allowed for the user to see into multiple areas within the computer,
and the window metaphor was born.
Events
An "event," with respect to user interfaces, is any function initiated by the user. Selecting
something from a pull-down menu, clicking a button or a checkbox, and closing a window are all
examples of events.
It is a common misconception that events were born of the GUI age. In fact character-based
interfaces accommodated myriad events, but they were generally performed by complex
keystrokes such as control-shift-F6. An application such as WordPerfect would usually provide a
so-called "quick reference card" to aid the users in remembering which keystroke combination
initiated which event.
By visually presenting all of the possible events to the user, the need for a quick reference card
vanished. Also, the advent of pointing devices such as the mouse allowed entirely new kinds of
events to be implemented, such as "drag and drop."
Pull-down menus are menus that the user can "pull down" from the menu bar that traverses the
top of the screen. On some platforms these are called "drop down" menus because the user
does not need to hold the mouse button down in order for the menu to remain visible.
Push Buttons
A push button is simply a rectangle that appears on a panel with some sort of label or icon inside
it. The metaphor is to any button you'd find in the physical world, such as on a calculator or
telephone. Clicking on a push button will cause some sort of action will occur. Sometimes a
panel will have a "default" button, which appears with an enhanced border. This button will be
activated when the Enter key is pressed.
Icons
Icons are small pictures that are generally represent objects in the physical world or are used as
metaphors for functions or actions. Icons can be "clickable" and used to initiate an event. These
are sometimes referred to as "buttcons," as they become hybrids of buttons and icons.
Checkboxes
A checkbox is a small square with some sort of label beside it. Clicking on a checkbox will cause
an 'X' to appear in the box. Clicking it again will cause the 'X' to disappear.
Radio Buttons
A radio button is small circle with some sort of label beside it. A black dot inside the circle
indicates that the button is selected. The absence of a dot indicates that the button is
unselected. The metaphor with radio buttons is to old-fashioned car radios that used
mechanical buttons to change the radio station. When one button is pushed in, whatever other
button had been pushed in will pop out. In this way, only one button can be pushed in at a time.
Similarly, with the radio button form object, clicking on one option will cause whatever other
option that had been selected to become unselected.
Scrolling Lists
Scrolling lists are lists of elements that appear in a box with a scroll bar on the side, allowing the
user to scroll through the elements in the list. In this way the list can contain more elements
than can be displayed at any one time. Clicking on an element in the list will cause that element
to become selected, as shown below.
Optionally, a list can allow multiple selections. These can either be contiguous or discontiguous,
as shown below (respectively).
Text Field
A text field is simply a space in which the user can type text. Text fields are usually contained
within a rectangle, but it could just be space on a panel that can accept text.
If a text field is contained within a rectangle, it can optionally have a scroll bar to allow it to
contain more information than can be displayed at any one time.
Popup List
A popup list appears initially as a box containing some sort of label. When the user clicks on the
box, a larger box containing a variety of choices will "pop up." By moving the mouse, the user
can cause another choice to become selected. When the user releases the mouse, the popup
menu will disappear leaving currently selected choice to appear in the box.
Spin Boxes
A spin box is a box containing some value, with up and down arrows on one side and generally a
label on the other. By clicking the up or down arrow, different values will appear in the box. The
entire range of choices can be cycled through if the up or down arrows are clicked enough
times. Whatever value appears in the box is the value that is selected at that time.
Sliders
A slider is a long box with a control that the user is able to slide one way or the other. Often a
slider will have an arrow button at either end to allow the user to adjust the slider one unit at a
time. Also there is often a text field to the side of the slider that will indicate the value that the
slider is currently set on and allow the user to enter a specific value.
Unit IV:
Do not use
jargon
hyphenated words
Use
positive terms
complete words
consistent words
A help facility
Contextual help
Task-oriented help
Reference help
Wizards
© Einstein College of Engineering
CS1015 User Interface Design
Hints or tips
International Considerations
Localization
Cultural Considerations
Writing Text
Using Images and Symbols
Requirements Determination and Testing
Accessibility
Visual Disabilities
Hearing Disabilities
Physical Movement Disabilities
Speech or Language Disabilities
Cognitive Disabilities
Seizure Disorders
INTERNATIONALIZATION
Internationalization
Power distance
Individualism (versus collectivism)
Masculinity (versus feminity)
Uncertainty avoidance
Long-term orientation (versus short term)
Words and Text
Definition
© Einstein College of Engineering
CS1015 User Interface Design
Objective
Utilities
Ensure compatibility with screen-review utilities
Ensure compatibility with screen-enlargement utilities
Screen Components
Include meaningful screen and window titles
Provide associated captions or labels for all controls, objects, icons, and
graphics, including graphical menu choices
Provide a textual summary for each statistical graphic
Allow for screen element scalability
Support system settings for high contrast for all user interface controls and
client area content
tZv ^Z]PZ }všŒš_ šš]vP ] šo]ZU Z] vÇ ]uP ŒÁv
behind text to maintain screen information legibility
Screen Components (Continued)
Avoid displaying or hiding information based on the movement of the pointer
Exception: Unless part of the standard interface (ToolTips, for example)
Keyboard
Provide a complete keyboard interface
Provide a logical order of screen navigation
Color
Use color as an enhancing design characteristic
If used:
Select color combinations that can be discriminated
Ensure the lightness contrast between foreground and background
color is high
Increase the lightness contrast between colors at each end of the color
spectrum (blues and reds)
Avoid combining dark colors from the middle of the spectrum with light
colors at either end
Create the color combinations based on the system colors for window
components
© Einstein College of Engineering
CS1015 User Interface Design
Use elements that do not blink or flicker at rates between frequency ranges of 2 Hz and
55 Hz
Minimize the area of the screen that is flashing
Avoid flashing that has a high level of contrast between states
Provide an option to enable users to slow down or disable screen
Web Page Accessibility Design
Pages
Provide a simple and consistent layout
Place important information at page top
© Einstein College of Engineering
CS1015 User Interface Design
Prioritize information
Avoid moving or changing text
Streamline page design
Simplify navigation
Optimize search
Usability for Senior Citizens
Test all aspects of accessibility as part of the normal system testing process
Icons:
Kinds of Icons
Characteristics of Icons
Influences on Icon Usability
Choosing Icons
Multimedia
Images
Photographs/Pictures
Diagrams
Drawings
familiar
simple
consistent
direct
efficient
discriminable
Choosing Images:
If used properly, it can emphasize the logical organization of information, facilitate the
discrimination of screen components, accentuate differences among elements, and
make displays more interesting
Create groupings
Kinds of Icon
Effective: 24 x 24 or 26 x 26 in 32 x 32 icon
48 x 48 pixels
16- and 256-color versions
Use colors from the system palette
Use an odd number of pixels along each side
Provides center pixel around which to focus design
Minimum sizes for easy selection:
With stylus or pen: 15 pixels square
With mouse: 20 pixels square
With finger: 40 pixels square
Provide as large a hot zone as possible
Choosing Images
Use existing icons when available
Use images for nouns, not verbs
Use traditional images
Consider user cultural and social norms
Creating Images
Create familiar and concrete shapes
Create visually and conceptually distinct shapes
Incorporate unique features of an object
Do not display within a border
Clearly reflect objects represented
Simply reflect objects represented, avoiding detail
Create as a set, communicating relationships to one another
through common shapes
Provide consistency in icon type
Create shapes of the proper emotional tone
Drawing Images
Provide consistency in shape over varying sizes
Do not use triangular arrows in design to avoid confusion with other system symbols
When icons are used to reflect varying attributes, express those attributes as
meaningfully as possible
Provide proper scale and orientation
Use perspective and dimension whenever possible
Accompany icons with labels to ensure intended meaning
Icon Animation and Audition
Animation
Use:
To provide feedback
For visual interest
Dl]š]všŒŒµ‰š]o}Œ]v‰vvš}(µŒ[‰Œ]uŒÇ]všŒš]}v
Do not use it for decoration
Permit it to be turned off by the user
For fluid animation, present images at 16 or more frames per second
Audition
Multimedia:
Purpose of Graphics
Navigational
To identify links that may be followed
Representational
To illustrate items mentioned in text
Organizational
To depict relationships among items mentioned in text
Explanative
To show how things or processes work
Decorative
To provide visual appeal and emphasis
Graphics
Use graphics to
Supplement the textual content, not as a substitute for it
}vÀÇ ]v(}Œuš]}v šZš v[š ((š]ÀoÇ Æ‰Œ
using text
Enhance navigation through
Presenting a site overview
Identifying site pages
Identifying content areas
Disadvantages:
Expensive to produce
Slow to download
Small and difficult to discern detail
Guidelines:
Never automatically download a video into a page
Create short segments
Provide controls: playing, pausing, and stopping
Consider using:
Existing video
Audio only
A slide show with audio
Diagrams
Uses:
Show the structure of objects
Show the relationship of objects
Show the flow of a process or task
Reveal a temporal or spatial order
Kinds:
Flow charts
Cause and effect charts
Gantt charts
Entity relationship charts
Organization charts
Network diagrams
Parts:
Shapes
Labels
Lines
Guidelines:
Provide simple diagrams
Provide cutaway diagrams or exploded views to illustrate key points
Drawings
Use when some parts need emphasize or representation
Guidelines:
Provide simple drawings showing minimal detail
Provide a link to a complete drawing
Animation
Uses:
Explain ideas involving a change in time or position
Illustrate the location or state of a process
Provide feedback
Show continuity in transitions
Enrich graphical representations
Aid visualization of 3-D structures
Attract attention
Disadvantages:
Very distracting
Can potentially create problems for people with some disabilities
Slow loading
Guidelines:
Use only when an integral part of the content
Introduce animation
Create short segments
Provide a freeze frame and stop mode
Avoid distracting animation
Audition
Uses:
Supplement to text and graphics
Establish atmosphere
Create a sense of place
Teach
Sample
For users:
With disabilities
In eye-busy and hands-busy situations
Without access to keyboard and/or monitor
Advantages:
Does not obscure information on the screen
Shorter downloading time than video
Disadvantages:
Combining Mediums
Combinations
Use sensory combinations that work best together:
Auditory text with visual graphics
Screen text with visual graphics
Integration
Closely integrate screen text with graphics
Relevance
Both the visual and auditory information should be totally relevant to the task
being performed
Presentation:
Visual and auditory textual narrative should be presented simultaneously, or the
visuals should precede the narrative by no more than 7 seconds
To control attention, reveal systematically
Limit elements revealed to one item at a time
For related elements reveal sequentially
Show action initiation as well as result
Avoid animation that distracts from other more important information
Consider download times when choosing media
Testing
Thoroughly test all graphics for:
Legibility
Comprehensibility
Acceptance
Coloring:
}o}Œ[ZŒšŒ]š]
What color is
Uses of color
Possible problems and cautions
Color connotations
Results of color research
Color and human vision
How to use color
How to choose the proper colors for:
Textual graphic screens
Statistical graphics screens
Web screen text and images
ColorvWhat Is It?
Results from the stimulation of the proper receptor in the eye by a received light wave
A color name is a learned phenomenon based on previous experiences and associations
The visual spectrum of wavelengths to which the eye is sensitive ranges from about 400
to 700 millimicrons
Three properties:
HuevSpectral wavelength composition of a color such as green or red
Chroma or saturationvPurity of a color in a scale from gray to the most vivid
version of the color
Value or intensityvRelative lightness or darkness of a color in a range from
black to white
Primary colors: red, green, and blue
Their wavelengths additively combine in pairs to produce magenta, cyan, and
yellow, and all the other visible colors in the spectrum
Color Uses:
Use color to assist in formatting a screen:
Relating or tying elements into groupings
Breaking apart separate groupings of information
Associating information that is widely separated
Highlighting or calling attention to important information by setting off from
other information
Use color as a visual code to identify
Screen components
Logical structure of ideas, processes, sequences
Sources of information
Status of information
Use color to
Realistically portray natural objects
Increase screen appeal
Choosing Colors:
Colors In Context:
Usage
Design for monochrome first
Useful:
For people with a color-viewing deficiency
On monochrome displays
In conditions where ambient lighting distorts the perceived color
If the color ever fails
Use colors conservatively
Do not use color where other identification techniques, such as location, are
available
Yellow
To provide status or background information, use cool colors:
Green
Blue
Violet
Purple
Conform to human expectations
In the job
In the world at large
Location
In the center of the visual field, use, red and green
For peripheral viewing, use blue, yellow, black, and white
Use adjacent colors that differ by hue and value or lightness
Ordering
Order colors by their spectral position:
Red
Orange
Yellow
Green
Blue
Indigo
Violet
Foregrounds
Use colors that highly contrast with background color
For text or data, use:
Black
Desaturated or spectrum center colors: white, yellow, or green
Warmer more active colors
Use colors that possess the same saturation and lightness
To emphasize an element, highlight it in a light value of the foreground color, pure
white, or yellow
To de-emphasize an element, lowlight it in a dark value of the foreground color
Backgrounds
Use a background color to organize a group of elements into a unified whole
Use colors that do not compete with the foreground
Use:
Light-colored backgrounds of low intensity: off-white or light gray
Desaturated colors
Cool, dark colors such as blue or black
Colors on the spectral extremes
Three-Dimensional Look
Use at least five colors or color values to create a 3-D look on a screen.
Background:
Control itself and window on which it appears
Foreground:
Captions and lines for buttons, icons, and other objects (usually black or
white)
Selected mode:
Color used when the item is selected
Top shadow:
Bezel on the top and left of the control
Bottom shadow:
Bezel on the bottom and right of the control
Color Palette, Defaults, and Customization
Permit users to customize their colors
Provide a default set of colors for all screen components
Provide a palette of six or seven foreground colors
Provide 2 to 5 values or lightness shades for each foreground color
Provide a palette of six or seven background colors
Never refer to a screen element by its color
Gray Scale
For fine discriminations use a black-gray-white scale
Recommended values are white, light gray, medium gray, dark gray, black
Text in Color
When switching text from black to color:
Double the width of lines
Use bold or larger type:
If originally 8 to 12 points, increase by 1 to 2 points
If originally 14 to 24 points, increase by 2 to 4 points
Check legibility by squinting at text
Too-light type will recede or even disappear
Monochromatic Screens
At the standard viewing distance, white, orange, or green are acceptable colors
At a far viewing distance, white is the best choice
Over all viewing distances, from near to far, white is the best choice
Consistency
Be consistent in color use
Considerations for People with Color-Viewing Deficiencies
Use color combinations that can be easily discriminated
Ensure lightness contrast between foreground and background is high
Increase lightness contrast between colors on either end of visual spectrum (blues and
reds)
Avoid combining light colors from either end of spectrum with dark colors from middle
Use tools to see what screen/pages will look like to color deficient viewers
Cultural, Disciplinary, and Accessibility Considerations
Consider the impact of specific colors on
Users of various cultures
Users of various disciplines
Users relying on accessibility utilities
Choosing Colors for Textual Graphic Screens
Overview
Height
To convey an impression of height, use desaturated, light colors
Depth
To convey an impression of depth, use saturated, dark colors
Concentration level
To convey an impression of concentration level:
High: Saturated colors
Low: Desaturated colors
Magnitude of change:
To convey an impression of magnitude of change:
Lowest: Short-wavelength (blue) colors
Highest: Long-wavelength (red) colors
Actions:
To convey an impression of action:
Required: Long-wavelength (red) colors
Not required: Short-wavelength (blue) colors
Order:
To convey an impression of order with color:
Low end of continuum: Short-wavelength (blue)
High end of continuum: Long-wavelength (red)
When displaying an array of ordered colors, position:
Short-wavelength colors at left side or bottom
Long-wavelength colors at right side or top
To convey impression of order with value or lightness, use the lightness
order of a color (darkest to lightest or vice versa)
Neutrality:
To convey impression of neutrality, use black, gray, and white
Web Pages:
Choosing Colors
Purpose
Color must always have a meaningful purpose
Palette
Use the browser 216-color palette
Presentation
Minimize the number of presented colors
Always consider color in context
Use similar or the same color schemes throughout
For foregrounds: Use black or strong colors for text and headings
For backgrounds: Use weaker contrasting colors such as off-white or
light gray
Use a uniform color in large areas
The smaller the element, the more contrast is required between it and its
background
Overview
Organizing and laying out graphical and Web screens to encourage accurate:
Information comprehension
Control execution
Organizing for meaningfulness and efficiency
Creating groupings
Providing alignment and balance
Provide consistency
t]šZ‰Œ}v[ƉŒ]vvµošµŒo}vÀvš]}v
Internally within a system
Externally across systems
Visual identity or theme
Creating Groupings
General
Provide groupings of associated elements
Elements of a radio button or check box
Two or more related fields or controls
Create groupings of 5 degrees of visual angle
White space
Provide adequate separation of groupings through the liberal use of white space
Leave adequate space:
Around groups of related controls
Between groupings and window borders
The space between groupings should be greater than the space between fields
within a grouping
Headings
Provide grouping headings that meaningfully and concisely describe the nature
of the group
Borders
Enhance groupings through incorporation of borders around
Elements of a single control
Groups of related controls or fields
Individual control borders should be visually differentiable from borders
delineating groupings
Provide a border consisting of a thin line around single controls
Provide a border consisting of slightly thicker line around groups of
fields or controls
Do not place individual borders around single
Entry fields
List boxes
Combination boxes
Spin boxes
Sliders
Do not place borders around command buttons
Control Borders
Incorporate a thin single-line border around the elements of a selection control
Section Borders
Incorporate a thicker single-line border around groups of related entry or selection
controls
Dependent Controls
Position a conditional control or controls
To the right of the control to which it relates
Alternatively, position it below the control to which it relates
Either:
Display these conditional controls in a subdued or grayed out manner
When a control is relevant, return it to normal intensity
Do not display a conditional control until the information to which it relates is
set
Inscribe a filled-in arrow between the selected control and its dependent controls to
visually relate them to each other
Aligning Screen Elements
Minimize alignment points on a window
Vertically
Horizontally
Balancing Screen Elements
Create balance by
Equally distributing controls,spatially, within a window
Aligning borders whenever possible
Control Navigation
Tab/arrow keys
Use the Tab key to move between operable window controls, in the logical
order of the controls
Do not tab to field captions/labels
Radio buttons
Use arrow keys to move through radio buttons within a single control
Check boxes
Use the Tab key to move between check boxes, when they are independent
controls
Within a border or group box, use arrow keys to move between the check boxes
since they appear as a logical group
List boxes
Use arrow keys to navigate within list box choices
Command buttons
For exiting or expanding/feature dialog command buttons, tab to it at the end
of the screen control tabbing sequence
For a command button with a contingent relationship to a control in the
window body, tab to it at the logical point in the tabbing sequence within the
window
Keyboard equivalents
Use keyboard equivalents (mnemonics) for direct access to each control,
whenever possible
Mnemonic designations must be unique within a window
Window Guidelines
Organization
Organize windows to support user tasks
Present related information in a single window
Support the most common tasks in the most efficient sequence of steps
Use:
Primary windows to:
Copyright
Date of creation
Links to:
Skip to main content
Other major sections of site
Home Page
Index Page
Site Map or Directory
Next Page
Previous Page
Unit V:
Usability:
Dimensions
Effective
Efficient
Engaging
Error tolerant
Easy to learn
Exploratory Evaluations
Explore prototype interface design features
Gather feedback on preliminary designs
Verify assumptions derived during requirements determination
Assessment Evaluations
Establish how well user tasks are supported
Determine what usability problems may exist
Comparative Evaluations
Compare two or more design alternatives
Validation Evaluations
Ascertain whether a usability objective is achieved
Prototypes:
© Einstein College of Engineering
CS1015 User Interface Design
Vehicles for
Exploration
Communication
Evaluation
Purpose
Obtain user input in design
Provide feedback to designers
Roles
Communication not accuracy or thoroughness
Enables design to be better visualized
Provides insights into how the software will look and work
Aids in defining tasks, their flow, the interface itself, and
its screens
Kinds
Description
Screen sketches created by hand
Focus is on design, not 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
Easily portable
Fast to modify and iterate
A rough approximation often yields more substantive critical comments
Easier to comprehend than functional specifications
Can be used to define requirements
Disadvantages
Only a rough approximation
Limited in providing an understanding of navigation and flow
A demonstration, not an exercise
Driven by a facilitator, not the user
Limited usefulness for a usability test
© Einstein College of Engineering
CS1015 User Interface Design
Description
Interface components (menus, windows, and screens) constructed of common
paper technologies (Post-It notes, transparencies)
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
Disadvantages:
Only a rough approximation
A demonstration, not an exercise
Driven by a facilitator, not the user
Limited usefulness for usability testing
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 detailed specification for writing code
A vehicle for data collection
Disadvantages
May solidify the design too soon
© Einstein College of Engineering
CS1015 User Interface Design
May creššZ(oƉšš]}všZššZ^ŒošZ]vP_]}voÇZ}Œšš]uÁÇ
More expensive to develop
More time-consuming to create
Not effective for requirements gathering
Not all of the functions demonstrated may be used
Not practical for investigating more than two or three approaches
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
Otherwise, generally the same as those of programmed facades
Disadvantages
Generally the same as for programmed facades
Fidelity
Prototype fidelity seems to have no impact on the identification of usability problems
Combinations of these prototypes should be used throughout the entire system
development cycle
Tests:
A tool to measure something, including:
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
Guidelines and standards review
ŒÀ]Á }( šZ ]všŒ( ]v šŒu }( v }ŒPv]Ìš]}v[ švŒ v ign
guidelines
Heuristic evaluation
A detailed evaluation of a system by interface design specialists to identify
problems
Cognitive walkthroughs
Reviews of the interface in the context of tasks users perform
Think-aloud evaluations
Users perform specific tasks while thinking aloud
Usability test
An interface evaluation under real-world conditions
Classic experiments
An objective comparison of two or more prototypes identical in all aspects
except for one design issue
Focus groups
A discussion with users about interface design prototypes or tasks
Guidelines and Standards Review
Description:
ŒÀ]Á }( šZ ]všŒ( ]v šŒu }( v }ŒPv]Ìš]}v[ švŒ v ]Pv
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
Heuristic Evaluation
Description:
A detailed evaluation of a system by interface design specialists to identify
problems
Advantages:
Easy to do
Relatively low cost
}v}šÁšµŒ[š]u
Can identify many problems
Disadvantages:
Evaluators must possess interface design expertise
Evaluators may not possess an adequate understanding of the tasks and user
communities
Difficult to:
Identify system wide structural problems
Uncover missing exits and interface elements
Identify most important of all identified problems
Does not provide systematic way to generate solutions to problems
Project overview
Checklist of heuristics
Provide briefing to evaluators to:
Review the purpose of the evaluation session
Preview the evaluation process
Present the project overview and heuristics
Answer any evaluator questions
Provide any special evaluator training that may be necessary
Conducting the session:
Have each evaluator review the system alone
The evaluator should:
Establish own process or method of review
Provide usage scenarios, if necessary
Compare findings with usability principles list
Identify any other relevant problems / issues
Make at least two passes through the system
Detected problems should be related to the specific heuristics they violate
Comments are recorded either:
By evaluator
By observer
The observer may answer questions and provide hints
Restrict the length of the session to 2 hours
After the session:
Hold a debriefing session including observers and design team members where:
Each evaluator presents problems detected and the heuristic it violated
A composite problem listing is assembled
Design suggestions for improving the problematic aspects of system are
discussed
After the debriefing session:
Generate a composite list of violations as a ratings form
Request evaluators to assign severity ratings to each violation
Analyze results and establish a program to correct violations and
deficiencies
Cognitive Walkthroughs
Description:
Reviews of the interface in the context of tasks users perform
Advantages:
Allow a clear evaluation of the task flow early in the design process
Do not require a functioning prototype
Low cost
Can be used to evaluate alternate solutions
Can be performed by developers
More structured than a heuristic evaluation
h(µo(}Œ]vP^Ɖo}Œš}ŒÇoŒv]vP_
Disadvantages:
Tedious to perform
May miss inconsistencies and general and recurring problems
Guidelines:
Needed to conduct the walkthrough are:
General description of proposed system users and their relevant
knowledge
Specific description of one or more core or representative tasks
to be performed
List of correct actions to complete each task
Review:
Several core or representative tasks across a range of functions
Proposed tasks of particular concern
Developers must be assigned roles of:
Scribe to record results of the action
Facilitator to keep the evaluation moving
Start with simple tasks
}v[šPš}PP}Ávuv]ng solutions
Limit session to 60 to 90 minutes
Think-Aloud Evaluations
Description:
Users perform specific tasks while thinking aloud
Comments are recorded and analyzed
Advantages:
Utilizes actual representative tasks
WŒ}À]]v]PZš]vš}šZµŒ[Œoning
Disadvantages:
May be distracting and unnatural for participants
Can slow participants thought processes
Can be exhausting for participant
Guidelines:
Develop:
Several core or representative tasks
Tasks of particular concern
Limit session to 60 to 90 minutes
Usability Test
Description:
An interface evaluation under real-world or controlled conditions
Measures of performance are derived for specific tasks
Problems are identified
Advantages:
Utilizes an actual work environment
Identifies serious or recurring problems
Disadvantages:
High cost for establishing facility
Requires test conductor with interface expertise
Emphasizes first-time system usage
Poorly suited for detecting inconsistency problems
Performance and Process Measures
Performance Data
Focuses on how well users can do their tasks
Completion rates
Completion times
Error rates
Process Data
Comprised of measures about what users are doing during task completion
Participant's self reports
Observation of participant behavior
Eye movement tracking
Classic Experiments
Description:
An objective comparison of two or more prototypes identical
in all aspects except for one design issue
Advantages:
Objective measures of performance are obtained
Usability laboratory
In an informal environment
Office or conference room
In the field at the actual work location
Unmoderated remote testing
Pilot Test
Choose a participant
Design and assemble the test environment
Run the pilot test
Analyze and interpret the data to see whether anything important has been overlooked
Recruit test participants at conclusion of
the pilot test
Usability Test Guidelines
Before starting the test:
Ensure that all test materials and equipment are available
Explain that the objective is to test the software, not the participants
Explain how test materials and records will be used
If a consent agreement is to be signed, explain all information on it
If verbal protocols will be collected, let participants practice thinking aloud
Ensure that:
oo‰Œš]]‰vš[questions are answered
All participants are comfortable with all procedures
During the test:
Minimize the number of people who will interact with the participants
If observers will be in the room, limit them to two or three
Provide a checklist for recording:
Times to perform tasks
Errors made in performing tasks
Unexpected user actions
System features used/not used
Difficult/easy-to-use features
System bugs or failures
Record techniques and search patterns that participants
employ when attempting to work through a difficulty
If participants are thinking aloud, record assumptions and inferences being
made
Record the session with a tape recorder or video camera
Do not interrupt participants unless absolutely necessary
If participants need help, provide some response
Provide encouragement or hints
Give general hints before specific hints
Record the number of hints given
Watch carefully for signs of stress in participants:
Sitting for long times doing nothing
Blaming themselves for problems
Flipping through documentation without really reading it
The most simple search involves a free text search. This is based on a word or phrase of
your choice appearing anywhere in the source material. Most bibliographic databases
have their own individual controlled language which is composed of keywords. These are
organised in a structured hierarchy (Thesaurus). This demonstrates the relationship
between them, and enables the user to include all the terms that are relevant to their
search. The Thesaurus permits a more controlled and detailed search to be undertaken
because keywords are used in the indexing of the database.
Boolean Logic
If the only thing you learn about effective searching is how to use Boolean logic, you will not go
(ŒÁŒ}vPX}}ovo}P]Œlµiš}Áv]vš}}v‰švµ^}‰Œš}Œ_µZW
For example:
Salmonella AND eggs will retrieve records that contain both terms
Salmonella OR eggs will retrieve all records containing a reference to either
salmonella or eggs
Salmonella NOT eggs will retrieve records that contain Salmonella but have no
reference to eggs
}}ovo}P]v]u‰Œ}ÀÇ^vš]vP_ÁZ]Z]vÀ}oÀšZµ}(‰ŒvšZš}
combine several search requests, for example:
Not all search engines support Boolean logic but most academic resources (journals,
bibliographic databases, reference works) will.
Some search engines will support phrase searching which looks for a specifc term. For
example:
^ou}voo]vPP_Á]oo}voÇ(]vŒ}ŒÁ]šZšZšÆššŒuX
Proximity
Not all search engines recognise proximity operators but a few search engines will have
advanced features where proximity searching can be deployed. The most common proximity
}‰Œš}Œ]^EZ_oo}Á]vPÇ}µš}‰](ÇšÁ}šŒušZšv(}µvlose together.
Wildcards
Wildcards are not supported by all search engines but can be used to represent a character or
number of characters. They are useful when you are either not sure how to spell something or
when you want to find records with different word endings. Different search engines use
]((ŒvšÇu}oµššZu}š}uu}vÁ]oŒŒ^Ž_v^M_X(}ŒÆu‰oW
poison* will retrieve all records that include poison, poisons, poisoned or poisoning
col*r will retrieve all records that contain either colour or color
wom*n will retrieve all records that contain either woman or women
Field Searching
Electronic sources of information have a f i eld structure . Not all sources use the same fields. You
will therefore need adapt your search accordingly. Field searching is very precise and powerful
but not all sources allow you to search in this way
Depending on the database or information resource you are using, you may be able to refine
your search, save your search, set up search alerts which will run a search for you and email you
the results on a regular basis.
Search tools and user guides can be found either on your library website or may be made
available by the resource provider. These are well worth using in order to get the most out of
your searching.
The IU Libraries provide access to many subscription information sources often called databases.
Because many of the databases the Libraries subscribe to are from different companies their
interfaces vary. The following searching techniques will work in most databases. To use any
database effectively, read the screens and use the help functions to find the answers to your
questions.
Boolean Searching
Most databases allow the user different searching methods. One of the most common searching
methods is Boolean Searching, also called key word searching. This type of search tells the
database to retrieve all of the records in the database which cont ain a word or a set of words.
You can alter the results by using Boolean Operators which are the words AND, OR and NOT.
See below for an explanation of these terms Boolean Operators
AND
OR
Example: caffeine or coffee
will retrieve records which contain the word caffeine or the word coffee. This operator is used
to broaden the number of records retrieved.
NOT
Example: chocolate not cake
will retrieve records which contain only the word chocolate but not the word cake. This
operator is used to reduce the number of records retrieved.
Truncation
Use Truncation to find different forms of words in a Boolean or keyword search. Some
databases use the asterisk and others use the question mark. Check the help function of the
database you are using to learn the truncation symbol.
Example: employ
will retrieve records which contain the words: employ, employment, employs, employee,
employer in a record.
You can combine truncated terms with other words using Boolean Operators.
Example: employ and education
will retrieve records which include the various forms of employ and the word education.
Nesting
Use Nesting to preserve the "logic" of your Boolean Search. Nesting is the use of parenthesis to
put your search words into sets.
Example: success and (education or employment)
will retrieve records which contain the word success and the word education or the word
employment. Nesting is often used when search terms have similar meanings:
Example: education and (employment or jobs)
Stop words
Stop words are commonly used words that will automatically stop a computer keyword search
because they occur too frequently in records. Stop words are usually listed in the help screens of
whatever database you are using. Some stop words are: the, an, at, for, from, then. When
constructing a keyword search, choose the most important words.
Example: If you want to find information about "What are the effects of Global Warming on
agriculture?"
Your keywords are: global warming, effects, agriculture . The words what, is, of, the, are not
descriptive of your topic.
Visualization:
Visualization is any technique for creating i mages , d i agrams ,or an i mat i ons to
communicate a message. Visualization through visual imagery has been an effective way to
communicate both abstract and concrete ideas since the dawn of man. Examples from history
include cave paint i ngs , Egypt i anh i erog l yphs ,Greek geometry , and Leonardo da Vinc i's
revolutionary methods of technical drawing for engineering and scientific purposes.
Overview
The use of visualization to present information is not a new phenomenon. It has been used in
maps, scientific drawings, and data plots for over a thousand years. Examples
from cartography include Pto l emy's Geograph i a (2nd Century AD), a map of China (1137 AD),
and M i nard 's map (1861) of Napo l eon' s invasion of Russia half a century earlier. Most of the
concepts learned in devising these images carry over in a straight forward manner to computer
visualization. Edward Tufte has written two critically acclaimed books that explain many of these
principles.
Computer graphics has from its beginning been used to study scientific problems. However, in
its early days the lack of graphics power often limited its usefulness. The recent emphasis on
visualization started in 1987 with the special issue of Computer Graphics on Visualization
in Sc i ent i fic Comput i ng . Since then there have been several conferences and workshops, co-
sponsored by the I EEE Computer Soc i ety and ACM SIGGRAPH , devoted to the general topic, and
special areas in the field, for example volume visualization.
Most people are familiar with the digital animations produced to present meteoro l og i cal data
during weather reports on telev i sion, though few can distinguish between those models of
reality and the satel li te photos that are also shown on such programs. TV also offers scientific
visualizations when it shows computer drawn and animated reconstructions of road or airplane
accidents. Some of the most popular examples of scientific visualizations are computer-
generated images that show real spacecraft in action, out in the void far beyond Earth, or on
other p l anets. Dynamic forms of visualization, such as educat i onal an i mat i on or t i mel i nes , have
the potential to enhance learning about systems that change over time.
Apart from the distinction between interactive visualizations and animation, the most useful
categorization is probably between abstract and model-based scientific visualizations. The
abstract visualizations show completely conceptual constructs in 2D or 3D. These generated
shapes are completely arbitrary. The model-based visualizations either place overlays of data on
real or digitally constructed images of reality, or they make a digital construction of a real object
directly from the scientific data.
Scientific visualization is usually done with specialized software , though there are a few
exceptions, noted below. Some of these specialized programs have been released as Open
source software, having very often its origins in universities, within an academic environment
where sharing software tools and giving access to the source code is common. There are also
many proprietary software packages of scientific visualization tools.
Models and frameworks for building visualizations include the data flow models popularized by
systems such as AVS, IRIS Explorer, and VTK toolkit, and data state models in spreadsheet
systems such as the Spreadsheet for Visualization and Spreadsheet for Images.
Some 3D Visualization samples can be seen at www.3dvisua li zat i on.com . au
© Einstein Col lege of Engineering
CS1015 User Interface Design
Applications of visualization
and predict i ons by using various complementary visualizations. See also: P i cture
dict i onary , Visua l dict i onary
Product Visualization
Product Visualization involves visualization software technology for the viewing and
manipulation of 3D models, technical drawing and other related documentation of
manufactured components and large assemblies of products. It is a key part of Product L i fecyc l e
Management . Product visualization software typically provides high levels of photorealism so
that a product can be viewed before it is actually manufactured. This supports functions ranging
from design and styling to sales and marketing. Technical visualization is an important aspect of
product development. Originally techn i cal draw i ngs were made by hand, but with the rise of
advanced computer graph i cs the drawing board has been replaced by computer-aided
design (CAD). CAD-drawings and models have several advantages over hand-made drawings
such as the possibility of 3-D modeling, rap i d prototyping and simulat i on
Visual communication
Visua l commun i cat i on is the communicat i on of i deas through the visual display of i nformat i on .
Primarily associated with two d i mensiona l i mages ,it includes: alphanumerics , art , signs ,
and electron i c resources. Recent research in the field has focused on web design and graphically
oriented usab ili ty .
Visual analytics
Visua l analyt i cs focuses on human interaction with visualization systems as part of a larger
process of data analysis. Visual analytics has been defined as "the science of analytical reasoning
[2 ]
supported by the interactive visual interface" .
Its focus is on human information discourse (interaction) within massive, dynamically changing
information spaces. Visual analytics research concentrates on support for perceptual and
cognitive operations that enable users to detect the expected and discover the unexpected in
complex information spaces.
Technologies resulting from visual analytics find their application in almost all fields, but are
being driven by critical needs (and funding) in biology and national security.
Visualization techniques:
The following are examples of some common visualization techniques:
Constructing i sosurfaces
d i rect vo l ume rendering
Streaml i nes, streakl i nes, and path li nes
tab l e , matrix
charts (pie chart , bar chart , h i stogram , funct i on graph, scatter p l ot , etc.)
graphs (tree d i agram, network d i agram , flowchart , existent i al graph , etc.)
Maps
paral l e l coord i nates - a visualization technique aimed at multidimensional data
treemap - a visualization technique aimed at hierarchical data
Venn d i agram
T i mel i ne
Eu l er d i agram
© Einstein College of Engineering
CS1015 User Interface Design
Chernoff face
Hyperbo li c trees
brushing and li nking
C l uster d i agram or dendrogram
Ord i nogram
Hypermedia
Hypermedia is used as a logical extension of the term hypertext in which graphics,
audio, video, plain text and hyper li nks intertwine to create a generally non-linear medium of
information. This contrasts with the broader term mu l t i med i a , which may be used to describe
non-interactive linear presentations as well as hypermedia. It is also related to the field
[1 ]
of E l ectron i c li terature . The term was first used in a 1965 article by Ted Nelson .
The World Wide Web is a classic example of hypermedia, whereas a non-
interactive c i nema presentation is an example of standard multimedia due to the absence of
hyperlinks.
The first hypermedia work was, arguably, the Aspen Movie Map .
Atkinson's HyperCard popularized hypermedia writing, while a variety of literary hypertext
and hypertext works, fiction and nonfictions, demonstrated the promise of links. Most modern
hypermedia is delivered via electron i c pages from a variety of systems including Media
players, web browsers, and stand-alone app li cat i ons . Audio hypermedia is emerging with vo i ce
command dev i ces and vo i ce browsing .
Hypermedia development tools:
Hypermedia may be developed a number of ways. Any programming tool can be used to write
programs that link data from internal variables and nodes for external data files. Multimedia
development software such as Adobe Flash, Adobe D i rector , Macromedia Authorware , and
MatchWare Mediator may be used to create stand-alone hypermedia applications, with
emphasis on entertainment content. Some database software such as Visua l
FoxPro and Fi l eMaker Developer may be used to develop stand-alone hypermedia applications,
with emphasis on educational and business content management.
Hypermedia applications may be developed on embedded devices for the mobile and the D i g i tal
signage industries using the Scalab l e Vector Graph i cs (SVG) specification from W3C ( World W i de
Web Consort i um ). Software applications such as I kivo Animator and I nkscape simplify the
development of Hypermedia content based on SVG. Embedded devices such as i Phone natively
support SVG specifications and may be used to create mobile and distributed Hypermedia
applications.
Hyperlinks may also be added to data fi l es using most business software via the
limited script i ng and hyperl i nk i ng features
built in. Documentation software such as
the M i crosoft Office Su i te allows for hypertext links to other content within the same file, other
external files, and URL links to files on external f il e servers . For more emphasis on graphics
and page l ayout , hyperlinks may be added using most modern desktop pub li shing tools. This
includes presentat i on programs , such as M i crosoftPowerpo i nt, add-ons to print layout
programs such as Quark I mmedia , and tools to include hyperlinks in PDF documents such
as Adobe I nDesign for creating and Adobe Acrobat for editing. Hyper Pub li sh is a tool specifically
designed and optimized for hypermedia and hypertext management. Any HTML Ed i tor may be
used to build HTML files, accessible by any web browser. CD/DVD authoring tools such as DVD
Stud i o Pro may be used to hyperlink the content of DVDs for DVD p l ayers or web links when the
disc is played on a personal computer connected to the internet.
© Einstein College of Engineering
CS1015 User Interface Design
FLAn (Foreign Language Annotator) is a hypermedia editor for annotating foreign language texts
with various types of media such as text (definitions, translations, grammar notes, comments,
etc.), images, audio, video, animations, and Web links [ edit ]Hypermedia and Learning
There has been a number of theories concerning hypermedia and learning. One important claim
in the literature on hypermedia and learning is that it offers more control over the instructional
environment to the reader or student. Another claim is that it makes level the playing field
among students of varying abilities and enhances collaborative learning. A claim from
psychology includes the notion that hypermedia more closely models the structure of the brain,
in comparison with printed text.
WWW:
The World Wide Web, abbreviated as WWW and commonly known as the Web, is
a system of interlinked hypertext documents accessed via theI nternet . With a web browser , one
can view web pages that may contain text, images, videos, and other mu l t i media and navigate
between them via hyperl i nks. Using concepts from earlier hypertext systems, English engineer
and computer scientist Sir T i m Berners-Lee , now the Director of the World Wide Web
Consort i um , wrote a proposal in March 1989 for what would eventually become the World
Wide Web. At CERN in Geneva, Switzerland, Berners-Lee and Belgian computer scientist Robert
Cai lli au proposed in 1990 to use "HyperText ... to link and access information of various kinds as
a web of nodes in which the user can browse at will", and publicly introduced the project in
December.
Function:
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 app li 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 hyper li nk to that page or resource.
The web browser then initiates a series of communication messages, behind the scenes, in order
to fetch 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, which
then 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
v i ews or 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 page
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 pages
and perhaps to downloadable files, source documents, definitions and other web resources.
Such a collection of useful, related resources, interconnected via hypertext links is dubbed
© Einstein College of Engineering
CS1015 User Interface Design
a web of information. Publication on the Internet created what T i m Berners-Lee first called
the WorldWideWeb (in its original CamelCase , which was subsequently discarded) in November
1990.
Software Tools:
A programming tool or software development tool is
a program or app li cat i on that software developers use to create, debug, maintain, or otherwise
support other programs and applications. The term usually refers to relatively simple programs
that can be combined together to accomplish a task, much as one might use multiple
hand tools to fix a physical object.
History
The history of software tools began with the first computers in the early 1950s that
used li nkers , l oaders, and control programs.Tools became famous with Unix in the early 1970s
with tools like grep, awk and make that were meant to be combined flexibly with p i pes . The
term "software tools" came from the book of the same name by Brian Kern i ghan and P . J .
P l auger .
Tools were originally simple and light weight. As some tools have been maintained, they have
been integrated into more powerful i ntegrated development environments (IDEs). These
environments consolidate functionality into one place, sometimes increasing simplicity and
productivity, other times sacrificing flexibility and extensibility. The workflow of IDEs is routinely
contrasted with alternative approaches, such as the use of Un i x she ll tools with text editors
like Vim and Emacs .
The distinction between tools and applications is murky. For example, developers use simple
databases (such as a fi l e contain i ng a li st of i mportant values ) all the time as tools.However a
full-blown database is usually thought of as an application in its own right.
For many years, computer-assisted software eng i neering (CASE) tools were sought after.
[ ci t a ti on needed ]
Successful tools have proven elusive. In one sense, CASE tools emphasized design and
architecture support, such as for UML. But the most successful of these tools are IDEs.
The ability to use a variety of tools productively is one hallmark of a skilled software eng i neer .
Categories
Software development tools can be roughly divided into the following categories: