Any technique for creating images, diagrams, or animations to communicate a message.

learn more… | top users | synonyms (2)

65
votes
6answers
4k views

Why are election results presented by a geographic map instead of a cartogram map?

This morning (in Sweden) I woke up early to watch the 2012 presidential election in United States. I watched different news sources but all of them presented a geographical map of the results instead ...
55
votes
18answers
2k views

How can I keep up-to-date with the latest thinking about designing complex, rich applications?

I am designing a very complex eco-system of apps. I like to make sure I am up-to-date with the latest thinking, research and trends in app and UI/UX design. I find that there are many great articles, ...
49
votes
8answers
3k views

Should I fill empty space in bars?

It's about bar-charts in a table. Every row has a bar, which visualises a value of the row. The biggest value of the whole table is the maximum of the bars and not necessarily on the same ...
39
votes
10answers
4k views

Display big numbers in a small area

I am developing an accounting app where I display several orders. Every order has a price. I have a box where I would like to display the price as shown below: This works pretty well for fairly ...
37
votes
7answers
6k views

Intuitive interface for Composing Boolean Logic?

I'm interested to know how people have, or would construct an interface which simplifies constructing logical boolean conditions? (Yes, it's a database query builder) In my mind a bad interface has ...
35
votes
8answers
1k views

What would be a good way to thumbnail audio?

I want to represent an audio file in an image with a maximum size of 180×180 pixels. I have been thinking about something similar to what Soundcloud does, although it will require some chopping and ...
34
votes
6answers
3k views

Why is tree representation of data becoming unpopular?

I'm asking not about professional software like IDE's, but about OS GUI and web interfaces. A few years ago there was File manager in Windows, Gopher and other interfaces and data models like this. ...
31
votes
8answers
1k views

How to visualize data with extreme value differences?

I am working on some routines for a client application to visualize data in a 3d bar chart style. The data consists mostly of smaller values with only a few large values. For example: 6,942,535,341 ...
19
votes
3answers
658 views

How to show progress towards goal?

On our intranet we display some numbers for our employees so they can keep track of their performance goals. Currently it's just a table. We'd like something more visual, and this was the first ...
18
votes
6answers
1k views

How to represent an X/Y mood data to a user within a very small space (32x32)?

I'm building a mood tracker app for iPhone and am running into a user experience issue - I would like users to be able to track their moods, along with other events in a vertical "history". The mood ...
17
votes
2answers
780 views

Interface for Data Brushing

For an interactive graph I'm using a UX pattern called Data Brushing. My starting point is a d3js example by Mike Bostock. This is what it looks like in its initial state: The smaller graph below ...
17
votes
13answers
1k views

How to build a budgeting interface (sum of items must equal 100)?

I'm trying to build a visual web interface where users can distribute a budget over some (varying) number of items. For example, if the budget is 100 points, I might allocate: 50 points to 'Apples' ...
16
votes
3answers
3k views

How many visually distinct colors can accurately be associated with a separated legend in a figure?

For charts and graphs it's a relatively common question by programmers to want to procedurally generate an arbitrary number of colors that are visually distinct. Various research (or educated ...
14
votes
4answers
2k views

How best to show server availability over a 24 hour period?

I have a customer who asked me to provide a "Server Availability" chart for the last 24 hours that looks like this one: Y represents hours (0 - 23); X represents minutes (0 - 59) In this example you ...
14
votes
5answers
10k views

What is a good icon for illustrating expand (and collapse) all? [closed]

I'm trying to devise an icon to indicate that when it is clicked, it will collapse all the nodes in a tree. The tree contains profiles which already have an icon, so ideally I'm looking for a ...
14
votes
1answer
501 views

Tufte's data density, readability and comparison

I'm intrigued by Tufte's data density. While I love his definition of data / ink ratio which can be easily measured, I have hard time measuring data density. He defines data density in a graphic as a ...
12
votes
6answers
298 views

How to present weighted values

