Elevating Web3 Design Experiences
Hey everyone! I’ve been diving into Web3 stuff for two years, and guess what? I’ve got some cool things to share about it. I was also inspired by this guy Jon Crabb. So, let’s chat about these adventures and some easy-peasy tips for making Web3 things look awesome! 🚀
Before diving into the nuances of Web3 design, let’s lay the groundwork with timeless principles applicable to any design endeavor.
Accessibility for All
Designing for accessibility isn’t just about accommodating users with disabilities, it’s about creating a user-friendly environment for everyone. By focusing on the extremes, we naturally enhance the experience for the average user.
Easy wins — follow these rules
Here are some quick wins that significantly elevate design quality:
Font Size:
- Aim for a minimum font size of 16px for body text. Consider going for 18 or 20px for enhanced readability.
Contrast:
- Ensure a contrast ratio of at least 4.5:1 for normal text and 3:1 for larger text. Tools like Colour Contrast can validate your choices.
Legibility:
- Opt for easy-to-read fonts like Roboto, Inter, or Open Sans. Inter, in particular, stands out as an excellent choice.
Colors:
- Choose a color scheme with eye-friendly contrast. Avoid pairing red and green due to potential visibility issues.
Headings:
- Implement appropriate heading levels (h1, h2, h3) for content structure and better navigation.
Labels and Icons:
- Provide clear labels for form fields and interactive elements. Use icons judiciously and combine them with other cues to cater to users with color blindness or low vision.
Clear Instructions:
- Offer concise instructions for tasks, benefiting users with cognitive and learning disabilities while enhancing the overall user experience.
While these guidelines are aimed at aiding users with disabilities, they form a robust foundation for elevating the user experience for all.
You can use a Usability Checklist:
Crafting Compelling Copy for Web3: Insights from Jakob Nielsen
Jakob Nielsen, a luminary in web usability, provides essential guidelines for impactful web writing:
- Highlighted Keywords: Make keywords stand out.
- Meaningful Subheadings: Structure content with clear subheadings.
- Bulleted Lists: Enhance readability with bulleted lists.
- One Idea per Paragraph: Keep paragraphs focused on a single idea.
- Inverted Pyramid Style: Start with the conclusion.
- Conciseness: Aim for half the word count or less compared to conventional writing.
Understanding user behavior on the web is crucial. Nielsen’s research reveals that users rarely read word by word; instead, they scan pages. Scannable text with strategic formatting is key.
Mastering Typography for Web3 Brilliance
If you’re unsure where to start, consider these six fonts:
- Roboto
- Helvetica / Helvetica Neue
- Open Sans
- Lato
- Inter
- IBM Plex
Font Size and Grid Alignment:
- Body copy should be a minimum of 16px, but experimenting with 20px is recommended.
- Try to use multiples of 4 for all your other styles.
Line Height Strategy:
- For headings, maintain a line height of 1–1.2 times the font size.
- For body copy, set the line height to 1.3–1.6 times the font size.
Takeaways for Typography
- Prioritize readability with a highly readable font.
- Establish base sizes and line heights.
- Align line heights with multiples of 4 for consistency.
Web3 design guidelines to keep coming back to
Aesthetic-Usability Effect:
Beautiful designs are perceived as more usable. Prioritize aesthetics, excellent typography, and good contrast for an enhanced user experience.
Doherty Threshold:
Feedback within 400ms enhances productivity. Minimize system response times, incorporating progress bars and animations to make waits tolerable.
Cognitive Load:
Avoid overwhelming users with excessive information. Focus on presenting only essential metrics, and maintaining a clean hierarchy.
Anchoring:
Leverage the first piece of information users encounter, ensuring it aligns with their primary decision-making criteria.
Mental Mapping:
Bridge the gap between users’ mental models and the conceptual models of your product. Simplify and standardize terms, educate users, and conduct ongoing research to refine user understanding.
A couple of examples:
Users don’t know the real value of every transaction they make.
- The mental model: I am exchanging money.
- The conceptual model: I am exchanging tokens in a new web3 economy.
Users don’t know what an Automated Market Maker is.
- The mental model: Is this a bit like a bank?
- The conceptual model: Decentralized trading using algorithms to price assets in liquidity pools
Users want to save money.
- The mental model: Can I deposit coins and earn?
- The conceptual model: Mining, farming, staking, CRV emissions, bribes, vaults, lockers, veTokens, vesting.
Conclusion
In the rapidly evolving landscape of Web3, these principles serve as a compass, guiding designers to create not just functional but delightful and universally accessible experiences. By blending design finesse with an understanding of user behavior, we pave the way for a new era of exceptional web experiences.
Thank you for reading me =)
If you liked my article, follow me on Medium.
And if you want to talk about design or just meet for coffee, then write to me on LinkedIn.
Date format is configured to the user’s location
I can change language
