Tag Info

Hot answers tagged

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.


18

Possible redesign below: Notes: Color should not be used as the only indicator to accommodate those with color blindness (Red-Green being very common). I've used different icons as well as different colors for indication. Red has a "finality" to it and might make the user think further action is required to solve the problem. I've made the icon yellow ...


15

Nice question. I can think of a few reasons. The contract with the vendor may forbid it. Vendors have all kinds of weird ideas. Some don't let ecommerce websites disclose even the current price unless the user clicked on the product and asked for it specifically. In general, the less info the buyer has, the less he feels in control and the more vulnerable ...


10

Your first solution is the classic one. The most of the timelines on the web are made with this solution. Just google "timeline" and take a look to the pictures. But you said, you only have a small area to use your timeline, so this could be tightly. I would use a version, where you have the line at the bottom of the page and just show up the events upwards. ...


9

An aside: COTS stands for Commercial Off The Shelf. Per the chart - it tells me nothing. Both the X and Y axis are so deep I have to following an enormous gulf in order to guess that the server was down roughly in the timeframe of 20:24-20:28. Why are there 4 lines in-between the hour lines when they only jump by 2 hours? My eye also has to wander a great ...


9

This is the way Pingdom chose to visualize it in their Public Status Pages: (Disclosure: I was the front-end web developer who implemented this graph back in 2010, but not the designer or originator of the concept.)


8

UptimeRobot is a tool for monitoring server downtimes (I'm just a user, no other connection whatsoever). They're showing a small graph on the left side for the up-/downtimes for every watched server in the last 24 hours (I edited the image because none of my watched servers had a downtime in this period). If you click on one of the bars, you see details on ...


7

I do not recommend the highlighting of 'contained' choices. It is an interesting idea, but the edge cases (where previous day, week or whatever are partially or ambiguously contained in the selected choice) would make it confusing, not clarifying. If the effect does not tell anyone something they can't easily know then it doesn't really serve a purpose. As ...


7

The emphasis is all wrong - the chart needs to tell just one story - the fact that you have downtime on one or more servers I would take the following steps: highlight the fact that there is downtime, not the fact that you have different servers. When you have no downtime, the display should appear bland, not full of colour. remove colour coding ...


6

What you're describing is a Kanban board. The concept started at Toyota and has been co-opted by the software industry. But the roots in manufacturing makes it a perfect metaphor for a dashboard for manufacturing processes. It starts with value stream mapping: identifying the activities that add value to your manufacturing process. They get represented as ...


6

I think I would not opt to put data on both sides of the line for any of the variants. At least, not the same kind of data. You could consider putting something like significant changes in the environment on the left side, while the right side has all the events that you're trying to interpret. (Vertical) direction is dependent on the use case: are you ...


6

For a timeline to be more than a "sort by date" option, it needs to have another facet to it. What other useful information will displayed by the timeline other than just the order in which events happened? For example, if I was making filterable timeline of WWII events, I could use the space between events to give an indication of how far apart they were ...


5

You don't mention which is the aspect of the family tree you are having trouble with. Horizontal trees can use time or be represented as a timeline, the problem is that the data usually increases on each generation, so you end up with something that looks like this: But it sounds like you might be following only a few branches, not the whole tree, so in ...


4

You're on the right path. If each colored graph represents server load then blacking out the periods of time when the server has been down is a great way to show that info. The clutter in your design comes from the vertical lines at the start/end times of outages. It's better to show all of that in a tool-tip when users hovers their cursors over an outage ...


4

I've a bit of experience designing timelines, here's the end result of one of them that solves your multi event problem you've noted - Industrial-Heritage or Operation Dynomo. What happens here is that a stacking order is set as and when needed, it recalculated at the different zoom levels to where possible remove the stack if more precise dates are ...


4

Your priority metric should be chronological significance - this depends greatly your context. Is it more important for the user to see the oldest items or newest first. Timelines on social media sites place significance upon what is happening 'now': 'What are my friends doing? Is my sister online? Are we partying tonight?' Units of work are generally ...


4

You can consider this, increase the line height and moving the details to a new row and highlight it with a subtle grey to make it less cluttered.


4

I think there could be usability issues with your current design. Dates duplicating clutters the interface. The dates are both on the timeline and within text blocks. Too narrow text blocks lead to bad readability. Bad reading pattern could lead to error in data perception: . Uncomfortable "jumping" reading pattern. The entire graphics is too heavy (line ...


4

Your mockups made me think about some classic representations of timelines. They are easy to understand and allows a lots of interactions.


3

If the items are independent of each other - place newer first. This way the user will see first what is new. If the items depends on each other and all together form some single content - place older first. For example, the posts in a forum topic are connected together by one subject - they form one single content that can grow in time. So, place older ...


3

We made something close to that for The Swedish Association of Health Professionals. Mainly ment as a visualization of their activity over time and as a exploratory entrance to some of their content. Sadly it seems to have lost it´s place in the grid and has slipped down to the footer of the page but check it out: http://vardforbundet.se/


2

The SIMILE timeline widget provide a two scale timeline.


2

Below are 2 javascript libraries that can mimic your finance graph image. Highcharts - http://www.highcharts.com/stock/demo/ amCharts - http://www.amcharts.com/stock/ There is also an interesting jQuery plugin date range slider called jQRangeSlider - http://ghusse.github.com/jQRangeSlider/stable/demo/, although adding any kind of volume trending to it ...


2

You could put the "flags" at different heights. Given enough height, the only limit on accuracy is when the width of a unit of time between events becomes less than one pixel. Flags should be the same color as their poles. Intelligent (programmatic) color selection can ensure the sequence is discernable even when the vertical lines (poles) are touching. ...


2

There are two options you can look at: convert the horizontal timeline into a vertical timeline so that users can scan it by scrolling down. While horizontal scrolling will work but its not exactly super intuitive (it would work if you had separate sections with clearly delineated titles but a continuous image might not work too well) in mobile devices and ...


2

Like a train on a journey with a few stopovers. It is late at some point but maybe will catch up on time during his journey. And you'd like to show at which station the train was late during the entire journey. This instantly reminded me of how the mobile app of the railway service here in Germany indicates if a train is on time or late. I have two ...


2

If you're going for objective performance measures, a study reported that for on-screen text, longer line lengths (approx 100+ words) supported faster reading and medium line length (55 characters) for better comprehension. However, subjective measures indicate that people prefer a more moderate line length. On columns: "a single wide column is read faster, ...


2

I think it's just a matter of minor adjustments to the spacing and alignment of the elements. These minor changes keep the essence of your design and make it feel more balanced and less cluttered.


2

Some improvements could be made: Simplicity. Remove repeating elements. Name and photo are always the same and have no meaning in the context. Typography. Break the lines in an right way. Search. Clear indicate points A and B of the route for fast search. Standards. Use standard abbreviations, min for minutes, not m. Usefulness. Add useful functionality ...


2

I would do two things. I assume that adding a new project requires some sort of form. Add to that form a section that lets the user push back later projects. Probably it should also let the user decide whether all later projects should be pushed back or just some of them - and then it's just a list with checkboxes and one field for specifying the offset. ...



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