8 Innovative Design & UI Elements That Make Sites Better

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!