Upload
mudit-mittal
View
232
Download
0
Embed Size (px)
Citation preview
8/8/2019 UI Design Guide
1/50
UI DesignGuide
8/8/2019 UI Design Guide
2/50
Its not that boring PART I Usability & Interface
PART II Web User Behaviours
PART III Understanding Personas
8/8/2019 UI Design Guide
3/50
USABILITY & INTERFACE
PART - I
8/8/2019 UI Design Guide
4/50
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
8/8/2019 UI Design Guide
5/50
Goals of usability Allow a system to communicate to user
Build an intuitive interface that resonates wellwith users mental model
An understanding of emotions can createpositive user experiences
8/8/2019 UI Design Guide
6/50
User Centered Design
8/8/2019 UI Design Guide
7/50
Common Story
8/8/2019 UI Design Guide
8/50
8/8/2019 UI Design Guide
9/50
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
8/8/2019 UI Design Guide
10/50
What is an interfacereally Decisions
actions the user may perform on the system
Information
system data relevant to user
Instructions
description ofdecisions & information
8/8/2019 UI Design Guide
11/50
Example
8/8/2019 UI Design Guide
12/50
Simple. Clear.Consistent.
8/8/2019 UI Design Guide
13/50
DESIGN PRINCIPLESTO CREATE
EFFECTIVE INSTRUCTIONS
8/8/2019 UI Design Guide
14/50
#1 Affordance The possible actions for an object should
be presented obviously and consistently eg. hovering shouldnt be necessary, but perhaps clarifying
If it looks the same, it should behave the same
8/8/2019 UI Design Guide
15/50
#2 Make it intuitiveGestalt Principles
Similarity people often perceive similar objects as
groups
When similarity occurs, an object can be emphasized if it is
dissimilarto others
8/8/2019 UI Design Guide
16/50
8/8/2019 UI Design Guide
17/50
#2 Make it intuitiveGestalt Principles
Proximity implies relationships, related elements shouldbe adjacent to each other
8/8/2019 UI Design Guide
18/50
#2 Make it intuitiveGestalt Principles
Closure if enough of the shape is indicated, peopleperceive the whole by filling in the missing information
8/8/2019 UI Design Guide
19/50
#2 Make it intuitiveGestalt Principles
Order it implies path, if user must make a series ofdecisions, 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 thedistance to and size of the target
8/8/2019 UI Design Guide
20/50
#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
8/8/2019 UI Design Guide
21/50
#4 Recognition overrecall People have very volatile short-term or working
memory, offer options instead of forcing recall
Millers Law Working memory is 7 _ 2 items,
this comes handy when defining Information
Architecture
+
8/8/2019 UI Design Guide
22/50
#4 Recognition overrecall
8/8/2019 UI Design Guide
23/50
#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
8/8/2019 UI Design Guide
24/50
#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
8/8/2019 UI Design Guide
25/50
WEB USER BEHAVIOURS
PART - II
8/8/2019 UI Design Guide
26/50
Stages of web application user
Unaware Interested PassionateCustomer
l i f
8/8/2019 UI Design Guide
27/50
Analysis of user stages
Unaware Interested Customer Passionate
FRICTION
MOTIVATION
Sign-up First time use Engagement
8/8/2019 UI Design Guide
28/50
How is this website valuable to me?
I already use one for same purpose, why change?
Who else is using it?
What does this site do exactly?
Whats in it for me?
What all can I do here? How to use it?
8/8/2019 UI Design Guide
29/50
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
H
8/8/2019 UI Design Guide
30/50
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.
H
8/8/2019 UI Design Guide
31/50
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. Were here t
H
8/8/2019 UI Design Guide
32/50
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
8/8/2019 UI Design Guide
33/50
8/8/2019 UI Design Guide
34/50
Personas tell us
what are the activities they wish to perform.
who the users are.
why they might be motivatedin our service/product.
how our service fits into the context of their life.
Personas
8/8/2019 UI Design Guide
35/50
Personas building requires
BackgroundName
Age
Background, family, etc
Role/Job/Occupation
Leisure activities/ recreational interests, aspirations
Activities/ MotivationsWhat are they trying to achieve?
Why are they trying to achieve this?
CharacteristicsTechnical use (tools, ability, access points,
knowledge)
Project EngagementWhat is their relationship to thebrand/product/service?
What triggers the interactions?
What similar brands/products/services they might
use?
Dimensions of PersonaGeographic profileDemographic profilePsychographicsWebographics
Personas
8/8/2019 UI Design Guide
36/50
Personas
Provide a user perspective forguiding design.
Represent important patterns about behavior.
Prompts new possibilities and features.
Personas
8/8/2019 UI Design Guide
37/50
CASE STUDY
C ll b t
8/8/2019 UI Design Guide
38/50
I like to be independent It
feels great when friends come tome asking for recommending
places
Geetika Chavanoung. Single. Adventurous.Con
tributo
r
Expressive
Outgoing
VerySocia
l
NoLiability
Affluent
Collaborator
Geetika Chavan
27, B.Com Graduate
I burrp! I discover I get heard.
Skills
Use
Computer Internet Mobi le
Belongs to Delhi, but
works in Mumbai
Youtube
Gmail
MoneycontrolIndiatimes
ebay
WikipediaWordpress
IM
icicibankYahoo
Orkut
Rapidshare
cricinfo
naukri
Knowledge of Mumbai City
I f ti S k
8/8/2019 UI Design Guide
39/50
Progressiv
eUrbane
I like to be sure of having a good
time when I go out with friends,family
Dhruv Sharmaature. Married. Careful.Res
ponsib
le
Weekender
Busy
Information Seeker
Dhruv Sharma
34, Businessman
I burrp! I get info I plan.
Skills
Use
Computer Internet Mobi le
Belongs to Rajasthan
living in Mumbai for
last 20 years
Youtube
Gmail
Moneycontrol
ebay
Wikipedia
WordpressIM
icicibank
Yahoo
Knowledge of Mumbai City
8/8/2019 UI Design Guide
40/50
Scenarios are description of everyday situations
Expose problems and opportunities in current design.
Focus on activities people do, and the context in which they do them.
Flesh out and evaluate a design idea from multiple perspectives.
Scenarios
8/8/2019 UI Design Guide
41/50
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
Churchgate.
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.
Geetika Chavan
Saturday
evening with
friends
1
8/8/2019 UI Design Guide
42/50
8/8/2019 UI Design Guide
43/50
Dhruv owns a Toyota Camry V4, 2004 model. The cars 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
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.
Dhruv Sharma
Car bekaar
3
8/8/2019 UI Design Guide
44/50
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.
Oogler
Google baba
Jai Ho
4
??
8/8/2019 UI Design Guide
45/50
CASE STUDY
Who is our user
8/8/2019 UI Design Guide
46/50
Who is our user
Consumer (people who search)
People with an intent & access to internet
From Office
From Home
hey come, they search, they generate revenue (read leads)
I want to get my work done. Im looking forright person (vendor) to do the job for me.
Who is our user
8/8/2019 UI Design Guide
47/50
Who is our user
Contributer (people who own business)
Small Business Owners
Traders & Merchants
they come, they claim, they add value
Eg. owner of Restaurant, Garment shop, Furniture shop, Medical store,
Retail store, Ball bearing manufacturer, Taxi service provider, etc
I want to gain more visibility, more customers.Tell me how I benefit, Ill give you all details.
User Profiling
8/8/2019 UI Design Guide
48/50
THEY NEED
Fast & Efficient Search
Facility to Call/ SMS
Call back Option
THEY NEED
Clear knowledge of benefits
Guided path to provide details
Reinforcement to keep him motivated
and engaged
User ProfilingTraffic: 80% plusInternet:
Traffic: nearly 20%Internet:
WE WANT THEM TO
Search Call/SMS Generate Leads
WE WANT THEM TO
Claim business Provide detailsCome back again (to announce offers)
Features Required
8/8/2019 UI Design Guide
49/50
Features Required
For Consumers For Contributors
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
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
In order of preference
8/8/2019 UI Design Guide
50/50
Thank You