HCI- 2017-supply

1) (a) Importance of user interface design:

User interface (UI) design defines how an individual user interacts with a
digital information system. It is essentially a series of visual elements that a
user uses to interact with the digital device. The goal of any UI design is to
make the users interaction with the device and the interface as smooth as
possible. UI and user experience (UX) design are two sides of the same coin
and both of them are incredibly crucial to the success of any digital product.
There are a few basic characteristics of good UI such as appealing graphics,
proper spacing of icons, appropriate functionality when required, lightweight
UI elements, organized layouts, consistency across elements, proper screen
fit, and good typography among other features. The task of creating a good
user interface is not an easy one so hiring the right developer to begin with is
also a very crucial element.
UI builds customer confidence
Every customer wants to have a good experience and nobody likes using a
hard to navigate website or a clunky application. A website, especially a
business website, needs to be easy to use, have good color contrast, possess
helpful navigation buttons, and just the right amount of information.
Customers are automatically more receptive to an application or website that
is well-designed, delivers the right information, and is not jarring. In the digital
age, as user attention span is notoriously low, poor UI design will always
hamper a website.
Good UI reduces confusion

The purpose of UI design is to clearly convey the intention or message of the

website to the user without distracting the user unnecessarily. If there is poor
color contrast, unnecessary information overload, no consistency in UI design,
or haphazard grouping of tools, it will lead to more confusion in a user's mind
and decrease the chances of the website fulfilling its purpose. UI developers
should ensure that a website or application is tidy, orderly, and unchaotic in
order to reduce confusion and increase customer conversion.

Consistency in UI design is critical

