View All Posts

10 Principles Of Good Design

May 26, 2020

, In

UX / UI

By

Amichai Oron

share on facebook button share by Email
 10 Principles Of Good Design

Any act of design requires navigating through a forest of decisions. Every product may present a matrix of challenges that need to be aligned and prioritised. Trying to balance the company's goals with technical problems and at the same time uncovering the user needs is a big challenge.

Over the years, I've developed many useful terms and mental models that help surface problems and conceptualise them.

1.Ux Design is the act of communicating intent

Striking a balance between the creators ( Business/service provider etc.. ) and end users requires to embody the intents on all sides and a deep understanding of the persona with whom the designer is communicating with.

Before starting any project it’s extremely important to research the users and the creators intents. It’s also important to keep aligning and refining these intents as the project deepens.

2.Cognitive Friction

Cognitive friction occurs when a user feels that interface or product is working against their intent.

Imagine that you want to use a microwave and heat up a delicious plate. You are very hungry and your intent is to eat said the food on the plate!

To heat the food you decide to use  the microwave -  your secondary intent is to make that microwave work as fast as possible.

In the old days a microwaves used to have a simple time dial that turns. If you take the food out too early, you will simply close the door again and repeat the process.

New microwaves often have a digital interface packed with features . The only problem is that you never really understand how to turn the microwave on. They work against your primary intent and stop you from achieving your goals. A good interface is transparent to the mind. If your users are asking themselves existential questions such as what should i do now, how do I continue from here , why can’t send the order? why do I exist! You need to go back to the drawing board and fix the interface.

To remove cognitive friction you need to remove all barriers between the user and his intent, minimize choices and help prioritise the products various functions and flows.

3.Respecting Cultural habits

We are all creatures of cultural habits - We wear the same clothes, have the same day to day, eat the same food and watch the same movies on Netflix - There are many things to say about this phenomenon and its effect on User Experience.

All of us are passively accumulating cultural knowledge that becomes a common denominator in everything we do. We expect things to behave like we are used to using them. If you are using google every day to sign up to gmail - you will also expect the same flow at your workplace or at a pizza app login, Creating a different flow is not creative it’s avant garde.

A good interface leans on cultural habits as much as possible to reduce the learning curve. The only time it’s recommended to break out of cultural patterns is when introducing new technology or solving problems causing cognitive friction.It’s amazing to see someone cross from android to Iphone you can see how they become immediately distressed. For them everything is backwards the fear of feeling stupid take over and causes pain.  An unfamiliar interface is the number one reason for abandonment.

4.Clarity

Clarity is a principle that gives users the ability to anticipate the outcome. what will happen next.Imagine entering an office building with no signs on the doors - without the signs you might mistake the manager's office with the women’s or men’s toilet room. This feeling of anxiety occurs when you are unable to predict the outcome.

To improve clarity we need to leave hints and signs that help build a mental map of the product or service.

  • Using good Readability - Paying attention to how Features and call to Actions are named.
  • Consistency - build a vocabulary for your product, consistent naming system. Keeping consistent terms throughout the product helps know what to expect behind the next door.
  • Building hints into the interface - ask an expert to explain the feature or service and then incorporate the nuances of the explanation into the design.
  • Build a visual map of your service then find ways to  simplify it so that your users can easily build a mental map.

A great example of clarity can be seen in amazon product pages where the designer decided to use long descriptions rather that one word buttons. Using longer description helps the user anticipate what will happen pressing each one of the interface buttons.

Add to cart  = Add ,Buy now = buy ,Back to results = back

Example of good readability and clarity in amazon UI design


5. Affordance

Affordances is similar to the expression “form follows function” the from and context  of an object  provides clues as to how an object should be used. For example, doors have handles that hint on how the door opens. Doors that rotate on a hinge may have an ‘L’ shaped handle ,doors that slide will have a bar handle. In the digital world we need to give objects traits from the physical world.

Good Affordance
Bad affordance

