8 Overlooked Details by Beginner UI/UX Designers
By: Daniel Danielyan
Tags: UX, UI, Success, Design, Tutorial

Photo by Josh Calabrese on Unsplash

When designing for a big project, there are some pages or elements that designers often forget about during the designing process. Many mentioned points are being made by beginners and/or in projects where there was no time to create wireframes to foresee all the flows and problems.

1. Forget password flow

Image by https://www.howtogeek.com/357257/how-to-recover-your-forgotten-instagram-password/

It often happens with the beginners when they design the login and registration flows, forget password flow gets lost. Similar to login flow, it takes a short amount of time to design it still, it’s an important flow one should not forget.

Users can recover the password by email and/or phone number. Recovery can be a link that leads the user to create a new password, or it can be a one-time password.

Which would work better — depends on the app/website.

If it’s an email and the user is on a mobile device, it would take more steps to go through to recover the password. And if it’s a mobile number, the problem is that if the user changes his/her number, the future owner of that number can access their account.

More about that you can read in the 4th point of my 8 UX Design Tips for handling controversial positions of UI elements article.

2. 404 error

One of the most challenging pages to design is the 404 page, as it’s often based on personal taste. Designers have relatively creative freedom here, and there are lots of awesome 404 pages. One better than the other. And it’s hard to compete with them. There is always a simple solution of putting big 404 in the middle of the screen and writing how sorry we are, but if we want a mindblowing effect, it’s better at least to try to blow their minds. I know it’s not the best, but my personal favorite is Figma’s 404 page, where you can move the nods of the vector-based shape of 404.

3. Skeletons and Spinners

Skeleton loader is a low-fi wireframish-looking representation of the final design, that appears when you open a page and before the content is downloaded. Open your Facebook and scroll down and you’ll see the gray shapes of the images and texts for a short amount of time before the page will appear. That’s the skeleton. The other popular type of loader is a spinner. A spinner is a spinning circle that shows the user that some progress is going on.

When to use Spinners and Skeletons (and other loaders) is a subject for another day.

In short — We use skeletons when the page has many elements such as pictures, input boxes, texts, basically when information is requested from the back-end. And spinners are better for the progress of some exact process, like purchasing a ticket, the opening of an application, uploading a photo, etc.

There is also mixed variant; the page downloads with skeleton but within that webpage, there are micro-spinners on waiting processes.

So spinners and skeletons are elements (if you could say so) that many beginners often forget about, until the moment when the development process overtakes them.

4. Empty Search page

Image from Amazon.com

When designing e-commerce or similar website we design how the search works, and how the results show up. And the cool designs of filters of that search process, and how the products appear on our cool layout grid. But often, beginners forget to design the page of the case when the search brought no results. It’s another problem that appears during the development process.

Same goes for order-history page when users don’t have any orders yet.

5. Payment Failed Pages

In the flow of the payment process of e-commerce or some other app/website, there is this cool page at the end of the flow where a message appears telling users that their purchase was successful. There are often cases when beginner designers forget to design the failed message page, for example, when users didn’t have any money on the card, or some other problem appeared. There are even times when designers forget about the success page as well, and flow takes users straight to the homepage.

So it’s another proof that it’s always better to have, IA, Site Map and User flow before starting the design.

6. Handoff some assets

It’s an often case when the designer forgets to handoff some images or icons or other assets to developers. Again the problem appears during the development process and designers will have to go back, make and export them to hand off to engineers.

7. Providing the Style Guide

Style Guide of one of my projects

Some beginners often forget (or don’t consider it necessary) to create a Style Guide for the website/app. Some designers create the Style Guide before starting the design, others after finishing, and some during the process. I would suggest to make it whenever it suits you, but it’s an important document that developers must get before their involvement. If they have a Style Guide, they may even correct your accidental errors sometimes.

8. Favicon

Image from https://fitsmallbusiness.com/favicon-website-icon/

Favicons are the small icons on the tabs of browsers. Usually, it’s a logo of a website/app, sometimes, another identifying symbol/image.

Often designers forget to design the favicon, and developers/project managers remind them to design and deliver it only when the project is at its launch. It would be better to include them with all other assets and hand them over to developers before the start of coding.