Category: Usability

Categories
Design type Typography Usability Web Design Web Design History Web Standards webfonts webtype

Fink on Web Fonts

In Issue 307 of A List Apart for people who make websites:

Web Fonts at the Crossing

by Richard Fink

Everything you wanted to know about web fonts but were afraid to ask. Richard Fink summarizes the latest news in web fonts, examining formats, rules, licenses, and tools. He creates a checklist for evaluating font hosting and obfuscation services like Typekit; looks at what’s coming down the road (from problems of advanced typography being pursued by the CSS3 Fonts Module group, to the implications of Google-hosted fonts); and wraps up with a how-to on making web fonts work today.

A List Apart: Web Fonts at the Crossing

Illustration by Kevin Cornell for A List Apart

Categories
Design downloads E-Books Layout Publishing Standards State of the Web Typography Usability User Experience UX

Battle of the e-Book readers: Stanza vs. iBooks

A Scandal in Bohemia, by Conan Doyle, as viewed in Stanza.

Above, page one of “A Scandal in Bohemia,” the first story in Sir Arthur Conan Doyle’s Adventures of Sherlock Holmes, as seen in Stanza, a free reader for iPad and iPhone. Stanza has a simple interface for finding, buying (and downloading free) e-books.

Stanza lets you control font size and choose from a number of templates offering a useful variety of foreground and background color and contrast. As the screenshot shows, it also lets you set text ragged right, which is the most legible setting for onscreen text.

Below, the same page in iBooks, the reader that comes with iPad. As one would expect from the company that brought us iTunes, the iBooks application has a slick interface for buying (and downloading free) e-books. But as a reader, it is currently less feature-rich, and thus less usable and less pleasing, than Stanza.

A Scandal in Bohemia, by Conan Doyle, as viewed in iBooks.

In iBooks, one cannot turn off full justification. While full justification is lovely in carefully produced printed books, it has a long history of bad aesthetics and poor usability on the screen. Given a sufficiently wide measure, full justification can be used onscreen for short passages, but it is inappropriate for anything beyond a paragraph or two.

Combine full justification with a single high-contrast template, and you have a reader that is better to look at than to read. Indeed, the 1.0 version of iBooks seems more like a flashy demo intended to wow potential iPad purchasers in the store than an application designed to provide book lovers with a viable alternative to print.

One suspects that future upgrades of iBooks will address these concerns. Meanwhile, if you intend to do serious reading on your iPad (or iPhone/Touch), download Stanza for free from the iTunes store.

Addendum: One wonders what will become of Stanza given Amazon’s ownership of the parent company. More here. Best scenario: the Kindle reader incorporates excellent Stanza features, while Stanza continues to operate as an alternative to Kindle, iBooks, et al.

Categories
A List Apart Usability

Remote User Testing

User research doesn’t have to be expensive and time-consuming. With online applications, you can test your designs, wireframes, and prototypes over the phone and your computer with ease and aplomb.

A List Apart: Articles: Quick and Dirty Remote User Testing by NATE BOLT

Categories
A List Apart An Event Apart Announcements Appearances Community conferences CSS Design development editorial events Standards Usability User Experience UX Web Design Web Standards

AEA Minneapolis

An Event Apart Minneapolis 2010.

An Event Apart, the design conference for people who make websites, has posted its Minneapolis 2010 schedule. Join Eric Meyer and me and ten amazing guest speakers on July 26-27, 2010 for two great days of design, code, and content:

Monday, July 26

9:00am–10:00am

Put Your Worst Foot Forward

Jeffrey Zeldman, author, Designing With Web Standards, 3rd Ed.

Nothing teaches like failure. Web standards godfather and An Event Apart cofounder Jeffrey Zeldman shares some of his biggest blunders as a designer, entrepreneur, and creative director, and how each mistake taught him to be better at what he does. Study what the problem was and why the mistake seemed like the right answer at the time; see why it turned out to be a really bad idea after all; and learn the great positive lesson each mistake taught.

