ReadWriteWeb Redesign Analysis And Critique

ReadWriteWeb, a popular technology blog started by Richard MacManus launched a redesign yesterday (by San Francisco-based Ideacodes). The new look was greeted with a reaction ranging from “it’s awesome” to “Worst. Look. Ever.” with a lot of stuff in-between.

Before I get into my opinion on the design, let me just say that ReadWriteWeb is one of my top-read blogs. MacManus is a smart guy, and his team of writers are pretty high-quality, too. It’s good stuff. I wouldn’t be so picky if I didn’t care.

And this is precisely why the new design is so unfortunate. I won’t pretend to remember what the old design looked like (and the WayBack Machine is down at the moment, so I can’t check), but what was always important to me about ReadWriteWeb was its content. Well-written, well-researched articles offering an interesting and original point of view. The site made sense. And now it’s all over the place. Navigation is redundant, inconsistent, and lacks hierarchy. I don’t want to click anything at all. There are all sorts of little issues with the redesign, and I’ll touch on some of them below, but the biggest issue is this lack of hierarchy - fueled, at least in part, by the tendency of successful blogs to become “content networks.” GigaOM recently relaunched version 2.0 with a similar focus (and a redesign by the same company - coincidence?) and TechCrunch has long been a poster child for this type of “community” of related sites linking to one another. But it just convolutes things and it’s impossible to know what content you should actually care about. What’s important here, and how are these elements connected?

Another huge issue for me (and a quite unexpected one, to be honest) is Richard MacManus’ response to the criticism in the comments. He posted two very long and detailed comments of his own addressing the negative reactions, which, on the surface, might sound like the right thing to do. Isn’t that part of the Web 2.0 ethos, after all?

Yeah, it is, but not the way MacManus handled it on this occasion. I won’t spend too much time talking about this, because you should just read his responses for yourself, but among other things, he even goes so far as to state that he doesn’t respect certain commenters - not their comments - but as people. His justification for this is that they didn’t show respect for himself or the designers, and I don’t see this at all. Two of the three commenters he singled out actually had positive things to say about the design, and I fail to recall a rule somewhere that specifies that all opinions on the subject of design have to be justified by technical know-how.

Not everyone is a designer. Not everyone knows how to explain what they don’t like about a design. You can’t ask readers for feedback and then say that only qualified, properly-educated professionals are allowed to have an opinion.

Here’s another thing that really got to me. In his response, MacManus writes:

Winston said: "Guessing that this may be the result of attempting to appease conflicting opinions through out the design process. Save opinions till the comp is fully fleshed out, then select one.. no mixing and matching."

RM: This is an extraordinary assumption to make. "Conflicting opinions"? There were none. Winston, up to this point your critique was valid. I didn't agree with a lot of it, but at least it didn't jump to conclusions like this.

He claims Winston made an absurd jump to the idea of conflicting opinions leading to issues in the design process (all too typical, gotta say). But in the article announcing the design, MacManus actually says pretty much exactly that.

Personally I love the new logo and header, but I am certain they will provoke different opinions. Why? Because that was the case with the ReadWriteWeb authors during the design process!

I’m not saying that MacManus was wrong to respond, nor that he is wrong about everything he defends. Some of the commenters were indeed disrespectful - it’s the internet, after all - but when MacManus says, “Anyway, enough of me on my high horse,” that’s a clue that he took the wrong approach in his response, and failed to attempt to understand why the reaction was so negative and why “much of the critique here did not mention how clean, modern and fresh the design is.” Could it be because it’s not? Is that even a possibility?

Let’s take a look at the design itself, now, starting with the new logo.

(ReadWriteWeb logo: Before and after)

Comments on the original logo:

• The slash is a little awkward and has too light of a stroke.
• The color is a little unbalanced - too much red on the left.
• The flat yin/yang is just fine.
• Interesting typeface.
• Clear separation between the Read/Write part of the name and the Web.
• Perhaps too thin to be reproduced at small sizes.

The new logo, however, takes these problems and expands on them.

• Univers is a poor choice as the typeface. The condensed version here, with multiple point sizes being mixed together in CamelCapsStyle and with a hierarchy of blackness makes it pretty unreadable, even if the focus should be on the initials. (sidenote: are they trying to purchase the rww.com domain?)
• Why the subtle gradient on the Yin/Yang? The rest of the site and the logo use flat colors.
• I actually like the deep red color, why is the logo just black and grey?
• Why did they flip the Yin/Yang over?
• I know MacManus likes the Yin/Yang but it doesn’t work with the new slash-less branding. It’s also an extremely overused graphic symbol, and can’t stand on its own.
• The logo is really horizontal and has to be reproduced at a relatively large size to be readable.
• It really does just look awkward and unprofessional.
• Why the rounded rectangle enclosure for the YinYang? It it supposed to be the same as the GigaOm branding?
• Kerning (space between letters) is bad. Looks like the default, and makes it seem like there is an actual space between Read and Write, while Write and Web are more snug. Look closely at the dWr and eWe groupings to see this imbalance.

