Hot answers tagged visual-design
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
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 ...
14
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. ...
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 ...
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»
8
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 ...
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 ...
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
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 ...
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
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, ...
4
This University of Melbourne study found a correlation between "attractive" design and trust. They found that users are starting to interact with websites in much the same way that they interact with people, and that predictable biases start to emerge.
What they also found was that while a user might trust a website more if it is attractive, this does not ...
4
Google and Apple also took the approach that users wanted to do 1 thing with their product, and made that 1 entry and 1 control to do it.
So, as per Yosef ( and Krug, of course ) take stuff away until it becomes a problem, then get round the problem, and keep taking stuff away, until you cannot get round the problem. And start with a focus of "what do ...
4
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 ...
4
Interesting and important question. I had a related thought on my question Mirror top navigation order between left to right-languages and right to left-languages?, where you actually should mirror content, and not just translate navigation on a multi-lingual site.
On colors there are some considerations to do for white and red, as Christian Arno explains:
...
4
In a broad sense, I can safely say this is certainly not the case. You're on to a little something marketing-wise, but first I want to make it clear there's plenty of great visual design that lots of everyday people are hardly "turned off" by.
Look at the major operating systems; OSX, Windows 7 and iOS are extremely visually polished. iOS and it's fancy ...
4
There are two main eye patterns for web design.
The first: F-Shaped Reading Pattern
The second: ZigZag/Triangle Reading Pattern
Deisngs that fit into one of these two will work well with user. However if you are looking to get even more creative you can try out using the Golden Ratio to design a webpage, specifically placing content in the golden spiral ...
4
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 ...
4
I guess I am really lucky to have the services of an excellent technical writer to handle all the documentation for the manuals. The process she follows is as follows:
Provide a high level screenshot
Provide annotations on the screenshot using numbers or callouts
Provide a table which specifies what annotation or call out does.
The thing to note here is ...
3
As far as creating a layout, start with blank pages. Ask yourself "What information needs to be on this page?" Think what NEEDS to be there, then think of how you want to interact with it in that setting. This will help you decide what kind of controls need to be present, which can lead to a (rudimentary) layout that you can finetune once it's in place.
As ...
Only top voted, non community-wiki answers of a minimum length are eligible
