Application Interface Design - Webmaster Jam Session - 2007

A super-deep dive into the process for designing a hosted bug and issue tracking application by exploring the evolution of the ideas from sketches to full-fidelity mockups.

Transcript

1. Application Interface Design
   Design & Development of an Issue Tracker
   

   View Slide

2. Senior Practice Consultant @
   Hello.
   My name is...
   Garrett Dimon
   

   View Slide

3. What’s the application do?
   1. Track issues.
   2. Track software development bugs.
   3. Enables and encourages resolutions to the issues and bugs.
   

   View Slide

4. Ground rules...
   1. Stop me at any time for questions or discussion.
   2. No formal usability testing. It’s based on my experience.
   3. It’s not finished. There are mistakes. Things will change.
   4. Let’s focus on “why” and “how”, not “what”.
   5. Your mileage may vary.
   

   View Slide

5. http://www.behance.com/Outfitter/Products/Dot-Grid-Book/9
   

   View Slide

6. View Slide

7. Peter Morville
   The design of good houses requires
   an understanding of both the
   construction materials and the
   behavior of real humans.
   “
   ”
   

   View Slide

8. Concepts & Relationships
   Interface design is really about the things you don’t see.
   1
   

   View Slide

9. View Slide

10. Unknown
    If everything is important, nothing is.
    “ ”
    

    View Slide

11. Status
    Resolution
    Assignee
    Opener
    Creation Date
    Due Date
    Category
    Type
    Release
    Priority
    Severity
    Impact
    LOE (Estimated)
    LOE (Actual)
    Browser/OS
    Relationships
    Redundant with the resolving
    comment.
    Keep it.
    Captured implicitly.
    Captured implicitly.
    Always “yesterday”. Priority should
    dictate this.
    Keep it.
    Overkill. Handle with categories.
    Soon, but not yet.
    Keep it.
    Factor it into Priority.
    Factor it into Priority.
    Creates overhead and doesn’t belong.
    Creates overhead and doesn’t belong.
    Doesn’t apply to issues. Capture in
    comments.
    

    View Slide

12. Paul Graham
    A few years ago I read an article in
    which a car magazine modified the
    “sports” model of some production
    car to get the fastest possible
    standing quarter mile. You know
    how they did it? They cut off all the
    crap the manufacturer had bolted
    onto the car to make it look fast.
    “
    ”
    Foreword from Founders at Work
    

    View Slide

13. View Slide

14. Received /
    Uncon rmed
    Resolved /
    Retest
    Closed
    Open /
    In Progress /
    Assigned
    On Hold /
    Blocked
    Reopen
    Reopen
    Accept
    Enter
    Resolution
    Approve
    Resolution
    Enter
    Resolution
    New /
    Con rmed
    Confirm
    Email
    API Web Entry
    

    View Slide

15. Resolved /
    Retest
    Closed
    Open
    On Hold /
    Blocked
    Reopen
    Reopen
    Enter
    Resolution
    Approve
    Resolution
    Enter
    Resolution
    Received /
    Uncon rmed
    Accept
    New /
    Con rmed
    Confirm
    A
    B
    C
    Email
    API
    Web Entry
    

    View Slide

16. Resolved Closed
    Open
    On Hold /
    Blocked
    Reopen
    Reopen
    Enter
    Resolution
    Approve
    Resolution
    Enter
    Resolution
    D
    Email
    API
    Web Entry
    E
    

    View Slide

17. Resolved Closed
    Open
    Reopen
    Reopen
    Enter
    Resolution
    Approve
    Resolution
    Email
    API
    Web Entry
    

    View Slide

18. Clement Mok
    Very often, people confuse simple
    with simplistic. The nuance is lost on
    most.
    “
    ”
    

    View Slide

19. Resolved Closed
    Open
    Reopen
    Reopen
    Enter
    Resolution
    Approve
    Resolution
    Email
    API
    Web Entry
    With each arrow, we’re doing
    one or more of the following
    1. Comment
    2. Update Status
    3. Attach a File
    4. Reassign
    5. Update Priority/Category
    Comment
    Comment
    

    View Slide