Moving on. My least favorite part of the redesign is the header. Here’s the first piece.

Logo aside, what are the issues? Well, as I mentioned earlier in the post, there is no clear hierarchy to the navigation. Some links on top of the (admittedly odd) rounded rectangle, and some underneath, separated by little shims. Everything gets a decent white rectangle on hover, but the sharp angles don’t quite fit with the rounded corners of the larger box. I actually tried to click the “RWW Network” text several times before realizing it is not a link. The light grey doesn’t do nearly enough to communicate “I am not a link, even though I’m in a really prominent position on the page.”

What is Last100? AltSearchEngine? How are these related? Is the CamelCaps supposed to be enough of a clue that these are sites in the RWW Network?

EverybodyUsesCamelCapsNowadays.

The right half of the header actually irks me more than anything else on the site. First, more links. How many links can you fit in one header with absolutely no hierarchy? RWW has 16. Seventeen if you count the logo, which takes you back to the homepage (sigh, even when you’re on the homepage!). Seventeen links and not a single one is remotely more important than the others.

But that’s not the bad part. The bad - awful - painful part is this collection of subscription forms and Feedburner chiclets. So many boxes, offering so little functionality to a regular reader. It clutters things up and isn’t even clear that the Feedburner chiclets are linked to entirely different feeds than the forms beside them. RWW looks too much like RSS. The custom “Go” buttons looks odd, and what does that mean anyway? Where are you going to go when you click it?!

Why not a single text area with a check box or radio buttons that let potential subscribers select daily or weekly email feeds? Make daily the default and only require someone to do something if they want a non-default setting, rather than forcing every potential subscriber to look at all these boxes and buttons and image links (and don’t forget the “Subscribe” text link, which points to the XML file) and decide between them.

And then there’s another text box underneath, making the header a veritable forest of forms. Can I submit my CV there, too?

I hope you’re not browsing with a font size larger than the default. If you are, you’ll notice that the header navigation is completely broken from an accessibility standpoint. Links disappear, everything overlaps (including forms, which I had no idea was even possible!).

OK, that’s the big stuff. Now to some littler comments on other aspects of the redesign:

This I don’t understand. Why does the footer look like this on the home page:

And like this on another page?

The “Earlier This Week” section is just fine.

And I like these post boxes on the home page, with the related images and preview of the post.

Featured Posts is also nice, but too far down the page to actually be “featured.”

Decent main content on the home page. Latest post and popular posts are featured. My beefs with the design are a lot less with the way the content is presented than with how it is structured and the navigation.

Look, more links! Lots more links in the footer. All the links in the header are down there, too. Why not put a : after RWW Network to separate it more, rather than a | which again makes it look like a visited link

OK, what’s going on here with the formatting for the comment form? Look at that (lack of) alignment! I don’t love it, and it takes away from the cleanliness of the design and the occasionally nice light grey horizontal rules.

And finally, we get two sections in the sidebar with tag clouds. One labeled “Popular Tags” that contains at least 50, and then a totally gratuitous Swicki widget, of which there are two in the sidebar (one with tags, and one that is just a Search form). Tags are cool, but this is overkill and totally non-functional.

What do you think?

The Case Against Undo

Paul Buchheit (via Google Blogoscoped) is calling for more use of “Undo” in software - particularly for GMail to add it to the “Send” command. He says, “this will require adding a short delivery delay, like 10 sec, but it's worth it.” Philip Lessen of GB basically supports this assertion, though he adds:

...there’s still the problem that we’re not used to an Undo option suddenly disappearing, which would be what happens after the 10 seconds... maybe there needs to be a countdown ticker as well, or is all this just shifting the same problem around?

I get where they’re coming from. We have, in many ways, been trained that you can always take back your actions on computers - at least when it comes to word processing, browsing websites (though not Flash-based ones!) and using other applications like Photoshop (though only a specified number of steps - so take snapshots!). But one action that there has never (to my knowledge) been an undo associated with is email, and adding it now overcomplicates a commonly understood action.

If implemented in the manner Paul advocates, an “Undo” action adds time to a medium already slower than other forms of messaging that are becoming widely used (IM, SMS, etc.). 10 seconds is a long time on the web. I, for one, do not want to have my email queued for any amount of time to compensate for others acting without thinking and sending messages unintentionally.

And why 10 seconds, anyway? Why not 5 minutes, while we’re at it? You know, just in case you click send, go make a cup of coffee, and while waiting for the water to boil realize that you actually just sent that angry email about your boss as “Reply All” instead of just “Reply to your secret girlfriend in Accounting.”

