Archive for the 'User Experience' Category:

Information Architect

In•for•ma•tion n. 1.) Knowledge obtained by research, observation, study or instruction in a form allowing for its recommunication to others enabling a state of knowing.

Ar•chi•tect n. 1.) An individual skilled in the art of building who creates the instruction for the construction of organized space. 2.) the thoughtful specifications and superintendence of the building of useful structures.

In•for•ma•tion Ar•chi•tect n. 1.) The individual who organizes the patterns inherent in data, making the complex clear. 2.) A person who creates the structure or map of information which allows others to find their personal paths to knowledge. 3.) The emerging 21st century professional occupation addressing the needs of the age focused upon clarity, human understanding, and the science of the organization of information.

From Information Architects by Richard Saul Wurman. Lest we forget, as the Web 2.0 deluge pours on.

» Posted in User Experience, Information Architecture | No Comments


Browser Plug-ins

I use the Firefox browser and Internet Explorer 7 at a ratio of about 60% to 40% respectively. The plug-ins really make Firefox sing.

Here are the plug-ins I use:

  • Firebug indispensable add-in for web developers who need to debug JavaScript, examine the HTML source of a page, examine CSS and modify it on the fly, and much more
  • All-in-One Sidebar much more robust tool panel
  • ColorZilla excellent tool for snagging the HEX values for colors in a web page; it will send the RGB values to the clipboard in a variety of formats
  • Firefox Showcase provides thumbnails view of all tab content
  • Netcraft Toolbar provides information about a site’s hosting company, server OS and web server as well as site uptime and more
  • Professor X quickly view a consistent presentation of the head section of a web page include title and meta-tags
  • SEOpen includes many tools for analyzing a page with search engine optimization in mind
  • Forecastfox provides compact access to weather information in the status bar
  • PicLens provides a sweet slide show view of Google image results as well as other image feed sites like Flickr, Facebook, Picasa, and more
  • SafeCache isolates your web cache on a site by site basis so sites can’t pilfer your browsing history
  • User Agent Switcher changes how your browser appears to a website; Some sites change content based on user agent; For instance, a site might let the GoogleBot browse the site but deny IE and Firefox
  • View Source Chart provides an alternate visualization to reveal nesting complexities in a web page’s HTML
  • Diigo provides annotation and bookmarking capabilities right in the browser; It can also send you comments and links to other bookmarking sites as well as to your blog

Internet Explorer 7 has some nice plug-ins as well.

  • Web Accessibility Toolbar helps reveal how accessible your web site is; reveals problems with color selections, compatibility with text readers, and more
  • Microsoft Developer Toolbar provides many powerful page manipulation and analysis tools
  • IE7Pro makes IE as usable as Firefox; My favorite features include, in-line search instead of that annoying window, weather, undo close tab, spell-check, save page to image, user agent switching, disable MySpace clutter, and more.

I am sure there are others worth noting. Feel free to pass them along in the comments.

» Posted in General, User Experience | No Comments


Computer Users in Film

As one who is very interested in usability and intuitive interfaces, I had to laugh at this list of top 10 usability bloopers in film compiled by Jakob Nielsen.

I think filmmakers avoid showing real email and other software applications to avoid product placement costs, but that certainly doesn’t account for the fact that there will always be one lead character that can walk up to any computer and instantly operate the interface, guess the password, find any document in seconds, and immediately send it to their mobile device. That’s how things work in real life, right? I have trouble finding documents on my own machine.
No matter how smart you are, some things just can’t be done without an esoteric knowledge of the system, so–for intimidated computer users everywhere–blame it on the computer not yourself.

» Posted in General, User Experience | No Comments


Ice Architecture

There were years of anticipation around the latest release of Microsoft Windows such that the recent official release of Vista seemed a little anti-climatic. However, at least one launch party caught my eye. The photos from the Vista Ice House: Toronto launch party were fun to see. It reminded me of the mysterious Swedish ICEHOTEL which takes ice architecture to the extreme. I have always wondered about certain hygienic aspects of staying at an ice hotel, but I guess the details have been worked out, because now there is an Ice Hotel in Canada as well.

» Posted in General, User Experience | No Comments


Wii are the champions

Merry day-after-Christmas everyone. Today my kids will enjoy their first full day with our new Nintendo Wii gaming system after cracking it open yesterday morning. What a revelation … and a revolution. On December 24 they sat cross-legged on their rear-ends with that deer-in-the-headlights gaze into the so-called action on their previous-generation GameCube. Today, they’re not only standing upright but also punching, swinging, throwing and bowling. On a chilly mid-winter night both boys come running upstairs with their shirts off because they actually broke a sweat from all the exercise. Merry Christmas, indeed.