Consistency in UI design refers to the practice of ensuring that all the visual
elements of an interface are in uniform order. The elements must look similar,
complement each other, behave in a similar manner, and create a familiar
pattern. If a webpage has a familiar theme and pattern to it, it is far more likely
to resonate in the minds of a user than it would if there was no consistency in
UI design. Placement, font, box size, layout, graphics, panels etc. all need to
be consistent throughout an entire interface.
Good UI increases customer conversion
Good UI design is paramount to meeting your business targets and goals in
this digital age. For an emerging business, well-designed UI can lead to good
brand recognition and leave a good impression of the business in the minds of
customers. As customers have a litany of choices in every conceivable field
and industry, optimized UI design is crucial to retaining customer attention
spans and monetizing them successfully.
(b) Principles of user interface design:
An interface must really be just an extension of a person. This means that the system
and its software must reflect a person’s capabilities and respond to his or her specific
needs. It should be useful, accomplishing some business objectives faster and more
efficiently than the previously used method or tool did. It must also be easy to learn,
for people want to do, not learn to do. Finally, the system must be easy and fun to
use, evoking a sense of pleasure and accomplishment not tedium and frustration.
The interface itself should serve as both a connector and a separator: a connector in
that it ties the user to the power of the computer, and a separator in that it
minimizes the possibility of the participants damaging one another.
General Principles
The design goals in creating a user interface are described below. They are
fundamental to the design and implementation of all effective interfaces, including
GUI and Web ones. These principles are general characteristics of the interface, and
they apply to all aspects
Aesthetically Pleasing
■ 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
A design aesthetic, or visually pleasing composition, is attractive to the eye. It draws
attention subliminally, conveying a message clearly and quickly. Visual appeal makes
a computer system accessible and inviting. A lack of visually pleasing composition is
disorienting, obscures the intent and meaning, and slows down and confuses the
user. Visual appeal is terribly important today because most human-computer
communication occurs in the visual realm. Visual appeal is provided by following the
presentation and graphic design principles to be discussed, including providing
meaningful contrast between screen elements, creating spatial groupings, aligning
screen elements, providing three-dimensional representation, and using color and
graphics effectively. Good design combines power, functionality, and simplicity with
a pleasing appearance.
Clarity
■ The interface should be visually, conceptually, and linguistically clear, including:
— Visual elements
— Functions
— Metaphors
— Words and text
The interface must be clear in visual appearance, concept, and wording. Visual
elements should be understandable, relating to the user’s real-world concepts and
functions. Metaphors, or analogies, should be realistic and simple. Interface words
and text should be simple, unambiguous, and free of computer jargon.
Compatibility
■ Provide compatibility with the following:
— The user
— The task and job
— The product
■ Adopt the user’s perspective.
User compatibility: Design must be appropriate and compatible with the needs of
the user or client. Effective design starts with understanding the user’s needs and
adopting the user’s point of view.
Task and job compatibility: The organization of a system should match the tasks a
person must do to perform the job. The structure and flow of functions should
permit easy transition between tasks. The user must never be forced to navigate
between applications or many screens to complete routine daily tasks.
Product compatibility:The intended user of a new system is often the user of other
systems or earlier versions of the new system. Habits, expectations, and a level of
knowledge have been established and will be brought to bear when learning the new
system. m. If these habits, expectations, and knowledge cannot be applied to the
new system, confusion results and learning requirements are greatly increased.
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
■ The flow of actions, responses, visual presentations, and information should be in
a sensible order that is easy to recollect and place in context.
A system should be understandable, flowing in a comprehensible and meaningful
order. Strong clues to the operation of objects should be presented. The steps to
complete a task should be obvious. Reading and digesting long explanations should
never be necessary.
Configurability
■ Permit easy personalization, configuration, and reconfiguration of settings.
— Enhances a sense of control.
— Encourages an active role in understanding.
Easy personalization and customization through configuration and reconfiguration of
a system enhances a sense of control, encourages an active role in understanding,
and allows for personal preferences and differences in experience levels. It also leads
to higher user satisfaction. Some people will prefer to personalize a system to better
meet their preferences. Other people will not, accepting what is given. Still others
will experiment with reconfiguration and then give up, running out of patience or
time. For these latter groups of users a good default configuration must be provided.
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.
Design consistency is the common thread that runs throughout these guidelines. It is
the cardinal rule of all design activities. Consistency is important because it can
reduce requirements for human learning by allowing skills learned in one situation to
be transferred to another like it. While any new system must impose some learning
requirements on its users, it should avoid encumbering productive learning with
nonproductive, unnecessary activity. Consistency also aids learning of the system’s
mental model.
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.
■ Avoid modes since they constrain the actions available to the user.
■ Permit the user to customize aspects of the interface, while always providing a
proper set of defaults.
Control is feeling in charge, feeling that the system is responding to your actions.
Feeling that a machine is controlling you is demoralizing and frustrating. The
interface should present a tool-like appearance. Control is achieved when a person,
working at his or her own pace, is able to determine what to do, how to do it, and
then is easily able to get it done.
Directness
■ Provide direct ways to accomplish tasks.
— Available alternatives should be visible.
— The effect of actions on objects should be visible.
Tasks should be performed directly. Available alternatives should be visible, reducing
the user’s mental workload. Directness is also best provided by the object-action
sequence of direct-manipulation systems. Tasks are performed by directly selecting
an object, then selecting an action to be performed, and then seeing the action
being performed.
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.
Build on the user’s existing knowledge. Build into the interface concepts,
terminology, workflows, and spatial arrangements already familiar to the user.
Operations should mimic one’s behavior patterns; dialogs should mimic one’s
thought processes and vocabulary. Familiar concepts enable people to get started
and become productive quickly.
Flexibility
■ A system must be sensitive to the differing needs of its users, enabling a level and
type of performance based upon:
— Each user’s knowledge and skills.
— Each user’s experience.
— Each user’s personal preference.
— Each user’s habits.
— The conditions at that moment.
Flexibility is the system’s ability to respond to individual differences in people.
Permit people to choose the method of interaction that is most appropriate to their
situation. People should be able to interact with a system in terms of their own
particular needs, including knowledge, experience, and personal preference.
Flexibility is accomplished by providing multiple ways to access application functions
and perform tasks. It is also accomplished through permitting system customization.
Another benefit of flexibility is that it contributes to increased user control. A flexible
system is a versatile system.
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.
It is often said “to err is human.” The corollary to that statement, at least in
computer systems, might be “to forgive is good design.” People will make mistakes;
a system should tolerate those that are common and unavoidable. A forgiving
system keeps people out of trouble.
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.
Tasks, displays, and movement through a system should be anticipatable based on
the user’s previous knowledge or experience. All actions should lead to results the
user expects. Screen elements should be distinct and recognizable. Current
operations should provide clues as to what will come next. Anticipation, or
predictability, reduces mistakes and enables tasks to be completed more quickly. All
expectations possessed by the user should be fulfilled uniformly and completely.
Predictability is greatly enhanced by design consistency.

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.
A person should be able to retract an action by issuing an undo command. Knowing
that an action can be reversed reduces much of the distress of new users, who often
worry about doing something wrong. The return point could be the previous action,
previous screen, a recent closure point, or the beginning of some predetermined
period, such as back 10 screens or some number of minutes. Reversing or abolishing
an action is analogous to using an eraser to eliminate a pencil mark on a piece of
paper.
The goal is stability, or returning easily to the right track when a wrong track has
been taken. Recovery should be obvious, automatic, and easy and natural to
perform.
Responsiveness
■ The system must rapidly respond to the user’s requests.
■ Provide immediate acknowledgment for all user actions:
— Visual.
— Textual.
— Auditory.
A user request must be responded to quickly. Knowledge of results, or feedback, is a
necessary learning ingredient. It shapes human performance and instills confidence.
All requests to the system must be acknowledged in some way. Feedback may be
visual, the change in the shape of the mouse pointer, or textual, taking the form of a
message. It may also be auditory, consisting of a unique sound or tone.
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.
Simplicity is the opposite of complexity. Complexity is a measure of the number of
choices available at any point in the human-computer interaction. A great deal of
functionality and power is usually associated with high complexity. Complexity most
often Characteristics of Graphical and Web User Interfaces 49 3900 P-00 (Part 1-
ch.1&2) 4/24/02 1:48 PM Page 49 overwhelms and confuses new and casual users of
systems. Complex systems are often not fully used, or used ineffectively, because a
person may follow known but more cumbersome methods instead of easier but
undiscovered or unfamiliar methods.

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.

