May 26, 2015
1 min read

Are small links more attractive to people as icons or text?

"Dear Optimal Workshop
How do you make a small link attractive to people (icon vs. text)?"
— Cassie

Dear Cassie,

I'm going to dive straight into this interesting question with a good old game of Pros and Cons, and then offer a resolution of sorts, with a meandering thought or two along the way. Let's kick things off with Team Icon.

The good side of icons: A picture is worth a 1000 words

When shopping online, the number above the little shopping trolley icon tells me how badly behaved I’ve been, and if I click on it, I know I’ll get to gleefully review all the shoes I've selected so far. There’s a whole heap of icons out there like this that people have absorbed and can use without thinking twice. Marli Mesibov wrote a fantastic article on the use of icons for UX Booth on the use of icons that is well worth a look. Marli discusses how they work well on small screens, which is a definite bonus when you’re on the go! Young children who aren’t yet literate can easily figure out how to open and play Angry Birds on their parent’s smartphones thanks to icons. And icons also have a great capacity for bridging language barriers.

The not so good side of icons: We’re too old for guessing games

On the flipside, there are some issues that may huff and puff and blow that cute little home icon down. Starting with there being no consistent standard for them. Sure, there are a handful that are universal like home and print, but beyond that it seems to be a free-for-all. Icons are very much in the hands of the designer and this leaves a lot of room for confusion to grow like bacteria in a badly maintained office refrigerator. Difficult to understand icons can also seriously hinder a user’s ability to learn how to use your website or application. When icons don't communicate what they intend, well, you can guess what happens. In a great piece advocating for text over icons, Joshua Porter writes about an experience he had:

"I have used this UI now for a week and I still have do a double-take each time I want to navigate. I’m not learning what the icons mean. The folder icon represents 'Projects', which I can usually remember (but I think I remember it because it’s simply the first and default option). The second icon, a factory, is actually a link to the 'Manage' screen, where you manage people and projects. This trips me up every time."

If people can't pick up the meaning of your icons quickly and intuitively, they may just stop trying altogether. And now, over to Team Label.

The good side of text: What you see is what you get

Sometimes language really is the fastest vehicle you've got for delivering a message. If you choose the right words to label your links, you'll leave the user with very little doubt as to what lies beneath. It’s that simple. Carefully-considered and well-written labels can cut through the noise and leave minimal ambiguity in their wake. Quoting Joshua Porter again: "Nothing says 'manage' like 'manage'. In other words, in the battle of clarity between icons and labels, labels always win."

The not so good side of text: Your flat shoe is my ballet pump

Text labels can get messy and be just as confusing as unfamiliar icons! Words and phrases sometimes don’t mean the same thing to different people. One person’s flat enclosed shoe may be another person’s ballet pump, and the next person may be left scratching their head because they thought pumps were heels and all they wanted was a ballet flat! Text only labels can also become problematic if there isn’t a clear hierarchy of information, and if you have multiple links on one page or screen.  Bombarding people with a page of short text links may make it difficult for them to find a starting point. And text may also hold back people who speak other languages.

The compromise: Pair icons up with text labels

Because things are always better when we work together! Capitalise on the combined force of text and icons to solve the dilemma. And I don’t mean you should rely on hovers — make both text and icon visible at all times. Two great examples are Google Apps (because nothing says storage like a weird geometric shape...) and the iPhone App store (because the compass and magnifying glass would pose an interesting challenge without text...):

When text and icons wins

