Intuitive UI & How it Can Help Improve UX

A user interface can be called intuitive when users understand its behavior and effect without the use of reason, experimentation, assistance, or special training.

It is a known fact that humans always correlate things in the virtual world to those of the physical world. When it comes to sailing chartering, they always look for patterns in order to understand how certain things work.

There is an expectation of how things on a website works, and if those things change from one page to another, it doesn’t only create confusion, but also frustration.

What is an Intuitive UI?

This is why, when it comes to heavy web pages, it is always advised to display a part of the content or a loading bar to keep users on the page.

what's intuitive UI

This is something that UX designers could leverage upon — the human tendency to seek patterns.

To counteract the latter, you can incorporate tooltips or integrated help messages that would guide users how the website works.

Now that we have a little understanding of what intuitive really means, let us go through the different aspects of creating a familiar and intuitive UI.

For example, if something looks like a button, we know that if we click on it, it will prompt some action. Similarly, if there is a link, we know that clicking it will result in either opening another web page or take to a different site.

However, if we come across a UI, which is not only difficult to navigate, but also contains triggers that sound unfamiliar to us, then that UI is possibly non-intuitive.

Creating a Familiar and Intuitive UI

In the end, the fact remains that a website that is difficult to figure out or has several distractions will never become intuitive. Other than keeping an eye out for usual design issues like picking the right color scheme, or the perfect content structure, you also need to ensure that your design is intuitive.

Usually, we do not like changes to common patterns. For example, a Windows user may find it awkward, after moving to OS X, that the Minimize, Maximize and Close buttons are on the left side, of the window. The same is true vice versa.

1. Don’t Reinvent Patterns

A non-intuitive design is similar to this scenario in that it obstructs the focus of the user with an unfamiliar situation, with no obvious solution. When it comes to website design, the design is intuitive as long as the user is able to complete the task without any interruption. On the other hand, unintuitive design shifts the focus of users to elements that are not related to their task.

don't reinvent patterns

2. Be Consistent

The way the adage goes is that if you give the customer time to think, they will most probably not buy. The same holds true when it comes to website design. If a page takes “too long” to load, then there is a huge possibility that the user will won’t wait it out and will just move to another website.

One cannot focus enough on the aspect of consistency when it comes to creating an intuitive design. While designing a website, there is a need to have consistency between pages.

If you see two user experience designers talking to each other, the topic of discussion would most probably be revolving around “intuitive user interface”. For any design project these days, the foremost criteria is probably on how to make it intuitive. In fact, intuitive has become the most common adjective of the user interface.

3. Ensure Minimal Steps are Required for a Task

Flipping between using a top navigation bar for one page while using a sidebar with navigation links on another page is an example of how to cause needless distractions and frustration that will ultimately drive your visitors away.

It is a seamless way of offering help while someone is actually using your website. This doesn’t only saves them time, but also makes the entire user experience more pleasant, less confusing and more effective.

4. Use Tooltips & Integrated Help Messages

In this post I will try to shed some light on the hidden facets of intuitive user interface.

Even a small decision like lacking the discipline to be consistent with the position of navigation bars is crucial in making your site design intutive.

use tooltips

Nobody wants to spend a whole minute to create an account. This is why you need to streamline the signup process and ensure minimal steps. Simplification and the reduction of redundant steps are key to retaining and converting visitors.

This is one of the most critical aspects of an intuitive UI. The fact remains that it is difficult to create a universal UI. While for some users your UI might be intuitive, there might be others who would disagree.

5. Make Sure the Website Loads Quickly

We are accustomed to certain patterns, and moving away from these patterns is just not user-friendly.

Given this, it is reasonable to ask what it means for a UI to be intuitive. Although every other designer uses this term, it’s hard to find a specific and meaningful explanation that defines intuitive UI properly.

making sure website loads quick

Conclusion

Editor’s note: This post is written by Manish Bhalla for Hongkiat.com. Manish is the founder and CEO of FATbit Technologies, a web agency that builds cutting-edge ecommerce solutions for startups. Manish counsels businesses on technology, online marketing tactics and help startups formulate the right strategy for their individual needs.

