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

Application Interface Design - Webmaster Jam Session - 2007

Garrett Dimon
PRO
September 21, 2007

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.

Garrett Dimon
PRO

September 21, 2007
Tweet

More Decks by Garrett Dimon

Other Decks in Design

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. [email protected]
    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. 1
    2
    3

    View Slide

  47. 3
    4
    5

    View Slide

  48. 5
    6
    7

    View Slide

  49. 7
    8
    9

    View Slide

  50. 9
    10
    11

    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