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.
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!
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.
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!
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.
@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!
Nice and simple, just as it should be.
I like it!!
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.
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!
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.
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 :)
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.
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.
Looks great, man. Love it.
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.
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.
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.
Ok, cleaned up those category pages. Now need to figure out how to fix the tab issue.
Love the new design.
Awsome, I like it much better :)
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).
A search form, yay! \o/
Great redesign, I love it.
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.
I like it very much. Clear and simple.
Nice design, I just miss some white space at the top of the page.
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.
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.
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!
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.
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.
Like the new look a lot! Nice work.
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!
Your old logo was great, there was a relation between name and graphic, any reason for the change?
Put a link on comments total to “jump” to the first comment. ;)
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 ;)
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 :)
Ben: Good point about the pagination links, going to fix them now.
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.
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!
It’s nice the new version. I like the older though :p
[...] Usability Post: New Design [...]
Very nice work !
But there’s actually a javascript error when using Safari3 (a2a_onMouseOut_delay not found).
Cyril: I’m on Safari 3 and don’t see any errors. When are you getting it?
A way to promote your blog heavily is to release your previous design as a free theme…
Well… I must really be crazy ! The error never happened again. I guess it came from a network issue while downloading the javascript file.
I quite liked the old one.
looks an awful lot like tbh http://www.gomediazine.com/
(general placing of elements)
jack: You got me there, totally ripped those guys off ;)
While I thought the last design was cool, this one is nice as well.
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
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!
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.
Yea, that’s fine Emiliano :)
Now, what template did you use Dmitry?
http://www.webdesignerdepot.com/
You really should give credit where it’s due…
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
top design guys.
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.
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.
Хорошая статья, как и все предыдущие. Буду теперь и дальше следить .
Просто замечательно - очень интересные мысли. Разжевано специально как будто для меня :)
рекомендую остальным посмотреть по внимательнее этот сайт иначе не поймете про что тут написано
Спасибочки за такую оригинальную точку зрения. Я с ней не совсем согласен, но она имеет право быть.