Touch-based App Design for Toddlers

As always, Luke Wroblewski nails it:  

When kids interact with software they explore and engage with anything that looks interesting. Especially if it looks like content. Graphical user interface components don’t.

Consider the example of Dr. Seuss’s ABC book on the iPad. The intro screen uses colorful blobs to bring attention to large hit targets. But tap on one of these elements and up pops a standard modal menu asking you to select from one of three options. Modal menu dialogs and kids don’t mix.

More at lukew.com.

Support the families of the fallen, if Facebook lets you.

ONSTAR WILL DONATE up to $250,000 to the families of police officers killed in the line of duty. For every person who fans OnStar, they will donate a dollar to the families. This is a great cause; I encourage you to fan Onstar and help the families of the fallen.

Sadly, I can’t do so myself, as Facebook has told me I have too many friends and fan pages.

How many friends is too many? Whom should I remove? Which fan pages should I unlike, if I could manage Facebook likes?

Here’s the nuttier part. Although I can’t add friends or pages, people can still add me. Every day at least half a dozen people do so. Some of them may have attended An Event Apart. Some may like A List Apart or A Book Apart. Others may have read Designing With Web Standards. Or this website. In some cases I know why people are reaching out to me; in others I don’t. This doesn’t bother me. I pretty much always say yes to new Facebook friends.

My reward for contributing significantly to Facebook’s content and networks is that I can never add another friend or fan another page (although anyone can add me as a friend).

Fanning Onstar to help the families of the fallen is much more important than this silly problem. I don’t lose sleep worrying about the friends I can no longer make on Facebook. I’m not complaining for personal reasons. I just wanted to point out—for my friends who work at Facebook and read this site—that Facebook’s rules about friends are arbitrary, incomprehensible, and broken. And in this case, this foolishness hurts (however slightly) the families of fallen officers. And that’s really not right.

Managing Facebook Like. Or not.

I’M ON FACEBOOK. I want to see everything I supposedly “like” and prune the list of things I don’t. There should be a page where I can do this—that’s UX Design 101—but instead there’s just a sidebar box on my profile page showing a rotating, random sampling of liked items. The box is fine as an outward-facing device: on my profile page, it gives visitors a teasing hint of some of the cool stuff a deep guy like me digs. But inward-facing-wise, as a tool for me to manage my likes, it’s useless.

At the top of sidebar box, there’s text stating that I currently have “372 likes.” The text is a hyperlink. Here’s what should happen when I click that link: I should be taken to a page listing my likes (or the first, say, 100 of my likes, with a pagination tool). Each liked item should link to its corresponding Facebook page in case I need to refresh my memory about it. (This is the one part Facebook actually gets right.) More importantly, each liked item should be preceded by a checkbox. I should be able to check off 50 items on the page that I no longer like, and press a button allowing me to delete them all at once.

A number of elegant variations will occur to even the least experienced interface designer at this point: Perhaps there’s a drop-down allowing me to choose functions other than deletion; perhaps there’s a link to “select all” or de-select all; and so on. Such variations could make Facebook’s hypothetical best-practice “like management” page easier, faster, or more pleasant to use. But they are pretty much beside the point, as Facebook does not provide a like management page when I click that stupid link.

When I click that link, what I get instead of a useful, simple management page—the kind we’ve been building in hypertext for over 15 years—is a small, in-page pop-up window, with a scrolling sidebar … because, like the sidebar box, this window is also a tease instead of a tool.

Inside that scrolling box is every item I’ve liked. I have to scroll to see anything beyond the first handful of liked items. There are no checkboxes. There is no master switch to delete one or more items. There isn’t even an in-place deletion button beside each listed item, like the primitive edit tool in the first iPhone 3G.

No, my friends. There’s nothing.

If I want to delete a liked item, get this! I have to click the item’s hyperlink, go to the individual item page, and then hunt around on that page in search of a tiny link that would let me “unlike” that item. If I manage to find that link and unlike that one item, there’s no confirmation dialog, and I’m not returned to the floating box, because the item’s like page doesn’t know about the box.

