Around this time of year, plenty of articles start to circulate about “Design Trends” for 20XX. Although these articles are nice to browse through, they serve more as inspiration (like Dribbble) rather than a checklist or guide.
I wanted to take a different approach to this. I came up with 4 design “improvements” that (as a user) I would like to see more of in 2021. (I use the word “improvement” because I can only hope they are not temporary fads.)
Proposed Improvement #1: More cursor types
There are so many cursor types out there, it’s a shame we do not use more of them. Yes, they are not always visually appealing, but sometimes they are the only affordance users get — especially if you take color out of the equation.
Medium has a great example of using the not-allowed cursor (along with a tooltip) to signify that I cannot clap for my own story. Sure, the icon is a little greyed out, but as a user I would never be able to identify this icon as disabled with 100% certainty until I see the cursor change.
Medium’s nice, accessible, design.
It should also be known that WCAG guidelines state that color alone should not determine what is e.g. clickable and what is not, so as accessibility becomes more and more necessary designers will be forced to use more signifiers — like cursors.
I even think more cursor types would be welcome. Here is my idea for a left-click cursor, which would tell users when a left click is possible.🙃
I know Chrome leverages cursor:default for the Bookmarks, but I think the pointer would be better.
Proposed Improvement #2: Less mouse / finger movement
Nothing is more annoying for a user than extra clicks/taps or extra mouse/finger movement. Let me explain with a whole bunch of examples:
Auto-focus on page load
Isn’t it great when you open a page and then can immediately start typing into the first field? Setting the autofocus attribute in HTML5 isn’t always the most trivial of tasks, but from a user’s perspective they are starting to expect this. At the very least, auto-focus should be set for pages/dialogs that are part of main user flows.
Open a dialog and start typing right away.
Alerts that appear at the site of the action
Placing confirmation alerts right in the middle of the page means the user will most likely need to move his/her mouse a significant distance just to confirm an action. Now this might be intentional for destructive actions, but for common actions it’d be nice if the alert was as close to the element that triggered the alert as possible. I have started to see more examples like the one below, but I would love to see more of it.
Clickable CTA buttons
Recently I have been ordering more food online and thus have been increasingly annoyed with mobile experiences in browser. Order Now buttons commonly have to be tapped on twice and some of them aren’t even floating at the bottom of the screen. Again, this may be tricky from a technical perspective, but companies should be aware that (now more than ever) some users will not have your app downloaded.
During Toast’s shopping experience, users must click on Add to Cart twice as the first click triggers the browser’s bottom bar to show.
Another example of this is the keyboard hiding the Log in button. Slack does a good example of this making sure the Continue button is very clickable at all times.
Would be even better if the “Sign in to your workspace” copy was in view.
Some designers/developers may say “well the go button is there so that’s all you need”, but I consider this a pretty lazy excuse. Furthermore, the blue keyboard button’s text may not always makes sense for the situation.
Proposed Improvement #3: Consistent wording
I have been annoyed with inconsistent wording for some time now, which is apparent from my article back in 2019 about “Remove” vs “Delete”. Here is a short list of examples that I know are noticeable for non-designers:
- Having an “Add folder” button and then follow it up with an “Create folder” dialog header
- Having a “Replace item” button and then follow it up with “Are you sure you want to override item…” in the alert description.
- Mentioning one area of the tool as a “Section” and then later calling it a “Category”.
Standardizing UI copy is definitely a large undertaking if you do it all at once, but if you just apply it to future designs it will actually end up saving you time — as you will not have to make up words along the way. Sure, this may temporarily make some parts of your app more inconsistent than before, but it’s better than never fixing it.
Proposed Improvement #4: Correct keyboard for input fields (mobile)
Forms are annoying as it is, so seeing all letters for a Zip Code field can be the final straw for some people. This article, and this one, are good resources to use if you have a web app, but it is the same concept for native mobile apps — just make sure the optimal keyboard attribute is tied to each field.
Text vs Telephone keyboards.
I made it a point to not take any ideas that spawned from design work. The desired improvements were thrown on me during my daily usage of technology, or by non-designer friends. Hopefully this list can act as a more useful, practical and sustainable blueprint for making your users happier in 2021.