2006 / March 18th/ The devil is in the details: a review of Backpack
I know I’m no graphical genius or have talent oozing out of my brain, but I’d like to think I’m a decent designer. Personally, I’m more of a detail-oriented designer. My designs are obsessively symmetric and proportional. The devil is, as they say, in the details. Spacing, kerning, tracking, sharpening, and compression formats are all details that make a design feel polished and clean.
I am an avid advocate of 37 Signals and the applications they create, in fact I use many of their applications every day. 37 Signal’s design philosophy is that of KISS and small details to create a clean, simple interface. Backpack is a great example of this, unfortunately it falls short in many ways. I took the time to go through Backpack and point out twelve problem areas of Backpack. Hopefully this review will make you take a second look at your own work and give it that little bit of extra love every design needs.
Graphical Guide
Below is a screenshot of 12 problem areas of Backpack’s design. There is also an enlarged version.
Problem areas
1: Action buttons
This is something that kills me a little bit every time I see it: complete lack of kerning on button text. A few extra seconds in Photoshop on the Files, Images, Writeboards, and Sharing buttons would eliminate the fuzziness that you can see right now. Also, List should be pluralized. You can have many lists, not many list.
2: Help “icon”
Why is this question mark text? It should be an image, or look like an image (similar to the “Add Note” and “Add List” buttons in the body of the page). It stands out against the row of action buttons to the left of it.
3: Sloppy drop shadows
This is just pure negligence in my opinion. Both the top right and the bottom left of the layouts in all 37 Signals applications have the drop shadows ending abruptly. This destroys the illusion of the page lifting off the background and looks extremely awkward.
4: Make new page button
This button feels like it wants to extend the full width of the column, but doesn’t quite make it. The horizontal space is already inconsistent with the action buttons mentioned above, so extending this space wouldn’t be too bad.
5: Add tags text
This text is not lined up with the text below it. In fact, it’s about 3-4 pixels off. Additionally the vertical space above and below the text is unequal.
6: Sloppy gutters
The gutters to the left and right of every Backpack page are off by about 6 or 7 pixels. There should be equal space to the left and right of the body content.
7: List spacing is awkward
Unordered lists have more space on the top than on the bottom. Traditionally, lists should either have equal vertical spacing, or have more spacing on the bottom than the top (to correlate the list with the information above it). This spacing makes it feel like the list is associated with the header below.
8: Bottom box padding
The bottom box on every page has unequal left/right and top/bottom spacing. Adding a few more pixels of left padding would balance out this box tremendously.
9: Tables are not styled
Try and use anything beyond a table that forces content to full width results in terrible ugliness. <th>’s don’t have any padding, background color, or text alignment.
10: Account page bottom box
Where did this styling come from? Links are bolded, a new header style is introduced, the same padding problem as #8, and an action (show key) is linked text (as opposed to the rounded grey treatment used elsewhere). This box stands out like a sore thumb.
11: Confirmation message?
No where else in Backpack do you get a confirmation message, which makes this one suddenly seem very awkward. Additionally spacing is all over the place on this thing. We need the gutter problem fixed (#6) and some more vertical spacing to match the horizontal spacing.
12: New form styling
Suddenly this form has black labels that are much shorter than previous labels used throughout the interface. Additionally Password Confirmation wraps in favor of giving me an unnecessarily large box to put my password in. Additionally, the save button is aligned with the labels instead of the fields (as used elsewhere) and there is big nasty black line above it. This form looks like it was just thrown in without care for its design.
18 Comments
Make a Comment
don’t be afraid, it’s just text
Warpspire is the place that web professional Kyle Neath writes about the web. More →
Hot Topics This Month
-
2007 / Schematic
8 comments
-
2008 / Top reasons your CSS columns are messed up
209 comments
-
2009 / Side project profitability
13 comments
-
2009 / Quick & Dirty Referral Tracking
10 comments
-
2009 / Why aren’t there any journalistic startups?
27 comments
Feeds / Syndication
Choose your preferred method of syndication. All feeds are full-posts & ad-free. All feeds are protected under copyright and may not be redistributed without permission.
The Network
All my little projects that I leave scattered around the web. Some for profit, all for fun.
March 19th | #
I struggle with reading blueprints each day. I’m ignorant of your web world. The attention to detail may appear picky, petty, or critical for its own sake: but when your goal is minimizing wasted effort these suggestions would
improve the user experience.
March 19th | #
I agree with you on all of those things being important mistakes. Especially the list padding/margins.
March 19th | #
LOL! I literally laughed out loud when I saw your comment on the help link. I thought the exact same thing when I saw. Nice work on this review btw.
March 19th | #
BTW, this is my own ignorance but how are you screen capping the entire page and not just wants on the screen. I’ve always print screened everything, course I’m on a Windows box too. Help?!
March 19th | #
To cap the whole page you need too take a few screens and then just put them together in Photoshop.
Nice review. It may be my lack of real design skills, but I tend to look at that kind of stuff too. Uneven gutters and padding are the kinds of things that really get to me.
March 19th | #
Brad: It’s a Firefox extention called ScreenGrab! It’s a wondeful thing. Right click, and you’ve got a png on your desktop :)
March 20 | #
Kyle: You have to think about the 37signals as not being aesthetic designers… They concentrate on the user experience…
I dont like the functionality of backpack that much, but basecamp however is equally inconsistent, but it works – and it works very well I must say…
I dont know if you follow their Signals vs. Noise weblog, but they have a couple of times advocated about the use of inconsistent items if it makes sense…
March 20 | #
Hey great stuff Kyle, the devil is definitely in the details. I just shot this over to Jason so we’ll see what he thinks ;)
March 20 | #
Aesthetics are a part of the user experience. Check out Don Norman’s research on emotional design to learn a bit more. My personal feeling is that there is a belief out there that aesthetics and efficiency or quality user experience are incompatible. That’s just being lazy, or having a blind eye period.
March 20 | #
Dan: Actually Jason prides himself in being an “aesthetic” designer as well (as well he should). In general, the designs coming from 37s are top-notch, hence the reason I picked on them in the first place. The details that I point out are not saying the design of backpack is horrid, but rather it’s so close to being perfect: why not take it that extra few inches to perfection?
Mike:
No worries, I’ve seen a few referrrers from 37s.campfirenow.com… hmm, I wonder what that could be? :)
March 21st | #
Hey Kyle. We appreciate the feedback. There’s always room for improvement. We’re constantly working to improve Backpack (and our other products) and we’ll keep your comments in mind.
And since you’re obviously a stickler for details, I thought you might want to know there’s a grammatical error in the links area above your comments bar: You want “here are some links” as opposed to “here’s some links.” ; )
March 21st | #
since we’re on the subject of grammar, if it is obvious that Kyle is a stickler for details, why did you use ‘might’ which implies probability rather than ‘ought’ which corresponds with your established fact?
March 21st | #
Well, before we all burn in the seventh ring of grammar hell, perhaps I ought (or maybe I might) to change that sentence :) It’s come to my attention recently that statments like “here’s those beers you asked for” are very California native. The English language is a cruel beast sometimes.
March 22nd | #
Bravo.
Detail is of utmost importance. Web designers nowadays don’t conform to the rules used in print. Newspapers/Magazines are so fixed with no play at all. They look good. Why can’t websites be the same?
With CSS it is possible, only no one wants to get too detailed into it.
I myself am too lazy to see that CSS works. Still trying. ;-)
March 22nd | #
I hear you Kyle – I dont agree that the 37signals are “top-notch” in the sence of visual experience… They are top-notch in user experience – dont get me wrong, I too love their so simple approach to almost every situation possible…
Im not quite sure how they pride themselfes, I have though noted that they have been open about their choice of incossistency when made sence…
Backpack is not an application for me, something about it that really annoys me – but cannot quite put my finger on it… Basecamp on the other hand – I love that…
Well Im not a graphical designer – Im just a programmer, loving their Rails ;) …
You wrote: “why not take it that extra few inches to perfection?”
It could be a matter of priorities… To quote the signals: “Release half a product not a half arsed product”…
April 2nd | #
And here I expected their answer to be: It just doesn’t matter
July 1st | #
[...] The Devil is in the Details [...]
July 4th | #
[...] Curiously this theme is not using any of that, no tabs, no drop-down menus, no ajax. Not to say it won’t be there in the future -especially the ajax search is very nice- but for now I’ll do without. I really got inspired by Kyle Neath and his ‘the devil is in the details‘ article on backpack. He calls his designs ‘obsessively symmetric and proportional’ and I like that a lot. I also liked overlapping forms with transparency for some time already but that’s not really supported until CSS3 becomes common. Now I found how to do it with background images. [...]