Several designers I respect have convinced me to switch to OmniGraffle for wireframing. I do my day to day work on a Win XP machine, but OmniGraffle is Mac only, so I will use it on my laptop.

It looks like a very promising tool and it seems much faster to use than Visio. Like Visio, OmniGraffle supports user made stencils and there are some fantastic ones out there for IA/UE designers.

Web Flowchart
This attractive stencil is great for Web site flow diagrams. All the boxes a designer needs... just add the arrows yourself.

Web Forms
Nice selection of Web form elements. They are in the Mac style.

Windows GUI

Several standard Windows UI elements. They do not precisely match the real Windows look, but they are close enough.

Mobile Wireframes
Slick stencil that includes the 5 way and soft key buttons.

Web Wireframe
A good assortment of Web UI elements. I love the use of yellow for notes and to call out design elements.

The best resource for stencils is Graffletopia.com. You will see most of the stencils I mention here. OmniGroup also links to a broad range of stencils.

If you would like to recommend other stencils or wireframing applications, please leave a comment.

Labels:

posted by Shawn Elson on Friday, March 30, 2007

DIGG IT | 0 Comments | Links to this post



There were a lot of interesting presentations at the IA Summit. Here are a few of the the ones I thought were particularly useful:

Using search analytics to diagnose what's ailing your IA
Nice intro to analyzing Web site stats/logs and using that data to improve the site's information architecture and usability.

Mobile Information Architecture
Great introduction to challenges associated with designing for the mobile screen. It had a nice point about context. People are not performing general Web activities on their mobile phones. They are looking for specific information that applies to their current time, location and task. They want directions or movie times or restaurant addresses. Streamline your interface to just support the user's context.

DotMobi Mobile Web Developer's Guide
A practical guide for designing Web sites to be viewed on mobile devices. A very thorough and useful introduction to this type of design. Well worth checking out. This was not a presentation at IA Summit, but was mentioned.

IA Methodology Cut Sheet
I thought this was a great idea. The author has put together a style guide for explaining UE methodologies and practices to internal and external customers. It lets them know how the process works in a short one page description. I would like to see deliverables/outcomes explained in this format as well. Customers who are learning about the UE process need to know what they will receive from the UE work they commission.

Labels:

posted by Shawn Elson on Friday, March 30, 2007

DIGG IT | 0 Comments | Links to this post


I will be at the IA Summit Conference in Las Vegas March 22-26. Please look me up if you would like to chat or are interested in Elson UE. I will be posting contract job listings for interaction designers, usability specialists, and visual designers on the job board.

Here are a few of the interesting sounding talks:

  • The brave new world: Usability challenges of Web 2.0

  • IA in Second Life

  • Finding Innovation in the five hundred pound gorilla

  • Architectures of participation: what Communities of Practice can mean for IA

Labels:

posted by Shawn Elson on Tuesday, March 20, 2007

DIGG IT | 0 Comments | Links to this post


With the recent spread of AJAX (Asynchronous JavaScript) on the Web, designers are exploring different ways to use this technology. At the most basic level, AJAX allows the browser to have quick and small interactions with the server without reloading an entire page. Sometimes AJAX comes in the form of caching, or preloading information. This is seen in Google Maps when the user clicks and holds on the map. By mousing down and then moving the mouse, the user is able to drag different portions of the map into view. Rather than having to reload the entire page each time a new piece of map is shown, or precache the entire map of the world, AJAX allows the browser to download small squares of map as they are needed. The result is a seamless, flowing experience for the user. Very efficient.

One of the best uses of AJAX so far is the type ahead feature. Type ahead occurs when the user enters text into a field and the system displays fully formed guesses based on the letters the user has already entered. A classic example of this is in Microsoft Outlook when the user types in the "To" field as they compose a message. Outlook suggests email addresses based on the letters the user has already entered. This interaction places very little demand on the system because the list of email addresses Outlook has observed being used is relatively small. What happens when the list becomes enormous?

Lala, a terrific CD trading service, has an excellent example of type ahead in their search field. The user can enter any CD artist, album, or song name. The list of all possible artists, albums, or songs is far too long to precache for every browser hitting the homepage. Besides, fully caching the list would be an inefficient design that could lead to bogging down Lala's servers. Instead, Lala uses AJAX to quickly query the server and provide type ahead suggestions. There are no page reloads and very little lag time. It works beautifully.

Labels: ,

posted by Shawn Elson on Sunday, March 11, 2007

DIGG IT | 0 Comments | Links to this post


Ning, the Web 2.0 social networking community site, has a terrific lightweight registration interaction. When the "Signup" link is clicked on most sites, a registration page is loaded. It can be a dramatic mode change for users. The user's primary tasks rarely include registering for a site... the registration process is simply an extra step they are forced to perform on the way to the content they want.

When "Signup" is clicked on the Ning toolbar, instead of having a registration page load, Ning has a DHTML layer appear on top of the currently loaded page. The layer allows the user to fill out the registration form without leaving the primary context of the page they were previously viewing. I think this is a great, low intrusive method for site registration.

I recently performed a usability study on a Web shop design prototype for a major apparel brand. One of the clear takeaways was that customers do not like being taken out of their task of browsing products. The study participants were using a hub and spoke model of browsing for products. When the customers clicked on a product link, a full product detail page was not loaded. Instead, a product detail layer appeared on top of the list of products being browsed. This made seeing product details less intrusive and allowed customers to quickly browse deeply into products and broadly across products. The response to this interaction from the participants was very positive.

I will be working with a startup next week to hone and polish the interactions of their yet to be launched site. I will definitely be recommending lightweight layered interactions..

Labels: , ,

posted by Shawn Elson on Friday, March 02, 2007

DIGG IT | 0 Comments | Links to this post