So what comes next? (You can probably guess what I'm going to say)

Whatever you decide to run with, test it. Use whatever techniques you have on hand to test all three possibilities — icons only, text only, and icons and text — on real people. No Pros and Cons list, however wonderful, can beat that. And you know, the results will probably surprise you. I ran a quick study recently using Chalkmark to find out where people on the ASOS women's shoes page would click to get to the homepage (and yes, I can alway find ways to make shoe shopping an integral part of my job). 28 people responded, and...

Chalkmark first click text

...a whopping 89% of them clicked the logo, just 7% clicked the home icon, and just one person (the remaining 4%) clicked the label 'Home'. Enough said. Thanks for your question Cassie. To finish, here's some on-topic (and well-earned) comic relief (via @TechnicallyRon)

When icons go wrong
Share this article
Author
Optimal
Workshop

Related articles

View all blog articles
Learn more
1 min read

The importance of roles in making meaningful project experiences

In this post, Daniel Szuc describes why it’s important to go beyond how we may see our roles traditionally when only focusing on job titles. By exploring other roles, as outlined in the post that follows, we can all play a part in helping to glue a team together, making project work easier for all and creating a more positive environment to help in making meaningful project experiences.

Collaboration is hard and needs practice 🙂↔️

“Collaboration” is a term that gets thrown around in workplaces to encourage people to work together better. Sometimes, though, the people using the term may not understand the range of skills required to make collaboration work well, including (but not limited to) listening, expression, empathy, and curiosity.

Each of these skills requires practice.

So asking people to simply collaborate, without understanding the skills required nor the necessary spaces to practice these skills, may well frustrate people more than it helps.

Misalignment 😤

As work hums along in a team, it’s easy for misalignment to creep in. Misalignments are caused by a lack of communication, limited time, poor project management, and micro/macro issues that are addressed too late, causing friction between people. If specific roles are not put in place, these frictions can create difficult work environments, making coming to work unpleasant.

Teams may lack common artifacts to help them communicate with a shared language, which in turn helps connect a project and business narrative together. Importantly, this helps aggregate what a team learns together from customer interviews to help improve a product or service.In effect, there is no light leading the way, so people can get lost in details that have nothing to do with a common and well understood purpose.

Roles beyond a job title 👔

When we speak about roles, we are not referring to traditional job titles such as project manager, developer, and designer, for example. Rather, we mean roles that everyone can play at various points in a project, helping others do their job well and the team deliver on making meaningful experiences.Roles, beyond job titles or the tasks inherent in those titles, help people think in integrated and holistic ways beyond their official job title.

At times, our work requires that we delve deeply into design details; in other situations, we are required to step back and see how all the elements of our work connect in delivering solutions that are part of a broader narrative.As members of teams, we can work more effectively – whether it’s by advancing ideas or in recognizing when it’s time to consider alternative approaches.

Four roles for making meaningful experiences 🎢

We have identified four roles to encourage making meaningful experiences for the team and customers, as well as to encourage integrated ways of working:

  1. Facilitators can define approaches that guide the process of informing, sense-making, and evaluating. They can craft agendas for working sessions and identify what problems need attention. Facilitators can also manage interactions between functions, aggregate a team’s learnings, and map these learnings to shared artifacts. They identify themes that require further study and set goals for the team’s next sessions.
  1. Mentors need to be aware of approaches and skills that require ongoing development and practice, and organize safe spaces in which people can practice, using them over and over during working sessions and across projects. Mentors should work closely with facilitators and custodians to identify the knowledge that the team has captured and map it to a learning program for team members, with a focus on informing, sense-making, and evaluating.
  1. Connectors create artifacts that help bridge gaps and make interactions between people feel more fluid, connecting people’s skills and roles.
  1. Custodians maintain the knowledge base that forms over time and leverage it in creating approaches and courses that help our project teammates to improve at what they do.

Practicing shared skills within roles ⚙️

Independent of whether a person works in management, engineering, product management, design, user research, or some other function, there is a common set of skills of which people need to remain aware: skills that help make our project teams’ collective efforts better.Because there is an intention to integrate ways of working, collective learning makes teamwork effective and results in more meaningful experiences. Working sessions, in which people from different teams or functions come together to solve a problem, provide a common space to focus on that problem, define approaches to help solve the problem, and work through issues together.

A team can identify the skills they practice, reflect on any gaps that may require them to expand their practice, and aggregate their learnings in common artifacts. These then help form and guide a project narrative with which the team resonates or can critique.In understanding the ways in which we work together – in essence, developing empathy for each other – we may see other benefits in addition to the work we produce.One benefit could be to move away from a blind focus on just tools and processes towards a primary focus on how we approach our work together or how we think about problems within the context of a project.

The ways in which we interact with each other suggest that we should look at the following roles, again independent of function or job title:

  1. Informing a problem - What evidence or learnings have we gained to date? What outstanding questions do we need to answer? How would the answers inform the solution to a problem we’re solving now or over time?
  2. Making sense of the data we have - How can we make sense of our learnings as they pertain to specific questions or larger themes that we need to understand and for which we need to design solutions over time?
  3. Evaluating designs - How can we evaluate designs and iteratively improve a product or service and its positioning over time?

Questions for future consideration 💭

  • What roles resonate with you more?
  • What roles do you think are missing?
  • What skills do you need to practice in order to help your team make more meaningful experiences?
  • What skills do you think are missing?
  • What gaps, if any, do you recognize between roles on project teams?
  • What frictions exist on a team and why do you think they occur?
  • How can customer interviews – as one approach to understanding customer stories – encourage constant cycles of informing, sense-making and learning in the spirit of the learning organisation, so to help glue team practices together and create integrated ways of work?

Acknowledgements

Thanks to Josephine Wong for contributing to this piece. For more, see Integrated Approaches to Constant Personal Learning, Improvement, and Maturity.

Learn more
1 min read

Making a difference: ideas from UX New Zealand 2022

Making a difference through UX was a shared passion among an impressive line-up of 7 researchers, strategists, and designers from the global UX community at this year’s 100% virtual 3-day UX New Zealand conference.

1. From bombs to bots: the evolving landscape of frontline research

These days Darya Pilram, Senior Researcher at Twitter, spends her days trying to understand the motivation and techniques of groups who ‘hire’ technology to spread harmful narratives.  The desert of Mogadishu and the urban conflicts of South Africa are just some of the unlikely places she’s leveraged the power of frontline research to create change.

"I realized the only way to influence change was by bringing folks along with me - and so I did.  I bought them right into the field with me."

2. Beautifully accessible: why embracing inclusive design shouldn’t hold back your creativity

Experience Designer Beth McPhail refuses to buy into the mindset that ‘accessibility is a creativity killer’. She challenges her peers to view accessibility as an opportunity to grow creatively while making technology more inclusive.

“Accessibility is making it possible for someone to attend the party…and lose themselves in the music.”

3. Innovating within the Justice sector | Part 2: For a fairer start - design’s role in shaping mana enhancing social & systemic change.

Kelsey Gee is back challenging designers across all levels to think differently about how design can be used across different mediums and constraints to generate meaningful experiences and meaningful change.  In this session, she explores design’s role in creating empowering experiences that break both cycles of crime and institutional racism. (If you missed Part 1 from Mini Con head over here)

"I truly believe that our superpower lies in our ability to redesign society, especially for our whanau and our most vulnerable communities…and once again explore design’s role in creating equal opportunities across safe, seamless, and healing public services."

4. First do no harm: make your designs more trauma-informed and survivor sensitive

In 1985, a researcher botched an interview question which led to a new understanding of trauma and its long-term effects. It grew awareness of the need to be trauma-informed in your work but what’s it actually mean?  UX Researcher Melissa Eggleston explores what it means to be trauma-informed and shares practical advice on how to achieve it.

"Trauma is everywhere and something for us to think about…regardless of whether we’re working with people we know are dealing with traumatic events…it’s really all over the place."

5. Changing the way we design high-risk products to make meaningful impact

One in five people experiences “mental illness or significant mental distress” in New Zealand.  It’s a problem the Government knows needs to be addressed but how? In her powerful presentation, Rachael Reeves reveals what’s involved in balancing the complexities of Government with the need to rethink the way we design health products.

"Be warned you can’t please everyone and it can be tough to keep product vision aligned when you’re talking about serious consequences for people."

6. Remote research with new internet users (yes you can!)

One billion new internet users (NIU) will come online for the first time over the next 5 years. These NIU's are using their first smartphones, with most of their online activities focused on communication, maintaining social connections, and entertainment. Tiane Lee, UX Research Lead at Google outlines the challenges and considerations behind adapting research for varying levels of digital literacy, including practical ideas for planning and conducting remote research with NIU.

"NIU’s are typically less digitally literate, they may show lower confidence in digital capability, and they may perceive lower value of the internet for things like chatting and entertainment.”

7. Conditions Design: weaving the invisible threads of service design, value orchestration, and culture building  

Michael Tam introduces us to the niche field of conditions design and cites a purpose built high diving board on Wellington city’s busy waterfront in New Zealand as a good example of conditions design.  Find out why in this fascinating talk.

"What really impressed me here…hats off to the council because they didn’t design an experience that would discourage people from doing it. It’s designed for people to have fun (vs Hong Kong where public spaces are designed for Tai Chi not fun like this). The design allows it to happen by influencing human behavior to stay safe but encouraging fun and exploration.”

For a taste of what even more speakers from UX New Zealand 2022 had to share, head over to our highlights reel

Learn more
1 min read

Are small links more attractive to people as icons or text?

"Dear Optimal Workshop
How do you make a small link attractive to people (icon vs. text)?"
— Cassie

Dear Cassie,

I'm going to dive straight into this interesting question with a good old game of Pros and Cons, and then offer a resolution of sorts, with a meandering thought or two along the way. Let's kick things off with Team Icon.

The good side of icons: A picture is worth a 1000 words

When shopping online, the number above the little shopping trolley icon tells me how badly behaved I’ve been, and if I click on it, I know I’ll get to gleefully review all the shoes I've selected so far. There’s a whole heap of icons out there like this that people have absorbed and can use without thinking twice. Marli Mesibov wrote a fantastic article on the use of icons for UX Booth on the use of icons that is well worth a look. Marli discusses how they work well on small screens, which is a definite bonus when you’re on the go! Young children who aren’t yet literate can easily figure out how to open and play Angry Birds on their parent’s smartphones thanks to icons. And icons also have a great capacity for bridging language barriers.

The not so good side of icons: We’re too old for guessing games

On the flipside, there are some issues that may huff and puff and blow that cute little home icon down. Starting with there being no consistent standard for them. Sure, there are a handful that are universal like home and print, but beyond that it seems to be a free-for-all. Icons are very much in the hands of the designer and this leaves a lot of room for confusion to grow like bacteria in a badly maintained office refrigerator. Difficult to understand icons can also seriously hinder a user’s ability to learn how to use your website or application. When icons don't communicate what they intend, well, you can guess what happens. In a great piece advocating for text over icons, Joshua Porter writes about an experience he had:

"I have used this UI now for a week and I still have do a double-take each time I want to navigate. I’m not learning what the icons mean. The folder icon represents 'Projects', which I can usually remember (but I think I remember it because it’s simply the first and default option). The second icon, a factory, is actually a link to the 'Manage' screen, where you manage people and projects. This trips me up every time."

If people can't pick up the meaning of your icons quickly and intuitively, they may just stop trying altogether. And now, over to Team Label.

The good side of text: What you see is what you get

Sometimes language really is the fastest vehicle you've got for delivering a message. If you choose the right words to label your links, you'll leave the user with very little doubt as to what lies beneath. It’s that simple. Carefully-considered and well-written labels can cut through the noise and leave minimal ambiguity in their wake. Quoting Joshua Porter again: "Nothing says 'manage' like 'manage'. In other words, in the battle of clarity between icons and labels, labels always win."

The not so good side of text: Your flat shoe is my ballet pump

Text labels can get messy and be just as confusing as unfamiliar icons! Words and phrases sometimes don’t mean the same thing to different people. One person’s flat enclosed shoe may be another person’s ballet pump, and the next person may be left scratching their head because they thought pumps were heels and all they wanted was a ballet flat! Text only labels can also become problematic if there isn’t a clear hierarchy of information, and if you have multiple links on one page or screen.  Bombarding people with a page of short text links may make it difficult for them to find a starting point. And text may also hold back people who speak other languages.

The compromise: Pair icons up with text labels

Because things are always better when we work together! Capitalise on the combined force of text and icons to solve the dilemma. And I don’t mean you should rely on hovers — make both text and icon visible at all times. Two great examples are Google Apps (because nothing says storage like a weird geometric shape...) and the iPhone App store (because the compass and magnifying glass would pose an interesting challenge without text...):

When text and icons wins

So what comes next? (You can probably guess what I'm going to say)

Whatever you decide to run with, test it. Use whatever techniques you have on hand to test all three possibilities — icons only, text only, and icons and text — on real people. No Pros and Cons list, however wonderful, can beat that. And you know, the results will probably surprise you. I ran a quick study recently using Chalkmark to find out where people on the ASOS women's shoes page would click to get to the homepage (and yes, I can alway find ways to make shoe shopping an integral part of my job). 28 people responded, and...

Chalkmark first click text

...a whopping 89% of them clicked the logo, just 7% clicked the home icon, and just one person (the remaining 4%) clicked the label 'Home'. Enough said. Thanks for your question Cassie. To finish, here's some on-topic (and well-earned) comic relief (via @TechnicallyRon)

When icons go wrong

Seeing is believing

Explore our tools and see how Optimal makes gathering insights simple, powerful, and impactful.