Even in the simplest app or website, there are many screens and functions that a designer must design and think about in order to create a good user experience.


Typically, designers start with the most important features: Home screen and main pages. However, even professionals sometimes overlook details in small things due to their focus on other things, lack of time, lack of resources, or leaving it till the last moment, which often does not come.


To avoid these problems, it’s worth forming a checklist with frequent cases that designers forget about.


First Experience

The strongest user experience comes from the first contact with the product. Therefore, it is important to create the best possible user experience in the initial stages.


Login & Registration

Make sure people can easily sign up and start using the product. Design the path for users from visiting the landing page to completing registration in a way so that they do not face any difficulties.


It’s worth simplifying the registration of new users by allowing them to create an account through popular social networks or a phone number. It will be much easier for people to register in one click than filling out the form fields.


Also, don't forget about the responsiveness of forms for different devices. Users won't sign up if the interface looks bad on their screen.


Designers are often not interested in the legal intricacies of user-product interactions. Therefore, the Terms of Service & Privacy pages are long, incomprehensible, and inhuman. Think about how you can simplify them to earn user trust.


Also, don’t forget to inform your future customers about the successful registration. Send them a welcome email confirming that their address and other details have been added. You can thank them with a bonus or a discount. Users will know that they have entered their correct address and will receive a pleasant thank you for choosing your product.


Onboarding

After registering, people find it difficult to figure out how the product works and how to solve their problems with it. Help them figure it out with a good onboarding experience. Unobtrusively explain the main features to them and make it clear that your design fits their needs perfectly.


Before newly registered users add their details, create hints for empty states. For example, if there are no items in the shopping cart, or there are no uploaded files, push it to do so by adding a large button urging it to do so.


People love to personalize their accounts by uploading their avatars. Before users upload their photos, give them default unique pictures that they will remember or change later if they wish. It will work great if people communicate within your product. That way they can tell each other apart even if they just signed up.


And don't forget about the tools for editing uploaded avatars. You will save them time if, after uploading a photo, they can crop excess, sharpen, apply a filter or a sticker.

Unusual Cases

It's a shame when a design breaks down because of the data that they forgot to think through. Keep track of width for overly long names or text in messages. Fortunately, modern tools now allow you to create symbols with dynamic content. Do not use the “Lorem Ipsum” template for texts, try to find suitable data that will closely resemble real ones.


Pages can have a lot of user-generated data. Think about how to organize them: use scrolling, make pagination or load automatically using the "Show more" button.


Users will not always behave the way you intended. Try to anticipate their behavior and hang up screens of possible errors they might encounter. For example, the internet connection is suddenly lost or the space on the server runs out. In addition to empty states, you need the splash screen downloads page.


If the user didn't find anything, instead of a blank results page, show relevant information there or ask them to change their query. And of course, make the most of your 404 page, so that users don't get upset when they get there, and post useful links on it.

Little Big Things

The main impression of a product consists of small details, which at first glance are insignificant, but affect the attractiveness and quality of the interaction. When given the proper attention, product design will definitely go up a notch.


Pictures

The favicon is a trifle that everyone forgets about. Gone are the days when a 16x16 pixel picture was enough. To make your icon look crisp on different devices, prepare an entire batch of images: for the icon in the browser bar, bookmarks, and desktop icons on mobile devices.


Remember, it's best if your interface and images are vector-based. Don't use bitmap photos if you can get by with SVG. If you can't do without PNG or JPG, compress them as much as possible using optimizers.


Your product must have a logo. Make sure it looks good in different sizes and colorful backgrounds. Maybe it needs a dark version or a compact version for responsive design.


Don't forget that your product will be shared on social networks or messengers. It is important to prepare the necessary preview images that will be shown in the feed next to the link. Use the most revealing picture on the page, such as a product photo or the front page cover.


States

Your product is interactive, people will interact with it. Work out the states of the pages and interfaces. For buttons, it will be enough to prepare a mouse-over view, a state on click, loading data, and an inactive view. The same should be used for those elements with which the user will interact. For example, upload pictures, change folder names or send files. Capturing all these different states is a tedious but important job.


Usually, designers forget about smooth transitions between states or do not have the time to deal with them. Simple transition animation tools are already built into Sketch. Use them for seamless state transitions and a pleasant user experience.

Stay accurate

Designers have a ton of things to keep in mind when designing products. Keep these details in mind and always have a checklist handy when designing your next project.