Never force the user to think about the technical details of the system. One’s
thoughts must be directed to the task, not the computer communication process.
Reminders of the mechanics of the interface occur through the use of technical
jargon, the heavy use of codes, and the presentation of computer concepts and
representations.
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.
Design guidelines often cover a great deal of territory and often conflict with one
another or with technical requirements. In such conflicts the designer must weigh
the alternatives and reach a decision based on trade-offs concerning accuracy, time,
cost, and ease of use. Making these trade-offs intelligently requires a thorough
understanding of the user and all design considerations. The ultimate solution will be
a blend of experimental data, good judgment, and the important user needs.

2) (a) Web user interface popularity: refer notes

3) (a) various types of users and their characteristics:

What is User Interface?

 User interface is a design for softwares and machines such as computers,

mobile devices etc.
 It is the first impression of a software where user interacts with a
computer or a software system.
 A software must fulfill the requirement of a user.
 User interface determines how the information is displayed on the
screen.
 Poor user interface design causes a user to make fatal errors and a
software system never used.
There are three types of User Interfaces:

1. Command language
2. Menus
3. Graphical User Interface (GUI)

Types of Description
UI
Command It indicates that the user must know the machine language and
Language program language.
Menus It indicates that the user chooses the commands or menus from the
lists displayed on the screen.
Graphical In this, user gives command by clicking or selecting the icons
User displayed on the screen.
Interface
Characteristics of User Interface
There are eight characteristics considered while making a good
user interface design:

Characteristics Description
Attractive A good interface design should be attractive. It means
that the use of that interface is enjoyable. The design
should include cool user-friendly features with the visual
appeal.
Clear Clarity is the most important characteristics of user
interface design. The main purpose of UI design is to
enable user to interact with the system by
communicating with them. If user have difficulties to find
out how application works or where to go on the website
they will get confused and frustrated and decreases the
ratio of your application or site.
Concise User will not spend too much time to read the articles, So
keep things clear and concise and save the valuable time
of user.
Consistent Consistent interfaces allow users to develop usage
patterns. Users will learn what the different buttons and
icons look like and user will recognize them and realize
what they do in different contexts. A unique design with
consistency speaks for a good user interface design.
Efficient A good user interface design allows you to perform
different functions of the software application or website
faster and with less effort.
Familiar If the user design interface is consistent then it is sure to
make the users familiar with specific elements. Familiar
means that if the user checks out for the first time the
interface elements are found at the places expected.
Forgiving Sometimes user make mistakes when using the software
or website. Handling the mistake is an important indicator
of the software's quality. A good interface design should
enable user to restore the deleted items which at one
point or the other can be done unintentionally. Forgiving
interface is one that can save users from costly mistake.
Responsive Responsive means the interface provides some form of
feedback. The interface design should talk back to the
user to inform them about what's happening?. If the user
pressed the button, the button should display a 'pressed'
state to give that feedback.

