Alan Cooper
About Face 3, The Essentials of Interaction Design

Most notably, ExactTarget was the only ESP to achieve a perfect score in the Customers category. According to the report, “with high satisfaction scores and online community, ExactTarget can successfully meet marketers’ complex business needs.” That’s particularly exciting for the KA+A team, since we had the opportunity to work with ExactTarget on the creation of their user community, 3Sixty. With over 16,000 members, 3Sixty has become a model of what an online user community can and should be.

Well, the team at KA+A wanted to congratulate ExactTarget for their success in the Wave report, so we decided to create a little trophy for them. What would be more appropriate than a surfboard!? We delivered the board (pictured below) earlier this week, and they thought it was so cool that they brought it on stage during their 2010 Sales and Services conference.

Congratulations on a great 2009, ExactTarget. And thanks for giving us an opportunity to design a custom surfboard!

Sure, there were the American giants present – McDonald’s and Starbucks. And international fashion stars Chanel, Dior, Prada, YSL, etc., had no problem catching my eye. It was the other 90% (that I could afford) that left me clueless.

Complicating it further was my desire to experience Europe as a local – to not cave to familiar Americana brands (besides the essential Diet Coke), but to go to the well-reputed watering holes, local shops, and cafes that the true Londoners / Parisians / Florentines do. Also, I was crippled by not having the ever omniscient Internet at my fingertips (have you seen the iPhone’s international data fees?!), to aid in the moment decisions and verify the merits of any promising candidates I stumbled upon.

I had to re-calibrate my brand sense. I was used to my usual repertoire of brands, and had to take a step back in the “Consumer Decision Journey” to begin discovering and evaluating brands.

So how did I do? What did I discover, and how did I uncover the good stuff? Here’s a brief recap:

London
While in London, I lived on Daily Candy, “a lifestyle resource dedicated to helping you live the sweet life.” The web site provided loads of great finds for London, including The Tabernacle (former stomping grounds of The Clash), Pix Pinxtos, Melt Chocolates, and LOTS of great window shopping, including the S. Millers Twenty8Twelve. In fact it was so good, that I was yet again in despair when I saw that they don’t yet cover Paris or Florence.

Paris
Alas, in Paris, I came to respect Spotted by Locals, a blog that offered tips on cafes, restaurants, things to do, and led us to some of our favorite stops, including bohemian cafe Les Peres Populaires, Montmartre cafe Coquelicot, and the terroir food and wine bar, Resto Zinc.

Florence
In Florence, the blogs weren’t cutting it, so we took matters in to our own hands and hit the streets. We collected business cards that were deposited at our local bed & breakfast and then mapped them to see which were closest and began trying them one by one. Our trial and error was boosted by some great tips from dear friends back home. Overall, we had some empty touristy let downs, but ended up stumbling across a handfull of gems, including Vestri Cioccolateria, Yellow Bar, and Florentine boutique Echo.

Takeaways
One of the many takeaways from this experience, was that it reminded me of the beauty of good branding. Familiar logos hearken to mind a sense of value, promise, and tell us what’s in store for that particular brand. Every time I ordered a Diet Coke at restaurant, I knew I could count on it for the perfect blend of flavor & fizziness. Seeing the Coca Cola logo was a comforting guarantee of an experience – something I could count on.

Exploring the brands of Europe also reminded me of all the small experiences that go in to making a brand – crafting a compelling environment, delighting your customers, providing quality & service – and delivering it all consistently. These good brand practices help small local shops and restaurants generate buzz, referrals, and ultimately move their customers into the loyalty loop.

Double Spacing

This convention harks back to the days of monospaced typewriters where it was common practice to insert a double space to distinguish the beginning of a sentence from the surrounding single word spaces. When using proportional fonts this really isn’t necessary, and is, to be brutally honest, just plain ugly.

‘Dumb’ Quotes

Typewriters are also responsible for the introduction of ‘straight quotes’, non-specific quote marks designed as a space-saving measure for the keyboard, avoiding the need for separate opening and closing quote marks. Straight quotes are commonly used in place of proper quotation marks or ‘curly quotes’. Many designers will tell you that straight quotes are used to represent feet and inches, but in reality, feet and inches should be represented using primes. Straight quotes are obsolete and should not
be used.

