Designing For Non-Technies and Neophytes

1 Comment

I have recently had the great fortune and pleasure of observing non-techies and neophytes use new software and it’s been an eye opening experience. Web designers who have been around software applications and the web for ten years develop certain assumptions about their users that may prove hazardous to their web app if their target users are supposed to be non technical or non web savvy users.

Here are some real life stories based on my first hand observations.

Story 1

I once had to perform a martial arts demonstration that was choreographed to music. I brought the music on my iPod. Prior to the demo, I gave my iPod to the sound technician and the MC. The iPod was set to the specific playlist and all they had to do was to hit Play when we bust out on stage. Apparently I had not counted on the fact that neither person had ever operated an iPod before and had no idea what to make of the click wheel. You could say that they must have been living under a rock for the last 10 years but I disagree. They weren’t stupid people either. One was an engineer and the other person was in the financial sector and had an MBA. Apple fanboys will argue me to death about the fact that Apple products are super easy to use. They might be once you learn how to use it but for a first timer with no instructions I think Apple devices can be quite cryptic.

Story 2
I observed a 10 year SaaS CEO and a software engineer use a particular website with much struggle and frustration. The software was supposed to be geared towards non-technical people but it was riddled with icons void of accompanying text descriptions. Neither of the users knew where anything was or what anything meant. The SaaS CEO who was used to Windows exclaimed that the software was full of Apple icons – confusing the use of icons for the Apple design sensibility.

I think these stories are indicative of a larger phenomenon. Designers who have been accustomed to the web and some of the UI affordances are making assumptions about certain user experiences.

Take for example this screenshot of Twitter for iPad. On the bottom left we see two icons. As a veteran web user and an interface designer, I immediately recognize that the two icons mean New Message/Compose and Settings.

However, I think that’s a pretty big leap for someone who’s not a web savvy user to assume that they know what those icons mean. I think UI designers can get too clever and do their audience a major disservice when they start making such assumptions about what icons their audience ought to recognize without further explanation.

Popularity: 2% [?]

Minimalism in Web Design

4 Comments

As web designers we must resist the urge to keep adding. Clients often want more features and we struggle with how to do that tastefully, and in a user friendly manner. We also want to make our designs “prettier” by adding more “stuff” to it. This tidbit of advice from Coco Chanel for women resonates with me as a designer.

Do the hair. Do the makeup. Get yourself fully dressed and then, before walking out the front door, pause by the mirror and remove one item. Maybe it’s the hat. Maybe it’s the piece of jewelry you really don’t need. But the line, according to Ms. Chanel, between knockout and near miss could be found in a single overdone object.

link here

With that in mind, I’ve started to really think about the current project I am working on and what I can remove.

Popularity: 3% [?]

Using a WiiMote to Control an X-Wing

2 Comments

I spent this afternoon putting together a quick demo for my Rich Internet Interfaces Beyond Mice and Keyboards talk I’m giving at the DePaul University iTea Seminar tomorrow. The example is a simple one that illustrates using a WiiMote as an interface to controlling a 3D model. This can be easily used as a game control and or more general UI control. I believe it is a more natural way to interface with 3D elements navigating in 3D space and can be generalized to let people more intuitively navigate through and interface with software such as the operating system. After a few hours of looking for the WiiMote, charging it and some coding, I’ve put together this simple demo:

I can’t claim credit for putting together code to display a 3D X-Wing. I’m not interested in that. I quickly found what I was looking for here: http://code.google.com/p/papervision3d/downloads/list – the source code repository for PaperVision – the open source 3D engine for Flash. At the very bottom there’s sample code for displaying a 3D X-Wing.

First things first, you will need the WiiFlashServer that interfaces the WiiMote with your Mac. That code and supporting documentation can be found here: http://wiiflash.bytearray.org/. There are 2 pieces to the puzzle here. The WiiFlashServer which listens to the WiiMote and sends messages to your app and the WiiFlash Actionscript API which can receive those messages.

Once you download the Actionscript API and put that in your project directory, include it in your application:

import org.wiiflash.Wiimote;
import org.wiiflash.events.*;

var wiimote:Wiimote;

Initialize the Wiimote like so:

wiimote = new Wiimote();
wiimote.addEventListener( Event.CONNECT, onWiimoteConnect );

wiimote.connect();

The only thing we really have to do now is to use the pitch, yaw and roll values of the WiiMote and use them to control the X-Wing, like so:

function handleFrames(e:Event):void
{
var rotX = 0;
var rotY = 0;
var rotZ = 0;

if (!isNaN(wiimote.roll))
rotX = wiimote.roll/Math.PI * 180;

if (!isNaN(wiimote.yaw))
rotZ = wiimote.yaw/Math.PI * 180;

if (!isNaN(wiimote.pitch))
rotY = wiimote.pitch/Math.PI * 180;

// no easing - animation too jagged
//group.rotationX = -rotY;
////group.rotationY = rotZ;
//group.rotationZ = -rotX;

// added easing to smoothen motion
group.rotationX += ( -rotY - group.rotationX) / EASING;
group.rotationZ += ( -rotX - group.rotationZ) / EASING;
}

You can see from the code there’s a section I commented out. You can use the raw WiiMote values to feed to the X-Wing directly but I found that the values can be jumpy and discreet causing the X-Wing to turn and move with a lot of jitter. I added a simple easing function to make the movements smoother.

As you can see, it’s not rocket science. With a little bit more work, we can easily add other controls like button presses to control the firing of the X-Wing.

Here’s the link to the source if you’re interested. Thanks for watching.

Popularity: 5% [?]

Exploring 3D Desktop Concepts and Natural User Interfaces

4 Comments

I’ve been thinking about 3D desktops, alternative user interfaces, and user experience for a while now. I keep a sketchbook that has illustrations of some of my ideas. When I saw the Apple patent filings for their 3D desktop ideas, I was delighted to see that some other folks have very similar ideas to mine.

I hate 3D for the sake of 3D. When I think of adding a new dimension to something as vital as your desktop, many questions come up like:
What benefits does adding another dimension mean to the user?
Am I making certain tasks harder when I add another dimension?
What problem am I solving?

Watch this quick video on some of the ideas I’ve been tossing around.

Multiple Desktops
The Mac OS spaces have never made sense to me. I never use it, not because i haven’t tried. I’d rather stick to my dual monitor. But when I am out and about with only the 1 screen, I still don’t use it. Here’s why – When I put something in another space, I just forget about it. It’s out of sight – and out of mind. I rather just have tons of apps on one screen and use Expose to sort it out.

Having a shoebox/diorama analogy of multiple desktops makes more sense to me since I can zoom out and see where my other spaces are. I have a sense of the spatial relationships of multiple desktops as well and that is key.

Cover Flow on the Desktop
I’m a big fan of Cover Flow even before it was integrated in all the Apple products – when it was somebody’s plugin for iTunes. That’s right – it wasn’t create by Apple. However having it confined within the iTunes application feels restrictive. Once you have a 3D desktop, why not make cover flow a full class citizen of that desktop?

Carousel to Navigate Apps
This is probably one of my weakest ideas and needs to be fleshed out. The basic premise is once you have a 3D Desktop, your apps should exist in 3D space. I’m not sure on the benefits of the Carousel myself, but I felt it was a cool UI.

Using Head Tracking to “look around”, by looking around
To me, this concept is what makes a 3D desktop really cool. The scenario is this: Say I’m downloading something, I can put that window on the desktop on the side of my main one. When I want to check on the progress of the download, instead of having to hit keys on the keyboard to find out, I just very naturally look around to see how it’s going. This is a very natural interaction that doesn’t have to be memorized or taught. This interaction therefore has a low cognitive cost. Instead of having to explicitly take action via keyboard commands by switching desktops to see the progress and switching back, possibly losing context, I quickly glance over and come back to my task.

There’s a lot more than can be explored. Right now, the “floor” of the desktop has not been considered. Also, I have some ideas around 3d folder navigation that I can dive into in the next episode of 3D Desktop concepts.

Popularity: 3% [?]

3D Earth with Head Tracking

2 Comments

Here’s a demo that illustrates my ideas on computer human interaction. Instead of controlling the movement of a 3D globe through the mouse and keyboard, why not move your head to look around the globe. You’ll need a webcam for this demo to work.


Side to side motion works pretty well. Up and down is a little iffy.

Moving around to see what’s on the other side is a much more natural and intuitive human behavior than say pressing some computer keys to change perspective of an object. I believe that as computers become more powerful and more and more people have to interact with them in their daily lives, computer scientists will have to design systems and software that provide a more natural user interface (nui) than what we currently have.

Although many people today deal with computers and the internet, this highly technical tool is still completely inaccessible to a large population because it is so difficult to use. By creating interfaces that are more natural to use, we make technology more approachable to the masses. That’s my 2 cents. Feel free to chime in.

Popularity: 3% [?]

Older Entries