7

Current

I'm reviewing an email application that currently has the following chart on the dashboard, where the default state is the left one (contacts), and the second state appear on right after mouseover (contacts left).

contact used (default state) contacts left

Goal

Pricing is on a per-user basis, so the goal was to give feedback to user on:

  • used slots.
  • remaining slots ;

Multistability

Disclaimer: I'm not a fan of donut charts.

After watching Janne Jul Jensen talk about The Cognitive Abilities of the Human Mind, I'm wondering if such multistability (2 possible way to interpret) would help users or confuse them to understand the chart?

Improve this question
5
  • Seems the interaction element here helps. The fact that one visually sees labels and highlights change should make it clearer as to what is what. That said, it seems that this donut represents a 'bucket' and how full it is. The 'empty space' green seems too emphasized. I'd consider changing the green to a light gray or very light pale green to help emphasize "empty space" (Disclaimer: I am also not a fan of donut charts!)
    – DA01
    Commented Jul 8, 2015 at 14:29
  • light gray sound like disable state, so doesn't convey the "available/remaining" idea. Maybe better to use it on the "used" part
    – Édouard Lopez
    Commented Jul 8, 2015 at 15:27
  • 1
    Well, I'd say it can also represent 'unused state'. But you are right, it could go on the used side as well. Point being, both colors have the same intensity right now. They both seem equal in meaning, when they really mean opposite (used vs. unused). Adding contrast either through value/intensity and/or darkness may help.
    – DA01
    Commented Jul 8, 2015 at 15:44
  • 1
    +1 for a well-asked question, and in particular for including the Goal of the interaction. Can you expand on your goal here: you want to give feedback to the user on used/remaining slots, but what kind of behavior do you want to elicit from the user? i.e. do you want the user to buy more slots? fill the empty slots? clean up their contacts? etc.
    – tohster
    Commented Jul 8, 2015 at 17:15
  • 1
    is this a dead set approach? I see it rather confusing, to be honest, and would never use this to achieve the desired goal, but if it's something you're reviewing, maybe you don't have the choice to change it. btw, nice video, and besides the Multistability part I'd recommend you to check the Simplicity part since it may help you see other (better) options
    – Devin
    Commented Jul 8, 2015 at 19:26

3 Answers 3

Reset to default
10

UX Horror: Making users think

Here are some reasons why it's bad:

  • Color is not helping: It's very hard to tell just by looking at the Contacts chart if blue/green portion matches the number, there isn't any clear sign to indicate this.
    I think that colors don't make a big difference in this kind of chart where they don't have a direct relationship with the content they're representing (e.g.: percentage of sunny/cloudy days => yellow/gray or blue/gray)

  • Same for shapes -> Unclear visual association between them and content: In order to know what shape matches each amount, users have to switch between "views" until they figure out the relationship between the amount, if they ever do. If you have two shapes related with two equally important amounts, and you show both shapes, then show also both amounts.

  • It's hiding valuable information + requiring interaction + no affordance: What is the purpose of forcing users to mouseover to show the data they need when you can show it without any need of interaction? Also, how is that users will know that by moving the mouse over the graphic it's going to show additional data? Somehow you got to tell them.

  • It's relying on users' short-term memory: (closely related with the "hiding information" one) If they forget the number, they'll need to interact again; and this can happen repeatedly.

  • Fails on the proximity principle ("things that are close to one another are perceived to be more related than things that are spaced farther apart"). Both amounts are in the exact same position, so they don't help to make a mental association between their corresponding graphic representation.

  • The circular progress doesn't have a recognizable start point: thus is harder to visualize the real proportions. I think an improvement could be to start at "9 o'clock" and advance in clockwise direction, or start at "12 o'clock" and advance in counter-clockwise direction (as in the example below).

Back to the classics

If you want to explicitly show the amount of both "added" and "left" contacts (btw, use the wording you consider most appropriate, added/left are just an example) a classic pie chart will do the job: all the information is shown without needing the user to interact or think too much to obtain it.

enter image description here

