A weekly roundup of UX nuggets to stay up to date in the design industry. Want updates? Sign up for the UX newsletter here.
[ARTICLE HIGHLIGHTS]
Laws of UX outside the screens
A few years ago when I worked as a tech instructor, I had a high school student ask me what the icon for the save button on Microsoft Word was supposed to be. It was then that I realized a generational gap — Gen-Zs grew up after floppy disks stopped being used/made so some of them have never seen what those things look like 💾 [emoji description: floppy disk emoji].
This reminds me of one UX bootcamp assignment I loved: look for everyday design elements in my home — buttons on a thermostat, a nob on the stove, etc. The activity served as a reminder that UX concepts come from the real world too, not only on the screen. There are ways we interact with physical buttons and toggles that have been recreated on our devices; these conventions can help lower the learning curve.
The article walks through the Laws of UX such as Fitts law, Hick’s law, Von Restorff effect, and more to point out how they can be found in the real-world use and in the design use. It reminds designers that there is a world beyond the screens and that sometimes, we can gather inspiration from things around us.
[DESIGN TIP]
Auto Layout in Figma
Auto layout is a property you can add to Figma frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. It’s great for maintaining alignment and editing a group of components. Follow the article to get some auto layout practice!
[DESIGN PODCAST]
Target size
“Target size is not something new. It’s been in the WCAG guidelines for a while. But beyond that, target size is something that’s been included in other design systems and recommendations for a fair while.”
What is target size? It’s the space that a user can interact with. It can be a link, button, dropdown, etc. that is being clicked on tapped for another action to happen. In this episode of UX Podcast, James Royal-Lawson and Per Axbom talk about target size and its relationship to the WCAG guidelines.
[ARTICLE HIGHLIGHTS]
6 Ways to Reduce Cognitive Demand When Designing UX
Indecisive? Yea, me too. It can be overwhelming even to make simple decisions, like being confronted with a drink menu containing a myriad of flavors, sizes, and customizations. For digital experiences, designers can minimize the cognitive load for users to help make the decision-making process easier. Here’s how:
- Reduce the number of choices users have to make
- Make it easy to get back on track if you make a mistake
- Use visual cues for navigation
- Reduce cognitive load by using familiar patterns and conventions
- Design with your users in mind, not yourself or your company
- Keep it simple — don’t overwhelm users with too many options or features at once
[SOMETHING FUN]
COMIC: The UX Designer Paradox
[UX QUOTE]
“Design is the beauty of turning constraints into advantages.”
- Aza Raskin, co-founder of the Center for Humane Technology, and Earth Species Project.
[WATCH THIS]
Pairing Fonts — 3 effective ways to combine typefaces, from easy to advanced
You can never go wrong with Oliver Schöndorfer’s videos — they’re short, funny, and he makes complex font-deciding processes look easy! The big question you should be asking yourself with typefaces combos is…
Do you really need more than 1 typeface to convey the mood you’re going for? If not, just stick to one. If yes, Oliver walks through how and why you can pair some fonts together to elevate your design.
[BOOK RECO]
The Non-Designer’s Design Book
Remember our CRAP design IG post? It was inspired by Robin William’s acronym CRAP: contrast, repetition, alignment, and proximity. This book is the holy grail for visual design principles and basics. Particularly, it’s been suggested as a very useful read for those who are transitioning from a non-graphic design background.
[DESIGN TOOL]
Access Guide
Access Guide is a digital accessibility resource that turns WCAG 2.1 (Web Content Accessibility Guidelines) information into scannable cards that expand with full details. It’s a good place to start learning because the graphics bring in a fun component to the otherwise complicated details.
[DESIGN CASE STUDY SPOTLIGHT]
Splitwiser
Designer: Chethan KVS (a Product designer at Unacademy)
Case Study: Redesign of an app, Splitwise
This is a concept mobile app that helps users track and split expenses among a group of people. The designer cleverly gives the app a new name, Splitwiser (formerly Splitwise), as an indication that the app has evolved.
Why this case study is awesome:
- User flows: this case study walks through various scenarios that demonstrate the needs of the users. The examples are framed in real-world problems and offer solutions that are later categorized into three buckets for design clarity.
- Design decisions: the designer talks through the key design decisions that lead him to redesign the logo, improve the onboarding, and enhance UX through user interactions. Side-by-side comparisons are used to contrast old versus new designs.
Not only does the designer have a way with words, but his visuals enhance his words. Everything is well-explained with intuitive images for a seamless reading experience. For good reasons this case study earned lots of claps on Medium so it’s worth a read if you’re looking to practice your storytelling.
[UXB TOP RECOMMENDATIONS: COURSES & RESOURCES]
Basic Elements of Design: Design Principles and Software
Inspired by the simplicity of C.R.A.P. design? Then you’ll be into this Coursera design course, which covers — you guessed it — CRAP design principles and more:
- Leverage balance, proximity, alignment, repetition, contrast, and space in your designs
- Understand the history and design process of the graphic design profession.
- Discover the power of white space to develop shape, form, and structure in graphic projects.
Happy learning!
