To illustrate, let's look at two mobile forms for booking a hotel: one from the Expedia mobile Web site, the other from the Kayak iPhone application.

Expedia's mobile Web site has made several modifications to the desktop version of their hotel booking form: the layout has been optimized for slender mobile screens; the "search near" set of options has been listed out; and the room count input uses a set of "+" and "-" buttons instead of a drop-down menu for input. Yet, there's still room for improvement.

1. The form uses a free-form text input field that requires users to provide clarifying information on another screen if a mistake is made. And in many mobile contexts (fat fingers, one-handed typing, on the go) —mistakes do happen.
2. The date selection field makes use of a calendar pop-up that requires people to tap a small ">>" target to advance to the previous or next month.
3. The set of inputs for guest count uses (up to) three drop-down select menus for input, which require manipulating a list of options in a pop-up list.

Kayak's mobile iPhone application also allows people to book hotels but it features a few additional mobile optimizations.

1. Current location is available as a single click input in addition to a free-form text input. This allows people to search for hotels where they are now without typing.
2. The free-form text entry field provides inline suggestions as you type. This not only reduces the amount of typing required (it only took me 3 characters to see Monterrey, CA), but it reduces errors as well. On the Kayak form, there's little need for the clarification screen Expedia requires.
3. The date selection calendar allows people to use a simple scroll gesture to move between months instead of tapping a small target to change months. Users can just flick the calendar itself up or down through direct manipulation instead of having to use the ">>" control Expedia requires.
4. The Kayak form doesn't use any drop-down menus, opting instead for "+" and "-" buttons that are easily tapped on a touch screen. (I'm not sure why Expedia uses these for room count but not guest count as both inputs only need to support a small number of possible values.)

In aggregate, these small enhancements go a long way to making forms on mobile devices faster and easier for people to complete.

For more on Form Design...

Check out Luke's book about Web form usability, visual design, and interaction design considerations: Web Form Design: Filling in the Blanks.

• In January 2010, 11.1% of all mobile phone users accessed a social networking site via mobile browser, an increase of 4.6% points from the previous year. (source)
• 30.8% of smartphone users accessed social networking sites via their mobile browser in January 2010, up 8.3 points from 22.5 percent one year ago. (source)
• Access to Facebook via mobile browser grew 112% in the past year to 25.1 million users in January 2010. (source)
• Access to Twitter via mobile browser experienced a 347% jump to 4.7 million users in January 2010. (source)
• Facebook’s iPhone usage jumped 20% in under a week at the start of March 2010 (source)
• More than 100 million people actively using Facebook from their mobile devices every month. This comes less than six months after Facebook announced 65 million people on Facebook Mobile. (source)

Official Description

The web has been transformed by the recent proliferation of rich interactions and applications. But the workhorses of the online world, web forms, have been slow to evolve with these changes. As brokers of crucial online interactions like e-commerce checkout and registration, forms bridge the gap between people, their information, and your product or service. As a result, web form design matters. But web forms aren't keeping up.

Come see a walk-through of the latest applications of rich web form interactions (made possible by dynamic technologies like AJAX) including: dynamic help systems, inline validation, selection dependent inputs, and more. Also get an outline of how gradual engagement approaches to form design can create compelling new user experiences for a wide variety of web applications and services. Learn how these modern approaches to web form design can enhance your websites and applications.

Hope to see some of you there!

On March 24th 2010 I’ll be speaking at the UIE Web App Masters Tour in San Diego, CA about Input: Moving Beyond Static Web Forms. I'll discuss several ways Web applications can collect user input, through both mobile devices and desktop software, without forcing users to complete a lengthy sequential forms.

If you are interested in going, feel free to use the discount code: LUKE for $100 savings on the event cost.

Official Description

A web app can't exist without the user's input. We need the data, but do we need the form? Traditional web forms, made up from text fields, radio buttons, check boxes, and a submit button, have been the mainstay of application design. In e-commerce, social applications, and productivity tools, web forms continue to define crucial web interactions. Thankfully, new approaches for input now give designers more to work with and create better user experiences.

