Written on February 28th, 2016

Design trends come and go. I strongly encourage you never to follow every new design trend that comes on the scene. Even if the other design shops with dudes wearing epic mustaches are doing it. Doing so can quickly date your site, make you look like everyone else, or worse, have a broken site experience filled with every design trend without any true purpose. Which your visitors love (heavy sarcasm with a playful grin).

With all that said, I wanted to highlight 5 specific design components that offer benefits to your users and can solve some potential architecture issues. Hope this gives you some ideas and maybe offer some solutions to a rut you’ve been stuck in. But as always, listen to your audience, be customer obsessed, and test to see what works best for your peeps.

Human Forms

If you have ever looked at detailed analytics on form conversions you can quickly begin to find patterns of when users bail out of filling out a form. The all-to-familiar reasons are usually because the form is too long, confusing, or the users gets sick of trying to fill out a CAPTCHA that doesn’t work. However, following modern best practices such as keeping your form fields minimal and using client side javascripts or 3rd party services to catch the robots and not burden the user of having to prove that their human will get you good results. BUT…going one further and talking to them like THEY ARE HUMAN in the form itself adds additional engagement and a delight to the user experience. A great example of this is from this screenshot above of a form on MistoBox.

You may not see an increase in your conversion rates, but providing a delightful experience by speaking human to them during what is traditionally a robotic and un-fun task will make the difference in a users experience and their loyalty.

I highly recommend building a unique experience so it aligns specifically with your brand, but if that’s not you, a great option is using Typeform. You can use their free version that will include their logo or you can pay as little as $35/mo to produce an unlimited amount of forms as well as customize it to your brand.

The Vertical Left Nav / Menu

Yes, we have come full circle and going back to the navigation on the left side! Well, if you want to that is. Of course we’ve seen a lot of major websites and companies move away from the horizontal navigation and mega menus and adopt the burger button just like you are used to on your mobile device. If your asking why? What’s the benefit of taking this same approach in a desktop experience? Here is a quick list of reasons why this solves for a few design problems in my opinion as well as provides a few additional user experience improvements.

Space: Unlike the horizontal navigation, having a vertical nav provides much more flexibility and real-estate to add the necessary amount of menu options. Especially if your site needs to offer multiple languages, I highly recommend a vertical navigation as many languages such as German are much longer in character counts and often won’t fit within the limited space horizontal space.

The “Left-to-Right” condition: For most languages, we read left to right and our brain takes on that condition and looks at a page of content from left-to-right. With a menu on the left this can provide an intuitive experience for users to quickly locate the navigation burger button or like Qualcomm who keep the left nav constant.

Mobile: Basically, there is less code to write, and maintain when taking this approach because the same menu style and works for both desktop and mobile. Unlike the horizontal nav that responds to a dropdown list when viewing on a mobile device. Less code can also result in quicker page loading speeds. Screenshot above from Qualcomm

Micro-Interactions: Show How Something Works

Not a day goes by at my job that someone doesn’t say “can you draw out your idea? I am a visual person”. Maybe that because we are all visual people. In fact, 90% of information submitted to the brain is visual and images process 60,000 x faster than text. Using gifs, mini videos, or little web apps, is a great way to take advantage of this and rather explaining something, show it instead.

The web will continue to evolve to having little text on a web page and rely primarily on strong visuals and interactive web apps that show an engaging story so that you don’t have read very much or think very hard. This is happening now and not a trend, but an evolution. Example above from Mailchimp.

Call To Action As an Alert at the Top

There are many different approaches to providing alerts, and traditionally we know these as annoying pop-ups. But as the example above from Brad Frost’s website shows, a static message at the top of a web page is an obvious yet non-obtrusive or offending way to tell the visitor the most important information you want them to know. Or most importantly, the information your audience is looking for. Do them a favor and make this information extremely visible and at the top.

Simplicity: Big Type and White Space

I’ve always agreed with the quote “It’s simple until you make it complicated”. Simplicity seems to give off the impression that it’s easy to do. Yes, putting messaging with big type and leveraging white space may be easy to execute, but doing it effectively takes some additional work.

Mark Twain once said “I was asked to write a one page paper but I didn’t have enough time, so I wrote a 20 page paper instead”.In the same way, for this to work, the messaging needs to be short and clear with little to no noise (like using white space). Each word being carefully selected. Websites need less content that does more!

There is something raw and honest about big type with white space. I’ve found that this approach is most effective for getting the point across of who your brand is and what is the purpose. Make it simple with no distractions. Thanks to Butchershop Co for the great example of this.

Closing Time

To wrap this up, these are just some suggestions and observations for you to consider. Don’t take my word for it, the best thing to do is listen to your users, your audience and be obsessed with designing and implementing for their needs alone.