Tag Archives: copy

tubikstudio graphic design icons

Visual Perception. Icons vs Copy in UI

Our eyes are a powerful instrument of getting great deal of information in split seconds. What is more, we do not need to apply too much effort: most of data is absorbed unconsciously. And that puts the issue of visual perception in the top significant concerns in the sphere of design, especially in product design which solves user’s problems and satisfies needs.


We have already shared our ideas about the role of icons in interfaces in the article describing their most important advantages. Today’s article deals with one of the aspects initiated by Quora questionIn UIs, do people recognize icons faster than words?” Having shared our ideas in the answer, we decided to provide its extended version here for our readers.


tubik studio icons design


The aspect of speed


Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces such as icons and their impact on general efficiency of the product has been an actual topic in global design community for a long time.


In the scientific research about visual perception, after theoretic analysis and the set of practical experiments,  A. Santella made a conclusion: “The fact that eye tracking is sufficient for some level of abstraction in our context makes an interesting point. It suggests that the understanding underlying abstraction, and perhaps other artistic judgments, is not some mysterious ability of a visionary few, but a basic visual competence. Though not everyone can draw, everyone it seems can control abstraction in a computer rendering.” People in general have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of high level of abstraction. That is the important fact designers widely use to improve usability and navigability of their solutions.


If the only aspect a designer is interested in using icons is speed, then the idea in the original question will work positively. Yes, in vast majority of cases people fix and percieve pictorial elements like icons and illustrations faster than words. Great proportion of users are visually-driven creatures by nature, so the following mechanisms of visual perception often work and should be considered in design process:


  • human eye fixes images much faster that written text
  • as psychologists claim, people need about 1/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)
  • visuals are transmitted to the brain much faster and important pieces of information are often fixed by brain as visual images even if they were obtained via text perception
  • images are less vulnerable in combination with the background and surrounding elements while text is highly dependent on the aspect of readability
  • images have a tendency to stick better in long-term memory which means that in interactions with the interface people will not need to process and remember more data than it’s really necessary, so interactions get faster.


Moreover, icons and other sorts of visuals in the interface can make it more universal in cases when an app or a website is used by people from different countries. So, we can claim that using icons improves general comprehension. In addition, pictures push the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.


tubik studio tapbar ui

GIF of the Tab Bar Interactions by Sergey Valiukh


One the popular elements of layout where icons play highly practical value is a tab bar. Featuring interactive elements it has limited space capacity, therefore icons as the visual symbols of available interactions become an efficient design solution. The concept by Sergey Valiukh provided above shows that interface animation can liven up the visual elements and enhance microinteractions.


tubik studio design UI

Weather Icons Presentation by Valentyn Khenkin


Here’s one more example showing how icons provide a user with necessary information by visual means. Symbolic images of weather conditions are easy to understand and at the same time they save a lot of space and give the opportunity to make all the layout of the screen informative but not overloaded.


In user interfaces, where in many cases basic interactions should take seconds, this aspect is highly important and it is the essential reason to turn hell out of everything into graphic material. All the things mentioned above feature great advantage of visual elements of the layout, for example icons, as a tool of fast and easy interaction with the product. However, there are some more aspects to analyze before making final design decisions.


The aspect of meaning


On the basis of diverse design projects and concepts designed in Tubik Studio, we deeply believe that speed should not be the only reason to consider and analyze in the process of creating user interface layout. People can percieve icons super fast but if the message they transfer is not clear and can have double-reading, this speed will not bring positive user experience. Fast capturing of the icon bringing wrong understanding cannot be defined as recognition, it’s just fast noticing. Recognition means not only speed but also right action or information which this icon should bring to the user.


There are loads of widely-recognized icons such as a telephone receiver for a phone call, the envelope for mail, magnifier for search and so on. Certainly, using these icons you create much faster perception of the UI functionality than using copy instead of them. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtlfully contemplated. If the icon doesn’t correspond with the goal and meaning it is assigned for, the speed of recognition doesn’t matter. That’s why there are cases when text transfers the idea or data more clearly and sometimes it is more effective to use double scheme, when the icon is supported with the text.


ipad interactions animation

iPad App Interactions by Sergey Valiukh


