home > services 

Adaptive Path Blog

The Team

Archive for the 'Interface design' Category

New Report: Patterns for Sign-Up and Ramp-Up

by Alexa on May 15th, 2008

For a recent project, we analyzed strategies used by sites that thrive on user engagement to encourage people to sign up and get established. We presented our findings, including design and usage guidelines, in this visually-rich report. I’m excited to be able to share it with you, for reference and inspiration!

You can enjoy the preview below (click it for larger version) and download the full report here (FREE to Newsletter subscribers).

CHI Favorite: E-Books — Two Screens or One?

by Rachel Hinman on April 14th, 2008

Nicholas Chen of the University of Maryland presented an interesting talk on navigation techniques for for dual display e-books. Unlike the Kindle, Nicholas and his colleagues wanted to experiment with a form factor that was similar to a book or magazine. So they built a prototype with dual screens. The form factor allowed them to experiment with embodied interactions, like opening and closing the device (he referred to the interaction as “clapping”) or folding the device so that the cover and back are facing and turning it like we do a magazine (he referred to the interaction as “fanning”). They tested the device with users and came up with some interesting pros and cons.

Some of the benefits of a dual display:
Easy to read the content
Better for assessing length of the content
Helpful for finding new articles

Downside of dual displays:
Clunky - he device was heavy so opening and closing the cover was awkward as an interaction
Confusing - the single screen was simplier and less confusing
Restrictive form factor - grip required to hold device was awkward

Nicholas’s conclusion was that dual displays are better for serious reading but one display is more convenient.

Apple’s Design Process Through a Keyhole

by Dan on March 13th, 2008

Michael “Rands” Lopp, a senior engineering manager at Apple and the author of the great book Managing Humans, let slip in a talk at SxSW a little about Apple’s design process. Since, up until now, their design process has mostly been such a black box, even this tiny view (as reported by BusinessWeek) is pretty interesting.

What struck me most was this:

10 to 3 to 1
Apple designers come up with 10 entirely different mock ups of any new feature. Not, Lopp said, “seven in order to make three look good,” which seems to be a fairly standard practice elsewhere. They’ll take ten, and give themselves room to design without restriction. Later they whittle that number to three, spend more months on those three and then finally end up with one strong decision.

While it is standard practice in visual design to come up with three strong concepts to present and choose from, I’ve found that it is rare to do so in interaction design. And especially to the level that Apple seems to do it, down to pixel perfect mockups. For months. This also echos what both Alan Cooper and especially Bill Buxton had to say at Interaction08, with both urging interaction designers to plan to throw several designs away. Obviously, if Apple is any indication, this is sound advice.

New Sources of Inspiration for Interaction Designers

by Dan on February 13th, 2008

At UX Week 2007 and UXI Vancouver 2007, I did a presentation on where to look for ideas when designing. I finally got around to posting the slides. Unfortunately, you won’t be able to see the video clips here, but I urge you to track them down if you can.

Multi-Point Interactive Whiteboard Using the Wiimote

by Andrew Crow on December 11th, 2007

There isn’t a conversation in our studio that doesn’t take place using a whiteboard. While the reasons for that are fodder for another post, or perhaps a group therapy session, this new interactive whiteboard concept certainly caught my eye.

Johnny Chung Lee, an HCI Researcher at Carnegie Mellon, recently posted some information on a low-cost, multi-point interactive whiteboard that he created using the Wiimote.

His system used the Wiimote to capture movement of an IR-emitting pen device. The Wiimote tracks and relays the information back to a PC. Any surface can be used, including a wall, table top or even your laptop screen. If you use two IR pens, you can even do multipoint manipulation. The video shows it all and you can download the software free from his site.

You may recall that Johnny is the one who wowed us with his hack to utilize the Wiimote to track your finger movements, al la “Minority Report” interaction.

Check it out here.

New Help System in Leopard

by Andrew Crow on December 3rd, 2007

Leopard never ceases to surprise me with all the little enhancements to the OS. Today, I was using an app (Panic’s new CandyBar) and wanted some help on the new Dock changing feature. I went to the Help menu item and entered “dock”.

help menu

I noticed a new category in the Help results called “Menu Items”. When I moused over these results, a blue arrow appeared showing me the location of these items in the Menu.

menu items

I’m not going to over analyze this, I just thought it was cool. It brings some context to help items right when you need it and is not overly obnoxious if you select it by accident. Good work, Apple.

Forget the iPhone. Get a Nintendo DS (Part 2).

by Jason Li on October 15th, 2007

The Legend of Zelda: Phantom Hourglass, is a action-adventure game for the Nintendo DS in which you control a blond adventurer with a pajama cap and sword (pictured below) using a touch-screen stylus. I was playing it the other day when…

Phantom Hourglass art + DS

My fairy sidekick told me that I should try “pressing” the seal from a map I just had discovered in a dungeon (displayed on the top screen) to my map (displayed on the bottom screen).

I remembered that several hours ago, I had to scratch a secret spot on the map to reveal another seal. So I spent five minutes aligning the two maps, then scratching and tapping on the touch-screen with my stylus. Unfortunately, this did not “press” the seal onto my screen.

Next I tried drawing the seal onto my own map complete with meticulous shading. Still no reaction. Frustrated, I tried to direct my character out of the map room. But my sidekick fairy barred my exit, turned me around and repeated that all I needed to do was “press” the seal onto my map.

Ten minutes of scratching and tapping later, I was about to give up: I imagined the triumphant feeling of closing shut my DS and tossing it into a corner. Then I realized, “Wait a second, if I close my DS then the two screens (or maps) will touch!”

Scared that it might power off my game, I carefully closed the lid of my DS.

I waited.

The green power light winked. My heart fluttered. I opened it back up — puzzle solved.

.

Looking for interaction design inspiration? Forget the iPhone. Get a Nintendo DS.

(Tom Armitage alluded to this interaction in his comment to my last post.)

Thinking the Unthinkable about iTunes

by Dan on September 24th, 2007

Tons of press and posts, including some from my colleagues here at Adaptive Path, have touted the iPod/iPhone and iTunes ecosystem as a great model for how product systems should be. But it is my contention that at least one of those products–iTunes–is not really a very great application, especially now that Apple is making it the core of a suite of devices.

I’ve always thought iTunes was hard to use, and it has only grown worse over the years, as we now don’t have hundreds of songs, we now have thousands–in some cases tens of thousands–of songs, podcasts, movies, TV shows, radio, ringtones all in one long, long list. Working with iTunes has become as pleasurable as working with a spreadsheet. It needs a complete overhaul.

I will grant that iTunes is the Little App That Could, taking on way more than it was ever supposed to. It was never designed to be a digital hub. Or if it was, it was never designed well. How it handles different media is klugy. Playlists are, at their heart, just folders. The new iPhone addition to iTunes had to add tabs into the center pane. TV shows are clustered one way, movies another. It’s become a dog’s breakfast, and frankly, iTunes was never that pretty or engaging application to begin with. Winamp is aesthetically far more pleasing.

While Apple’s devices keep getting iteration after iteration, core apps–iTunes, Mail, iCal–languish or are given band-aid solutions to core issues. It looks like Mail, iChat, and iCal are getting some attention in Leopard, but meanwhile iTunes works and feels like an application from seven years ago, and the digital world–thanks in no small measure to Apple itself–has changed. iTunes, the ugly hub in the center of Apple’s media wheel, needs some serious interaction and visual attention. I hope Apple gives it some.

Prototyping for Designers

by david on September 13th, 2007

I was at Rich Web Experience last week and Yahoo’s Bill Scott presented a session on his recently unveiled prototyping library. It’s called Protoscript and he’s written a blog post as well. Both of these sources get technical fairly quickly so the implications may not be immediately obvious to non-programmers. Even though Protoscript is still very much a work in progress and there’s some distance between its current state and Bill’s vision for its future, the opportunities it opens up are are exciting.

The driving force behind this library is Bill’s opinion that “Prototyping is too hard for non-techies”. I wouldn’t make quite the same blanket statement, but I do agree that some of the most useful, effective prototyping approaches do require developer resources or developer assistance. These technical resources are not always readily available. Protoscript shifts the requirements and ultimately will allow designers with little or no actual coding expertise to rapidly prototype in an interesting way.

The Protoscript bookmarklet allows you ‘inject’ Ajax behaviors into existing web pages. That means you can start with an html mockup or a client’s existing site as a starting point and try all sorts of different approaches. Do you have a list of items somewhere on a web page? Want to see what it would be like if they were drag and drop elements? Want to see what it would look like if you could delete list elements and have them fade and disappear? Somebody asks to see what they would look like in some sort of accordion layout? Imagine being able to run through those three iterations in the space of 10 minutes. Now imagine being able to do that as a designer without a developer to help you.

Being able to get by without development resources will require the completion of the GUI interface Bill envisions but even in its current state, Protoscript could fundamentally change work flows. A designer and a developer can sit together over a common screen run through ideas in a much more lightweight way than they currently can. Or, in other words, Protoscript shifts this type of prototyping from a multi-day email interchange with the IT department to something that feels more like sketching quickly on whiteboard.

Charmr: Interaction and Visual Design

by Alexa on August 14th, 2007

The next challenge after concepting was to prove that this concept could actually work by fleshing out the essential screen flows.

The displays on leading insulin pumps today are the size of PDA screens and use a number of hard keys for navigation. Was it even realistic to create an adequate, easy-to-understand interface using a 2 x .75 inch touch-screen half the size of my Nokia N73’s screen?

sizecomparison.gif

Dan Saffer and I began the interaction design process by examining the options and screen content in existing devices. Identifying what our participants actually used, we sought out the “essence” of the insulin pump.

The “Ah-ha!” moment for me was recognizing that the interface that most type 1 diabetics today are interacting with is nothing more than a simple syringe.

syringe.jpg

All there is to this “interface” is:

  1. A way to select the amount of insulin you need (either by dialing it in or by withdrawing the appropriate amount from a vial), and
  2. A way to deliver the insulin (which provides clear feedback that it’s working: seeing the insulin disappearing into your body and the feeling of pressing the plunger makes you feel in control).

The rest of the details are dealt with in the mind.

As one of the barriers to adopting pumps today is perceived complexity, our goal became to create an interface that is no more intimidating than dialing in your insulin needs on a pen. Additionally, the device needed to provide just enough “smarts” to take away true mental burdens (like calculating your insulin dosage using your carb-insulin ratio), while keeping the user in control.

With these principles guiding us, we delved into the interaction design details: What features should the Charmr have? What feature will be used the most (dosing)? Which buttons would be soft (most of them) and which hard buttons we would need (a back button)? What is the minimum button size for a hand-held touch-screen device (many kiosks use 16mm square, whereas the iPhone uses considerably smaller, 9mm square buttons)? Which information should be shown on which screens to support particular tasks?

flow.jpg

We also spent a bit of time discussing what kind of imagery would make the best ambient display of status (the mood ring screen). Amy Tenderich told us that one of diabetics’ greatest struggles is with guilt. They look at the numbers and feel guilty all the time. Thus, the ambient display needs to visually represent your status without assigning “moral value” to high or low blood sugar — the way a thermometer might show blue or red; neither is inherently bad.

We considered virtual pets, lava lamps, color abstracts, weather, and simply a personal/family photos theme (because it’s family or a particular goal that often motivates people), and finally concluded that the device should offer multiple themes and allow the user to choose what motivates them.

themes.jpg

Finally, I developed a skin for the interaction design, striving to make it compelling and modern, while avoiding both “medical device blue” and the iPhone look and feel. The user could customize both the themes and the skins to their tastes, and perhaps even download more skins and themes online.

chamr.jpg

With the screen designs as well as a rudimentary industrial design concept completed, we put together an Experience Blueprint (4mb pdf), then it was time to tell the story of the product.


Close
E-mail It