Respect Users’ Data

One of the immutable tenets of designing mobile user experiences is to respect (and protect) your users’ data. This means, among other things, saving form data as users move from screen to screen and eliminating the need for them to type the same information more than once.

Time Magazine iPhone App
Time Magazine iPhone App

Time Magazine either didn’t know or didn’t follow this tenet in the latest update to its iPhone app. When I launched the app for the first time after updating to version 2.2 I was shown an alert telling me that my customized settings had been reset and that I needed to redo them. To be honest, I don’t even recall what settings I may have customized (I download and explore a lot of apps and many, like this one, almost never get used after the first week). But I certainly wasn’t going to customize anything again if my settings could just be wiped out without a warning.

There are several reasons my settings may have been reset: a change to the underlying data structure that rendered them unusable, settings that I had customized had been removed, careless or rushed programming, or a simple bug that slipped through testing. If there was a legitimate reason, the app could have done a better job of letting me know why. While this may be a trivial matter for infrequent users, it could be a big deal to someone who uses the app regularly.

Sometimes apps have to change their business rules and functionality as they evolve. This is unavoidable. But app creators can manage these changes better if they start with a healthy respect for their users.

Target Brand On Target Across Platforms

A recent discussion at work about how responsive web design could lead to brand consistency across platforms by repurposing and restyling shared content in a device-appropriate way got me thinking about how companies ensure common brand treatments in our multi-device world.

The theory underlying responsive design is that changes to stylesheets allow you to reuse your content on multiple devices, making it easier to maintain brand and stylistic consistency. For examples of this see the Media Queries site. Now there are plenty of usability issues with responsive design, such as pushing all your website content to mobile devices, but that’s outside the scope of this article.

So back to brand consistency across platforms. It’s not easy. But it’s also not an insurmountable task. And when I think about brands who maintain consistency across platforms and channels, Target immediately comes to mind as a best-of-class example.

Target’s recent redesign of its website introduced a bold new look for their main ecommerce property. At the same time, Target also launched a redesigned mobile website, iPhone and Android apps, and a promotional email template that strongly support the new look and feel. Once you are familiar with the Target brand, it’s clear where you are shopping no matter which platform you are using.

Target’s brand consistency is maintained with strict use of typography, layout, color, and icons. In a bold move, the famous Target logo is tucked behind the page header, a treatment also used on the mobile web, native apps, and email.

While the information design patterns for some parts of the experience are slightly different between the mobile web and apps, the brand treatment is fairly consistent.

Target has given the design community a great example of executing a brand in a consistent manner across various platforms, while still leaving room for the unique needs and constraints of each platform.

Target Website
Target Website
Target Email And Mobile Web
Target Email And Mobile Web
Target iPhone App
Target iPhone App
Target Android App
Target Android App

Safari Reader Improves Mobile Browsing

One of the little-mentioned features in Apple’s new iOS 5 is the addition of Reader in Mobile Safari. Reader, which was introduced in desktop Safari last year, allows a user to click a button in the browser address bar to render a webpage in a user-friendly, text-only format.

Reader instantly turns mobile webpages that may be poorly designed or have small fonts into elegant and highly readable pages. All ads, photos, and graphics are stripped from the page. Reader also merges articles that may be spread across several pages on a mobile website into a single scrollable page. And as with all things Mac, the handling of typography is excellent.

Reader is based on technology licensed from Readability, which also created a bookmarklet version for desktop web browsers and is embedded in the Amazon Kindle and popular iPad applications like Flipboard and Reeder.

Below is an article from the Chicago Tribune using the normal Mobile Safari display and Reader. I know which one I’d rather read.

Mobile Safari Reader
Mobile Safari Reader

What Makes a Great Mobile App?

This week I heard Alan Wells, director of product development at Globant’s Mobile Studio, speak on what makes a great mobile app. Alan was speaking as part of the Globant Mobile Roadshow. Here are my high-level notes:

  • A great mobile app or site needs a delightful user experience. When people only have a few minutes to get to know your app, the experience better be rewarding and fun or they may never use it again.
  • You have to think about the different use cases and contexts that apply to mobile usage. Sessions will be shorter but possibly more frequent than with your website. Think about morning and evening commuters popping in and out of your app. Design experiences that deliver value that can be had in just a few minutes.
  • Use cases for tablets are different than for handheld devices. Sessions may be longer. People may be using your app in unusual places, like while reclining on their sofa. Don’t just think of a tablet as a smaller laptop.
  • Embrace the constraints and capabilities of mobile devices. Screens are limited in size, so use that constraint to simplify your app and strip away functions that don’t apply to the mobile context. Capabilities like goelocation and an accelerometer open your app up to functions you couldn’t have considered in the desktop version. Explore those to create those delightful experiences.
  • Higher resolution screens on newer high-end devices don’t change the basic needs of the touch target. Always design with the fingertip in mind.
  • Don’t just port a web app to mobile devices. Build for the mobile context from the start.
  • When creating a mobile companion to a full web app reuse or re-purpose the artistic elements when possible to create a consistent and cohesive experience.
  • Think carefully about whether your app is a companion app or needs full feature parity with the desktop version. Companion apps have an advantage in extending the desktop experience and increasing overall engagement with your brand, without you having to replicate every feature (many of which will never be used in the mobile context).
  • Weigh carefully whether you want your app connected to your website. A connected app will require more communication between development teams and more coordination of releases, but also can promote greater engagement and a seamless, cross-platform user experience.

