Chapter 2

CHAPTER 2
Differences Between GUI and Web interface design, and the differences
between printed page and Web design.
Characteristics of Graphical and Web User
Interfaces
Dr. Latesh Malik,
Professor, G.H. Raisoni College of Engg.
Dr. Latesh Malik,GHRCE

The Graphical User Interface
• A user interface, as recently described, is a
collection of techniques and mechanisms to
interact with something.
• primary interaction mechanism is a pointing
device
• user interacts with is a collection of elements
referred to as objects.
• People perform operations, called actions, on
objects. pointing, selecting, and manipulating.

The Popularity of Graphics
•Information floated in windows, small rectangular boxes
•Text could be replaced by graphical images called icons.
•menu bars and pull-downs.
•Screen objects and actions were selected through use of pointing
mechanisms,
•“desktop It is sometimes referred to as the WIMP interface:
windows, icons, menus, and pointers.

The Concept of Direct Manipulation
Direct manipulation
• The system is portrayed as an extension of the real world.
• Continuous visibility of objects and actions.
• Reminders of actions. Nelson (1980) described this concept
as “virtual reality,” a representation of reality that can be
manipulated. Hatfield (1981) is credited with calling it
“WYSIWYG” (what you see is what you get).
• Actions are rapid and incremental with visible display of
results.
• Incremental actions are easily reversible.

Indirect Manipulation
• The operation may be difficult to conceptualize
• graphics capability limited.
• space available limited.
• difficult remember all the necessary operations
• Indirect manipulation substitutes words and text,
such as pull-down or pop-up menus, The menu
itself, however, is a textual list of operations

Graphical Systems: Advantages and
Disadvantages
Symbols recognized faster than text.
icons, such as shape and color, are very useful for quickly
classifying objects,
Faster learning.
Faster use and problem solving.
More natural.
symbolic displays are more natural and advantageous because
the human mind has a powerful image memory.
Exploits visual/spatial cues. Visually thinking is believed to
be better than logical thinking.
Advantages

Fosters more concrete thinking.
There is no need mentally to decompose tasks into multiple
commands with complex syntactic form. Provides context.
providing a picture of the current context.
Fewer errors. More concrete thinking affords 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 languages.
Easily augmented with text displays.
Low typing requirements.

Disadvantages
Greater design complexity. Controls and basic alternatives must be
chosen from a pile of choices
choices Must be thoughtfully selected
Learning still necessary. The meanings of many words and icons may
not be known.
Lack of experimentally-derived design guidelines.
Inconsistencies in technique and terminology.
Differences in techniques
look and feel exist among various graphical system providers,
product differentiation considerations,
Not always familiar. Symbolic representations may not be as familiar as
words or numbers.

Human comprehension limitations.
The number of different icons that can be introduced is also
restricted because of limitations in human comprehension.
Production limitations. number of symbols limited.
Few tested icons exist. The consequences of poor or improper
design will be confusion and lower productivity for users.
Inefficient for touch typists.
Inefficient for expert users. there are more objects and
actions than can fit on the screen.
Not always the preferred style of interaction. Not all users
prefer a pure iconic interface.
Not always fastest style of interaction.
May consume more screen space.
Hardware limitations.

Characteristics of the Graphical User
Interface
Sophisticated Visual Presentation
•Displaying lines, including drawings and icons.
•displaying of a variety of character fonts, including different
sizes and styles
•The objective is to reflect visually on the screen the real
world of the user as realistically, meaningfully, simply, and
clearly as possible.

Pick-and-Click Interaction
The user moves the mouse pointer to the relevant element (pick)
and the action is signaled (click).

Restricted Set of Interface Options
Visualization
Effective visualizations can facilitate mental insights, increase
productivity, and foster faster and more accurate use of data.

Object Orientation
Container objects are objects to hold other objects. Device
objects represent physical objects in the real world,

Properties or Attributes of Objects
properties are text styles (such as normal or italics),
Actions
They manipulate objects in specific ways (commands)

Application versus Object or Data
Orientation
,An application-oriented approach takes an action: object approach, like this:
Action> 1. An application is opened (for example, word processing).
Object> 2. A file or other object selected (for example, a memo).
An object-oriented object: action approach does this:
Object> 1. An object is chosen (a memo).
Action> 2. An application is selected (word processing).
Views
Views are ways of looking at an object’s information.

Concurrent Performance of Functions
When applications are running as truly separate
tasks, the system may divide the processing power into time slices

The Web User Interface
Web interface design is essentially the design of navigation and the
presentation of information.
properly balancing the structure and relationships of menus, content,
and other linked documents or graphics.
The design goal is to build a hierarchy of menus and pages that feels
natural, Web interface design is difficult for a number of reasons.
underlying design language, HTML, Its scope of users was expected
to be technical.
information architecture and task flow, neither of which is easy to
standardize. Desire of many designers to use something simpleDr. Latesh Malik,GHRCE

Characteristics of a Web Interface
GUI versus Web Page Design
Devices. In GUI design, the characteristics of interface devices such as
monitors and modems are well defined, and design variations tend to be
restricted. (In GUI design, the difference in screen area between a laptop and a
high-end workstation is a factor of six, in Web page design this difference may
be as high as 100.) In GUI design, the layout of a screen will look exactly as
specified, Web page look will be greatly influenced by both the hardware and
software.
User focus. GUI systems are about well-defined applications and data, about
transactions and processes. Web use is most often characterized browsing and
visual scanning of information to find what information is needed.
Data/information. GUI data is typically created and used by known and
trusted sources, people in the user’s organization or reputable and reliable
companies and organizations. Web content is usually highly variable in
organization, and the privacy of the information is often suspect.
User tasks. GUI system users install, configure, personalize, start, use, and
upgrade programs Dr. Latesh Malik,GHRCE

Web users do things like linking to sites, browsing or reading pages,
filling out forms, registering for services, participating in transactions,
and downloading and saving things .
User’s conceptual space. A user’s access to data is constrained, Little
opportunity for meaningful organization of personal information exists.
Presentation elements. They are also generally standardized as a result of
the toolkits and style guides used. Elements are presented on screens
exactly as specified by the designer. Web systems possess two
components: the browser and page. Within a page itself, however, any
combination of text, images, audio, video, and animation may exist.
user can change the look of a page by modifying its properties.
Navigation. GUI users navigate through structured menus, lists, trees,
dialogs, and wizards. Web users Navigation is a significant and highly
visible concept with few constraints.
Context. Paths are restricted, and multiple overlapping windows may be
presented Web pages are single entities with almost unlimited
navigation paths. Contextual clues become limited or are hard to find.

Interaction. GUI interactions consist of such activities as clicking menu choices,
pressing buttons, selecting choices from list, keying data, and cutting, copying, or
Pasting. The basic Web interaction is a single click. This click can cause extreme
changes in context .
Response time. Compared to the Web, response times with a GUI system are fairly
stable,
Visual style. In GUI systems, the visual style is typically prescribed and constrained
by toolkit . little opportunity exists for screen personalization.
In Web page design, a more artistic, individual, and unrestricted presentation
style is allowed and encouraged.
System capability. GUI only limited in proportion to the capability
of the hardware , and the sophistication of the software. The Web is more constrained,
being limited by constraints imposed by the hardware, browser, and software.
Task efficiency. Consistency. GUI system design, an attempt is made to be
consistent
both within applications and across applications. In Web page design, the heavy
emphasis on graphics,a lack of design standards, and the desire of Web sites to
establish their own identities results in very little consistency across sites.

User assistance. User assistance is an integral part of most GUI systems applications.
little help that is available is built into the page.
Integration. A primary goal of most GUI applications is the seamless integration of
all pieces. interoperability between sites is almost nonexistent.
Security. security and data access can be tightly controlled, Attempts
to create a more trustworthy appearance are being made through the use of security
Levels and passwords to assure users that the Web is a secure environment.
Reliability. proportion to the degree of willingness of an organization to invest
resources A lack of reliability can be a great inhibitor of Web use.

Printed Pages versus Web Pages
Page size. A printed page can be designed as one entity,
completed final product will possess an integrated and
complete look. Web pages, are presented in pieces, user may
never see some parts of the page because their existence is not
known or require scrolling to bring into view. The design
implications: the top of a Web page is its most important
element, and signals to the user must always be provided
Page rendering. Printed pages are presented as complete
entities, Web pages elements are often rendered slowly,
depending upon things like line transmission speeds and page
content. Design implications: Provide page content that
downloads fast,

