To Use Icon after the label?
Ex:
(Or)
To Use Icon before the label?
2 Answers
There are a number of different scenarios to classify the solution. This seems good for what you have done in this case
For Previous it would be better to go opposite.
For some known icons labels are placed below it:
However, the best is progressive reduction. Use no label at all.
Users are familiar with the icon. They see it all the time and therefore the meaning is ingrained in their memory forever more. Yes, the data shows that labels improve the user experience for the majority of users by strengthening the Sign. But what the data can’t take into account is the expertise level of a lone user.
The concept is simple enough. As a user becomes more familiar with a UI then they have less need for signposting. In the same way that on the first visit to a high street department store we may need to consult the floorplan, but over time and after repeat visits the need for orientation is required less and less. We swiftly learn that men’s ties are on the top floor at the back, or women’s shoes are on the ground floor.
When applied to a digital product, the progressive reduction can help to remove labels that are no longer needed once the user knows what the button does. This frees up the design to be cleaner and allows the user to focus on other tasks relevant to their expertise level.
We now need to take what this design approach has started, and begin applying it to the way users orientate and consume content. The first step is to understand the importance and strength of the Signs we are creating.
There is not really a rule that can apply to all scenarios when using icons and labels.
In this case, positioning the right direction icon after the next text is good (probably along with its placement on the right side of the screen) as it reinforces the action. Also, having the arrow point into the label is not as clear. Take a look at hospital signing as a real life example.
However, its partnering previous action would be better with the left direction icon on the left – again to reinforce the action.
As these are actions, they benefit from different placement. Other cases, for example a list menu, are more likely to have left positioned icons – if the general style has left-ranged text.
