User

Experience for

Large-scale Web-Applications

ges allen Ch

ngs arni Le

Des

ign

io olut S

ns

About me

- Industrial designer from IIT Mumbai - Designing User Experiences for 10 years - Now: Principal InteracBon Designer in Yahoo! - Past: Worked with HumanFactors
Contact: ashutoshk77@yahoo.com

I will talk about

SDLC

CLDS
challenges learnings design solu+ons

My perspective
UserXperience

Business

Technology

Development

Why User Experience ?

Business Needs

Technology Constraints

User Experience

Func+onal Needs

Challenges means
Things with a sense of dicultysuch as

Unclear understanding of expecta4ons + Compromised user experience + Stretched development 4melines + Mul4ple quality review cycles = Increased development cost

C1

Keeping

stakeholders

on the same page

L1

Often teams
Get requirements as LIVE Receive changing SCOPE (3>5>all browsers) Focus on own SILOS Lack in full understanding of product ECOSYSTEM Have low understanding of target USERS

S1
1

State the design goal

Compe44ve Review Related Products User Needs Data Gathering

Business Needs Stakeholder Views

Design Deni+on

Defining problem is as important as solution itself

S1

Design the Eco-system

Visualiza+on of design and interac+on ecosystem for a Netbook

S1

Define your users

Prole 2: Prospec4ve Customer

John Doe
45 Year old Director ITES NYC, NY

Tell me why I should do business with your company

John is a director of IT services in a major nance company for 4 years. He has been with this rm since 15 years. He is responsible for ApplicaBon development, maintenance of data recovery center, and planning for business in future. He does not use ABC product/Service.

Mo4va4ons

John is not involved with detailed invesBgaBon of individual enterprise soluBons. He needs to know the big picture, and will direct his sta for a detailed analysis before he makes a purchasing decision.

Goals

Get general product info know about compeBBve advantage Pricing info A[er sales support model and terms

Pain Points

Limited info about product on website Unclear info about customizaBon and future tech support Lack of customer support channels

C2

L2

Understanding User Needs

Iden4fy typical user groups Write simple user stories (usage scenarios) Document their KEY tasks (80% vs. 20%) Op4mize Task-ows (beyond current processes)

S2

Understand users
52 years old On the job 25+ years Uses computer 1-2 +mes per week Personality Traits: Professor in a PG college, about to re+re in 2-3 years. Infrequently uses computer at home to communicate with sons seUled in dierent ci+es. Key decision maker in extended family vaca+ons to spend quality +me in leisure as well as pilgrimage loca+ons.

PC Gupta
Professor Things I need to know Railways tour packages Detailed Travel I+nerary and route map Accommoda+on op+ons Easy and simple informa+on Dos and Don'ts for railway booking process Associated rules and regula+ons Promo+onal discounts Things I want to do Choose and tweak standard journey plans Plan journey stopovers Compare cost and nalize Travel plan Book +ckets Seek customer support

S2
Deal Desk

Streamline workflow
App 1
1. Review Documents

Enter Deal

Email Excel

App 2

2. Check Approvals Buyer Seller Agent

Sta

3. Close Deals

Deals: The Task Flow

1 2 3 4 5

View Deals

Iden4fy Deals that are Ready-to-Close

Review Funding

Allocate Funds

Handover to Back-Oce

C3

L3

Visualize future roadmap

Think ahead about future needs What you need aier 3years should start now Priori4ze and follow phased approach Naviga4on design and UI containers should grow

S3

Modular design

C4

L4

Find what users REALLY need

Interface Object
Objects
Traveler

User Tasks 1. Search Travel Plans 2. Find Trains 3. Plan Journey Breaks 4. Dene Travelers 5. Make Payment

Attributes
Gender Age First Name Last Name Address Contact Phone e-mail Login Password

Display type
List Input Form Read only Details

Actions
Save Edit Add New Copy Export Clear Delete

+
UI Container

object oriented interface structure

S4

Expose UI as needed
Show what users need NOT what database structure Use deferred creates Accordion panels Show/hide vs. enable/disable Dual Mode UI (basic and Advanced) Simple wizards Educa4ve interfaces (QA format)

C5

L5

UI

is

ALSO

responsible for Performance

Keep modular and uid UI containers Keep nested DIVs as simple as possible Use CSS Sprite to minimize HTTP requests Keep CSS and other assets lighter in size Dene and follow CSS nomenclature

S5

CSS sprites

C6

L6

Often development teams

Care about their own module Put less priority to UX guidelines Do not follow UI pamerns fully Hack solu4ons Prac4ce what is EASY NOT what is important

S6

Simple checklists

S6

Master repository for

UI wireframes CSS le and strict version control Image/sprite library Best coding prac4ces UI style guide UI layout templates UI controls

C7

Lack of communication

L7

Development teams
Re-invent the solu4ons NOT reuse Do not share hacked solu4ons Deviate from standard prac4ces Drop features instead of solving them

S7

Set

communication
Core team

channels

UX team

UI style guide Master CSS Sprite/images UI layout templates UI controls

Regular ow

Dev 1 Dev 2 Dev 3

Dev 4

Credits
@ Yahoo Image Search @ Google Images @ Flicker Images @ Core77 @ My Colleagues @ Learnings with my Clients

Contact: ashutoshk77@yahoo.com