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.
If design and front-end are your thing, we have some upcoming Smashing Workshops that might be of interest:
- Designing for Emotion Masterclass with Aarron Walter,
- Designing Websites That Convert with Paul Boag,
- Front-End Accessibility Masterclass with Marcy Sutton.
We would love to see you there!
— Rachel Andrew (@rachelandrew)
- Flags Are Not Languages
- The UX Of Banking
- How To Make Data Tables Work Everywhere
- A Free Resource Library For Product Designers
- Should The Buttons Be Disabled?
- Should The Navigation Icon Live At The Bottom?
- From Our Friends
- Coming Up Next on Smashing
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)
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)
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)
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)
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)
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)
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.
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:
- “All About Icons” with Marc Edwards— October 20 at 11:00 London time
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.
- The SVG Animation Masterclass (Oct 8–22)
- Web Performance Masterclass (Oct 12–26)
- Designing for Emotion Masterclass (Oct 28–29)
- Front-End Accessibility Masterclass (Nov 6–20)
- Build, Ship and Extend GraphQL APIs (Nov 12–27)
- Designing Websites That Convert (Nov 18–26)
- Building A Design System With CSS (Dec 3–17)
Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
- Front-End Cheatsheets
- Front-End Accessibility
- Open-Source Icons, Fonts and Goodies
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
- Web Performance Optimization
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.