Just because it’s possible to take something back on the web doesn’t mean that it is a good interaction model, and online communication is one place where I’d argue that it would actually be a negative presence - reinforcing problematic behaviors like carelessness and lack-of-attention. You can’t take back what you say on the phone or in person. Why should we expect to be able to do so online?

That said, I think a feature checking for an attachment whenever you write “attached” or similar (like this Greasemonkey script does) could be a welcome addition.

Ultimately, technology can’t make up for human error - nor should it be expected to. If you screw up and mis-send a message, or forget the attachment, there is always a solution:

Apologize, re-send, and, if necessary, deal with the consequences of your recklessness and haste.

You know, just like in the “Real World.”

Brief iPhone and Google Maps Oddity

I suppose this shouldn’t exactly be surprising, but when you surf to a page on your iPhone that contains one of the new, embeddable Google Maps, like, say, this one from two days ago, iPhone automatically opens the map itself in the Google Maps app, instead of first displaying the page containing it. Tap back to Safari, and the page you navigated to in the first place will finish loading.

This is one of those tricky “is it a bug or a feature?” things that I suppose comes down to user preference, but it seems like Apple got the default behavior backwards. From my point of view, the most important thing to display is the context surrounding the map, especially when it is (as in this case) just one of many blog entries or widgets on a page. If the user wants to see and engage with the map, she can give it a little tap and then it will open in the Maps app.

Saying Something Nice About Microsoft

I’m not going to lie (even by omission) - what Microsoft (shudder) announced last night sounds awesome.

They’re calling it Surface, and that’s exactly what it is: a surface. More precisely, it is an entry into a new product category - not a tablet PC, but a table PC. Microsoft Surface is basically a glorified coffee table that uses what looks like a pretty high-quality multi-touch interface that lets you draw, move around photos and resize them, and interact with the display in a ton of ways using different gestures. It’s not for the typical home consumer, that’s for sure, but I can see it being a cool conversation piece for the wealthy, and perhaps effective in some office settings - particularly in creative fields. Word on the street is it could be three or more years before this is available in the general consumer market (and as of right now, it’d be priced between $5000 and $10000. Ouch.).

Check out their website and demo videos here. More info and demos here.

Naturally, the timing of this announcement is just a little suspect, with Apple’s iPhone being released mere weeks from today (and Surface won’t be first emerging for sale to special people until “Winter 2007”.) Even so, it looks pretty awesome for what it is, and I especially appreciate the fusing of technology with an object as ubiquitous and familiar as the coffee table. Moving into the future, I imagine we’ll see more and more everyday objects being enhanced by technology - if not always such fancy schmancy interfaces.

Okay, I need to go wash my hands, now. That’s enough Microsoft love for at least a year.

Bank of America Iconification Revisited

My friend Ben doesn’t like the new Bank of America Online Banking icons and interface that I wrote about yesterday. In his comment, he wrote, “i actually hate them and wanted to turn them off, but that's not an option.”

Now this post isn’t about whether he’s right or I’m right, because something like this is very much a matter of personal taste, but his comment brought to mind something I think is pretty important.

Change is scary.
Change is inconvenient.
Change isn’t always a good thing (or at least it doesn’t always feel that way).

If you are a company as large as Bank of America, it’s important to let users of your website know that change is on the way. Give them clues, tell them why (beforehand!), add new things incrementally, and, as Ben mentioned, give them the option to change back to the old design (at least for a little while). Rather than force users to learn a new interface, however similar it may be, use a redesign as an opportunity to teach them something new, to show them how to do something cool they’ve never done before. Take it slow. Don’t ambush us.

Google does a great job of this, with recent changes to Blogger, Google Analytics, and iGoogle all offering the opportunity to use the previous version. In fact, the old Blogger interface and templates were available for months before Google started making all new folks use the Beta version, and even now, there is a way to revert to what they call the Classic Blogger. For the most part, users could see that the new was better - that it offered them more functionality, was easier to customize - and they made the switch on their own time.

Bank of America’s changes weren’t so drastic as Blogger (or even the new Google Analytics), but the fact remains that people get used to looking at their data in certain ways. They have to train themselves to read it, and even the slightest change can trip them up. Sure, eventually it’ll be faster and give them more information, but for the time being, it’s an inconvenience at best, and a major annoyance at worst.

Trick your users into thinking it was their idea.

Check It Out!

Nifty Google Search box over there in the sidebar - go ahead and give it a whirl! Now, in addition to viewing Frivolous Motion content using the tag navigation above (or the post titles in the sidebar...or the “Older Posts” link at the bottom of the page), you can search for whatever you’d like, and you’ll be given a nifty customized Google Search page with content right from this blog.

You can also uncheck the “Just Frivolous Motion Blog” box if you want the search to return results from all over (you know, if one of my posts inspires you to learn more about something).

I hope you like it, and hope it helps you find something cool you didn’t know existed.