22
Dec
2008
61

New Design

Just updated the Usability Post design. The old design, while perfectly usable, felt a little bland and boring. I could have made further updates to it, but I felt the basic structure and feel wasn’t right. So here we have a new redesign from scratch which I’ll be improving over the coming weeks. I really like how it’s turned out — incorporating bits of eye candy, yet keeping things simple. It’s also a lot more like the original design I started off with when the blog first launched.

Anyhow, here’s a shot of the old design if you’d like to see the difference (click to enlarge):

Some readers have asked me for a better way to browse the archives. While it’s not up yet, a proper archives page and a popular posts lists are on their way. I’ll be interested to read your thoughts about the new design — what do you think? Post a comment.

Share/Save/Bookmark

Enjoyed reading this post?
Grab the RSS feed here and get all new posts delivered straight to you.

61 Comments:

  1. Jin

    I think the best type of re-designs is those subtle ones. I like the new look. It still has the brand identity of the old site, but with a fresher look. I also like the Col grid vs. the old 3. GJ!

  2. Radu

    regarding your menu links:

    http://www.greg-wood.co.uk/blo.....ss-me-off/

    :)

    oh and I’ve just tabbed out of this textarea and instead of being sent to the Post comment button, I get sent to the search input.

  3. Bas

    Looking really good, I’d say better than the old design. The Archive pages (including the category-ones) need some more work, but you already stated that yourself.

    Very promising!

  4. Dmitry

    Radu: which links are you referring to? The ones in the main horizontal menu at the top?

    I’ll look into the tabbing ;) If anyone else finds anything broken feel free to post it here.

  5. Pat

    @dmitry - I believe he means when you hover over the links in the top menu, they change to a red colour, which makes it very tough to read the link when its hovered.

    Not sure if I love this redesign or not. The elements all look great, however I actually found the previous design to be more “usable.” Good luck with the tweaks though, and still great content!

  6. Igor Jovic

    Nice and simple, just as it should be.

    I like it!!

  7. chris

    Like the newsite design, it’s refreshing, oh and what Radu was saying when you tab from the comment it jumps to the search input because your submit button and your search input have the same tab indexes.

  8. Vadim P.

    I think that changing the usability is a usability issue in itself. It means people have to re-learn, and not everyone can grasp onto new changes.

    Anyway, the new design is nice, but you removed the icon row at the bottom you had!

  9. Vadim P.

    I think I found a broken page (http://www.usabilitypost.com/category/copywriting/): http://www.ubuntu-pics.de/bild.....enGTM0.png

    While you’re at it, it would be creat if you added that “subscribe to comments via email” thing.

  10. Dmitry

    Updated the top navigation link hover color — it’s subtle yellow/orange now so shouldn’t be difficult to see.

    I’ve updated the tabindexes, but the tabbing still doesn’t work :( Not sure why. Looking into it.

    Vadim: I liked those icons and I plan to add them again. They’re a minor thing though so I decided to launch this now and worry about the smaller details later :)

  11. Jin

    one more thing, in FireFox(PC) Radu’s comment div has a horizontal scrollbar due to the long URL he put there. I know in Safari it autowraps. I think there are WP plugins that trauncates long urls in comment sections.

  12. koellmania

    Nice redesign, i like it! Only the hover-effect on the main menu isn’t my cup of tea. Don’t like the yellow color.

  13. Jason

    Looks great, man. Love it.

  14. lukas

    Well,
    I am not so sure about this. While I am still working on my own update I know how hard it seems to satisfy everybody, but I think I liked the old one better. I do like the new one, I just can not seem to get used to the paper border, it just does not look real enough.
    Also I think the category, used to be in a much better place before the redesign.
    I do like the handy searchbar though.
    I’ll see whether or not I will become used to it.

  15. Greg

    Love the redesign, even though I thought the previous design was great too :)

    My only thought is to get rid of the darker grey background color surrounding the comments icon and make it transparent.

    I always enjoy reading what you have to say about usability. Keep it up.

  16. Dmitry

    Vadim: Good spot, looks like I didn’t properly style those pages in the theme — on it now.

    koellmania: Changed it to just white with underlines. Simple, can’t go wrong.

    Jin: Implemented the truncate plugin :)

    lukas: Interesting, thanks for your comment.

  17. Dmitry

    Ok, cleaned up those category pages. Now need to figure out how to fix the tab issue.

  18. Ivan Nikolic

    Love the new design.

  19. Alexis Sellier

    Awsome, I like it much better :)

  20. B Shelton

    For a usability site, I’m surprised that core navigation is “below the fold” for most users… under advertising on the right column (Specifically the Browse by Category links). I would consider these links _primary_ navigation (more important than Blog, About, Contact, and Advertise).

  21. pickupjojo

    A search form, yay! \o/
    Great redesign, I love it.

  22. Dmitry

    B Shelton: thanks for the comment. I agree with you. I wanted to simplify the design and have only two columns — so there’s the tradeoff. I need the ads to support the site, so I’m reluctant to push them down below the fold — they’re not really obtrusive there, but keeping them above the fold provides the value for advertisers. The other reason for putting less emphasis on the categories is that most people arrive on the blog either to read a post they saw linked to somewhere else, or they just come here to read new posts on the main site. So it’s not really “primary” site navigation like you would have on a standard website, it’s more of a supplementary way to browse more content. Of course if I’m wrong here and you think the categories list is very important, do tell me :)

    I could possibly turn the top navigation bar into a list of categories.

  23. Janko

    I like it very much. Clear and simple.

  24. Emanuel Felipe

    Nice design, I just miss some white space at the top of the page.

  25. Ben

    Dmitry, I think you’re right in pushing the categories below the advertising. I’ve never done any usability testing, but from the way I use sites these days I tend to use the Older and Newer links at the bottom to completely scan the archives and then only need to keep up to date via the RSS — I rarely, if ever, use category links anymore.

    On this, what do you think about making the Older and Newer links more prominent in a site’s design? Have there been studies done on their importance now? Does your Analytics show any trends in this regard? I’d be quite interested in a post on this topic.

  26. qeek

    The design is good, but could use a little bit more color in my opinion… the old design with the red logo and blue links looked more lively.

  27. Zach Dunn

    I like how you’ve consolidated everything into a clearly defined middle wrapper. The post dates and comments off to the side are a nice touch!

  28. Paul Brin

    What, if any, markup validator do you use to check your code?
    I checked your code with my top three favorites (W3C, TV, and TAW) and all I see are problems.

  29. Sebastian Tibichi

    Very nice and compact design. It’s been one month since I first read an usability post. I love to read your rss on mobile. Little posts…great content.

  30. Evan Meagher

    Like the new look a lot! Nice work.

  31. Tom Lloyd

    Hi Dmitry, like the new site. I’ve been visiting for a while. I’m sure you’ve answered this before, but how did you do the apple style search field with the rounded corners?

    Good job!

  32. Laren

    Your old logo was great, there was a relation between name and graphic, any reason for the change?

  33. William Lepinski

    Put a link on comments total to “jump” to the first comment. ;)

  34. Dmitry

    Paul: While I don’t tend to validate my code all the time, I did run it through the W3C validator a couple of times during development. I just checked the code again and found a couple of issues I missed. The other errors seem to be caused by the WordPress code, as well as the feedburner link, only 13 on this page.

    Looking into the large amount of errors on the front page.

    Tom Lloyd: It’s just a fixed width input field with a background image applied to it. Has a different background image for input:focus, which has the highlight (well… it’s the same background image, just shifted alignment)

    Laren: I thought the old logo was a bit garish — prefer something simpler ;)

  35. Dmitry

    Aha, located the problem that caused 80% of the validation errors on the front page. The “click to continue” link was set up incorrectly. I made it go to a different paragraph in my theme, but wordpress mixed up the anchor and paragraph tags so they weren’t in the right order. About 10 errors left on the front page, half caused by the feedburner link, and another half by the embedded flash movie. Not too bad :)

  36. Dmitry

    Ben: Good point about the pagination links, going to fix them now.

  37. Emily

    I actually like the new design a lot better than the old one. While the changes aren’t drastic, to me they’re big enough to make the site much more comfortable. I find that it’s much easier to scan due to the changes in typography and colors. Plus - the bit of eye candy is both simple and effective without being the least bit obtrusive.

  38. Topher Fangio

    Dmitry, I like the new site design, but I feel like the old design felt a little more balanced. Right now, above the fold feels very heavy on the right side and makes me feel awkward.

    I think the width for the article is perfect, but due to having the name and date of the commenter on the side, the comments seem a bit squished, especially the larger ones.

    On a more aesthetic note, I love the new logo and everything seems to look great. The only part that looks out of place is the grey background behind the “RSS” and “Email” links in your RSS subscription section. They really kinda clash with the gradient behind them in my opinion.

    Also, it would be cool if you could make the drop shadow for the paper look a bit more realistic :-)

    All around though, great redesign!

  39. Nacho

    It’s nice the new version. I like the older though :p

  40. [...] Usability Post: New Design [...]

  41. Cyril

    Very nice work !

    But there’s actually a javascript error when using Safari3 (a2a_onMouseOut_delay not found).

  42. Dmitry

    Cyril: I’m on Safari 3 and don’t see any errors. When are you getting it?

  43. Joel

    A way to promote your blog heavily is to release your previous design as a free theme…

  44. Cyril

    Well… I must really be crazy ! The error never happened again. I guess it came from a network issue while downloading the javascript file.

  45. Good Usability

    I quite liked the old one.

  46. jack

    looks an awful lot like tbh http://www.gomediazine.com/

    (general placing of elements)

  47. Dmitry

    jack: You got me there, totally ripped those guys off ;)

  48. Dhane

    While I thought the last design was cool, this one is nice as well.

  49. Дюдя

    How about let me to use your old design in my blog? Can i byu it or somthing. I liked old very much, but this nice too

  50. Andrew Maier

    Very clean, Dmitry :)

    Designing is always a double-edged sword. The more you put down the more things exist that could potentially mix your message. I really like what you’ve done here!

  51. Emiliano Jordan

    Dmitry,

    Hello, I really like your blog and have been reading the RSS and Further on every post. I am designing a new blog and your new side bar, worked perfectly with my theme and I really liked what you had done with it. I designed it into my theme and would like to use it. I will give you credit and links, but I just still wanted to make sure you are okay with this. Thanks. Here’s a URL with a preview.

  52. Dmitry

    Yea, that’s fine Emiliano :)

  53. jack

    Now, what template did you use Dmitry?

    http://www.webdesignerdepot.com/

    You really should give credit where it’s due…

  54. Anoop

    This is my first post here. I like the simple design.

    My question is there a reason that article are left aligned and not justified?

    Is there any research about readebility and text alignment?

    Thanks

  55. phd

    top design guys.

  56. Dmitry

    Anoop: actually yes, there is. I can’t give you a link offhand, but research shows that left aligned is more readable than justified. This is because the spacing between letters and words is the same throughout — your eyes don’t have to adjust. The even edge on the right won’t make a difference since you start reading from the left side, which is always even anyway.

    What’s more, it’s also arguably prettier because white rivers (spacing between words) don’t tend to form — they form in justified text because words are stretched apart to fill in the empty space.

  57. Ramm

    Hi
    Nice design, it look great.

    The only problem i see, i think the number of comments at the top should be a link to the comments, not only information of how many comments have the post actually.

  58. Хорошая статья, как и все предыдущие. Буду теперь и дальше следить .

  59. Петр Сычев

    Просто замечательно - очень интересные мысли. Разжевано специально как будто для меня :)

  60. Тема

    рекомендую остальным посмотреть по внимательнее этот сайт иначе не поймете про что тут написано

  61. пeлaгия

    Спасибочки за такую оригинальную точку зрения. Я с ней не совсем согласен, но она имеет право быть.

Post your comment




Credits: RSS and guest post icons designed by Function.
Powered by WordPress.