Why is this design considered cluttered or overwhelming?

Question

I'm developing a web app for Desktop and Tablet browsers. All of my UX knowledge stems from personal experience and iteration - I've never been formally trained. I took great care in presenting the information on this website to keep it as organized as possible, but many people who have given me feedback describe it as "cluttered" and "overwhelming". I'm struggling to find how I can present the same information whilst improving it.

What elements of this card-based, dual menu, side-bar design are triggering this response?

Answer 1

This is where UX gets hard

There's nothing inherently wrong with your interface. It appears to be handling a large amount of information in a reasonably clear and standardized way.
But there is something wrong with your interface: The users don't feel comfortable in it.

That's a complicated problem to solve, but it is the heart of every UX design project. It's totally dependent on the audience you serve and the context they will be using your app in.

Where to start

1. Make sure you're not over-valuing the opinions of a small subset of users. That's the whole "squeaky wheel" problem. They may have some valid concerns, but you need to be sure they are representative of the larger population of users.
2. Sit down with real users doing real things with your app. See what happens, what tasks they try to complete, where they get stuck or confused or frustrated.
3. Test one solution at a time. The more atomic your changes can reasonably be, the more you can accurately take away from the test.
4. Circle back with your users when you think you've fixed something. Collect lots of feedback and make sure you solved what you thought you solved.

tl;dr

1. Understand exactly what your user wants to accomplish.
2. Eliminate every
   [ action, word, picture, icon, color, shape, pixel ]
   that that doesn't make them better at #1.

General observations

Disclaimer: I am not your user and I may never be. Take my observations for the unqualified guesses that they are.

Hierarchy

The card headlines definitely draw my eye first, thanks to the little corner triangle. That seems like an important element. So where do I go next?

The Create Game button sounds important once I find it. Locating seems like too much work since it's hiding over on the edge of the screen and uses the only highlight color you have, which is already used elsewhere.

How about the Games and Users things toward the top that look like nav? Currently, I'm not sure which one is active or what they would do.

Generally speaking, there is a lot asking for my attention. That leads me to ...

Visual noise

Try cutting down on the number of discrete things by refining the things that are there. For instance, could your Online indicator lose the circle and be simplified like so:

Another opportunity is the in the card details. How much of this info is needed at the overview level? Could you expand some of it on hover/tap? And the details icons don't add any useful information, but do add a lot of visual noise to the page due to their frequency. Why not just text labels:

Also in the game cards, I have no context for the yellow-orange line. At first glance, it looks like a tab indicator under the people icon and there may be another tab for Private. As soon as I think that, I realize that doesn't make any sense. More wasted attention.

Monotony