10:15am–11:15am

DIY UX: Give Your Users an Upgrade

Whitney Hess, Strategic Partner, Happy Cog

Have you fallen in love with your solution and forgotten the original problem? Are you certain that your product actually makes people’s lives better? Not every company can hire someone like me to help you listen to your users, so you’re gonna have to learn how to do some of this stuff yourself. I’ll show you techniques to find out who your users are, what they really need and how to go about giving it to them in an easy to use and pleasurable way. And it doesn’t have to bankrupt you or kill your release date.

11:30am–12:30pm

The CSS3 Experience

Dan Cederholm, author, Bulletproof Web Design and Handcrafted CSS

In a fast-paced hour of design ideas and techniques, learn how advanced CSS and CSS3 can add richness to your site’s experience layer, and discover the role CSS3 can play in enhancing interactivity.

12:30pm–2:00pm: LUNCH

2:00pm–3:00pm

Mobile First!

Luke Wroblewski, author, Web Form Design

More often than not, the mobile experience for a web application or site is designed and built after the PC version is complete. Learn the three reasons web applications should be designed for mobile first instead: mobile is exploding; mobile forces you to focus; and mobile extends your capabilities.

3:15pm–4:15pm

Learning To Love Humans—Emotional Interface Design

Aarron Walter, author, Building Findable Websites

Humans, though cute and cuddly, are not without their flaws, which makes it a challenge to design for them. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand. Aarron will introduce you to the emotional usability principle—a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your sites and applications more engaging to the humans they serve.

4:30pm–5:30pm

Anatomy of a Design Decision

Jared Spool, Founder, User Interface Engineering

What separates a good design from a bad design are the decisions that the designer made. Jared will explore the five styles of design decisions, showing you when gut instinct produces the right results and when designers need to look to more user-focused research.

7:00pm–??pm

Opening Night Party

Sponsored by (mt) Media Temple

Media Temple’s opening night parties for An Event Apart are legendary. Join the speakers and hundreds of fellow attendees for great conversation, lively debate, loud music, hot snacks, and a seemingly endless stream of grown-up beverages. Venue details will be announced soon.

Tuesday, July 27

9:00am–10:00am

Everything Old Is New Again

Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.

Faux columns. Sliding doors. Image replacement. We rely on these techniques on a near-daily basis, but how will they be affected by the expanding vocabulary of CSS3? Will they be reworked, slimmed down, or abandoned altogether? An Event Apart cofounder and CSS mastermind Eric Meyer pulls some old standbys out of the toolbox and applies the capabilites of CSS3 to see how they can be made leaner, meaner, and more powerful.

10:15am–11:15am

Paranormal Interactivity

Jeremy Keith,
author, DOM Scripting

Interaction is the secret sauce of the web. Understanding interaction is key to understanding the web as its own medium—it’s not print, it’s not television, and it’s certainly not the desktop. Find out how to wield HTML, CSS, and JavaScript to craft experiences that are native to the web.

11:30am–12:30pm

Patterns, Components, and Code, Oh My!

Erin Malone, co-author, Designing Social Interfaces

Designing with patterns sounds like a great idea on the surface. But what does it really take to identify and write patterns? And just what do you do with them once they are created? Rounding out the pattern library with components and code can help prototyping and design move faster, leaving time to solve more challenging problems. This session will discuss the benefits of and issues that arise from designing with patterns, and show how to stay creative while doing so.

12:30pm–2:00pm: LUNCH

2:00pm–3:00pm

Message and Medium: Better Content by Design

Kristina Halvorson, author, Content Strategy for the Web

Designing for multichannel content delivery (mobile, anyone?) means an entirely new set of considerations and challenges for web professionals everywhere. Unfortunately for content creators, it’s nearly impossible to predict whether their writing will maintain impact and readability across each and every platform. But forget about the medium for a minute; it’s the message that matters most. We’ll learn how to identify your key business messages, how they inform your content strategy, and how they impact multi-channel content development and design.

3:15pm–4:15pm

A Dao of Flexibility

Ethan Marcotte, co-author, Handcrafted CSS and Designing With Web Standards, 3rd Edition

“The Way is shaped by use, but then the shape is lost.” Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display. Are our designs ready? Explore sites that think beyond the desktop and have successfully adapted to their users’ habits. Ethan will also discuss how bring an extra level of craftsmanship to our page layouts, and revisit popular CSS techniques in this ever-changing environment.

4:30pm–5:30pm

How the Web Works

Jeff Veen, author, Art & Science of Web Design

Turns out that the fundamental principles that led to the success of the web will lead you there, too. Drawing on 15 years of web design and development experience, Jeff will take you on a guided tour of what makes things work on this amazing platform we’re all building together. You’ll learn how to stop selling ice, why web browsers work the way they do, and where Rupert Murdoch can put his business model.

Register through June 28 and save $100 off your conference pass. Hurry: tickets are first-come, first-served, and seating is limited.

Categories
A List Apart javascript navigation Search Usability User Experience UX

A List Apart No. 304

A List Apart Issue No. 304. Illustration by Kevin Cornell.

Issue 304 of A List Apart for people who make websites squeezes JavaScript and delves into faceted navigation:

Better JavaScript Minification

by NICHOLAS C. ZAKAS

Like CSS, JavaScript works best when stored in an external file that can be downloaded and cached separately from our site’s individual HTML pages. To increase performance, we limit the number of external requests and make our JavaScript as small as possible. The inventor of Extreme JavaScript Compression with YUI Compressor reveals coding patterns that interfere with compression, and techniques to modify or avoid these coding patterns so as to improve the YUI Compressor’s performance. Think small and live large.

Design Patterns: Faceted Navigation

by PETER MORVILLE, JEFFERY CALLENDER

Faceted navigation may be the most significant search innovation of the past decade. It features an integrated, incremental search and browse experience that lets users begin with a classic keyword search and then scan a list of results. It also serves up a custom map that provides insights into the content and its organization and offers a variety of useful next steps. In keeping with the principles of progressive disclosure and incremental construction, it lets users formulate the equivalent of a sophisticated Boolean query by taking a series of small, simple steps. Learn how it works, why it has become ubiquitous in e-commerce, and why it’s not for every site.

Illustration: Kevin Cornell for A List Apart

Categories
Apple Applications apps architecture Design industry Information architecture ipad Platforms Usability User Experience UX Web Design

Design Lessons from iPad

Comparison of iMac and iPad screens at informationarchitects.jp.

It’s only Wednesday but we already have our link of the week. Although they call it merely a “quick write-up” (and it is a fast read), iA’s mini-compendium of design insights before and after the appearance of the iPad at their office should be required reading for all web, app, and/or interaction designers.

In the equivalent of a breathlessly quick seminar presentation, iA discusses typographic resolution and feel; the effect of the device’s brilliant contrast on readability; the kitsch produced by rigorously adhering to Apple’s “make it 3D” guidelines; whether metaphors work; and more—all of it well worth far more than the little time it will take you to absorb.

In particular, I call your attention to the section entitled, “Interaction Design: So What Works?” Although intended as a guideline to producing well-tuned iPad apps, it also works splendidly as a mini-guide to creating better websites, much like Luke Wroblewski’s brilliant “Mobile First” presentation at last week’s An Event Apart, which carried a similar message:

  1. The limited screen estate and the limited credit on the number of physical actions needed to complete one task (don’t make me swipe and touch too often), pushes the designer to create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions. This goes hand in hand with the economic rule of user interaction design: Minimize input, maximize output.
  2. Since the smallest touch point for each operation is a circle of the size of a male index finger tip, we cannot cram thousands of features (or ads!) in the tight frame; we have to focus on the essential elements. Don’t waste screen estate and user attention on processing secondary functions.
  3. We found that the iPad applications we designed, made it relatively easy to be translated back into websites. The iPad could prove to be a wonderful blue print to design web sites and applications. If it works on the iPad, with a few tweaks, it will work on a laptop.

Via iA » Designing for iPad: Reality Check.

Categories
cities Code Community conferences content content strategy CSS Design development eric meyer Happy Cog™ HTML HTML5 Seattle speaking Standards State of the Web Tools Usability User Experience UX Web Design Web Standards Zeldman

An Event Apart Seattle

Above: Part of my deck for “Put Your Worst Foot Forward,” a talk on learning from mistakes at An Event Apart Seattle 2010.

Greetings, web design fans. I’m in Seattle doing the final prep for three days of kick-ass design, code, and content. Starting Monday, April 5 and running through Wednesday, April 8, An Event Apart Seattle 2010 features 13 great speakers and 13 sessions, and has been sold out for over a month. A Day Apart, a special one-day learning experience on HTML5 and CSS3, follows the regular conference and is led by Jeremy Keith and Dan Cederholm.

The all-star cast includes …

… And that’s just the first day.

There are also two parties (sponsored by our good friends at Media Temple and MSNBC) and seven more great speakers with topics of interest to all standards-based web designers.

If you can’t be with us, follow the Twitter stream live on A Feed Apart.

Categories
Design Respect software Standards State of the Web The Essentials type Typography Usability Web Design Web Design History Web Standards Web Type Day Web Type Week webfonts webkit webtype

My Love/Hate Affair With Typekit

GEORGIA and Verdana, Lucida and (to a lesser extent) Arial and Times New Roman have served us well. For fifteen years, these cross-platform default fonts have been faithful stewards of our desire to read, write, design, and publish web pages. Yet we designers have always wanted more. As far back as 1994, we hoped for the day when we could brand our layouts as magazine and poster designers do, by setting our pages in Franklin or Garamond, our headlines in Futura or Rosewood. And since 1998, CSS2 has provided a standard way to embed any typeface, not just the fab five, on a web page.

In August, 2007, CSS co-creator and Opera Software CTO Håkon Wium Lie wrote CSS At Ten, reminding us that CSS provided a mechanism by which actual font files could be linked to and retrieved from the web. Soon after the article was published, “web fonts” discussions started popping up at interactive design festivals and my friend Jeffrey Veen got the idea for a product that would get web fonts happening without running afoul of inconsistent browser support, multiple format hangups, or type designer licensing agreements and piracy concerns.

Speeding up design acceptance

While browser improvements and web standards alone provided multiple partial solutions, Typekit offered a complete solution that just worked. And the people behind Typekit (including Bryan Mason and Jason Santa Maria) did everything right: they reached out to the type design, graphic design, and standards-based web design communities; they worked with vendor after vendor to offer as many fonts as possible; they spoke everywhere, marketing their venture one lecture and even one designer at a time.

Typekit excited the web design community about type and proved that licensing and hosting web type was a viable business, providing options and convenience for designers and their clients, while bringing new revenue to type designers and protecting their intellectual property.

Typekit is the tipping point

Publicly and truly, I support Typekit because it is getting us to the world of web fonts faster. We could wait indefinitely for type vendors to agree to industry-standard licensing terms and font formats. We could wait far longer for IE, Firefox, Safari, Chrome, Opera, Opera Mini, Mobile Safari, and the rest to support the same font formats. (Currently Firefox supports WOFF and TrueType, Safari and Chrome support TrueType, MobileSafari supports SVG, IE supports EOT, and on, and on.)

But with Typekit, we don’t have to bother our pretty little heads worrying about these inconsistencies, and we don’t have to sit on the sidelines, waiting for all font makers and all browser makers to support a single standard format.

Platforms and performance

Typekit works, and that helps web designers and type designers take “web fonts” seriously. Typekit’s success is even helping to make web designers and type designers more aware of platform problems that can make fonts hideous on various platforms. Georgia was designed for the screen. Garamond was not. Moreover, platforms vary the way they hint fonts (Apple throws out hinting altogether, Microsoft over-hints) and the way they render them (from purely pixellated to at least three varieties of sub-pixel anti-aliasing), making a font’s appearance on a given user’s system hard to predict.

If not for Typekit, we might have had to wait years for most or all type designers to license web fonts. Only then would we have discovered that body text set in anything other than Georgia and Verdana pretty much blows on many Windows OS, browser, and monitor combinations.

Thanks to Typekit, we all know about the problem, and type designers are re-hinting their fonts, and in some cases redesigning them for the screen.

For all this I and all of us can be grateful to Typekit.

They also understand that designers will only use “web fonts” if they have access to the fonts they need. Just as a huge selection enabled iTunes to dominate online music, Typekit’s makers know their service must offer pretty much every good typeface out there—and they are working on it.

Renting versus “owning”

All this said in Typekit’s favor, I have mixed feelings about their product because I’d rather buy a web-licensed font than rent it—and Typekit’s success at establishing the viability of a rental model means that individual type foundries will also rent their fonts—and those who succeed at renting their fonts to web designers may not be inclined to sell.

Of course you never really own the fonts you buy—you simply license their use. So the analogy of owning versus renting doesn’t exactly hold true. But a one-time font purchase as a line item in a design budget is easier to explain and sell to a client than an ongoing rental charge.

Web Standards and @font-face

My other qualm has to do with a preference for pure web standards over product-assisted web standards. I don’t know if my preference is ideological or just the way my mind works (or fails to). But, given my druthers, I’d rather see millions of websites using standard @font-face to link to self-hosted web-licensed fonts than see that same number of fonts using a service—even a brilliant service created by friends for whom I wish continued, deserved, great success. It must be a quirk of mind; there’s no other logical explanation for this preference.

For those who share this bias, possess the properly licensed fonts, and don’t mind using FTP and writing a little code, the CSS @Font-Face Generator by Font Squirrel provides an exceptionally easy way to automatically generate the font formats necessary to take all browsers (including mobile) into account—complete with automated Cufón backup and your choice of best-practice @font-face code strings.

See also FontSpring.

Read more

Categories
A List Apart Code Design Tools Usability User Experience UX Web Design

Fold, Spindle

Another generation of technology has passed and Unicode support is almost everywhere. The next step is to write software that is not just “internationalized” but truly multilingual. In this article we will skip through a bit of history and theory, then illustrate a neat hack called accent-folding. Accent-folding has its limitations but it can help make some important yet overlooked user interactions work better.

Accent Folding for Auto-Complete by CARLOS BUENO in A List Apart Issue No. 301

Illustration: Kevin Cornell for A List Apart

Categories
A List Apart Acclaim content strategy javascript Scripting Usability User Experience UX

A List Apart 300

Issue 300 of A List Apart for people who make websites solves password-related usability problems with a dash of JavaScript, and employs content strategy to help your site do the right thing at the right time:

The Problem with Passwords

by LYLE MULLICAN

Abandoning password masking as Jakob Nielsen suggests could present serious problems, undermining a user’s trust by failing to meet a basic expectation. But with design patterns gleaned from offline applications, plus a dash of JavaScript, we can provide feedback and reduce password errors without compromising the basic user experience or losing our visitors’ trust.

Words that Zing

by COLLEEN JONES

When someone consults a website, there is a precious opportunity not only to provide useful information but also to influence their decision. To make the most of this opportune moment, we must ensure that the site says or does precisely the right thing at precisely the right time. Understanding the rhetorical concept of kairos can help us craft a context for the opportune moment and hit the mark with appropriately zingy text.

Mandy Brown

Our 300th issue also marks the debut of contributing editor Mandy Brown. Mandy is a Creative Director at Etsy. She worked for nearly a decade at the venerable publishing house W. W. Norton & Company, where her work involved everything from book design to web design to writing about design. She writes about the reading experience at A Working Library. We are thrilled to add Mandy to our creative team.

Illustration: Kevin Cornell for A List Apart

Categories
A List Apart business client management clients Usability User Experience UX

Myths and Warnings

