Hot answers tagged

79

Don Norman's "Why we Love (or Hate) Everyday Things" opens with an account of a famous study on this, conducted by N. Tractinsky in 1999. He tested four different designs of an ATM machine, where each could have either good or bad usability, and good or bad aesthetics (a 2x2 research design). He reported that the degree of system's aesthetics affected ...


67

Yes, visual design affects user experience Here's a common meal with only one visual difference. It's enough to drive a dramatically different user experience: There is more formal literature on this topic, but since others have already provided citations, I will add one more a simple illustration. The following two forms are almost identical except for ...


30

There is enough ambiguity here that labeling and context are necessary It doesn't matter whether 30%, 50% or 70% of users think this is male (vs female or gender-neutral). There is enough ambiguity here that the infographic will fail to communicate gender effectively so context and labeling are necessary to make it effective. This Nielsen article ...


22

You could start by reading interaction-design.org's entry, by Noam Tractinsky, on visual aesthetics. Remember also to read Jeffrey Bardzell's comments on the entry. Then you could check out Tractinsky's seminal What is beautiful is usable: A multivariate analysis of covariance revealed that the degree of system's aesthetics affected the post-use ...


16

I agree with most of the points that have been made so far, so I'll just add one that hasn't been touched on yet. One of the things often overlooked about visual design is the impact that it has on the user's trust. If you've ever gone to a small-business website that has been constructed using one of the many. template-based, cheap, hosting websites, ...


16

There were scientific studies in aviation, that show, that visual aesthetics of control dashboards in plane's cockpit affects effectiveness of flight operations. So visually appealing design affects usability. But what was interesting, that when the system was too beautiful for operators, they perceived it as too intelligent and ideal, so the effectiveness ...


10

Just label it! The beauty of donut charts is the ability to include explanatory and informative labels. You have the informative part there, but you've left out the explanation. Try something like this:


10

I think a problem with a generic waveform is that it will be "moving" and indicating sound when there is none (the audio is playing a silent section) and this disconnect would be bothersome (to me, at least). Something like a spinning record would be better. I actually faced this problem a few years ago, I wanted a clear and moving indicator that audio was ...


9

My suggestion is about UX, rather than on UI and visualization. Your job is to solve a problem, not make a picture. This is from the Three charts are all I need, as well as the following quote: You can spend days, weeks, or even months working on visualizations of data, but does that benefit the business most? In most cases, a simple visualization will ...


8

Something I do which I believe is more relevant, is instead of using ambiguous percentages I use years, relative to my career. I still use a sort of 'bar graph', but the numbers have context in relation to the length of time I've been working: The numbers across the top are the years of my career (2000 - 2015) and each skill is represented as a ...


8

As others have suggested, I'd suggest using logarithmic scales. I recreated your chart as close as possible with logarithmic scales using ZingChart, a JavaScript charting library. There are no unevenly split grid lines and there are value boxes over each of the bars to show their value, making it easier to read. You can see and interact with it here. ...


7

Gender neutral icons are a unaddressed issue within modern design patterns. The iconization of digital interfaces has occurred out of screen real estate with insufficient thought applied to user/cultural interpretation. There is some good work going on at the noun project to address this. https://thenounproject.com/term/gender-neutral/132954/ Notice ...


7

While there is nothing that specifically makes this icon of a person male or female, there is a tendency in our current culture to assume a "generic" image of a person is male unless it has various markers to mark it as specifically female. To play off the other person's answer where they gave several answers that implied the image could represent "both ...


7

You have more or less answered the first question. Don't confuse users is a pretty good rule. You might find that there is stylised diagram that shows streaming quality and state but avoid making it look like some it isn't. What do the users actually want? I suspect that a cool looking waveform is delightful for the first few moments; but soon fades from ...


7

color brewer is designed for maps but it will give you colours that are optimised to be as differentiable as possible. It has a maximum of 12 colour classes


6

