Tag Archives: user interface

Kagura, making music with your body

Brian Eno once said, “The problem with computers is that there is not enough Africa in them.” The interfaces we use to interact with computers are too digital, not fuzzy enough to sense analog inputs. We’re stuck with mouse and keyboard.

Kagura is a game that runs on a laptop and uses the camera to detect movement of the players as they interact with musical instruments projected on the screen in front of them to play along or riff on a musical track.

Part Dance Dance Revolution and part Guitar Hero, the UI is intuitive and easy and fun to pick up. All that’s required is a Windows laptop (Mac coming later) and they launched a Kickstarter today to fund the final development and release in August.

Shunsuke Nakamura, the inventor of the game, stopped by the SmartNews offices on Friday to show us how the game works. He’s been working on the concept of using your body to make music for 14 years but only now has technology reached a point where his dream could be realized.

We truly live in amazing times.

Compromising with Lawyers

True Story.

A large consumer internet company where I worked sent in a team of lawyers to check over the fledgling social network I was building. The registration flow concerned them. There needed to be a check where the person registering was required to submit their date of birth so that we could ensure they were over 13.

The advice of the lawyers was to throw an error if someone underage tried to register.

“What kind of error?” I asked.

“A generic error, something like, Your registration has failed or The system is down for maintenance.

As a product guy, if there is one thing I hate more than a generic error message it’s a deceptive one. I want to give the user a specific error message that tells them what went wrong.

“Can I just tell them that they are too young to use the service?”

“No, then they would just adjust their date of birth and re-register,” said the legal department.

We all know this is what happens anyway, it’s one of the great collective nod and winks of the internet along with checking the [I understand and grok completely] boxes on the End User License Agreements we find across the web.

I argued that we must give them a more specific error so it doesn’t look like our service is broken. Legal didn’t want me to tip our had too much. What to do? We compromised.

The new error message? The agreed upon language?

You cannot use this service . . . at this time.

 

The Future of Print

Two concepts floated around in the past year envision the future of print on connected tablets such at the iPad.

Future of the Book, a video by IDEO, suggests three designs for an interactive book. Co. Design has some thoughts and link to an interview with some of the designers behind this concept.

Mag+ is a concept by Berg. The video was released in December 2009, a version of was released for Popular Mechanics in April and  is available for the iPad.

Both of these concepts  illustrate the power of additional information deep-linked into the text. These links can lead to interactive graphics as in the Mag+ example or discussion boards as in the IDEO example. Yet, each of these experiences, despite being more interactive than ink on paper, still feel packaged. One vector not explored in either of these concepts is that of reader’s context which is increasingly available via mobile devices. More and more apps are leveraging things such as location to customize the experience. What other contexts can be added to the reading experience and how would it change the reading experience?

iPhone UX Anti-Patterns

What follows are notes from a session I attended at the last Web 2.0 Expo. While a few months old, the notes here are still very relevant. As a Nokia employee, some may think it strange for me to blog about how to develop for the iPhone but I think not, the priciples I share here apply to all mobile developers.

10 iPhone User Experience Anti-Patterns

The presentation was given by Toby Boudreaux. Point of clarification before we begin. For those unfamiliar, an anti-pattern is a play on design patterns which are re-usable design components that emerge to become commonly understood elements used in User Interface design. A common user interface anti-pattern is the hover text box that obscures an otherwise important part element of the user experience.

On to the iPhone UX Anti-Patterns from Toby’s talk

Billboards & Splash Screens

While it your logo may look cool in all it’s glory and scrolling credits for everyone on the team including the office dog is also seems like a nice thing to do, your users will tire of it after a few times and will get down right annoyed if they use your app with any frequency. Best to tuck this stuff down as a sub-menu off the About menu. In short, “don’t put branding ahead of users.”

Sleight of Hand

Do not use the same area for different or conflicting functions. Think of muscle memory and make sure that the same gestures are related. Toby illustrated the problem with the iPhone’s slide to unlock and decline functions.

iphone-anti-pattern

A quick and easy way to avoid this anti-pattern is to print out wireframes of your design and overlay each screen on top of each other over a lightbox and to be careful where your exit or quit button is going to be, assuming that your users may add an extra tap by mistake.

App as OS

When the app is running in a mobile environment, it tends to take over the screen giving the user the impression that the application is the OS. Rather than attempt to mediate the entire experience of the device through your app, defer to specialized apps which are designed to handle those functions. Use the YouTube player for videos, the browser for web pages.

Bullhorns

Tone down any loud notifications. You can provide a setting to make them louder but remember, you’re embedded into a mobile device which is going to be carried everywhere. If possible, avoid pop-up error messages and embed your error message into the interface.

The Bouncer

If your app requires a user account, make sure every screen that can be accessed without a login has a link to registration or sign-up. The last thing you want to do is have a potential registered user land on a login screen with no link to a page where they can register.

The High Bar

Allow for progressive degradation of your application. Remember, you’re app is operating in a mobile environment. Assume that connections will be flakey, the phone not running the latest OS. Remember the guy on the bus that’s just gone into a tunnel. What about the one-handed user on the subway? Can he they use your app effectively?

Memory Lapse

Make sure your application is able to persist state. There’s nothing worse than having to step back through to get back to where you were. The illusion of fast task-switching, pausing and unpausing, requires state persistence.

Gesture Hijacking

Take care not to take over and re-define a popular gesture. It’s a balance because you also don’t want to try and be too clever and introduce a new behavior that has too steep a learning curve.

Spin Zone

Don’t rotate the screen for the heck of it. Fancy UI elements to be used in moderation.

Sound Off

Don’t hijack audio that is already playing. This is a common one. How many times have you been listening to music and then start playing a game that requires you jack the volume way up. When you quit out of the game, you blast your ears off as your music player comes back on.

It’s much better to blend the sounds so the user can take care to switch to the background app and shut it down or pause it.

Apple has done a lot of careful thinking about interface design on the iPhone expanding their work on the Human Interface Guidelines to the mobile environment. The iPhone HIG is a good resource for anyone designing for the mobile environment.

Hope these iPhone UX Anti-Patterns were useful. Can you think of any others?

Dopplr City Colors

dopplr colors

Did you know that dopplr assigns a unique color to each city? Neither did I. It’s not just random either – there’s an algorithm at play here. From the dopplr blog:

We wanted a deterministic RGB colour value for each city. At first, we tried mapping the latitude and longitude of a city to a point in colour space, but we found that this made neighbouring cities too similar in colour. This means that people who travel frequently between Glasgow and Edinburgh wouldn’t clearly see the difference in colour between the two. Also, since so much of the Earth’s surface is covered in water rather than cities, it leads to a sparse use of the potential colour space. In the end, we went with a much simpler approach: we take the MD5 digest of the city’s name, convert it to hex and take the first 6 characters as a CSS RGB value.

So now you know why San Francisco is pink, Helsinki is brown, and Berlin is red.

No Noovo, No!

UPDATE: Andrej from Noovo writes in the comments below that they have modified Noovo’s UI flow so that the selection of contacts for invitation to their service is no more clearly defined.  Thankfully, this post is now history and lessons learned.

—————————————————–

I thought about sending this feedback directly to Noovo but it’s important to warn others and also have a place to point all the people who have received Noovo’s auto-invite and replied back to me, “is this real?” If and when Noovo modifies their sign-up flow to address the concerns I’ve outlined below, I will happily update this post.

When I sign up to test out new service, I take care to not let the service email my contacts with spammy invites. Yesterday they got me and I ended up inviting all my friends to a service I was only testing out, embarrassing me and turning me off from spending more time with the service to figure it out. Crafty placement and defaults were to blame.

noovo facebook

1. The first thing noovo does is ask you for your facebook credentials. There’s small text in the upper right corner says “skip” – most wouldn’t notice this making it seem like handing over your facebook account is a requirement.

noovo friend