(b) human interaction speed:

 The speed at which people can perform using various communication methods has
been studied by a number of researchers.

• Reading: The average adult, reading English prose in the United States, has a reading
speed in the order of 250-300 words per minute.

Proof reading text on paper has been found to occur at about 200 words per minute, on a
computer monitor, about 180 words per minute.

 One technique that has dramatically increased reading speeds is called Rapid Serial
Visual Presentation, or RSVP. In this technique single words are presented one at a
time in the center of a screen.
New words continually replace old words at a rate set by the reader. For a sample of
people whose paper document reading speed was 342 words per minute. (With a
speed range of 143 to 540 words per minute.)
Single words were presented on a screen in sets at a speed sequentially varying
ranging from 600 to 1,600 words per minute. After each set a comprehension test
was administered.
Reading
• Prose text - 250-300 words per minute.
• Proof reading text on paper - 200 words per minute.
 • Proofreading text on a monitor - 180 words per minute.
Listening
• Speaking to a computer: 150-160 words per minute.
• After recognition corrections: 105 words per minute.
Keying
Typewriter Fast typist :150 words per minute and higher
Average typist : 60-70 words per minute
Computer
Transcription :33 words per minute
Composition: 19 words per minute
• Two finger typists
Memorized text:. 37 words per minute
Copying text: 27 words per minute
• Hand printing
Memorized text: 31 words per minute.
Copying text: 22 words per minute.

4) (b) mechanisms of screen navigation and flow:

■ Provide an ordering of screen information and elements that:

— Is rhythmic, guiding a person’s eye through the display.
— Encourages natural movement sequences.
— Minimizes pointer and eye movement distances.
■ Locate the most important and most frequently used elements or controls at the
top
left.
■ Maintain a top-to-bottom, left-to-right flow.
■ Assist in navigation through a screen by:
— Aligning elements.
— Grouping elements.
— Using of line borders.
■ Through focus and emphasis, sequentially, direct attention to items that are:
1. Critical.
2. Important.
3. Secondary.
4. Peripheral.
■ Tab through window in logical order of displayed information.
■ Locate command buttons at end of the tabbing order sequence.
■ When groups of related information must be broken and displayed on separate
screens, provide breaks at logical or natural points in the information flow.
Screen navigation should be obvious and easy to accomplish. Navigation can be
made obvious by grouping and aligning screen controls, and judiciously using line
borders to guide the eye. Sequentially, direct a person’s attention to elements in
terms of their importance. Using the various display techniques, focus attention on
the most important parts of a screen. Always tab through a screen in the logical
order of the information displayed, and locate command buttons at the end of the tab
order sequence.
In establishing eye movement through a screen, also consider that the eye tends to
move sequentially,
for example:
 From dark areas to light areas.
 From big objects to little objects.
 From unusual shapes to common shapes.
 From highly saturated colors to unsaturated colors.
These techniques can be used initially to focus a person’s attention to one area of
the screen and then direct it elsewhere.
For screens containing data, locate the most important or frequently used screen
controls to the top left of the screen where initial attention is usually directed. This
will also reduce the overall number of eye and manual control movements needed to
work with a screen.
Then, maintain a top-to-bottom, left-to-right flow through the screen. This is contrary
to the older text-based screen cursor movement direction that precedes left to
right, then top to bottom. This top-to-bottom orientation is recommended for
information entry for the following reasons:
 Eye movements between items will be shorter.
 Control movements between items will be shorter.
 Groupings are more obvious perceptually.
When one’s eye moves away from the screen and then back, it returns to about
the same place it left, even if it is seeking the next item in a sequence (a visual
anchor point remains).
 Most product style guides recommend a left to right orientation.
 Our earliest display screens reflected this left to right entry orientation.
 Top to bottom orientation is also recommended for presenting displays of read only
information tht must be scanned.