Mathew Joseph
UI / UX Designer
Made with

Split Icon Re-Design

Exploring alternative designs for the split tool in our map editor

The split tool icon is on the far right (with the two opposite facing arrows)

The split tool icon is on the far right (with the two opposite facing arrows)

The Problem:

I had a hunch that our current split tool icon wasn't intuitive enough for users to understand. This screenshot shows the toolset in our online map editor, with the split tool icon on the far right. 

I decided to embark on a personal initiative to design a better icon - but first, I had to validate whether my assumptions were correct, and if people could understand what the icon is meant to convey. 

Split Icon Re-Design

Initial Validation

I started by conducting brief, in-person interviews to validate whether the current icon design was intuitive. I divided my respondents into two groups of people: External respondents were those with no exposure to the mapping software. Internal respondents were people who worked at the company and had knowledge of the toolset. 

The guiding question was the same for both groups of people: "This is a set of tools that is used to edit digital maps. What do you think this icon on the far right represents?"

Interestingly, none of the external respondents could understand the meaning of the icon. Internally, there was one correct guess amongst a variety of other responses. People were more likely to associate the icon with 'stretching', 'expanding' or 'opening' rather than the action of splitting. 

This validated my hypothesis that a more intuitive design is needed for the split tool. 


Split Icon Re-Design

References & Ideation

I referenced a number of other well recognized softwares to see how they've visually represented the concept of a 'split' or anything similar; such as a 'cut' or 'slice'. 

From here, I started generating my own ideas.

Results

Takeaways

We learned a few important things from these conversations that helped us decide on and inform the final design.

  • Initially, I thought option C (the 'scissors' icon) would have been a winner. However, I realized through the interview discussions that while the first word that comes to mind is 'cut' it is interpreted as 'cut and paste'. This behaviour involved making something disappear and then having it re-appear somewhere else, which is actually quite far from what the tool actually does - which is to split something into two. 
  • The next alternative was option D. During these conversations, I noticed that people with experience in design softwares (such as photoshop, illustrator, and sketch) had different responses compared to non-designers (who tended to have more exposure to microsoft office / google docs. 
  • The most viable option appears to be option 'E' - the 'knife' icon. It seemed most clear to users that the icon represented a knife (although popsicle and highlighter were mentioned). It was also clear that a knife is used to cut. I realized the nuances of the shape are very important, because a slight change to the shape resulted in people still saying it was a knife - but for 'stabbing'!! 

If we do choose to go with the knife icon, we'll have to be very careful with how it's drawn to ensure that new users perceive it as a knife for 'slicing' or 'cutting' - rather than anything dubious. Definitely some more testing needed!