September 29, 2020 Smashing Newsletter: Issue #268

Editorial

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.

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)

1. Flags Are Not Languages
2. The UX Of Banking
3. How To Make Data Tables Work Everywhere
4. A Free Resource Library For Product Designers
5. Should The Buttons Be Disabled?
6. Should The Navigation Icon Live At The Bottom?
7. From Our Friends
8. Coming Up Next on Smashing

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)

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)

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)

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:

• “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 vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.