Tag Info

Hot answers tagged

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


47

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


42

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


36

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


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


21

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


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:


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

I had a very similar problem recently, and did some user testing on it. The main thing that came out of it was that we should avoid colours that have a common meaning. So yellow was a bad option, and green represented 'good', not 'acceptable'. In the end we used grey as the neutral background colour, blue as the progress for 'expectation'; green as ...


10

From a UX perspective, there is no reason that the sum has to be 100. You may be thinking in terms of percentages, but it is trivial to scale them up or down to make the net effect 100. What usually matters in weighting is the weight of a single item relative to the total weight. You can easily calculate this, so there is no need to burden a user with ...


10

I like the solution by @DesignerGuy which aim to give visual cue that something is wrong coupled with smaller textual footnote to describe the status. Websites like Kickstarter takes similar approach when it comes to indicate funding progress vs goal. Regardless of your choice, IMHO progress bar is not the best way to accurately depict ongoing process ...


9

Make the box big enough to contain any likely price. If your app has prices that might go up to six figures, make the price box big enough to take a six figure price. Do this even if you have to change the layout, even if real estate is limited and you have to sacrifice something else to make room for it. Don't use "K" or any other abbreviation to try to ...


9

As @DA01 pointed, there should be some visual difference to perceive statistics data better. It could be something like pictured. The advantage is you didn't break the table structure, no additional columns needed.


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

I think its better to leave the empty space as it is. Looking at the second graph, its obviously hard for a user to understand whether the blue ones are the fully filled or the green ones.. With the first one, its easy to understand how much data is there or not. But if you want to give a color in the empty space, i suggest you go for a transparent red.It ...


8

If you use a progress bar, I would do it like this Use color to communicate that they have exceeded their limit. download bmml source – Wireframes created with Balsamiq Mockups • Pro: Clearly communicates they are over their limit • Con: Doesn't visually communicate the weight of how much they are over. All in all, the main goal is to get ...


8

I've encountered this exact issue myself in a previous project and there were a few main things we decided on: Time—being continuous—should be shown as such, regardless of the fluctuations in local times In this case, your third example violates this requirement. All times should be correct so they can be correlated to real-life experiences e.g. "Why was ...


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 think the best way to represent it is to...not represent it and let the work done speaks for itself. The association between the skills and the percentage cannot convey the intended message, it is wrong from a semantic point of view: knowing a tool doesn't make the person good/great at the job and "knowing" 85% of Graphic Design would be simply ...


6

Often, role-laying games has encountered a similar problem. The player has to balance the limited character-points between the different skills. They sometimes solve this with scroll bars, or spin-buttons. But the real magic (pun intended) is when allocating more point (or percentage) to one item automatically draws out points from the other items. This ...


6

You could compromise on a mouse over for all digits (if that's an option), or you could make the trailing digits smaller / slimmer (if you have the resolution). I tried with Calibri + Arial narrow, this doesn't buy you much: (FWIW when using 'k' I'd use a small one, it distinguishes better from the digits and is SI-Correct. no such luck with 'M for ...


6

Is the size of the box a limitation as was asked? The only reason I ask this is due to the fact that you can probably change the size of the box to the width of the largest price you have and set it as a fixed width for the box. Then center the price inside the box and you'll know that no other prices can exceed the width because you've buffered it using the ...


6

For starters, you are treating every row the same visually (zebra striped, which is another topic of debate...) Given that the line items are different than the rows that address the line items as a whole, I'd suggest some sort of visual separator between the two types of rows...perhaps a horizontal line, a change in background colors, a change in type ...


6

Find the story in the data--the story that your audience needs and wants to hear. (If the data is boring to you then you haven't found your story yet.) Some questions to help define your purpose: Why does this audience need to know basic info regarding web design/etc.? What will they do with the information? What will they take home to their desk? What ...


6

The table is not organized in proper way, so you are trying to overcome this issue with your options. The problems are: Established reading pattern (by rows) makes it hard to distinguish the number (83%) as subtotal. It is perceived as normal row rather than subtotal one. Placing missed items info within the table is a logic error. The format of this row ...



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