User Interface Design

Unit-I
- -

whatcomprises good design?

·
People -
how we see and think

·
Information -

ease
eye a hand movements

· Hardware & software

->
Working with a computer should be easy, productive and enjoyable.
·
Graphical User Interface (GUI) allows people interactwith
to electronic devices through
images rather than inputtext

Internet-> where read

* global information space people can & write.

Web Aservice thatoperates over the internet

=>

·
Throughoutthe years 1970, screens had cryptic captions and monochromatic, and the user had

to always remember whatto type.

·
Butafter 1990, screens now had menus, buttons, borders, differentfontstyles and colours, and were

neatly aligned.

Characteristics of GUI and web interfaces:

-> Interaction styles

·
Method by which user and computer system interactwith each other

· Two types:direct and indirectmanipulation.

a) Direct Manipulation

world
·

system portrayed as extension ofreal

·
WYSIWYG

·
actions are rapid and incremental, reversible and visible display ofresults.

·
Anthropomorphic
↳facial
gestures I hand movements 4 eye movements
(b) Indirect manipulation:

·
Used when directmanipulation is notfeasible

·
Operations difficultto depictgraphically

e.g. command line, menu selection, form fill-in

Graphical systems:

Advantages Disadvantages

symbols recognized faster than text Greater design complexity

· ·

·
exploits visual/spatial cues
·
consumes more screen
space

· easier
learning and
remembering
·
Inconsistencies in technique and
technology

· Fewer errors ·
Misinterpretation

·
Easily reversible ·
Hardware limitations

·
More control

·
Immediate feedback

·
more attractive

·
overcomes language barrier

Principles ofUser Interface Design:

 Unit-2
-
-

key terms be
to covered under ability:

I
Effective while mustaccountfor the
designing, experience
->
·
we user's

and their and comfortability.

preferences
·
Efficient
X Common usability problems are:

Engaging ·
Ambiguous menus & icons

Permitonly direction movement

Error tolerant single
·
·

·
Inadequate error
messages, help, tutorials, documentation
etc.
·

Easy to learn

Web deity dems:

·
Visual clutter ·
excessive
page scrolling

confusing navigation
·
inconsistentdesign

· Information overload ·
inadequate information

·
outdated information
·
Inefficientcomponents/operations

Design
Process

#I:know your user/client Human action (ye:

·
Understand how HCI works 1. A
goal is formed

·
Understand user's preferences, needs, jobs 2. A
plan is devised and implemented

basic human characteristics evaluated

Understand 3.
Resulting actions
·
are

and compared formulated

to
goals
·
Understand user's physical and
psychological characteristics

Identify age
user's and experience

Q. Why users have trouble with computers? Whatare their responses to

poor design?
und
Unit 2:pg4-6 of2 Ppt
Itantan corations:

·
Perception:proximity, symmetry, continuity, unity etc.

Memory -> short-term (working):10-30 seconds;3-4 items

↳ Long-term
areeatininewas
(knowledge)

·
Guidelines:

-> Presentinformation in an organized, structured way

-> place importantinfo at

beginning lend ofa list.

-> Place compared info in close

proximity

-> Give user control over

pace ofinformation being showed.

-> Make importantinto unique & distinct.

Do
working memory ifreading speed
-> notrequire use of is important.

other

Vitalscreen groupings
·
parameters are
sensory storage,
numbers
of for easy

remembering.

:Foreal vision:used for direct focus

:Peripheral vision:area around foreal

Information
·
Processing

· Mental models

· Movementcontrol:keep large targetobjects for importantfunctions

·
Learning:process ofencoding long-term
into from short-term
memory.

·
Performance load:reducing cognitive and kinesthetic work load

(he
average user

Note: refer pg 21-31 in Unit 2: 2nd ppt

: Develop system Menus and Navigation Schemes

Formatting ofMenus:

Consistency:phrasing and navigation Complexity:provide both simple and complex

·
·

menus
·
Display: either permanently display menu

cor)
⑧
Ordering
present menu on demand · order lists by numeric, alphabetic
order.
· Presentation:ensure other components do not

