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: - [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) --------------------------------------------------------------- Table of Contents 1. [Flags Are Not Languages](#a1) 2. [The UX Of Banking](#a2) 3. [How To Make Data Tables Work Everywhere](#a3) 4. [A Free Resource Library For Product Designers](#a4) 5. [Should The Buttons Be Disabled?](#a5) 6. [Should The Navigation Icon Live At The Bottom?](#a6) 7. [From Our Friends](#a7) 8. [Coming Up Next on Smashing](#a8) 9. [New On Smashing Job Board](#a9) 10. [Our Current Most Popular Articles](#a10) --------------------------------------------------------------- #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 [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). [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 [Northwestern: Online Master’s 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. [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 [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: - “[All About Icons]( with Marc Edwards— October 20 at 11:00 London time [SmashingConf Workshops]( 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. - [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) --------------------------------------------------------------- #9. New On Smashing Job Board - [Senior Frontend Developer]( at continued (Remote work) - [Digital Specialist]( at SNS (Amsterdam, NL) - [Frontend Developer]( at tradingtwins GmbH (Cologne, DE) --------------------------------------------------------------- #10. Our Current Most Popular Articles - [Different Ways To Design Digital Product Pages]( - [How To Create Customer-Centric Landing Pages]( - [Unexpected Learnings From Coding Artwork Every Day For Five Years]( --------------------------------------------------------------- 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]( --------------------------------------------------------------- Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](