Dear Friend,
This week, our theme is user experience along with a roundup of some of the articles and resources that the team has found on this subject. We’ve also got plenty of resources on Smashing Magazine on the topic, and last week I published a Smashing Guide to UX Design to help you to find them.
Friendly, interactive online workshops on front-end and UX: that's Smashing Workshops.
If design and front-end are your thing, we have some upcoming Smashing Workshops that might be of interest:
You can even bundle your ticket with one of our upcoming online events, i.e. SmashingConf Austin online and SmashingConf San Francisco online where there will be even more great UX design content.
We would love to see you there!
— Rachel Andrew (@rachelandrew)
Table of Contents
1. Flags Are Not Languages
While flags are symbols that represent
countries or nations, languages represent a shared method of communication between people. Flags are unique to a country or nation: but languages are often spoken across national borders. By using a flag for a language, you may confuse or even offend users.
After many years of designing for multilingual websites, UX designer James Offer started a blog to share his thoughts on the fundamental flaws in using flags to represent languages and how to create good experiences when dealing with multilingual and multi-regional content. A thought-provoking resource that you can use when targeting users of specific languages. (il)
2. The UX Of Banking
Every bank claims to offer the best overall banking experience, and why wouldn’t they, right? Well, in order to find out what the challenger banks did differently, UX specialist Peter Ramsey decided it was time to put a few of them to the test.
First, he opened 12 real bank accounts in the UK, and logged everything. What followed next were six detailed chapters of his user journey: opening an account, making his first payment, freezing his card, making international payments, open banking, and last but not least, customer support. A fantastic reference guide to help you craft better experiences indeed! (il)
From our sponsor
How To Market An App: 11 Expert Tips
We’ve asked a range of designers, developers and app marketing experts for their views on how to market an app. This advice can help you get your app in the hands of users who need it.
3. How To Make Data Tables Work Everywhere
One of the main difficulties when designing tables is that we need to find a way to display the entire table (or at least its structure completely) — be it on small screens or large screens. With navigation, we could find a way with tabs, accordions or even carousels, but tables are the beast of a different kind. So how can we tame them? In his article, “Design Better Data Tables”, Andrew Coyle highlights a couple of design patterns that we could apply (e.g. by allowing users to show/hide columns, or breaking rows into cards).
Molly Hellmuth's “The Ultimate Guide To Designing Data Tables” provides a comprehensive set of best practices for designing tables, along with a free kit for tables. “How To Architect Complex Web Tables” introduces how to create a maintainable system for complex tables with resizing, filtering, truncation, and various states for each cell. Need to make a table work for mobile?
Also, “Designing a Complex Table for Mobile” shows how to transform a complex enterprise table into a manageable set of cards, filters and views on mobile by exploring it row-per-row or column-per-column. A great set of articles to dive in when dealing with those tricky tables! (vf)
4. A Free Resource Library For Product Designers
Nowadays, it doesn’t take us too long to research a topic we’re interested in learning more about. The answers are literally a click away. But do you remember the last time you had a peek at your browser bookmarks? Saving pages to read or view later is surely useful, but wouldn’t it be handy if we had our source of inspiration all ready and available in one place?
If you’re into product design, Design Notes is a library that will prove to be a true timesaver. It currently links to 334 resources that you can filter according to the topic you’re looking for: from resources related to user experience to design and prototyping tools. Anyone can contribute to the site, so feel free to share if you see anything missing! (il)
From our sponsor
Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy
Earn your master’s degree online.
5. Should The Buttons Be Disabled?
It has become quite common for lengthy web forms to keep the “Continue” button disabled until the customer has provided all data correctly. This behavior acts as an indicator that something is wrong with the form, and it can’t be completed without reviewing the input. This works if the inline validation for every input field is working well, and it doesn’t work at all when it’s glitchy or buggy.
In “Disabled Buttons Suck”, Hampus Sethfors highlights the downsides of disabled buttons. With them in place, we do communicate that something is wrong, but we don’t really explain what is wrong, or how to fix it. So if the customer has overlooked an error message — be it in a lengthy form on desktop, or even in a short form on mobile, they’ll be lost. In many ways, keeping buttons active and communicating errors is more efficient.
And if it’s not possible, at least provide a way out with a button “I can’t complete the form, please help”, so customer support can get back to customers in case they get into trouble. If you need a more detailed refresher on web forms, "Form Design From One to Zero” will keep you busy. (vf)
6. Should The Navigation Icon Live At The Bottom?
When it comes to navigation, we are used to place a hamburger icon in the left upper or the right upper corner: the areas which are least accessible for the thumb. Over the last few years, we’ve seen many websites moving the navigation icon to the bottom on mobile, along with critical calls-to-actions and main navigation options.
In general, it’s interesting to see that sometimes the main navigation is highlighted at the center bottom area, and sometimes this space is left for the main CTA. Frans Hals Museum keeps calendar, tickets, search and location floating around the main navigation, but Danish Public Transportation highlights the “Buy ticket” option instead. What’s the right way?
If we expect people to navigate and explore the site before purchasing, it’s probably a good idea to bring focus to the menu at the bottom center. On the contrary, if we don’t expect it at all, then placing a CTA in the middle is probably a better idea. In both cases, we can make important items visible at all times while everything else is placed behind a Menu button. A great pattern to explore when exposing navigation prominently. (vf)
From our sponsor
Complimentary Guidebook: Testing At Every Stage Of Your Design Process
Download this Guidebook to learn how fast user feedback can help you make better design decisions at every stage of your design process. Get the Guidebook now →
7. From Our Friends
We love supporting wonderful community efforts, and we are happy to share articles and resources from useful resources in the web community. This week, a huge shout out to Neon Moiré, Codrops and UX Design Weekly. Community matters. ❤️
-
Neon Moiré
Neon Moiré helps you find the most interesting design-driven events around the world, virtual or in-person. On their blog, they talk with speakers and organizers about what makes them tick.
-
UI Interactions & Animations
On the Codrops blog, Mary Lou shares a nice roundup of the latest trends in web motion design, UI interaction and animation to help you get inspired.
-
UX Design Weekly
Staying on top of what’s happening in the community can be hard. The UX Design Weekly newsletter has your back with a hand-picked list of the best user experience design articles, resources, portfolios, and more every week.
8. Coming Up Next on Smashing
With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:
Meet Smashing Online Workshops on front-end and UX with Cassie Evans, Christian Nwamba, Harry Roberts, and many others.
We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.
Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
9. New On Smashing Job Board
10. Our Current Most Popular Articles
This newsletter issue was researched, written and edited by Vitaly Friedman (vf) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