Incorrect Hyphenation and Sentence Breaks

Hyphens are the most commonly used method of splitting sentences and indicating ranges of values. However, hyphens should only be used to split words across lines or to connect compound words (e.g. double-barreled). To indicate a break in thought in a sentence, an em dash with hairline spaces should be used (an en dash with a space before and after is also acceptable, but should be kerned appropriately).

Horizontal and Vertical Scaling

Well-designed typefaces have varying degrees of contrast between horizontal and vertical strokes. For example, in most sans-serif typefaces the vertical strokes are optically thicker than horizontals in order for them to look the same width. Distorting type through scaling upsets the balance of a typeface. With vertical scaling the vertical strokes can become too thick, disrupting the left-to-right flow of a piece of type, and smooth curves can appear to ‘peak’ in certain areas. With extreme horizontal scaling the horizontal strokes become thinner than the verticals. If it is really necessary to distort type, it should be no more than 1-2% wider before it becomes obviously noticeable. It is best practice to use a typeface family with the appropriate widths for your needs – many now have multiple widths ranging from Ultra Compressed to Extended.

Auto-Styling

Many design and layout applications permit ‘faked’ bold, italic and small caps. The apps use mathematical algorithms to stroke, slant and scale individual characters. Adding a stroke to make a bold weight loses some of the details that aid legibility, and simply skewing the typeface affects the overall weight and can cause some strokes to virtually disappear. Fake small caps are achieved by forcing lowercase characters to uppercase and scaling them down, making them feel narrower and lighter than the original lowercase. Commercial typefaces are designed with multiple weights, italics and variants, each with carefully considered optical corrections and custom-designed glyphs. For example, bold weights have greater contrast between horizontal and vertical strokes, italics generally utilize a single-storey lowercase ‘a’, and small caps have been width- and weight-corrected for optical balance. Again, the best solution is to choose a type family with the appropriate variants for your needs. Please, steer clear of auto-styling.

Widows, Orphans and Rivers

“An orphan has no past, a widow has no future.” An orphan is a single word line at the end of a paragraph. A widow is a single line of text at the top of a column. Both result in excessive white space which interrupts the balance of a set piece of text. A river is a line of white space that appears to run through a paragraph of text. Creative kerning and letter-spacing, or rewriting the text is the only effective solution to these issues.

Poor Kerning

Typefaces are generally spaced for text usage (small) and not for display purposes (large). Manual kerning is required to make display type look evenly spaced, a practice which is non-existent outside the design community, and one which many designers tend to overlook. It is also worth noting that the majority of typefaces are designed with tabular figures – numbers which sit within an equal space so they line up perfectly in tables. For text and display purposes, this needs a lot of manual correction. Some typefaces have sets of lining and old-style figures, but again these tend to be spaced for text use, unless there are size-specific variants.

Can you see what’s wrong with the statement above?

Bad typography is everywhere. It can be found in magazine articles, outdoor signage, restaurant menus, billboards, newspaper and TV advertisements and all over the internet. Spend just 30 seconds looking it’s easy to find a whole host of typographic faux pas—incorrect hyphenation, ‘dumb’ quotes, double-spacing, widows, orphans, poor kerning… the list goes on. Typography is something every designer should deeply care about, which is why it pains me to see it abused so profusely.

Typographic literacy seems to be on the decline, and as many designers who are not well-versed in typography move into teaching, they pass on little typographic knowledge to their students. A lot of typographic knowledge can be gained in the workplace, but with the demise of the dedicated design agency proofreader, there is less chance of catching typographic errors before a project goes live or to print.

The average non-designer reading a newspaper or browsing online probably doesn’t care about typography and has no awareness of when something is wrong. For example, not many will be able to tell you the difference between dumb quotes, foot and inch marks, or quotation marks. Almost all standard installed system fonts use tabular figures so they don’t think about—and really have no method of—kerning numerals set within text.

