Friday, February 13, 2015

web app - Why is this design considered cluttered or overwhelming?


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.


my website


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



Answer




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.





  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.





  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.




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:
Online indicator in text only.


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:
Details table without icons.


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)?



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...