November 12, 2003 | View Comments (15) | Category: Design Journal
Summary: The redesign of UseIT.com
Day 2 of the usability testing for Jakob's own UseIT.com. If you haven't already please read Part I to get an insight into what I have already talked about.
It looks as though Jakob wants to include everything on the homepage. Okay, but what is there to stop him from at least including some in-page links to help navigate through the page. Even on my 1600x1200 resolution I have to scroll down if I wish to read all the content. He should consider putting a "Back to the top" link at the bottom so users can just jump right back up the page.
I also do not like the about information on the homepage. Most users will look for this information either at the top in a link or at the bottom. Jakob includes it at the bottom, but why not also have an "About" link at the top of the page so users can just jump to the about page. Same thing applies to Contact information.
As a usability site it is key to make the site as legible as possible. However, it seems that Jakob was designing this site for a billboard because honestly the font is just too large for the amount of information on there. The size of the font does not allow for easy scanning of the page. Maybe we could reduce the font-size and include separate stylesheets to increase the font if the users need to.
He claims he is not an artist so he does not include images and besides the average user is running a 28.8kbps modem right? Well I am no graphical guru, but some small images distinguishing different sections would not hurt. In fact, some icon-type graphics would increase the usability of the site because people could associate these with the type of content they are looking at. Small things can make big changes.
I just don't see the content on the site working too well with a two column layout. Like I said before I see 5 distinct sections of content. Maybe three columns would work better here.
With three columns and five different sections there has to be a way to distinguish between them and the easiest way is with borders. I would suggest separating the columns with solid borders and the sections with dotted borders. If there are two sections in one column, maybe use a different color border to distinguish that this is a different section.
By looking at the site I can only guess that the most important section is the Alertbox section. All of the other sections seem to carry an equal weight. Lets help show that this section is important by giving it a header with a different color than the rest. Since all the other sections are carrying equal weight, their headers are the same color.
I tried to incorporate everything I suggested. The icons don't position too well in IE, but I am sure that could be fixed. This design won't any awards, but I do think it works better than the current site. Jakob is a minimalist and so am I and this design obviously reflects that. It's just if I am going to sell my "expertise" in usability, I am at least going to make something usable.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/51
JP: Thanks. I got the idea from Dan Cederholm. All I do is create a 12x12 (or whatever) size image and magnify it so I can simply add colors pixel-by-pixel. It is not difficult.
Scrivs (http://www.9rules.com/whitespace/)
I dunno, Paul... it seems a little cluttered to me with the 3 column layout.
I'd do a two column one, show a few more alertboxes or longer snippets from each, and maybe a smaller number of interviews.
I'd also leave the links their default blue, since that is a usability thing and is on his bitch list.
And probably also lose the text graphics and use real text. The font isn't anything special, so there's no reason for it to be a graphic. And some of those headers are graphics, too.
And the heirarchy is off a bit... remember he's running a business, too... services on top, then reports... or maybe some other word that would encompass all the items he sells... books, reports, dvd...
then about jakob, followed by interviews, which basically serve as references for anyone who'd want to hire his services... then about the site at the bottom.
Usability week is more like an advertisement... maybe it merits placement on the left side above alertbox or something?
Just some ideas as I glance at your design. I like the overall look (other than it feeling cluttered) and particularly the icons and the thin strip of red at the top. One of the earlier redesign ideas I had for that college banking site I showed you had a thin strip like that, along the lefthand side. I still think it looked good, but I nixed it for some reason or another.
JC (http://www.thelionsweb.com/weblog)
"some of those headers are graphics, too."
make that "links" rather than graphics. :-)
JC (http://thelionsweb.com/weblog)
JC, the problem still lies in the fact that I think he is trying to place too much stuff on the homepage. It's good that he is running a business, but is useit.com his business or NNG? I can understand a link to NNG simply saying check out our services.
I also thought the usability week could use a little more emphasis, but in my quest for minimalism I might have over done it. With regards to the image headers, I will be honest and say I did those for my own pleaseure.
If this 3 column layout is cluttered, what would you classify his site as? He used to be strong advocate about having everything "above the fold" yet in almost every resolution you will have to scroll.
When it comes to his paid services, it still bothers me that there is nothing stating that this is something you have to pay for. You only find that out after you click on the link. I don't wanna buy a usability report so all that does is piss me off that I have to go back.
Lastly, as a designer, I just couldn't stick with the default blue. Too damn ugly. If the users do not know that an underline text is a link then I can't really help them :)
Scrivs (http://www.9rules.com/whitespace/)
Nice going man. The site is an obvious upgrade from the current useit. Hopefully Jakob is listening (looking).
Nice colors and minimalist feel. Good to see that default blue is out of here. Jesus! a time warp to 1995!
Usability week ad can be emphasized a little more. May be a different background (if it does not break any rules in, as JC so appropriately puts as, his bitchlist).
His services also need to be emphasized. Paul it is true that useit is not his services page, but the man is really peddling his wares. So it has to be reinforced.
Else, the three column layout works really well as most of the information is above the fold.
Good work and nice icons! Can we steal them? ;-)
Sunny (http://www.thesunreport.org/)
Hmmm, it seems the services and usability week section are the main culprits to my problems. Oh well, there isn't going to be a redesign of the redesign for a while :) As for the icons you may want to take that up with Cederholm first. I have no problem renting them out for $0.50/hit on your website (j/k).
Scrivs (http://www.9rules.com/whitespace/)
I don't think Nielsen's font-size is too large. It is '1em' - the best of all choices. The big, big mistake is Verdana, one of the worst fonts for websites (see: http://www.xs4all.nl/~sbpoley/webmatters/verdana.html).
For a usability site, overriding the font settings of your readers is an absolute NoNo. He just can't do this. And he shouldn't.
Thomas Scholz (http://scholz-webdesign.de/)
Well maybe it is because I am a designer that I think it is too large. I dont' see why you think Verdana is a bad font for the web? I cliecked your link Thomas, but it didn't work.
Scrivs (http://www.9rules.com/whitespace/)
The problem isn't so much that his font size is too large, it's that 1em in most browsers is too large, it's not the 'default' size as it should be... (the size you'd get on a webpage if you didn't use *any* sizing); it's 10% or so bigger than that.
Verdana isn't a mistake. Verdana is one of the most readable screen fonts out there, and definitely the only reliable one. I wouldn't print a book with it, because print stuff is easier to read with serifs, but for the screen, it's about the best thing going.
As for cluttered, yeah, his site is cluttered, too.
I thought it was fairly obvious that he's there to sell his services. The alertbox and so forth are all contributors to that effort. They're the freebies, and yes, the primary content on the page, but their goal is to define him as the 'expert' who can be hired.
Not sure what's ugly about the default blue. It looks perfectly fine on white and works well with the red you chose. Better than the mauve does, actually.
But yes, the obvious problem is he has way too much stuff on his homepage and it's difficult to organize it in a logical fashion.
Ideally, it probably just have the alertbox stuff on the left, the other categories as links off to subpages (so 5-8 links instead of 30), and a box below those links to advertise usability week. And limit the alertboxes to the last 5 (or 4, as you have it now)
Then you can compress the header a bit and probably get everything to fit onto one 1024x768 screen.
That said, I like the design tweaks you've done with whitespace. Can you make the category in each post link to the page for that category?
JC (http://www.thelionsweb.com/weblog)
Your link regex has catched the ').'. Even your example wouldn't work. :-)
Hm, let's try again:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
The problem with Verdana is, in short, that you have to rely on too many *variables*:
- The reader has this font installed. If not, your font-size is a way too small.
- The reader hasn't already choosen Verdana+small. If s/he has, your font-size is a way too small.
- The reader has the "standard" font-size (there is no such thing as you know) *and* accepts your size suggestion (even in IE Win you can disable font-size suggestions). If not, your site looks ugly.
- Verdana is *overused*. Boring. Buuuh.
- Verdana has in some (all?) versions a broken implementation of U+2018 and U+201C (wrong directions). And yes, typography matters.
So the questions are: Why using a font that sucks most of the time? Why relying on your font-sizes when you choose your font-family (which makes no sense in terms of CSS)?
There are so many ways to break a design - I see no reason to force it with Verdana. ;)
Thomas Scholz (http://scholz-webdesign.de/)
- The reader has this font installed. If not, your font-size is a way too small.
Every version of windows since at least 95... every version of Macintosh that's had IE installed... that's at least 8,9, and X... Most linux distributions... That covers things pretty well, doesn't it? And for the rest, that *is* why you can say verdana,arial,helvetica,sans-serif in your font suggestions
- The reader hasn't already choosen Verdana+small. If s/he has, your font-size is a way too small.
uh... and this somehow magically applies only to verdana?
- The reader has the "standard" font-size (there is no such thing as you know) *and* accepts your size suggestion (even in IE Win you can disable font-size suggestions). If not, your site looks ugly.
Maybe you've forgotten... being able to disable font sizes is a *GOOD* thing. Usability for vision problems and all that? People with the font sizes cranked up to 32 point are going to be a lot less interested in the prettiness of your design than they are in being able to read it. That is, after all, why we use HTML instead of just doing everything in photoshop. (well, besides the bandwidth issues)
- Verdana is *overused*. Boring. Buuuh.
It's 'overused' for a reason. because it's good, and people have it. Read back in Paul's archives, he has a nice thread on fonts that includes the very short list of fonts that are 'safe' to use because both windows and macintosh and many linux distros have them; and on that list, verdana is the only sans-serif that was designed *for* the screen.
As for boring... it's text for chrissakes. You basically can choose between arial and verdana, times and georgia for body content without running into many people not having your font; and sans-serif fonts work better on the screen because the resolution isn't high enough for serifs to help guide the eye.
- Verdana has in some (all?) versions a broken implementation of U+2018 and U+201C (wrong directions). And yes, typography matters.
Now you're just grasping.
JC (http://www.thelionsweb.com/weblog)
Nice design but I think you missed a couple of point in having better usability:
• I like the subtle colours but something is missing, the title disappear too much, a more vibrant colour would have been better.
• The change font size doesn't work for me (safari 1.0)
• Also in Safari, the font appear too small, Firebird is better though.
• The three columns works well to put more content above the fold but it also render the page difficult to read, too many thing fight for attention.
• The change font and sub-menu at the top are too much alike to be so close, they should be either more apart or have a different look not to confuse.
• Visually, the two column at right look like they squeeze the Alertbox column.
I know how hard it is to do a great design for Useit... I did 4 design for ReUSEIT ! None of my design would really work as I didn't do them to fix the usability on Jakob website, I did them just for the fun of it :-)
I do agree with you that his website is really bad at naming sections, he could easily move stuff out of the home page also.
You should have done it before and sent it in the contest.
Stephane (http://www.projetsurbain.com)
Well it seems the way life works I could only find time after the contest was over. Of course that really isn't an excuse since the contest started over 2 months ago. There are a lot of things I could do better with the design and I admit the more I look at it the more true this is. This is the unfortunate situation when you do a design in 3 hours and send it out to the masses. However, I wonder even still if I took everyone's opinion into consideration would it not take away the advantages that the design already offers?
Stephane: None of the links are supposed to work :)
Scrivs (http://www.9rules.com/whitespace/)
Yeh, well, Jacob Nielsen - Mr. Usability -
has zero credibility with me. A guy who's claiming to be a usability expert... His site is really pityful and all he can do is make excuses. It took a bunch of other guys to show him that he could have a decent site and yet, he still doesn't learn. How can he, he's Mr. Usability himself...
joe
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
I like your redesign very much—much more useable than Mr. Useit's site.
How do you make your icons? I like their simple look.
JP