Today's interaction techniques, powered by technologies like Ajax, move us beyond the static submit-and-refresh page model, delivering users real-time feedback and providing lightweight interactions. With these tools, we increase the quality and accuracy of user inputs, encourage further contributions, and reduce the users' pain. What was a static form now becomes an engaging conversation.

Luke will explore several novel ways web applications can collect user input, through both mobile devices and desktop software, without forcing users to complete a lengthy sequential forms. He’ll provide detailed research-based solutions that articulate not only the “how” but the “why” as well. You'll walk away with practical web form design solutions you'll immediately put to use.

Luke's pioneering approach to web design has always made us think about how to create great user experiences. His best-selling book, Web Form Design, is a treasure we reference frequently. We easily understand why Yahoo! appointed him as their Chief Design Architect, where he's contributed to major design improvements across the entire company. We know you'll be blown away by his session.

1. Focus on user-research to find out what people need/want. The downside of this “user testing” model is that users can lead you astray. For example, if you ask everyone what their favorite color is the average will be gray.
2. Bring a specific vision to life through an impression of the user you want to have. The downside of this “strong designer” model is if designers don’t know what they are doing, it could be a disaster.

Author of Designing Web Interfaces, Bill Scott, contacted me recently to suggest a third model of doing design: quantitative analysis driven mostly through rigorous A/B testing (exemplified by Amazon and Netflix). My first response was "I don't think Alex considers that doing design" but the actual situation is a bit more nuanced.

In fact, I believe there are actually three main ways to make software user interface decisions: Designing, Optimizing, and Managing. Each of these models can “move pixels” on the screen but not all are explicitly design-driven. Depending on the model a product team is most comfortable using, expectations of design professionals and their output can vary. As a result, it may be useful for interface designers (be they visual, interaction, or information focused) to consider the prevalent model on their team and act accordingly to either shift or meet expectations.

1. Designing: decisions are evaluated by how well they contribute to an integrated “human-centric” experience. This is the model most designers crave because it leverages their ability to empathize with their target audience and think holistically.
2. Optimizing: decisions are made based on explicit testing of isolated variables to drive very specific behaviors. Designers create variations of a control that are evaluated systematically. The elements that perform best likely become part of the user interface.
3. Managing: decisions are reached through discussion or debate. In this model, designers represent the collective decisions of groups within the product by laying out what everyone agreed to.

While all of these models may be in use at the same organization, perhaps even on the same product, I think it is useful for designers to be aware of the distinction so they know how to operate effectively. Most organizations skew pretty strongly to one style of decision making or the other. However, a healthy integration is where the magic happens.

• Gigya sharing activity from February 2010: Facebook 44%, Twitter 29% Yahoo 18%, MySpace 9% (source)
• AddThis sharing activity from February 2010: Facebook 33%, Email 13%, Twitter 9%, Google 6%, MySpace 6% (source)
• Tell-A-Friend sharing activity from November 2009: 59% of all shares on the widget were done via email, 25% via instant messenger and just 14% were passed along on networks like Facebook (11%) and Twitter (1%). (source)
• ShareThis sharing activity from October 2009: 46.4% of all shares on the widget were done via email, 33.32% via Facebook and 5.82% through Twitter. (source)
• AddToAny sharing activity from July 2009: Facebook has 24% of shares using their widget, Email has 11.1% and Twitter has 10.8% (source)