A List Apart Issue No. 294. Illustration by Kevin Cornell.

In Issue No. 294 of A List Apart, for people who make websites: learn what usability testing is and isn’t good for, and discover the five warning signs of a bad client relationship (and what to do about them).

The Myth of Usability Testing

by ROBERT HOEKMAN JR.

Usability evaluations are good for many things, but determining a team’s priorities is not one of them. The Molich experiment proves a single usability team can’t discover all or even most major problems on a site. But usability testing does have value as a shock treatment, trust builder, and part of a triangulation process. Test for the right reasons and achieve a positive outcome.

Getting to No

by GREG HOY

A bad client relationship is like a bad marriage without the benefits. To avoid such relationships, or to fix the one you’re in, learn the five classic signs of trouble. Recognizing the never-ending contract revisionist, the giant project team, the vanishing boss and other warning signs can help you run successful, angst-free projects.

Illustration by Kevin Cornell for A List Apart.

Short URL: zeldman.com/?p=2725

Categories
3e books CSS Design development DOM DWWS HTML5 javascript Publications Real type on the web Standards State of the Web Typography Usability User Experience Web Design Web Standards webfonts XHTML Zeldman

Am I Blue

Zeldman

Our classic orange avatar has turned blue to celebrate the release of Designing With Web Standards 3rd Edition by Jeffrey Zeldman with Ethan Marcotte. This substantial revision to the foundational web standards text will be in bookstores across the U.S. on October 19, 2009, with international stores to follow. Save 37% off the list price when you buy it from Amazon.com.

Short URL: zeldman.com/?p=2730

Categories
Browsers Fonts spec Standards State of the Web Usability User Experience Web Standards webfonts

Real type, real drag

You must read High Performance Web Sites Blog’s (yes, that’s really it’s name) @font-face and performance if you’re using @font-face to embed web-licensed fonts on sites you design (as I’ve done here).

Categories
An Event Apart Appearances business Chicago cities Design HTML speaking Standards Usability User Experience UX Web Design Web Standards Zeldman

Chicago Sells Out

An Event Apart Chicago, two days of design, code, and content.

An Event Apart Chicago has sold out. If you wanted to join us in Chicago on October 12–13 for two days of design, code, and content, we’re sorry to announce that the show has completely sold out. There’s not a spare seat to be had.

That means, if you don’t already have a ticket, you won’t be able to watch Jason Santa Maria, Kristina Halvorson, Dan Brown, Whitney Hess, Andy Clarke, Aaron Gustafson, Simon Willison, Luke Wroblewski, Dan Rubin, Dan Cederholm, and your hosts Eric Meyer and Jeffrey Zeldman share the latest ideas in design, development, usability, and content strategy.

We’re sorry about that.

But, hey. If you can’t be with us in Chicago next week, please join us in San Francisco later this year. Or come see us in 2010 at any of these fine cities:

Tickets for all our 2010 shows go on sale November 2nd, 2009, and are first-come, first served.

To keep up with the latest AEA doings, become a fan on Facebook, join our Ning social network, or subscribe to our mailing list.

Short URL: zeldman.com/?p=2651

Categories
A List Apart Usability

Let the Users Do It

Issue No. 293 of A List Apart, for people who make websites. Illustration by Kevin Cornell.

In Issue No. 293 of A List Apart for people who make websites: retrieve user-generated content and embrace user feedback to enhance your designs.

Discovering Magic

by GLENN JONES

Wouldn’t it be a little magical if, when you signed up for a new site, it said something like, “We notice you have a profile photo on Flickr and Twitter, would you like to use one of those or upload a new one?” Glenn Jones created a JavaScript library called Ident Engine that can help you do just that.

Usability Testing Demystified

by DANA CHISNELL

The value in usability testing comes from the magic of observing and listening as people use a design. The things you see and the things you hear are often surprising, illuminating, and unpredictable. This unpredictability is tough to capture in any other way. Dana Chisnell shows you how.

Illustration by Kevin Cornell.