Tim's shared items in Google Reader

How to Choose a Typeface

2011-03-24T13:16:57Z

Choosing a typeface can be tricky. The beauty and complexity of type, combined with an inexhaustible supply of options to evaluate, can make your head spin. But don’t be baffled — and don’t despair. While there are no easy-to-follow rules on how best to choose a typeface, there are many tried-and-true principles you can quickly learn and apply to make an appropriate typeface choice. If you work systematically through the options below, you’ll have a winning typeface choice in no time. Let’s get started.

What Is Your Goal?

The first thing you have to do in order to choose a typeface is form a strong impression in your mind about how you want your audience to react to the text. This is your goal, and it will guide the process. You might provide this impression, or it might be dictated to you by your client, or it may be determined by your audience. Whatever the case, your choice of typeface needs to strike a good combination of both legibility and readability, while remaining appropriate for the audience and the message. Each of these characteristics requires some degree of independent consideration. As you may already know from experience, it’s easy to go about this the wrong way and get overwhelmed. This problem can be compounded as a design evolves.

Perhaps the hardest part of breaking down the typeface selection process is understanding which parts are more subjective and which parts are more objective. After reading and digesting your client’s text, it is easier to start with the objective aspects of typeface selection because they — by default — make subjective decisions for us. There are no fixed positions on the spectrum from subjective to objective. However, we know that legibility is more easily quantifiable than a mood. Let’s start with the two most objective attributes — legibility and readability.

Legibility

It may seem at first glance that legibility and readability are the same thing, but they are not. Legibility refers to the design of the typeface, as in the width of the strokes, whether or not it has serifs, the presence of novel type design elements etc. It is easy to tell one letterform from another in a legible typeface. For instance, decorative typefaces have low legibility because they are primarily meant to be seen at a glance, rather than read at length. Conversely, typefaces designed for novels or newspapers have very high legibility. You need to design a specific, overall legibility based on the function of the text.

Consider this example where the left block of text is set in Tobin Tax, a decorative serif typeface. Compare it to the same text set in Sabon, a classic and highly-legible serif typeface. Where does your typeface choice fall between these two extremes?

Quick tips for great legibility:

Choose typefaces with conventional letterforms.
Letterforms composed of unique shapes, artistic deformations, excessive ornamentation or other novel design elements cause the reader to have to process what they are looking at first, instead of just taking in the message. Novelty always comes at the cost of immediate comprehension.
Choose typefaces with generous spacing.
Tight tracking causes the eye to fill in visual gaps between the various shapes that make up different letterforms, thus slowing down the time it takes to both recognize letterforms and word and sentence structures. Generous spacing allows the eyes to proceed as fast as the cognitive skills of the reader will permit.
Choose typefaces with a tall x-height.
A “short” x-height decreases legibility of certain letters. The apertures, or openings, of similar lowercase letters like “c” and “e” are distinguished with greater ease if the x-height is generous.
Please notice: The x-height shouldn’t be “high”. The font size, weight and width must just be chosen according to the x-height of the font. Sure, at first glance one typeface with a larger x-height might look more legible than another, but the the latter is just set too small (or too bold or too condended). In addition, a large x-height only helps a few letters like e, s, a (with double-storey shape). Other characters (with descenders, diacritical marks) suffer from a larger x-height. (Thanks to Ralf Herrmann for clarification!)

Readability

How your typeface is set, combined with the basic legibility of the typeface, yields a certain level of readability. Readability is the dynamic interaction of the type style, size, tracking, leading, color and other properties all combined into one overall impression. They add up to a certain typographic style which has a quantifiable degree of readability. For instance, you could use a style that has an intentionally low readability that is part of the message. Or you could focus on designing a high readability because your message is complicated, and you don’t want your type style to hinder the audiences’ understanding in any way. In most cases, communication comes before style, so resolve readability first.

Let’s take our previous example of Sabon and alter the readability. On the left, we have taken the text and decreased the font size, altered the tracking and leading, lightened the color, and set the block to full justification. It’s now a mess with unattractive text rivers. On the right, we’ve left the unaltered for an obvious comparison. Changing several independent factors, as you can see, can add up to quite a difference.

Quick tips for great readability:

Choose typefaces that were designed for the purpose you are using them for (display fonts for headlines, body copy typefaces for body copy, etc.).
Choosing a font designed for display purposes, like headlines or posters, means that it will not function very well as a body text typeface where larger quantities of text will be read. Conversely, a typeface designed for extended reading loses its impact in relation to how large it is blown up.
Align text to “right ragged” for comfortable word spacing online to avoid “rivers”.
“Force-justified” text, or hyphenless justification, always creates ugly rivers and awkward spacing which causes the reader to lose the natural flow of the text as the eye has to make various leaps and jumps to complete words and sentences. Currently, there is no proper native support for hyphenation in CSS, but you could use Hyphenator.js for a proper client-side hyphenation online.
Make sure your line height is greater than the point size of your typeface for multi-line texts.
It’s difficult for the eye to track across a line of text and stay “on track” if the lines above and below it are too close to it. Our eyes are easily confused especially when wrapping from the end of one line of text to another. How many times have you read the same line of text twice on generously-spaced lines of text? Probably once — of course if the content is easy to understand as well. Don’t make your readers work harder than they have to.

With the two most subjective factors out of the way, let’s move on to appropriateness.

Aspects of Appropriateness

Some typefaces are more suitable for a design task than others. Appropriateness is something you can learn by both experience with a typeface, and by other attributes of the typeface, including its history and original purpose. Here are four attributes of a typeface you can consider.

Design Intent

It’s very helpful to consider the design intent of the typeface. Many popular typefaces have detailed write-ups and reviews, so it’s really inexcusable to not know at least something about your choice. If a typeface was designed for signage, like Cooper Black, it probably isn’t going to work well set as the body copy of a book. That might be an obvious example, but don’t miss the subtleties in your own choices. Again, it only takes a few seconds to look something up, or flip open a decent typography book to get some basic facts, and you’ll be wiser for it.

Aesthetics

Your typeface should conform to the aesthetics expected by the audience for which the design is intended. For instance, if you are designing a piece for a bank, setting their logo or the text for an ad campaign in Souvenir might be a little too light hearted and free-spirited — not qualities one would want to associate with people who manage your money. However, the stately and stable-minded Bembo might be a better choice for this situation. The more you match the gist of the typeface to the gist of your topic, the easier success will come.

In this example, we’ve created two combinations of typefaces. The first one, Lithos and Souvenir, create an aesthetic more suited to a children’s museum than a bank. The second combination is composed of Clarendon and Bembo, which fits the topic like a well-tailored banker’s suit.

Quick tip for judging aesthetics:

Look at a typeface and write down several words the typeface “says” to you about itself, and then compare that to what your design objective for the typeface is. Do they correlate? Be convinced, after this analysis, that you have the right typeface choice. If you are not sure, it would be best to not proceed.

Mood

As you read through these factors, you’ll realize that they overlap a little. Mood, for instance is a dynamic synthesis of what you get when you consider the aesthetics of a typeface together with the readability you’ve designed into your piece, along with, of course, the perceived meaning of the text itself. For instance, with one typeface and one text you can evoke a mood of excitement or panic. The typeface itself first evokes a strong reaction, but the readability of the design and the text itself can take communication to another level.

On the example below, notice how the implied meaning of the phrase “kick back and relax” is dramatically changed by altering the typeface and readability. Mood is very powerful, and it’s a good idea to have a second set of eyes reviewing your work to make sure you don’t send the wrong message. This demonstrates that matching the basic personality of the typeface, and its readability, to the intended emotional response of the message is a sure-fire recipe for success.

Quick tip for pinpointing mood:

Think of the exact opposite of the mood you want to create and look at your work on a given design thus far. If you can’t come up with an opposite mood, it might mean you have not created a strong impression of the right mood. Remember, the opposite of neutral is neutral.

Personal Choice

Many times, a typeface just strikes you for some reason as appropriate. Your right brain knows it but your left brain can’t understand why. If you can make it work based on that alone, go for it. You would of course do well to get informed about the typefaces in your arsenal, especially if you keep using them over and over. You may discover that your use of a typeface has nothing to do with its original intent, but it can still look great.

For instance, you might like OCR-A on the cover an album design, though OCR-A was designed specifically for optical scanners so that computers can recognize the words through software. So what if computers are supposed to read it? If it fits the design intent of your project and you can pull it off, do it. Just do it well or choose another typeface.

Quick tip about personal choice

Trust your gut but make sure you can quantify, in typographic terms, aspects of your choice so that you can defend your design decisions armed with intelligent answers. You may also find that a defense of even your most subjective choice goes a long way if it’s clear you did think it out and have a reasonable rationale.
Come up with your type selection quality scale.
You might want to consider creating your personal checklist with type selection details which you can then consider and apply in your typographic choices. This would help quantify your decisions and make them comparable.

A Few Technical Considerations

Don’t overlook the obvious. For instance, if your design job is going to include work using a lot of numbers, you’ll want to make sure you choose a typeface that has the kinds of numbers you want to use. Some typefaces use Old Style, or lowercase numbers. Other typefaces use Lining, or uppercase numbers.

