All Things Design Part III: Become a Ninja

In the first two parts of the series, we brushed up on some of the most important aspects of design that are recommended for all rookie professionals to get handy with. In this third and final part, we are going to highlight those concepts which you should absolutely know about as an experienced UI and/or UX designer.

Making your design color-accessible

In Must-know Tips to Become an Efficient UI and UX Designer we discussed how crucial it is for design to be usable across a large scale, including individuals with disabilities, for which we have Web Content Accessibility Guidelines.

In this feature, we take on the element of color in creating accessible design. According to the World Health Organization, there are over 2 billion disabled people worldwide as of 2019 out of which around 1.3 billion people are affected by some form of visual impairment. Therefore, it is your responsibility as a designer to create products that are all-inclusive and can be consumed universally.

Color accessibility lets visually impaired individuals, including people with color vision deficiencies, to experience digital products in the same way as ones with perfect eyesight. Practices like adding optimum contrast to backgrounds with text, using textures to help color-blind people distinguish between elements in non-text graphs or charts, applying focus states to interactive components for seamless navigation, using elements beyond color (iconography, for instance) to highlight error messages, success states, or warnings, are a few ways in which you can design a website or mobile application to meet W3C’s accessibility guidelines.

Know more:

**The right contrast reinforces the pleasant quality of design**

Improving affordances with signifiers

In UI, an affordance can be referred to as a product feature that, through its design, suggests or prompts the user on how to interact with it; the most common example being the search bar on a website. A signifier on the other hand is an element (graphical or textual) that clarifies the affordance of a feature. For example, a ‘search button’ beside the search bar on a website.

The key takeaway with respect to the relationship between these two is the assignment of appropriate signifiers to affordances. An affordance can only fulfill its purpose well when it is backed up by a well-placed signifier counterpart. Not only does it result in organized design but it also enhances the user’s overall experience. Especially while building complex interfaces with affordances to cater to rising user demands, you should keep in mind that user-friendly signifiers are also the need of the hour in order to simplify a user’s interaction with the product.

Learn more about affordances and signifiers:

**Symbols signifying the purpose of the affordance which is the toggle button**

Implementing gestures in mobile design

Gestures are movements made by a user to trigger or perform a specific function on a mobile device using their fingers such as swipe, tap, drag, or slide. More advanced gestures include actions like shaking, tilting, or rotating the device. These make tasks more rapid and intuitive for users to perform, offering them tactile control of elements in some cases.

With the advancement of technology, more and more applications are coming in which support complex functions. Consequently, the volume of content is increasing significantly, making it difficult to balance between elements to show on and hide within the screen. Including gestures is an effective way to hide buttons and free the UI of unnecessary clutter. Moreover, the performance of gestures is so natural that users can easily learn them. They also offer modern-day users with a special way to interact with a digital product.

With respect to design, you should definitely read up on both Apple and Google’s gesture-specific guidelines so that when you start on a mobile design project, you know how to contribute to a harmonious UI for your potential users.

For iOS: https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/gestures/

For Android: https://material.io/design/interaction/gestures.html#principles

**Actions at fingertips made literal** **with gestures**

Practicing the Von Restorff Effect

Also known as “The Isolation Effect”, the theory predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. But how is it useful for product design?

Well, for starters, you can utilize this law to draw the user’s attention to more important elements and information To achieve this result, you can implement the theory on even common components like shape, size, color, position, or spacing. Another practical use of the Isolation Effect is highlighting brand color by imparting it to key elements like text or background of task confirmation buttons.
In order to make a component stand out, the surroundings have to recede to the background. Therefore, you have to strike a balance to achieve the effect of isolation and use it only if there’s a specific goal to achieve with the component. If a screen or a page ends up with too many distinctive elements, it will only confuse the user and lead to cognitive overload.

Explore the why’s and how’s of The Von Restorff Effect: https://blog.prototypr.io/the-designers-guide-to-von-restorff-effect-4a0ef9a30443