• Page layout. printed page, layout is precise .
Web pages layout is more of an approximation,
Design implication: Understand the restrictions
and design for the most common user tools
• Page resolution. Screen reading is slower
Design implication: Provide an easy way to print
long Web documents
• User focus. PP Present people with entire set of
information . Web pages present often with few
clues as to structure and sequence, and rarely with
a few cues as to length and depth
DI:Create easy to scan pages and limit the word
count , clear descriptions of where links lead, and
estimations of sizes of linked pages

Page navigation. Navigating printed materials is as simple as page
turning. Web requires decisions concerning which of many possible
links should be followed.
Design implications :provide overviews of information
organization schemes
Sense of place. printed material is an orderly process, sequential and
understandable. Web links can cause radical shifts in location and
context.
Design implication: Build cues into Web pages to aid the user in
maintaining a sense of place.

Interactivity. Printed page design involves letting the
eyes traverse static information, Web design involves
letting the hands move the information (scrolling,
pointing, expanding, clicking, and so on) in conjunction
with the eyes.
Page independence. Web pages Every page is
independent, and its topic
Design implication: Provide informative headers and
footers on each Web page.

Principles of User Interface Design
• must reflect a person’s capabilities and respond to
his or her specific needs.
• useful, accomplishing some business objectives
faster and more efficiently than the previously used
method

General Principles
■ Provide visual appeal by following these presentation and
graphic design principles:
— Provide meaningful contrast between screen elements.
— Create groupings.
— Align screen elements and groups.
— Provide three-dimensional representation.
— Use color and graphics effectively and simply.
Aesthetically Pleasing

Clarity
■ The interface should be visually, conceptually, and linguistically
clear, including:
— Visual elements
— Functions
— Metaphors
— Words and text

Compatibility
■ Provide compatibility with the following:
— The user
— The task and job
— The product
■ Adopt the user’s perspective.
User compatibility : common error among designers is to assume that
users are all alike all users think, feel, and behave exactly like the
developer.
Task and job compatibility. The structure and flow of functions should
permit easy transition between tasks.

Comprehensibility
■ A system should be easily learned and understood. A user should know
the following:
— What to look at
— What to do
— When to do it
— Where to do it
— Why to do it
— How to do it

Configurability
■ Permit easy personalization, configuration, and reconfiguration
of settings.
— Enhances a sense of control.
— Encourages an active role in understanding.

Consistency
■ A system should look, act, and operate the same throughout. Similar components
should:
— Have a similar look.
— Have similar uses.
— Operate similarly.
■ The same action should always yield the same result.
■ The function of elements should not change.
■ The position of standard elements should not change.

Control
■ The user must control the interaction.
— Actions should result from explicit user requests.
— Actions should be performed quickly.
— Actions should be capable of interruption or termination.
— The user should never be interrupted for errors.
■ The context maintained must be from the perspective of the user.
■ The means to achieve goals should be flexible and compatible with the
user’s skills, experiences, habits, and preferences.
■ Permit the user to customize aspects of the interface, while always
providing a proper set of defaults.

Directness
■ Provide direct ways to accomplish tasks.
— Available alternatives should be visible.
— The effect of actions on objects should be visible.

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.
■ Anticipate the user’s wants and needs whenever possible.

Familiarity
■ Employ familiar concepts and use a language that is familiar to the
user.
■ Keep the interface natural, mimicking the user’s behavior patterns.
■ Use real-world metaphors.

Flexibility
■ A system must be sensitive to :
— Each user’s knowledge and skills.
— Each user’s experience.
— Each user’s personal preference.
— Each user’s habits.
— 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.

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.

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
■ The system must rapidly respond to the user’s requests.
■ Provide immediate acknowledgment for all user actions:
— Visual.
— Textual.
— Auditory.

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.
— Provide uniformity and consistency.

Progressive disclosure. Introduce system components gradually so the
full complexity of the system is not visible at first encounter.
Provide defaults. provide a set of defaults for all system-configurable
items.

Transparency
■ Permit the user to focus on the task or job,
— 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.
■ People’s requirements always take precedence over technical
requirements.

References
The essential guide to user interface design,
Wilbert O Galitz, Wiley DreamTech.

Chapter 2

More Related Content

Chapter 2