UI Design

Guide
It’s not that boring 

 PART I – Usability & Interface

 PART II – Web User Behaviours

 PART III – Understanding Personas

USABILITY & INTERFACE

PART - I
What is usability?

 A subjective evaluation of how easily users

achieve goals

 Minimize user error and maximize user

satisfaction

 Learning in the short-term and efficiency in the

long-term
Goals of usability

 Allow a system to communicate to user

 Build an ‘intuitive’ interface that resonates well

with user’s ‘mental model’

 An understanding of emotions can create

positive user experiences
User Centered Design
Common Story
Guided Path to UCD
What is an interface?

 An abstraction of a complex system,

 allows people to act through some interactions
 & provides feedback from system to user

 Its purpose is to,

 protect users from complexity
 & enable them to do more
What is an interface
‘really’
 Decisions –
actions the user may perform on the system
 Information –
system data relevant to user
 Instructions –
description of decisions & information
Example
Simple. Clear.
Consistent.
 DESIGN PRINCIPLES
TO CREATE
EFFECTIVE INSTRUCTIONS
#1 Affordance

 The possible actions for an object should

be presented obviously and consistently –
eg. hovering shouldn’t be necessary, but perhaps clarifying

 If it looks the same, it should behave the same

#2 Make it intuitive
Gestalt Principles
 Similarity – people often perceive similar objects as
groups

 When similarity occurs, an object can be emphasized if it is

dissimilar to others
#2 Make it intuitive
Gestalt Principles
 Continuation – occurs when the eye is compelled to
move through one object and continue to another object

 Size implies importance, if it’s used often, it should be big

#2 Make it intuitive
Gestalt Principles
 Proximity – implies relationships, related elements should
be adjacent to each other
#2 Make it intuitive
Gestalt Principles
 Closure – if enough of the shape is indicated, people
perceive the whole by filling in the missing information
#2 Make it intuitive
Gestalt Principles
 Order – it implies path, if user must make a series of
decisions, then they must be in a predictable order (ex: left-to-
right or top-to-bottom)

 Fitts Law - the time to acquire a target is a function of the

distance to and size of the target
#3 Maintain User Focus

 20% of the interface provides 80% of the

functionality

 If something is uncommon or very complicated,

hide it

 People like recent stuff more than regular stuff

#4 Recognition over
recall
 People have very volatile short-term or working
memory, offer options instead of forcing recall

 Miller’s Law – Working memory is 7 +_ 2 items,

this comes handy when defining Information
Architecture
#4 Recognition over
recall
#5 No Dead Ends

 Error messages should guide the users on how

to reestablish a path to their goals

 Abrupt ends are primary reasons for user to

leave the system, to make user comfortable tell
what to expect
#0 Ask the User

 No method or process can tell you more than a

user can

 Usability is about making user happy, its they

who can decide what they want and what not
WEB USER BEHAVIOURS

PART - II
Stages of web application user

Unaware Interested Customer Passionate

Analysis of user stages
MOTIVATION

FRICTION

Sign-up First time use Engagement

Unaware Interested Customer Passionate

How is this website valuable to me?

I already use one for same purpose, why change?

Who else is using it? What’s in it for me?

What does this site do exactly?

What all can I do here? How to use it?

How to engage users

Unaware Interested Customer Passionate

User is skeptical, toughest to convince

 Showcase breadth of main offerings.

 Elements: logo, tagline, one-line description of services, screenshots

 Tip: Use Elevator Pitch

How to engage users

Unaware Interested Customer Passionate

We know a lot about user already

 Explain how he can use our services.

 Elements: product tour, social influence, benefits

 Tip: Sell Sell Sell. Sell your interface.

How to engage users

Unaware Interested Customer Passionate

Support & help to guide, else he will leave

 Teach how exactly to use various features. Prioritize use first. Make user learn.

 Elements: help, demo, contextual support build into interface

 Tip: Teach & guide

 It only takes a minute. This is one time setup. We’re here to help.
How to engage users

Unaware Interested Customer Passionate

Using site already, keep user engaged

 Show how to proceed to next level.

 Elements: surprise elements, tools to discover new things

 Tip: Support, talk in human conversational language

 He will spread the word for you

UNDERSTANDING PERSONAS

PART - III
Personas tell us

who the users are.

what are the activities they wish to perform.

why they might be motivated in our service/product.

how our service fits into the context of their life.

Personas
Personas building requires

Background Activities/ Motivations

Name What are they trying to achieve?
Age Why are they trying to achieve this?
Background, family, etc
Role/Job/Occupation
Leisure activities/ recreational interests, aspirations
Project Engagement
What is their relationship to the
brand/product/service?
Characteristics What triggers the interactions?
Technical use (tools, ability, access points, What similar brands/products/services they might
knowledge) use?

Dimensions of Persona
•Geographic profile
•Demographic profile
•Psychographics
•Webographics

Personas
Personas

Represent important patterns about behavior.

Provide a user perspective for guiding design.

Prompts new possibilities and features.

Personas
CASE STUDY
 Collaborator
