Speak Interface: Conversations Between Developers and Designers

There are three questions you should ask when designing.
WHO is the user?
WHY are they here?
WHAT is most important to them?
The following exercises are designed to help you answer those questions and create a more productive conversation.

Transcript

1. PERSON
   PURPOSE
   PRIORITY
   knowing
   Design a PAGE by
   {
   Thursday, June 10, 2010
   

   View Slide

2. I’m @jessmartin
   Thursday, June 10, 2010
   

   View Slide

3. I build web
   applications
   Thursday, June 10, 2010
   

   View Slide

4. I work at
   @thinkrelevance
   Thursday, June 10, 2010
   

   View Slide

5. Let’s build something
   together
   Thursday, June 10, 2010
   

   View Slide

6. Meet Michael
   Thursday, June 10, 2010
   

   View Slide

7. Michael
   is a designer
   Thursday, June 10, 2010
   

   View Slide

8. Michael likes...
   Thursday, June 10, 2010
   

   View Slide

9. Thursday, June 10, 2010
   

   View Slide

10. canvas shoes
    Thursday, June 10, 2010
    

    View Slide

11. canvas shoes
    the color mauve
    Thursday, June 10, 2010
    

    View Slide

12. canvas shoes
    the color mauve
    loft apartments
    Thursday, June 10, 2010
    

    View Slide

13. Meet Jon
    Meet Jon
    Thursday, June 10, 2010
    

    View Slide

14. Jon is a
    developer
    Thursday, June 10, 2010
    

    View Slide

15. Jon likes...
    Thursday, June 10, 2010
    

    View Slide

16. Thursday, June 10, 2010
    

    View Slide

17. big O notation
    Thursday, June 10, 2010
    

    View Slide

18. big O notation
    being called a “rock star”
    Thursday, June 10, 2010
    

    View Slide

19. big O notation
    being called a “rock star”
    source control
    Thursday, June 10, 2010
    

    View Slide

20. Michael ~ Form
    Jon ~ Function
    Thursday, June 10, 2010
    

    View Slide

21. Meet the client
    Thursday, June 10, 2010
    

    View Slide

22. The client wants it
    done
    Thursday, June 10, 2010
    

    View Slide

23. Typical development
    process
    Thursday, June 10, 2010
    

    View Slide

24. Who’s missing from
    this picture?
    Thursday, June 10, 2010
    

    View Slide

25. The user!
    Client
    Developer Designer
    Thursday, June 10, 2010
    

    View Slide

26. Software is for people
    Thursday, June 10, 2010
    

    View Slide

27. Three Questions
    WHO is the user?
    WHY are they here?
    WHAT is most important?
    Thursday, June 10, 2010
    

    View Slide

28. Thursday, June 10, 2010
    

    View Slide

29. WHO is the user?
    PERSON
    Thursday, June 10, 2010
    

    View Slide

30. Software is for people
    Thursday, June 10, 2010
    

    View Slide

31. Day in the life
    Exercise #1
    Thursday, June 10, 2010
    

    View Slide

32. Thursday, June 10, 2010
    

    View Slide

33. Thursday, June 10, 2010
    

    View Slide

34. Gotta Wanna
    Exercise #2
    Thursday, June 10, 2010
    

    View Slide

35. Thursday, June 10, 2010
    

    View Slide

36. Extrinsic
    vs
    Intrinsic
    Thursday, June 10, 2010
    

    View Slide

37. WHY are they here?
    PURPOSE
    Thursday, June 10, 2010
    

    View Slide

38. Back-seat Driver
    Exercise #1
    Thursday, June 10, 2010
    

    View Slide

39. Imagine showing the
    page to your mom.
    What would you tell
    them to click next?
    Thursday, June 10, 2010
    

    View Slide

40. Cotton-Eyed Joe
    Exercise #2
    㽈 Where did ya come from? ̇
    ̇ Where did ya go? 㽈
    Thursday, June 10, 2010
    

    View Slide

41. Where is the user in
    the flow of the
    application?
    Thursday, June 10, 2010
    

    View Slide

42. Thursday, June 10, 2010
    

    View Slide

43. Thursday, June 10, 2010
    

    View Slide

44. WHAT is most important?
    PRIORITY
    Thursday, June 10, 2010
    

    View Slide

45. You know the PERSON
    and the PURPOSE
    Thursday, June 10, 2010
    

    View Slide

46. MVP Test
    Exercise #1
    Most Valuable Piece of information
    Thursday, June 10, 2010
    

    View Slide

47. What’s the single most
    important information
    on the page?
    Thursday, June 10, 2010
    

    View Slide

48. Variations
    Thursday, June 10, 2010
    

    View Slide

49. Design for Mobile First
    Variation #1
    credit: Luke W
    Thursday, June 10, 2010
    

    View Slide

50. “Losing 80% of your screen space
    forces you to focus. You need to
    make sure that what stays on the
    screen is the most important
    set of features for your
    customers and your business.”
    - Luke W
    Thursday, June 10, 2010
    

    View Slide

51. Design From Inside Out
    Variation #2
    credit: Ryan Singer
    Thursday, June 10, 2010
    

    View Slide

52. “It forces you to focus on what
    matters most first, what matters
    second-most second, etc. When
    you nail the core the majority of
    the UI value has already been
    delivered.”
    - Ryan Singer
    Thursday, June 10, 2010
    

    View Slide

53. Evaluating the MVP
    Thursday, June 10, 2010
    

    View Slide

54. Squint Test
    Exercise #2
    Thursday, June 10, 2010
    

    View Slide

55. Squint at the page.
    What stands out?
    Thursday, June 10, 2010
    

    View Slide

56. Font Size Test
    Exercise #3
    Thursday, June 10, 2010
    

    View Slide

57. What’s the largest font
    size on the page?
    Thursday, June 10, 2010
    

    View Slide

58. WHO is the user?
    • Day in the Life
    • Gotta Wanna
    WHY are they here?
    • Back-seat Driver
    • Cotton-Eyed Joe
    WHAT is most important?
    • MVP Test
    • Squint Test
    • Font Size Test
    Thursday, June 10, 2010
    

    View Slide

59. Software is for people
    Thursday, June 10, 2010
    

    View Slide

60. Questions?
    Feedback: http://spkr8.com/t/3440
    Slides & Worksheets: SpeakInterface.com
    @jessmartin
    Thursday, June 10, 2010
    

    View Slide