Imagine that you are looking to buy a luxury car. You head to a showroom. The salesperson takes you to the car, and you take a step forward to get in it while admiring its beauty. Just as you try to open the door handle, you realize that there is no door handle and instead of admiring the car, now your primary focus is figuring out how to get into the car.

User experience is often mistaken as visual appeal; in fact that’s only one part of it. The other significant factor is how well your product gets adopted by users. If you fail to effectively offer an intuitive UI that is easy to understand and can help complete intended tasks, then your visitors will probably move to a competing product that does.

40 Mobile Apps Onboarding Designs for Your Inspiration

This onboarding design is part of of a presentation for an app called Bemyspot which appears to be shopping app that rewards you for selfies, discovering new spots and social sharings. It is designed by Rosario Sarracino and Ivan Paudice.

Here is a smart use of icons on walkthrough screens. Green highlights on illustrations with greyed out portions look great. Designed by Nitesh Chandora.

The onboarding screens describes an app that is fast, mobile, and friendly with appropriate illustrations that get the message across. Designed by Wayne Baryshev.

Check out these smooth illustrations and animated onboarding screens by Virgil Pana for inspiration. It’s designed with an education institution in mind.

Drawn and designed by Anandu Sivan, here are some funny and creative illustrations on the tutorial screen of an app. It doesn’t say however what sort of app it is but the illustrations deserve a highlight.

onboarding-animations

A walkthrough screen for an app which finds identical photos on your computer and phone and removes them. This creation by Tetiana Zahorska plays with the white on bold background color approach.

user-onboarding-screen

I like the human illustrations and different background colors used in this onboarding app by Melvin Johnson. This will probably stay a concept since it became too fun for its original purpose, as mentioned by the designer.

bemyspot

Speaking about colors, these onboarding screen by Dux Nguyen are amazingly bright and colorful. They clearly show that you can play games with your friends and chat with this app.

onboarding-screens

George Gao chose grey as the running color theme for these onboarding designs. The mascot is a nice touch, and it makes an appearance on every design for continuity.

space-onboarding-screen

These illustrations by Ivy Mukherjee are funny and creative, however, the wordings are a bit small and difficult to read. This however is the perfect example to show why well-done illustrations play a major role in the onboarding experience.

the-planet

"May the force be with you!" An onboarding screens where the planets get a makeover; inspired by Star Wars, created by Anton Chandra.

debut

The very first thing users see when downloading an app these days is an onboarding screen. An onboarding screen is like a walkthrough, aimed to introduce what an app does to a user and of course how to use it. Thta’s the simplest way of describing it. Designing it however is a totally different thing.

bicycle-event-onboard

These illustrations are similar to the orbital stylings of Ghani Pradita but are adopted throughout all the onboarding designs. These designs are by Faiz Al-Qurni.

ios-app-illustrations

This is one more onboarding screen with awesomely minimalistic illustrations with a green-eco theme going on. Navigation buttons are placed at the bottom of the screen for convenience. Designed by Martin Strba.

onboarding-walkthrough-screens

But let’s take a look at these 40 examples of onboarding screen designs from creatives from all over the world then you can tell me in the comments whether or not you are on board with the onboarding screen idea.

onboarding-screens

These are onboarding screens for budget hotel apps. Blue and white seem like a safe but still relevant color combination for a hotel booking app. This is designed by Muhammad Watsik Dzawinnuha.

world-places

We finally see an onboarding screen design for e-Commerce, an industry that probably needs this type of design most. These are created by Katya Dihich to aid in the shopping process.

onboarding-screen

The onboarding illustrations for what seems to be a travel app features sceneries on the same rounded mountainous background. Designer Anggit Yuniar Pradito has a few more onboarding design ideas in his portfolio.

diaryibadah-guidescreen

In a few line illustrations Aika explains what you can do with this travel app. You can slide the screens or close them with the X.

