Creating a user-friendly interface often boils down to one critical question: can users figure it out on their own? This is where the principle of Self-Descriptiveness comes into play.
Interfaces should allow users to navigate and interact effortlessly, without extra guidance. Users should immediately grasp how to use them, naturally and confidently. To achieve this, visuals like icons and buttons must clearly communicate their function, while UX Copy – labels, hints, or error messages – provide just the right information at the right time.
This usability principle isn’t about simplifying for the sake of it; it’s about making interactions intuitive, so users don’t feel stuck.
Achieving Self-descriptiveness involves the successful implementation of both aspects: Visual Clarity and Textual Clarity.
2.1 Visual Clarity
2.1.1 Visual Literacy
Visual cues play a crucial role in helping users understand how to interact with an interface. Elements like clickable buttons, text entry fields, toggle switches, dropdown menus, sliders, and checkboxes should be self-explanatory and clearly indicated.
Visual elements, icons, and symbols should be clear and self-descriptive. They should align with their purpose in the real world or resemble interfaces familiar to a user.
By percepting visuals in a clear and consistent way, users can confidently navigate and interact with the system without stumbling blocks.
Tips for Enhancing Visual Literacy
- Use universally recognized icons, like Magnifying Glass for search, Trash Bin for delete.
- Avoid ambiguous visuals, icons should clearly indicate their function.
- Keep visuals culturally appropriate, avoid symbols that might have different meanings.
- Add labels when needed, pair icons with text if their meaning might be obvious.
- Highlight interactions with subtle animations that enhance clarity, as needed.
Project: Booking.com, booking platform
Platform: Desktop
❌ The “Reserve your apartment stay” button looks like an ad title rather than a functional, self-descriptive button, making it unclear and less intuitive for users to take action.
Project: Bilkom.pl, travel app
Platform: Mobile
❌ The button presented during the signup process visually resembles text, failing to convey its purpose. It’s not self-descriptive and can lead users to misactions.
Project: EventyApp, event ticketing app
Platform: Mobile
❌ The system status indicating that all tickets are sold out is visually designed to resemble a button, which can mislead users into thinking it’s an interactive element.
Project: KFC Polska, food delivery app
Platform: Mobile
❌ The app features an element that looks like a self-explanatory search bar, but clicking it unexpectedly opens a screen for entering an address. The same screen also appears when selecting “Choose address,” leading to potential confusion.
Project: Adidas, eCommerce app
Platform: Mobile
❌ In this example, some icons in the tab bar are unclear and lack labels, making their purpose difficult to interpret and potentially confusing for users.
Project: Airbnb, travel app
Platform: Mobile
✅ The app includes a translation icon that could be misinterpreted, but it provides a clear explanation of its meaning, helping users understand its purpose.
2.1.2 Visual Hierarchy
A clear Visual Hierarchy organizes interface elements in a way that directs users’ attention to the most critical information first. This can be achieved through techniques like varying size, color, contrast, and placement of elements. By prioritizing content visually, users can quickly understand what actions to take or where to focus, creating a more intuitive UX.
Tips for Creating a Strong Visual Hierarchy
- Emphasize key elements, use larger fonts, bold text, or vibrant colors to highlight important items.
- Prioritize font size, make headings or primary actions larger than secondary ones.
- Use contrast effectively, make critical information stand out against the background.
- Organize content logically, place the most important elements at the top or center of the screen.
- Group related elements, use proximity to show connections between items.
- Limit visual clutter, avoid overwhelming users with too many competing elements.
- Apply consistent and equal spacing between elements.
- Incorporate directional cues, use arrows, lines, or visual guides to direct users’ attention.
Project: Medium, blogging platform
Platform: Desktop
✅ The section with membership plans demonstrates a clear visual hierarchy, with headers emphasized through positioning and font size, cost information highlighted in yellow, and proper spacing for easy scanning by users. Medium is a brilliant example of a self-descriptive interface.
Project: Stripe, corporate website
Platform: Desktop
✅ The platform applies a clear visual hierarchy using appropriate font sizes, thoughtful color choices, and well-structured spacing, making information easy to read and prioritize.
2.1.3 Contextual Help
Recognition rather than recall.
The interface should not require users to remember information from one part of the interface to use it in another. Instead of forcing users to memorize complex instructions, it’s better to provide contextual help, such as tooltips, concise and clear explanations, or supporting illustrations.
💡 Pro tip: Use metaphors and analogies for clarity, explain complex concepts with obvious and relatable visuals or text, avoiding ambiguity.
Project: Vancity, corporate website
Platform: Desktop
✅ The credit union website uses simple and clear textual metaphors to convey business value, making complex concepts relatable, easy to understand, and culturally appropriate.
2.2. Textual Clarity (UX Copy)
While visuals play a vital role in guiding users through an interface, the way information is written is equally important. This brings us to the second part of Self-descriptiveness principle – Textual Clarity.
Textual Clarity focuses on crafting UX copies that communicate effectively with users. UX copy refers to all the text in an interface – headings, hints, features, error messages, buttons, and instructions. Its purpose is to provide users with the exact information they need in the current context, clearly, concisely, and informatively.
Great UX copies are:
- Simple and Understandable, avoiding jargon or overly complex language.
- Concise, delivering information without unnecessary detail.
- Relevant to the Context, tailored to the user’s needs and situation.
- Human and Positive, using a friendly tone that resonates with the user.
Let’s explore each of these Self-descriptiveness elements in more detail.
2.2.1. Simple and Understandable
When it comes to UX copy, simplicity and clarity are non-negotiable. Texts should be easy to read and understand, avoiding jargon, overly technical terms, or convoluted sentences that may confuse users. The goal is to communicate effectively with as few barriers as possible, ensuring the information is accessible to all users, regardless of their background or expertise (unless it’s on purpose according to the context).
Tips for Writing Simple and Understandable UX Copies
- Use everyday language (“Log in to your account.” instead of “Authenticate your credentials”)
- Avoid industry-specific jargon, opt for terms that a general audience can understand.
- Test for readability. Tools like Flesch-Kincaid help test the copy with real users for feedback.
- Provide examples or additional context to your messages, clarify instructions.
Project: The City of Montreal, governmental website
Platform: Desktop
✅ The website uses simple and understandable titles that align with the users’ context, making it easy to navigate and access municipal services and information.
Project: Natural AI, productivity app
Platform: Mobile
❌ The app uses the phrase “OTP code,” which may confuse users unfamiliar with the term. A clearer alternative, like “6-digit code” or “one-time password,” would make it easier for users to recognize and act upon in their mailbox. (Source: Smashing Magazine)
Project: Wysa, mental health app
Platform: Mobile
❌ The use of an “SOS” label for the button fails to clearly communicate its purpose, leaving users uncertain about what action it triggers.
Project: LeoCard, public transport ticketing app
Platform: Mobile
❌ The label “Buy to your ID card” is absolutely confusing because the app does not have any entity like an ID card. Users typically associate ID cards with documents like passports or national identification, but this app does not support functionality for linking travel cards to such IDs.
By keeping your content simple and understandable, you reduce cognitive load, making it easier for users to focus on completing their tasks.
2.2.2. Concise
Nobody likes wading through a wall of text, especially when they’re trying to complete a task. Concise copy respects the user’s time by getting straight to the point, cutting out fluff, and keeping things simple. It’s not about saying less but about saying what matters most.
Tips for Writing Concise UX Copies
- Focus on the essentials, only include information that helps users directly.
- Avoid redundancy; say it once, clearly.
- Use short sentences, break long ideas into smaller, simpler parts.
- Eliminate filler words, stick to the core message.
- Get straight to the point, start with the key action.
Project: ChatGPT, landing page
Platform: Desktop
✅ The website features concise titles that guide users directly to the core value proposition, making the purpose and benefits of the service immediately clear.
Project: Notion, landing page
Platform: Desktop
✅ The website uses simple and concise copy, making the content readable and understandable for users.
By keeping copy concise, users can quickly grasp what they need to do, making interactions more efficient.
2.2.3. Relevant to the Context
Writing relevant text means tailoring your UX copies to fit the specific situation, task, and user role. Users don’t want generic instructions – they need information that speaks directly to what they’re trying to accomplish. Contextual relevance makes the content more self-descriptive and helpful.
Tips for Writing Context-Relevant Text
- Adapt text to the user’s role.
- Match the text to the current task.
- Avoid overloading users with unnecessary details.
- Provide specific guidance based on the user’s progress.
- Use dynamic, personalized content when possible.
Project: Notion, SaaS website
Platform: Desktop
✅ The UX copy in template suggestions is tailored to the user’s role and purpose, offering options for both personal use and team collaboration.
Project: Chase UK, financial app
Platform: Mobile
✅ The app provides clear and intuitive tab copy, effectively addressing two different user scenarios.
By aligning text with the user’s needs and situation, you make the experience more intuitive, guiding users smoothly toward their goals.
2.2.4. Human and with a Positive Emotional Charge
UX copy isn’t just about delivering information – it’s about building a connection with the user. Writing in a human, approachable tone creates a sense of trust and relatability, while adding a positive emotional charge makes the user experience more enjoyable. However, the tone must always fit the context – warm and empathetic for support messages, or confident and encouraging for success notifications.
Tips for Writing Human and Emotionally Positive Text
- Use conversational language.
- Add empathy and supportive tone to error messages.
- Celebrate user progress and successes.
- Avoid robotic phrasing.
- Match the tone to the situation.
Project: Meridian.ca, corporate website
Platform: Desktop
✅ The credit union website features user-friendly copy that highlights the value of its members and evokes a sense of connection and trust.
Project: CIC News, news website
Platform: Desktop
✅ The Canadian immigration news website uses positive and context-appropriate emotional copy, creating a welcoming and reassuring experience for its readers.
Project: Babbel, language learning app
Platform: Mobile
✅ During the account creation process, the app uses a conversational tone by asking, “What’s your name?” instead of the more formal “Enter your name,” making the experience feel more personal and engaging.
Project: Tinder, dating app
Platform: Mobile
✅ The app adds a human touch to its error messages with phrasing like, “Sorry you have to see us like this,” making the interaction feel more empathetic.
By speaking directly to the user in a relatable and encouraging way, you create a positive experience that leaves a lasting impression.