All that JavaScript, and no connections. All those pages, and not even the most basic tools.

And nobody complains. Why? Because nobody really uses liked items. Indeed nobody really uses Facebook, except to post links and photos and comment on their friends’ links and photos. Liked items are for advertisers, they’re not for you. In Facebook’s estimation, you don’t need to remove a page you no longer like, because you are never going to visit it anyway.

Hey, they have the stats, they know what their users do and don’t do.

Facebook is a charnel house of features that appeal to advertisers and businesses without actually being used, supported by tools that don’t work, for people who don’t care.

Now I, uh, like Facebook fine, for the same reasons you do (if you do), and I generally ignore its well-branded but otherwise abortive gestures toward key features that have made it famous without actually doing a damned thing—“like” being the people’s Exhibit A. But as a designer, it bothers me, not only because badly designed things bother designers, but because badly designed things in a highly successful product spur a lust for imitation. I don’t want our clients to think “like” works. I don’t want them desiring similarly broken functionality on sites we design for them. I don’t want them thinking users don’t need tools that work, simply because millions of users don’t complain about broken tools on Facebook. Tools like like and its sad little pop-up.

Me no like.

Making the web more awesome: Karen McGrane on the big web show this week


Karen McGrane, designer of The New York Times website and managing parter at Bond Art + Science is our guest on Episode #25 of The Big Web Show, taped live before an internet audience at 1:00 PM ET Thursday, 28 October at live.5by5.tv.

We will discuss putting publications online (Karen has worked with The Atlantic, The Week, Fast Company, and Conde Nast, and just launched National Journal), the horrifying state of content management, careers in web design and development, running a design business, teaching UX and design, and the explosive web and interaction design scene in New York City, where Karen has long been a major player.

If the internet is more awesome than it was in 1995, Karen would like to claim a very tiny piece of the credit. For more than 15 years Karen has helped create more usable digital products through the power of user experience design and content strategy. Today, as Managing Partner at Bond Art + Science, she develops web strategies and interaction designs for publishers, financial services firms, and healthcare companies.

Prior to starting Bond, Karen built the user-centered design practice at Razorfish in her role as VP and National Lead for User Experience. Karen is also on the faculty of the MFA in Interaction Design program at SVA in New York, where she teaches Design Management, which aims to give students the tools they need to run successful projects, teams, and businesses.

The Big Web Show (“Everything Web That Matters”) is recorded live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

“Similar to You”

IN THE TRADITION of “People who bought ‘Assmasters’ also bought ‘Assmasters II,'” Twitter has chosen four of my Twitter friends and is presenting them to me as being “Similar to You.” Pray what does this odd-in-this-context phrase, with its “Related Products” vibe, mean? Does it mean if I like myself, I would also like these people? Surely not, for I already know that, as demonstrated by the fact that I follow them. Were they chosen for discussing similar subjects (e.g. design, web design, CSS, semantic markup)? Unlikely, as that would imply Google-like keyword data mining and analysis bordering on artificial intelligence.

Then, what? It can’t mean people whose tweets resemble mine, as the Twitter writing style and frequency of the listed friends is purely their own. People with whom I have followers in common? That seems most likely, but it’s just a guess.

I’m curious to know what Twitter and its new CEO (hi, Dick!) mean by this. What is the marketing purpose of this feature? Am I to view Twitter as an informal “personal brand analysis” service? That could be cool for me and for the four people who are “Similar” to me. But surely most users would be uninterested in such a service, unless, unbeknownst to me, nearly everyone who uses Twitter is a marketer who views it primarily as a channel. And most companies don’t spend money developing long-tail features, of interest only to a tiny fraction of their users.

I love Twitter. I wish I’d invented it, and not primarily because if I’d invented it I’d be taking the Japanese women’s gymnastics team on a round-the-world cruise. I wish I’d invented it because it is something really new on the internet, like the web, and filled with potential, like the web. As a designer, I pay attention to Twitter same as I do Apple, Google, Flickr, and Facebook. The new feature intrigues me precisely because its language feels “off” and its purpose eludes me.