2. Next they present the standard, “Login with your favorite service to see if your friends are already using us” screen. There is even some text at the bottom, We do not store your login details nor do we use them for any other purpose than to retrieve your contacts.

noovo invite

3. This is the real sneaky one. I’ve already fallen into this trap so I can’t show you what the screen looked like before (the above is from a second account) but imagine this. I logged in with my Gmail credentials, was redirected to a page on google.com confirming that I was giving one-time access to noovo to read my contacts file.

I then got a version of the screen you see above that had 10 or so contacts in the blue portion, these are people already registered on noovo that I could connect to. But, because I had several lines of people already on the service, it completely hid the contacts that were not on the service and were checked by default to be sent and invitation to the service once I clicked “Next”

Two things.

a. Noovo never said they would use my credentials to send out invitations, just to retrieve contacts.

b. By hiding the list of invited contacts checked off below the fold, there is no way I would know unless I saw the scroll bar on the right of the screen.

noovo email

4. The email invite was a real work of social engineering as well. Please respond or ian kennedy may think you said No. I would have deleted my account off of noovo but I don’t want people accepting my invite only to find that I’m not there. Laying the guilt trip on me and my friends is not the way to entice people to join your site.

Way to make my days guys. I’ve been spending all afternoon explaining to everyone what happened.

Yahoo on Widget Architecture

I was at the local Mobile Monday event last night to learn more about Yahoo’s Blueprint development framework and soak up some of the local mobile scene. One of the presenters, sorry, didn’t catch his name, was the UI Designer and he Bill Bull, Head of Platform UED, made a very insightful comment about web development.

usatoday.com is a website – our expectation is that it will change every day as new content is available.

Microsoft Word is an application – we expect it to work the same way every day.

Modern websites such as Facebook or the new Yahoo (Metro) home page are a collections of widgets that change and update themselves as new features get pushed out. It’s a mistake to think of widgets installed on a mobile device as applications, they need to be architected as dynamic pieces of code that can update themselves as new features become available or as new devices offer new capabilities. The update mechanism is a fundamental feature of any web-enabled widget.

You Kids Never Had it so Good!

Getting up to speed here at Nokia after joining three days ago – lots of institutional knowledge tucked away across the intranet which features a bewildering array of internal blogs, wikis, and video archives. One thing I immediately notice is that the average age of people who work here in the Mountain View office is older than that at Yahoo. There’s a historical perspective to what they build which informs what they do so it’s sensitive to regional and generational needs and practices.

A colleague recently passed around a link to a Wired article that lamented that modern day social networks have killed the ability to “lose touch” with a friend and let them fade into the background. Instead we have to take action and ban, block, or un-friend them which seems a bit rash (especially when services such as Qwitter tell you when someone has un-subscribed). It’s like shouting out to someone, “You’re not my friend!”

From my perspective, Nokia is very interested in the social impacts of the tools that they build. For instance, on the drive down I was listening to Matt Locke talk about how people have collectively “hacked” social gestures for the introduction of mobile phones into society. The phone booth that we would use to exit a public space to make a phone call evolved into a “hood” structure. With cell phones we used to cup our mouth or duck our head to indicate we were on the phone but now have evolved (?) into talking freely in the clear while sporting a blinking Bluetooth headset. It is still early days with regards to social networks. We haven’t evolved a similar set of shared gestures beyond perhaps the @reply which is really only understood by a tweetist.

Later I ran across the following passage from Reprise Media’s excellent Search Views blog:

When I was a kid we had to network socially by punching a random bunch of digits into a keypad, (or twirling a dial with your finger – a dial!) picking up a big clumsy plastic thing attached to a squiggly wire, and speaking into it. If you were lucky your buddy was on the other end. Worse, it was done one person at a time! You kids never had it so good!

Updating my Facebook profile to reflect my new employer, I notice that I know no one here at Nokia. I have a list of people my manager recommend that I synch up with to soak up the lay of the land – should I use the phone, email or maybe Facebook?

Further Reading: How Mobility Will Change Social Networking

Reblog this post [with Zemanta]