Tag Info

Hot answers tagged

119

You are right to ask this question. It really depends on who your users are. In labor-intensive environments, users are often very familiar with the HH:MM notation for duration, so it's OK to use that format. But, I agree that even for those environments easy to get it confused with time. Is there a better way? Let's start with the existing solution. ...


24

This disparity is likely due to a variety of factors: It's not clear exactly how many colors humans can see. For example, the table at the top of this page about the number of colors distinguishable by the human eye cites various academic papers as saying anything from "more than 100,000" to "roughly 10 million." In any case, the number of colors visible ...


23

A plus sign is sometimes prefixed to the time format indicate offset. It can also imply duration. For example: +4:00 +10:00 +4:00 +6:00 +0:00 +6:00


19

1) Read about Gestalt principles, especially the principles of grouping. This will give you some insight on how the brain will interpret the visual organization of your page. 2) Read Luke Wroblewskis article on web form design (or his book). This will teach you how to create functional web forms.


19

Another possibility would be to add a "prime" mark at the end, as is sometimes (often in race times) used. Minutes and seconds would look like 4′33″, so a single prime is minutes, so use 1:30′ for an hour and a half.


17

Since you defined your question more clearly in the comments as relating to visual design, let me approach my answer from that perspective. Visual design as I tend to define it relates to how graphic design principles are used in interface design to support clarity, consistency, and simplicity in order to create UIs that are easy and enjoyable to use. ...


17

If you want to avoid the simple and obvious solutions: place signs above the cubicles reminding people to be quiet encourage cubicle dwellers to discourage loud behavior through constant reminders ("Shh!" or "Please keep it down") I suspect the only cultural design cues you could rely on are reverence (church, monastery) or respect (library, courtroom, ...


15

You can also show the minutes with a smaller font. On stopwatches, this is done for the seconds or milliseconds. download bmml source – Wireframes created with Balsamiq Mockups


14

Print full-size images of people at work similar to what sometimes happens with empty shop hoardings. This would be effective because it's a visual reminder that people are behind the blank cubicle walls whilst preserving the privacy of those working and preventing them from being further distracted (if you had see-through cubicle walls). Some alterations ...


14

You could use decimals. So for example: 90 minutes would be 1.5 hours instead of 1:30 3 hours and 45 minutes would be 3.75 instead of 3:45 This format is highly scannable and makes it easier to sum the values in your head.


13

The international standard ISO 8601 would suggest P04:00 or P4H. Its part on periods, durations or time spans and repetitions, though, is hardly ever followed – and you aren’t using its date format in the first place. JFTR Please note that 4h00 is not unambiguous, since some people tend to write clock times that way. 4h00m or 4h00min would be better. ...


12

The reason that Apple's and Google's products look the way they do is because they took design decisions. Instead of looking for features to add, they are looking for features to remove. As this is a very general question, all I can offer is a very general answer. Do your users need so many fields? - I can't imagine a case in which one single information ...


12

You're incorrectly assuming that the distribution of those colors over the gamut matches the human eye. The distribution of the 16 million colors is chosen for technical simplicity, ignoring even the difference in sensitivity for red and green. For the same reason, there's a sizeable part of the gamut which many monitors can't display at all (15% is usual) ...


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.


12

Generally it's not a great idea to present 'dense' 3D data. But let's say this really needs to be done. In this case the dimensions you're trying to present are: Skillset (30+ categories) x Competence (4 categories including none) x Capacity (TBD). The skillset category makes the data dense. So with respect to the other answerer, a spider chart will ...


12

Consider the following: download bmml source – Wireframes created with Balsamiq Mockups Bullet graphs provide a condense and clear way of comparing data when you have a list of skills where you need to compare between "target" and "actual". The 100% line makes it very easy to tell whether you have enough resources or not. There's also no need ...


11

I believe this trend came together with the idea of separation of content and presentation. Icons are part of the chrome/ui and should not be too conspicuous in order not to compete with the content itself. Another reason may be that it's easier to attract attention to an element when it is the only one with a colourful icon, and everything else is ...


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

I thoroughly recommend reading the book Universal principles of design. It covers 125 design principles (in the current revision, 100 in the previous one), looking not only at software and web design but covering a wide range of design areas, although all are good to be aware of. Each topic has a single page of description, and a single page of visual ...


9

Plenty of good arguments and research here: Myth #25: Aesthetics are not important if you have good usability My favorite quote from this article: «A study on the role of aesthetics concludes that, though attractive things may not score higher in performance, people perceive attractive things as more usable»


9

For passive display, an asterisk behind the field label has become the common indicator for required fields. It's fine for an administrative interface, too, though I would keep the notification: Name * Age * Fetish SSN *fields are required For modifying that, A list of fields, with a checkbox column "required" seems straightforward (if a ...


8

I wouldn't agree that 'polished' interfaces make users shy away - after all, there's plenty of research to suggest users perceive more attractive interfaces as more usable - but there are certain sorts of aesthetics that don't fit certain types of market. A great example of this is the 'discount / value' segment. These groups tend to use a direct ...


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


7

They often look good, regardless of the layout, so you can keep them if the layout changes. You can combine icons from different sources (The Noun Project, symbol fonts, existing icons used on platforms like the iPhone, etc.), since they mostly look similar. It's easy to do your own. Personally, I think it's generally a bad trend. Our brains process color ...


7

I'm not sure about affective (did you mean "effective"?), but we can definitely identify a common, even standard, design pattern for one-product websites. Here are a few examples: Square, Doxie, Feedly, Highlight, Dollar Shave Club. As far as I understand, the main principles for one-product websites are: Product in front - These websites use big images ...


7

I see two problems with this: causing user astonishment and taking away choice. Astonishment: A user who resizes a window expects to see more or less content (depending on direction) as a result of this. Sites that behave as you describe are rare. This is not the behavior the user expects. Taking away choice: users have reasons for choosing the browser ...


7

I think the problem is not just down to the whitespace itself (whitespace is good), but the alignment and spacing of the items in the infowindow. In particular the rather raggedy right hand side and also around the title area where there is also a little more whitespace than necessary in proportion to the rest of the window. You could try layout out the ...


7

Tackling the competency and capacity in a single visualization may be a tall order, but I think a spider/radar graph is a good, tested solution for visualizing competency. http://www.one45.com/wordpress/assets/Best-practices-competency-spider-graphs-radar-plots.pdf As the above link mentions, this representation is best for quickly communicating skill ...


6

My suggestion is not to do this. Hue doesn't have an inherent order (ROYGBIV is surprisingly non-intuitive especially when you have to compare across the rainbow). "Is teal before or after forest green?" And individual colors communicate entirely the wrong meaning: e.g., when the project is 'red' does that mean it's behind? or in trouble? or blocked? Not ...


6

I would go for a variation on JohnGB's answer. Instead of 'Young' and 'Old' which are subjective, use real date ranges. If I select 30-35 (a 5 year range) as my ideal date range, the middle green box text should be '30-35'. Using 'Match' or '✔' instead assumes I can remember my ideal date range and that I understand that a '✔' represents that. On either ...



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