Header
PROJECT 01 · UX RESEARCH / INTERACTION DESIGN

Comparing Icon-only & Text-and-Icon Navigation

An experimental UX study investigating how navigation design affects task completion speed in a public transportation application.

Role

UX Designer
UX Researcher

Tools & Methods

Figma · Prototyping · Usability Testing · User Interviews · Competitive Analysis · Task Completion Analysis

Timeline

2024
4 months

01

CHALLENGE

Icons are widely used in mobile interfaces to create simple and efficient navigation. However, icons can also be ambiguous, particularly when users are unfamiliar with their meaning. This project explored whether combining icons with text labels could make navigation faster and easier to understand in a public transportation application.

02

RESEARCH

To investigate the impact of navigation style, I designed two mobile prototypes in Figma. Both prototypes had identical layouts and content, but used different navigation approaches: one relied on icons only, while the other combined icons with text labels. The prototypes were tested by six participants across three everyday public transportation tasks.

Objective: This report aims to evaluate the effect of icon-only versus text-and- icon navigation on task completion speed while users are either walking or seated

03

USER TESTING

Each participant completed three navigation tasks using both prototypes. The tasks were performed while seated and while walking to explore how navigation performed in different interaction conditions.

1. Find the next bus departure

2. Buy a ticket

3. Check departure times

The process started with making LoFi-protopyes with paper and pen, then Hi-Fi prototypes in Figma.

04

EXPERIMENT

Participants: 6 participants took part in the study, with participants ranging from 25–68 years old and with different levels of experience with icons and digital interfaces.

Two Prototypes: Two mobile prototypes were created in Figma. The prototypes had identical layouts and content, with the navigation style as the main difference: one used icon-only navigation and the other combined icons with text labels.
Prototype 1: Icon-and-Text navigation

Icon and text navigation prototype
Icon and text navigation prototype
Icon and text navigation prototype

Prototype 2: Icon-Only Navigation.

Icon-only navigation prototype
Icon-only navigation prototype
Icon-only navigation prototype

Testing condition:

Each prototype was tested in two conditions: while seated and while walking. Participants completed the same three tasks in both conditions, allowing task completion time to be compared across navigation styles and environments.

05

Final Result

The results indicate that text-and-icon navigation supports faster and more confident interaction, both in seated and walking conditions.

A central finding is that icons alone are rarely sufficient for clear navigation. Almost all icons carry some degree of ambiguity, and without a text label to clarify their meaning in context, users risk misinterpreting or overlooking them entirely. According to this study text labels should therefore be visible at all times. Any additional interaction from the user is not required, as this forcing users to reveal labels which adds unnesseccary steps and cognitive effort.

The value of combining icons with text extends beyond clarity alone. For international users who may not be fluent in the application's primary language, familiar icons paired with short text labels can significantly lower the barrier to use. Or elderly people in the society that's not familiar with so many icons needs to have some sort of text-label navigation to navigate successfully. In the context of a public transportation application which serves a diverse and often time-pressured user base this inclusivity is particularly important.

For navigation specifically, the stakes are high. Users need to move through an application quickly and with confidence, often while simultaneously managing other tasks such as walking or monitoring their surroundings. In these situations, any ambiguity in the navigation interface can result in errors, delays, or frustration. Clear and consistent text-and-icon navigation directly reduces this risk.

In conclusion, the findings of this study support the principle that effective icon design is not about decoration, but about communication. Icons should always serve the user's understanding, and where there is any risk of unclearness, a text label must be present.

Final project result
DOWNLOAD FULL REPORT
LETHS-GO