You might be persuaded that large spreadsheets of numbers for technical work are easier to read with lining style numbers because they don’t use the lowercase descenders and are more even on the eye when used in large quantities. But if your design features a lot of up-and-close with over-sized numbers, the Old Style numbers might be infinitely more pleasant. Again, the mood you want to convey plays a role in this choice: Old Style numbers look… old. That could be good in the right context but not so good in the wrong one.

To add to this list, you might consider if a typeface has a full set of ligatures and if it contains true small cap characters. Missing ligatures can look unattractive at large sizes. Fake small caps usually look odd because stroke widths aren’t compensated for. In short, it’s best to choose a typeface that is as complete as possible. And if you choose a free typeface, you’ll find that it is often these critical “extras” that are missing. Make sure that the free typefaces have exactly the features you need for your design and that they are licenced for the work you are doing.

Tips for Choosing a Typeface

Let’s pull it all together with some pragmatic ways to get your typeface choice made. You might want to try these tips, which many designers use to their advantage in one way or another. Be the beneficiary of their wisdom and experience.

1. Plan Your Hierarchy

First, make sure you have a good grasp of the content and typographic hierarchy your design job will dictate. You may realize, after a thorough analysis, you need five fonts (not typefaces) to cover your various heading, sub-headings and call-outs. Can your typeface provide enough variation with bolds, italics and small caps? Or do you need two typefaces to create more distinction in the hierarchy? Three? Use a mind-mapping tool or make a traditional outline to see as much as you can before you start choosing typefaces. Consider this example of a bad and a good hierarchy using the same text. Notice the role white space plays in the hierarchy, too. Use as many levels as you need as long as there is distinction and clear purpose in your choices.

2. Consider What Others Have Done Already

You’ll find that the designers before you have already figured out ways to use the typefaces you are considering, so you don’t need to reinvent the wheel. Look around, and carefully consider what others have done already. The site Fonts In Use, for example, features typographic choices made by professional designers in various industries. And don’t dismiss familiarity when you come across it in other designers’ work. Often times “boring” and “familiar” are your best friends when it comes to choosing type. There are good reasons some typefaces get used a lot for certain purposes — they just work, and work really well.

3. Experiment the Easy Way

Here are some tips to help you experiment quickly and thoughtfully with your typeface choices:

Set up style sheets whether you are designing for the Web or print, which speeds up the flow of ideas because they are easy to swap out. You could also use Web Font Specimen for this purpose.
Play with the hierarchy by changing the size of different elements to create and release tension.
Judge the results and change something, but only change one thing at a time.
Get a second or third opinion. You might have missed the obvious.

4. Avoid Anachronisms

For instance, if you don’t know the particular history of typeface, you could end up using it in a way that makes you look a little silly. What if you picked Trajan to illustrate the title graphics of an article about ancient Greece? That would be an unintended anachronism since Greece pre-dates Rome, and Trajan was a Roman emperor. The typeface Trajan is taken from “Trajan’s Column”, which is a monument to a military victory around the year 100 A.D. Just having to answer “Trajan” to the question “What font did you set the cover of this book about Ancient Greece in?” will make you squirm just a little. It pays to double check. And sometimes it pays to be neutral by choosing something safe for an academic topic, like Arno.

5. Avoid Trite Correlations

If you apply this rule rigorously, you are unequivocally guaranteed to retire from your design career as Typographer Emeritus. Let’s just examine this principle by example and let the lessons teach themselves:

Don’t use Papyrus just because your topic is “ancient” in some way, especially if it’s about Ancient Egypt. (Better yet, don’t use Papyrus at all)
Don’t use Comic Sans just because your topic is humorous. (Better yet, don’t use Comic Sans at all)
Don’t use Lithos just because your topic is about Greek restaurants.
Don’t use Futura just because your topic deals with “the future”.

Does this leave room for typefaces with built-in “effects”? Yes, indeed. Just don’t do something so blatantly obvious it took you less than one second to think of it. The tell tale sign you are making a trite correlation is that you have a collection of decorative fonts you frequently peruse in your font manager while pining away for a topic to shoehorn them into. If you have not avoided these kinds of trite correlations in the past, it’s OK. Don’t live in the past, but don’t do it again.

6. Consider an Extended Type Family

If your project is ongoing and diverse, it would be wise to consider investing in a quality extended type family upfront. Why not kill all the birds you can find with one stone? When you choose an extended type family, you get the benefits of having had the type designer do more use-case scenarios than you will likely ever be faced with. Extended type families usually have serif and sans serif versions, along with multiple weights, full sets of special characters and ligatures etc., which ensure that you’ll be able to find the right solution for just about every typographic challenge you could imagine. An extended type family will also give you a very uniform, orderly mood and aesthetic, which may or may not be what you want.

7. Stick With the Classic Combinations

When you are stuck, go with the tried and true, especially if your deadline is tight. If you choose a neutral serif and sans serif combination, you might lose a little “edge”, but at least the integrity of your design and message won’t suffer. When is the last time you called on Caslon or Univers and regretted it? Face it: you’ll never get ITC Avant Garde Gothic and Trebuchet MS to cooperate. Instead, consult well respected typography-related resources. See what professional designers agree on. It’s likely you already have some of the classics you’ll find referenced. Perhaps those same fonts are complete and are of high quality, which makes choosing them in a pinch that much easier. You will fail them before they fail you.

8. Use a Limited Palette

You’ll find many opinions on this, but it’s also not a bad idea to consider a limited palette of typefaces you like best from lists of the most popular type of all time. They are the most popular for a reason. Some designers have gone a whole career using less than twenty typefaces most of the time. For instance, you could use the FontShop’s 100 Best Typefaces (in German, also available as a PDF) as a reference. To that list, you should try to add a few newer, and not just classic, typefaces. While you are at it, consider adding one or two unique but highly-versatile modern typefaces from independent foundries, and not just the larger established ones that might be more familiar.

In this example, we’ve combined Bembo with various fonts from Haptic Pro, a typeface family originally designed 2008 by Henning Hartmut Skibbe. Something old and something new, and you can go a long way with a style all your own:

Final Tip: Break The Rules

Break the rules but only after you can name some of them. Knowing the basics described in this article will help you make intelligent choices about what rules to break and how to break them. You might have to go through ninety-nine bad ideas to get to that one great idea, but the process is fun. Remember: knowledge of type gives you the power to express yourself more creatively with it. To “push the envelope”, as the cliché goes, you first need to know what and where the edges are.

Further Resources

You may be interested in the following related articles and resources:

The non-typographer’s guide to practical typeface selection by Cameron Moll
On Choosing Type: First Principles by John Boardley / I Love Typography
Choosing & Using Type by Daniel Will-Harris (old but excellent article).
Technical Web Typography: Guidelines and Techniques by Harry Roberts
“What Font Should I Use?”: Five Principles for Choosing and Using Typefaces by Dan Mayer
Best Practices of Combining Typefaces by Douglas Bonneville

Why User Experience Cannot Be Designed

2011-03-15T15:32:19Z

A lot of designers seem to be talking about user experience (UX) these days. We’re supposed to delight our users, even provide them with magic, so that they love our websites, apps and start-ups. User experience is a very blurry concept. Consequently, many people use the term incorrectly. Furthermore, many designers seem to have a firm (and often unrealistic) belief in how they can craft the user experience of their product. However, UX depends not only on how something is designed, but also other aspects. In this article, I will try to clarify why UX cannot be designed.

Heterogeneous Interpretations of UX

I recently visited the elegant website of a design agency. The website looked great, and the agency has been showcased several times. I am sure it delivers high-quality products. But when it presents its UX work, the agency talks about UX as if it were equal to information architecture (IA): site maps, wireframes and all that. This may not be fundamentally wrong, but it narrows UX to something less than what it really is.

The perception might not be representative of our industry, but it illustrates that UX is perceived in different ways and that it is sometimes used as a buzzword for usability (for more, see Hans-Christian Jetter and Jens Gerken’s article “A simplified model of user experience for practical application”). But UX is not only about human-computer interaction (HCI), usability or IA, albeit usability probably is the most important factor that shapes UX.

Some research indicates that perceptions of UX are different. Still, everyone tends to agree that UX takes a broader approach to communication between computer and human than traditional HCI (see Effie Lai-Chong Law et al’s article “Understanding, scoping and defining user experience: a survey approach”). Whereas HCI is concerned with task solution, final goals and achievements, UX goes beyond these. UX takes other aspects into consideration as well, such as emotional, hedonic, aesthetic, affective and experiential variables. Usability in general can be measured, but many of the other variables integral to UX are not as easy to measure.

Hassenzahl’s Model Of UX

Hassenzahl’s “Model of User Experience”.

Several models of UX have been suggested, some of which are based on Hassenzahl’s model. This model assumes that each user assigns some attributes to a product or service when using it. As we will see, these attributes are different for each individual user. UX is the consequences of these attributes plus the situation in which the product is used.

The attributes can all be grouped into four main categories: manipulation, identification, stimulation and evocation. These categories can, on a higher level, be grouped into pragmatic and hedonic attributes. Whereas the pragmatic attributes relate to the practical usage and functions of the product, the hedonic attributes relate to the user’s psychological well-being. Understanding the divide can help us to understand how to design products with respect to UX, and the split also clarifies why UX itself cannot be designed.

