Tag Archives: design

Why Designers Need Statistics

The proliferation of infographics online is helping to make a broad, somewhat statistically illiterate, audience aware of important data and trends.

For those designing these infographics, therefore, there is a need that they understand their process intimately–from data collection to illustration–in order to analyse it honestly and with meaning.

Through a “showcase of bad infographics”, Smashing Magazine lambasts the trend of inappropriate inforgraphics and offers an interesting essay on why designers need to be statistically literate.

The importance of statistical literacy in the Internet age is clear, but the concept is not exclusive to designers. I’d like to focus on it because designers must consider it in a way that most people do not have to: statistical literacy is more than learning the laws of statistics; it is about representations that the human mind can understand and remember.

As a designer, you get to choose those representations. Most of the time this is a positive aspect. Visual representations allow you to quickly summarize a data set or make connections that might be difficult to perceive otherwise. Unfortunately, designers too often forget that data exists for more than entertainment or aesthetics. If you design a visualization before correctly understanding the data on which it is based, you face the very real risk of summarizing incorrectly, producing faulty insights, or otherwise mangling the process of disseminating knowledge. If you do this to your audience, then you have violated an expectation of singular importance for any content creator: their expectation that you actually know what you’re talking about.

The two rules of infographic production:

  1. If it would lead to the wrong conclusions, not presenting the data at all would be better.
  2. Your project isn’t ready to be released into the wild if you’ve spent more time choosing a font than choosing your data.

via @Foomandoonian

I am reminded of this tangentially-related infographic template from FlowingData.

Information Foraging and The Fold

Even though users are now accustomed to scrolling down web pages, we know that the fold still exists and is important–and how we can design to take advantage of it.

In light of this, Jakob Nielsen has conducted research to see what prompts users use to decide whether to scroll or not (the answer: the information scent).

The implications are clear: the material that’s the most important for the users’ goals or your business goals should be above the fold. Users do look below the fold, but not nearly as much as they look above the fold.

People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

Finally, while placing the most important stuff on top, don’t forget to put a nice morsel at the very bottom.

via @zambonini

Persuasive Design Patterns

The Design with Intent toolkit is a guide to help you design systems to influence a user’s behaviour. The author, Dan Lockton, has subtitled the toolkit 101 Patterns for Influencing Behaviour Through Design.

Categorised into the following eight ‘lenses’ (ways to look at design and behaviour) the toolkit proves to be a fantastic resource for helping you persuade through design.

  • Architectural (e.g. Segmentation and Spacing: Can you divide your system up into parts, so people only use one bit at a time?)
  • Errorproofing (previously) (e.g. Choice Editing: Can you edit the choices presented to users so only the ones ou want them to have are available?)
  • Interaction (e.g. Partial Completion: Can you show that the first stage of a process has been completed already, to give users confidence to do the next?)
  • Ludic (e.g. Unpredictable Rreinforcement: What happens if you give rewards or feedback on an unpredictable schedule, so users keep playing or interacting?)
  • Perceptual (e.g. Fake Affordances: Is there anything to be gained from making something look like it works one way, while actually doing something else (or nothing at all)?)
  • Cognitive (e.g. Social Proof: Can you show people what other users like them are doing in this situation, and which choices are most popular?)
  • Machiavellian (e.g. Anchoring: Can you affect users’ expectations or assumptions by controlling the reference points they have?)
  • Security (e.g. Peerveillance: What happens if users know (or believe) that what they’re doing is visible to their peers also using the system?)

From the introduction to v0.9 of the toolkit:

You have a product, service or environment—a system—where users’ behaviour is important to it working properly (safely, efficiently), so ideally you’d like people to use it in a certain way.

Or maybe you have a system where it would be desirable to alter the way that people use it, to improve things for users, the people around them, or society as a whole.

How can you modify the design, or redesign the system, to achieve this: to influence, or change users’ behaviour?

The Language of Signs

Part five in a Slate series on signage around the world looks at the history of the green “running man” emergency exit sign and its ‘battle’ with the American red EXIT sign.

We are told how the ISO-accepted emergency exit sign is Yukio Ota’s running man, adopted in the late 1970s. Interesting are Ota’s thoughts on pictograms and their function in society on discovering that the two signs competing for ISO adoption (his and one by a Soviet designer) were remarkably similar:

Ota, like many designers of pictograms, is a bit of a romantic about the power of symbolic communication. The first real innovator in the field was Otto Neurath, who developed ISOTYPE, a system of pictograms intended to help workers between the world wars relate to Europe’s increasingly industrial economy. […] Like Neurath, Ota believes that through graphical icons, we can transcend our cultural and linguistic differences and speak to one another as global citizens. […]

The running man is thus the child of both rigorous science and starry-eyed utopianism, and it’s now in use all over the globe.

Note: The complete set of 50 “passenger/pedestrian symbols” from the AIGI have recently been released to the public and are available for free.

via @zambonini

Web Design Research Results

Some of the more enlightening/worthwhile results from a number of studies on design and usability conducted by Smashing Magazine, found via their otherwise-ordinary 10 Useful Usability Findings and Guidelines article:

General design decisions taken by the top 50 blogs (part two):

  • 92% use a fixed width layout with 56% varying the width between 951 and 1000px.
  • For body text, 90% use Verdana, Lucida Grande, Arial or Georgia with 78% using a font size between 12 and 14px.
  • Headlines are typically Arial or Georgia (52%), with a font size between 17 and 25px.
  • The front page presents excerpts of 10-20 posts in 62% of cases.
  • 50% offer links to related and/or popular posts.
  • 90% of footers contain copyright information, 40% contain links to About pages and 30% to contact information.
  • 76% provide ad-free articles.
  • 54% provide social icons under the post.
  • 66% display RSS buttons above the main layout area, while a similar percentage use the ‘standard’ RSS icon (as opposed to a text link) and employ only one RSS feed.
  • Only 5 blogs use tag clouds (10%) and 11 (22%) use pagination.
  • Nobody cares about standards (only 2 conform).

A study of the typography used on the top 50 blogs touched on some of the above and then went into more detail:

  • Sans-serif fonts are more popular for both headlines and body copy (although not by a large margin).
  • Headlines: Georgia, Arial or Helvetica between 18 and 29 pixels.
  • Body copy: Georgia, Arial, Verdana or Lucida Grande between 12 and 14 pixels.
  • Header font size ÷ Body copy font size = 1.96.
  • Line height (pixels) ÷ body copy font size (pixels) = 1.48.
  • Line length (pixels) ÷ line height (pixels) = 27.8.
  • Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
  • Optimal number of characters per line: between 55–75 (although 75–85 is more popular).
  • Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

100 unspecified sites were used for this analysis of web form structure and design (part two):

  • 93% use single-page sign-up forms.
  • 41% of sites attract visitors by explaining the benefits of registration.
  • Vertically arranged fields are preferred to horizontally arranged fields (86%).
  • 82% of sites don’t ask for e-mail confirmation, although 72% required password confirmation.
  • Only 45% of sites used the thank-you message to motivate users to proceed with exploring the services of the site.