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

learn more… | top users | synonyms (3)

69
votes
6answers
5k 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 ...
58
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, ...
51
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 ...
48
votes
10answers
8k 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 ...
44
votes
11answers
8k views

Is it bad practice to use “Lorem Ipsum” example text in a text-preferences screen?

I'm the developer of an application where text plays a major role in the user interface. Users can adjust the style of the text in a preference screen. I have added an example text to the preference ...
42
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
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 ...
36
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
2k 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 ...
20
votes
7answers
1k views

Best way to display code to non-programmers

I'm asked to analyze the program responsible for printing our invoices. (Via SAP script) This program is pretty old and contains more than 4.000 lines of code. It sets a lot of different variables ...
19
votes
3answers
709 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
2answers
832 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 ...
18
votes
13answers
2k 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' ...
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
3answers
5k 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 ...
15
votes
5answers
13k 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
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
1answer
590 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 ...
13
votes
6answers
339 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
572 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
4k 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
546 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 ...
11
votes
4answers
2k 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 ...
10
votes
3answers
938 views

How to best visually represent a dev team's skillset versus project needs?

I need to visually represent a dev team's skill set (and proficiency) against a project portfolio's required skill set. I have two separate tables, one for team members, and one for projects. Here is ...
10
votes
4answers
1k 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
2answers
382 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 ...
10
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 ...
10
votes
5answers
421 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
3answers
3k views

Best UI approach to align the column titles of reports

I would like to know what the best approach is to align header columns according to their data type. I haven't found any Human Design Interface articles explaining this. Should the header column ...
10
votes
4answers
834 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
404 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
699 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
1k 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
280 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
339 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 ...
9
votes
4answers
188 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
240 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
199 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 ...
9
votes
2answers
591 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 ...
8
votes
3answers
245 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
324 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
294 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 ...
8
votes
3answers
318 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
826 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
830 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
349 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
187 views

What is a good mouse cursor to point at objects in diagrams?

Do you know of any study or evaluation of the use of mouse cursors specifically designed for the use in diagrams? For example I'm thinking about using a cross hair instead of an arrow cursor when I ...
7
votes
5answers
628 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
366 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 ...