Here is the concept showing mutual support of copy and icons. This technique activates several elements of perception during one interaction and provides higher level of recognizability for call-to action elements. People, who instantly understand the symbol transferred with the icon, won’t pay big attention to the text. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstading or wrong interactions for people who can possibly misinterpret the meaning of the image. 


One more case when icons are often used together with copy are diverse side menus. Depending on the general stylistic concept of the interface icons can imply different level of complexity from simple stroke icons to sophisticated and detailed ones. 


tubik studio blog app

Blog App by Ludmila Shevchenko


This design concept of the blog app shows how icons can become a multipurpose visual element. In the presented interface they support the titles of the categories for blog posts. Textual presentation of the category is visually supported with good-looking and memorable image. At the same time, copy removes the possibility that different users can see different meanings of the images. What is more, in this case icons support another important function providing color markers for the categories. This technique makes interaction with the app faster and easier for users and at the same time enhances usability and navigation. 


Anyway, the decision on applying icon, text or both in the layout should be based on thoughtful analysis of the target audience and understanding the goals and conversions which have to be obtained via the interaction.


Reasons for applying icons in the interface


Summing up the points mentioned above, we can define several popular reasons of using icons in the interface:


— speeding up data perception

— enhancing memorability of the element via visual images

— improving navigation with visual markers

— saving up space on the screen or page when the long words or phrases are replaced with icons

— supporting copy material and providing its additional visual explanation

— supporting general stylistic concept and its harmonic expression in broad perspective.


PassFold UI design by Tubik Studio

User interface design solutions for PassFold project


Points to consider


Obviously, it is impossible to satisfy any user and consider every existing cognitive scheme, but still there are some general aspects which have to be thought out in the aspect of design with high visual perception:

— target audience (physical abilities, age, cultural background, general development and education level)

— typical user’s reading skills

— typical environment of product use

— level of global or local product spread

— level of recognition for the chosen graphics

— level of distraction/concentration provided by the graphics


All the mentioned points deal with human cognitive abilities influencing quality and efficiency of visual data perception. For designers, it’s important to bear in mind: it’s not enough to make users see the elements of the layout, it’s vital to make them recognize their meaning and quickly understand their message. Copy and icons should not fight against each other to see which one is stronger, they should support each other for the sake of better user experience.


Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu by Sergey Valiukh


Recommended materials


Diverse issues of visual perception have been an object of scientific and applied research for many decades. In terms of design issues, we could recommend the following articles for those who would like to know more :

What Designers Should Know About Visual Perception and Memorythe article by VanseoDesign analyzing basic aspects of visual perception in design perspective;


Design Principles: Visual Perception And The Principles Of Gestaltthe article by SmashingMagazine considering the principles of Gestalt theory essential for design practice;


Studies Confirm the Power of Visuals in eLearningthe set of ideas in Shift’s eLearning Blog based on the analysis of visual perception in interaction;


37 Visual Content Marketing Statistics You Should Know in 2016 – the article by HubSpot about trends on visual content with some stats;


From Icons Perception to Mobile Interactionthe scientific article about icons perception in mobile interfaces;


Visual Perceptionthe list of books on general aspects of visual perception which can possibly be helpful for those who are interested in the topic;


The Art of Seeing: Visual Perception in design and evaluation of non-photorealistic rendering – the theses of scientific research by Anthony Santella.

Welcome to see the designs by Tubik Studio on Dribbble and Behance

Welcome to read us on Quora

copywriting tubik studio

Copywriting in UI. Words that Make Design Go Round

Here in Tubik Blog we have discussed a lot of diverse aspects of design, including UX wireframing, layout, color pallete, typography, appropriate animation and UI visuals etc. However, there is one vital element which was not discussed in detail, being, however, a great tool of success. The tool which is as ancient as humanity is. The words.


Words are well known as the universal mechanism of incredible functionality. In terms of user interface of any kind, being supported with all the other visual features mentioned before in our blog, text becomes one of the key features to successful performance.


The essence of copy


Not to mess up with the terminology, it has to be mentioned that in the field of design (as well as advertising and journalism) content written in text is called copy whenever big or small it is. The only single word you write on the call-to-action is already a piece of copy which, even being so small, can become encouraging or vise versa — confusing.


