Understanding User Interface Design (UI) and User Experience Design (UX) is far more efficiently accomplished by exposure rather than by explanation. You can read a thousand pages about these methods and not “get it” until surfing through a few sites that exemplify the goal.
The internet relies on human experience, capitalizing on ease of use and intuitiveness in order to communicate information. Those are the aspects of an excellent website that keep people coming back again and again. With so many options out there, it only takes a click to move on to a competitor. UI and UX seek to keep users engaged and move comfortably through your website, creating a positive experience that connects to them effectively while sharing your message.
Elements of a website with great UI/UX
There are some basic elements of UI/UX that are common to all websites that have great user experiences. When you’re checking out the benchmark UI websites (or UX) below, keep an eye out for the following:
- Strong visual engagement
People don’t read on the internet. Well, they don’t read at first. Visuals are at the core of user experience. What is clear from looking at site after site is that the pages with the strongest visual experience are the most successful.
- Simplicity & clarity
Cluttered pages are difficult to navigate. The web is already bombarding users with a ton of information and stimulation. Users want simplicity. Make it as uncomplicated as possible, using consistent design elements across pages and dropdowns when you can to create an uncluttered space.
- Focus on experience
Everything is about the engagement and interaction of the user, making it as easy and pleasurable as possible. The internet has a lot in common with window shopping, people love to wander around when they’re having a good time. The better the experience, then longer they’ll stay.
- Balance of creativity & familiarity
There is a fine line between turning users on with innovation and turning them off with a high learning curve. The internet is full of conventions of interaction. It’s important for you to respect those conventions on your website while still offering fresh content.
- Effective hook
You only have a few seconds to hook a visitor into your website. Rather than bombarding them with information, sites that have solid UI/UX pique the interest of visitors immediately and with brevity. Once they’re interested, users will dig deeper on their own.
- Responsive design
Unless you intentionally look at our benchmark sites on several different devices, you might not notice this one. Keep in mind that this is about user experience and ease of use, which means that visitors to your site are able to have a seamless interaction no matter what device they’re viewing on. You want your site to not only look fantastic and be easy to interact with not only on a computer, but also on a tablet or a phone.
9 benchmark UI/UX websites to learn from
These nine websites serve as benchmarks for UI/UX, offering genuine inspiration and examples for you to emulate. It’s important to emphasize that the product or content is truly immaterial to the UI/UX design of a site. No matter what your industry, you can learn from the good designs that you see here.
5 UI Animation Trends That Will Shape UX in 2016
While there are some descriptions of the UI/UX highlights given below, again the best method for getting the insight you need is by clicking through and learning by experience!
Condé Nast
Stunning headline video and an ultra-intuitive hook are the hallmarks of the 2015 Condé Nast page. The video draws you in, with effective lead outs that call users to dig deeper. This style is innovative but also easily adaptable to any business.
The lesson: Bold design backed by video is captivating for users, leaving them with an insatiable desire to stick around and explore.
Imaginovation
Engaging designs tells a story. Imaginovation tells its story through a headline animation that lets the user know immediately what this company is about. Users are then given an immediate lead out button choice as well as a scroll down option for more information.
The lesson: Good storytelling draws users in, especially when it’s followed by clear and concise information.
Fleximize Squad
Taking interactive design to the next level, Fleximize Squad utilizes SVG animation to increase engagement. The key here is the use of the familiar tropes of a video game to interact with users, who become participants in the process rather than remaining passive. All of that comes after a full-screen hook that draws the user along into the content.
The lesson: Stretching a concept can be rewarding, as long as the information is relevant and valuable to target users.
The Secret Door
What could be more enticing than an invitation to step through a secret door? Safestyle gives us a simple, masterfully intuitive interface calls forth natural human curiosity. It’s arguably more impressive on a smartphone or tablet, where the user actually gets to push the door open. We won’t spoil the secret behind it – you’ll have to explore to find out for yourself.
The lesson: Intrigue is magnetic.
Crop Trust
Crop Trust’s 2014 annual report page uses animation perfectly, drawing the eye without being distracting. More information pops up when the mouse hovers over an image. This is one unfortunate case where responsiveness is sacrificed a bit in service to engagement on desktop devices, but the site manages to retain the feel and bold styling on mobile even if some of the animation is lost.
The lesson: Animation can be used sparingly while still being highly impactful.
KFC definitely knows how to sell chicken. With vibrant images on showcase and familiar coloration, there’s no doubt about what’s for sale. Notice that all of the action is above the fold, with easy access to a wide variety of information and entertainment related to the company. KFC does a spot on job of knowing its users and highlighting the information that it knows they’re looking for.
The lesson: Leverage innovative design to showcase your strengths.
Fiber Sensing
User Experience draws us in, piquing our interest and desire to stick around. Fiber Sensing focuses on its product, conveying a message with every image and animation. This is storytelling on a macro level, with details that offer users a rich experience.
The lesson: Everything should have a purpose.
Keep Earthquakes Weird
Regardless of content, you’ll find that clever, instinctual design gets the point across. Here is a site that arguably has very little substance but offers plenty of engagement. OK, maybe it does have some substance, you really never do know. In any case, Keep Earthquakes Weird hits every note of UI/UX design perfectly.
The lesson: It doesn’t matter what your goal is, UI/UX design gets you there.
Take It App
Take It uses a marvelous hook to pull the user right in, followed by animation and storytelling that keeps that interest level high. Bonus points for animation that drives the story and the sale.
The lesson: It’s OK to make a sale with UI/UX. Transparency is appreciated.
The takeaway
What you should take most from these designs is the sense of intuitiveness that is universal in great UI/UX. You don’t have to think when you’re navigating, you just know what to do. Recreating that sense of ease isn’t easy, but it is absolutely worth doing.
This post was written by Michael Georgiou, the CMO and Co-founder of Imaginovation, a full service, turn-key digital solutions company serving Raleigh, NC and Charlotte, NC. He’s a dynamic business professional with proven success in creative strategy, online branding, project management and communication projects. Follow him on Twitter at @MGeorgiou22.
