It's been a long time since I've blogged about design & usability topics, but I think we're overdue for a revisit. Luckily, in my recent web browsing, I stumbled across some remarkably innovative, uncommon design elements that made me take notice.
#1 - News via the Logo
Sites like Google, Yahoo! & Reddit are famous for using their logos to promote holidays or commemorate important dates, but several creative designers have been featuring news about their companies or their industry right in (or near) the logo:
#2 - Narrative Top-Level Navigation
This concept certainly won't work for every site, but I was impressed with how well it flowed and actually made me click on all the links to explore the site. The concept is to create a 1-2 sentence narrative as the top menu, and have the relevant navigation pieces as anchor text. I think that with solid design, micro-site architecture and a singular purpose, this could become a trend:
#3 - The Auto-Scrolling Multihero
This one's not exactly new - I wrote about it back in '06. However, the multihero (so named because there are multiple "hero" graphics and headlines) is getting better over time. Several of my favorites have worked out the exact temporal spacing, hover-based slowdown, and back/forward operations. I particularly like how it gets a number of "featured" pieces of content to the audience of the heavily trafficked homepage without clogging up too much space:
Just remember that if you're doing SEO with these, you'll need to use CSS (not flash) if you want the content and links properly indexed and followed.
#4 - Dual Tabs for Filtering
A basic principle of good web design is to limit yourself to no more than one set of top-level navigation items, which is why the dual tab system is so interesting to me. It breaks the rules, yet functions remarkably well and actually helps the user to better filter information:
#5 - The Product IS the homepage
A clear fault with so many business websites is their weakness in conveying the company's purpose in those first few critical seconds. I've been impressed by a few designs from the folks at Logistetica, who boiled down complex engineering and technology products in less time than it takes to be amazed by the pretty graphics:
#6 - Screenshot/Image Overlays
One of my least favorite navigation features occurs when I click on an easily-embeddable image and am taken to a completely different page (especially when it's just to the picture file URL). Designers have been solving this for some time with the pop-up overlay, and though technically it's the same number of clicks to return to the page (either click the "x" to close the overlay or "back" from the image URL), it feels so much cleaner and smoother to have the transition take place seamlessly over the background page:
#7 - Conversion-Funnel Based Navigation
One of the more creative navigation systems I saw came from Carbon Made. It featured a sidebar nav that offered links based on the user's location in the conversion process - ready to sign up, in need of a demo, or already a member:
I have to wonder if it's the beginning of a potentially successful way to bring visitors into the fold, or whether it's merely an outlier that caught my fancy. Might be worth a try?
#8 - The "You're a Winner" Beta Invite
As the concept of private betas have propagated from Silicon Valley VC-backed startups to Mom & Pop web apps in Skokie, IL basements, the promotion level of beta invites has grown from "waiting list" to "golden ticket." I can only hope the products live up to the hype, but I will say this - it's always smart to make your users feel special, even those who haven't gotten to use anything yet.:
If you've got any design/UI elements that have struck a chord, please do share :-)
UPDATE: If you're a designer in the Seattle area (or a designer who wants to move to the Seattle area), we're hiring right now! Please check out our job post - Do You Use Your Design Powers for Good?... Or for Awesome? If you're not a designer, please pass it on to all your designer friends!
Really nice article! Though I have seen almost all of the ‘elements’ you mentioned in the post used at some site or other, the very first one “News via logo” was new to me.
And yes I also love, “Image Overlays” (popularly known as ‘LightBox’ after the very popular and awesome script created by Lokesh Dhakar). In fact Light Box has become a popular feature of so called ‘Web 2.0’ sites.
I also love how SEOMoz allows us to post comments in an ‘Overlayed’ window. A very nice feature. Great work, SEOmoz developer team!
Thank's for that reference. That's one of the most useful tips I have seen in a while.
Nice finds. I have to admit I get a little frustrated, though, from a usability perspective, that a lot of the new techniques still are a bit alien to the "average" online consumer. Some of the things that work great for a techie audience test badly with less savvy folk.
Thumbs to Dr. Pete and a reminder that sites should be designed with the target audience in mind.
Ever seen a non-profit site that services elderly with an interactive UI, pull-down navigation, with an 8 point font? Hope not.
Importance of this post is the combined effect with SEO. SEO builds traffic and gets the site in front of the user. Good design thinks about site users, their aptitude, etc.
SEOs and designers should be working hand-in-hand, integrating keywords into navigation, thinking about calls to action, etc.
I really like the Beta invites. It's kind of a win-win....the company gets valuable feedback from the users, and those same users get a sense of belonging to something kind of special, and if their feedback is listened to it will also give them a sense of ownership. Then they'll want to help spread the word when it comes out of Beta. This totally worked for me with Xobni. I was a Beta user and as soon as they let me I invited everyone I knew who used Outlook because I loved the app so much.
Thumbs up for the Xobni reference! I've been looking for an 'Enterprise 2.0' solution to outlook email overload, so I'm going to check it out! (I've tried Taglocity but just couldn't get into it)
Great examples... #2 is an interesting one, but I think I'd disagree on the notion that it has any legs. Or, that it ought to have any legs.
Most of us probably have heard that there are three known primary types of user browsing strategies:
1. Users who gravitate towards primary content (or the biggest and flashiest thing on the page). These are the users who want to be impressed/entertained, and use the web medium like one would use traditional media - they take what the content creators give them.
2. Users who gravitate towards navigation. These are the users who use the web medium like a library - to conduct research.
3. Users who gravitate towards search fields/site maps/contact pages. These users are similar to #2 except that they either assume or know from prior visits that your primary content and top-level pages won't solve their issue.
I have no problem with the Baby Websites example of narrative nav because a) the text is HUGE and in the right place for navigation, and b) they only have like four nav links you could visit anyway.
But, in theory, this technique drastically lowers the visibility of the nav... even in this example, a #2 type like me is drawn to click the big Start Your Trial button where the nav bar would usually be. Now most would say that's great news for conversion, but it actually makes #2 types uncomfortable because we feel we're being pushed in one direction like the #1 types are used to. If someone like me clicks on the Start Your Trial button before we've satisfied our research, one of two things will happen: 1) we'll say "this isn't what I want, where's the nav... oh ok, this thing is the nav" and resume our research, or 2) we'll get pissed that we're being sold to and leave.
Again, this Baby Websites example is no big deal, but theoretically I wouldn't support it as good navigation. Like I always say - Flash doesn't kill users, bad Flash designers kill users. Same thing here... you just know that 90% of designers who decide to use this navigation technique will implement it poorly, without giving a single thought to UE or conversion funnels.
The other problem I see with this is that a lot of designers tend to write these in a self-focussed way rather than a user-focussed way. That is, they're talking about themselves rather than talking to the user (see the Happy Cog example, which popularized this technique probabaly about a year ago now).
The example here does a good job of telling the user what they can do on this site. It sort of parallels the conversion funnel technique in #7.
Another problem I notice is that the words sometimes don't make sense out of context. If a user is skimming the links, do the linked words still have meaning? Tour, Examples, and Pricing all do. Design, Publish, and Speak don't as much.
Good list, it's nice to highlight examples of design on more of a micro level.
In terms of optimizing for searches though, would your previous examples of headings be a better choice...'Pricing' over the other less obvious answer? Just curious how that affects for search optimization purposes....
SEOmoz just had a post about this, didn't they? About how you need to optimize the anchor text of internal linking. In that case the baby site example is better too (but could probably be optimized further).
I would totally agree with you in terms of being pushed into conversion. I want some more information about you before we start even a 'trial' relationship.
In terms of the nav, I like the contextual nature of the baby site, but I have a very shrort attention span online and hate to have to read too much (except on seomoz of course ;) ) in order to figure out where I need to go to do what I want. I really like the tabs quite a bit more, although they lack a bit of the creativity the baby site has.
I think I agree with Mitch here. After I spent some time with the Happy Cog website (Example given by Megan), the navigation blended with text became irritating. It becomes hard to find out the links.
I think such trick would be ok on homepage, where we want to leave a certain impression on the user, but on inner pages regular navigational elements should be used.
Great post. I always get so motivated with good designs. I just want to rip open gimp and make something awesome... but 3 hours later when I have a square and a circle and have forgotten to create a new layer for each, i just close it and have a beer instead.
Heck, I don't even get that far.
Think I'll stick to HTML and CSS and PHP and .htaccess stuff...
As someone who is worse than crap at anything to do with graphics, I look at this stuff somewhat in awe.
Hi Rand, I wanted to make a note on #3 "Just remember that if you're doing SEO with these, you'll need to use CSS (not flash) if you want the content and links properly indexed and followed." I wanted to point out that there was a recent Q&A on Google's Blog with Ron Adler and Janis Stipins (software engineers on our indexing team) sharing info on the indexing possibilities of the swf file. Here's one answer I found interesting:
"In addition to finding and indexing the textual content in Flash files, we're also discovering URLs that appear in Flash files, and feeding them into our crawling pipeline—just like we do with URLs that appear in non-Flash webpages. For example, if your Flash application contains links to pages inside your website, Google may now be better able to discover and crawl more of your website."
If everything works as it should you can now create something similar to the the auto-scrolling multihero headline in Flash with static content (HTML) with links and google will index as so.
I can't find the article I read via rss but I did copy it into a doc/pages file so if anyone needs it just PM me and I'll shoot it out to you.
The problem with Flash is that it's so easy to spam now, just create a lot of 1x1 pixels buttons that link in the action script and one big button over the top of them all linking via the action script. Visitors will never know there are a lot of links in it but Google will find them all >:)
I'm sure it won't be long before Google penalises for a technique like that though or if they are already
Very true Dudibob, although I would think something as simple as that would be covered but who knows.
- Note to self, don't link out to Dudibob sites :)
Here's more on that from the Adobe pressroom.
Actually, with most js pop-ups you can hit the Esc key on your keyboard, so you can save yourself an extra mouse movement. ;)
Really... I did not know that.
So howcome the IE dev team hasn't come up with a way to visually identify unsolicited overlays/pop-overs and press your Esc key for you? And then of course, display an annoying prompt to show off how it blocked the content for you.
Somebody seems to be ripping off your post as their own:
https://www.dyniam.com/marketing-blog/8-innovative-design-ui-elements-that-make-sites-better/
I just love the conversion funnel based navigation - perfect when you're offering a fairly simple service like Carbon Made. I think it would also work really well for a dating site.
For no reason other than I think it's really fun I like the Altogether Digital (.com) homepage.
They have retro games like Simon Says, Snake, Space Invaders etc in the header - just hit refresh a few times to see all the different games. Then before you know it you've wasted half an hour or more...
Some pretty good, and retrospectively obvious, tips there! Thanks a lot.
Harry
WOW. Being a web analytics/web usability fanatic, I LOVED this post. I like how you tied it into SEO too. I particularly loved the funnel based registration idea - very nice find.
Would love to see more articles like this!
Rich Page (web analytics fanatic)https://www.rich-page.com
Good stuff. I need to return to this site more often :)
Lightbox is the best. Hope that guy made some money off of it. Multihero is a close second.
#1 is simply gold - never saw this before and think it is a great design trick... Thank you for the list - quite inspiring!
Great post. I especially like the news from the logo. Really highlights the important news that can get lost in the rest of the sites content.
Love the visuals! It certainly seems that flash-based sites are the ones that keep users these days eh? CSS is definitely important to implement so that it can get indexed..that's for sure. Great examples!
Flash-based sites drive users away, not keep them.
But then why every client demands Flash. You tell them about usability. You tell them about additional plug ins. You tell them that continuously running animations are distracting. But no, like some adamant child, they want flash. So I say OK. It’s your website and Flash it will be.
My observation is that non-technical users with non-tech related jobs are easily wooed by Flash.
It’s us the computer/net savvy people who bitch about Flash the most.
Clients generally want their sites to stand out, and so they ask for things that they think will be unusual and attention-grabbing. Unfortunately, this often gets muddled with the very things that would stop them (not to mention their customers) from actually using the site.
I'd have to say that I still don't like the now very played-out Screenshot/Image Overlays. Although they are way better than a new-window link, it screams of the old web to me (POP UP POP UP), and contributes to a disjointed user experience. Image/SS overlays still have their place, but 9 times out of 10 I'd rather insert that content dynamically into the page on which exists (not a pop-up but a pop-in).
I agree with Rand on CSS and indexing.
Talking about user interface, here is another article on the similar subject but more from CSS point of view.
This was a great article, I had never thought about using the images to play such a big part in the funnel conversion process. I picture does speak a thousand words, putting a few more in the image only helps.
yeah nice article Rand thanx....
Nice post Rand ...
I also think the navigation is very important for a website and it entirely depends on the product you are selling If you are a news portal thn you have a different layout thn you selling branded products like gucci.com
Old post, but still helpful. I think it would be great to do a follow up for 2011. There are some definite trends that are changing like the black Google Bar, actually being phased out with the Logo being a drop down like in Microsoft Word. But it still has a consistent bar at the top for displaying Google+ info etc.
With web apps become more popular, it would be good to see a post comparing some of the more complex interface and UX designs.
That is very good comment you shared.Thank you so much that for you shared those things with us.Im wishing you to carry on with ur achivments.All the best. https://www.hayda.net/
Nice post for web design, the design tactics are commonly adopted in recent Web 2.0 portals.
I like video elements that loop.
https://www.bmw.de
Excellent post! It is great to see what sites are doing these days with design elements.
It is always nice to see different types of posts on Seomoz. This is one of the reasons why I like comming back and reading alot of the posts. I think we should have more site reviews on here.
Hi Rand,
Great post. Concerning #4, from a seo perspective, would'nt be better to create a html based architecture rather than using tabs ?
Thanks !
Remi
I have a site that has tabs that look somewhat similar to that (but just a single row, with rounded corners). The tabs are each an <li> styled with CSS. PHP selects which tab to have a class of "thisone" so that it is highlighted as being the currently visited URL. Someone else did the graphics.
Putting a bubble callout on the logo is a very cool idea. The only other place I have personally seen this is in the WordPress admin (bubble shows the number of comments waiting), and it stands out really well. I think we'll start seeing a lot more of this design element, especially now that SEOMoz has blogged about it. I would like to see more examples of this one in action.
Great post. Good to have a design and usability post. It sure helps, Thanks.
Great to see this kind of article on SEOmoz. I like to see more of this usability/design articles. Some great way to improve web site with great UI, seo, usability, etc, in this article.
Great list rand.
I have been thinking recently about nicely designed ways of attracting attention to a special offer without being too in-your-face, and I really like Andy Beal's Trackur offer ('peel down' effect in the top right hand corner).
I've seen that on one other webpage (can't remember which now)
At first I noticed there was an ad up there and I thought it was clever, but then I found myself actually clicking on it to see what was under that little 'torn' corner. Hmm...it worked on me :) Peeking someone's curiosity is a powerful tool and this tactic works great. It can really engage the visitor.
hi, i added a wheel instead of a slider navigation to https://www.facesaerch.com (a pet project of mine, to look deeper into the other sited of the search engine business). even though the reoccuring users tend to switch to the slider, the first visit lenght has risen about 15%. mostly because it's a fresh navigation approach.