Dan Rubin - Design for User Experience

Transcript

1. Design for User Experience UX London 2012 Dan Rubin /

   @danrubin

2. What we do is not unique.

3. Physical product design = virtual product design.

4. Assume similarities, not differences.

5. We can learn from problems that have been solved elsewhere.

6. Example Responsive Web Design

7. Responsive Architecture

8. None
9. None

10. It is easier to relate to existing concepts.

11. 3 hours ≠ Enough Time

12. Richard Branson Me

13. Work differently in the context of design.

14. What are some of the distinct challenges you face today?

15. Academic vs. Practical

16. UX is often treated as an academic discipline.

17. Designers are often more practical.

18. Let’s resolve that dissonance.

19. Part I Think Like a Product Designer

20. What is your role?

21. For the next few hours, you are a Product Designer.

22. None

23. Affordance

24. ...the term affordance refers to the perceived and actual properties

    of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. Don Norman
25. None

26. Photo: Luiz Fernando Pilz (http:/ /www.sxc.hu/photo/249448)

27. Photo: Ivaylo Georgiev (http:/ /www.sxc.hu/photo/426359)

28. None
29. None
30. None
31. None
32. None

33. If your interface requires instructions, it needs to be redesigned.

34. Fit and Finish

35. Pixels, alignment, balance.

36. aka Build Quality

37. Exercise Thinking about the problem.

38. Step 1 Think in Features

39. Step 2 Usage and Experience

40. Step 3 Design How It Feels

41. None

42. Part II Practical Application

43. Understanding Designers

44. Designers see this:

45. http://www.flickr.com/photos/mckaysavage/2566331277/

46. And want to turn it into this:

47. http://www.flickr.com/photos/nicholas_t/281820290/

48. Margins and Spacing

49. Give your design breathing room.

50. Define reusable patterns.

51. None
52. None

53. (old) CNN.com margins, padding, borders: 6, 12, 18px

54. 12px

55. 12px 12px

56. 6px 6px

57. 18px

58. CNN’s article text size was 12px

59. Hierarchy communicates importance.

60. Big type stands out more than little type.

61. Large content areas are easier to see.

62. Size explains hierarchy.

63. None
64. None

65. Why low-res wireframes help designers.

66. Visual designers need room to work, to breathe.

67. None
68. None
69. None

70. As nature abhors a vacuum...

71. ...an ugly wireframe is the designer’s vacuum.

72. Discussion

73. Thank you! @danrubin / danrubin.is webgraph.com