Tag Info

Hot answers tagged

88

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.


78

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 ...


63

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 ...


50

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 ...


43

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.


41

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 ...


39

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.


37

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


34

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.


34

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.


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 ...


32

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 ...


25

A smooshed-up waveform doesn't seem very useful. For all practical purposes it's meaningless, and it'd be hard to tell two 180x180px waveforms apart at a glance. Instead you might consider a visual hash like Identicon. That would still be meaningless, but the thumbnails would be visually distinct. A clever algorithm could even make similar files (e.g. songs ...


25

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 ...


23

See also iTunes 9 or later. It adds the ability to do "nested" AND / OR expressions, akin to how a programmer would do it with parenthesis:


23

The point is that the map is intended as an at-a-glance throwaway space filler that does it's job simply and efficiently and for all viewers. Of course, that's not to say there's no place for maps with more information, but there's no point in doing that unless you can provide a way for the user to interact with the map in a meaningful manner that allows ...


22

There are several problems with trees: A tree is a single taxonomy. This requires the user's mental model to match the software developer's mental model of the domain. Navigating with trees requires high-precision mouse accuracy to expand a tree without selecting the branch. This is also very difficult to manage with touch interfaces. Navigating trees ...


21

The main problem non-technical users have with Boolean logic is understanding the difference between AND and OR because it doesn’t always correspond to natural language (e.g., “show me orders from New York and New Jersey” almost certainly means Location = NY OR Location = NJ). Often users tend to interpret "or" to be an an exclusive OR. Then there’s the ...


19

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 ...


17

You can use some cues for hours and days. As those are more rare, the icons don't create much visual noise.


15

I didn't understand whether by "chopping and stretching" you meant taking a segment of the audio data and stretching it so it fills the square, or rearranging it. The rearranging approach sounds like a good idea.


15

I find just using the colors as the demarkation a bit harder to understand. You can use a vertical rule to act as a placeholder for the goal, YTD or annual, depending on the day. Your focus should be the goal and how much over or under you are. What I mean is there is not enough value of showing the actual numbers when you are just bother to about the ...


15

As you have mentioned, the 2 graphs are "disconnected" from each other and there is no clear visual relationship to link them together. I have seen controls like these commonly used for graphing stocks and putting an explicit link between the 2 charts is definitely the best way establish a link between them. Google Finance's charts provides a good example ...


15

I've implemented something along these lines - here the 'plant' is split into sections and then you display the sections in a hierarchical order and display a count of the red / green from each section along with a histogram:


14

Go with a chevron. It is widely used for collapsing and expanding, and it's rather self explanatory.


14

Your idea could work, but you will need to take care when designing it. Variable sizes can appear confusing. Breaking the balance and symmetry that often marks pleasing design. However, it's not impossible. This experiment, called elastic lists provides an excellent example with several ideas. Get the code: Github link for elastic lists This is a bells ...


12

There is of course an awful lot of research on color and color perception. Most relevant to your purpose is perhaps the work Cynthia Brewer did on ColorBrewer. You can find the resulting tool at http://colorbrewer2.org/ It was originally designed to help choose color for maps but it can also be used for statistical graphs (it's built in Hadley Wickham's ...


12

Each type of graph or chart has a presentation purpose. You choose chart type depending on what you want to show and what parts of the data that you want to compare. It is quite easy to just google "how to choose graph type". I found for example this Graphing Tutorial: How to choose which type of graph to use? I summarize: Use . . . a Line ...


12

You can display vertical graph to display bandwidth limit with usage. you can have multiple vertical lines/graph for each billing cycle. display green graph till the acceptable limit and red graph to display excess data usage. here is an example: Android already take this approach, so here is an example.


11

One problem I think you should avoid is auto-adjusting the other variables to maintain the 100% total. It can become extremely annoying to have to deal with that whenever there are more than 2 variables at play. And if you relax your restrictions a bit I think you can create a more user-friendly interface out of it. I came up with a solution that's part ...



Only top voted, non community-wiki answers of a minimum length are eligible