• There are two distinct approaches to design
• One focuses on user-research to find out what people need/want. This approach is exemplified by Microsoft and is used mostly to mitigate risk. The downside of this “user testing” model is that users can lead you astray. For example, if you ask everyone what their favorite color is the average will be gray.
• The second tries to bring a specific vision to life and an impression of the user they want to have. This approach is exemplified by Apple and can result in huge success or failure. The downside of this “strong designer” model is if designers don’t know what they are doing, it could be a disaster.
• Mozilla’s design team has a specific vision they want to bring to life but they do so in the open.
• In open source design, everyone has an opinion that needs to be heard so they stay engaged.
• The design team deals with all these opinions with this by focusing on core principles to make decisions and giving contributors freedom to explore.
• “That would make a great extension”. The extension model gets people out of debates –they can always build an extension to bring a feature they believe in to life.
• In open source, you need to elevate contributors who know what they are doing. The Firefox team nominated designers who were criticizing the logo to fix it.
• Flow: cognitive state people enter when they no longer focus consciously on the means of accomplishing the task they are doing –they just naturally do it. How can the interface fade away in software products?
• How to not draw attention to Firefox but still be unique? The team divided visual elements (shape, colors, textures, etc.) across two objectives: half were used to blend with the operating system, the other half were used make Firefox feel unique.
• Visual hierarchy: most common actions get the most prominent treatment. Tivo remote is a great example of this. Playstation 2 remote is an anti-example.
• Physical: how quickly can you get to where you want to interact? Cognitive: can you remember where the control is (similar to landmark recognition)?
• You can still tell what the controls in Firefox are even without the icons. They have a physical recognition.
• Quicksilver is a software product that molds behavior over time. It gets more streamlined the more you use it. Alex “stole” that idea for the Firefox Awesome bar. The Awesome bar meshes with how people use the browser address bar and gets better with use like Quicksilver.
• Selective variables: people can process visual variables in a single glance. Color works effectively to distinguish information. Google search results work this way: blue links, green domains/urls.
• Firefox 4 will finally put tabs on the top (after a lot of back & forth debate).
• It will have a locally hosted home page. The Web browser knows a lot of things about your Web surfing patterns. Could display, for example, RSS from pages you visit often.
• The team is exploring location to tune content on home page and “app tabs” as a more permanent element in the Web browser
• Private browsing mode in Firefox 4 has a very dark color.
• The Web is maturing into a full application platform. Have more access to things only the operating system could tackle before.
• Almost everything boils down to personal preference. The final solution to almost everything in Firefox is to “give the user the option”. This adds up to too many options and makes for a difficult UI.
• The role of a designer in an open source company is to facilitate ideas rather than be the source.

Jeremy built the form to work as you'd expect. You can tab between the "blanks" just the way you tab between standard Web form input fields. You can click on any "blank" to start entering text. The password "blank" masks any characters you enter just like a standard password input, and the whole form manages errors if you answer any questions incorrectly. In other words, it works like a standard Web form but it looks quite different. The presentation is inviting and fun, which is quite unlike a standard Web form.

After seeing the Huffduffer form in action, I was curious how it would perform against a traditional form. Would people be more inclined to complete it because of the narrative format? Or would the unfamiliar presentation format confuse people? Thanks to Ron Kurti and the team at Vast.com, I now have some early answers.

Ron and his team ran some A/B testing online that compared a traditional Web form layout with a narrative "Mad Libs" format. In Vast.com's testing, Mad Libs style forms increased conversion across the board by 25-40%. You can see a before and after view of the Contact Dealer forms where they ran these tests below.

Most of the input fields have stayed the same but the "comments" text area has been replaced by a "personalize this message link" and the phone number set of three input fields has been replaced a single flexible input. While it's possible these adjustments also contributed to the increase, it's unlikely they were solely responsible for it. As a result, the mad libs layout likely had an impact as well.

Examples of this form are live at Vast, Kelley Blue Book, and several more sites. Ron and the Vast.com team are rolling out new versions of these forms over the coming weeks and will continue to test improvements. Hopefully, they'll be able to share their results again.

Thanks to Ron Kurti for sharing these images and performance stats!

For more on Form Design...

Check out Luke's book about Web form usability, visual design, and interaction design considerations: Web Form Design: Filling in the Blanks.

About Vast.com