onboarding-screens

Sasha Gorosh produced an engaging and fun onboarding screen inspired by Space travel. The illustrations are simple and can get you "on board" in no time.

onboarding-screens

Such playful illustrations will definitely make the onboarding experience more enjoyable. As you may have already guessed, these screens are made for a florist app. A nice color scheme and design by Jocelyn Crankshaw.

onboarding

These funny screens encourages you to find some food. I love the way illustrations are connected on both screens in a step-by-step way. This is designed by Syafrizal Wardhana.

onboarding-screens

Sometimes illustrations can take a secondary role in delivering instructions, like how Carlos Ramos does it. These drawings are smaller but still detailed.

onboarding-screen-illustration

The chat bubbles and the globe on the illustrations are drawn quite detailed. I can imagine how great it would look as an animation inside any discovery app. Nice work by Ghani Pradita.

e-commerce-onboarding-screens

This is an onboarding design for a lock screen but which fits for a weather or travel app as well. Brilliant use of colors. The designer Xiu Yuan has more oriental designs in her portfolio.

greeting-screen

Jinyi Fu shows you how to pair colors and bold illustrations. It probably is still a work in progress because it lacks the text to give meaning to the drawings.

zing-play-onboarding

A greeting screen designed by Anggit Yuniar Pradito, this one shows a successful booking and isn’t afraid of using more than just one or two colors. Simple and minimalistic.

onboarding-preview

These are onboarding designs for an international calling app by Ivy Mukherjee. The bright green color scheme reminds me of WhatsApp.

mobile-onboarding-screen

A clean and funny onboarding screen designs by Anwar Hossain Rubel for a travel app. I like the watercolored clouds on the background and colorful dots which add something magical to the design.

onboarding-screen-chinese

The layout, gradient, illustrations and use of color in this design is amazing. The CTA button is highlighted in orange which looks strangely awesome upon a deep blue background. A nice design by Murat Gursoy.

app-onboarding-mockup

Each image on these screens is placed into postage stamps which alludes to the service it provides: delivery. Anastasiia Andriichuk understands that humor goes a long way as shown by astronauts and hot air balloons doing the deliveries.

finance-app-intro-screen

Here is one more onboarding screen design created by Anton Chandra. Anton has a space inspiration thing going on in his designs, including this one.

travel-onboarding-screen

These colorful screens for the ModMom app is pretty much the most welcoming of all the designs featured on this post. The funny background illustrations also help. Stunning work by Staci Carpenter.

onboarding-screen

These onboarding screens are my favourite. I love the use of illustrations and the color scheme here. They look minimalistic, detached, yet still meaningful. Designed by Mariusz Onichowski.

onboarding

These illustrations show different places to visit around the world. It looks like a concept of onboarding for a travel guide app. Brief descriptions of the locations add to the allure. Another great piece by Anton Chandra.

tutorial-screens

I love the use of outline buttons here by Wenhui Yu. The designs looks light and minimalistic, in spite of the general use of bright colors and clever illustrations.

sembako

An onboarding screen needs to be designed in the most simple, welcoming and user-friendly way possible. Onboarding screens like empty state pages created to inform and educate users. Not every app needs an onboarding screen although I think onboarding screens save users from the frustration of having to figure out on their own that new app they are trying out.

app-onboarding-screen
weelio-onboarding

These cute little people were drawn to show you the app’s possibilities and features. They look pretty cute, in serious working mode, bu still cute.

modspot

Ray Martin created these for a social app. The use of gradient onboarding screens for the app called Vue gives off a stunning effect. Sometimes we just have to be brave with color choices.

kptncook-screens

These onboarding screen were made for sea transport app. I think that day and night in the designs shows that this transportation company works 24/7. The influence of Material Design is strong int his one, by Ivan Bjelajac.

onboarding-screens

These onboarding screens seem to have their own personality. Each screen is highlighted with different colors and a person-centric illustration. The designer, Min had fun with this project.

onboarding-screens

