ui design guide

8/8/2019 UI Design Guide

1/50

UI DesignGuide


2/50

Its not that boring PART I Usability & Interface

PART II Web User Behaviours

PART III Understanding Personas


3/50

USABILITY & INTERFACE

PART - I


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


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


6/50

User Centered Design


7/50

Common Story


8/50


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


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


11/50

Example


12/50

Simple. Clear.Consistent.


13/50

DESIGN PRINCIPLESTO CREATE

EFFECTIVE INSTRUCTIONS


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


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


16/50


17/50


Proximity implies relationships, related elements shouldbe adjacent to each other


18/50


Closure if enough of the shape is indicated, peopleperceive the whole by filling in the missing information


19/50


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


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


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

+


22/50

#4 Recognition overrecall


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


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


25/50

WEB USER BEHAVIOURS

PART - II


26/50

Stages of web application user

Unaware Interested PassionateCustomer

l i f


27/50

Analysis of user stages

Unaware Interested Customer Passionate

FRICTION

MOTIVATION

Sign-up First time use Engagement


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?


29/50

How to engage users


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


30/50

How to engage users


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


31/50

How to engage users


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


32/50

How to engage users


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


33/50


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


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


36/50

Personas

Provide a user perspective forguiding design.

Represent important patterns about behavior.

Prompts new possibilities and features.

Personas


37/50

CASE STUDY

C ll b t


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

Google

Facebook

Youtube

Gmail

MoneycontrolIndiatimes

ebay

WikipediaWordpress

IM

icicibankYahoo

Orkut

Rapidshare

cricinfo

naukri

Knowledge of Mumbai City

I f ti S k


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

Google

Facebook

Youtube

Gmail

Moneycontrol

ebay

Wikipedia

WordpressIM

icicibank

Yahoo

Knowledge of Mumbai City


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


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


42/50


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


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

??


45/50

CASE STUDY

Who is our user


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


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


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


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


50/50

Thank You

ui design guide

Documents