Manipulation

Hassenzahl explains the hedonic and pragmatic qualities with a hammer metaphor. The pragmatic qualities are the function and a way for us to use that function. However, a hammer can also have hedonic qualities; for instance, if it is used to communicate professionalism or to elicit memories. (Image: Velo Steve)

In this model, the pragmatic attributes relate to manipulation of the software. Essentially, manipulation is about the core functionalities of a product and the ways to use those functions. Typically, we relate these attributes to usability. A consequence of pragmatic qualities is satisfaction. Satisfaction emerges if a user uses a product or service to achieve certain goals and the product or service fulfills those goals.

Examples of attributes that are typically assigned to websites (and software in general) are “supporting,” “useful,” “clear” and “controllable.” The purpose of a product should be clear, and the user should understand how to use it. To this end, manipulation is often considered the most important attribute that contributes to the UX.

Identification

Although manipulation is important, a product can have other functions as well. The first of these is called identification. Think about it: many of the items connected to you right now could probably be used to get an idea of who you are and what you care about, even though some of them would be more important or descriptive than others. The secondary function of an object is to communicate your identity to others. Therefore, to fulfill this function, objects need to enable users to express themselves.

The growth of social media can be explained by this identification function. Previously, we used personal websites to tell the world about our hobbies and pets. Now, we use social media.

Facebook, blogs and many other online services help us to communicate who we are and what we do; the products are designed to support this identification need. MySpace, for example, takes advantage of this identification function; it allows users to customize their profiles in order to express themselves. WordPress and other platforms let bloggers select themes and express themselves through content, just as users do through status updates on Facebook, Twitter and all the other social platforms out there.

Stimulation

Gmail notifies users when they forget to attach a file to an email.

The Pareto principle, also known as the 80-20 rule, states that 80% of the available resources are typically used by 20% of the operations. It has been suggested, therefore, that in traditional usability engineering, features should have to fight to be included, because the vast majority of them are rarely used anyway.

This is necessarily not the case with UX, because rarely used functions can fill a hedonic function called stimulation. Rarely used functions can stimulate the user and satisfy the human urge for personal development and more skills. Certain objects could help us in doing so by providing insights and surprises.

From this perspective, unused functions should not be dropped from software merely because they are used once in a blue moon. If they are kept, they could one day be discovered by a user and give them a surprise and positive user experience. As a result, the user might think “What a brilliant application this is!” and love it even more.

In fact, this is exactly what I thought (and found myself tweeting) when Gmail notified me that I had forgotten to attach the file I’d mentioned in an email. If you do a Twitter search for “gmail attachment,” you’ll probably find many others who feel the same.

Furthermore, I think “Pretty cool!” when YouTube enhances its presence by modifying its logo on Super Bowl Sunday (or Valentine’s Day). I also discovered something new when MailChimp’s monkey whispered, “Psst, Helge, I heard a rumor…” and linked me to a Bananarama song on YouTube. There are many examples, but the best “stimulating” functions are probably those that are unexpected but still welcome (like the Gmail notification).

Evocation

Souvenirs tend to have weak manipulative qualities, but they can be evocative when they elicit memories. (Image: meddygarnet)

The fourth function that a product can have, according to Hassenzahl’s model, is evocation, which is about recalling the past through memory. We enjoy talking and thinking about the good old days (even yesterday), and we want objects to help us with this. Even weird, dusty and practically useless souvenirs (with weak manipulative qualities) have evocative function because they help us to recall the past.

In design, we can certainly give a website a vintage look and feel to remind us of our childhood, high school or the ’60s… or the ’30s. But even websites with a modern and minimalist design can have evocative attributes. For instance, don’t Facebook and Flickr (by way of their users and your friends) provide you with a huge number of pictures from the past, some of which are highly evocative?

Thus, UX Cannot Be Designed

The MailChimp monkey’s words will probably appeal to some users more than others.

Having said all this, why is it argued that UX cannot be designed? It’s because UX depends not only on the product itself, but on the user and the situation in which they use the product.

You Cannot Design the User

Users are different. Some are able to easily use a website to perform their task. Other simply are not. The stimulation that a product provides depends on the individual user’s experience with similar products. Users compare websites and have different expectations. Furthermore, they have different goals, and so they use what you have made in different modes.

Think about it: when judging the food and service at a restaurant, you will always compare what you experience to other restaurants you have been to. They have shaped your experience. Your companions compare it to their previous experiences, which are certainly different from yours. The same goes for software, websites and apps. Evocative qualities vary even more, simply because all users have a unique history and unique memories.

You Cannot Design the Situation

