Advanced techniques for designing web app interfaces Alvin Woon Design Lead, Plurk
We are designing a web application, not a promotion/marketing website. Goal is to help user gets thing done
Steps before actual design
Personas a summary representation of the UI's intended users, often described as real people. - To understand personas and...
what are end goals? <ul><ul><li>Clear my desk before I leave for home. </li></ul></ul><ul><ul><li>Make good business decis...
 
 
 
but... - inaccurate/biased pesonas lead to fictional UI trying to help fictional users reach their fictional end goals - i...
Card sorting ...a method for discovering the latent structure in an unsorted list of statements or ideas. The investigator...
in other words... card sorting is useful in grouping different, scattered content into similar sections. 
 
 
Wireframing <ul><ul><li>establish consensus of ideas between various stakeholders </li></ul></ul><ul><ul><li>designer and ...
seth - subimage llc
 
Wireframe software <ul><ul><li>axure, gliffy  (professional, expensive, popular among UX in big corporations. </li></ul></...
Task modeling and user flows - if you design ten states/pages for a UI component, how does an engineer know the conditions...
 
 
 
 
 
Paper prototyping - prototyping interface using paper-based product (DUH!)   - encourage fast iterations: you can switch a...
 
if you are bad at drawing... there are some ready-to-print design stencils available for you to mix and match. - Yahoo! De...
 
 
 
but... - be careful when prototyping AJAXy interface with paper. Hard to communicate the concept of 'loading time' in pape...
Responsive UI <ul><ul><li>speed is the biggest user experience improvement we can provide to users </li></ul></ul><ul><ul>...
Clear navigation <ul><ul><li>use existing design pattern </li></ul></ul><ul><ul><li>avoid dropdown whenever possible </li>...
Make it easy for users to recover from mistakes <ul><ul><li>autosave </li></ul></ul><ul><ul><li>undo </li></ul></ul><ul><u...
Choose a good default for  user <ul><ul><li>many choices = more time to make decisions. Clutter, too many options. Hick's ...
 
Adaptive UI <ul><ul><li>providing different UI to different type of users. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>...
 
 
Reuse existing design elements <ul><ul><li>review current design components. reuse when possible </li></ul></ul><ul><li>  ...
Effective color combination <ul><ul><li>emphasize on contrast, whitespace, good typography and consistent alignment </li><...
Color Theory
analogous colors scheme
complementary colors scheme
conservative color scheme
explosive color scheme
color blindness
Post launch: Study your users <ul><ul><li>biggest social sites dedicate hundreds of servers for analytic purposes to study...
 
Keep iterating... <ul><ul><li>AB testing </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Use your analytic data and set a g...
 
 
 
the end =) questions?
Upcoming SlideShare
Loading in …5
×

Advanced Techniques For Designing Web App Inte

1,235 views

Published on

