User experience design for large enterprise applications
33
Learnings Design Solutions Challenges User Experience for Large-scale Web-Applications
-
Upload
ashutosh-kumar -
Category
Design
-
view
2.702 -
download
1
description
My Talk at WebApps 2011, Bangalore. Organized by Silicon India.
Transcript of User experience design for large enterprise applications
Learnings
Design Solutions
Challenges
User Experience for
Large-scale Web-Applications
About me…
-‐ Industrial designer from IIT Mumbai -‐ Designing User Experiences for 10 years -‐ Now: Principal InteracBon Designer in Yahoo! -‐ Past: Worked with HumanFactors
Contact: [email protected]
I will talk about…
SDLC
design solu+ons
CLDS learnings
challenges
Business Technology Development
UserXperience
My perspective…
Why User Experience ?
Business Needs
Func+onal Needs
Technology Constraints
User Experience
Challenges means…
Unclear understanding of expecta4ons + Compromised user experience + Stretched development 4melines + Mul4ple quality review cycles = Increased development cost
Things with a sense of difficulty…such as
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
Business Needs Stakeholder Views
Compe44ve Review Related Products
User Needs Data Gathering
Design Defini+on
1 2 3
State the design goal…
“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… Profile 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 finance company for 4 years. He has been with this firm 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 staff 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-‐flows (beyond current processes)
Understand users… S2 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 different ci+es. Key decision maker in extended family vaca+ons to spend quality +me in leisure as well as pilgrimage loca+ons.
Things I want to do Things I need to know
Railways tour packages Detailed Travel I+nerary and route map Accommoda+on op+ons Easy and simple informa+on Do’s and Don'ts for railway booking process Associated rules and regula+ons Promo+onal discounts
Choose and tweak standard journey plans Plan journey stopovers Compare cost and finalize Travel plan Book +ckets Seek customer support
PC Gupta Professor
S2
Deal Desk
App 1
Enter Deal
View Deals
Staff
1 2 3 4 5
Iden4fy Deals that are Ready-‐to-‐Close
Allocate Funds Review Funding Handover to Back-‐Office
3. Close Deals
1. Review Documents
2. Check Approvals
Buyer
Seller
Agent
Deals: The Task Flow
App 2
Excel
Streamline workflow…
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…
User Tasks 1. Search Travel Plans 2. Find Trains 3. Plan Journey Breaks 4. Define Travelers 5. Make Payment
Interface Object Objects Attributes Display type Actions
Traveler Gender Age First Name Last Name Address Contact Phone e-mail Login Password
List Input Form Read only Details
Save Edit Add New Copy Export Clear Delete
+
UI Container
object oriented interface structure
S4 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)
Expose UI as needed…
C5
L5 UI is ALSO responsible for Performance
Keep modular and fluid UI containers
Keep nested DIVs as simple as possible
Use CSS Sprite to minimize HTTP requests
Keep CSS and other assets lighter in size
Define 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 file 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 channels…
Core team
Dev 1
Dev 2 Dev 3
Dev 4
UI style guide Master CSS Sprite/images UI layout templates UI controls
UX team
Regular flow
C Credits…
@ Yahoo Image Search
@ Google Images
@ Flicker Images
@ Core77
@ My Colleagues
@ Learnings with my Clients
Contact: [email protected]