I have a formula which is used to calculate certain scores. The formula has some parameters (shown in the image below) including a Weight parameter that is changed dynamically (the rest of the inputs ...
12
votes
5answers
533 views

What are techniques for showing a future state on an empty dashboard?

I am working on a new web application that will have a user dashboard displaying lots of great information with charts, notifications, alerts, etc. The actual data populating the charts will not be ...
12
votes
4answers
3k views

What is the best way to visually present a sitemap?

Do you know which are the common patterns for a graphical representation of a sitemap?
11
votes
5answers
525 views

How best to show the 'weight' (importance) of bullet-ed items in a non-intrusive (creative) way?

I have a web page with a bulleted list of items each with an associated weight i.e. level of importance. The bullets are of equal width but not necessarily of equal height. Here's a graphical ...
10
votes
4answers
962 views

Alternative graphical representation of a goal achievement?

The client has a set goal X that he wants to achieve every month and he wants this represented graphically and I agree that it would be a good way for people to easily see how far along they are. The ...
10
votes
5answers
381 views

Reference books for data visualisation and dashboard design [closed]

Please could you recommend some reference texts or other resources concerned with business data visualisation and dashboard design. There's Information Dashboard Design by Stephen Few on Amazon but ...
10
votes
4answers
569 views

How do I represent null values in a line chart?

I am building a web-based analytics platform. I am looking to plot a line chart that represents the number of seconds it took for me to reach a live service agent via phone on a given day. In the ...
10
votes
3answers
345 views

How to go about presenting a large family tree?

I'm currently developing a game, and one of the features involves breeding the creatures you collect. Since it's a game, a large amount of promiscuity is to be expected, and individuals could ...
9
votes
7answers
591 views

Showing excess usage in a progress bar

I am working on a web app and would like to display the amount of transfer (bandwidth) that the user has used for that billing period. They are given a certain amount of bandwidth per billing period. ...
9
votes
7answers
970 views

Representing a network of product dependencies as a diagram

The company I work for builds solutions - these are the items we take to market. Solutions consist of programs (1-to-many) - these are repeatable projects, or 'recipes' that we piece together to make ...
9
votes
5answers
2k views

What is the best way to graphically display item's position in a ranking?

My app has a table containing a list of financial securities. One of the columns is the security's position in a list of all available securities ranked by performance. For example: security XYZ is ...
9
votes
7answers
267 views

How do you decide whether additional information is harmful?

In any primary user interface screen, a designer must find a balance between too little and too much information. Often, adding additional status information is cheap, technically. Therefore, some ...
9
votes
4answers
1k views

Good ways to handle precisely overlapping data points in a graph?

In an application, I have a graph of markers--either with or without connecting lines--in which it is possible to have data points, and therefore markers, that are at the exact same location, even if ...
9
votes
4answers
185 views

When to omit zero from numeric table presentation

Give a table of numeric data in which many cells contain zero, under what circumstances would it be appropriate or preferable to present the zero-value cells blank or otherwise obscured (eg. in ...
9
votes
3answers
223 views

Reputation Scoring Signals

My Question: How is the UX of the best, or any, web reputation systems capturing and representing offline influence within a community? What are the signals that are quantified or illuminated in ...
9
votes
1answer
189 views

Are there any resources about connotations related to visual elements from a cultural perspective?

I've been wondering about this for some time, are there any libraries or resources online that show what connotations are attached to any given design element from a cultural perspective? I am aware ...
8
votes
3answers
230 views

Additional information for tables

I have to show some extra data to users. Column-sums, column-statistics (different values per column) and column-rests (the sum of all values for the columns, which are on pages not shown). These ...
8
votes
3answers
291 views

How to visually show status values for a large number of data points?

For example, what if you have 100 valves in a process plant. You want to show at a glance their status, with the most important thing to notice is a value that indicates a valve that is in critical ...
8
votes
4answers
320 views

Does “ink is expensive” apply in a user interface context?

Edward Tufte in the book The Visual Display of Quantitative Information states, more or less, that ink is expensive. Any ink which is not used to actually convey information is chartjunk and it will ...
8
votes
2answers
316 views

Best way to present time durations in a list?

We have a list of items, with one of the attributes being a time duration. (Imagine users, and avg time between certain activities). Most of the time, this duration will be in the 0->120 second ...
8
votes
3answers
303 views

Information visualization - display 6 related ranges on a single chart

I sell apples and oranges. I know how many items of each kind I expect to sell today and I know how many I've actually sold so far. I need to design a chart displaying this data in real time. What's ...
8
votes
5answers
779 views

Are Sparklines appropriate for use in dashboards of reporting software?

For those not aware of Sparklines, here is an example: http://demos.telerik.com/silverlight/#BulletGraph/FirstLook Would these work well to really give users a quick dashboard/reporting overview of ...
8
votes
2answers
4k views

Ways to visualise a user journey

I would like some opinions on user journeys and how to present them, specifically to the client. What do you think is the best way to present them and what tools would you use to create them? Do you ...
8
votes
3answers
2k views

Best UI approach to align the column titles of reports

I would like to know what are the best approach to align header columns according with the data type. I haven't found any Human Design Interface article explaining this. Do the header column must ...
8
votes
2answers
682 views

What are Good Techniques to Visualize Binary Differences?

I'm particularly interested in diff-based visualizations. Code diffs are the most straightforward and easy as they're used for a long time and have a lot of examples of 1, 2, and 3 pane views. For ...
8
votes
1answer
306 views

How to handle out-of-range data in a realtime plot?

Background I am working on real-time data acquisition and visualization software for a scientific measurement device. The software gathers data from the device, and plots the data in real time. Data ...
8
votes
2answers
463 views

Chart drill-down affordance?

I'm wondering if anyone has any suggestions for improving the usability of chart drill-down? More specifically, imagine we have a bar chart (or any other visualization) where a user is able to select ...
7
votes
5answers
559 views

Visualize time-series data

I have a lot of time-series data. I would like to visualize this data, so that I could spot patterns like the following: "About five days after event X, event Y is very likely to happen" or "A ...
7
votes
4answers
362 views

How to display hardware life expectancy?

For a web application I'm developing my manager has asked me to display the life expectancy of a hardware component. The component will according to the manufacturer handle at least 16 000 000 ...
7
votes
4answers
275 views

nice way to display a text message for two dates (range)

I have two arbitrary dates. I was wondering if somebody can suggest the rules to create a text message which tells in a very effective way what the two dates are. Let's assume that my solution is ...
7
votes
5answers
762 views

What is the best way to create an eye-catching display of numeric values in a web page?

I am going to design a management level monitoring page for displaying some sums and counts. No interaction is allowed and it will be used as a monitoring page on a big LCD in the managers view. The ...
7
votes
2answers
421 views

How to best label age group boundaries?

We're organizing people into age buckets. For example: 0-20 yrs, 20-40yrs, 40-60yrs... I'm struggling with how to best label the age buckets, there are two options: (A) Don't repeat the values, so: ...
7
votes
3answers
123 views

Commentary book on information architecture outside the Internet

I know there is no single correct answer to my question, so I would be grateful if mods could turn my question into community wiki. I’m looking for a book about information architecture in everyday ...
7
votes
2answers
259 views

Visualization of event occurrences over time

I have a short time range tstart – tend ( ≈ 90 seconds) and a list of points in time which represent events that occurred at that point. I'm looking for a concise visualization of these ...