Smashing Magazine - Smashing Newsletter #268: UX Edition

With disabled buttons, bottom navigation, flags and online banking. Issue #268 Tue, Sept. 29, 2020 View in the browser 💨

Smashing Newsletter

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.

Smashing Online Workshops
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
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
9. New On Smashing Job Board
10. Our Current Most Popular Articles

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.

Flags Are Not Languages

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.

The UX Of Banking

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

Get your app in the hands of users who need it
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).

How To Make Data Tables Work Everywhere

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?

Design Notes

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

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern 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.

Disabled Buttons

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.

Bottom Navigation

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!
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:

  • All About Icons” with Marc Edwards October 20 at 11:00 London time

Practicing skills matters. Meow!
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


unsubscribe update preferences view in your browser


Older messages

Smashing Newsletter #267: Accessibility, Inspiration and Debugging Strategies

Tuesday, September 22, 2020

With tips on accessibility, design inspiration, and strategies to help you debug. Issue #267 • Tue, Sept. 22, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, I never get tired of being

Smashing Newsletter #266: JavaScript Edition

Tuesday, September 15, 2020

With free JavaScript libraries, debugging and scrolling elements into view Issue #266 • Tue, Sept. 15, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, Last week was Smashing

Meet New Front-End & UX Workshops (Sep–Nov 2020)

Thursday, September 10, 2020

With Harry Roberts, Cassie Evans, Andrew Rachel, Natalia Tepluhina and Vitaly Friedman. On SVG, web performance, CSS and Vue.js. New online workshops on web performance, SVG animation, Vue.js, CSS. •

Smashing Newsletter #265: Interfaces, Design Systems and Cityscapes

Tuesday, September 8, 2020

On SmashingConf Freiburg, interface design, design systems, job offers comparison and fancy blobs. Issue #265 • Tue, Sept. 8, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, As I'm

Smashing Newsletter #264: Front-End Accessibility Edition

Friday, September 4, 2020

With tips on accessibility, screen readers, inclusive design and accessibility tooling. Issue #264 • Tue, Sept. 1, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, Our second themed

You Might Also Like

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget