Application Interface Design

Slideshow Transcript

1. Slide 1: Application Interface Design Design & Development of an Issue Tracker
2. Slide 2: o. ll He e is... y nam M imon tt D arre G ltant @ Consu ractice nior P Se
3. 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.
4. 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.
5. Slide 5: http://www.behance.com/Outfitter/Products/Dot-Grid-Book/9
6. Slide 7: “ The design of good houses requires an understanding of both the construction materials and the behavior of real humans. ” Peter Morville
7. Slide 8: 1 Concepts & Relationships Interface design is really about the things you don’t see.
8. Slide 10: “ If everything is important, nothing is. ” Unknown
9. Slide 11: Status Keep it. Resolution Redundant with the resolving comment. Assignee Keep it. Opener Captured implicitly. Creation Date Captured implicitly. Due Date Always “yesterday”. Priority should dictate this. Category Keep it. Type Overkill. Handle with categories. Release Soon, but not yet. Priority Keep it. Severity Factor it into Priority. Impact Factor it into Priority. LOE (Estimated) Creates overhead and doesn’t belong. LOE (Actual) Creates overhead and doesn’t belong. Browser/OS Doesn’t apply to issues. Capture in comments. Relationships Capture in comments.
10. Slide 12: “ 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. ” Paul Graham Foreword from Founders at Work
11. Slide 14: Email Web Entry API Reopen Received / Uncon rmed Reopen Confirm Open / Enter Approve Resolved / New / In Progress / Accept Closed Retest Con rmed Resolution Resolution Assigned Enter Resolution On Hold / Blocked
12. Slide 15: A Reopen Received / Uncon rmed Reopen Confirm Web Entry Email Approve Enter Resolved / New / Closed Accept Open Retest Resolution Resolution Con rmed C B Enter API Resolution On Hold / Blocked
13. Slide 16: Reopen Reopen Web Entry Approve Enter Email Resolved Closed Open Resolution Resolution E API Enter Resolution On Hold / Blocked D
14. Slide 17: Reopen Reopen Web Entry Enter Approve Email Open Resolved Closed Resolution Resolution API
15. Slide 18: “ Very often, people confuse simple with simplistic. The nuance is lost on most. ” Clement Mok
16. Slide 19: Reopen Reopen Web Entry Enter Approve Email Open Resolved Closed Resolution Resolution API Comment Comment 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
17. Slide 20: Garrett’s Theory Opinion of Workflow Status and responsibility trump everything. 
18. Slide 21: 2 IA & Layout Creating a logical framework.
19. Slide 23: Header Sub-Header Single or Dual Body Column Column
20. Slide 24: Primary focus is on the issue’s “story”.
21. Slide 25: Just get it on paper.
22. Slide 28: “Empty” tabs receive a The word “Active” is lower visual priority. subtle but important. The count is an informational Closed issues are out of and motivational reminder. the way in their own tab.
23. Slide 30: Before After A slight adjustment to the visual weight of the parentheses dramatically increases readability. http://garrettdimon.com/archives/2007/8/27/tracker_issue_tab_counts/
24. Slide 31: Smallest Effective Difference Edward Tufte Make all visual distinctions as subtle as possible, but still clear and effective. 
25. Slide 32: System (No context for tabs.) Project (Tabs organizing issues.) New Issue (Green = Open Issue) View Issue (Emphasis on issue status.)
26. Slide 33: 3 Creating Issues Getting data in.
27. Slide 37: Customizable reminder for creating good issues.
28. Slide 38: Seamless and efficient entry of multiple issues.
29. Slide 39: Auto-selected based on category.
30. Slide 40: A B B rhino-project@apple.tracker.com C D D F E E C F A The browser isn’t the only C interface to design for.
31. Slide 41: 4 Assessing the Situation What now?
32. Slide 44: Overall status New Issues are tells a story. one click away. Responsibility comes first. Subtle variances in typography create emphasis. Inactive projects still readily Recent activity accessible. is the pulse. http://garrettdimon.com/archives/2007/8/22/the_tracker_dashboard/
33. Slide 45: First Draft ? Final Draft
34. Slide 46: 1 2 3
35. Slide 47: 3 4 5
36. Slide 48: 5 6 7
37. Slide 49: 7 8 9
38. Slide 50: 9 10 11
39. Slide 51: 5 Taking Care of Business Resolving & Closing Issues
40. Slide 53: Just because it fits in a table, doesn’t mean it should be in one.
41. Slide 54: Just get it on paper.
42. Slide 55: Color-reinforced Status & Information Bar Additional Lower-Priority Meta-Data All activity and updates happen with comments.
43. Slide 56: http://garrettdimon.com/archives/2007/8/20/the_tracker_status_bar/
44. Slide 57: Status flags help reinforce the history behind an issue.
45. Slide 58: Linking issues is natural and seamless within comments. http://garrettdimon.com/archives/2007/8/21/linking_issues_in_tracker/
46. Slide 62: Status changes are visually and conceptually tied to comments. http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/
47. Slide 63: Open Reopened Resolved Closed http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/
48. Slide 64: 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. 
49. Slide 65: Reopen Reopen Web Entry Enter Approve Email Open Resolved Closed Resolution Resolution API
50. Slide 66: “ However beautiful the strategy, you should occasionally look at the results. ” Winston Churchill
51. Slide 67: Thanks! tracker.garrettdimon.com