UI DesignerUser interfaces design, usability and UX evaluation
1 2 3 4 5
Web interfaces Web interfaces Mobile interfaces Mobile Icons Icons UX evaluation UX evaluation Theory of Usability Theory About me About me

[5] page: 5.1




Main page   /   Theory   /   Visual graphic design of interfaces


Visual graphic design
A interface with attractive design can serve as the key choice driver and motivate the user to choosing a particular product out of several equal alternatives.

It goes without saying that good design can boost User satisfaction and partially even Efficiency (i.e. the speed of users� work) and Safety. All of these factors enhance the product�s trustworthiness.

Design of all interface elements responsible for similar actions must follow the same style patterns. This enables the user to guess the way they should be applied even prior to the actual application.
This rule enhances the product�s Efficiency and the Intuitive prediction coefficient.

On top of consistency of functional elements� style it is also important to maintain design consistency of graphic and information elements of the interface in line with standards of compositioning, proportion, color match rules etc.

All this makes the interface look consistent, instead of been made up of various navigation elements scattered across the screen.

Highlighting of certain interface elements through color, shape, space, animation or other ways enables the designer to program eye-tracking (i.e. the designer is capable of programming the path users� eyes follow across the screen and the scenario of the user�s interaction with the product.

Let�s analyze impact of certain visual interface attributes on Usability:


One of the key parameters of visual interface design rests with choice of a color palette. At this point, limitations related to the corporate style might have the strongest impact on the choice of color interface elements.

There are several features influencing Usability. For example, color-driven associations: the red color draws the user�s attention to the coming operation, i.e. alerts the user on it, whilst the green color stands for operations, which are available or have successfully completed.

Application of matching colors for design of logically connected interface elements enable to link and arrange interface elements in accordance with the compositional design, which facilitates and speeds up identification of the link between these elements. As a result, we achieve better Productivity and Efficiency.

Usability of interface also depends on the choice of color contrasts, which is especially important for design of text boxes. The simplest example: it is much easier to read black letters against the white background, than grey letters against the black background or blue text against the green one.

Consequently, simple coloristics rules reduce pressure on the user�s eyes and enhance Efficiency and work speed.


Impact of images, like photos and drawings, upon the user is fairly strong. Each image conveys huge amount of information. If one was to convey the same amount of information through text, it would take too much space and, however, lack the necessary emotional constituent.

It is crucial for theme of the images making up the interface to reflect the nature of the offered product and the usage occasions. In other words, they are to fit the targeted audience.

In case if the images of their theme are unclear for the user / the target audience, the latter might think that the product is aimed at somebody else and will find it hard to link it with themselves. Such a perception interferes with scenarios of the product�s usage and reduces the product�s Efficiency.

Quality of images always influences User Satisfaction.

Icons and pictograms

Particular case of images are icons and pictograms used as functional elements of an interface. User interaction with any on-screen interface involves scanning the whole screen area rather than consequent top-to-bottom reading of each line.

Advantage over text buttons offered by icons (as well as by any other images) is that an image is easier to detect visually on the screen compared to text, so this is a handy method of highlighting most important controls which are to be seen first.

Images on functional elements � simple and schematic � are visualization of mental models users would associate with the functions behind them.

User's mental response to familiar association-bearing image is faster than it would be to a text describing the function, so the decision to push the button will be taken quicker, which will result in greater Efficacy.

However, if an icon image bears no clear associations, user, on the contrary, will have difficulty decoding it. In such instance, response will be slower (impairing Efficacy) and, in case of wrong decoding with no text hint provided for an icon button, might even result in improper action (pushing or non-pushing) causing scenario interruption and decrease of Effectiveness.

Like any image, icons influence the degree of user satisfaction: attractive high-quality icons featuring uniform design will add to Satisfaction, while unattractive or incongruent ones will impair it.

Thus, apparently, any visual interface design is actually interference with visual impact of each design element over a user, so overall positive or negative effect of design elements over product usage convenience will depend on the degree of cohesion in impact of such design elements ensured by the developer.

Awareness of the factors behind impact of visual design elements over a user enables us to create interfaces which provide for added usage convenience and high degree of product Usability.

< | Further: Interactive prototyping

User interface design | Usability evaluation | Usability testing