6.Telling A Simple Story

One of the hardest challenges of building a product or service is telling a simple story - I like to say that meeting a new product is like going out on a first date - you want to give a good impression and focus on the most important information about your strengths and values. Your service needs to tell a simple story, anything that is not in the focus of the story needs to be  lower in hierarchy and introduced in a later stage.

7.Tunnel Vision

Recall your first drives down the main street at your home town. At first you were mapping out the intersections and noticing some of the more familiar brands like Starbucks and McDonnell's. With every pass on this street you were learning about other shops and mapping the ATM locations. Half a year later you could recall on demand where every service was.  The reason you couldn’t recall all of the details from the first time was that you were experiencing tunnel vision you brain was prioritising the data.

Can you see Honda?

In a similar way introducing a new interface the brain needs to interpret incredible amounts of data, like in the main street example the brain essentially regards letters as physical objects and whole words as landscapes , like in learning landscapes we first take notice of patterns and unique objects in the landscape which are used as anchors.

Adapt your interface to tunnel vision - using clear call to action, layering principles and reducing clutter.

8.Layering

Layering colours.

Layering is one of the  brains algorithm to crunch data - our brain searches for patterns tying to find the similarities, once these are found the brain will index similar layers to data sets. When it comes to building and interface There are a few common layer types

Color - Using repeated colours for similar data sets

Shape and size - using recurring shapes and sizes - a good example is using the same button size over and over again to indicate similar functionality.

Typography - using similar Text styles for similar content - it’s wise to start the project with a stylesheet for text sizes.

Break the pattern -  to draw attention to break the pattern.


9. Paying attention to legibility

Legibility concerns the recognition of text: the ease of identifying the shapes of characters and words. If the user can recognise text consistently, without strain or difficulty, it is legible. Many times in an effort to squeeze in text the font becomes unreadable.  White text is often used incorrectly in example it can be readable in larger sizes but becomes unreadable with smaller sizes , especially on light coloured backgrounds.

10.Don’t make me feel or look stupid

This special type of cognitive friction is worth its own category -  One of our primal fears as adults is to feel incapable or stupid. I’m willing to bet that 9 out of 10 times it’s why you would not try out something new as an adult.

My mother is a master of Microsoft Word - while working on her MA she wrote hundreds of papers. She understands that switching to ‘Google Docs’ will keep her work safe and backed up, it will also allow her to access it from anywhere in the world.

Regardless she will not switch platforms because of the  tremendous cognitive friction. When trying to work with the ‘Google Docs’ her mental map of the ‘Microsoft Word’ becomes unusable, she needs to relearn the interface, slowing her down from light speed to turtle speed. Though both products offer the same functions, the learning curve is unacceptable for her and is the main reason for her not jumping on board and trying out the free alternative with autosave.

To overcome the fear of cognitive friction the designer needs to acknowledge the users Accumulated knowledge and only change a familiar historic services gradually to newer concepts. An evolution rather than a revolution. By keeping cognitive friction down and lowering the learning curve you gain the users trust and keep the anxiety low.

Gmail vs Google Inbox is a fine example that. Gmail’s interface changes gradually over time offering new features but it looks the same, When they tried to introduce Inbox - the smarter version it wasn’t adopted - so they took the best features and started incorporating them slowly one at a time to the faithful gmail. The lesson to be learned is that the features were good but introducing them all at once was overwhelming and did not respect the cultural habits of the existing users.

Thank you for reading if you liked this article and found it helpful to leave me a message!  if not remember that life is a multiverse of opinions and that there are many truths.


About the author

Amichai Oron

Amichai Oron is a Isreal Based based technology designer behind some of the most innovative products created over the last decade. Founder of Sparkup design studio , Amichai leads a multidisciplinary team uniting people, culture, and technology to build joyful experiences for the world’s top brands and disruptors alike. Select clients include Teva, Mysupermarket, Cedato , Mind Kick, Algosec , and many more.