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.

1. Application Interface Design Design & Development of an Issue Tracker
2. Senior Practice Consultant @ Hello. My name is... Garrett Dimon
3. What’s the application do? 1. Track issues. 2. Track software development bugs. 3. Enables and encourages resolutions to the issues and bugs.
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.
5. http://www.behance.com/Outfitter/Products/Dot-Grid-Book/9
7. Peter Morville The design of good houses requires an understanding of both the construction materials and the behavior of real humans. “ ”
8. Concepts & Relationships Interface design is really about the things you don’t see. 1
10. Unknown If everything is important, nothing is. “ ”
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.
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
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
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
16. Resolved Closed Open On Hold / Blocked Reopen Reopen Enter Resolution Approve Resolution Enter Resolution D Email API Web Entry E
17. Resolved Closed Open Reopen Reopen Enter Resolution Approve Resolution Email API Web Entry
18. Clement Mok Very often, people confuse simple with simplistic. The nuance is lost on most. “ ”
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
20. n Garrett’s Theory Opinion of Workflow Status and responsibility trump everything.
21. IA & Layout Creating a logical framework. 2
23. Header Body Column Sub-Header Single or Dual Column
24. Primary focus is on the issue’s “story” .
25. Just get it on paper.
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.
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
31. n Smallest Effective Difference Edward Tufte Make all visual distinctions as subtle as possible, but still clear and effective.
32. System (No context for tabs.) New Issue (Green = Open Issue) Project (Tabs organizing issues.) View Issue (Emphasis on issue status.)
33. Creating Issues Getting data in. 3
37. Customizable reminder for creating good issues.
38. Seamless and efficient entry of multiple issues.
39. Auto-selected based on category.
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.
41. Assessing the Situation What now? 4
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.
45. First Draft Final Draft ?
46. 1 2 3
47. 3 4 5
48. 5 6 7
49. 7 8 9
50. 9 10 11
51. Taking Care of Business Resolving & Closing Issues 5
53. Just because it fits in a table, doesn’t mean it should be in one.
54. Just get it on paper.
55. Color-reinforced Status & Information Bar Additional Lower-Priority Meta-Data All activity and updates happen with comments.
56. http://garrettdimon.com/archives/2007/8/20/the_tracker_status_bar/
57. Status flags help reinforce the history behind an issue.
58. http://garrettdimon.com/archives/2007/8/21/linking_issues_in_tracker/ Linking issues is natural and seamless within comments.
62. http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/ Status changes are visually and conceptually tied to comments.
63. http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/ Open Resolved Reopened Closed
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.
65. Resolved Closed Open Reopen Reopen Enter Resolution Approve Resolution Email API Web Entry
66. Winston Churchill However beautiful the strategy, you should occasionally look at the results. “ ”
67. Thanks! tracker.garrettdimon.com