How to declutter a screen?

For the purpose of this tutorial, I’ve quickly designed a screen of a potential web app for high-school or college students. This app would allow them to track their scheduled classes, see the latest materials they’ve downloaded from professors, track school-related tasks through a to-do list, communicate with other students or professors, and track their progress and learning habits.

So there’s a lot of things to do inside one single app. And if you’re dealing with a particular type of client, they usually say everything is equally important and needs to be immediately available from the same screen. They might hand you a chaotic screen like the one below as their idea of how things should look and work.

First of all, there’s a lot happening here. Everything seems to be fighting for our attention and the screen just feels hard to look at. So, let’s help our client out, that’s why we’re here after all.

Let’s start things off by removing all of the colors. Most of them don’t seem important, and it’s better if we slowly add them as we assign real meanings to them.

The second thing that would help make this screen feel less cluttered is getting rid of as many borders as we can. They add visual noise and if there are other ways of separating the content, we should focus on those instead.

Lucky for us, there are plenty of ways to add visual hierarchy without the borders. We can use color or white space, for example. Or both. I’ve decided to go with a subtle grey background. It will help us make the items seem like they’re above it by using a lighter shade of grey for them (white in our case).

Great! This already feels easier to look at. We can even try to separate the items by adding a bit of a distance between them.

We can further declutter the screen by adding additional things to it. Yeah, you’ve read that right. It might not be the most intuitive thing to add items with a goal of decluttering the screen but if those additional items help lower the cognitive load for the user, we should add them.

For example, our navigation bar uses only icons to represent different parts of the app. Icons are great for actions users immediately recognize. But in most cases, you will be better off having labels next to them. After a while, users learn what each one means in the context of the app they’re using, but you need to design for first-time users too.

The right side of the screen became a little bit chaotic and unaligned because we’ve stretched the navigation a bit. So let’s get rid of it for a second as we focus on the navigation and the header.

I’ve decided to add dimension to the screen with subtle shadows and coloring. The items that feel like they’re on the top of everything should be the lightest. The ones furthest away should be the darkest.

We can also help remove some cognitive problems people might face by making it clear which item on the navigation is the one they are currently looking at. We can also make a distinct difference between the logo and the navigational items.

Adding a suggestion to the search makes it easier for people to understand what exactly they can search for and it could remove potential frustration which might occur if a person searches for something that isn’t discoverable and gets “no results”.

Combining log out and profile settings into one item felt like an okay decision because it doesn’t seem like something people will click on every single day. But assumptions like these should always be tested.

Now we can start focusing on the main part of the screen. One thing that can help us out a lot is defining a good grid system. For this exercise, let’s just keep things simple and define a two-column grid (since it looks like this is the grid our initial content required).

Our next task is to slowly add everything that’s still missing to this screen. The next thing we can do to make the screen feel less cluttered and easier to scan is to add titles to our sections.

We need a perfect combination of size and contrast to ensure the titles stand out to the user.

We’ve previously introduced blue as our primary brand color in this interface and for now, it makes sense to make all of the actions on the screen blue too. Sometimes you will have to define additional meaningful colors, but make sure you’re assigning them clear meanings when you’re doing that. Stay consistent.

One thing I’ve done is removed some of the less important items in the screen by hiding them under “see all”. My assumption was that the users use the home screen as a starting point. If they want to focus on their schedule or their messages, they can easily dive in deeper by clicking on “see all” or on one of the navigational items. Only the last few items appear on the home screen which might be the ones they’ll need at a first glance.

We can make the to-do list a bit more scannable by having a clear difference between the items which are done and those that still need to be done.

Through user interviews, we might also discover that items that were checked off no longer need to appear here, but that’s something we can try to figure out and I didn’t want to have too many assumptions to test for our first redesign of this screen.

We can also try to make the graph look a bit less cluttered by removing the left values and showing them on hover. Again, it’s something we should test, but for now, it seemed like there are already a lot of things fighting for our attention so this could balance things out a bit.

Finally, the floating button was supposed to be used only for tracking the study time. I thought we could expand on this feature by adding other options students might do on a daily basis like adding to-do items to the list or creating emails.

And here we are. With a few adjustments, we’ve redesigned a cluttered screen into a less cluttered one. Hopefully, you will be able to reuse some of these tips in your current or upcoming projects.

I just want to note that this was just a UI overhaul exercise, without me trying to do a lot of other UX improvements. This was just a potential screen of the non-existent app after all. People are required for true UX improvements. On the other hand, the overall experience should already be exponentially better because of the decluttering process. 😊

–

Follow supercharge.design on Instagram for daily design tips and inspiration.
You can also follow me on Instagram and Dribbble.