Published in: Design, Business, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,235
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
19
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Advanced Techniques For Designing Web App Inte

  1. 1. Advanced techniques for designing web app interfaces Alvin Woon Design Lead, Plurk
  2. 2. We are designing a web application, not a promotion/marketing website. Goal is to help user gets thing done
  3. 3. Steps before actual design
  4. 4. Personas a summary representation of the UI's intended users, often described as real people. - To understand personas and its importance, we have to understand the meaning of end goals . - End goal is the most significant factors in determining the overall product experience.
  5. 5. what are end goals? <ul><ul><li>Clear my desk before I leave for home. </li></ul></ul><ul><ul><li>Make good business decisions based on my data. </li></ul></ul><ul><ul><li>Find problems proactively before they become critical. </li></ul></ul><ul><li>UX practitioners must translate end goals into a product’s behaviors, tasks, look, and feel. Persona helps humanize the process in doing so.  http://www.uxmatters.com </li></ul><ul><li>3 most important thing in personas creation: profile, scenario and avatar </li></ul>
  6. 9. but... - inaccurate/biased pesonas lead to fictional UI trying to help fictional users reach their fictional end goals - interview real people, don't assume you know what a teenage girl/60 grandpa wants. - using personas when designing for 'everyone' risk alienating certain type of users (think social site)
  7. 10. Card sorting ...a method for discovering the latent structure in an unsorted list of statements or ideas. The investigator writes each statement on a small index card and requests six or more informants to sort these cards into groups or clusters, working on their own. - usabilityNET
  8. 11. in other words... card sorting is useful in grouping different, scattered content into similar sections. 
  9. 14. Wireframing <ul><ul><li>establish consensus of ideas between various stakeholders </li></ul></ul><ul><ul><li>designer and developer know where 'things at'  </li></ul></ul><ul><ul><li>easier to change wireframe on the fly then actual pixel-perfect mockup </li></ul></ul><ul><ul><li>more important in this ajax era - more quick screens to show the state of things.  </li></ul></ul>
  10. 15. seth - subimage llc
  11. 16.  
  12. 17. Wireframe software <ul><ul><li>axure, gliffy (professional, expensive, popular among UX in big corporations. </li></ul></ul><ul><ul><li>DENIM (by University of Washington, open source, free) </li></ul></ul><ul><ul><li>Alvin's favorite - pencil and paper :-)  </li></ul></ul>
  13. 18. Task modeling and user flows - if you design ten states/pages for a UI component, how does an engineer know the conditions under which each of the ten states appears? - task flows = diagram (flowcharts or inter-linked components) that shows the relationship between components of various user interactions for an application. 
  14. 24. Paper prototyping - prototyping interface using paper-based product (DUH!)   - encourage fast iterations: you can switch and sketch and erase with apparent ease - photoshop has layers. In PP, you can have many papers/cards illustrating different interaction process. - allow users participation by drawing on mocks.
  15. 26. if you are bad at drawing... there are some ready-to-print design stencils available for you to mix and match. - Yahoo! Design Stencil - http://www.infodesign.com.au/usabilityresources/design/paperprototypinggraphics.asp
  16. 30. but... - be careful when prototyping AJAXy interface with paper. Hard to communicate the concept of 'loading time' in paper. - experimental navigation structure such as timeline, complex dropdown and etc are hard to illustrate via drawing. - localization, RTL interface
  17. 31. Responsive UI <ul><ul><li>speed is the biggest user experience improvement we can provide to users </li></ul></ul><ul><ul><li>all of the things I'm going to present today will be useless if your web application is slow </li></ul></ul><ul><ul><li>immediate feedback </li></ul></ul><ul><ul><li>cheat if you have to </li></ul></ul>
  18. 32. Clear navigation <ul><ul><li>use existing design pattern </li></ul></ul><ul><ul><li>avoid dropdown whenever possible </li></ul></ul><ul><ul><li>breadcrumb is overrated (undo, proper support of back button is more important) </li></ul></ul><ul><ul><li>use card sorting to organize your content. Make sure you user can create a quick mental flow of the pages they have visited </li></ul></ul>
  19. 33. Make it easy for users to recover from mistakes <ul><ul><li>autosave </li></ul></ul><ul><ul><li>undo </li></ul></ul><ul><ul><li>informative error messages  </li></ul></ul><ul><ul><li>unobstrusive reminder/warning </li></ul></ul>
  20. 34. Choose a good default for  user <ul><ul><li>many choices = more time to make decisions. Clutter, too many options. Hick's Law. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>your app might fail because of lack of features, but never because of lack of UI and execution choices. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>more options, more screens to test, more alternate bugs. </li></ul></ul>
  21. 36. Adaptive UI <ul><ul><li>providing different UI to different type of users. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>help user advances from novice, intermediate to advance level. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>personalization works if accuracy of prediction is improved </li></ul></ul>
  22. 39. Reuse existing design elements <ul><ul><li>review current design components. reuse when possible </li></ul></ul><ul><li>  </li></ul><ul><ul><li>try to stick with existing color scheme, typography, spacing </li></ul></ul><ul><li>  </li></ul><ul><ul><li>consistency in design = design elements wont fight for user attention at the same time. </li></ul></ul>
  23. 40. Effective color combination <ul><ul><li>emphasize on contrast, whitespace, good typography and consistent alignment </li></ul></ul><ul><li>  </li></ul><ul><ul><li>learn about the fundamentals of color theory. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>if you don't know what color to use - use light blue/grey. Color blind-friendly, universal and culturally peaceful. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Choose color that reflects the sentiment of your target audience. Conservative vs Explosive. </li></ul></ul>
  24. 41. Color Theory
  25. 42. analogous colors scheme
  26. 43. complementary colors scheme
  27. 44. conservative color scheme
  28. 45. explosive color scheme
  29. 46. color blindness
  30. 47. Post launch: Study your users <ul><ul><li>biggest social sites dedicate hundreds of servers for analytic purposes to study users cognitive style when using their site. </li></ul></ul><ul><li>  </li></ul><ul><ul><li>forget pageviews, visits. learn to dig deep: entrance page, time on page, heatmap, eye tracking, AB testing </li></ul></ul>
  31. 49. Keep iterating... <ul><ul><li>AB testing </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Use your analytic data and set a goal </li></ul></ul><ul><li>  </li></ul><ul><ul><li>everything can be improved, let the data speaks to you. Don't look for data to support your design reasoning. Be honest. </li></ul></ul>
  32. 53. the end =) questions?

×