VISUAL INTERFACE DESIGNING FOR ERGONOMIC APPLICATIONS

VISUAL INTERFACE DESIGNING FOR ERGONOMIC APPLICATIONS

INTRODUCTION

App designing has been one of the most important domain in Computer Science, as users continue to value ergonomics, aesthetics and simplicity of use. Designing interfaces for different users is difficult as different users have different preferences. For example, young people mostly prefer dark theme whereas elders prefer light and minimalist theme. So, how do we solve this problem. Luckily, there are some rules which makes our task easier and these rules are proven scientifically and definitely help you with the design.

Visual design aims to improve a design’s/product’s aesthetic appeal and usability with suitable images, typography, space, layout and color. Visual design is about more than aesthetics. Designers place elements carefully to create interfaces that optimize user experience and drive conversion.

CHOOSING THE COLOR-

First, we start off with the colors.  Before picking one we must know basic definitions.

Primary color- It is the color which is displayed most frequently across your app. It has to be chosen carefully considering the crowd which will be visiting the website. On the safer side choose a light theme which matches the content on the website.

Secondary color- Having a secondary color is optional. It is used to accent your application . It is applied sparingly. 

Okay so we know what are the basic definitions, now we choose background (background of the app) and surface(surfaces consist of various ) colors. 

This figure shows a possible combination of colors that can be chosen. (on primary and on secondary colors are ones which are chosen for writing on primary and secondary colors) . Error messages are generally displayed in red , success messages are displayed in green and information in blue.

Colors chosen should be

  • Consistent–  Colors must be consistent throughout the application and be compatible with the brand it represents.
  • Distinct– Colors should create distinction and sufficient distinction between the elements it is applied on.
  • Intentional- Colors should be applied purposefully as it can convey meaning in multiple ways .

 DESIGNING THE LAYOUT-

This is where the actual designing starts. It is a vast topic, we will just cover the basics of layout for you to get started. 

UNDERSTANDING THE LAYOUT

  • Predictable-Use intuitive and predictable layouts with consistent UI regions and spatial organization.
  • Consistent-Layouts should be consistent in the use of grids, keylines, and padding.
  • Responsive-Layouts are adaptive and they react to input from a user, a device, and screen elements.

For designing the layout we must consider things like navigation ( how will the user navigate to different pages, the type of navigation to be used to make it intuitive for the user sp that he can understand the application easily. )  . Icon design and sizes are highly subjective and vast so we won’t cover them here.

NAVIGATION

  • Lateral Navigation– Elements of the interface which are at the same level should be navigable using lateral navigation.

         Lateral navigation can be achieved using tabs, lists etc as shown in the image.

  • Forward Navigation– Elements at a deeper level can be explored using forward navigation for example, clicking a picture gives details about that or clicking an icon redirects us to its page . 

         Clicking on any list here will enlarge it and allow editing it this is how forward navigation works. It takes you a level deeper. It should be           only used for the purpose mentioned above. 

  • Reverse navigation– It is used to go to the previous page or go back(hierarchically or chronologically) . 

Apart from navigation there are a few more things to consider.

  • Buttons / Clickable items– All the clickable items are generally given an elevated look to indicate that they are clickable . Button icons should clearly indicate their function and button colors should be applied carefully ( red button for warning,..) .
  • Pictures– Enlarging pictures when hovered on them would be a good addition. Inserting slide effects would also be awesome.
  • Minimalism– Try not to fill the interface with multiple items very close to each other , try to give a cleaner look and putting many things on a single page would increase loading time (in case of web applications)

Great ! Now you are ready to design applications which are user- friendly, good looking, intuitive and efficient. 

REFERENCES

  • https://material.io/design/

 

Author – Yash Burad

Upcoming Events

There are no upcoming events at this time.

Subscribe for Newsletter

Related Posts

Leave a Reply