Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Application Interface Design (2007)

A9179349dd2bdc67f377719f56d85656?s=47 Garrett Dimon
September 08, 2011

Application Interface Design (2007)

A presentation from Webmaster Jam Session 2007 discussing application interface design decisions in the context of a bug and issue tracker.


Garrett Dimon

September 08, 2011

More Decks by Garrett Dimon

Other Decks in Design


  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

  6. None
  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
  9. None
  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
  13. None
  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

  21. IA & Layout Creating a logical framework. 2

  22. None
  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.

  26. None
  27. None
  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.
  29. None
  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

  34. None
  35. None
  36. None
  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

  42. None
  43. None
  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

  52. None
  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.

  59. None
  60. None
  61. None
  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