May 26, 2015
4 min

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

IA vs User Flow: Understanding the Differences and How to Use Them Together

Click, click, click, BOOM! There it is. That thing you were looking for. You couldn’t find it on other websites, but you found it here, and it was easy. You feel like a hero. You thank the website and you leave with a sense of achievement.

What if you could replicate that feeling on your website? What if you could make every user journey so satisfying? By combining information architecture and user flow, you can.

But what are they and how are they different? In this article, we’ll explain how they influence website design and how you can (and should) use them together in your project. We’ll also discuss different user flow research techniques, how they inform great information architecture, and how it doesn’t have to be difficult or time consuming.

What is Information Architecture? 🏗️

Information architecture is the system and structure you use to organize and label content on your website, app or product. It relates closely to user experience design, but it’s slightly different. Think of it as the structure or framework upon which user-facing assets are built.

That being the case, if your information architecture has flaws, your website design will have flaws. It determines how information will be accessible, usable and relevant on your website and should be treated as a critical element of your project. How can we ensure that we have our content organized efficiently to promote seamless interactions?

The answer is research. Without research you’re just guessing. The problem with guessing is that, well, you’re guessing. You tend to organize, categorize and label things the way that you (and maybe your team) would organize things. It’s biassed and subjective. In reality, people process information in all sorts of different ways and good information architecture should reflect that. You’ll often hear us say ‘test early and test often’. This mantra helps to avoid any little niggles during the user experience design process. Card sorting and tree testing are a couple of techniques that you can use to test early.

Card sorting is a research technique that asks users to categorize different pieces of information or content. It’s best used when you have specific, information-related questions. For example, you may want to categorize products in an online store in the most logical way. Or you may have a mountain of blog post categories that need refining. Whatever it is, the benefit of a card sort is that you end up with consensus of how your users expect to see information. Card sorts can even be performed remotely using tools such as OptimalSort.

Tree testing examines how easy it is for your users to find information using a stripped back, text-only representation of your website - almost like a sitemap. Rather than asking users to sort information, they are asked to perform a navigation task, for example, “where would you find today’s best deals?”. Depending on how easy or difficult users find these tasks gives you a great indication of the strengths and weaknesses of your underlying site structure.

As the base structure of your website or app, information architecture has a fundamental influence on how well users access and use your content. It makes sense then that when designing it, you should receive real-world user feedback early on in the piece. Fortunately, there are great online tools like Treejack to quickly and easily test your site structures, categorization and labels.

What is User Flow? 🌊

User flow describes the steps involved for a user to complete a certain task. It lays out what needs to happen for a user to get from starting point to a defined finish line. Why is it important? Because we want that journey to be as efficient as it can possibly be. If it’s not, the user will be left frustrated and dissatisfied, no matter how beautiful the website design is.

At the heart of user flow is, you guessed it, the user. A path that seems obvious to designers might be confusing to an end-user. It’s important to distance yourself from the project and put yourself in the user's shoes. Even better - watch the user. How do they react to a fork in the road? How do they get back on track? Where are they stumbling?

User testing is a great way to observe user flow. But what are you testing? Normally you test based on a user flow diagram. A user flow diagram is generated based on insights from your research from card sorting, tree testing, and questionnaires, for example. It visually outlines the possible paths a user can take to achieve a certain task. The basic structure of a user flow diagram considers the following:

  • A critical path
  • Entry points
  • User end goals
  • Success metrics (time to completion, number of clicks)
  • Steps the user will take in between

Once you have created a user flow diagram you can test it with your users. User testing can be remote or in person and uses a variety of techniques depending on the constraints of your projects. You may consider testing something rough and conceptual like a paper prototype before producing more detailed prototypes.

How to Use Information Architecture and User Flow Together 🤝🏻

By doing the work upfront to create great information architecture you put yourself in a great position to create great user flow. After all, information architecture is designed based on user research. Performing content audits and creating content inventories help to inform early content decisions, followed by user research techniques such as card sorting and tree testing. This research has a direct influence on user flow, since information and content has been given meaning and structure.

The foundational work in designing information architecture leads to user flow diagrams which, as we discussed, are helpful tools in creating seamless user flow. They bridge the gap between information architecture and final user experience by visualizing pathways of specific tasks. By performing user tests on prototypes, the researcher will inevitably find speed bumps, which may highlight flaws in information architecture.

Information architecture and user flow are integrated. This means there should be a constant feedback loop. Early research and categorisation when building information architecture may not translate to seamless user flow in practice. This could be due to integration factors outside of the digital ecosystem you’re designing.

User flow and information architecture are complementary components of creating exceptional website design. Designers should make a conscious decision to apply both in synchrony.

To Sum it Up 🧾

Understanding the relationship between information architecture and user flow is important for any website design. Information architecture provides the organization and structure of content, where user flow applies that structure to how users execute certain tasks in the simplest possible way. The two are intertwined and, when used effectively, provide a framework to ensure seamless, user-friendly website design.

