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


66

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


21

Your graphic seems to require far too much information to describe what it means. Github does this through a table of Longest Streak next to Current Streak. It is easier to understand with just text. To keep it compact you could remove everything but the most important information: download bmml source – Wireframes created with Balsamiq ...


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


15

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


14

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


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


10

**Here are two alternative ways to represent ratios ** Using a high watermark line. This allows them to contrast their all time best with the current streak while also affording them to see some minor trends in their performance. A risk is them not understanding the high watermark which a screen overlay the first time might help them out. Apples health ...


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


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

If the text preferences are important, you should not use example text in a different (which includes fictive) language. Languages have different characteristics, and what looks fine for a paragraph of "Lorem ipsum …" is not necessarily ideal for text in other languages. So you should show text in the language the user is setting the preferences for. You ...


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


7

Choose a text generator that suits your domain and use it instead. Lorem ain't good for layout/typography, it was never meant to (see other answers for why it's not, unless you are in a real printing business, Gutenberg&co-style). If you're after font/typography, use a pangram for the language you are after (hello localization!), like @ratchetfreak said ...


7

Take a page from video games and treat your personal best streak as a high score. Classic games like Pac-Man show your high score at all times as a goal to reach, and when you achieve it you get to see both numbers change at the same time to reinforce the fact that each point is setting a new record. More recently, Diablo 3 offers increasingly ...


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

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

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

Is there a reason you're doing a ratio of "current streak" to "longest streak"? I don't know why that would be helpful to the user and encourage them to continue with their habit change. Do you want to go a more aspirational route? The user is either going to be 1) In the middle of creating their longest streak or 2) working towards meeting their longest ...


6

So there are two approaches coming from a cartographic standpoint that could work in your situation, but it depends on what you want the user to do with these markers. The first involves the user using these as just a visual aid meaning they would have no interactivity and be just static images to inform the user. In this case, I would a pie chart marker ...


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

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

Here is another option that might work depending on the situation. It has the added benefit of not needing to be localized into different languages... credit: Facebook placeholder loading card



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