For those of you who are not familiar with Nintendo’s latest gaming console and the paradigm-shifting user interface I’m referring to, check out http://us.wii.com. Not only can you take full-motion control of the action, but you can also custom-create an on-screen avatar of yourself (a “Mii” — what else?) that can appear in multiple games.

We’ve heard the PlayStation 3 and XBOX 360’s on-screen graphics are much better than the Wii, making the blood, guts, and mature content more realistic. Uh, no thanks. Instead, let’s congratulate Nintendo for focusing their product development on bona fide user experience innovation that makes the PLAY seem more realistic. Let’s hope the Wii continues to dominate market share and shift game-makers’ creativity back toward kids and families where it belongs.

» Posted in User Experience | No Comments


Comparing Product Features

One advantage of the web is the ability to control the content being viewed.  This really comes into play when trying to compare products or services online.  Being able to compare features effectively helps the customer make the right choice.

You have probably seen those web pages that include a huge list of features with check marks in the columns that represent products to be compared.  Often a company will place its products next to competitor products and then stack the deck by inventing features it can claim that the competitors cannot–the advertising technique called differentiation.

A few sites allow you to filter a list of products by choosing particular attributes such as products within a particular price range, but most online efforts have not impressed me.

Well, I stumbled across a site called WikiMatrix, which helps users select wiki software.   The comparative tools are fantastic. The features that mean the most to me are the fact that you can choose which products are compared and you can choose which features are compared.  The later is key.  The user determines which features are important and can limit the comparative list to just those features.

I think there is still more that could be done.  One thing would be to let users define or apply their own features to products and then compare them.  For instance, the user might add an endorsements attribute or certain personally-defined pros and cons.

Either way, there is a lot of potential here especially for complex products like insurance plans, cell phone plans, automobiles, and computers, etc.  The web is the perfect medium to accomplish it.

» Posted in General, User Experience, Information Architecture | No Comments


Instant Messaging from a Web Browser

Instant messaging (IM) is a useful tool for ad. hoc. real-time conversations with contacts. You can quickly ask a question, get answer and continue working. However, the problem with instant messaging is that all your contacts probably use different networks and each messaging client is a separate software installation.

There is a solution to this dilemma, which I thought most people already knew about. However, since I have met several people recently that did not know about Meebo, I thought I would post about it.

The website Meebo.com offers an incredibly slick IM client hosted in a web browser. It requires no installation and it works over port 80–the standard web port. I believe it uses only JavaScript to work its magic so you will want a modern browser like the latest versions of FireFox, Opera, or IE.

The good news is that it supports Yahoo, Google, MSN, and the AOL IM platforms. It does not even require an account to use, so you can just navigate to the site, login to any or all of the supported IM platforms and you are on your way.

To save preferences and customizations you can create a Meebo account. Nice!

» Posted in General, User Experience | No Comments


The Importance of Testing Usability

This post makes me a bit of a Mac-basher, but Apple’s Mac vs. PC ads are so smug I have to do it.

Apparently, the way the new MacBook is designed, the sharp plastic of case cuts into the user’s wrists as they type. Now, I thought Macs were user-friendly?

There have been 3 suggested solutions that I know. One, get out the sand paper and get to work. Two, uglify your Apple-art with wrist pads. Three,–my personal favorite–wear wrist bands. I see a Mac-inspired fashion trend here.

Well, if you don’t like your options, you can always run OSX on a Dell (or other Intel-based laptop).

» Posted in User Experience, Design | No Comments


Flash, Spring, Bounce, and Boing!

I recently created some Flash applications that utilized “bouncing” motions. After trying a variety of methods to acheive this effect, I eventually developed a surprisingly simple and flexible solution. Since I like the effect so much (and am sure that this is no real invention of mine), I decided to put together the following example and provide the source code.

Due to WordPress Blog limitations, please load the Flash file externally.

View the ActionScript code for the animation above. As you can see, the really useful code in the “onEnterFrame” function is only five lines long, and could be less. The concept of this method is simple: Calculate the clip’s acceleration using the “distance” to the goal, and use it accordingly. This works because, as the clip moves past its goal (via it’s momentum), the acceleration becomes negative and begins to counteract that momentum. Energy is taken from the system so that the clip will eventually reach stasis.

It would take a calculus and/or physics lesson to explain how position, speed, and acceleration are related… I’ll save that for another time. All that matters is that it works, right?

Finally, this solution is very flexible, as you can easily alter the speed and strength of the bounce by changing the “_accelStrength” and “_energyRetained” variables. Play around with these values, and let me know if you find any interesting results!

» Posted in Development, Flash, User Experience | No Comments