Application Interface Design - Part 2

Application Interface Design
Design & Development of an Issue Tracker

---

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

---

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

---

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.

---

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

---

---

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

---

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

---

---

If everything is important, nothing is.
“
”
Unknown

---

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
Overkil . 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.

---

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
”
Paul Graham

---

---

Email
API
Web Entry
Reopen
Received /
Unconfirmed
Reopen
Confirm
Open /
New /
Enter
Resolved /
Approve
Accept
In Progress /
Confirmed
Retest
Closed
Assigned
Resolution
Resolution
Enter
Resolution
On Hold /
Blocked

---

Reopen
A
Received /
Unconfirmed
Reopen
Confirm
Web Entry
Email
Enter
Resolved /
Approve
New /
Accept
Open
Retest
Closed
Confirmed
Resolution
Resolution
C
B
API
Enter
Resolution
On Hold /
Blocked

---

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

---

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

---

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

---

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

---

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

---

2
IA & Layout
Creating a logical framework.

---

---

Header
Sub-Header
Body
Column
Single or Dual
Column

---

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

---

Just get it on paper.

---

---

---

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

---

---

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/

---

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

---

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

---

3
Creating Issues
Getting data in.

---

---

---

---

Customizable reminder
for creating good issues.

---

Seamless and
efficient entry of
multiple issues.

---

Auto-selected
based on category.

---

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

---

4
Assessing the Situation
What now?

---

---

---

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

---

First Draft
?
Final Draft

---

1
2
3

---

3
4
5

---

5
6
7

---

7
8
9

---

9
10
11

---

5
Taking Care of Business
Resolving & Closing Issues

---

---

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

---

Just get it
on paper.

---

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

---

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

---

Status flags help
reinforce the history
behind an issue.

---

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

---

---

---

---

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

---

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

---

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.


---

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

---

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

---

Thanks!
tracker.garrettdimon.com

---