With over 173,900 subscribers and 90,300 Twitter followers, Smashing Magazine is well known among designers as a source of high-quality content. Recently, it has been redesigned and Smashing Network has been introduced. But the site needs better Information Architecture and there are a few usability issues as well.
You make me think!
When I’m looking at Smashing Magazine’s homepage it makes me think, most of the thought balloons over my head have question marks in them.
Things that make me think
- Navigation is ambiguous. The idea of putting tags under categories doesn’t seem logical because one tag can fall under various categories.
Label ‘Work’ can be taken as SM’s portfolio.
- Active Homepage link on Homepage.
– [ Refer point 43 ]
- Search Bar is more fancy than usable. It hardly looks like a search box. It has visible space for just 19 characters. Search icon is not as recognizable as Search button.
– [ Refer point 48 ]
- Extra Large Twitter and RSS-Feed icons are catching too much attention. Two separate links (text and icon) for the same action in one block.
- Multiple (around 7) link styles are used.
– [ Refer Point 20 ]
- RSS Feed and Twitter links are repeated many times.
- Post title is a link and can’t be distinguished until hovered.
- Ads are everywhere. In the top 1200×1045 SM area (on iMac 24″ in Firefox with main menu hidden) 32.68% of total screen real estate is devoted to ads.
- Why additional links under ads?
- Lengthy excerpt along with a big image occupies a lot of space (esp. above the fold).
- Avoid Exclamation Marks: ‘Advertise with us!’ need not be yelled out at users.
– [ Refer Point 26 ]
- No need to use site’s name when referring to its own content. E.g. Smashing Forum can be labeled simply as Forum.
- Large post titles are hard to scan. Sometimes they (titles) are wrapped in more than 1 line which makes it even worse.
- Large icons in front of news items create distraction.
- No need to display incomplete job description. Job title is enough.
- Huge images in every Smashing post pushes valuable content down the page.
- Icon restricts header view.
- ‘Smashing Network posts’ heading’s size and color are almost similar to SM post titles and thus create illusion of link.
- Titles should describe the content under it. ‘Popular posts’ instead of ‘Popular’.
- Smashing Network Posts: Do users need Smashing Network introduction every time they visit this page?
- Lengthy Popular (posts) list.
- Images used in front of Smashing Network posts restrict user from scanning post titles.
- Tweets given too much weight.
- Page Navigation at the bottom is ambiguous – it’s not clear whether it is for SM posts or SN posts.
- ‘All’ link under categories section is confusing. It opens all-posts page rather than showing categories.
- Brief description about characters would be helpful.
Design is in the details. With design, paying attention to small details – and in some cases, obsessively focusing on ‘what isn’t right” – can take a design from “nearly there” to “there” and beyond.
— Naz Hamid in an article for A List Apart
- Logo text is not perfectly aligned.
- Images along Smashing Magazine Network posts have a poorly styled background.
- Helvetica is repeated twice. Verdana has a different x-height than Helvetica, Arial and Geneva.
- Accessibility neglected. Smashing Magazine logo has no ‘alt’ text. Main navigation links are hardly visible when images are turned off.
- 12 link colors used. [ View on Flickr]
- Commas(,) between categories have dark gray while links have light gray color.
Smashing Magazine team has put a lot of efforts to provide good user experience. However it needs to be aligned, arranged and cleaned so as to make it more usable. I have made my best efforts to design a clean and usable Smashing Magazine homepage, but there can be a few things which I might have missed or added which effect user experience. Let me know about these points.
Realigned Smashing Magazine Homepage is tested in Firefox 3.5, Safari 4, Chrome 3, Opera 10.10 and IE8.
No IE6/7 support.
- Realigned version is more focused on content.
- ‘Home’ is no more active link on homepage.
- Search bar is simplified with 32 characters visual space.
- RSS Feed and Twitter links are moved up in navigation with clear visual presence without extra prominence.
- Single link color used to provide better link recognition.
- Medium size of post titles makes it easy to scan.
- Short excerpt and small images help fit more content in less area.
- Removed ‘Smashing Network description’ from the way of daily user who already knows about it.
- Shifted ads to one side to distinguish content from ads. Large ad banner which was earlier used in main content section can be placed at the top of the page. E.g. BBC
- Improved footer with brief about section.
- Effective sidebar widget powered by CSS (no background images).
- Reduced popular posts (now 20) to enhance scanning.
- Clear and meaningful link titles
- Smashing Book is also promoted
- Content stands tall with ads in sidebar now.
- Fluid grids are used to serve different screen resolutions.
- Sprite image is used for icons
- CSS powers the design. Just one style image is used (icons-sprite.png). CSS is used extensively to keep the page lightweight.
Breakdown of Screen real estate
In Realigned Smashing Magazine Homepage, the content area has increased upto 52.48% from 30.62% in original Smashing Magazine Homepage. Advertisement area is decreased to 8.6% from 32.62%. Rest of the sections have minor changes. See images below for detailed information.
[ View at flickr ]
- Content 30.62%
- Advertisement 32.62%
- Branding 1%
- Navigation 8.45%
- Self-promotion 0%
- Un-used 27.25%
Smashing Magazine — Realigned
[ View at flickr ]
- Content 52.48%
- Advertisement 8.6%
- Branding 1%
- Navigation 10.14%
- Self-promotion 3.63%
- Un-used 24.14%
References and stuff
This realignment project started 1 month back when Smashing Magazine announced redesign and asked for feedback. I enjoyed this self-initiated project which helped me learn a lot by reading deep into some really good books and articles by some intelligent people in web design industry.
I have worked hard on details and know that some are still left there, hidden. I know you guys can help me refine this design by your valuable feedback. Waiting for comments from Smashing Magazine team and designers out there.
Referenced books and sites
- Homepage Usability — by Jakob Nielsen and Marie Tahir
- Don’t Make me think! — by Steve Krug
- Designing Web Navigation — by James Kalback
- A List Apart for people who make websites.
- Homepage Usability Guidelines – useit.com
- Navigation Steps – Sitepoint.com
- New Internationlist by Andy Clarke
- Basic Maths – WordPress theme by Khoi Vinh