Technology is a major barrier in the way of good typography. There aren’t enough keys on a computer keyboard to have separate keys for hyphen, em dash and en dash, or for separate open and closed, single and double quotation mark keys. Designers have to rely on keyboard shortcuts to find the characters they need, and some don’t even have keyboard shortcuts at all—in that case a character viewer such as PopChar on the Mac is needed, or several minutes of trawling through Alt character tables on Windows.

Some software developers have implemented a Smart Quotes feature in their applications that automatically substitutes dumb quotes for quotation marks. This is a step in the right direction, but really it only just masks the problem.

Online typography is a whole other issue as there is currently not a lot of typographic control available. That is changing, albeit slowly, as updates to HTML and CSS are rolled out. It wasn’t until HTML 4 that many of the appropriate characters became available for use, but it takes a lot longer to type ’ for a right single quote than simply ", so you can already see the route the majority will take. Kerning web fonts is still a no-go and for the time being it seems unlikely to stay that way. It’s unlikely there will ever be as much typographic control on screen as is in traditional media.

So, could you tell what was wrong with the type in the first image? It uses a horizontally-scaled typeface, ‘dumb’ quotes, double hyphen and forced bold auto-styling. Below is the way the opening statement should have been written, with appropriate typeface, ‘curly’ quotes and en dash:

Just as the boom in SMS messaging signaled a rise in bad grammar and punctuation, so too is technology at least partly responsible for the decline in typographic literacy. As a designer I feel responsible for raising awareness of these issues and educating people on the way things should be done. Here are some examples of common typographic errors and how to correct them.

The image below shows the service immediately before the latest redesign. It was definitely clean, well organized, and functional. There are even some sweet keyboard shortcuts to make controlling the music easier!

Last week thesixtyone distinguished itself from the web’s pile of music recommendation sites by completely redesigning their service. The new design is bold and immersive. While a song plays, the background of the entire page becomes a beautiful full-screen photograph of the current artist. At the same time, smaller images fade in and out in a slide show fashion. The effect is impressively cinematic, and gives artists a much better opportunity to show listeners what makes them unique… especially when compared to the limiting avatars and thumbnails used by the old design.

The other major update is the minimization of the music controls. A small menu in the upper right corner that appears only when the cursor is moving allows users to pause/play, adjust the volume, add a song to a playlist, and toggle repeat on or off. Large arrows on either side of the screen provide navigation between the previous and next song. Other functionality includes the ability to build playlists, and to share, love and comment on songs.

While the redesign is getting plenty of positive attention, a number of users have been less than happy with the drastic changes. The design is, without question, a sea change, so some degree of uprising isn’t surprising. The good news is that users can still access the old site.

I don’t know exactly how the update was rolled out, so maybe there would have been a better, less painful way to introduce the new design to the community. There are definitely parts of the UI that I don’t quite understand and wish were better explained, but the overall experience is engaging enough that I’m willing to let them go for now. Whatever the future holds for thesixtyone, I hope more companies become willing to take risks with bold new approaches to delivering experiences online.

Surprise, surprise. IE6 is back in the news. After hackers exploiting a weakness in IE6 launched an attack on Google and at least twenty other companies in China last week, Microsoft has issued a “critical” patch for it’s dated web browser. Actually, this isn’t so much news or a surprise really. When is Microsoft not fixing vulnerabilities in Internet Explorer 6? We can probably expect this sort of thing to happen for the next 4 years, until Microsoft stops supporting its abomination in 2014

The reason this specific incident is making headlines this week is because French and German officials are now making recommendations to not use Internet Explorer anymore, regardless of the version. Bravo. Microsoft instead is recommending that users “simply” upgrade to the latest and most stable version of its browser, Internet Explorer 8.

In a statement, Microsoft said, “It is important to note that all software has vulnerabilities and switching browsers in an attempt to protect against these, highly publicized but currently limited attacks, can inadvertently create some false sense of security.”

A false “sense” of security?

I’m sorry Internet Explorer, but you will never give me any sense of security. And I will never give you a second chance. You have broken my heart, and my website, for the last time.

Abandon ship…
• Firefox
• Safari
• Chrome
• Opera

