In this edition of Designing Details, I want to share with you a technique we use to go the extra mile on interface design. We believe little touches like these really improve the overall experience when using our products. The best way to show you is with a video:
Jason Fried wrote this on Apr 22 2008
There are24 comments.
I thought that was really cool. Was wondering if you guys will decide some day to write a book on designing user interfaces with such details in mind, not the usual spiel we got so used to reading off the textbooks.
Brilliant! It really is all about the little things, and I love that you guys both pay attention to this and share it with your audience.
Quick question/suggestion: Noticed in the Highrise example the image of the wine label is visible on the page pre-edit, then goes away on edit, then reappears only as a filetype/file name after clicking on options. Is there a technical reason for not showing a thumbnail or the full image in the edit state? Might come in handy to keep a visual cue if there were multiple images in a note and a user had to remember which one needed editing.
Along these lines, I love how text boxes start small and then grow as you fill them, keeping the buttons on screen. (Although, I just played with this now, and if you start editing near the bottom of the screen, and the box expands, you may lose part of your form)
Zach
on 22 Apr 08
I think you should do more little videos like this, it’d be a lot harder to get the point across with just words, and its easier to see “as the user would see” this way.
Very cool concept! Just curious, what if the bottom of the edit state stuff is so far down that the top of the edit state scrolls out of view? Would you stop the scrolling so that top of the edit area stops at the top of the viewable area?
Jason: I added a link to each of the products you demoed, but I accidentally added a tag instead of a comment on one part of it. Sorry, I didn’t mean to muck up your timeline. You can log into Viddler, at your leisure, and delete that annoying URL tag.
Great video, and thanks for giving Viddler a spin for the last few videos you’ve posted.
(Now onto my thoughts on your video.)
The fact that 37signals pays attention to detail is no secret. Showing this video demo definitely solidifies, I’m sure, in everyone’s mind that some of these little tweaks were no accident, but I’m fairly certain that many people like your products because of this “polish”. Kudos to the entire team for taking the time to sweat the details, so we don’t have to sweat using your products.
Steve
on 22 Apr 08
@37signals
I notice in the screenshot that it is called “Acme Corp.”, I thought you are against using Personas.
Did I misunderstand ? Since it looks like you do use personas based on this screenshot.
@Steve- Even if they don’t use formal personae, isn’t it still OK to test their stuff with dummy pages that aren’t called “Dummy Contact 1”, “Dummy Contact 2”, etc.? This test page is just a contact in Highrise – Janice Brown’s not a user anyway. I wouldn’t be surprised if she was a default contact that comes with Highrise – like those pictures of other people that you get in a new wallet.
Is “personae” too much like “perpendicular”? Does it make you uncomfortable?
Hopefully someone can provide the link, but there was an article linked on YCombinator or Reddit (or maybe here!) the other day that talked about how Disney do things like this.
Supposedly when Disney have a ride or attraction “just right,” they go a bit further with just the right amount of “why’d they bother with that?” details to make their park seem magical, rather than just a theme park. Supposedly this is what makes being in Disneyland feel like being “in Disneyland” rather than being in “a theme park in America.”
JF
on 22 Apr 08
Steve, it’s not a persona. It’s a sample account we made for demo purposes so we don’t have to demo with our own data.
At first you think – “Humm…...he doesn’t need to post about something as insignificant as this, does he?”
then you think, “humm…....this happens to me all the time”
95% of the people baking web goodies these days don’t pay any attention to this stuff. With the exception of people who read these kinds of blogs, have a tumblr account, or have discovered the elegance of Wordpress, most pay no attention to these kinds of design fundamentals.
Good show. Write a book and make us all read it.
Michael King
on 23 Apr 08
Two things I think are questionable in the design of the edit methods used.
1) Should the edit link and delete icon be hidden? Generally we don’t do this, if an item is editable we will always have at least a small icon that is always present. Having the links hidden makes me hunt for the functions.
2) Having edit be a text link and delete be an icon link is inconsistent. In my work I would tend to use two small icons or two small text links.
Luke Sparks
on 23 Apr 08
I noticed that in your demo, there is a black bar at the top of the page that has Basecamp Highrise and Backpack. It makes it really easy to switch between the applications, is there a way to do that outside of your system? I use all three applications and have often thought something like that to easily switch between the three would be really nice.
Eric
on 23 Apr 08
This series is one of the most useful things out there for designers who like to keep feeding their brains. Anyone know of anything else similar? A blog that highlights design problems and solutions? Not that anyone can really compare to the 37signals guys, but I’m hoping for at least something in the same family.
SS
on 23 Apr 08
Luke, the black bar is Open Bar. It appears automatically if you have two or more 37signals accounts on the same OpenID.
Jason co-founded Basecamp back in 1999. He also co-authored REWORK, the New York Times bestselling book on running a "right-sized" business. Co-founded, co-authored... Can he do anything on his own?
raynorgan
on 22 Apr 08I thought that was really cool. Was wondering if you guys will decide some day to write a book on designing user interfaces with such details in mind, not the usual spiel we got so used to reading off the textbooks.
Great guys, love it anyways.
LBDG
on 22 Apr 08Brilliant! It really is all about the little things, and I love that you guys both pay attention to this and share it with your audience.
Quick question/suggestion: Noticed in the Highrise example the image of the wine label is visible on the page pre-edit, then goes away on edit, then reappears only as a filetype/file name after clicking on options. Is there a technical reason for not showing a thumbnail or the full image in the edit state? Might come in handy to keep a visual cue if there were multiple images in a note and a user had to remember which one needed editing.
Chris Moyer
on 22 Apr 08Along these lines, I love how text boxes start small and then grow as you fill them, keeping the buttons on screen. (Although, I just played with this now, and if you start editing near the bottom of the screen, and the box expands, you may lose part of your form)
Zach
on 22 Apr 08I think you should do more little videos like this, it’d be a lot harder to get the point across with just words, and its easier to see “as the user would see” this way.
Matt Radel
on 22 Apr 08Nice touch. This is what makes you stand out from the competition.
graham
on 22 Apr 08Very cool concept! Just curious, what if the bottom of the edit state stuff is so far down that the top of the edit state scrolls out of view? Would you stop the scrolling so that top of the edit area stops at the top of the viewable area?
Colin Devroe
on 22 Apr 08Jason: I added a link to each of the products you demoed, but I accidentally added a tag instead of a comment on one part of it. Sorry, I didn’t mean to muck up your timeline. You can log into Viddler, at your leisure, and delete that annoying URL tag.
Great video, and thanks for giving Viddler a spin for the last few videos you’ve posted.
(Now onto my thoughts on your video.)
The fact that 37signals pays attention to detail is no secret. Showing this video demo definitely solidifies, I’m sure, in everyone’s mind that some of these little tweaks were no accident, but I’m fairly certain that many people like your products because of this “polish”. Kudos to the entire team for taking the time to sweat the details, so we don’t have to sweat using your products.
Steve
on 22 Apr 08@37signals
I notice in the screenshot that it is called “Acme Corp.”, I thought you are against using Personas.
Did I misunderstand ? Since it looks like you do use personas based on this screenshot.
Dave M
on 22 Apr 08@Steve- Even if they don’t use formal personae, isn’t it still OK to test their stuff with dummy pages that aren’t called “Dummy Contact 1”, “Dummy Contact 2”, etc.? This test page is just a contact in Highrise – Janice Brown’s not a user anyway. I wouldn’t be surprised if she was a default contact that comes with Highrise – like those pictures of other people that you get in a new wallet.
Is “personae” too much like “perpendicular”? Does it make you uncomfortable?
Peter Cooper
on 22 Apr 08Hopefully someone can provide the link, but there was an article linked on YCombinator or Reddit (or maybe here!) the other day that talked about how Disney do things like this.
Supposedly when Disney have a ride or attraction “just right,” they go a bit further with just the right amount of “why’d they bother with that?” details to make their park seem magical, rather than just a theme park. Supposedly this is what makes being in Disneyland feel like being “in Disneyland” rather than being in “a theme park in America.”
JF
on 22 Apr 08Steve, it’s not a persona. It’s a sample account we made for demo purposes so we don’t have to demo with our own data.
Eric
on 23 Apr 08I’ve seen you use camtasia for your other videos. You can’t do screen cap videos with Viddler can you? Are you uploading camtasia output to Viddler?
JF
on 23 Apr 08Eric, I’m taking the screencasts with SnapzPro in Quicktime format and uploading to Viddler.
Anonymous Coward
on 23 Apr 08How did you even think of that??
gfriese
on 23 Apr 08After reading this I noticed that the to-do lists in basecamp don’t autoscroll.
I never realized how nice this would be until I watched the video.
Any chance of adding auto scroll to basecamp to-dos?
Don Schenck
on 23 Apr 08Great stuff, Jason. It’s this same attention to detail that makes Audi interiors the absolute best in the business!
I read an account how Audi engineers will fuss over how a knob feels when you turn it, the audible feedback, tactile feedback, etc.
These “little” things can mean a ton.
JF
on 23 Apr 08omg, Don saying something positive about Audi?
Don Schenck
on 23 Apr 08Jason, I hit the big time or win the Powerball and that R8 is MINE!
Everyone knows Audi interiors are Teh Hawt. Yeah, maybe I’m a bit jealous …
Terry Sutton
on 23 Apr 08At first you think – “Humm…...he doesn’t need to post about something as insignificant as this, does he?”
then you think, “humm…....this happens to me all the time”
95% of the people baking web goodies these days don’t pay any attention to this stuff. With the exception of people who read these kinds of blogs, have a tumblr account, or have discovered the elegance of Wordpress, most pay no attention to these kinds of design fundamentals.
Good show. Write a book and make us all read it.
Michael King
on 23 Apr 08Two things I think are questionable in the design of the edit methods used.
1) Should the edit link and delete icon be hidden? Generally we don’t do this, if an item is editable we will always have at least a small icon that is always present. Having the links hidden makes me hunt for the functions.
2) Having edit be a text link and delete be an icon link is inconsistent. In my work I would tend to use two small icons or two small text links.
Luke Sparks
on 23 Apr 08I noticed that in your demo, there is a black bar at the top of the page that has Basecamp Highrise and Backpack. It makes it really easy to switch between the applications, is there a way to do that outside of your system? I use all three applications and have often thought something like that to easily switch between the three would be really nice.
Eric
on 23 Apr 08This series is one of the most useful things out there for designers who like to keep feeding their brains. Anyone know of anything else similar? A blog that highlights design problems and solutions? Not that anyone can really compare to the 37signals guys, but I’m hoping for at least something in the same family.
SS
on 23 Apr 08Luke, the black bar is Open Bar. It appears automatically if you have two or more 37signals accounts on the same OpenID.
Ahmad Alfy
on 25 Apr 08Excellent :)
This discussion is closed.