I burrp! I discover… I get heard.
“I like to be independent… It
feels great when friends come to
me asking for recommending

No
places…

Lia b
Ve

ili t
r y

y
So
c
A ff

ia
lue

l
nt
Facebook Indiatimes
icicibank Moneycontrol
Yahoo Rapidshare naukri
Youtube Google Outgo
IM ebay i ng
Wordpress Orkut
Gmail Wikipedia cricinfo Geetika Chavan
Computer Internet Mobile
27, B.Com Graduate

Belongs to Delhi, but

Expressive
Skills 

works in Mumbai

Use 
Knowledge of Mumbai City
bu tor
tri
Con
Young. Single. Adventurous. Geetika Chavan
 Information Seeker
I burrp! I get info… I plan.
“I like to be sure of having a good
time when I go out with friends,
family…

Pr
og
res
si
Ur

ve
ba
ne
Facebook Moneycontrol
icicibank
Wikipedia
Yahoo
IM
Google Busy
ebay Wordpress
Gmail
Youtube Dhruv Sharma
Computer Internet Mobile
34, Businessman

Belongs to Rajasthan
r
Weekende
Skills 

living in Mumbai for

last 20 years
Use 
Knowledge of Mumbai City
s ible
s pon
Re
Mature. Married. Careful. Dhruv Sharma
Scenarios are description of everyday situations

Focus on activities people do, and the context in which they do them.

Expose problems and opportunities in current design.

Flesh out and evaluate a design idea from multiple perspectives.

Scenarios
 Geetika is very excited about the latest flick after reading a
great review in newspaper this morning. She comes to office and
goes online on indiatimes & rediff to get more views. She talks
to friends to see if they are interested in going out.

Geetika volunteers to plan the group outing. She comes to

burrp.com > Movies. Reads the burrp review before proceeding to
check for availability of seats in theatres in and around
Saturday
Churchgate.
evening with
friends
She is having a few theatre options to choose from. Now she is
interested in knowing about some nearby cool (good/ new) places
to have a nice Italian or Continental feast with some wine,
after the movie.

1
Geetika Chavan
 Geetika and her room partner are idling at their place in
Borivili on a Sunday morning. They decide to go for window
shopping and junk eating evening in South Mumbai. She is
interested in knowing about areas having a happening street
market and upbeat showrooms. She is a foodie and would prefer
areas with variety of option to eat.

Geetika goes online to burrp.com and figures out that Colaba is

Sunday
the most happening place to be as it has various shopping and
Funday!!!
food options for them. Apart from these, she discovered an art
exhibition nearby and a ferry ride option at Gateway.

2
Geetika Chavan
 Dhruv owns a Toyota Camry V4, 2004 model. The car’s audio
system broke down and needs a repair. He is reluctant to send
his car to authorized dealer as the warranty cover does not
apply anymore and it will cost too much.

He is looking for a good and reputed car servicing garage,

preferably closer to his place and would be interested in
fixing an appointment before he drive his car all the way to
Car bekaar 
the garage/ service station.

Dhruv goes online and searches for car garage, seeing so many
options he gets confused and comes to burrp hoping to get
details of some chosen ones. He wish, only if he could find a
place which offers home pickup service too.

3
Dhruv Sharma
 The Oogler is searching for a place to have fun. He bumps into

?
burrp.com and gets amazed by the kind of service offered by
burrp.

After his appetite for the required info is full, he wants to

browse other sections of the website and figure out ways in
which this could serve as a tool for him to use in future.

Google baba
Jai Ho…

4
Oogler
CASE STUDY
 Who is our user
Consumer (people who search)

People with ‘an intent’ & access to internet

 From Office
 From Home

they come, they search, they generate revenue (read leads)

“
I want to get my work done. I’m looking for
right person (vendor) to do the job for me.
Who is our user
Contributer (people who own business)
 Small Business Owners
 Traders & Merchants

Eg. owner of Restaurant, Garment shop, Furniture shop, Medical store,

Retail store, Ball bearing manufacturer, Taxi service provider, etc…

they come, they claim, they add value

“
I want to gain more visibility, more customers.
Tell me how I benefit, I’ll give you all details.
User Profiling
Traffic: 80% plus Traffic: nearly 20%
Internet: Internet:

THEY NEED THEY NEED

 Fast & Efficient Search  Clear knowledge of benefits

 Facility to Call/ SMS  Guided path to provide details
 Call back Option  Reinforcement to keep him motivated
and engaged

WE WANT THEM TO WE WANT THEM TO

Search  Call/SMS  Generate Leads Claim business  Provide details 

Come back again (to announce offers)
Features Required
For Consumers
In order of preference
 Communicate – Who we are, what can
you expect from this site
 Search, suggest
 Call/ SMS/ Bookmark
 Carry forward Call/SMS users to
generate leads
 Share Search Results
 Share Business
For Contributors
In order of preference
 Communicate – Who we are, what are
your benefits of being with us, how can
you grow
 Help on how to add/claim & fill details
 Roadmap to become trusted business
 Benefits of paid customers
 How much to pay; frequency
Thank You