User experience design for large enterprise applications


Published on

My Talk at WebApps 2011, Bangalore. Organized by Silicon India.

Published in: Design, Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User experience design for large enterprise applications

  1. 1. User  Experience  for  Large-scale Web-Applications gesCh allen ngs Learni io ns Solut ign Des
  2. 2. About me…-­‐  Industrial  designer  from  IIT  Mumbai  -­‐  Designing  User  Experiences  for  10  years    -­‐  Now:  Principal  InteracBon  Designer  in  Yahoo!  -­‐  Past:  Worked  with  HumanFactors      Contact:  
  3. 3. I will talk about…SDLC CLDS challenges   learnings   design  solu+ons  
  4. 4. My perspective… UserXperience  Business   Technology   Development  
  5. 5. Why User Experience ? Technology   Business   Constraints   Needs   User  Experience   Func+onal   Needs  
  6. 6. Challenges means…Things  with  a  sense  of  difficulty…such  as   Unclear  understanding  of  expecta4ons   +   Compromised  user  experience   +   Stretched  development  4melines   +   Mul4ple  quality  review  cycles   =   Increased  development  cost  
  7. 7. C1 Keeping stakeholders on the same page
  8. 8. 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  
  9. 9. S1 State the design goal… Business  Needs   Compe44ve  Review     User  Needs  1   Stakeholder  Views   2   Related  Products   3   Data  Gathering   Design  Defini+on   “Defining problem is as important as solution itself”
  10. 10. S1 Design the Eco-system… Visualiza+on  of  design  and  interac+on  ecosystem  for  a  Netbook    
  11. 11. 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  
  12. 12. C2
  13. 13. 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)  
  14. 14. 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  different  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   Things  I  want  to  do     Railways  tour  packages    Choose  and  tweak  standard  journey  plans   Detailed  Travel  I+nerary  and  route  map    Plan  journey  stopovers   Accommoda+on  op+ons    Compare  cost  and  finalize  Travel  plan   Easy  and  simple  informa+on    Book  +ckets     Do’s  and  Donts  for  railway  booking  process    Seek  customer  support   Associated  rules  and  regula+ons   Promo+onal  discounts  
  15. 15. S2 Streamline workflow… App  1   1.  Review  Documents   Enter  Deal   Deal  Desk   Email   App  2   2.  Check  Approvals   Excel   Buyer   Seller   Agent   Staff   3.  Close  Deals                  Deals:  The  Task  Flow    1   2   3   4   5  View  Deals   Iden4fy  Deals  that   Review  Funding     Allocate  Funds   Handover   are  Ready-­‐to-­‐Close   to  Back-­‐Office  
  16. 16. C3
  17. 17. 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  
  18. 18. S3 Modular design…
  19. 19. C4
  20. 20. L4 Find what users REALLY need…User  Tasks   Interface  Object   Objects Attributes Display type Actions1.  Search  Travel  Plans  2.  Find  Trains     Traveler Gender List Save Age Input Form Edit3.  Plan  Journey  Breaks   +   First Name Read only Details Add New4.  Define  Travelers   Last Name Copy Address Export5.  Make  Payment   Contact Phone Clear e-mail Delete Login Password UI  Container   object  oriented  interface  structure  
  21. 21. 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)  
  22. 22. C5
  23. 23. 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  
  24. 24. S5 CSS sprites…
  25. 25. C6
  26. 26. 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  
  27. 27. S6 Simple checklists…
  28. 28. 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  
  29. 29. C7 Lack of communication
  30. 30. L7 Development teams… Re-­‐invent  the  solu4ons  NOT  reuse     Do  not  share  hacked  solu4ons   Deviate  from  standard  prac4ces   Drop  features  instead  of  solving  them  
  31. 31. S7 Set communication channels… Core  team   UI  style  guide   UX   Master  CSS   Sprite/images   team   UI  layout  templates   UI  controls   Regular  flow   Dev  4   Dev  1   Dev  2   Dev  3  
  32. 32. C Credits… @  Yahoo  Image  Search   @  Google  Images   @  Flicker  Images   @  Core77   @  My  Colleagues   @  Learnings  with  my  Clients  
  33. 33. Contact: