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.


79

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


75

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


64

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


62

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


59

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


51

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.


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


35

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.


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.


32

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:


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


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

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


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


24

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


24

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


23

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


22

You could start by reading interaction-design.org's entry, by Noam Tractinsky, on visual aesthetics. Remember also to read Jeffrey Bardzell's comments on the entry. Then you could check out Tractinsky's seminal What is beautiful is usable: A multivariate analysis of covariance revealed that the degree of system's aesthetics affected the post-use ...


20

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


20

Your graphic seems to require far too much information to describe what it means. Github does this through a table of Longest Streak next to Current Streak. It is easier to understand with just text. To keep it compact you could remove everything but the most important information: download bmml source – Wireframes created with Balsamiq ...


17

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


16

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


16

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



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