Showing posts with label icons in ux. Show all posts
Showing posts with label icons in ux. Show all posts

Wednesday, 2 December 2020

Findability and Usability: The Cognition of Searching


Findability is essential to usability.  But how do individuals search for and locate things?  It turns out, our brains engage in two processes to find items.  Understanding them is key to creating findable features and usable designs.


Brain

Image Sources: pixabay.com


Guided Searching

The mind searches based on familiarity.  If we’ve used something before, we have a mental picture – or model – of what that item looks like.  When searching for known items, our minds scan our surroundings or screens for something that matches these models.  This guided searching is why similar products in a marketplace look so much alike – prior experiences have shaped what individuals look for when using something. 

 

Consider word processing software.  Why does the “bold text” feature in Open Office look similar to that in Microsoft Word?  Because users have created mental models for what these features should look like based on prior experiences with programs like Word.  They are now conditioned to search for such designs when using similar technologies.  Features that do not resemble these expectations will be more difficult to find and make products more difficult to use.



 

Random Searching

Finding new things is a different process because we have no mental model to guider our searching.  Rather, we look for items that stand out from their surroundings.  It is contrast – or difference from surroundings – that draws our attention during such processes.  This is random searching.

 

With certain items, there might be no prior product that filled a market space, so users have no mental models to guide searching.  Using these products means making feature easy to find, and contrast is key.  Central feature must stand out from their surroundings so users can locate them.  This involves

·       Using different colors to maximize contrast and distinguish features from a background (e.g., a red button on a black background)

·       Limiting the features available to minimize the things users focus on (e.g., 5 or fewer icons)

·       Placing features in prominent places (the center of a screen) where users look first

These strategies can help individuals find features when using new products and make new items easier to use.



Top UX Courses at Udemy


 

Identifying Features

In guided searching, users know what they are looking for and know what the items does.  So, when searching for the “bold text” feature, once I encounter it, prior experience tells me how to use it. 


Icons

Image Sources: pixabay.com


With random searching, finding find a feature doesn’t mean knowing how to use it.  Rather, features in new products should contain some something like text embedded in an icon to indicate what the feature does (e.g., embedding the words “upload files” into the icon for uploading files). 

 

Final Thoughts

We need to find features to use products effectively.  The more we understand the dynamics of the mind’s searching processes, the better we can address usability when designing products. 

 


About Author

Author bio image

Kirk St. Amant 
Kirk St. Amant directs the Center for Health and Medical Communication (CHMC) at Louisiana Tech University (USA) and is an Adjunct Professor of International Health and Medical Communication with the University of Limerick (Ireland) and a Research Fellow and Adjunct Professor of User Experience Design with the University of Strasbourg (France). 



 


Share:
Continue Reading →

Sunday, 6 August 2017

Hollow Icon vs. Solid Icon Which Is More Friendly for Recognizing


In UI design, what scenario should hollow icons and solid icons be applied to? Some believe that the hollow icons are visually more complex than the solid icons, while the solid icons are in fact more recognizable.


The opinions of designers on this topic varies. Some designers think that the hollow icons is made by lines, as a result of which, they are more difficult to recognize. However, they gives users a feeling of ease and exquisiteness. Others deem that the recognizability has nothing to do with this topic, but depends on the shape, color and other factors of the icon.

1. The function of icons.

First, this topic focuses on a specific type of icons: functional icon. Let’s take a look at the basic functions of this type of icons.

Functional icons are common in life, usually seen in the airport, stations, hotels, shopping malls and other large public places, providing guidance to people, as shown below:


In UI design, icons are one of the most common elements. The use of the icon originated in the Macintosh 1.0, even in the earlier Xerox graphical interface began. They are often given functions like action, description and so on.

Since the release of the smart phone system so far, the style of graphical interface has completed the transformation from the material design to the flat design evolution. With the introduction of ios7, almost all of the icons in Apps are becoming more and more flat and slim. The reason of it is that the over-eye-catching icons usually reduce the readability of the contents.

In general, the most basic function of the icons is to convey the information quickly.

In today's design work, the matching of icons and texts has reached a point of obsession. In fact, it is enough to express some abstract concepts with text. Putting an icon aside actually helps nothing about making users build connections between the icon and its function.


Nevertheless, icons are still relatively important. The function of icons is far more than “telling users the meaning on the first sight”. In addition, there are also many important features like immediate locating, content layer distinguishing and interface rhythm increasing.

Take a prototype example on Mockplus for example, if you just see the icons without the texts, the meaning of them is quite obscure. However, the functions of icons are more than that. The icons in the prototype is solid. The icons and the text together form a unity, in which the icons plays a role of alignment. If you remove the icons, the information in the list will be indistinguishable and there will be a visual confusion. Users will face more difficulty when focusing on the options on a line.

2. Are solid icons more recognizable?

Given that you were summoned by the call of nature and rushed into the big mall to find the rest room. Solid icons or hollow icons? Which can be recognized more quickly?

Solid icons are indeed more recognizable in the perspective of visual attraction. The following picture shows the influence of the elements that are attractive to the human eye (sorted from left to right):


Hollow icons attract the eye by their shapes while the solid ones do the same by their color. As a result, hollow icons are more difficult to recognize.

As early as the iOS7 system was introduced, there have been some discussion about this topic. Curt Arledge, an experienced designer who graduated from Viget, wrote an APP specifically, and did 1260 recognition tests for solid and hollow icons [1], look at the test results:


The results found that the difference of the speed of recognizing these two types of icons is just 0.1 seconds.


In the first group, the solid icons won. These icons are derived from life, the icons kept their original meanings. The recognition speed depends on how much the color and shape attract the eyes. So the solid icons are easier to recognize.




It is worth noting that the three hollow icons are more recognizable in the second group.

These three icons are abstracted from subjects in real life, among which the speech bubble does not exists at all. Designers create this icon in the graphical interface and endow it with a meaning; The forms of garbage bin and keys are various in life, so the icons of them are abstract summaries of them. In this case, the shape of the icons allows users to quickly identify the meaning of the icons, while the colors has become a factor of interference.

So, for icons expressing the same meaning of the original subjects, solid icons are more recognizable. For icons that endowed with abstract meanings, hollow icons are better.



Share:
Continue Reading →