UX also depends on the context in which the product is used. A situation goes beyond what can be designed. It can determine why a product is being used, and it can shape a user’s expectations.

On some occasions, you may want to explore and take advantage of the wealth of features in WordPress. In other situations, the same functions may make things too complex for you. On some occasions, you may find it totally cool that the MailChimp monkey tells you randomly that, “It’s five o’clock somewhere,” but in other cases it would feel entirely weird and annoying, because you are using the application in a different mode.

Furthermore, UX evolves over time. The first time a user tries an application, they may be confused by it and have a slightly negative experience. Later, when they get used to it and discover its wealth of features and potential and learn how to handle it, they might get emotionally attached to it, and the UX would become more positive.

We Can Design For UX

Are roller coasters fun, thrilling and exciting or just breathtakingly scary? It’s hard to tell. (Image: foilman)

Many designers label themselves “UX designers.” This implies great confidence in the capabilities of the designer; it suggests that the user experience can be designed. But as explained, we cannot do this. Instead, we can design for UX. We can design the product or service, and we can have a certain kind of user experience in mind when we design it. However, there is no guarantee that our product will be appreciated the way we want it to be (again, see Hassenzahl). We can shape neither our users’ expectations nor the situation in which they use what we have designed.

It is certainly possible to have a fairly good idea of the potential ways a user will judge what we make, as Oliver Reichenstein points out. Movies, rhetoric and branding demonstrate as much: they predict certain experiences, and they often achieve their goals, too.

However, a thrilling movie is probably more thrilling in the theater than at home, because the physical environment (i.e. the situation that shapes the UX) is different. In the same way, the effectiveness of an advertisement will always depend on the context in which it is consumed and the critical sense and knowledge of the consumer (i.e. the user’s prior experience). The commercials are designed to elicit certain experiences, but their level of success does not depend solely on the commercials themselves.

The difference between designing UX and designing for UX is subtle but important. It can help us understand and remind us of our limitations. It can help us think of how we want the UX to be.

It has been suggested, for instance, that UX is the sum of certain factors, such as fun, emotion, usability, motivation, co-experience, user involvement and user engagement (for more, see Marianna Obrist et al’s article “Evaluating user-generated content creation across contexts and cultures”). In turn, we must address some of these factors when we design for UX, depending on how we want our product to be perceived. If we want an application to be fun, then we need to add some features that will entertain; a joke, a challenging quiz, a funny video, a competitive aspect or something else. We should keep in mind, however, that, as designers, we can never really predict that the application will be perceived as fun by the user. Users have different standards, and sometimes they aren’t even willing to be entertained.

Extra Credit: How To Design For UX

Peter Morville’s “Facets of User Experience.” (Image: Semantic Studios)

Understand UX

If we want to design for UX, then we need to understand what UX is all about. For example, knowing which variables make users judge a product might be advantageous, and Hassenzahl’s UX model is one such model for this.

Other models have been suggested as well, such as Peter Morville’s “seven facets of user experience.” Here, UX is split into useful, usable, desirable, findable, accessible, credible and valuable. As you may have noticed, these facets fit Hassenzahl’s model pretty well: useful, usable, findable, credible and accessible could all be considered as pragmatic (i.e. utilitarian and usability-related) qualities, while desirable and valuable would qualify as hedonic (well-being-related) qualities.

As mentioned, UX has also been viewed as the sum of particular factors. Other models have been suggested as well, some of which are linked to at the bottom of this article.

Understand Users

Following this, we need to understand our users. Traditional methods are certainly applicable, such as user research with surveys, interviews and observation. Also, personas have been suggested as a means of designing for UX, as have UX patterns. Smashing Magazine has already presented a round-up of methods.

Exceed Expectations

Finally, give users what they want — and a little more. In addition to enabling users to use your service effectively and efficiently, make them also think, “Wow, this application is genius.” Exceed their expectations desirably. If you do so, they will use your website or app not because they have to but because they want to.

Other Resources

To learn more about UX, you may want to read the following:

What Is User Experience Design? Overview, Tools and Resources
A useful introduction to UX, along with suggested techniques and helpful tools for designing for UX.
8 Must-See UX Diagrams
An excellent collection of visualizations of the concepts and fragments of UX.
Retro and Vintage in Modern Web Design
An extensive showcase of inspiring websites that are graphically designed to elicit memories.
UX Myths
A website dedicated to debunking misconceptions about UX.
The Thing and I: Understanding the Relationship Between a User and a Product
Freely available extracts from Marc Hassenzahl’s article on the UX model referred to in this article.

(al)

Useful Web Services, Tools and Resources For Web Designers

2011-02-08T15:25:08Z

We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks.