In spite of the complexity concerns, there might be room to add something to break up the monotony. Would there be meaning to allow cover images for games? Or possibly use that blue L corner as a full header color (assuming they wouldn't really all be the same)?

Answer 2

Repeating those table row labels for every game box is contributing a lot to the perceived clutter IMO. Also is all that information necessary? You could perhaps try simplifying, but add the ability to expand if necessary.

Answer 3

You have a good UI but a few things strike me that perhaps can be improved:

• Too many lines (you can remove most of them I believe)
• Too little contrast between the different parts of your design (try bluring your eyes and see if you can still discern the different parts of your design). The cards are especially problematic. Make them pop.

I removed some lines and made the cards stand out a bit more and I think this makes your design a little bit less cluttered. Judge for your self.

Answer 4

The data being displayed by the cards would make a lot more sense in a list or a table. Each card has the same exact fields with different values, and you're displaying the labels for the fields each time. A table with headers would only display the "Time", "Language", etc. labels once.

As a note on cards, they seem more suited for mixed or free-form content, where each card presents a unique UI tailored for its unique content. Your content is a list of available games, so representing that in the UI with a list makes sense.

Answer 5

personally, I don't think it's cluttered, but yes, it's a bit overwhelming.

Basically, I see your screen and have no idea where to look and what to do. The most important aspects seems to be an L in a corner and the fact that someone is online (this is because of your use of colors), then you mix information giving everything the same level of hierarchy. CTAs are grayed (!!!!), your breadcrumb is weird based on given screen (you are displaying games yet your breadcrumb display Users and this is a level under Games, which is weird as well, unless you mean Players), you have a message/chat sidebar that somehow seems to be related to main content, yet it's really hard to find a connection... well, it's bit confusing. The good news is that all these aspects could be easily changed, your main problem seems to be the focus on hierarchies, what is important and what not. Just change a couple colors (mainly the CTA) and test. I'm sure you'll see results immediately

Anyways, I think you should do some EXTENSIVE testing, study behaviors and interactions and ask questions to real users, not friends, not colleagues

Answer 6

The answers provided here are great, but a few observations:

1. Put the avatar of user in a grey circle (multiple grey circles looks cluttered), same way put meaningful information in all game cards.

2. Keep only the green circle as a notion for online users, remove text i.e. 'Online' from the list of friends, but keep the text in the logged in users statuses as it will help them understand the meaning of various colored circles like green = online, red = offline, orange = idle etc.

3. Remove the mail icon from the 'Friends | All' header as it's already placed in your app header. Refer to the following image for these 3 points.

   

4. Put your menu Games and Users in navigation tab like this.

   

5. Increase the size of the top-right corner and the letter like this.

   

Answer 7

I have some fundamental guides to offer, which should apply to all UX, and is especially important here:

Convenience doesn't have to compete with clarity.

A designer is supposed to take maximum advantage of screen space while presenting information which doesn't confuse or overwhelm the user. But this doesn't mean that we designers need to trade the amount of information available for the clarity in which it's presented. Take advantage of dynamic design, with user interaction.

By becoming comfortable with a fluid design medium...

We designers typically find it natural to design interfaces in a vector layout editor, where we arent wiring up a bunch of animations, transitions, and transformations. This is what limits many of us in our ability to design innovative layouts which expose (and hide) information through through user interaction. So, first learn to design in an environment where you can build moving, animated, transforming interfaces. I personally just design my interfaces with HTML, JS, and CSS - after a while, it becomes a natural design medium.

...we can create environments that expose and hide information, while pulling the user's attention.

Then, take advantage of the fluid freedom that you have in designing your interface to display hints of information that "pull" the user's focus from element to element in the order that you want, or the order that they need, and interact with the interface to access different information groups.

By focusing on dynamic user interaction, we can use a simple interface hierarchy to guide the user to the information they need, when they want it.

You want to expose lots of info to the user, but there's a limit to the amount people feel comfortable with at once. Limit the number of details exposed by relying on user interaction linked to smooth and simple animation, especially when dealing with duplicate information tables like this case.

For example, in your case, instead of showing all of those game blocks with duplicate information, try showing blocks with only a label identifying the game, and then when the user interacts with it (on tap or hover for example), show the details of the game. That change alone would drastically simplify your interface and make the user feel less pressured to absorb so much exposed information at once.

Answer 8

Well, good answers but not helping you with the cause other than "Monotony" - which is not a great term, but close.

Great design in Magazines, Posters, and User Interfaces is the product of font, font size and whitespace, further improved with color, and not harmed with line.

These properties: Font, Font Size, Whitespace and Color train the user to understand (a) what is important, (b) how to scan for information, and (c) how to see patterns in the data at a glance rather than think about them directly.

Reading is a very costly effort for people, so scanning to identify "which of these things doesn't look like the others" or some variant of the principle is what you want to find.

Spatial location develops over time with expertise, once the user has subconsciously memorized the user interface. (Experienced users like an Excel-style interface and new user's don't.)

In other words you cannot rely on introspection when designing an interface unless you know whether you are 'testing' the design for an entry level or experienced user.

You 'train' the user how to look through the information by use of font size (priority), font style (fonts convey relative meaning). After fonts use shapes (such as the corner tab someone else advised). After shapes use color. Color should be last.

Color should either indicate type, or it should indicate 'this thing is like the others'. If you have to 'decorate' with color, (a colored bar or background) this usually represents a failure, since it has no 'meaning'.

Test your design by doing separate elements in 'layers' and then turn layers on and off. Your eye should tell you.

Card interface

Now, you have combined 'cards' (spatial layout), but use a 'table' fonts and colors.

It certainly doesn't appear that cards are a good UI model for your solution, so first make sure you are helping the user. Cards work primarily if they hold images, and must be constantly rearranged. Otherwise tables are usually better, because they're easier to scan.

For example if you take a pack of playing cards and throw them on the floor you can still tell them apart no matter their direction. If you throw your 'cards' on the floor, then they will all look the same.

So you are relying upon positional indexing by your user, then you are either using the wrong model, or must solve the playing-card-metaphor.

Helpful hints

I try to advise people to find a magazine page layout to work from. Of course, the gold standard is the NYT paper and web site. All type and white space.

But starting with a visual model (the monopoly board game for example) usually will help designers avoid the 'boxes problem' that plagues amateurs.

Answer 9

When we humans look at something somewhat structured, like a UI, we tend to build a mental model.
In order to achieve that goal, we scan the UI in an instant, unconsciously, and take note of each and every item in said UI.
In this process we consume "mental power", an amount depending on the number of elements in the UI. This is related to cognitive load.
After doing that a number of times we get "tired", depending on the cognitive load consumed.

Well, your UI has quite a number of items, and what your users complain of is the amount of cognitive load required for each and every scan.
The number of elements is not the "Hey guys" panels, but the number of icons, text pieces, lines, everything!
This is good news because there is a lot of headroom for improving.

I'll enumerate a few examples in order for you to understand my suggestion:

• each "Hey guys..." has a number of internal lines that, if removed, would lighten the cognitive load without hindering the user understanding
• the line under "Created by Jack"
• the cell boundaries of the table under "DETAILS"
• the "DETAILS" word itself
• the "Friends | All | ✉5" artifact lines (show like a button on hover)
• the zebra-stripes under the Friends|All artifact
• the "Online ●" could be only the color part but with a green ✓ instead and a red cross else
• in Sort / Filters / All games try setting the dropdown arrow closer to the text so they become a single thing
• instead of round pictures use square ones reaching all three borders
• etc ...

As a first test, try expanding the "DETAILS" table so it touches all its four boundaries (losing its nice round corners and the "DETAILS" heading) and you'll see.
It will get simpler and thus easier to grok.
Then you might believe and embark in a visual element deletion frenzy.

Answer 10

Ideas:

Create Game

Maybe the first card could be your big create-game button! I'd really like it to have those type of inputs where you can just click on the text you want to edit and fill it in right there. I'd think about making it responsive too, so maybe when you see it, it's very simple, just has a "+" and "Create Game" and then on click it smoothly animates in those automatic input fields. (Say the card does a flip in 3d. There's endless options for creativity here!)

