Building an Intuitive User interface

Designing Intuitive User Interfaces

Building an Intuitive App

Author: Charles Ley Baldemor

"Your app is intuitive when users see your app, they already know what they are going to do."

The Fundamentals

- Understand that you’re not designing for yourself.

- Get out of your head and make assumptions about what they know and what they don’t know, if you do that, people cared enough that you can make a great user experience.

Building an intuitive app is the best way to deliver an award-winning app. When we apply that principle, users won’t delete the app because the functions and features that have been implemented suit exactly what they want. Before designing the app designer should put himself in the users' situation so that he can easily identify what the user needs in the design, it is also good to make assumptions so that in the early phase of the design you have an initial design to show.

These are my 5 principles on how to build an Intuitive app.

1. Platform Savvy.

When designing user interfaces, designers should consider platform conventions. People nowadays are commonly using these two platforms such as Android and iOS, both platforms are unique to each other that’s why they have different ways of design conventions.

When we say platform conventions those are the graphical user interfaces element designed for their function, for example in Android, users can see menus by tapping their hamburger menu, while on iOS users can usually see menus at the bottom of the navigation screen.

Considering these platform conventions is a nice thing because it reduces the steps on how the user navigates on the screens, also it reduces the work of the designer because the designer will not think anymore about how to design the problem.

Key Points

• Swiping the table row to reveal actions like delete and more settings.

• Delete to swipe because you believe that it should work and started to get in use to it.

• Swiping to delete is a platform convention.

• Being consistent with platform convention is a very nice thing.

Platform Convention Examples

• Standard IOS Guidelines.

• Tap, pan, swipe, pinch, rotate, and long press.

• Controls, switches, buttons, tabs, navigation bars, tables, tab bars, and icons.

• Icons that convey actions.

Breaking Conventions

• Designing a new type of experience for users and contexts.

• You have the responsibility to tell people that you’ve made a different style with your app.

• Not standards, not obvious.

• Gives instructions on how to deal with it.

• Slows performance because It adds elements to what the operating system has.

2. Easy to navigate

Your app should easy for the users to navigate, when it takes time for the users to navigate a certain feature, there's a possibility that they could uninstall your app immediately. The design should be simple and easy enough for the users to navigate.

Your navigation is perfect when.

1. Tells where you are (e.g Title on Navigation, and Home active tab).

2. Show you where else you can go (e.g shows the other Tabs).

3. Explain what's in there (these are the contents in the current navigation).

Why do we need navigation?

• Because there are way more pieces of information and functions given to an app to display.

• Group things together based on what place they should be placed.

• Categorize lists so people can understand where to go.

Intuitive Navigation Systems answers 3 basic questions

1. Where am I?

2. Where else I can go?

3. What will I find when I get there?

How to make the navigation system intuitive.

• Progressive Disclosure. (Progressive disclosure is a design pattern that involves sequencing information and actions across several screens to avoid overwhelming the user. )

• Categorize lists.

• Be Predictable.

• Change is good, sometimes.

• Make Selection Obvious.

• Normal and Active rule, field the icon for color blind people.

• Provide Hints.

• Tap any area of the screen and show hints on what to do next.

• Less is more.

• Giving shortlists is ok, giving too many choices is too intimidating.

HAMBURGER MENU(Example of bad navigation for me)

• They can’t see options right away.

• Too many taps to navigate.

• Difficult with the back button.

• Allowing users to see a lot of stuff that they don’t care about is not a good thing.

• Don’t know where else I can go.

• Users may not realize the full potential of your app.

3. Clear.

The information and functionalities are pretty straightforward and understandable.

Words & Language

• Clear as possible.

• No big words.

• Use simple words that everyone can understand most of the time.

• Avoid Jargons.

• Users don’t need to know the technologies.

• Measure which is the real user between the consumer and the professional.

• Be descriptive.

• Don’t just put icons put labels.

• Be succinct.

• Avoid truncation. (Words that are spelled differently, but mean the same thing. Example: sun = sunshine.)

• Use shorter words to understand well.

• Make text legible.

• Use a typeface that is eligible.

• Make it large enough to read well.

• Use IOS dynamic type or Android.

Icons

• Clear context

• Universal icons because when you see them outside the mall, for example, they already know what it is.

• We know what they trying to communicate to us.

• Don’t put a label on the icon itself, it is a bad design.

• Don’t put icons that people have never seen before, it is a problem.

• The icon can be learned but the bad icon is not likely to be learned.

• Don’t design what you think it should be like putting things on the icon together.

• Less is more, design icon that is recognizable like when you zoom out you can see it.

• If you can’t find a symbol whose meaning it is, then just stick with texts.

Animations

• Giving hints through animation, for example, user inputted the wrong password, the text field will shake because it’s wrong.

• Simple animation with ease so that the user will not intimidate.

4. Simple.

Using basic language to communicate with people & reducing visuals because the user interface needs to be simple.

Simple App Rule(Pareto Principle.)

80% / 20%

• 80 % of people use it.

• 20% features on the app or vice versa.

Prioritize the 20% feature of the app so 80% of the people using it will recognize the app.

If you see people don’t want it then simplify. You don’t give people controls like what is on the pilot, you give them simple buttons.

5. Focused.

For example a simple pen with a toggle button on top to show the pen.

-Focused base on what it really needs to be.

Designing to support very specialized like calligraphers, painter

-Make an intuitive product base on what they are based on users need.

Successful apps

• Designed with a very clear purpose.

• Can probably do less.

• Don’t’ have a hamburger menu

• Starts with small

You pick something that you are really passionate about and it’s important to tell people and try people what it is to figure out and make things in their life better, easier, faster, more fun, more delightful, and then we dived in and make that happen.

People won’t delete it because the functions and features that have been implemented, suites them on what they really want.