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


Editor’s note: This post is written by Manish Bhalla for 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.

How to be a Gmail Power User [Infographic]

The Internet has been trying to kill email for forever and so far, it’s not doing a good job. Why else would there be so many guides and articles out there teaching you how to achieve Zero Inbox or how to be a Gmail power user?

This infographic adds to the pile with plenty of doable tips that can help you work faster (use the keyboard shortcuts), more productively (canned responses, auto-archives), and be more organized (use filters, folders and labels) on Gmail.

My favorite of the lot has got to be the Undo Send feature which has saved me too many times than I’d like to admit. It’s also interesting to know that you can set the cancellation period for up to 30 seconds after you hit Send. Check out the infographic for more tips and hidden Gmail secrets a power user should know.

power gmail user infographic



Parallax Effect in Photography [Photoshop tutorials]

This time, Chris from Spoon Graphic blog will show us how to create the parallax effect with three cool examples. It is not the usual step-by-step photoshop tutorial (hence the 6 minute length), but it does gives us a lot of useful tips and tricks.

And that’s all for today. What do you think about our list? Do you feel interested to try any of them? If you think there is another cool tutorial we forgot to add, please share it in the comment section.

In this 12-minute video tutorial, Brandon Bradley will guide you on the necessary steps to convert your standard 2D photo into a fun 3D parallax video.

Made by Lankapu Chen, this tutorial is a 2-parter, each less than five minutes long. It shows us the basics on how to collaborate Photoshop and After Effects to create a simple parallax effect with two flowers patches.

This video from 2-minute Design channel will show you how to achieve parallax effect using only Photoshop CC. The video is short (hence the 2 minute timeframe) but it does give us a lot of tricks on how to deliver this effect.


Check his work in this video below:

In this professionally done tutorial, Joe Fellows shows us how he’s able to bring photos to life using the parallax effect with Photoshop and After Effects. It’s so exciting to watch because with the right tools and creativity, we can “freeze time” or imitate a “slow motion scene” with these tricks.

Parallax Effect – 2-Minute Design

Inspired by Joe Fellow work’s for WWF, Patrick David played around with open source software to achieve the 2.5D parallax effect. You guessed it, he successfully combined Blender and Gimp to achieve the parallax effect. You can read his full step-by-step guide here.

Animate Photos in Photoshop – Michael Tierney

And here is another good example:

Here is an example of the parallax effect in action to illustrate what I’m trying to describe.

2.5D Parallax Effect Photoshop Tutorial – Spoon Graphic

The effect can also be called the 2.5D parallax effect. 2.5D refers to the visual depth perception in an otherwise 2-dimensional image or view. If you want to adopt this parallax effect in your photographs, you can, with the help of Photoshop.

Ken Burns Effect – Photoshop Training Channel

We’ve been collecting some of the best tutorials on Parallax in Photography. Some of them may require extra video editing software like Adobe After Effects to execute. If you don’t have it, you can check out the tutorial which creates the parallax effect with open source software.

Parallax Effect Tutorial – Lankapu Chen

Create a 2.5D Parallax Video – Brandon Bradley

In under 5 minutes Steve Martin will teach you how to to "fake" the popular parallax effect in Final Cut Pro X. He will show you how to use Pixelmator to create two layers, then import them into FCPX. The finished result looks very cool.

How To Animate a Photo – Joe Fellows

The Parallax Effect is also known as the Ken Burns effect, which is named after the filmmaker who made this effect his signature visual style in his documentary films. This technique is a panning and zooming effect that is used to create something like a video from still images. The zooming and panning across photographs gives the feeling of motion, which keeps the viewer visually engaged.

Using only Photoshop layers and a timeline panel, Michael Tierney guides us on how to animate more complex parallax photos comprising buildings and a bridge in the shot. In 12 minutes, you would know more about creating parallax effect than before.

2.5D Parallax Effect using free software – Patrick David