I would go ahead and assume this donut chart wouldn't be the only one displayed, but will be part of a row(s) full of charts and visual graphs. In this case, I would absolutely organize the text in a readable data structure - Label top, Data bottom. When visualizing data as such, it is better practice to first give them the key for the data(which normally ...


6

Your question is about information design. First, if this topic interests you greatly, I recommend you find The visual display of quantitative information by Tufte. His books are beautifully illustrated but expensive—so check your local library first or get your employer to buy you this book. Tufte will get you thinking about the design of charts and graphs ...


6

Examples 1-3 could be individually plotted using a heat map. Yes, it may be reasonable if you have high resolution data. In this representation heat map is an invaluable tool (besides opinable choice of color pair): However if you do not have high resolution data then an heat map is not the only available solution. Take for example this low-res map: ...


6

How about discontinuing the y-axis, don't remember what the technique is called so couldn't find any image. It involves using the saw line cutting the y-axis so that below the saw line, in your case, could be values from 0 to 100 and above from 500 upwards. Grid lines should be differenty spaced above and below the saw line. edit: Here is an example of ...


6

Oooh, pretty. Yeah, well, hairballs (this kind of huge graphs you have shown) are pretty much useless because unreadable. Genomicists and bioinformaticians have discovered this early in the days because their datasets are big enough to demonstrate the issue. And no, adding 3D will not help the cause. The solution for hairballs are hive plots. Also ...


5

What I feel is that you are trying to design an KPI (Key Performance Indicators) dashboard. Each element regarding the positive and negative results can be communicated with the colors like green, orange and red. However,these color codes are already embedded to UI elements of famous solutions 2. Your solution for dashboard needs; Clear verbal ...


5

Maintain grid alignment For complex flows and hierarchies, grid alignment is crucial for calming the complexity and providing a sense of order to the user. If you get the grid layout correct, you can de-emphasize the arrows because the user really only has to look at the arrows once to understand how to navigate the flow (so you don't have to make them ...


5

First picky point: Infographics aren't the same as visualisations. https://eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization The point of visualisation is to shift processing from the cognitive to the perceptual - i.e. don't think about it, just see it. There's hundreds of papers that compare different visualisations in user ...


4

There is a jquery plugin to do this, called QueryBuilder, which do this in an interesting way : http://mistic100.github.io/jQuery-QueryBuilder/


4

Displaying no logo for a cinema breaks consistency of the UI. Not necessarily, it's not so uncommon unless image is also used to keep layout in-place (it's, for example, why we have fake avatars in GMail for Android). In your case it's not an issue but... Displaying a logo only for certain cinemas can put other cinemas at an disadvantage. It's ...


4

Displaying a logo only for certain cinemas can put other cinemas at an disadvantage Well, they don't have a logo. They're already at a disadvantage doing business in general. (This would be a great point to upsell your firm's services and bring in some branding folks. :) Displaying a generic logo can misidentify/misrepresent a cinema I'd agree. ...


4

I think this would be perfectly possible with a stylized waveform that is carefully designed to not look real. If the shape is a bit cartoonlike and simplified, and the movement is pretty regular, I don't think it will confuse anyone. Also, the consequences of being confused are not that significant in this case. If the user looks at a waveform and at ...


4

Thing is there is no type of data vis that works well for data that is dispersed too much. Hence the solution will depend not on the type of graph but on the application of the logarithmic scale to the data (not the original data you display, but the data you feed to the datavis component). Log scale will eliminate the dispersion. Here is my detailed answer ...


4

I am agreeing mostly to what others said before. Being responsible for team growth myself, I tend to not look at the "how good is she/he with Photoshop?" part. I am ASSUMING that if you apply to a graphics/UI/UX job, that you know how that tool works. If somebody puts a lot of focus on the day-to-day-tools she can use, I assume that she probably just ...


4

First of all, are all the fields provided in the tool-tip necessary? Is there any chance that the number of fields be reduced? If yes, keep them concise. On the other hand, if all the fields are necessary. Let's see it like this: For link1, the user sees all the fields in the tool-tip. For link 2, there is some information missing (which means that the ...



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