have order
same visual qualities as menus
· can
by sequence a
frequency of

occurence.
·
Organization
·
provide a general/main menu
·
Groupings
·
Groupings ofitems thatare logical and
·
minimize no. ofmenu levels
meaningful

·
Never require menus to be scrolled. · should manimize
similarity within a
group
and minimize
similarity across
groups
·
Line separators
·
vertical
groupings subtle solid lines
->
·
separate groupings by thin
line/wide space
for subgroupings dotted
-> lines

Menu files submenus and choice should

· are: main menu, general. menu never same wording
as title.

· Menu mustcommunicate:

1. nature/purpose ofmenu

2. nature/purpose ofeach choice

proper choice
3. How the is selected

·
descriptions mustbe single/compound words. Place keyword first.
 -

kind
: Selectthe
proper of Windows

·
Window characteristics
be
able to:

* Access multiple sources of information

↳ name I title

* Perform multiple tasks

↳ accessible, active, non-accessible (state of window)
* Presentation of differentlevels and sources

↳ Size
of information

↳ Presentation location *
Reminding
&

↳
Visibility
for
·
Use
overlapping windows
switching between tasks;expertusers

·
Use tiled windows for
single-tasus, data thatneeds to be seen
actively;beginner users

iwindows

·
Dialog & Message bones. Property Inspectors
· Pop-up windows · Palette Windows

·
Property sheets

Secondary Windows

modal -> interaction with other windows not

↳ for presenting secondary infor
-> permitted

↳ extended (complex in nature -> modeless -> permitted a

repeated interaction with

Other windows
(should not be
larger than 263 units)

advanced
Unfolding sec. windows ->
providing options atsame level

Cascading sea. Windows -> providing advanced options ata lower level

we
organization:Organize windows
supportuser
to talks

1. Use Primary windows

begin
to interaction &
provide top-level for
content dependentwindows

extend interaction
2. Use
Secondary windows to

3. Use
dialog bones for infrequently used/need information
 · Minimize no. of windows needed for a task

· Ifwindow size is
big, ask:
↳ Is

↳ Is all
all data

data
presented
presented
needed?

related?
3 otherwise, makeinres a

· (Merits & De-merits of Large windows)

W e
presentation:

Position it thatit is visible

so
entirely
·

↳ place
IC window is
being restored, where
it
appeared.
it

↳ If window is it in location comfortable for

new, pop up a viewer

Cascading of windows is
preferred.
·

D
eer
o
reposition window a
to be moved
place we again ledges of

the screen)

Prereen-Based controls: of controls

·
Operable controls
has
It 3
principles:
↳ Buttons
↳ 'mustwork the it looks;look the
works'
it
way way
Entry controls/Read only
· Tent -
controls

↳ mustbe exactly used as its design plan ↳Tentbones

↳ mustbe
presented in a standard manner · Selection controls

↳ Radio buttons 4 Prop-down bones

A
control may: ↳ Check bones ↳Palettes

Combination controls
·
entry
permitentrylselection of particular
·
a value
↳ bones - Combo bones
Spin
·
permitediting a value ·
Presentation controls

text/graphic
↳ Group bones ↳ Column headings
display only of
·
a
piece
↳ Progress Indicators - Balloon Tips
·
cause a command be
to
performed
↳ Tool tips ↳ Sample box

choose familiar controls

=>
Display
->
as
many
control choices a
tions
for selecting
proper controls
as
possible 1. Data 3. User
Reduce
=>
no. of clicks
2. Task 4.
Display
 4
Tent
&
Messages for Webpages: setof guidelines for several web topics

· Title should have meaningful words

↳ firstletter word
Capitalize of each

↳ Do highlightwords
not in title

↳
Straight forward

firstword the word

↳ Make
info-carrying
·
Minimize
using words specific to Web (This website', 'click here)
Provide
helpful
·
error messages

Explain words with figures (Pu 'nextto

word 'up').
·
Tentshould be:

↳ highly contrasted with B.G.

↳ colour

↳ Font ...
etc.

· Minimize inline links;showread

over two lines