A recipe app with fun possibilities, the onboarding designs here created by Eva Hoefer really drive home the idea of how to use this app.

onboarding-screens-interphotos

Another Wenhui Yu creation, this one uses photographs insead of illustrations. It’s for a fun fashion app for teenagers and the designer nailed it.

onboarding-screens-modmom


20 Wrist-Worthy Smartwatch UI Redesigns

Moto360 (Minimal) by Ali Attarwala. Sleek, simple, and flat, this watch interface features a red line on the edge as a progress bar for a process.

SUUNTO by Mihail Shelkunov. On the image you can see the redesigned concept of the Suunto watch. It allows song-switching, determining your location, and turning on navigation.

Moto360 Redesign by Radek Jedynak. This UI shows a list of contacts when you choose one of the lists. You can call or send a message to the person easily.

Currency Converter by Daniel Keller. This design of a currency converter app is flat and minimalistic but simple is best when it comes to handling numbers and figures.

E-Ink by Atif Ahmed Akkhor. Super clean and minimalistic UI in white. Inspired by BRAUN watches, the screen displays time, date, weather, and notifications about missed calls and messages.

Let us know which of the following resonated well with you.

Global Smartwatch by Studio–JQ. Huge typography in use here, in both fonts and icons. The image in the background is a nice subtle touch.

Yahoo Weather App by Impekable. This weather app features a background of your current location, eg San Francisco here, plus the local weather information. White typography makes the whole design look minimalistic and cool.

Framer.js Prototype by Steven David. For users who require daily medication, this is a good UI that features the medication name and dose, when the time has come to down the next set of pills.

There are many talented designers out there who are showcasing their take on smartwatch UI design. In this post, you will find 20 such examples. Some of these are concept designs for particular apps such as the weather app, clock app, music app and fitness apps, while others are complete reimaginings of existing UI.

Weather Card for Android Wear by Abhinav Chhikara. Swipe up to get more details on the weather, or leave it by default to see just the weather temperature.

For any new hardware released, the software and UI design within makes or breaks the product. As much as we hate poorly designed mobile UI, we are attracted to UI that work smoothly, are well thought-out and look beautiful when being used.

3ANGLE by Rasam Rostami. 3ange is a concept of a sci-fi watch face. The corners of triangle show the time and it changes every 5 seconds.

Clock App for Android Wear by Ramotion. The gif shows how the watch looks like showing time and then up pops a notification.

Ebay for Android Wear by Gary Keeler. On this gif you can see process of confirmation some action on Ebay. The animation looks pretty awesome.

Circa by Ruben Rodrigues. The screen shows the time and the favourite apps of the user on 8 points near the edge of the screen.

Simple by Yecid Sanmartin. Here’s a nice concept design featuring the look and feel of a time, weather and temperature you would normally see on a mobile app instead of on a watch.

Moto360 by Carl Hauser. It looks like a home screen for smartwatch. A nice wallpaper with time and weather information. This design is definitely banking on the less is more feel.

Weather App by Jan Erik Waider. This weather app shows temperature and weather conditions for three days ahead. The gradient on the background is supposed to adapt to the current weather situation and change color.

Weather App for Moto360 by Nicolás J. Engler. This smartwatch interface is clean yet informative. It shows weather conditions and temperature on a beautiful background.

Nike Running for Android Wear by Riste Lazoroski. The screen showcases the number of kilometers the user ran as well as the time. This is used with the Nike app. The color is also a refreshing touch.

Music App by Amit Jakhu. Here is a simple concept of a music player on a smartwatch. It has the ability to play, pause, repeat, and shuffle songs. The album cover on the background looks amazing too.

Medical App Design by Ramotion. See live data about your health on the screen of your smartwatch. Here you see the blood pressure data displayed with a graph in the background.


How To Design Empty State Pages for Websites & Mobile Apps

DigitalOcean Floating IPs

Bitbucket

GitHub Wiki Pages

The Value of Empty States