Also of interest, although less so: what data is being used, and how is it being analyzed?

What’s your theory?

ALA 314: Web Forms Magic

Issue No. 314 of A List Apart For People Who Make Websites is all about your form.

Ryan Seddon shows how to reduce errors and guide users to success via new methods made possible by HTML5 and CSS3. Harness HTML5 form input types and attributes to set validation constraints to check user input, and use CSS3’s new UI pseudo-classes to style validation states, making form completion quick and effortless.

And Luke Wroblewski explains how accordion forms increase completion rates and user happiness by dynamically showing and hiding sections of related questions as people complete the form—allowing them to focus on what matters and finish quickly. Learn how your smallest design decisions affect completion speed, which design choices make these innovative forms feel familiar and easy—and which make them feel foreign and complex, leading people to make errors.

Illustration by Kevin Cornell for A List Apart Magazine.

I guest-edit .net magazine

Web 2.1. Zeldman guest-edits .net magazine.

A List Apart and .net magazine have long admired each other. So when .net editor Dan Oliver did me the great honor of asking if I wished to guest edit an issue, I saluted smartly. The result is now arriving in subscriber post boxes and will soon flood Her Majesty’s newsstands.

In .net magazine Issue No. 206, on sale 17th August in UK (and next month in the US, where it goes by the name “Practical Web Design”), we examine how new standards like CSS3 and HTML5, new devices like iPhone and Droid, and maturing UX disciplines like content strategy are converging to create new opportunities for web designers and the web users we serve:

  • Exult as Luke Wroblewski shows how the explosive growth of mobile lets us stop bowing to committees and refocus on features customers need.
  • Marvel as Ethan Marcotte explains how fluid grids, flexible images, and CSS3 media queries help us create precise yet context-sensitive layouts that change to fit the device and screen on which they’re viewed.
  • Delight as Kristina Halvorson tells how to achieve better design through coherent content wrangling.
  • Thrill as Andy Hume shows how to sell wary clients on cutting-edge design methods never before possible.
  • Geek out as Tim Van Damme shows how progressive enhancement and CSS3 make for sexy experiences in today’s most capable browsers—and damned fine experiences in those that are less web-standards-savvy.

You can also read my article, which asks the musical question:

Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a newer, more mature, more ubiquitous web?

Today’s web is about interacting with your users wherever they are, whenever they have a minute to spare. New code and new ideas for a new time are what the new issue of .net magazine captures. There has never been a better time to create websites. Enjoy!


Photo by Daniel Byrne for .net magazine. All rights reserved.

A List Apart 311: Say No to Clients and Kick Ass

A List Apart Issue No. 311

Something remarkable awaits you in Issue No. 311 of A List Apart for people who make websites. Two wonderfully readable articles tackle the thorny subject of client relationships, providing practices, insights, and tips which, when taken to heart, will help designers, UXers, and (frankly) clients do their jobs better:

One of the toughest parts of the client/designer relationship is that nobody likes to be told “no”—especially not the client who is paying you. But to do your job right, you often have to turn aside requests for what the client wants in favor of what the user really needs. In No One Nos: Learning to Say No to Bad Ideas, Whitney Hess explains when to say no, and how to turn it into a positive experience.

Of course, your ability to speak truth to the client assumes you’ve established a mutually respectful, goal- and team-focused relationship in the first place. And the first place is exactly where to begin establishing just that kind of relationship. In Kick Ass Kickoff Meetings, Kevin M. Hoffman shows how to use the first official meeting to turn a roomful of mutually suspicious turf battlers into an energetic team with shared ownership of the end-product.

Not only are these articles convincing, I know these techniques work, because we use them at Happy Cog.

Also in this issue, ALA illustrator Kevin Cornell outdoes even himself.

Join us, won’t you?

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Explore our articles and topics.