Vast.com, Inc works within the auto, travel, and real estate industries to create online marketplaces for the world's most respected companies. Partners such as Kelley Blue Book, Orbitz Worldwide, AOL, and Overstock have integrated Vast's custom platform into their portals to serve over 20 million consumers per month.

Scrubbers differ from standard pagination controls because they usually:

• Display a large set of elements to choose from that communicates the range of content available (not just previous and next actions).
• Use small multiples to display the set of options visually
• provide a larger (zoomed in) preview as people browse the set.

Not all of Apple's scrubbers have each of these characteristics, but they all have at least one.

Scrubbers have also gotten picked up by developers creating content for the iPad -as illustrated in Wired's iPad application demo. Chances are when iPad applications become available in the App Store, there will be several apps that follow Apple's model and make use of scrubbers for navigation of content and media sets.

Check out more articles about the design of the iPad.

• Globally, social networks and blogs are the most popular online category when ranked by average time spent in December. (source)
• Consumers spent more than 5.5 hours on social networking sites like Facebook and Twitter in December 2009, an 82% increase from the same time last year. (source)
• 47% of online adults use social networking sites, up from 37% in November 2008. (source)
• 73% of wired American teens now use social networking websites, a significant increase from previous surveys. Just over half of online teens (55%) used social networking sites in November 2006 and 65% did so in February 2008. (source)
• Facebook is currently the most commonly used online social network among adults. Among adult profile owners, 73% have a profile on Facebook, 48% have a profile on MySpace and 14% have a LinkedIn profile. (source)
• Twitter now has 75m user accounts, but only around 15m are active users on a regular basis. (source)
• Twitter is processing more than one billion tweets per month. January passed 1.2 billion, averaging almost 40 million tweets per day. (source)
• The activity on Twitter has doubled since August 2009. January 2010 had 16 times as many tweets as January 2009. (source)
• Twitter users were tweeting 5,000 times a day in 2007. By 2008, that number was 300,000, and by 2009 it had grown to 2.5 million per day. Tweets grew 1,400% last year to 35 million per day. Today, Twitter is seeing 50 million tweets per day—that's an average of 600 tweets per second. (source)
• 64% of Twitter’s users are aged 35 or older. The average Twitter user is 39 years old. (source)
• Facebook now has more than 400 million active users. 50% of active users log on to Facebook in any given day. (source)
• More than 100 million people actively using Facebook from their mobile devices every month. This comes less than six months after Facebook announced 65 million people on Facebook Mobile. (source)
• Facebook says more than 3 billion photos are being uploaded every month, up from 2.5 billion in December, 2 billion in September and 1 billion in July. (source)
• Facebook reported 1 billion items (web links, news stories, blog posts, notes, photo albums, etc) shared a week in July 2009, 2 billion shared a week in September, then a big jump to 3.5 billion in December, and another big jump to 5 billion a week as of February 2010. (source)
• Facebook users are also posting 60 million status updates a day or 50 percent more than they were in September. However, the overall percentage of Facebook’s user base posting status updates has actually fallen with 35 of the 400 million users publishing these per day. (source)
• 61% of Facebooks’s users are aged 35 or older. The average Facebook user is 38 years old. (source)
• There are more than 3 million active Pages on Facebook, nearly double the 1.6 million it reported in December. Pages that Facebook defines as local businesses went from 700,000 actives to 1.5 million. In other words, local businesses comprised half of the overall increase in active Pages over the last couple of months. (source)
• 13% of US traffic to big web portals — Yahoo, MSN, AOL — came from Facebook in December 2009. (source)

In his Mobile World Congress keynote address, Google CEO Eric Schmidt recently outlined a similar philosophy:

In Schmidt's view, the current mobile ecosystem and its future incarnation are the result of three intertwining factors: computing power, connectivity and cloud computing. The mobile phone is the high-volume end point of these trends, it becomes the defining product in that space. This led to his belief in the "mobile first" doctrine, as Google programmers are doing work on mobile applications and technology first, because "mobile apps are better apps" and that's what top programmers want to develop.