You might have seen some of these tools in our Twitter stream or on our Facebook page, but certainly not all of them. We’ve prepared the most useful ones (yet not necessarily the most beautiful ones) in this handy overview for your convenience. Please share any further tools with us and our readers in the comments to this post. As usual, we express sincere gratitude to all designers and developers out there who create, maintain and improve these tools as their little side projects. You really make the difference, guys. Thank you.

You may want to check out our previous round-up, Time-Saving and Educational Resources for Web Designers, as well.

Useful Web Services, Tools and Resources

FontFuse: Gallery of Font Pairings
FontFuse is a font pairing design resource that displays font pairings and hence helps you compare and choose fonts. You can browse through fonts as well as font families, and explore the most recent, most popular and contest-leading font pairings.

Little Big UI Details
This site features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day.

A Sampler Page
While physical books are traditionally well defined and structured objects, digital books live on screens that vary greatly in their dimensions. In this A List Apart article, Craig Mod dives into the similarities and differences of these media and presents the baseline for designers who want to produce beautiful and readable text on a tablet.

Readability: Enjoy Reading, Support Writing
Another handy little helper that gets rid of the unwanted clutter. Readability allows you to choose your preferred settings (font size, margin and style) and applies them to any website. Drag the bookmarklet with your saved settings into your bookmars bar or folder, visit the website of your choice, click on the bookmarklet and you get a good, comfortable read. Besides, readability offers a way to compensate writers and publishers without punishing readers. 70% of all membership fees go directly to the people who make the content.

Prey: Rest Safe
This tool is small but efficient open-source application that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Ge.tt
With Ge.tt you can turn any type of file into web content and share it instantly. You just click on and select files and share the files with your friends or publish the data online. You may want to check an alternative, Crate, as well.

Lanyrd: Get More Out of Conferences
Lanyrd is the social conference directory that lets you keep track of what is going on around you, both as a conference speaker and visitor. You can browse conferences by topic, see who the keynote speakers are and who might like to attend it with you. Follow intereresting conferences by checking out attendees tweets or browse slide, videos and podcasts of past events you might have missed. And you can check SmashingMag’s account on Lanyrd, too.

Dashkards: Dashboard Cheat Sheets For Your Favorite Mac Apps
The site presents keyboard shortcut cheatsheets for you favorite Mac apps to help you memorize them. Simply add the dashkards to your dashboard and save time.

Bundler: Manage Your Application’s Dependencies
Bundler manages application’s dependencies through many machines systematically and repeatedly. You can use the tool with frameworks (it works out of the box with Rails 3) and check out an application with a gemfile for development. A detailed instruction is available on the app’s main web page.

BuildorPro
BuildorPro runs through your browser, and so the browser becomes your development environment — meaning that every time you change your code by hand or through the visual tools, the changes are instantly reflected in the design window. Currently in beta.

Zerply: Present Yourself Professionally
With Zerply you can present yourself, discover and connect as well as converse and collaborate. By setting up a professional profile, you can tell people who you are and what sites you use.

Prevue: Sharing Tool for Designers
Prevue is a free concept sharing tool that helps you upload in a simple and elegant way by organizing and sharing your work with others. Either share individual projects with clients, or turn all your projects and designs into a beautiful and clean portfolio to share with the world.

Git Immersion
Git is a fast version control system which can be downloaded on this site. Git Immersion is a very detailed guide to Git, with examples and practical tips for developers.

Wirify: The Web as Wireframes
This tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.

Open with Photoshop Firefox Extension
If you are looking for nifty time-savers, this little Firefox add-on is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Scr.im: Email Address Shortener
Scr.im lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on Scr.im, and it gives you a link to a page with your email address, with security to prevent bots from viewing it.

Compfight: Flickr Search Engine
Compfight is a Flickr search engine for images licensed under Creative Commons (or other) licenses. They pull their results directly from Flickr and gives you multiple options to restrict your search.

Browserling: Interactive Cross-browser Testing in Your Browser
Browserling offers you a graphical web console to do cross-browser testing without leaving your own browser. A helpful way to try out your creations. The virtual browsers run live enabling you to type and click away just as if you were running the actual browser. Paid and free options are available.

User Feedback and Concept Testing with Verify
Verify is the fastest way to collect and analyze user feedback on screens or mockups. See where people click, what they remember, or how they feel about a Web design.

foxGuide: Photoshop Guides Inside Firefox
foxGuide is a Firefox extension that displays horizontal and vertical guides. These guides appear as thin lines that float over the webpage. You can move or remove them just the way you do it in Photoshop.

GridBookmarklet
The tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.) Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page.

URLi.st: Share and Sync Your Links
URList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link to the group of links.