The most important element on an empty state page is context. This may come in the form of graphics, text, or both. You want to inform users why the page is empty and what sort of data could be there (emails, tweets, friend profiles, etc).

Empty states also give a sense of “freshness” with new accounts that have no existing data.

Dropbox has a great design with two CTA buttons. Whenever a Dropbox user has no folders they can either create a new folder or add a sample folder onto the page.

Chrome Bookmarks Manager

This empty state by ModSpot is a brilliant example of quality design and encourageable content.

tookapic homepage

The goal is to help users take action and clear up their empty state. Whether this requires adding data or taking action on the site, CTAs guide users onto the next step necessary to clear up the empty state.

Perhaps the best way to learn about empty state design is to study some examples. The brilliant web gallery emptystat.es curates empty state pages from various websites to mobile applications.

metrics dashboard empty state

Apps that thrive on a userbase should design empty states that encourage user activity. This activity could be publishing content, adding friends, uploading photos, or whatever the app was made for. The screen below from Tookapic is a great example.

Vital Page Elements

The best way to encourage activity is to write great copy on your empty state page. Guide users through a content flow that encourages user activity over the entire application.

DigitalOcean has a brilliant dashboard with empty state graphics that illustrate their point clearly. Their company uses creative branding and clean typography so it’s no surprise their empty state pages are so illustrative.

digital ocean empty state

Call to action buttons are the active elements but remember that page copy explains what the user is doing. Nobody just clicks buttons without knowing why.

No Pinned Groups

And while text is the primary communication medium on the web, you can’t overlook the value of graphics and icons.

dropbox folder empty state

Flipboard

Encouraging User Activity

Mac Infinit App

Empty Facebook Feed

no posts in modspos

Mobile apps may have similar problems but the screens are much smaller. This makes it a lot easier to draw users right into the action.

This can include mobile applications, social networks, or even empty blog categories. The purpose is to deliver an empty page that looks like a non-empty page. Visitors should recognize the lack of content as a means of impending content.

Websites on larger screens have more room for extra buttons. Web pages can also have larger navigation elements which can draw people elsewhere onto the site.

gumroad empty state page

Static information is just as valuable and it’s not inherently bad to have an empty state. For example this page design shows no current metrics from a tracking app dashboard. The user may want to add some metrics, but it’s not bad to leave the dash empty.

Web vs. Mobile Apps

I find it’s best to keep mobile apps simpler with fewer options. Use visuals as eye candy to encourage action and point towards a very specific user flow.

Similarly the Gumroad empty state offers two options targeting different potential actions. Users can add a digital product or a physical product to get started selling.

nusii app empty state

This can be solved in a similar style as Nusii does on their proposals page. Where there are no proposals the user is guided to the “add proposals” button in the top navigation bar.

Buffer Empty

BBC My News

Empty State Design Examples

But empty state pages still have value even when no action is needed. These designs are primarily made to provide information.

Invision

Webflow Beta

digitalocean dashboard list

Workout Challenges

webflow websites beta dashboard

I’d like to cover how empty state pages work and why they’re so important. Interface designers should consider these points and try to apply them to empty states whenever appropriate. But to get started let’s examine how an empty state functions and how it provides value to the interface.

invision app dashboard

Facebook Messages

bitbucket no downloads

LayerVault

no pinned groups homepage

Audible Audio Books

empty state facebook messages

This test done by Redditor Bambo_Ocha checked 20 different apps for empty state designs. Various design styles occurred with CTA buttons, sample data, and even brief tutorial walkthroughs.

layervault version control app

Icons are used to demonstrate what the user should add to the site. An arrow points to the button users should click along with some text encouraging behavior. This is a brilliant empty state design with all the elements you’d expect.

boxing challenges workout

Similar static designs may work great for empty blog archives or empty messages folders. It’s perfectly acceptable to have no messages to display. But the page shouldn’t be completely empty with no context either.

buffer empty app

Another crucial aspect of empty state design is the call to action button. This is typically designed like a button although hyperlinks work fine too.

microsoft word app documents