Guess I can now add "excited programers" to the list of reasons to design mobile first!

Tags: mobile, google, process, technology]]>2010-02-18http://www.lukew.com/ff/entry.asp?1003While the Windows Phone 7 Series user interface may not be optimized for high information resolution, it does make interesting use of teases and transitions as highlighted in the video below.

Because it is a touch-based device, the Windows Phone 7 Series uses a Natural User Interface (NUI) paradigm that turns actual content into interface controls. NUIs frequently need to let people know what elements are interactive. (Ideally everything is interactive in a touch-based UI but that's a different point.) NUIs should encourage exploration and give people "permission" to touch things. Teasing people is one way of encouraging interactivity and exploration.

Teasing

The Windows Phone home screen teases people with a slight animation that hints at the content below the home screen image. As you can seen in the video above, the home screen images bounces when the phone starts revealing a bit of the options behind it. This encourages people to touch the surface and start using the device. Microsoft employs a similar design solution in Microsoft Surface with a water-like surface that encourages exploration. Contrast this teasing UI paradigm with the iPhone's more literal "Slide to Unlock" welcome screen.

The Windows Phone also makes use of truncation throughout the user interface. Each of the main application screens include a tease of the content on the next screen over (as seen in the video above). This hint of additional content gives people a reason to move to the next screen and explore. The UI truncation is probably most pronounced in the application headers, which, in some cases span multiple screens.

Transitions

Transitions also help communicate interactions. When users move between screens, interaction components fly in or swivel highlighting the fact they are active and can be touched. Once someone taps on these components, they pivot or recede as if they were pushed backward into space. This animation (shown in the video above) reinforces the fact they are active.

Transitions are also used in the Windows Phone user interface to provide feedback when an action has been successfully completed. You can see this approach applied to comments and status updates (yep, in the video above).

One area of concern in the Windows Phone, however, is the quantity of different transitions present. It's hard to get a sense of how consistently they are applied and if every animation is really necessary. There's a lot of them! As Bill Scoot recently quoted: "It is vain to do with more what can be done with fewer (William of Occam circs 1323). Apply generously when using animation effects."

"Computer administrative debris reduces information resolution and steals content space away from the user. The iPhone brilliantly suppresses much admin debris. The idea is that the content is the interface, the information is the interface, not computer administrative debris."

In particular, Tufte called out the iPhone's Photos application as an example of clarifying information by adding detail. "In this collection of photographs, many information elements are arranged on the same surface as the user scans 150 images arranged in a two dimensional small multiple format."

With this in mind, it's interesting to compare the information density of the iPhone's photos experience with Microsoft's Window Phone 7 Series experience. The iPhone's first screen concisely lists available photo sets and with one tap drops people into a dense grid of images where the user interface is minimal and transparent enough to enable the entire screen to display content.

The Windows Phone 7 Series begins with a top-level navigation menu consisting of three options. A quick tap on "albums" brings up a similar listing of images but with substantially more interface elements. It's also a bit unclear if all the pictures in an album will be listed in this view or if another tap on the album title is required (adding a third step to the navigation process).

The differences in information resolution between the iPhone and Windows Phone are even more stark in the application store features. In addition to seven ways of finding & filtering apps, Apple's App Store displays four apps complete with icon, title, publishing, average rating, number of ratings, and price.

Marketplace on the Windows Phone features one application with an icon, title, and one-line description. One touch gesture (drag/flick) later, there's a menu consisting of six items. Tapping on "applications" takes you to another featured application. One more drag/flick and you are finally seeing three applications you can download. Contrast the amount of information present on this screen (the fourth in the process) with the amount shown on the iPhone's initial App Store display.

It will be interesting to see if these differences in information resolution have an impact on the overall user experience of using the Windows Phone 7 Series.

More on the Windows Phone interface

While the Windows Phone user interface may not be optimized for high information resolution, it does make interesting use of teases and transitions as highlighted in this video.

Moving Beyond Web Forms with Luke Wroblewski

• Listen on the UIE site
• Download the Audio 20MB mp3 audio file
• Read the Text Transcript

Jared Spool sat down with Luke to discuss what’s been happening with Web forms since Luke's book, Web Form Design, came out. It winds up there have been some interesting developments recently. Luke provides us with several examples in the podcast. Tune in to hear his advice on how to help and not hinder your users...

But constraints breed innovation and mobile Web forms are no different. The limitations of mobile devices have forced developers and designers to find new ways to make providing input faster and easier. Several of these innovations are now making their way back to the desktop and beyond.

Field Zoom

When a user selects an input field in a Web form, field zoom brings it to the foreground and expands it to fill the screen's viewable area. This makes an otherwise tiny input field large enough for people to actually see the input they enter. When you consider that many form errors are caused by people not seeing their input well enough to correct misspellings, the usability implications of this approach become clear.

Field zoom also provides another great reason to top-align input field labels in forms. As you can see in the example of Goolge's registration form (below), left-aligned labels don't show up on screen when the input field is expanded to fill the screen. So it's not clear what question you need to answer because there's no label! Longer input fields also suffer a bit with field zoom.

Input Formats

Several mobile Web browsers can recognize specific input types (part of the developing HTML5 standard) and adjust their input modes accordingly. For example, specifying an input of TYPE "url" will bring up a virtual alpha numeric keyboard with a ".", "/", and ".com" key. Specifying an input of TYPE "email" will bring up a virtual alpha numeric keyboard with a "." and "@" key. Specifying an input of TYPE "number" will bring up a virtual numeric keyboard. These input-specific keyboards make entering the particular type of data each input field requires much easier. And anything we do to make providing input (both on mobile and the desktop) goes a long way.

Password Masking

Most password input fields in Web forms instantly obscure any characters people enter in an effort to keep sensitive information (like your password) hidden from prying eyes. Automatic masking of people's passwords may provide the appearance of security, but it can also create usability issues as well when people are left staring at a row of bullets they hope (but can't verify) is their password.

