Using the power of familiarity in design

Improving usability by providing a familiar experience.

Aug 14, 2019·5 min read

You just found a useful hidden feature in the app you have been using for a while: “If only the button was designed and placed in some familiar style, the app would have been swift to use” I don’t know if you had this feeling, but I often do have this feeling with some apps.

If only I could buy dinner like buying things from amazon, the bachelor in me wished, and tada, services like Swiggy and UberEats came along. If only I could edit photos on the mobile the same way as I do on my PC, many apps with similar experience came along.

Whatsapp, Instagram, Facebook, Behance & many more applications have the option to creat post which disappear after 24 hours.

Behance uses the concept of stories from Instagram and WhatsApp to show our work in progress. Instagram got it from Snapchat, Facebook also started using it. All these apps are trying to give its users similar experience they have seen in the others and thus removing the learning curve.

Apple & Braun

Apple used the principle of familiarity or what’s called design Metaphors to design most of their products. It’s obvious that the Apple design team, have been influenced by, the Braun design approach. I think this approach of familiarity and aligning to the real-world has been a major part of Apple’s success.

Leveraging Mental Models

Jacobs Law states that “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

“A mental model is based on belief, not facts: that is, it’s a model of what users know (or think they know) about a system such as your website.” — Nielsen Norman Group

By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.

A car seat shape for controls makes it intuitively easy to understand and operate. Source

Design Patterns

Design patterns are descriptions of best practices within the user interface design. They are general, reusable solutions to commonly occurring problems. These are concepts which are fully tested to be successful and are applicable to multiple project situations.

“Practice safe design: use a concept” — Petrula Vrontikis

Benefits of using familiarity in design

In the current age of smartphone lead life, we are stuck inside them. © Liam Francis Walsh

We are so familiar with interfaces like chat, social media & eCommerce, as these have been the daily runner of our current life. We are social bugs who also shop online and are always available on chat. We are accustomed to the infinite scroll on the screen. We have familiar gestures and actions which we use every day.

There are a number of benefits of using familiar design:

Reduce learning curve- The users don't have to learn a new system, they can start using your product right away with their existing mental model.
User Retention- As there is no learning curve involved, and the user is able to complete their task without any fuss, the users will continue using your product compared to the competition who uses an entirely alien solution.
Improve usage speed- As the user is using a known solution, it helps reduce cognitive strain, thus speed up the process.
Senior Users- Giving a simple, similar UI to the most commonly used product will help the senior users as learning a new product is a big pain in the ass for them compared to younger users.
Designers Benefit- Designers benefit on using exiting design pattern, with proven solutions. This not only speeds up designers flow but also helps to create a product that gives a seamless experience to its users.

Familiarity; Leveraging it in our projects

Here is a design idea for a Travel documentation app. For this app, I borrowed experiences from commonly used apps (chat, social media & eCommerce).

“Add to cart” for creating a travel itinerary. Visit my Dribbble

Above screen uses a cart feature to add places to visit for creating a travel itinerary. The cart is then renamed and saved to create a trip. This design takes inspiration from an eCommerce app experience. This works similar to Pinterest's “pin” feature.

“Chat” like notes interface for documenting the visit. Visit my Dribbble

Chat is another feature we are familiar with. A “WhatsApp chat” like interface to document the visits with notes, audio recording, photos, & videos. The user could document the visit according to their itinerary and finally get a full record of the trip for writing blogs or for just documenting the trip.

The app also features a chatbot to create personalized engagement with the user. The bot will give you personalized tips regarding the destinations, remind you to click photos & videos, give updates on the weather, etc…

Menu depicting the file folders from the real world. (similar experience as in chrome). Visit my Dribbble

When you are forced to travel in uncharted waters

Slack uses interactive tours to help new users learn the interface and efficiently improves any contradictory mental models users may have. Source

There are certain situations where you have developed an entirely new flow for a product, which is going to have an unfamiliar experience for the user. On these unavoidable situations, make sure you give emphasis on guiding the user through the product flow and help the user learn to use the product.