Recent Blog Posts

Ahh, the "One Web" discussion, again. Don't worry, there's new content here.

First, let's address the definition problem. I've seen several floating around, including:

1. The link works on any device
2. Thematic consistency
3. Same technologies on every web device
4. Same experience on every device

As you undoubtedly know, we support the first three definitions, and disagree with the fourth. Sure, it's fine for some sites, but most certainly not for all.

mobile web

I'm talking about this now, again, both because it remains a major topic of disagreement and because of a recent Razorfish presentation. So take a few minutes to view John Pettengill's slides:
Is this objectionable? I think mostly not; we are looking at the slide deck, not the full presentation. Some of the weaker points were undoubtedly discussed in greater detail. It's also a well-crafted presentation.

the counter-argument

But some technologists and strategists vehemently disagree, as evidenced by the discussion about this presentation at Forum Oxford.

Their points:

1. This leads to fragmentation and transcoding problems. Not really. Device rendering limitations and differences leads to fragmentation.
2. Users expect the website to work no matter what device. Yes. Let's make that happen.
3. Mobile versions are not always necessary or desirable. True.
4. We'd have to create hundreds of different site versions: day/night, Windows/Mac, iPhone/RAZR/other phone, nationality detection, etc. This is a straw-man argument that ignores the reality of design and development.

how do you want your brand perceived?

Let's be clear: we at Little Springs Design have put together similar decks with similar messages. And we have largely similar clients, so I'm not talking to blog owners investing in my services. I'm talking to brand owners.

Razorfish's points, repackaged:

• Do you want to plan how your brand is perceived on mobile, or leave it to the vagaries of mobile rendering and have it not work on some devices?
• Do you want to use a technological subset of your current web experience, or do you want to leverage the capabilities of mobile for greater interactivity and value?
• Design content, brand, and interaction for user context.

Let's step outside of web for a moment, and consider these questions in other environments, such as retail. Franchises want to deliver a consistent experience to their customers, and have significant process, structure, and branding rules to ensure that this happens. Despite this, successful franchises adapt their brand to fit in the current context.

Take a few minutes to go look at different McDonald's storefronts in this Flickr pool; they vary widely in their context. Even inside the menu and ordering process will vary by context. McPork, sweet tea, get your own drink, Pepsi and not Coke because of mall rules are all examples of differing experiences.

So what kind of consistency is important? McDonald's fries are as I expect them. The hamburger is how I expect it. I have an idea of what's on the menu. The Golden Arches.

What kind of consistency is important in mobile, or in web in general? Core value, primary personality. Access to my content. Access to full content.

But we should consider different contexts in our design. Is a web search while the user is lying in bed at night the same as at on the bus? Maybe we make different versions, maybe we make the same but consider both contexts in the design.

our approach

I've finally managed to consolidate our web design approach into something mostly clear:

1. Consider your user's needs, brand needs, user goals, contexts, target devices, technology capabilities, and so forth. Design one or more versions of your content and interaction.
2. Design for progressive enhancement (good experience for most devices, better for those with more capabilities) for each version.
3. Build a set of page tweaks (extra padding/size for touch screens, different image sizes, different layouts for horizontal screens, don't display access keys on smartphones, etc.) to automatically re-render each version appropriate to the device requesting it.

Or: Dynamic page content must go beyond picking content from a database. It must now include context intelligence, including mobility.

Anything else will result in a suboptimal experience with lower brand value for some large set of your customers. Which might be fine for many sites, but not for all. Many of the better mobile web companies out there are doing this, though perhaps just focused on versions for different device classes. How to select the number of versions and what they support is some of the tricky bit: should a widget version have the same experience or different? High end device with NFC, location, camera should be the same as desktop or different? Same as low end device, or different? We take a balanced approach.

I say that the "mobile version" should not be subset of the full version. Let's get past that.

The mobile experience should be appropriate to the mobile context. It might have fewer, more, or the same features. Let's just make sure they are the right features whether they are on the desktop or not.

After lunch at the Paleteria, and buying tomato plants, Alison and a friend decide to give up from the unpleasant Kansas City heat and spend the afternoon in the house. I am working away in the office here, and mostly ignoring them but then comes the phrase “How many computers do you need?” from Alison’s office.

We’re a little extreme, yes. There are…five working, running, computers in the house? I think. I might be missing one. Alison’s laptop, while in her office, lives on top of an /entirely other/ working laptop. So it looks pretty needlessly extravagant.

I respond, “Well I’m using three right now.” So they wander in, and I explain that I’m not cheating. The desktop is two monitors, but that’s just one computer. And really, I am hardly using it but to type, point and look at.

Aside from the stuff in the cloud, every document I am working on is coming from this window (which I can’t show you as it’s all secret client stuff), which is files off on the work laptop propped up in the living room.

Okay, that’s two. And the third is my mobile handset.

“No, that’s a phone.”

She, essentially, says that she knows it’s complex and microprocessor controlled, but it’s not a computer, it’s a phone. That’s why it’s called a /phone/.

Ah, ha. But besides the fact I have made maybe one voice call on it today (and have no wireline phone, so no cheating here), it’s a computer. I have SMS’d back and forth a dozen times today. I email or use the (well-synched) calendar alarms to keep on schedule even when I go eat lunch or have to persuade the dog to come inside because the lawn guy is here to spray.

I have a perfectly functional office suite, a PDF viewer arguably better than some desktop ones, can synch a Bluetooth keyboard for speedier input, and routinely plug it into the projector for meetings at work. Quality is mediocre, but we’re half a step from being able to dock and use it as a desktop computer replacement for every work task that is not about actually drawing interfaces.

I can even make it look exactly like the other computer here at home, and I open up the file system for the handset right on my computer desktop. I can, and do, trade files back and forth just like the laptop. And when I am playing with or testing UI, I’ll load graphics and take screenshots on and off it constantly. It actually /is/ being used essentially just like the laptop right now.

I spend a lot of time here saying crazy things like “mobiles are little computers” but amongst ourselves it’s easy. Getting called on it from others is interesting, and made me look at it somewhat differently, and maybe believe it a little more than I consciously had before. I’m not sure Alison’s friend is convinced just yet, though.

I frequently get asked, both by clients and by our mobile web design training attendees about how much scrolling is okay. The answer is that in general, scrolling is better than fetching another page. Consider the length of an address book.

But that answer doesn’t go far enough. There are technology limitations: some devices can only support a markup size of 10,000 bytes or so. And many pages would be perceived as being too slow if they had 30 links or 15 images.

And the user has to know that the content scrolls. Even if the device does have scrollbars, they are likely to go unnoticed as a cue. So you have to design your content for scrolling.

Scrolling Recommendations

• Limit markup size to what the device can comfortably handle. This sounds obvious, but the “comfortably” bit is important, too. We’ve seen web sites that would render on a Motorola RAZR, but were so heavy that the device didn’t have any capacity to spare for moving the cursor in a timely fashion.
• Ensure users have a reason to scroll. Make the top part of your page/screen compelling. Avoid closure, false bottoms. Create expectations that more is below. This is especially important on landing pages.
• Use just-in-time fetching for infinite lists. For applications and browsers that support Javascript, don’t fetch a new page at all; instead add items at the bottom of the list as the user nears it. You can remove items at the top if you run out of memory. The Gmail Java ME application does this very well.
• Provide accelerators for certain lists. Opera Mini uses left and right to page-scroll up and down in some modes. Openwave browsers support volume up and down for page scrolling. The iPhone Address Book provides letter shortcuts and handles the problem of the letter being too small by only using it to scroll to a spot, rather than filter. Some sites have within-page navigation.
• Reduce page length by:
  • Using only key navigation links (maybe just Home) rather than a full set on every page.
  • Providing the first few items of a topic area, like the first 5 comments, and linking to a full list of comments
  • Only putting the spacing needed for touch users on touch devices

You can also make compelling user experiences without scrolling, but they will tend to be applications and have a lot of screen states.

I was fortunate enough to speak at, and attend, this month’s Mobile Design UK meeting. We had great presentations from Google, Nokia, Yiibu, and Little Springs Design.

Younghee Jungand Joe Macleod of Nokia spoke about mobile gesture research and design, following a process similar to our research. (I don’t have slides, but the above link has a lot of information, including a video presentation from the designers.

I like what Bryan and Stephanie are doing with their XML + Processing rapid prototyping method; we’ll be investigating it ourselves. Bryan says:

I wanted to explain some issues about how the US differs from Europe with regards to mobile use, and look at Internet and Telco thinking and our class-based design thinking. The slides may or may not do it justice; I’ll be talking more about the latter two topics over the next couple weeks.

Click the image to play the clip (30 min, MP3 format)

Designer and Author Steven Hoober is interviewed by Christopher Nemeth about his new book, “Designing by Drawing: A practical guide to creating usable interactive design.” Duration: 30 minutes.

From Steven’s blog: “This is a book for designers, prospective designers or other usability professionals who find themselves designing interactive systems of any sort.” The innovative thing about Steven’s book is the “community commenting” feature of his book, that allows for readers to contribute their own annotations to the book itself, allowing the text to become a “living document” that will grow with time.

For more information on the book, to buy or to add your own comments, visit the page. It can also be purchased from Amazon.com.

Since I wanted to show off some tools, I did an experimental and sorta terrible (i.e. you can’t really see any of the stuff I am holding up) video version of this. The video is essentially exactly what I say below (though not word for word in many places), so take your pick which one you use.

Click the image to play the clip (4m 36s, .MOV)

I have been thinking a lot about touch lately, especially for mobile phone use – some of it paid and secret – and the more I think about it the more I think there are two standard beliefs that I sort of disagree with.

First, I don’t think we have touch screens yet. I think we just have “point screens.” That means these are not too far from the mouse, and are almost exactly the same as the digitizing tablet I use every day. I have a “touchscreen” laptop as well, and there’s an N800 on the desk in front of me.

Pointing, like with a mouse or digitizing pen, is just pointing. There’s no functional difference between poking at the air and sliding your finger across a smooth glass screen. Touch on the other hand gives you some sort of feedback. You can feel the presence of a button, and when you press it get a response that you’ve actually moved it.

Which brings me to the second point. Fingers are pretty good at pressing buttons, but I am not sure they are much good at anything else. But people are tool users; we don’t just point, or point more precisely with stylii and so on. We use tools to accomplish tasks. And not tools in the sense of buttons, or mobile phones. I mean we can grasp things to manipulate other things.

Your basic toolbox is a good example, but I went and grabbed by old art supply boxes, because yes I am partly talking about the fascination with the ability to draw on your iPhone. I have a degree in printmaking, so have an unusually deep set of specialized tools hanging around.

The pencil is less obvious than it seems (much less, if you are a Henry Petroski fan. It’s not just a pointer, but a mark-maker. Each one has different characteristics, and interfaces with the paper in a way that makes it possible to draw, or draw straight lines.

Similar things happen with technical pens, charcoal and paint brushes, and more so the engravers I used in a certain kind of printing plate making. The interface between the tool and the surface guides it. For pencils and gravers, this helps you make more ordered lines.

I had forgotten about some of the tools I used. Burnishers, to polish or flatten items – several of them for different surfaces and end effects. Even a feather on a stick, to spread acid on plates for a certain kind of etching (called “spit bite”).

In all cases, There is feedback, not just from the direct interface of you grasping the tool, but of the tool changing or running over the surface. Even digitizing tablets do not do this well, though they tend to have texture to get halfway there. The pen tips are replaceable like pencil leads for this exact reason.

Now I am not saying we have to stop being exciting with, say, the ability to draw on your iPhone. I just want to be very, very clear about terminology or even the assumption (all too strongly stated on fanboi forums) that we’ve reached the nirvana of interfaces. Presuming that any one solution is not just the best today, but the best that could ever be will tend to stifle creativity and development of wholly new ideas.

Things like calling pointing on glass “touch” when there is no feedback I think lead to confusion over expectations and future terminology. Now we’ll have to explain what “haptics” means, and since that will probably launch in some half-assed manner, we’ll have to come up with yet another term for “really good haptics” later on still.

That’s the future I hope for in the relatively near term, haptic feedback will let you simulate the real world environment of things to manipulate on your flat screen. After that… I have no specific idea. Lots of things are possible. And that’s a key point. We have to constantly remember to keep our minds open to what could be The Next Big Thing, and try to understand what really would be a natural UI.

For any design problem, never assume the first answer that meets a bunch of your goals is the one final solution. Look at how users actually employ their devices, and in this case consider that tool using is about grasping items, precision and specific solutions for specific tasks.

I’m excited for the future, and look forward to the next great new idea.