Tobii and Lenovo Experiment With Eye-Controlled Laptop

Eye tracking equipment maker Tobii recently demonstrated an experimental laptop designed in collaboration with Lenovo that uses a person’s eye movements to interact with the computer’s user interface.

The interactions involve combining mouse clicks or keystrokes with eye movements to provide an enhanced user experience. The eye tracking dimension of the demonstration shows that eye movement would be used to complement, not replace, keyboard and track pad input from the user’s hands. Anders Olsson of Tobii demonstrates in the video below the modified Windows 7 user experience.

See Tobii’s press release for more details.

Visualizing the Futures with Kevin Henry

I attended a fascinating lecture tonight on product design given by Kevin Henry, an associate professor of design at Columbia College in Chicago. Henry’s talk explored techniques industrial and interactive product designers can use to visualize their designs and visions.

While his talk, organized by the Chicago chapter of the Interaction Design Association, focused heavily on industrial design, it also looked at how interaction design techniques like sketching and prototyping play important roles in product discovery and envisionment.

This video is of a similar lecture he gave at the Segal Design Institute at Northwestern University in December.

Yahoo Bus Stop Derby

Now this is just fun and cool and engaging.

Yahoo recently rolled out a marketing campaign for its mobile apps called Yahoo Bus Stop Derby that lets people at 20 San Francisco bus stops play games against each other. The derby features four games played on 72-inch LED touch screens at the bus stops. The games allow people to indicate the neighborhood they live in for an added element of citywide competition. The campaign ends Thursday and the winning neighborhood wins a concert by the band OK Go (North Beach was winning this afternoon).

Further proof that the convergence of wireless and multi-touch technologies is changing everything.

Marty Cagan and Designing Great Products

Last week I had the good fortune to spend two days learning about designing great software from Marty Cagan of the Silicon Valley Product Group. Cagan’s approach to creating great consumer software products comes from years of working on wildly successful ones, such as Netscape, AOL, and eBay, and is a radical change from the traditional approaches many companies still use.

Cagan’s two-day seminar presented the topics raised in his 2008 book Inspired: How To Create Products Customers Love along with advice tailored directly to the audience, in this case my company,

One of the key aspects of Cagan’s approach is a focus on a core working relationship between the product manager, the lead engineer, and the lead interaction designer supporting a product. His method places heavy emphasis on a great user experience as a key part of making software people really want to use. He also advocates delegating product design decisions down to the product manager and empowering that person to make the right choices, while people managers and other leaders are tasked with doing what needs to be done to develop their product teams so they can be trusted to execute.

The book is a quick read and well worth the time as it opens up a new way of thinking about product management and software design.

UXXU 2011: Designing for Good

UXXU Team Structure
UXXU Team Structure

I’m getting totally psyched about taking part in UX4Good’s UXXU 2011 design competition later this month. The event is a very cool idea and a great way to meet and interact with other UX and visual design pros while having fun and trying to solve some of the most challenging social problems of our world.

UX4Good was launched by the cool folks at Manifest Digital in Chicago. Hopefully there are more efforts like this in the future so we can harness all the amazing creative energy in our field. I can’t wait to see what we come up with.

Learn more about UX4Good and UXXU 2011.

RIApalooza 3: A Look at the Future of RIAs

Every time I get a glimpse of the future of web and app development, I can’t help but believe the best has yet to come. I got that feeling again yesterday at RIApalooza 3 in Chicago, an insightful yearly conference that aims to advance the development of Rich Internet Applications.

Speakers included the always engaging Chris Bernard, a Microsoft User Experience Evangelist, who delivered the keynote on the future of RIAs. The big take away for me, besides Chris’ great “7 things I learned from John Hughes” segment, was the idea that to better understand and grow in the RIA space you have “go where you are uncomfortable”. His message was essentially this: if you are a Flash developer, explorer HTML5; if you are an Flex developer, explore Silverlight. Chris urged designers and developers to not let our focus on an particular development platform define us as technologists, lest we become the buggy whip makers in the next web technology revolution.

Other speakers included consultant Michael Labriola, who spoke on the major striations of internationalizing and localizing a product. Micheal’s examples were in Adobe Flex, but his lessons apply to whatever development platform you use. He examined several layers in terms of effort and return on investment to demonstrate what can be accomplished quickly, what takes up-front planning, and what fine-tuning work truly makes an application localized. If you are building for a global audience, the tips he provided were golden.

Another great talk came from Adobe’s Renaun Erickson, who demonstrated how Flex 4 could be used to build mobile apps that scale across many devices with different Pixel Per Inch screen densities without having to code device-specific apps. This is valuable if you developed an Android app with the Droid X in mind and want it display correctly in another handset with a different PPI density. This flexible development approach is also useful when handsets from the same manufacturer have different PPI densities, such as iPhone 3GS and iPhone 4. But he advised that when you think about porting an iPhone app to the iPad, it may be time to look at a separate app that takes advantages of the iPad’s much larger surface.

All in all a great day of insightful talks from some really smart people. Not a bad way to end the week.