ChangeOrder

Give Your Phone the Finger

Multi-touch, gestural interfaces are the new black. And for the next four to five years, they're the immediate future of our ever-evolving human/computer interactions. But for us designers, I'd like to project a little further into the future and discern an even more likely scenario: true sense integration on mobile and desktop computing devices.

As designers, we usually only get to consider how media looks, sounds, and feels in a mildly tactile sense. In the future, we'll be able to consider these variables at a much greater depth and dimension than that of a static, unchanging substrate. I also wouldn't be surprised if smell and taste gained much greater prominence in the designer's arsenal.

Specifically, there are certain kinds of interactions regarding mobile and desktop devices that don't seem very far off from a technology standpoint. They do, however, require weaning us off the idea of doing our computing through a screen-topped device with a gestural input mechanism. Multi-touch interfaces don't have a ton of utility if you have disabilities, and definitely don't exploit other mechanisms we humans have for conveying and receiving information.

Here's what I'm dreaming of...

An earpiece that doubles as a phone and really understands what I want.

I don't always need to see the Internet to be able to grasp the information from it.

If you're looking to access the visual Internet, the iPhone dominates the field for ease of use and clarity and will likely be the gold standard for some time. But what if I'm going out on the town and don't want that phone in my pocket? Make the earpiece a phone as well, and pair it with trainable natural-language voice recognition software driven through the cell-phone network that learns my voice, my needs, and my quirky slang.

I could imagine the earpiece phone recognizing commands such as "give me turn-by-turn directions to Pacific Place," "pay my cell phone bill with my credit card," or "text my friend Joanie that I'll be twenty minutes late" and it will be smart enough to fulfill your actions without any major hiccups.

This is a true expression of cloud computing separate of the desktop and is where Google is starting to lay the ground with services such as 1-800-GOOG-411, which they claim is a not-for-profit venture, but makes a heck of a lot of sense in their long term strategy for having a universe of cloud-driven Internet tools that have great utility for a broad audience and further help them sell search advertising.

Knowing how excited people get about these kinds of interfaces, I could see them being smart enough to recognize patterns of behavior and quietly prompt you: "Did you mean to pass by the cereal aisle? I know you like Lucky Charms." (Okay, that would be scary...)

A touch interface that communicates through sense of touch, not screen activity.

What's the weather going to be? I go to the weather service on my phone, and when I touch the screen to see what the upcoming weather's going to be like through the weekend, the surface of the touch interface gets hotter or colder depending on the time period my finger hovers over. Sounds frilly, right? Sure, if you aren't blind. Blind people should be able to ask their phone, "What's the temperature going to be tomorrow?" and have the phone adjust its heat output in relation to today's temperature to indicate the relative difference.

Another example. Let's say I'm considering taking SR-520 over I-90 to get to the Eastside. I ask my phone (using my voice interface) how the traffic is on SR-520. The steering wheel gets harder by 30%. Should I take I-90 then? The steering wheel softens dramatically. There are other ways of getting data instead of me barking orders to my phone/car/computer, then having it bark at me a series of choppily-voiced words, which are interrupting my enjoyment of the new MGMT album.

Yes, the multi-touch gestural interface is very cool and gets rid of that mousy thing on the desk. But I want more sense out of my touch interactions.

Forget the idea of the phone altogether. It's part of the devices around me.

I know phone manufacturers want to make money from our phone networks that require devices that earn money for large publicly traded companies through the use of night and weekend minutes... but doesn't that idea sound... quaint?

I'd be perfectly happy if phone calls followed me from device to device around me, instead of me having to carry a device around in my pocket. Sure, there is the love that I'd lavish on a phone as part of my technological pocket arsenal next to the iPod, the (soon to be smart) wallet, my house keys, my sketch notebook, and my pack of mints. But I'm of the "less is more" camp, and less means no phone whenever possible.

Since I'm Gen X, I'm cool with being a little out of touch. I'm already seeing that use of cell phones will stratify, with phones being generated for the youth as part of their uniform, while from Gen X on up, it's seen as a necessity, not as an entertaining activity. Higher-end luxury phones will be wispy, while phones for the youth will be badges.

But really, I'd like to get rid of the word phone altogether. Or at least call this new category of devices something else. The whole beauty of the term "mobile device" is that you don't have to say it's a phone/MP3 player/GPS/Knife/Wii remote. Let's just tack the word "multi-sensory" onto mobile devices and hope that the device manufacturers can pay it off with something that delivers some real utility to us technology junkies.

Common Flaws of Web Site Search Design

I fondly remember the good old days of mediocre search technology, where you could design a Web site with the assumption that people would expend at least a few dozen seconds combing through your site's pages to see if there was anything of interest.

Nowadays, you only have a matter of seconds to grab a site visitor's interest, and that generally consists of the following actions: 1) scanning the page for a few moments for headlines of interest; 2) thinking if there's anything on the site that isn't exposed that they would like to find, and 3) typing a keyword into your search bar. Not much else, unless they land on a page in your site from a search, and you'd better hope your information architecture is strong enough to orient them.

Knowing this is the default behavior for a good number of your site visitors makes the design and placement of your site search tools of critical importance for a functional user experience. Users expect the quickest paths between their need and a correct result -- they want the bullet train, not the sailboat.

Here's some common UX design gaffes related to search I've noticed recently, clearly documented, and tried to avoid in my own work.

1. Placing filters or pull-down options in a simple search. Ready to go find all the content related to, say, corgis? People have grown to expect just a box and a submit button if they're executing a self-guided search. Don't add pull-down menus or anything else that allows people to filter content independent of keywords on your plain text search box. Put those features in your advanced search functionality for those users who want to get crafty with selecting different types of context and don't know the shortcuts like "grouping words together" in the search box, etc.

2. Changing controls from search to result. Very dangerous. Users expect consistency from their search experience and the functionality that they're presented with. When flipping from the initial query to your results screen, your search box shouldn't change functionality. If you offer an advanced search, it should always be an option to toggle on, or never be an option for the end user. Otherwise, you're going to confuse them and/or piss them off.

3. Not making your search criteria explicit. Your search page design should always foreground what the user sought before any search listings. It's not enough to re-render the same search terms within the search box. There must be a listing of what they asked for before you give them what they asked for, and with a real level of prominence in the visual design. I liken it to placing an order at a restaurant. When your meal arrives, your waitron usually says, "So, you ordered the cheeseburger with avocado, right?" Same principle.

4. Over/Underbuilding the advanced search. If you do offer the user an advanced search, consider clustering different search methods on one screen, then collapsing them and having the user choose which methods they want to combine to search your site. This allows the user to expose types of data they're wishing to sift and use those in concert. Google does this fairly well. Don't implement it like the advanced search on Windows Live which forces you to string together your advanced search criteria one at a time. Fewer interactions foregrounded in one place will equal a better user experience.

We Are Web Technology

Recently, I had an idea for a classy text interface that I thought would revolutionize how people used the Internet. Within five minutes of online research, I discovered that someone else had come up with the same idea... in 1986.

The lure of Web 2.0, a.k.a user-centered computing mechanics, is finally beginning to outstrip the humble origins of HTML and its basis in a formatting language for articles and other educational ephemera. But we have many decades-worth of ideas within the coffers of both academia and popular business related to interface design just yearning to step onto the stage of the Web. And I'll wager that it will take another two to three decades to reach the point where Internet users are comfortable with these advances. They will revolutionize how we engage with and consume information.

The initial beauty of hypertext was its ability to channel and shape large volumes of information and allow linking to similar types of content. The real revolution to occur in user-centered Web systems has little to do with typesetting content, and everything to do with contextual organization and passing knowledge through conversation.

Let's Create a Little Context

I want a fluid markup language that is easily usable by the layperson that automatically allows us to build intelligent, intuitive relationships between different types of content. I'm not talking about XML, per se. XML is the enabling factor that will encapsulate all Web content. I'm talking about the browsers that parse XML and spit out the Web pages we love so much in fresher, more usable ways.

For example: In the future, and hopefully the near future, I would hope to see Web pages and/or browsers where, if you are reading on a topic of interest, the article could reconfigure based on areas that you linger upon, offering up topics that may be of interest in a separate sidebar.

Or, if you click on a link within the paragraph, instead of being tossed into another browser window or tab, a secondary channel on the page opens to enclose and accommodate that content, allowing you to choose a path of inquiry in-line before punting to another location.

This would require sifting and sorting of content elements that goes beyond what we call content management. It would require a method of relational sorting and artificial intelligence that may not exist yet in the consumer space, though I have a feeling it already exists in some form at Xerox PARC or Apple, but is being withheld from the general market as it is not seen as "usable" yet.

DHTML and AJAX are allowing us to add another layer of context within Web pages, so we can explore deeper levels of information within a single Web page. And yet it's still not enough, and that kind of functionality is usually custom-built at great expense. We're still bookmarking pages (socially or otherwise) and leafing through the online equivalent of a magazine. A well-designed magazine that evolves over time in response to my activity, mind you, but still a magazine. Most related links are hand-coded in, and companies like Amazon and Netflix have invested millions in creating automated systems that create context. Bring their systems to the masses. Organize us relationally.

Either that, or rely more heavily on the content management system that we call The Human Brain.

That's What I'm Talking About

What stands in the way of this contextual method of organizing and navigating Web content? Ourselves. Humans have yet to evolve to the point that they can move beyond the static page en masse. Perhaps the next generation of Web users will be able to grok this method of information navigation without feeling like the ground is about to give way beneath their feet.

It's clear that the Internet has turned into the Mariana Trench of human knowledge. Trawling that almost infinite depth of information has become entirely impersonal. We don't control how we reach the things that we need, and we can't easily control how that information is presented. When couched in these terms, it's easy to understand why it's so hard to create a Web system that users would want to experience.

Novels, essays, articles, blog posts, diaries, text messages -- these are all fixed forms that govern how we apprehend content and structure how we consume them. When we compare the longevity of those forms to a fluid content bucket that can't be passed along or referred to another person without changing in some way, you can only imagine the fear it would strike in an everyday user. Just give me a page with what I want, or a search engine that can find me what I want within two clicks (unless I'm feeling lucky). Seeking knowledge, fulfilling task, receiving information, end stop.

Interestingly, if you think about how people seek knowledge independent of the Internet -- through real-life queries and conversation with peers that have reservoirs of knowledge -- then you'd think we'd be spending more time creating Web systems that mimic that human-to-human mode of information acquisition, that add shape and color around information that we seek. I see this as not Web 3.0, or even 5.0. Until there are heuristics that can resolve these levels of complexity in a piece of content, and spit out a relatively appropriate answer the majority of the time, this technology will be a novelty used by dozens.

Thankfully, we have the time and the depth of material out on the Internet to use as our laboratory, as well as the new explosion of smart devices and micro-computers that will worm their way into the fabric of our everyday activities. By the time this type of contextual navigation reaches the masses, we'll be so plugged in that we'll probably just be querying people instead of computers to receive what we need. Oh, wait -- I just got a text message from a friend asking me if I know a good place to find high-quality dark chocolate...

[UPDATE: Check out powerset.com for a taste of what I'm talking about... currently it works with a subset of information-dense sites like Wikipedia.]

And Now, an Interaction from our Sponsor

You're watching the new episode of Lost on abc.com, and during the break, a little app from Google pops up that says you have two new messages on your Gmail account, there's a hurricane blasting its way through Peru, and your RSS reader has two articles you'd probably want to read before Jack and Kate start to make out.

"Entertainment with utility!" That'll be the rallying cry of the new breed of advertising married to interactive television.

Wait--don't we watch TV, go out to movies, and listen to music to escape from reality?

Definitely not. Anyone who has a young daughter or son, or has spent time observing TV-watching behavior, knows that we are now experiencing an unprecedented level of layering. Using their computer to sift the Internet for that next hot band, watching a so-so sitcom on their flat-screen TV out of the corner of their eye, chatting on their Bluetooth headset with their BFF, and maybe even having a little snack they just whipped up in the microwave. Simultaneously. I see people trying to cram as many interactions into each minute as possible.

So my thought is simple: layer the interactive experience so all those things happen within the computer. Or the TV. Or mash them up into one device. Give the audience the options to select how many layers they want. And integrate the online applications they use most into the advertising, creating utility in a domain usually reserved for talking dogs and men being chased by women due to their body spray. I'm already watching a TV show for entertainment. Make some of my advertising useful.

Sounds easy, and I'm sure Apple is already all over this in their secret R&D labs. But whomever cracks this code and creates the tightest integration will win: for consumers, for advertisers, and for those who create the platforms to deliver this kind of quality experience for their audience.

Effective Design Strategies for Rich Media Ads

Rich media advertising has morphed from a simple way to create a more engaging banner or skyscraper placement into little mini-sites within a larger publication, complete with streaming video, games that visitors can play, built-in data capture and referral mechanisms, and other sophisticated interactive elements that five years ago would have required its own Web page and heavy development chops.

The following trends, which I noticed in recent online ads deployed by EyeWonder, exhibit many of the hallmarks of compelling user experience and design for rich media placements.

Build Your Concept from Real-World Examples

It's easy to fly some copy into your ad, show a nice photo of your product, and toss in a big button that says "Buy Now" with a low price next to it.

What's much harder is finding a real-world experience and marrying it to your product. One recent online ad that caught my eye was for the show DogFights on the History Channel. Upon rolling over the placement, the navigation of the ad is like flying your own fighter jet and locking onto a target. Upon "shooting" one of the planes you're chasing, you reveal an area of the ad. Try it out here.

Strong advertising like this doesn't require a traditional menu for navigation, or any of the common UI features you'd expect in the microsite. The behavior of the navigation is instead more like a video game -- which is an interesting analogy, since a fighter jet video game is still borrowing from the real world experience of flying a jet. (Not that I've ever flown one...)

I also love this mini-Space Invaders that my colleagues at Worktank made for the HTC Advantage, which is always great fun and can lead to some solid click-through.

Ease Your Audience Into the Virtual Experience

If you're designing a rich-media advertisement, generally you're going to disguise some kind of extended experience in a banner or skyscraper, presenting some call to action asking someone to roll over the ad. Smooth the transition into the experience, and reward them with the depth of it. Otherwise, they aren't going to interact with it over a long period of time -- and gain more interest in purchasing your product or service.

Here's an example that's less like a game and more like going on vacation. Different areas of content are part of a portion of an island in the Galapagos that you can "visit" when you expand open the placement. Try the demo here.

Both of these rich media ads are experiential in nature, matching up to the content of the television programs they're advertising. How do you translate this kind of approach into more traditional advertising for products and services? Here's a great example that raises interest while foregrounding a solid product.

Make Pass-Along Easy, and Integral to the Concept

The following example from Nissan hits the two points above and completely integrates referrals. You can use various keys on your keyboard to trigger breakdancing moves from the on-screen avatar. If you press record, the ad unit tracks your moves and allows you to forward the "movie" to your friends. This ad works like gangbusters, using some really smart ActionScripting create a big impact, and create some big awareness around the car for the right audience. Try it here.

Secrets of UX Design Productivity from Google

Last Thursday, I attended a free session organized by SIGCHI, Puget Sound region at Google Seattle HQ. Jake Knapp, a very well-spoken user interface designer, entertained a packed house with a speech on 17 tactics that he uses for creating strong UX work in "the flood" of projects that pour through his UX department from month to month.

Since Google is well-known for its sprint approach to application development -- working quickly in small agile teams, touching base often to assess progress, aiming for short-term goals instead of having a long-term target, changing course to aim for quick wins -- I was very interested to see what methods they used to keep their many trains on the rails.

Jake did not disappoint, and unpacked his toolkit to show how he managed his workflow. I can't fit his whole talk into a single post, so instead I'll share what seemed like the top four main topics and their highlights.

Have Strong Project Foundations

The UX team at Google is fairly small, so they need to choose what to focus on wisely. When they start new design projects, they ask the following questions:

How much does this project matter? Is there a value for the UX department to take it on if they're extremely busy with big projects?

What is the business impact? If it's an app like Gmail or Google's search home, improving the user experience could have a huge impact on Google's bottom line. Better focus some attention on it.

How much UX impact will it have? How complex is the system to represent? As an example, Jake showed a view of a sidebar menu from Google Talk versus a chart that needed to explain the whole process of going through a signup process with Blogger. A well-rendered chart could have a big impact on user experience for Blogger, so this is where they'd likely focus the most attention at first.

Is the whole team (a.k.a. internal clients) willing and ready to engage with the UX team in the right way? This question dovetailed right into Jake's next key point: when you're working with new clients, you need to know what their expectations for UX are, then aim for quick wins to establish trust with them and build up a strong relationship. This is consistent with what I hear from many designers that work in-house within a large corporation: behave like you've been hired as an outside designer, and approach each project with the same level of professionalism and client service.

Let the Code Be the Mockup

Since Google is in the process of getting great ideas produced quickly, Jake noted that they often whiteboard the implementation of an idea with the engineer, then let the engineer build it. Wherever possible, they reuse code and existing patterns from other applications, then iterate the user experience with actual working code to get to a result faster.

Often, this investment in application prototyping will pay off. Many of the Google engineers are strong designers as well and they bang out super-functional prototypes. This allows the UX design team to try it with users, find all the edge cases, then shipping it -- often saving a buck or two on engineering in the long run.

While I can't imagine taking this approach to a heavy Flash piece, it sure makes sense for the kinds of apps Google is looking to unleash on the world on a regular basis.

Be Smart About (Re)using Research

Within Google, researchers talk to each other all the time, ensuring that they don't duplicate each other's user studies. This research is then shared wholesale through the corporation.

When new research is required, Jake noted that they try to hit multiple projects simultaneously. Through field research, diary studies, and ethnography, they'll map out their personas and other necessary use cases. Then, as their project narrows into tangible prototypes, they'll enter into usability studies to confirm their research and ensure it's functioning well.

Research-based workshops were another interesting twist to their overall research methodology. In order to solve certain UX problems or brainstorm improvements, large teams will take part in an immersive research approach. The rough structure that Jake outlined was thus:

Research Immersion: 2-8 hours long, with 10-35 people

1. Show the group rough personas of the users they're looking to target.

2. Identify unmet user needs. As an open-ended exercise, everyone would write on Post-It notes their imagined needs. As a group, these needs were categorized into themes.

3. Brainstorm solutions. The overall group would brainstorm possible solutions to those top themes that seemed most relevant.

The work from the immersion session would then enter UX design. The most promising concepts would be mocked up and presented to an overall committee, which would critique the ideas. From these concepts, project managers would step in to help the UX team build a rough schedule and plan out next steps.

Designers Need to Create Memorable Presentations

Since much of what Jake presents is evidence-based, and much of his work is reviewed by a committee before it can be implemented, he's become expert in giving top-flight, simple creative presentations. His rules for getting a great presentation together were:

1. Have a singular goal for your presentation.

2. Start on paper, and see the big-picture story. His metaphor was, "Don't use a periscope to map the ocean."

3. Make horizontal and vertical storyboards. Jake showed a photograph of his presentation written out on Post-It Notes, from left to right. The "vertical" storyboard was a way to ensure that each Post-It, when pulled out of context, still made sense as its own contained message.

4. 3 words or less per slide. 'Nuff said.

5. Follow the 10/20/30 rule, per Guy Kawasaki. 10 slides. 20 minutes, even if you have an hour to present. 30 pt font for your text, though Jake advocated 32 pts or larger.

6. Be careful how you present mockups. Often, Jake would grayscale his tight designs, then slap on crappy graphics for the approval of the rough markups in PowerPoint to ensure that they were discussing the ideas behind the UX, not the design itself.

7. Drawings invite people to participate. Keeping the design work rough cues everyone to know it's a work in progress -- and treat it as such in discussions.