Improve this answer
8
  • 1
    +1 for different outlook. Colors are so important but moreover it choice of chart is important too. Liked addressing pie as classics.
    – Praasshant
    Commented Jul 9, 2015 at 5:22
  • @rewobs did you use a checklist to review this ? Also is there a better widget that donut/pie chart?
    – Édouard Lopez
    Commented Jul 9, 2015 at 8:26
  • 1
    +1 and I thought I was in a club of 1 despairing about snazzy visual designs that damage UX
    – Jason A.
    Commented Jul 9, 2015 at 11:21
  • 1
    @ÉdouardLopez About your question, the proximity principle tells that when having two things you want to relate, the closer you placed them (also taking into account the distance between other elements), the easier is to recognize that relationship. If you knew that the labels aren't going to fit, yes, you have to place them outside. You have many variables: size of the cart, size of the label, number of amounts/data you're showing, length of each displayed, type of chart, total available size, etc, you have to find the right combination to meet your goal analyzing your specific case each time
    – Alejandro Veltri
    Commented Jul 9, 2015 at 17:58
  • 1
    @JasonA. I know how it feels, it's like watching someone that for the sake of "fashion" wears something so tight that doesn't let him/her even move normally. Usability first!
    – Alejandro Veltri
    Commented Jul 9, 2015 at 18:02
3

I would consider making the non-focused figure gray like this:

enter image description here enter image description here

You might even consider maintaining only one color as well:

enter image description here enter image description here

Even if you do keep the colors different then I would make sure to make the active color thick enough to be obvious:

enter image description here enter image description here

If the mouseover switching occurs then it should be immediately obvious what is going on.

Please excuse the Paint skills.

Improve this answer
5
  • 1
    Using only one color is reduce even more the difference between states, I would not use or recommend it
    – Édouard Lopez
    Commented Jul 8, 2015 at 16:36
  • @ÉdouardLopez I disagree, as a matter of personal opinion, but I didn't even realize the donuts were different in OP's example until I saw this version.
    – DasBeasto
    Commented Jul 8, 2015 at 20:22
  • @ÉdouardLopez I disagree, there needs to be a tangible contrast between what the user needs to know and superfluous information.
    – MonkeyZeus
    Commented Jul 8, 2015 at 21:03
  • @DasBeasto Same here!
    – MonkeyZeus
    Commented Jul 8, 2015 at 21:03
  • @DasBeasto my comment is related to the 2nd proposal where both states are using blue for highlighting
    – Édouard Lopez
    Commented Jul 9, 2015 at 8:22
1

Your idea is fine, but the execution is unclear which makes it not fine.

Your goal should always be to minimize the amount of cognitive load you put on the user, and employ as many natural associations that you'd like and expect an average, rational-enough user to perceive. That is to say, you want to make things obvious.

Your current flaws are:

  • This isn't an absolute rule, but I would argue generally black text on white BG is a thing of the past and if it is chosen, it must be chosen consciously for a very specific reason. Why? Because the high contrast is jarring, and jarring pulls from a users very limited attention span.
  • Your labels are bolded, when this is a data-analysis tool. The label and the number are both essential -- yes -- but I argue that the numbers are what the user is interested in, and are what should be bolded instead.
  • My main problem is that it's unclear as to what the number is describing at a glance, and the user has to think/analyze. Your only visual affordance is that the width of a circular bar is a little bit wider than the other one. This is not immediately obvious enough to be sufficient for users to parse at a glance.

My proposed edit:

Proposed edit

My arguments for why this works better:

  • What is the number I'm looking at describing? Why, it's obvious! It's describing the portion of the bar that matches the color of the number!
  • The label changed to grey reduces its contrast and makes it "pop out less," which makes it easier to parse as a whole, in my opinion.
  • A quantitative representation of data being highlighted is bolded? Let's bold the numerical value of the data as well to match.
Improve this answer
3
  • Having a background in accessibility, I'm a bit surprise by the importance given to "color" in the various answers. Color must not be the sole way to convey information (cf. w3.org/TR/WCAG20/#visual-audio-contrast-without-color). I reckon applying the proximity principle can have a greater impact than only using color
    – Édouard Lopez
    Commented Jul 9, 2015 at 8:39
  • I like your point about datum > label, I would have gone further making the label a subtitle to the datum to reduce it saliency.
    – Édouard Lopez
    Commented Jul 9, 2015 at 8:44
  • Actually I'm asking which of explanation then data vs. data then explanation is the best solution in ux.stackexchange.com/q/81252/6401
    – Édouard Lopez
    Commented Jul 9, 2015 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.