Blank pages are boring, dull, and even confusing. Empty states provide guidance to help users understand what they’re looking at. Even though it’s a blank page the extra context helps.

evernote chats android

Evernote Chats

beamly app android

The beauty of a great empty state design is in the simplicity. Empty pages explain what should be on the page once there’s some content. It may be passive like an empty inbox, or it may be actively waiting for the user like an empty Twitter feed.

audio books list

Beamly For Android

pocket list ui design

I’ve hand-picked some examples deserving of your attention that best illustrate empty state design. If you have any other suggestions feel free to let us know.

bbc mobile app my news

Pocket App

empty wiki on github state

Empty state pages are lesser-known design elements with a significant role in user experience. In its simplest form, empty states are page layouts seen when a user first visits a page where no content is available.

flipboard not following anyone

Empty state pages for all mediums should follow similar design trends. But there are some minor differences with user experience on a desktop compared to a smartphone.

chrome empty bookmarks manager

Other links on the page lead to help guides and contact details. Everything is incredibly streamlined and ties together nicely.

mac app infinit screen

Word App Documents

facebook web feed empty state


Facebook Redesigned: An In-Depth Analysis Of Independent Designs

What I like most here is the clear structure of data in the timeline. Everything is organized clearly and there are even sidebar links to switch between recent posts and popular posts.

But some of the sidebar elements do come off as slightly confusing. For example, a green button with a single plus sign right beside a “follow” button. One uses just a symbol, the other just text. This feels incongruent with the design style and other profile info.

Streamlined Profile Page

Timeline posts can be sorted by “recent” or “popular” based on your preference. This is big for usability, especially in the wake of Twitter’s backlash against the recently-mandated algorithm change.

Also many of the buttons display larger with extra padding and bigger typography. Since Facebook is meant to be interactive it only makes sense to increase visibility of items like buttons and hyperlinks.

haris jusovic facebook redesign

Overall this concept feels compact and lighter in bloat. It would be nice to see Facebook place more of a focus on interactive elements and maybe increase their font sizes, too.

The design is striking but can be off-putting to some users. It relies on multiple page columns to organize the user’s profile links, along with a timeline view of recent posts. All the colors and elements stay true to Facebook’s design styles. It certainly feels like a Facebook timeline page.

In this design he places more focus on simplicity by highlighting the page owner with a more prominent header photo and profile pic.

Multi-Column Timeline

Facebook’s homepage is the initial timeline view that users see when first visiting the website. It includes recent posts from friends, a chat list, games, ads, and other relevant info like upcoming birthdays.

Larger websites like Facebook deal with much more data and a userbase that wants easy access to that data. In the homepage redesign by MagicVoltage you’ll find one consistent feature: lots of content crammed into one page layout.

alejandro osorio facebook redesign

This profile page redesign comes from Haris Jusovic, a designer from the Balkan region of Europe.

Veering towards a vertically columnal layout is Alejandro Osorio’s redesign. This layout represents the profile timeline view that Facebook users see when they visit a user’s profile page.

Content-Dense Redesign

But in defense of this design it handles densely-packed content very well. There’s plenty of whitespace between elements and it runs a four-column design brilliantly.

The busy-ness of this layout is what makes it both great and potentially controversial. Having all this content on one page makes it super easy to navigate – once you actually learn where everything is located. And the top-left icon links are just vague enough to dissuade anyone from interacting with them.

magic voltage facebook redesign

This so-called Facebook 2.0 redesign created by Marcelo Silva is really a sight to behold. His demo layout displays an updated homepage with a timeline

There’s a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large sites like Facebook serve a very particular user experience with some good elements, and other not-so-good elements. In this post, I’d like to examine different Facebook redesigns to analyze interface concepts that could improve the current user experience.

Voluminous Navigation

I’ve pulled a handful of custom FB redesigns from Dribbble users, each with specific enhancements and updated UI elements. Take these ideas into consideration for how they look, how they might function, and how they could impact usability if implemented live on Facebook.