20. n
    Garrett’s Theory Opinion of Workflow
    Status and responsibility
    trump everything.
    

    View Slide

21. IA & Layout
    Creating a logical framework.
    2
    

    View Slide

22. View Slide

23. Header
    Body Column
    Sub-Header
    Single or Dual
    Column
    

    View Slide

24. Primary focus
    is on the
    issue’s “story”
    .
    

    View Slide

25. Just get it on paper.
    

    View Slide

26. View Slide

27. View Slide

28. The word “Active” is
    subtle but important.
    The count is an informational
    and motivational reminder.
    “Empty” tabs receive a
    lower visual priority.
    Closed issues are out of
    the way in their own tab.
    

    View Slide

29. View Slide

30. http://garrettdimon.com/archives/2007/8/27/tracker_issue_tab_counts/
    A slight adjustment to the visual weight of the
    parentheses dramatically increases readability.
    Before
    After
    

    View Slide

31. n
    Smallest Effective Difference Edward Tufte
    Make all visual distinctions as
    subtle as possible, but still clear
    and effective.
    

    View Slide

32. System
    (No context for tabs.)
    New Issue
    (Green = Open Issue)
    Project
    (Tabs organizing issues.)
    View Issue
    (Emphasis on issue status.)
    

    View Slide

33. Creating Issues
    Getting data in.
    3
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. Customizable reminder
    for creating good issues.
    

    View Slide

38. Seamless and
    efficient entry of
    multiple issues.
    

    View Slide

39. Auto-selected based
    on category.
    

    View Slide

40. rhino-project@apple.tracker.com
    A
    B
    C
    D
    E
    F
    A
    B
    C
    D
    E
    F
    C
    The browser isn’t the only
    interface to design for.
    

    View Slide

41. Assessing the Situation
    What now?
    4
    

    View Slide

42. View Slide

43. View Slide

44. http://garrettdimon.com/archives/2007/8/22/the_tracker_dashboard/
    Subtle variances
    in typography
    create emphasis.
    Responsibility
    comes first.
    New Issues are
    one click away.
    Inactive projects
    still readily
    accessible.
    Overall status
    tells a story.
    Recent activity
    is the pulse.
    

    View Slide

45. First Draft
    Final Draft
    ?
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. Taking Care of Business
    Resolving & Closing Issues
    5
    

    View Slide

52. View Slide

53. Just because it
    fits in a table,
    doesn’t mean it
    should be in one.
    

    View Slide

54. Just get it
    on paper.
    

    View Slide

55. Color-reinforced Status
    & Information Bar
    Additional Lower-Priority
    Meta-Data
    All activity and updates
    happen with comments.
    

    View Slide

56. http://garrettdimon.com/archives/2007/8/20/the_tracker_status_bar/
    

    View Slide

57. Status flags help
    reinforce the history
    behind an issue.
    

    View Slide

58. http://garrettdimon.com/archives/2007/8/21/linking_issues_in_tracker/
    Linking issues is
    natural and seamless
    within comments.
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/
    Status changes
    are visually and
    conceptually tied
    to comments.
    

    View Slide

63. http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/
    Open
    Resolved
    Reopened
    Closed
    

    View Slide

64. n
    Conway’s Law
    It is a consequence of the fact that two
    software modules A and B cannot interface
    correctly with each other unless the design
    and implementer of A communicates with
    the designer and implementer of B. Thus the
    interface structure of a software system
    necessarily will show a congruence with the
    social structure of the organization that
    produced it.
    

    View Slide

65. Resolved Closed
    Open
    Reopen
    Reopen
    Enter
    Resolution
    Approve
    Resolution
    Email
    API
    Web Entry
    

    View Slide

66. Winston Churchill
    However beautiful the strategy,
    you should occasionally look at
    the results.
    “
    ”
    

    View Slide

67. Thanks!
    tracker.garrettdimon.com
    

    View Slide