An Event Apart 2008, Day 1, 3:45pm – 4:45pm

Read the previous talk in this series, On-the-Spot Usability Reviews by Robert Hoekman, Jr., or view An Event Apart’s Table of Contents

Designing the Details: Web-App UI Design Beyond the Basics

Jason Fried of 37 Signals

  • Hilight the craftmanship of our product
  • The calendar items that have active items are not emboldened, but normal, and the inactive pages are weakened. Don’t focus on normal and strong, but normal and weak. 
  • People often design the screens with a series of functions and goals, but think about flow and how that’s going to work. Use JS/Ajax to make flow more smooth.
  • Think about Before, During, and Next
  • You should minimize having to use the mouse. You don’t want to keep using your mouse. Think how you can focus people’s attention on the next thing they have to do. 
    • Add contact, the expected item pops up in Ajax popup, you select what you want. It pops up, the focus immediately goes to the text box where you want to type the note. They start typing, and then they use the mouse for the first time to add the item.
    • Next time people will want to add a follow up task. So, add a little yellow bar there with the “Add a task” link deal to it, which will expand to a text box with the allowance of an addition of a task.
  • Copywriting is key
    • “Who can see this person?” It’s a permissions issue, but don’t make it “Permissions”. Make it “Who can see this person?” Then continue the conversation with the options: “Everyone, Only I Can, Select a group…, Select people…”
    • Write your copy like you would talk to someone. Change things, don’t do person(s). Make it “Delete the selected person” and then “Delete the 2 selected people”. Just like we pay attention to pixels, these things matter because it contributes to the user experience.
    • Be as explicit as you possibly can. Don’t do “Advanced”, give people an idea. 
    • If you’re going to “add a category”, type “Add This Category” to the submit button. Don’t say “Submit”. No one says that. Say what you mean.
  • When hovering over stuff and having sections activate (like a hover tab that appears on hover of a TR), let it stick around a bit in case they overshoot. They have found .25 seconds to be a good amount of delay time. If off the target for over .25s, it will disappear then. This is the same for certain areas that for someone reason you want to have a delay to appear as well: .25s.
  • Allow things to have a delay. We’re accustomed in nature to things not happening instantly. When checking off an item in a todo list, allow it to relatively slowly (slower than instant) cross out, and then fade out to delete. This seems more natural.
  • Photographic memory
    • The app should remember things.
    • Create a task – there is a checkbox for “Let everyone see this task”. After making the post, remember this. Remember the last default settings, because whatever they just had as a preference they will likely want to keep for the next time around.
  • What just happened?
    • Allow ppl to know that something has happened without having to reload the page. The Yellow Fade Technique™. Also known as .highlight, or whathaveyou. Before the page would reload, but now in the Ajax world, this allows a notification. It feels natural.
    • Allow dialogs to come up that notify and then fade away. Give them some sort of confirmation that it actually worked.
  • Drag and drop visual cues to allow people to do tasks with an immediate visceral experience
    • reorder TRs by drag and drop
    • Show information (the “drag this item to a page in the sitebar to move the note to that page” box) as it’s needed – not on an immediate click, but wait until they’ve gone 200px to the right (toward the sidebar).
  • Eliminate error messages where you can.
    • Most cases it’s not an error, but an inconvenience. They add a new to-do list without naming it first. Most apps would say “error, requires a name”. Well can you just name it “List” and they can change it later? I think so. Just do that. Don’t error, just apply a default.
  • Applies thumbnails to a document as it is added, so on the grid view, can see the thumbnail next to the item. Must be generating it server side and applying an image thumbnail metadata to the piece of content.
  • These things take extra time, but these things matter. Jump people to where they need to go, implement JavaScript to let them know where they need to go.
  • 37Signals made a conscious decision that their products will not work without JavaScript. And that’s okay for them, some projects that won’t fly. But state that in the product requirements that you’re selling.
  • 37Signals uses Prototype
  • “We use Prototype because Sam, the guy who works for us, uh, he developed Prototype.” – Jason Fried
  • He likes to use words as much as possible without icons
  • The idea that everything has to be obvious is unimportant. The horizontal drag to a new page, that’s not mission critical, there’s nothing informing the user that they can do that, and that’s okay. If they don’t know that, it’s not a big deal either.
  • 37Signals doesn’t use wireframes, doesn’t believe in them. Doesn’t use Photoshop very often. Doesn’t use a Photoshop mockup. They go straight to HTML, because that’s real and that’s what the customer is going to use.
  • You never know if anything is any good until you build the real thing. Everything else is best guess, but once you start plugging in real content, it’s nothing. 95% of the time (cavalier made up stat) it is much better to start for realz.

View the next talk in this series: Underpants Over My Trousers by Andy Clarke, or skip to An Event Apart’s Table of Contents

Popularity: 6% [?]