Although in terms of design we can get more concentrated on visual elements such as illustrations, icons, buttons, animations, colors and shapes, neglecting the aspect of copy while creating the interface can bring out great disappointment in final result. Words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Therefore, copy should be thoughtfully analyzed and created in a way supporting general design concept and enhancing positive user experience via successful interaction.


tubikstudio library widget



Copy is the integral part of UI


Taking into account the fact that web page has rather limited while mobile application screen has highly limited amount of space that can be used for interaction elements, copy should witness elaborate and professional approach. That is actually amazing when designers are able to do all the work on the interface by themselves – obviously, that’s always great to have a unicorn on-board. However, they are not obliged to do it. Moreover, in many cases being great professionals in design they have difficulty tackling the issue of correct and appropriate copywriting for the screens.


This job as well as any other needs special skills and knowledge which designers need to master additionally. It has to be said that a great number of them really go this way, carefully studying the techniques and methods of creating copy that will be informative and engaging for users and at the same time will support all the visual design solutions applied for the screens or pages.


The other way to sort out this problem is to engage the professional copywriter in the process. Any way you go, the most important thing in this aspect is to find the way of creating copy for the interface that makes every single letter count. As copy is the integral part of UI design, we believe it should support the same philosophy as any other part of a layout: everything put on the screen or page has to be functional and purposeful. Everything should work for the user.


Tubik Studio UI sketches


Functions of copy in the interface


Copy belongs to perhaps the most comprehensive and multifunctional ways of interaction and engaging the user, especially when it is created on the basis of psychology and linguistic knowledge as well as deep analysis of target audience and product’s purpose. Efficient copy has a number of general functions, which can be presented altogether in one piece or in different combinations depending on the aim of the copy created. Let’s take a look at the most basic of them.


Copy implemented in an application or a website can and should:

— inform

— communicate

— enable interaction

— enhance navigation

— appeal to feelings

— engage emotions

— create tone and voice


Good piece of copy rarely covers only one of the presented positions. In vast majority of cases both designers and copywriters are keen to implement the copy which supplies several functions at the same time improving usability and speeding perception of all the content on the screen or page.


tubik studio web ui design


Copy is visual


One more thing that designers creating interfaces of any kind should always bear in mind is that copy is one more visual element of design. As well as the icons, fields, buttons, illustrations, toggles and the like, it literally occupies the part of the screen or web-page as any other graphic component and influences general stylistic presentation of the app or website. That means that both its informative content and visual presentation significantly affect efficiency of copy. This is the sort of mutual support of outer and inner side.


It’s also important to remember that success of the efficient copy directly depends on such design solutions as choice of types and fonts, background, placement of the copy. All the mentioned aspects greatly affect the level of readability, so when they are done inappropriately the copy even being highly meaningful will lose the chance to get all its potential applied.


So, let’s see what is the short bottom line here. Copy, which contains useful data but is poorly presented, will not work. Copy, which is visually presented in amazing way but shows the lack in meaning and purpose, will not work. Keep the balance to make everything go round properly. Make meaning and appearance support each other and both aspects will get more powerful in terms of usability.





Stages when copywriting is involved in design process


According to everything above mentioned, there are some stages of design process when professional copywriter can become a great help in the process:


— creating copy presenting user personas and use cases – done by professional copywriter on the basis of information obtained from user research, they can be more efficient as the text will get concentrated and can be more efficient, especially in terms of teamwork;

-creating copy for call-to action elements;

— creating copy for intro-screens, tutorials and tooltips;

— creating instructions and notifications for screens and webpages;

— creating the copy for sets of catalogue and menu positions;

— creating enganging copy for landing pages;

— creating templates for item descriptions etc.


product_design_tubik studio


The list is not a sort of cure-all here – it’s just a recommendation on the points to consider. On the basis of our studio experience, we can say that, in particular, it is useful for design teams which are keen to optimize and improve production so that all the professionals involved in design process could get deep into the work they do best of all and not get distracted with the tasks that are not directly in their skills scope. This sort of strategy usually brings high level of performance. As for freelancers in UI/UX design, working alone, our thoughts can be helpful to consider this sort of aspect and perhaps master some new skills in supporting visual solutions with effective copy.


This article is just a start of discussion of the copywriting aspect in the sphere of user experience design. In future posts we will get more in details about all the general aspects mentioned today.

Welcome to see the designs by Tubik Studio on Dribbble and Behance