Our most recent app engagement began in the usual way, collaborating with the client on multiple rounds of wireframes and process maps, dialing in the inner workings and structure of the app itself. When we started to move forward into the initial visual prototypes the ideas for the navigation and overall aesthetic came fast, but we quickly realized something just didn’t ‘feel’ right. It didn’t take long before we realized why and just how easy it is to fall into the same trap that so many others do when designing for the iPhone. In an attempt to create something fresh and slick we were losing the very thing that makes the best iPhone apps ‘feel’ right – familiarity.

“… it is clear that a user interface feature is ‘intuitive’ insofar as it resembles or is identical to something the user has already learned. In short, “intuitive” in this context
is an almost exact synonym of ‘familiar.’”
—Jef Raskin

Spend time with the native iPhone apps such as Mail, Calendar and Clock, and you can see familiarity at play. While each one fulfills a different purpose, they seem like they were ‘cut from the same cloth’, related, familiar. They share common design elements such as standard header and footer bars with clear navigation controls. They share consistent colors, gradients, shadows and highlights. There is a minimal amount of information presented on-screen at any one time and there are no distracting superfluous visuals to get in the way. main navigation and other interactive elements are appropriately sized and spaced so they are easy to ‘tap.’

Some of the other native iPhone apps such as Weather, Stocks and Maps need to present more visual-based information, calling for more elaborate interfaces. However, Apple have managed to retain the same familiarity throughout by using the same basic principles. Many of the third party apps available in the App Store are also successful for these reasons. Below are some of the apps I use on a daily basis:

Facebook
The iPhone version of the popular social networking site stays true to the look and feel of its web-based counterpart, and uses the easily-recognizable Facebook blue. Familiarity is present not only with its hybrid iPhone/Facebook aesthetic, but also because the app functions almost identically to the website.

Tweetie 2
Like Facebook, the Tweetie 2 app follows the style of it’s Mac-based sibling. The app uses many of the stock headers, textures and icons used on native iPhone apps. It also makes very clever use of navigation, which can be clicked or swiped to reveal.

Lose It!
This calorie and exercise tracking tool could easily be mistaken for an Apple-designed app. Lose It! efficiently stores and visualizes multiple types of information and makes great use of icons to enhance the aesthetic.

Convertbot
Convertbot is a perfect example of blending an innovative user interface with a familiar base functionality. It is definitely one of the best looking apps on the iPhone, and with its icon-based scroll wheel navigation it couldn’t be simpler to use.

Our app project is currently in its final stages, so keep your eyes on our Work section for a case study closer to its launch later in the year.

]]>

A few months back I revisited a favorite game of mine — Portal. Portal is an extension of Valve’s Half-Life series. In it, the player controls the protagonist from a first person perspective (you know, a first person shooter…). You begin your adventure locked in a cell in some kind of testing environment/laboratory. After being released from the cell, you’re directed through a series of increasingly complex puzzle situations in which your goal is to progress through one test chamber and move to the next. Here’s where the “portal” comes in. The solutions to these puzzles require the use of a portal gun, which creates two interconnected portal ends. Here’s Wikipedia’s description of this interesting tool:

The portals create a visual and physical connection between two different locations in three-dimensional space. Neither end is specifically an entrance or exit; all objects that travel through one portal will exit through the other.

In the image above you can see how looking into the orange portal results in looking out of the blue portal. Check out the images at the end of the post to see more examples. You can also play a web-based 2D version here to get an idea of how portals work.

Anyway, you should definitely go get the Orange Box and play Portal. But, I’m not writing this just to give a game recommendation. There’s a lesson that, as a UX designer, I want to learn from Portal.

Painless Acclimation

In spite of the little to no practical experience I have with inter-spatial teleportation, by about five minutes into the game I had become proficient at it. While I’d like to credit my own cleverness and adaptability, in reality it was the skillful job Valve did of acclimating me to the rules and conventions of Portal that turned me into a capable and competent player.

Valve is known as much for its great storytelling as it is for its gameplay, and they go to great efforts to keep the experience seamless and immersive at all times. To that end, Portal’s training system is built right into the storyline of the game. The sophisticated use of progressive disclosure (i.e. only showing the player what they need to know to accomplish a discrete task) combined with in-game symbols and occasional vocal instruction, transforms players from novices to experts in a way that is so integrated with the game that the transition is hardly noticeable.