Photoshop Training Channel give us this awesome 30 minute long step-by-step Photoshop tutorial. What these guys do differently is animate both panning and zooming simultaneously, which is super cool. They’re using Photoshop CS6 in this tutorial.

Faking a Parallax Effect in Under 5mins – steve Martin

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.


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.


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.


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.


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.


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.


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


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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


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.


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.


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.


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.


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


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


How to Refactor CSS – A Guide

After a while, CSS files usually begin to abound in unused rules that we need to identify and clean out during refactoring. There are many online tools that enable us to investigate these obsolete rules, and sometimes also allow us to quickly ditch them.

If we want to play safe with our CSS file structure, there are also ready-made architectures, such as SMACSS or ITCSS, that offer effective techniques about how to organize CSS files in a scalable way.

The best-known tool for this purpose is probably UnCSS, a Node.js module that makes it possible to get rid of unused CSS rules fast, and it also provides us with sophisticated configuration options that make it easy to fine-tune the cleaning process.

It mainly depends on the project how best to organize our files, but there are some universal rules, such as to use a separate normalize.css file for CSS reset styles, a separate global.css for global styles that are used across the whole project, and to store 3rd party libraries in a separate folder.

1. Conduct an Initial Audit

The main problem with !important declarations is that if we want to override them in the future, we need to put even more !important declarations in use, so it’s best to weed them out wherever it’s possible during the refactoring process.

Unused CSS investigates unused CSS rules, while linting tools, such as CSS Lint, make it possible to quickly find compability, maintainability and other issues.

It’s therefore a good idea to trace forward these additional modifications we’ll need to perform, and build them into our refactoring schedule along with the primary, CSS-related tasks.

In refactoring, the goal is to decrease the specificity of selectors (keep them short) as much as it’s possible, as selectors with higher specificity significantly reduce selector reusability, and lead to a bloated code base.

Initial Audit

2. Set Up a Manageable Plan

Refactoring helps prevent CSS explosion, improves code readability and reusability, and makes CSS sleeker and faster to execute.

If we used them inconsistently in the past, we need to convert them so that they can constitute a concise system

3. Track Progress

The lowest specificity (0001) belongs to selectors that only target one general HTML element, such as <h1> or <li>. The more inner selectors a compound selector contains, the higher its specificity is.

Git Version Control

4. Stick to a Coding Style Guide

It’s important to take into account that we don’t necessarily want to remove unused rules from all the CSS files we have, for example from global, reset, or 3rd party stylesheets, so we need to exclude them while performing the cleaning.

To have a better picture about what we need to refactor, it’s the best to start with a comprehensive audit to see what we currently have.

  • naming conventions
  • formatting rules
  • declaration order
  • units and values we want to use
  • commenting rules

Refactoring is usually needed after a while, as even projects that started out with a concise and organized code base sooner or later begin to lose their clarity; consistency, obsolete rules and duplicate code parts appear; and we also start to override styles and employ more and more hacks and workarounds.

Coding Style Guide

During our everyday CSS workflow, sometimes we bump into issues we can’t solve, and we begin to use so-called magic numbers, values that work for some reasons but we don’t understand why. For instance take the following example:

5. Set Up a Coherent File Structure

The same rule of thumb applies for hard-coded values as well. Probably the most frequent occurrence of hard-coded values can be found in line-height rules:

 .class1 { position: absolute; top: 28px; left: 15.5%; }

The main problem with magic numbers is that they are circumstantial, and they embody the “programming by permutation” antipattern. During the refactoring process we need to remove these arbitrary rules from our code, and replace them with more reasonable solutions wherever it’s possible.

Certain selectors, such as id or selectors coming from inline styles, have higher priorities because they override the styles belonging to more generic selectors. For example the specificity of the #id1 selector is 0100.

It’s not enough though to just introduce a coding style guide, we also need to stick to it when we rewrite the code during the refactoring, and expect the same from everyone else who works on our project.

