I have been testing a mobile application (iOS) that allows you to access past actions. I'm currently using an icon like this https://cdn1.iconfinder.com/data/icons/material-core/21/history-128.png to access the page, and the icon is located on the top right corner of the screen. Almost all of my testers thought it was a refresh or back button. Any suggestions on how to make it clearer that it's a history button?
4 Answers
Take a look at the Nielson/Norman report on icons. It might resonate with your findings.
This bit is your answer: "Always include a visible text label."
In testing I always find that users know few icons and end up having to learn what they mean. If I can I go with text. "History" is going to be much clearer, especially given the backwards arrow's association with refresh, back (as you mentioned), and also undo. Text can also be internationalized, avoiding a mismatch of associations with particular objects.
That said it may be a space issue or you may have a ton of palettes for your users to learn. How you represent actions could be modified with another icon to denote past. Or you could take a page out of Adobe's book .
The main issue with the icon you're using is it makes a full circle, which is representative of the common "refresh" icon found on most browsers.
Another option would be to research "previous" icons, such as the common undo icon. You will need to add some indication that there are multiple options, such as:
- A number indicating how many previous steps are available
- A stack
Here is a basic mockup I made:
Another idea: