Application Interface Design

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

5 comments

Comments 1 - 5 of 5 previous next Post a comment

  • BrendaDan Brenda Dan 9 months ago
    Like it, really clean and easy. I also want to know which font are these.
  • jakobdenk Jakob Denk 11 months ago
    brilliant presentation!
  • guest38bc75 guest38bc75 2 years ago
    What font did you use? I really enjoyed this presentation.
  • guestf59126 guestf59126 2 years ago
    This is a great slideshow. I have a hard time on designing interfaces. But this gives me a lot of help.
  • cgriego Chris Griego 2 years ago
    I was in the audience at WebJam07. Wanted to let you know where I had problems seeing on the projector.



    * Pencil-thin script font

    * Photo of grid paper (looked like a white slide)

    * Names on quotes
Post a comment
Embed Video
Edit your comment Cancel

245 Favorites & 1 Group

Application Interface Design - Presentation Transcript

  1. Application Interface Design Design & Development of an Issue Tracker
  2. o. ll He e is... y nam M imon tt D arre G ltant @ Consu ractice nior P Se
  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. “ The design of good houses requires an understanding of both the construction materials and the behavior of real humans. ” Peter Morville
  7. 1 Concepts & Relationships Interface design is really about the things you don’t see.
  8. “ If everything is important, nothing is. ” Unknown
  9. 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. “ 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. 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. 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. Reopen Reopen Web Entry Approve Enter Email Resolved Closed Open Resolution Resolution E API Enter Resolution On Hold / Blocked D
  14. Reopen Reopen Web Entry Enter Approve Email Open Resolved Closed Resolution Resolution API
  15. “ Very often, people confuse simple with simplistic. The nuance is lost on most. ” Clement Mok
  16. 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. Garrett’s Theory Opinion of Workflow Status and responsibility trump everything. 
  18. 2 IA & Layout Creating a logical framework.
  19. Header Sub-Header Single or Dual Body Column Column
  20. Primary focus is on the issue’s “story”.
  21. Just get it on paper.
  22. “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. 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. Smallest Effective Difference Edward Tufte Make all visual distinctions as subtle as possible, but still clear and effective. 
  25. System (No context for tabs.) Project (Tabs organizing issues.) New Issue (Green = Open Issue) View Issue (Emphasis on issue status.)
  26. 3 Creating Issues Getting data in.
  27. Customizable reminder for creating good issues.
  28. Seamless and efficient entry of multiple issues.
  29. Auto-selected based on category.
  30. 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. 4 Assessing the Situation What now?
  32. 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. First Draft ? Final Draft
  34. 1 2 3
  35. 3 4 5
  36. 5 6 7
  37. 7 8 9
  38. 9 10 11
  39. 5 Taking Care of Business Resolving & Closing Issues
  40. Just because it fits in a table, doesn’t mean it should be in one.
  41. Just get it on paper.
  42. Color-reinforced Status & Information Bar Additional Lower-Priority Meta-Data All activity and updates happen with comments.
  43. http://garrettdimon.com/archives/2007/8/20/the_tracker_status_bar/
  44. Status flags help reinforce the history behind an issue.
  45. Linking issues is natural and seamless within comments. http://garrettdimon.com/archives/2007/8/21/linking_issues_in_tracker/
  46. Status changes are visually and conceptually tied to comments. http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/
  47. Open Reopened Resolved Closed http://garrettdimon.com/archives/2007/8/20/tracker_status_amp_comments/
  48. 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. Reopen Reopen Web Entry Enter Approve Email Open Resolved Closed Resolution Resolution API
  50. “ However beautiful the strategy, you should occasionally look at the results. ” Winston Churchill
  51. Thanks! tracker.garrettdimon.com

Garrett DimonGarrett Dimon, 2 years ago

custom

32661 views, 245 favs, 43 embeds more stats

A peak behind the curtain to share some of the idea more

More Info

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Go to text version
  • Total Views 32661
    • 31808 on SlideShare
    • 853 from embeds
  • Comments 5
  • Favorites 245
  • Downloads 2945
Most viewed embeds
  • 210 views on http://therealadam.com
  • 170 views on http://www.dreamcss.com
  • 137 views on http://dreamcss.blogspot.com
  • 78 views on http://www.noventilador.com.br
  • 62 views on http://css3.gr

more

All embeds
  • 210 views on http://therealadam.com
  • 170 views on http://www.dreamcss.com
  • 137 views on http://dreamcss.blogspot.com
  • 78 views on http://www.noventilador.com.br
  • 62 views on http://css3.gr
  • 24 views on http://www.cnblogs.com
  • 23 views on http://beatskate.com
  • 21 views on http://blog.stevewong.org
  • 14 views on http://frankwinter.com
  • 14 views on http://hrispd-vs2008
  • 13 views on http://veenadesign.blogspot.com
  • 10 views on http://staging.ddb.com
  • 8 views on http://blog.ketankhairnar.com
  • 6 views on http://axelthefreeze.ax.funpic.de
  • 6 views on http://designwebinar.com
  • 5 views on http://1134745874.nvmodules.netvibes.com
  • 5 views on http://missha.tumblr.com
  • 4 views on http://tumblr.tavon.org
  • 4 views on http://apprentieweb.blogspot.com
  • 4 views on http://bb.itc.nl
  • 4 views on http://www.agglom.com
  • 3 views on http://bravenewdays.blogspot.com
  • 2 views on http://molecularmanufacture.com
  • 2 views on http://www.premativedesign.blogspot.com
  • 2 views on http://www.veenadesign.blogspot.com
  • 2 views on http://www.filescon.com
  • 2 views on http://deciphermentinecotecture.blogspot.com
  • 2 views on http://localhost
  • 2 views on https://my.thomson.com
  • 1 views on http://blog.markerstudio.com
  • 1 views on http://www.blogger.com
  • 1 views on http://www.rapidshareeasy.com
  • 1 views on http://2008-2009-fall.moodle.bilkent.edu.tr
  • 1 views on http://2008-2009-spring.moodle.bilkent.edu.tr
  • 1 views on http://1134736244.nvmodules.netvibes.com
  • 1 views on http://kkjmyazi.cnblogs.com
  • 1 views on http://daniseuba.wordpress.com
  • 1 views on http://www.familylegacyvideos.com
  • 1 views on http://www.poetpainter.com
  • 1 views on http://www.markboulton.co.uk
  • 1 views on http://floorrobot.com
  • 1 views on http://healthcarerobots.com
  • 1 views on http://209.85.215.104

less

Flagged as inappropriate Flag as inappropriate
Flag as innappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel

Categories

Groups / Events