Game Cards

Similar idea for responsiveness: remove the join-game button and have it appear on hover as one of those semi-transparent-overlay effects. I do like the idea of screenshots/game-art as wallpaper.

Here's what I just realized about these cards, though: It's actually not necessarily the best approach for this kind of data. Every card has the same details and information presented. Why not just a table of some kind? Then players could sort them by field.

You could get creative and have the field labels on the left or right, and then still have a wide card-like orientation with wallpaper. Endless ideas here too! Maybe then they can scroll from left-to-right, AND scrolling up-and-down could shift the group of cards by classification, maybe game-type. (Arrow keys can now get involved!)

Player List

This (and maybe the header) is the part that seems a little cluttered. I think what it is is just a lot of visual information in the peripheral. So how could we fix this? Again, there's lots of options, we just have to get creative! Again, let's start by going with wallpapers. And then maybe an accordian interface? Maybe instead of "online o" you could have a filled-in circle vs. a half-full or empty circle. Or any other thematic indicator, like a ribbon! (or use a semi-transparent gradient with a hollowed out icon.)

One idea is to maybe even only include online people in it, while the offline are just listed below as comma-separated links, kind of like what you see in forums:

Qwerty Uiop, Plok Min Juhby, Wes X Qwaz, Kip H.G. Jolumny, Ferd 3rd, Chasbyn Q Jon Klimp-Werdguft ZCXV, Guy T. Fred, Ty Hug

(BTW, my mother and I came up with these names when playing a game to see what we could make with regions of the keyboard.)

---

Those suggestions are just to get it started. Hope it helps!

Answer 11

• Add more contrast to make the important content stand out more (the card games), by adding a darker background color for example.

• Make the yellow stroke more meaningful by increasing the size by the percentage of players that are currently in the room. A full room would get a red stroke for example.

• The font of the blue "L" seems like it's another font, which makes it really odd.

• Arguably: Remove the icons before "Round", "Time", "Language" and "Words". They're fun but also distracting and don't seem to add any logic as the text itself is enough.

---

Note that I only changed the first 2 boxes 100% (the 2nd box does still have the old L though, it was just to show as indication).

Answer 12

According to Jonathan Ive of Apple, a good interface only presents information that is IMMEDIATELY relevant to the user. Check out https://www.youtube.com/watch?v=3q6ULOT9Q4M

This may be a bit of a minor point, I had the same problem. With my client the issue is having too much WHITE SPACE in the interface. For a CARD based layout like yours try:

1. Adding a background color like #EEE to the main content section

2. For the sidebar chat, remove the extra line in grey

3. Have the option to make the cards collapsible, on if you have to present numerical data as comparison, try charts/graphs

Answer 13

Lack of hierarchy and definition of elements on the page is the main problem. Using highlight colours, scale and an understanding of how you want the user to interpret and digest the information you present to them will help it