Skip to content

Cyber Sale: Save big on Moz Pro! Sign up by Dec. 6, 2024

Search engines 5511dd3

8 Innovative Design & UI Elements That Make Sites Better

Rand Fishkin

The author's views are entirely their own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

Table of Contents

Rand Fishkin

8 Innovative Design & UI Elements That Make Sites Better

The author's views are entirely their own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

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:

GoodBarry 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:

Baby Websites Top Navigation

#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:

BNET Multihero

Jamie Oliver Multihero

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:

SearchWebJobs Dual Tab Interface

#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:

SymPowerco Homepage

Ad Capital Industries Homepage

#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:

ActiveCollab Image Overlay

0at.org Portfolio Overlay

#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:

CarbonMade Sidebar Nav

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.:

TenForce Golden Ticket

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!

Back to Top

With Moz Pro, you have the tools you need to get SEO right — all in one place.

Read Next

The Mozbot Mashup: Roger Explores the World of Generative AI Imagery

The Mozbot Mashup: Roger Explores the World of Generative AI Imagery

Mar 07, 2023
One Secret to Improve SEO in 2021: Guestographics

One Secret to Improve SEO in 2021: Guestographics

Jul 21, 2021
Pop-Ups, Overlays, Modals, Interstitials, and How They Interact with SEO

Pop-Ups, Overlays, Modals, Interstitials, and How They Interact with SEO

Apr 28, 2017

Comments

Please keep your comments TAGFEE by following the community etiquette

Comments are closed. Got a burning question? Head to our Q&A section to start a new conversation.