User research and user testing heavily influence the design of both information architecture and user flow. We want users to feel a sense of accomplishment rather than frustration when using a website. Achieving this requires an investment in understanding user needs and goals, and how they consume and categorize information. This is where research techniques such as content audits, tree testing, card sorting and user testing become invaluable.

We’ve always placed high value on solid research, but don’t be put off by it. The research techniques we’ve discussed are highly scalable, and you can be as involved as you want or need to be. Sometimes you don’t even have to be in the same room! The most important thing is to get outside of your team’s bubble and gain real user insight. Check out our information architecture services to ensure you’re on the right path towards powerful, user-centric website design.

Learn more
1 min read

Optimal Workshop's core values: The foundation of our success 🧱🔥

In the fast-paced world of tech startups and scale-ups, having a strong set of core values is crucial for sustainable growth and success. As the CEO of Optimal Workshop, a best-in-class research and insights platform, I've learned firsthand the importance of establishing and nurturing the right company culture. Today, I'd like to share our journey of revisiting and refining our values, and how these principles are shaping our path forward.

The power of values in leadership 🫶

This is my third run as a CEO, following leadership roles at the digital consultancy Tigerspike and the EdTech company Education Perfect. Each time, I've faced the challenge of taking the business to a whole new level. From experience, I've learned that this transformation begins with getting all the right pieces in play for future growth.

At Optimal Workshop, we've been busy laying the groundwork for our next phase of expansion:

1. Forming a new leadership team

2. Launching a fresh brand identity

3. Developing a new strategy and product direction

4. Introducing our refined team values

These elements, particularly our values, are not just words on a wall. They underpin our future way of working and set the standard for the behaviors we expect from every team member. By doing so, we're creating a culture of high performance with solid foundations to build upon and scale globally.

Our core values: The heart of Optimal Workshop 💖

In April 2024, we embarked on a journey to revisit and refine our company values. This process was collaborative and thoughtful, involving input from team members across all levels of the organization. The result is a set of four core values that truly represent who we are and who we aspire to be:

1. Live in our customers' shoes

At Optimal Workshop, we believe that our success is intrinsically tied to the success of our customers. This value emphasizes empathy, understanding, and a customer-centric approach to everything we do. Team members who embody this value:

  • Deeply understand our products and champion user research and data-driven methodologies
  • Go above and beyond to support our customers, ensuring they derive maximum value from our products and services
  • Show a profound understanding of customer pain points and challenges, always seeking ways to enhance the customer experience
  • Prioritize customer satisfaction and strive to provide the highest level of service in all their endeavors

2. Own it

We take pride in our expertise and resilience. This value is about taking initiative, holding ourselves to high standards, and fostering an environment of trust and commitment. An "Own It" mindset means:

  • Demonstrating reliability and accountability, stepping up to challenges and delivering on promises
  • Being solution-focused, supporting others, and finding the best outcomes for all stakeholders
  • Bringing a high level of quality to daily work, advancing projects while maintaining excellent standards
  • Communicating openly and transparently, and professionally challenging the status quo when necessary

3. Game On!

In the dynamic world of tech and user research, adaptability and continuous learning are key. Our "Game On!" value encapsulates our readiness to pivot, our curiosity, and our commitment to constant improvement. Team members who exemplify this value:

  • Demonstrate the ability to change direction quickly and adapt to new circumstances
  • Actively contribute to discussions, ask insightful questions, and share information effectively
  • Continuously learn and challenge the status quo, always seeking innovative ways to improve our processes and offerings

4. In It Together

Last but certainly not least, we believe in the power of collaboration, mutual support, and compassion. This value underscores our commitment to fostering a positive, respectful work environment where everyone can thrive. "In It Together" means:

  • Creating a collaborative work environment and showing respect to all team members and individuals
  • Bringing colleagues and customers together to achieve better results and reach common goals
  • Demonstrating honesty, transparency, and integrity in team settings
  • Speaking openly but respectfully, always listening actively, and being present and ready to participate

Celebrating our values in action 🥳

To bring these values to life, we recently celebrated our inaugural Value Awards. It was inspiring to see team members being recognized for exemplifying these principles in their daily work:

These winners have set a great benchmark for all of us to follow, showing how our values translate into tangible actions and outcomes.

Looking ahead 🔭

One of the most crucial lessons I've learned as a CEO is the immense value of establishing clear core values and guidelines early in a company's journey. When these fundamental pieces are in place, scaling becomes not just easier, but significantly faster – especially when it comes to global growth. 

By setting these core values and guidelines early, we've created a strong foundation that will enable Optimal Workshop to scale more efficiently and effectively on a global level, maintaining our identity, culture, and high standards of performance, no matter how large we become or how far we expand geographically.

Here's to the journey ahead – onwards and upwards, across borders and beyond!

Alex Burke

Learn more
1 min read

Live training: How to win at qualitative analysis with Reframer

In our latest live training session product experts, Pete and Caitlin, take us on a deep dive into the new and improved qualitative analysis tool Reframer.

The session is loaded with tips and demo’s on how to save time and streamline your qualitative research all within one tool.  They also discuss best practices for setting up and conducting user interviews, and how to get the most out of your analysis.

Seeing is believing

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