·
Effective Feedback should be given for user actions

↳ Display sandclock or barber's pole to show time delay

↳ Button clicks should have lot see feedback

↳ Allow starta
users to new
activity while waiting

↳Assistance/Preventing Errors

Prompting is used assistuser how

complete
·
to on to a screen

↳ be for experienced
May annoying users

· Use of sound can

help
↳ Always use with visual conjunction

↳Use no more than six tones

-

·
Providing Cometual, Refence, rented help

·
Providing Hints/Tips
Itionalization:Process of
isolating alements from a
product

v
Majorly english speaking users

Lalization:Process of
infusing alements into a product (which may
be
previously internationalized)

~ few english speakers audience

X
already reads english

~ widest
possible market desired x
costof translation &
rewriting software is high

· Use
simple english
·
Avoid!

X
Acronyms x slang
Xlocal/computer jargon X
culturally specific examples

term for words thatcannotbe translated

·
keep original

· Use
internationally accepted symbols and images

Accessibility:
-

Providing access
systems for
people with disabilities
·
to
easy

↳ Provide a customizable interface

↳ Follow standard Windows conventions a controls

1. Visual
Disability 3.
Physical Disabilities

·
Provide captions for all controls, objects etc.
·
On-screen keyboard

Tentual Summaries for images voice

inputsystems
· ·

· Audio feedback for

key presses and mouse clicks h. Speech/Language Disabilities

select
contrasting and
brightness Display for longer durations
· ·
colours increase message

2.
Hearing Disability
·
Spell/grammar check content

·
Provide visual cues for all audio alerts 5. Cognitive Disabilities

·
Detailed transcripts for videos a audio files ·

Simplify userface

·
Allow increase volume than normal range ·
Display message for longer durations
 -5
Being:detailed evaluation of a
system

functions itshould
·
making sure
everything as

know how use it.

·
making sure customers to

Usability
-
Testing
Purpose:
-

Effective
⑧ Criteria · Establish communication blu developers a users

-> ->
Engaging
· Evaluate a Product
-> Efficient ->
Easy learn
to

ing:
->

Error tolerant
·
should begin in the earlieststages of
development

Importance:
-
·
Iterative
process:product
is tested again e again

->
Designer & users
may
have differentvisions until itmeets all its
goals

estages
-> There is no user
average of Testing
Feedback
->

is required for better improvement

of the design
1.
Exploratory 3. Comparitive

Problems found better and 2. Assessment 4. Validation

->
early is reduces

costs.

type:simulation of an actual system thatcan be

quickly created.

% Fidelity
Purpose:To obtain user
input
ofexactness with which a
product
/ Degree
I
·
Provide feedback
designers
to
I produced/reproduced.

Types of Prototypes:

1. Hand sketches sketches

=>
by hand;focus on
design;low fidelity;no cost

limited
only a
rough approximation, understanding
2. Interactive paper prototypes ->
Post it notes;low sidelity;more
-

illustrative than sketches;

can be used to
demonstrate the interaction.

3.
Programmed facades Prototyping
=>
tools;Detailed;med-to-high fidelity; more
expensive a

time
consuming
3.
Prototype-oriented languages created through
-

programming languages;high fidelity

we
and
Layout:

seens
·
Presentrelated information in a
single window whenever possible (nottoo much, nottoo less)

· Use
Primary windows for major interaction

for extended interaction

secondary windows

Dialog bones for

infrequently needed into.

·
Minimize no. of windows needed for a taste

·
Provide large enough windows;minimize scrolling

(b) pages
· Use a
layoutgrid

· Minimize page length

↳ Shorter for Home, Navigation pages

↳ Longer for contentpages (uninterrupted reading)

* Avoid horizontal
scrolling
for differentplatforms &
·
Design screens

⑰-
page
↳me peein

·
clearly identify the website's purpose
and content

↳ NamelLogo, tagline

↳ Website name

↳ Brief description

↳ Site
map
⑰- 2

↳ links to all
Navigation most of the site

↳ Summary of latestnews

↳ Social media links, POC, etc.

↳ Search facility