Several mobile devices have implemented a solution that addresses this issue by displaying the most recent character someone has entered, then changing that character into an obscured bullet only after a brief delay. This technique has made it's way onto the desktop as illustrated in this password masking solution from ZURB.

Pop-up Menu Controls

Drop-down select menus are one of the hardest input types to manipulate. First you have to click on the menu to open it, then maneuver through a potentially long list of small targets. Once you find the value you want, you need place your cursor on the right target and select it. To top it off, many implementations of drop-down menus on the Web require you to keep your cursor on the menu while navigating the list, else the menu closes. Even quite dexterous users often miss and need to start over. Couple this interaction challenge with the small screens found on mobile devices and it becomes quite obvious that a different solution for select menus is needed.

When faced with drop-down select menus in Web forms, Apple's iPhone presents users with a pop-up menu control. This control displays the options within a menu in a contained list that can be scrolled at various speeds though drag, nudge, or flick gestures. The large touch targets also make it easy to select a value once you find the right one.

Compound Menu Controls

Pop-menu controls can be applied to compound inputs as well. So instead of requiring three separate input fields for the month, day, and year of a date, one date field can bring up a set of pop-up menus that allow people to scroll through three lists at once to find the right answer. This approach can be applied to other kinds of compound inputs as well -like height in feet and inches for example.

Google's Android operating system provides a similar solution for compound input fields though it makes use of visible interface elements to move through a list instead of relying only on gesture-based scrolling.

Voice Input

Google's Nexus One phone allows people to use voice input for any text field they encounter in an application. The virtual keyboard can be swiped to put the phone into audio input mode or you can use the microphone button. The video below demonstrates both of these options in action. With effective voice input, the need to type any characters on the mobile device goes away completely.

For more on Form Design...

Check out Luke's book about Web form usability, visual design, and interaction design considerations: Web Form Design: Filling in the Blanks.