Tag Info

Hot answers tagged

20

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


16

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.


15

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


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.


10

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

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


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

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

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


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


6

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


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


6

You're essentially asking how to design an pamphlet to interrupt someone's attention and get them to read something that they aren't interested in. The answer is that you shouldn't. It's poor UX. If you want people to read a pamphlet, however there are a few things that you can do (outside of the design of the pamphlet) to increase that possibility: ...


6

The answer to your question depends on context (that means A/B testing*) : 1) Color of the background and surrounding buttons You want the call to action button to out-stand so really it is more the text displayed, contrast, size and style than the colors that are going to make a difference. As a rule you can consider that the bigger the button less ...


6

Rather than trying to display this audit trail in a single, very large and complicated diagram, consider presenting it as a log with a simple diagram for each change. In my wireframe below, I am showing the history of a single task. For each record, I am showing a brief description of who did what and then illustrating the flow between steps with a basic ...


5

I believe this trend was spurred by the initial release of Google Chrome. The name "Chrome" is ironic because Google's goal was to use less chrome (anything but content) than all other browsers. Its tab would act as the window's title Its menu bar is gone It combines the address bar with search Google Chrome Mozilla Firefox 3 Notice how Google ...


5

What about something like this - http://i.stack.imgur.com/6uyfC.png ? Use an interaction model that users expect; treat the missing words as a control panel that sits above the content Change the colour from grey to yellow (or any colour), draw a relationship between interaction and result Background colour can help separate control and content Thin stroke ...


5

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


5

The images on the right would indicate to me an inactive state or some sort of sub-dominance to those to the left; it doesn't indicate that it can slide. That is my subjective opinion of course, but generally convention is that inactive states are greyed or faded and that's the metaphor you're messing with here. Be careful. Alternatives: Increase by 2 or 3 ...


5

It depends on the site and the type of interactions that are appropriate. Like ChrisF, my first instinct was to suggest using a black-and-white colour scheme for a deceased user. This is appropriately sombre, but it also suggests a 'disabled' account - we tend to use greys on interfaces to suggest that something can't be interacted with. Whilst this is ...


5

The rationale on high contrast is just that - high contrast. People with weak eyesight can more easily distinguish between elements and read the text if there is a well-designed black and white theme. Usually this also comes with the option to enlarge text and elements. Sites with low contrast can be difficult to read for people with low vision. Some ...


5

Not really. Frequency is one issue - but eye tracking is all about eye saccades. This is a mild oversimplification - hopefully folk won't mind. Hold your arm out and stick your thumb up. The size of top half of your thumb is roughly the size of the bit of your visual field that sees in 'high res' - the fovea. It takes up less than 1% of the retina area, ...


5

Is the reality that most UX designers/researchers start in visual/graphic/web design and move into UX? This varies a lot from market to market. In Minneapolis, where I currently work, the vast majority of "UX designers" have backgrounds in visual design. But: As much as anything, this is because there are very few people in this market with a ...


5

I would suggest when the user goes over their alloted bandwidth that you fill the bar up completely and then change the color of the filling to red (which inherently indicates danger!). Next to this text, I would place the percentage of bandwidth used in bold (and red if you fancy) and then additionally add a (?) next to the percentage with the styling of a ...



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