87
How about leaving out the second colour and instead put a border around each bar? That makes it obvious what the maximum value is, but it also keeps the clarity of the uncoloured negative space.
83
People who turn on the TV on election night expect to see the map of their country and see which states voted which way. Those who actually follow the elections and have at least some very basic knowledge of what's going on, also know which are the important states to watch, and they can find them easily on the geographic map. Even those who aren't that ...
83
Don Norman's "Why we Love (or Hate) Everyday Things" opens with an account of a famous study on this, conducted by N. Tractinsky in 1999. He tested four different designs of an ATM machine, where each could have either good or bad usability, and good or bad aesthetics (a 2x2 research design). He reported that
the degree of system's aesthetics affected ...
80
Show the numbers.
If the user selected three fruits to be shown, Apples, Oranges, and Melons, and only sees Apples and Melons in the pie and in the legend, they will wonder where the Oranges went. If the Oranges are shown in the legend but not in the pie, again they will look for the tiny slice of Orange with a magnifying glass.
Therefore, show the numbers,...
71
Yes, visual design affects user experience
Here's a common meal with only one visual difference. It's enough to drive a dramatically different user experience:
There is more formal literature on this topic, but since others have already provided citations, I will add one more a simple illustration. The following two forms are almost identical except for ...
67
Best solution will be to increase the size of the box. If you can do it without changing the layout, it is good.
For reducing the font size, I would suggest use a single size rather than going descending. It is easier to read.
And, if you want to do 'k' representations, make sure the user has some way of accessing the actual number, via a tooltip or some ...
60
Designers
When it's your working version and you just want some text in there to visualise the overall page balance, and you'll only share it with other designers, then using Lorum ipsum should probably be fine.
End users
For end users, I would suggest using some other real example text. Yes, you'd have to localise this, but it's quite easy to simply ...
60
There is a paper by Skau et al. (2015) that investigates in how far the effectiveness of bar charts is affected by different types of visual alternations. The authors tesed whether these alternations affect how well participants can make relative comparisons and absolute judgments using the bar. Participants were presented different types of bar charts, and ...
54
People don't generally use hierarchical structures 'in the real world' -- it seems to be something that has been forced upon them, a technical remnant of the past.
What needs to be understood is the way that people recognise and organise things. Our brains don't work in a hierarchical way (without generating a lot of heat). Instead, we recognise things by ...
53
White is giving the appearance as the absence of data. Data visualization is not about what you intend, it's about what they perceive.
Black and white have connotations as opposites. Some cultural connotations are good/bad, empty/full, etc. These vary. Seeing this much black and white is also harsh on the eyes.
I'm losing track that these are parts of a ...
51
For anyone mathematically inclined, the answer is to use a log scale.
For non-mathematical people, you may be better off showing a break in the chart and then the extreme value.
50
How about his. show the percentage in the legend:
Apples (20%)
Melons (80%)
Oranges (0%)
50
I really like the iTunes way of laying out a rule builder. It's quite easy to follow.
With that in mind, here is an example using that paradigm:
download bmml source – Wireframes created with Balsamiq Mockups
You can see there's an added accelerator in the Fur color & Species options - selecting multiple values of the same type could be ...
45
I have seen the following visualization used to represent down time and it has been effective:
The illustration in the question requires too much thinking.
The linear time line works well for a 24 hour timespan.
43
This one tested well with both the technical and non-technical users and can generate pretty much any possible database query...
The benefits are that it's very clear and a user can drag and drop (or delete) any expression or group of expressions in the tree.
The down side is how much space it consumes.
41
If the users' goal is to read a specific or accurate value from the bar's length, then @Schmuddi's answer describes the importance of having a flat end. An example of this would be a traditional glass thermometer, where the exact length of the fluid is very meaningful, and the user must be able to read a specific value.
However, if the goal is just to ...
40
What about taking a waveform resolved to stretch only a short distance, say 200px, then wrap it around a ring so it fits inside the square thumbnail constraints. So... length of waveform graph would be... related to pi somewhat.
Like this, which I made in photoshop using the polar coordinates command.
40
The main advantage of visualization is you are just showing the data and nothing else. Adding negative space just to show the ceiling sounds like Chartjunk.
If you just want to show the maximum limit, show a thin line and write what it represents.
download bmml source – Wireframes created with Balsamiq Mockups
This is quite similar to what stack ...
38
Your layout should support your content. First content, then appropriate layout. You can not easily break the physical constraints (like small screen), but maybe even your biggest number could be placed as separate line at smallest screen.
Also I would recommend to keep in mind three stages concerning software:
Useful (Functionality)
Usable (Usability)
...
38
How about building a flowchart?
An OR could be expressed by a fork in the flow. An AND could be expressed by joining two criteria in the same flow path.
For example, ( A ∧ B ) ∨ ( C ∧ D ) could be expressed as:
( START )
│
┌──┴──┐
│ │
[A] [C]
│ │
[B] [D]
│ │
└──┬──┘
│
( END )
Of course, building a web interface that allows ...
35
Those kind of graph are more and more common but a simple color effect can helps user. You should change your initial state to an already zoomed state where upper and lower are differents for more clarity.
35
Stacked bar charts often use a darker colour at the bottom and lighter colour at the top. Bolder darker colours look strong and more supportive of what's on top. Your chart bars looks top heavy, with black areas 'floating', rather than the bar giving the impression of 'tapering up to the sky'. Outlining the bars would also help to stop the bleed from one bar ...
33
Something which is done here in stackexchange is using colors in combination with k's to display weight (and I'm guessing m's as well).
Look at how different colors represent different weight, in combination with the k's, you're receiving something which is unmistakably usable & understandable
Reading further: Have you considered adding a tooltip/...
32
Interesting graphic - the US looks quite funny. But I think a geographic representation is still best way because of:
The viewer is interested in what state has elected and which party. This is best shown in a geographical correct map as you are used to know where a state is situated.
It is obvious, that the USA is shown. No need for explaining a strange ...
31
There is enough ambiguity here that labeling and context are necessary
It doesn't matter whether 30%, 50% or 70% of users think this is male (vs female or gender-neutral). There is enough ambiguity here that the infographic will fail to communicate gender effectively so context and labeling are necessary to make it effective.
This Nielsen article ...
30
Font and layout is exactly what Lorem Ipsum is designed to do.
It has been used by type setters and printers since the 1500s.
The idea is that by not having real words the users focus on the layout.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is ...
30
You have several visualization problems to solve in one graph. How are the users interacting with this?
Your question is focused mostly on labels, however, you also mentioned showing when an element is being split among several entities for payment, in addition to showing sequence of payments.
So you have a stacked bar - like graph doing some heavy lifting....
29
Go with a chevron. It is widely used for collapsing and expanding, and it's rather self explanatory.
27
You could use logarithmic axes. This allows you to compactly visualize wide ranging variables.
To illustrate, here is a very simple logarithmic visualization:
6 942 535 341
23 598
419 203
8 201
3
The length of each datum represented as a number is (roughly) log_10 of that number. So just printing the numbers in a ...
27
A decent heuristic would be whether the negative space has meaning. If the bar represents something like speed or a metric of productivity, the blue part in your graph doesn't have an important meaning. In that case the bars are best left by themselves against the regular backgound. Just make sure that the user can distinguish between the value 0, and a ...
Only top voted, non community-wiki answers of a minimum length are eligible
