Hi all, I am designing an interface which I am trying to decide whether to use an icon or not to allow the user to refresh report data on their page.

From a usability standpoint, I am afraid if I use an icon which refreshes report data instead of text (i.e. "Refresh Data") the user will not know what the icon is going to do. However, an icon will be more aesthetically sound with the design.

My question is, in this case, do you think an icon would suffice and users will know what to do, or would the link with explicit directions be a better choice.

A secondary question; what is the general rule of thumb when determining to use icons and images rather than text for actions on the site? I do not want to confuse the user, but I also want an aesthetically pleasing design not overloaded with text.

1 answer

danwellman 5600
1
point

There's nothing wrong with using icons instead of text (see the icons above the question/reply input on this site for example), but problems can arise when you use unfamilliar icons that are not accepted as 'standard'.

For the refresh icon, use something that looks like a common refresh icon, this search returns examples of what I immediately thought of when reading 'refresh icon' in your question. Something with curved arrows on it...

Also, to ensure as much as possible that the meaning of the icon is still conveyed, use title text for the icon link (I assume that it will be a clickable <a> element..?) You can also make sure that text of the link is still readable by screenreaders, but doesn't get in the way of the design by giving the refresh icon element a large negative text-indent to position it off screen, the following styles will do this:

#refresh {
    text-indent: -5000px;
    display: block;
    overflow: hidden;
}
Answered over 6 years ago by danwellman
  • Great answer. I would add that you can use hybrid between "pure icon" and "pure text". You can have an icon with a text under or beside it. That way you are 100% sure that it's readable and you can make it look great. Gabriel over 6 years ago
  • yeah good point, that gives the best of both worlds if the design allows for it :) danwellman over 6 years ago