7. Finalise UX

In my previous articles I explained the UX first step – UX Research, UX second step – UX Plan, 3rd Explore UX , 4th UX Communication, 5th step Create UX and 6th step – UX Feedback. In this article I discussed how to Finalise UX. First  always ask “is this the best you can do?” Use of images and icons – In any UI, icons play a major role to connect with the audience. Besides, depicting the color and style, they must communicate with the users and can bring huge improvements. Font & colors hierarchy – Make a simple guideline and follow it, using colors and font sizes properly. The best visual hierarchies lead users to take the action confidently.

All these steps are part of the UX process and I categorized these steps into 9 steps, i hope you will enjoy this seventh step. Join our newsletter and we will keep you updated with next steps.

7.1 Finalise Layout : Visual Designs That Appeal

UX-market-Research

Visual Design, works on the creation of a website and its other relative areas by making ideal combinations of images, fonts, colors and other elements. A competent visual design does not drift away from the content or the function, rather it makes it more attractive in the eyes of the user and help to build faith in the brand.

Basic Elements

The basic elements of visual design are-

  • Lines – It joins two points and is useful to define shapes, allocate and give textures a form. All straight lines have length, breadth and direction.
  • Shapes – These are self-occupied areas. A graphic artist uses lines of different value, color or texture to describe the area.
  • Color Palette – It uses a variety of combinations to distinguish, add a depth, give stress or arrange information. It basically works on the psychology of the users.
  • Texture – It refers to the actual feel of a surface or even the known feel. Repetition of the elements leads to a texture and forms a pattern
  • Typography – It includes the choice of fonts, size, alignment, color and spacing.
  • Form – This refers to the three-dimensional things and further depicts their volume and mass. It is made by joining two or more shapes and can be further accentuated through tones, textures and colors

Rules of Visual Design

An effective visual design works on the rules mentioned below-

  • Unity – Works on unifying the elements that belong together. Visual design needs to balance out unity and variety to avoid a too dull or bright design.
  • Gestalt– It helps the users to get an idea of the overall design as compared to the individual elements only.
  • Space – It refers to something getting placed in it. Space helps to lessen the noise, enhance readability and form an illusion too.
  • Hierarchy – Hierarchy highlights the important items as compared to the least significant ones. It involves incorporating different sizes, colors and placement on the page.
  • Balance – It develops equal distribution across the page. This does not imply symmetry.
  • The Contrast – Contrast makes the items more visible by working on the differences in size, color, directions and other features.
  • Scale – It defines a range of sizes. Develops interest and depth by illustrating each item based on its size.
  • Dominance – This one focuses on one element as the main point and others as the supporting ones. It is done after the process of scaling and contrasting.
  • Similarity – It uses direct duplication and creates the effect of continuity for the entire design. Similarity makes pieces set together in an interface.

7.2 Use of Images and Icons : Communicate Better

In any UI, icons play a major role to connect with the audience. Besides, depicting the color and style, they must communicate with the users. Icons should be clear to the users and serve as a proper visual representation of an object, area or idea else it’s very purpose fails. Icons are useful as they are easy to target and can be easily touched on a touchscreen or clicked with a mouse cursor. They lend a compact feel of the site by allowing toolbars, palettes and other icons all together on the screen. Further, icons can be easily recognized and are quite familiar to the members using them. They have a similar depiction so there is no need of translation. Moreover, they enhance the visual appeal and are aesthetically more pleasing.

finalise ux hamburger

But despite all these advantages, icons do tend to pose usability problems if they are designed without proper thought. There are very less icons that enjoy universal recognition and can cause ambiguity in the eyes of the users. Also, there is no fixed standard set of the icons so the users can fall prey to interpreting different meaning from them. Examples of icons misunderstood are the 3 line hamburger, heart and star etc. They cause confusion as these are used for different functions and vary from site to site. Even slight changes in meaning and functionality can confuse the user and make it difficult for him to rely on such icons.

finalise ux icons

In order to add clarity to the icons, make sure a text label is present along with the icons so that the meaning is clear as per the context. Further, as the icons connect with the user, they should be visible at all times even when the interaction is not happening. Special care must be given to the labels as they help to navigate across the page. Speaking of attention, mobile devices are compact and have fewer elements to focus on as compared to the desktop where there is a lot of content and areas that can be missed out. Let the icon have a logo, headline, single image and menu so that it gives full attention. Work on the relative size of the icons so as to highlight it as against the other visual elements.

For designing the icons, keep the design simple so as to quicken the recognition factor. Do not include much graphic detail while designing as it causes clutter. Take into the 5-second rule which states that if it takes more than 5 seconds to judge the right icon for the required purpose, it is lacking in its power to communicate. Also, make the icons run through the usability test as well as the one for memorability so as to see whether the user can recognize and remember it after some time or not.

7.3 Font and Colors Hierarchy : Visually Leveled

UX-data-Research

An interface must direct the user to its destination, making the journey worthwhile. There is visual clutter, though which can deter the user from going further. A solution to this problem is visual hierarchy. Visual hierarchy means that content must be viewed in a proper order that is following a hierarchy. Here, the importance of content decreases as it goes down the line. It is a tactic a proficient designer will adopt to take you from part of the content to the other. It follows a proper context with the beginning, the story and the call to action. The elements should be visually clear so that the users know where to head next in the logical order.

Weak hierarchies lack in terms of pulling the audience as they seem vague and do not have an appropriate context. They tend to leave an important piece of information, may have irrelevant topic or can go wrong with the placement of the design elements. Weak hierarchies often confuse the users with incomplete information and leave them clueless for the next move. The hierarchy plays a pivotal role in determining the user experience as it navigates the user across the website. Thus, lacking in an orderly hierarchy will cost you the rate of positive user experience.

In this article I discussed about Finalise UX important part of UX. I’m writing following UX steps & you can also read the previous steps below, Stay tuned and join our newsletter for more updates.

Related Post

Best UX Articles, Tools for UX / UI Designers ... Dear Readers, I am Prince Pal, working as a UI/UX designer at Think 360 Studio. Are you searching for cool UX blogs and tools. So here your search has...
Why designers should follow User Experience Proces... I am Prince Pal, responsible for User Experience and User Interface Design at Think360 Studio. I am talking here a simple UI/UX process, with the help...
15 Ways To Make Your Website More Usable Want to make a website that is an instant consumer hit? Well, make it is usable. That means the design should be all the more user-driven. You can say...
What is Agile UX and Challenges in Startup Product... User Experience - the prime subject in our website report card. Yes, a field that can make or break your website. With growing competition, the import...
The following two tabs change content below.

Prince Pal

UX/UI Strategist & Usability Tester at Think360 Studio
For 12+ years I have designed, developed and marketed websites / apps startups in New York, California, Florida and in India. Always focused on great User Interface is key.

Pin It on Pinterest

Shares
Share This

KEEP ME POSTED WHENEVER YOU PUBLISH NEW UX SH*T!

No spam, ever. Emails are never shared.