Spritebox: Create CSS from Sprite Images
Spritebox is a WYSIWYG tool to help Web designers create CSS classes and IDs from a single sprite image. It is easy and free to use and is based on the principle of using the background-position property to align areas of a sprite image into block elements of a Web page. You may want to check out CSS Sprite Generator, too.

Joliprint
This is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments. If you’d like an alternative, give Web2PDF or Notforest a try.

Entitifier
Cleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online. Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet.

The Email Address Obfuscation Debate
Superuser has an interesting discussion about email obfuscation, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

Quick CSV Data Convertor
As Web designers, we constantly receive data in Excel and other spreadsheet formats. This works fine when you just need to view the data on your computer. But when you need to upload it to and display it on the client’s website, it becomes a huge pain. This tool takes a CSV or tab-delimited file in Excel and converts it to JSON, XML, ActionScript and other Web-friendly formats instantly. If you want to convert your spreadsheet data to HTML, you might want to give Tableizer a try.

Instant Blueprint
Instant Blueprint is a way to create a web project framework. In a very short time you can get your project up and running with valid HTML/XHTML and CSS. It’s a simple online form where you enter the required information and markup id tags. Then you select options such as, javascript library and document type. This then generates the blueprint you need to get your project going.

Interaction-Design.org: HCI, IxD, UX, IA, Usability, and More
This website is a growing library of documents, references and useful articles about interaction design. Leading personalities of the respective branches are asked to contribute to every topic including videos and commentaries.

jQuery Deconstructed
The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools.

Last Click

Humans.txt: We are People, Not Machines
Humans.txt is an initiative founded by a group of Spanish enthusiasts with the idea to give credit to the humans behind Web projects. Start your own humans.txt now and stick it in the website’s root folder, right next to robots.txt. Fill the file with whatever info about the contributors you like. Be a part of the initiative and help establish the standard for humans.txt.

Spacelog Apollo 13
This site allows you to explore transcripts of radio communications between the Apollo 13 crew and the NASA personnel back at Houston. You can check out photographs taken from the ground as well as by the crew in space. If you’re interested in space missions and the history of Apollo 13, this is the site for you.

Google Art Project
The Google Art Project lets you visit all the great museums around the world and offers interactive 360° tours. High zoom levels give you astounding close-up impressions of the masterpieces, getting that close would probably be impossible in reality. You can even create your own virtual tour and showcase your own great tableaus.

Liveset: Now the Concert Comes To You
This service allows you to watch live concerts on the Web and on mobile devices in HD. Once you’ve become a member, you can claim digital tickets and enjoy the show on your large screen at home, together with your friends or family.

How To Build a Corporate Website (Comic Strip)
Unfortunately, very sad, yet very true.

How Would You Like Your Graphic Design?
A nice Venn diagram that helps you (and maybe your client) resolve dilemma on getting fast, cheap, free and great graphic design. Pick two out of four.

There's Hope For America After All

2011-02-13T20:54:02Z

Last month in the wake of Jay Cutler leaving the NFC championship game with a knee injury, ESPN put up a poll on its website about the "least likeable person." The poll included Cutler, Ben Roethlisberger and Michael Vick. Despite the fact that all Cutler did was leave a game early with an injury, 43% of America voted him as the least likeable person. Roethlisberger received 35% of the vote and surprisingly Vick only got 22%. Considering what Vick did and what Roethlisberger allegedly did, the results were pretty dumb (and showcased how reactive people are).

After the odd results of the "least likeable person poll," I expected to the Black Eyed Peas to receive an A in a poll about what grade they deserve for last Sunday's Super Bowl halftime show. I personally thought it was an absolute train wreck and one of the worst Super Bowl halftimes I can remember. Then again, I also thought that out of Cutler, Roethlisberger and Vick, Cutler was nowhere near the least likeable person. I expected the worst with this poll, but I was pleasantly surprised by the results:

I definitely understand why the NFL went back to a modern halftime show after a few years of nothing but the oldies, but a band that actually sounds decent and plays instruments (Foo Fighters, Muse, etc.) wouldn't have been a bad idea. The Black Eyed Peas just flat out stunk, and I hope next year the NFL goes in a different direction for the Super Bowl halftime show.

Canada Legislative Updates

2010-12-13T16:38:41Z

Canada Legislative Updates

Ontario
BC Introduced Bills
NWT
Manitoba
Nunavut
Quebec

Preview this bundle

McAf.ee Shortens Links with Built-In Security Scanning [URLs]

2010-09-22T13:05:00Z

If you need to pass on a long link and need to assure those who click know it's safe, security firm McAfee provides a URL shortener that automatically scans the intended destination before letting users click through to it. More »