Players put their skills to use as they move from one test chamber to another, and finally, in a plot twist, the player breaks out of the testing environment and escapes from the facility. The in-game training culminates with the player putting it to use to counter the system in which is was acquired.

What About Commercial Software?

If game-based software can provide in-product training in such an integrated way, why can’t commercial, tool-based software? Why do I have to pop in an Adobe DVD and struggle to follow along as I attempt to mimic what the guy in the video is doing? Why is the help menu so worthless? Why are training and tutorials from 3rd party sites so much better than the ones from the software producer?

To some degree there’s a difference between video game and software development in that video game producers deliberately seek to challenge and confound users (to an extent) with their products, while it’s just an unfortunate byproduct of most software. And, while games keep you on a predetermined “path to victory,” the best software eventually gets out of your way and is used to do things that the developers may not have even thought of (Valve gives us a picture of this in Portal when the player escapes from the testing facility).

I don’t believe those differences should stop software developers from exploring more effective and integrated training solutions. I know this is not an easy thing to do. At KA+A, we know through experience that the training and help components of software are difficult to manage. But it’s time to stop neglecting them and treating them as an afterthought. This is one of those situations where a longview will reveal benefits for both software makers and users.

The Takeaway

No post would be complete without some bullet points, so I’ll close with a list of software training ideas I believe we can learn from Portal:

• Integrate training directly into the application
• Provide users with some “quick wins” that build confidence and create a sense of accomplishment
• Don’t treat users like they’re stupid – keep this in mind when facilitating “quick wins”
• Disclose tools and techniques in a way that prevents sensory overload – i.e. progressive disclosure
• Look for unique places to include tips and help – but don’t get in the user’s way
• Facilitate discovery – make it possible for users to learn on their own
• Make it easy for the user to get your training out of the way when they’re ready to “escape”

Strategically placed portals result in a view of oneself from a perspective completely independent of their actual position in space.

An example of the in-game symbols that serve as instructions for players.

Eventually the tests become more complex and challenging.

Recently I was fortunate enough to become certified in Landing Page Optimization (LPO) after attending a one-day course presented by Dr. Flint McGlaughlin of MarketingExperiments, an internet-based research lab that conducts experiments in optimizing sales and marketing processes. The primary goal of LPO is to optimize the content and appearance of landing pages to make them more appealing to a target audience, in order improve the conversion rate of website visitors that become sales leads or customers.

Having been a designer for nearly 12 years I’ve designed my fair share of websites and landing pages, and I was skeptical about how much I could really learn from this course. However, as we dug deeper into the science of LPO I realized that thinking from a potential customer’s perspective, as opposed to a designer’s or website user’s perspective, allowed me to see beyond just the visual design and understand why content and process are also large parts of the puzzle.

Here Comes the Science Bit
MarketingExperiments has developed a heuristic formula to aid understanding of LPO and conversion:

It looks overly complicated but it’s actually very simple: the likelihood of a click becoming a sale (C – probability of conversion) depends on how badly the user wants what you have to offer (m – motivation of user), how clearly you state the reasons they should buy from you (v – clarity of value proposition), whether there are any special offers to encourage them to do so (i – incentive), whether they experience any resistance from poor design or messaging (f – friction), and how wary they are about submitting personal information or committing to a purchase (a – anxiety). The coefficients and the variables’ position in the formula (left to right) specify how much influence each has in the conversion process.

Effective Solutions
In order for a landing page to be successful, a clear value proposition must be effectively communicated – state why what you are offering is different from the competition and why potential customers should buy from you. Each element on the landing page should state or support the value proposition (congruence), just as every step of the conversion process should too (continuity), from banner ad, email or tweet, all the way to sign-up/checkout. Friction can be reduced by cutting down on superfluous graphical elements, and through clear and effective information design (e.g. reducing the amount of information required at sign-up or reducing the total number of steps in the process). Testimonials, awards and official certification logos can help reduce user anxiety and encourage them to put trust in your company.