Advance technique for designing web application

Transcript

1. Advanced techniques for designing web app interfaces Alvin Woon Design

   Lead, Plurk Saturday, 12 January, 13

2. We are designing a web application, not a promotion/ marketing

   website. Goal is to help user gets thing done Saturday, 12 January, 13

3. Steps before actual design Saturday, 12 January, 13

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. Saturday, 12 January, 13

5. what are end goals? • Clear my desk before I

   leave for home. • Make good business decisions based on my data. • Find problems proactively before they become crit ical. 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 3 most important thing in personas creation: profile, scenario and avatar Saturday, 12 January, 13

6. Saturday, 12 January, 13

7. Saturday, 12 January, 13

8. Saturday, 12 January, 13

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) Saturday, 12 January, 13

10. Card sorting Saturday, 12 January, 13

11. in other words... card sorting is useful in grouping different,

    scattered content into Saturday, 12 January, 13

12. Saturday, 12 January, 13

13. Saturday, 12 January, 13

14. Wireframing • establish consensus of ideas between various stakeholders •

    designer and developer know where 'things at' • easier to change wireframe on the fly then actual pixel-perfect mockup • more important in this ajax era - more quick screens to show the state of things. Saturday, 12 January, 13

15. seth - subimage llc Saturday, 12 January, 13

16. Saturday, 12 January, 13

17. Wireframe software • axure, gliffy (professional, expensive, popular among UX

    in big corporations. • DENIM (by University of Washington, open source, free) • Alvin's favorite - pencil and paper :-) Saturday, 12 January, 13

18. Task modeling and user flows - if you design ten

    states/pages for a UI component, how does an engineer know the c onditions 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. Saturday, 12 January, 13

19. Saturday, 12 January, 13

20. Saturday, 12 January, 13

21. Saturday, 12 January, 13

22. Saturday, 12 January, 13

23. Saturday, 12 January, 13

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. Saturday, 12 January, 13

25. Saturday, 12 January, 13

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 Saturday, 12 January, 13

27. Saturday, 12 January, 13

28. Saturday, 12 January, 13

29. Saturday, 12 January, 13

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 Saturday, 12 January, 13

31. Responsive UI • speed is the biggest user experience improvement

    we can provide to users • all of the things I'm going to present today will be useless if your web application is slow Saturday, 12 January, 13

32. Clear navigation • use existing design pattern • avoid dropdown

    whenever possible • breadcrumb is overrated (undo, proper support of back button is more important) • use card sorting to organize your Saturday, 12 January, 13

33. Make it easy for users to recover from mistakes •

    autosave • undo • informative error messages • unobstrusive reminder/warning Saturday, 12 January, 13

34. Choose a good default for user • many choices =

    more time to make decisions. Clutter, too many options. Hick's Law. • your app might fail because of lack of features, but never because of lack of UI and execution choices. Saturday, 12 January, 13

35. Saturday, 12 January, 13

36. Adaptive UI • providing different UI to different type of

    users. • help user advances from novice, intermediate to advance level. Saturday, 12 January, 13

37. Saturday, 12 January, 13

38. Saturday, 12 January, 13

39. Reuse existing design elements • review current design components. reuse

    when possible • try to stick with existing color scheme, typography, spacing • consistency in design = design elements Saturday, 12 January, 13

40. Effective color combination • emphasize on contrast, whitespace, good typography

    and consistent alignment • learn about the fundamentals of color theory. • if you don't know what color to use - use light blue/ grey. Color blind-friendly, universal and culturally peaceful. Saturday, 12 January, 13

41. Color Theory Saturday, 12 January, 13

42. analogous colors scheme Saturday, 12 January, 13

43. complementary colors scheme Saturday, 12 January, 13

44. conservative color scheme Saturday, 12 January, 13

45. explosive color scheme Saturday, 12 January, 13

46. color blindness Saturday, 12 January, 13

47. Post launch: Study your users • biggest social sites dedicate

    hundreds of servers for analytic purposes to study users cognitive style when using their site. • forget pageviews, visits. learn to dig deep: entrance page, time on page, Saturday, 12 January, 13

48. Saturday, 12 January, 13

49. Keep iterating... • AB testing • Use your analytic data

    and set a goal • everything can be improved, let Saturday, 12 January, 13

50. Saturday, 12 January, 13

51. Saturday, 12 January, 13

52. Saturday, 12 January, 13

53. the end =) questions? Saturday, 12 January, 13