6. Get Rid of Unused and Duplicate Rules

The best way to keep our CSS code base maintainable is to stick to the “refactor early, refactor often” rule of thumb. In this post we will take a look at some tips about how we can conduct an effective CSS refactoring process.

CSS rules followed by the !important statement override regular style rules. Using !important rules sooner or later lead to incoherent code. It’s not a coincidence most linting tools mark them as error.


Along with obsolete rules, duplicate rules also lead to superfluous code bloat and performance loss. We can remove them by using the CSS Purge Node.js module, but we can also work with CSS linters in order to search for duplicate rules in our CSS files.

To make maintenance and debugging easier in the future, and to avoid failures that can stem from using different units, such as em and px, simultaneously, we need to stick to coherent rules about how we use relative and absolute values.

7. Reduce Specificity

After we are ready with the preparations, the first thing we need to do is to set up a proper CSS file structure that pays attention to the cascading nature of CSS.

Reduce Specificity

Online tools, like CSSDig mentioned in Step 1, can be used to quickly find these high specificity selectors. It can also be useful to set up a rule in the coding style guide about things like the maximum level of nesting, or a limit on using id selectors.

The important things to decide upon are:

Refactoring working code is always a daunting task, but we can ease the pain if we create a plan about what we need to do, slice up the refactoring process to manageable chunks, and make a feasible schedule.

It’s also important to manually scrutinize the code during the initial audit, as many problems on the architectural level can only be caught this way.

  1. Qualified selectors, such as p.class1 (defining the p tag is unnecessary here, as it makes it impossible to use the same class with other HTML elements)
  2. Deeply nested selectors, such as .class1 .class2 .class3 .class4 ...
  3. IDs, such as #id1

In CSS refactoring there’s a crucial thing we always need take into consideration: some things that we refactor, e.g. changing selector names, will make it necessary to adjust the code of the relevant HTML and JavaScript files as well.

8. Weed Out !important Rules

If we don’t want to create our own coding style guide, we can also use someone else’s, such as ThinkUp’s which can found on Github.

The 3 main types of high specificity selectors are:

There are many great online tools that can help us in this endeavour. CSSDig is a powerful Chrome extension that analyzes the CSS of a website, and explores its weaknesses, such as too specific selectors or repetitive properties.

9. Clean Out Magic Numbers and Hard Coded Values

The specificity of a CSS selector is calculated from the number and the types of the inner selectors it contains. CSS specificity is expressed as a 4-digit number that’s the easiest to understand if we check out this visual CSS specifity calculator:

If we use too many similar colours on our site, it can also be a wise thing to rationalize the colour scheme by reducing the number of colours we employ. (Here’s a post on how to choose a website colour scheme in a practical manner.)

CSS refactoring needs to be an essential part of the front-end development workflow, if we want to have a manageable and optimized code base. When we refactor CSS, we clean up and reorganize our existing code without adding any new features or fixing bugs.

 /* bad, we'll need to add extra fixed line-height rules to the child elements of .class1 */ .class1 { font-size: 20px; line-height: 24px; } /* good, the flexible line-height rule can be safely used by child elements as well */ .class1 { font-size: 20px; line height: 1.2; }

Hard-coded values make our code less future-proof and more rigid, so as part of refactoring we need to dig them up, and replace them with flexible values.

10. Refactor Units and Values

When we need to write CSS quickly, we may begin to rely on them though because of their simplicity.

A coherent coding style guide can remarkably improve code readability and maintainability, so before we start to refactor it’s essential to set up a CSS coding style guide.

Before embarking on refactoring, it’s an essential step to back up our initial files. Introducing a version control system, such as Git or Subversion, into our workflow can also significantly improve the refactoring process, as we’ll have a registry about the sequential steps we’ve taken, and we will be able to return to a previous stage if we want to redo things.

Refactor Colours