eTech Happenings - Monday 3/6/06

I am at eTech this week. I will try to blog about some of the events as I observe them.

Creating Passionate Users
I attended Kathy Sierra's workshop this morning, Creating Passionate Users. Wow! What a treat.

I went back over my notes and found it very hard to summarize what I had heard (since there were dozens of excellent thoughts to chew on.) But here are a few of the nuggets I came away with.

• People want to "kick ass". As Cooper says, "User's don't want to appear stupid." It's important that a person be able to move from the "I suck" phase in mastering anything to the "I rock" phase.
  
• Constant learning potential is the key to passion. The promise of mastery and its benefits along with continual stimulating nuances to a craft make for passion. It's nice to have a long growth potential.
  
• The brain has a crap filter. We have to speak to the BRAIN (physical, chemical responses that can't be help) rather than the mind. For it is in speaking to the way we are wired that we can get to the mind.
• Conversation trumps formal lecture. The brain engages in a conversation. It goes into stasis in a lecture.
• Do what it takes to get users past the "I suck" phase into the "I rock" phase. You can motivate users to do this by providing:
• a way to recognize expertise
• a meaningul benefit
• a clear path to getting there
• Learn from game design. The cycle of build interest -> challenging activity -> payoff.
  
• Learn from screenwriters. The heros journey.
  
• Life is normal
• Something happens to change that
• [helpful sidekick shows up]
• Things really suck
• Hero overcomes bad things
• Life returns to normal-- but the character is changed.
• Ask two questions when you are writing.
• What will be the user's journey?
• How will the protaganist be changed.
• Dignity is deadly. Once you try to appease the critics you will be driven to mediocrity. If you are doing something write someone will criticize.

And the final thought is when writing, designing a user experience, etc. it is not about you (the author, creator). It is about how users feel when they interact with your organization/book/blog, etc.

Ruby on Rails
And speaking of passion, I got to hear my friend David Heinemeier Hansson give a workshop on Ruby on Rails.

I have loved this language and framework since the first time I played with it. I still do. I just wish I had some time to do something with it. Note to self-- make time!

Lots could be said, but one thing that stuck out was the concept of "partials". In Rails you can express snippets of HTML as partials (read templates). You then have access to this snippet to include in your code. Kind of like JSP tags only a thousand times lighter and in native HTML.

You can also create rjs files (rails javascript). Its a way to create javascript with a ruby on rails syntax being able to access the DOM via rails variables or by selecting elements with CSS selectors. Then there are page manipulation mechanisms to apply animation effects or hide, show or replace html. What's cool is the code is generated on the server side in the controller where it is natural to think of accessing application state. It controls what gets generated on the client side in JavaScript land.

There was also some interesting discussion of using Microformats as a data source. David is working on ways to transform a microformat into your application specific HTML markup. Interestingly I did a blog interview with a group from the UK along with Kevin Marks of Technorati who is doing a lot of the work with microformats. We also talked about this over dinner. It is somewhat the argument for JSON. JSON expressess data. JSON is native to the browser. Microformat express data (albeit in XHTML). Microformats are native to the browser. So in both cases the load is light on parsing and using them to render views.

Bruce Sterling Keynote
On the Internet of Things. A look at the visionary world of when all things are acessible via the "internet". And by all things I mean all things. Like your keys or your shoes. Imagine, he says "googling" for your shoes :-)

Its the first time I have heard Bruce talk. He is an amazing speaker. An incredible wordsmith. His approach to writing science fiction is to first write a visionary technology manifesto then craft a story around the emergence of the technology into the future.

Sites to Check Out/Books to Read
So here is the list of interesting things I want to investigate further:

Books:

• Flow: The Psychology of Optimal Experience
• Mind Hacks : Tips & Tricks for Using Your Brain (Hacks)
• Creating Passionate Users (coming summer 2006)
• The Wisdom of Crowds
• The Media Equation : How People Treat Computers, Television, and New Media like Real People and Places (CSLI Lecture Notes)
• Shaping Things (Mediaworks Pamphlets)

Sites:

• eeggs.com
• ipodlounge
• Maker Faire
• instructables
• second life
• iconbuffet
• fluxiom
  

By the way, I will be giving a 15 minute talk to the conference about the Yahoo! Patterns & Code Library. That will be Wednesday, 12:15pm.

Open Yahoo!

I've had a few people ask us why we went public with our libraries.

Having been intimitately involved in the bringing the pattern library live I can tell you first hand the simple reasons they have gone public. And these are good reasons for others to do the same.

• Goodwill. Sharing back with the community always pays back in rich dividends.
  
  
• Feedback. Lots of eyes and lots of hands make the libraries better. We recognize that there are a lot of smart folks outside the halls of Yahoo!
  
  
• Dialog. Brings issues to the forefront for discussion. Like accessibility for design; common design libraries and language.
  
  
• Reuse. Best corporate reuse strategy is open source. I saw it at Sabre with Rico. Same at Yahoo. Already groups are using the libraries more now that they are public. And it energizes people to participate in something bigger than all of us.
  
  
• Standards. If some of our better design ideas spread then it is good for our users and in turn good for us. Relearning different ways to do the same thing is only fun for so long :-)
  
  
• Mindset. Yahoo! has a lot of folks in management, design & engineering that have benefited greatly from the open source community. This gets in your blood. It becomes part of your value system. So it becomes a natural reflex to do it this way.
  

That's basically the reasoning. No big surprise.

And yes, we don't share everything. We have lots of really awesome research going on. Really cool stuff coming. Sorry that won't be in the next release of the libraries ;-) But I think that is understandable.

Yahoo! Libraries Released - Ajax & Patterns

I am excited to announce that just a little while ago, we (Yahoo!) released two new (previously internal) libraries to the public.

The Yahoo! Design Pattern Library is being released under a friendly Creative Commons License. The goal is to share common patterns we see emerging on Yahoo! We hope that by opening up our design patterns that we can both share our thinking and garner your feedback.

At the same time we are releasing the Yahoo! User Interface Library. This is an industrial strength Ajax/DHTML library that we are currently using in lots of places all across Yahoo! Its got drag and drop, animation, event management, position handling, widgets, etc. And its all under the BSD license!

And we are announcing a new blog for both of these libraries. The Yahoo! User Interface Blog discusses both of these libraries in detail. You can choose to subscribe to all of the articles there, just the design side or just the development side.

And finally, we have a Yahoo! groups forum for discussing patterns and the UI library will be part of the current Yahoo! Developer Network JavaScript forum.

Go check it out!

Fun in LA

LA Conference
A few days back I had the delight of speaking at the Adaptive Path, Designing and Building with Ajax along with Jesse James Garrett and Dan Saffer down in LA.

First, thanks to all the wonderful designers and developers I had the honor of meeting. Its been a while since I spoke in a venue like this and I thoroughly enjoyed it. It seems that you also felt the conference was a wonderful success. It is my hope that the mental framework that we laid out for understanding the world of Ajax design & development will really provide an ongoing boost to your success. Don't forget to share those successes with me! Love to hear them.

Second, thanks to the AIGA for their wonderful mixer at the Westwood Brewing Company. So many creative and talented folks in LA to learn from even in the most casual setting. And, wow, the IxDA F2F at the Liquid Kitty was awesome. Thanks to Danna Hudson for getting this together.

So what did I take away from my time there?

• Subtle design. I met Ian who works in motion graphics. He taught me a little about cinematic transitions & effects in the world of commercials. One rule of thumb he mentioned was when deciding on the amount of color saturation or cinematic effect, he generally chooses what he thinks looks right, then halves it. This rule has always stood him in good stead. Hmmm. Perhaps we should apply this to flash & Ajax effects.
  
  This follows the rule of thumb I learned several years back from Kevin Mullett's book Designing Visual Interfaces in which he describes a technique for removing clutter. Get rid of all but the most essential information for any screen. Then slowly turn up the "contrast" knob, dialing in more visual treatment. Stop just when it communicates.

• Documenting rich interactions is still way too hard. Ok, I already knew this. Just re-inforced this fact. While we covered several real-world approaches to documenting Ajax applications, designers and developers still struggle way too hard in this area. Fine-grained interactions (interesting moments, microstates) must be documented in context of the page and flow. And all of these have to flow along the time dimension. Its just a hard problem.
  
  Powerpoint, Captivate, Breeze, SnagIt, Visio, Photoshop, Dreamweaver, Keynote, Illustrator, Fireworks, Word, Quicktime, SnapZPro, Director-- each has its pros and cons but nothing is really crafted for our field. My next step is to check out Microsoft Sparkle. Will it be the holy grail? Or is it just a slippery slope into Redmond? :-)
  

• Teaching with visuals and a mental framework really works. I put a lot of time into my part of the presentation (spanned 4 topics). I have been ruminating for months on interesting ways to think about Design Patterns and Ajax Operations. I wondered if I could impart what has been rattling around in my brain. It seems (based on survey feedback and talking with attendees) that it worked. I love Keynote. When you use transitions or animations they are cleaner, more elegant and when used right reinforce what you are teaching.
  
  This is true with interfaces. A good mental model and using a visual language for the purpose of communication works for user interfaces and for presentations.

• We have much to learn from each other and from other disciplines. I met people with backgrounds in graphic design, animation design, motion graphics, information architect, classical architecture, software engineering, and so on. Each come at the problems from a different angle. I have a list of books that I am going to plow into that I am looking to inform my design skills from orthogonal directions.
  
  This caused me to reflect on the wealth I have around me at Yahoo! in our User Experience Team. My manager is an awesome photographer (and designer!) I work with a PhD in Rhetoric (and professor of writing at Stanford), a lady who designed the animation tools at Pixar, a guy who designs complex strategy board games (like Settlers of Caton) in his spare time, visual designers (like Luke Wroblenski), a classically trained architect, software engineers turned designers, talented musicians, and so on. Wow! what unique perspectives live inside the heads of those around us.

Soon, a City Near You?
So, hopefully we will be in a city near you. Looks like Austin and NYC or Philadelphia might be next. Keep an eye out at adaptivepath.com.

A few notes on upcoming speaking engagements:

• Feb 6 - VeriSign Developers Summit (private), Miami, FL
• Mar 2,3 - Yahoo!'s Front End Engineering Summit
• Mar 13 - Real World Ajax - SysCon - NYC
• Mar 21 - Eclipse Con - Panel - Rich Interaction Toolkits - Santa Clara, CA
  
• Apr [TBD] - Designing & Building with Ajax - Adaptive Path - NCY or Philadelphia (tentative)
  
• May 10 - Adaptive Path - Designing & Building with Ajax - Austin (tentative)
• May 11-12 - Ajaxian Experience - San Francisco
• June 7 - Adaptive Path - Designing & Building with Ajax - Amsterdam (tentative)

If you are at an event that I am speaking, please catch up with me so that we can chat. I love to hear from folks who read my blog.

Nine Tips for Designing Rich Internet Applications

Recently I was asked to provide input into a presentation. The question was asked, if you were going to provide some quick basic guidelines for designing rich applications what would they be.

Here were the nine thoughts as they originally came to my head.

1) Make it directly interactive
Instead of page to page interactions think direct interaction. Use in context editing as much as possible. Use drag and drop only where it makes sense. Barring a selection model, put tools as close to the objects being edited as possible. Cooper states it as "Where there is output, let there be input."

2) Make it inviting
Use hover to invite users to the next level of interaction. If the interface responds well to light events (like hover) it can be used to entice the user to interact.

3) Use lightweight, in-context popups instead of page transitions where possible
Although they will eventually get over-used, lightweight popups can be your friend. Think of them as annexed areas for your page.

4) Use real-estate creatively
As mentioned popups help. But slide outs have long been allies in desktop tools, they can be an aid in the world of the web.

5) Cross page boundaries reluctantly
Think of a page switch as a context boundary that the user may or may not want to cross. Think of it as a place that many of your users will lose interest and no longer follow you.

6) Create a light footprint
Make it extremely easy to interact. Rating movies or news with just a click on a star with no-refresh is awesome. Checking hostnames without leaving the page is an excellent way to keep a user engaged. Shopping by clicks that only add to a container on the page (instead of going to a new page) are like impulse aisles in the grocery store.

7) Think of your interactions as storyboards
As the designer you are the director. Think about the event states as acts in a play and your interface elements as actors. Get them all moving towards telling your story. Putting the frames down on a storyboard is a great way to rehearse your script. Think of the interesting moments as opportunities for engagement.

8) Communicate transitions
Keeping the user informed during lightweight operations (that don't leave the page) with spinning wheels, busy or progress indicators keep the user engaged with a living page.

9) Think in objects
Instead of thinking about content and pages, think about Rich Internet Objects. The travel log in Yahoo!'s Trip Planner is a good example. Once created it can be searched for or shared. This will help you create more interactive applications and make the user's work recognizable and sharable.

These are not exhaustive. Even as I go to publish this I can think of other tips to include... but I will resist adding to the list. Perhaps you have some tips/principles that have helped you solve design challenges?

Designing and Building With Ajax

In December, Adaptive Path started a new series of conferences specifically addressing how to design and engineer rich Internet applications with Ajax. At that conference Ben & Dion (ajaxian.com) did a wonderful job of presenting the world of Ajax from the technical perspective.

I am excited to announce that I will be following in their footsteps and will be presenting along with Jesse James Garrett, Dan Saffer and Ryan Freitas at the Designing and Building with Ajax conference in LA on January 26th and in Miami on February 8th.

Based on feedback from the first conference we are revamping some of that curriculum and I am very excited about what we will be presenting.

So who should attend? Well we are desiging the material for both designers and web developers. If you are solely focused on design there will be lots of great ideas and tools presented that will enrich your work. If your bag is development, I aim to whet your whistle with some technical goodies as well as attempt to de-mystify the world of Ajax and DHMTL. And if you wear both hats-- well you will have a double-treat.

Why should you attend? Well, I think one really unique aspect of this conference is that instead of hearing 5 or 6 different speakers talking about individual topics, we are weaving a story through the day that is meant to build a mental model in your head to help you take a problem from conceptualization to design to implementation. The other unique aspect is presenting design and development in a wholistic manner. This is the context in which problems must be solved. This is also a great way to really understand the technology-- in light of our user's goals and needs.

Oh and one more thing. At the conference in LA, there will be some exciting news announced!

Would love to see you there!

Interesting, Seducible, Teachable, Engaging Moments

James Govenor pointed out a connection between my blog about Interesting Moments and Kathy Sierra's blog on Is it Interesting? (see also her discussion of the tie-in). Her angle is about engagement and delight.

Also, Joshua Porter from User Interface Engineering pointed me to an article by Jared Spool from back in 2002 on The Search for Seducible Moments.

As a parent I learned a long time ago there are times when a person is especially receptive to learning. These are called Teachable Moments. If one is prepared for those times, more can be accomplished in a few minutes that a lifetime of nagging would ever accomplish.

Putting these thoughts together, we should look for the interesting moments of interaction that open the door for us to seduce and engage our audience.

I have written about some of these moments in general. Like the thought of providing an invitation to the user through lightweight events (like hover). Getting users to review a movie by making the interaction with the movie rating control fun and engaging is one example.

I am curious, what sites, products or features have you found engaging-- or even seducing?

Distracting or Narrowing: Looking a Little More At Live Search

Ajax opened the door to immediate actions. One of the first types of problems that immediate action was applied to was in the area of search. Here are a few examples.

Google Suggest
Google Suggest was an early demonstration of the concept of Live Search. As the user types in the Google search box, the top search terms that match the user's input are shown in a drop down. If I am looking for 'Tom Cruise' only 5 characters are required to match this search term ('tom c').



I have never used Google Suggests for anything more than a demonstration of how live search works. I rarely need help in finding search terms based on four or five characters I have typed. Don't get me wrong, I think it is wonderful code, snappy response and perhaps has some purpose. I just have never found it personally useful. I mean if I am going to look up Tom Cruise, I perhaps might find it useful that it completes it for me and spells it correctly. But I think I know how to spell Tom's name.

Here are a few thoughts I have on this.

• If I am typing a term I probably already know the term I am typing
• The drop down can be annoying as it distracts me from typing
• It is really only useful for common searches. Since I find myself typing fairly qualified search terms; and there the suggestions start to trail off rapidly (at the end of the long tail)
• Once I find matching terms I just get a second pile of results. So in essence I have searched twice.
  
• The usefulness seems to be if I just want to see what is hot that starts with a few characters ;-)

I am just not sure how often I am searching for search terms rather than search results. Did it really help me narrow on results or just distract me along the way. (Hey sometimes distraction is intended for a purpose-- don't see its value here.)

If you have found Google Suggests useful please let me know. I am sure I am missing something. I would love to understand common use cases in which this is the case.

Yahoo! Instant Search
Yahoo!'s Instant Search takes a different twist on this. A balloon popup shows up with a single best match (based on Yahoo! Shortcuts). Kind of like a 'google suggests' for 'feeling lucky' only your lucky day is on Yahoo!

Typing 'tom cruise' yields the following:



Ok, the difference here is a candidate result is shown based on what I have typed. But here are the caveats.

• I have to type fairly specific, complete search terms. 'tom c' does not cut it. 'tom cruise' does. And do I really want the imdb database result for Tom? Interestingly, the Y! Shortcut is his fan page, which is what I was looking for in this case.
• The balloon can be distracting since I am personally conditioned to multiple results to look at. Giving me just one seems to make me think harder about whether this is the right place to go. I tend to compare results before picking a term to drill into.
• With the balloon in place, hitting enter just takes me to the results. Which seems reasonable but there is amiguity about where I am going when I hit Enter. Ctrl+Enter is supposed to go to the link in the balloon. But on the Mac with Firefox it does not seem to work.

I think the instant search is a slightly better idea than showing search terms that match the characters I type. Perhaps if Google Suggests showed synonymous search terms around what I am trying to search for (hard problem) it might be more useful.

It is interesting that the instant search provides a nice interface for those with screen readers. The popup triggers visibility and is read by the reader. Those without sight can know the best result found instantly. Nice side effect.

Now I am on the fence overall about its narrowing capability vs. the distraction it causes me. For popular items it seems to have a 50/50 chance finding me exactly what I want. However, I tend to be someone who is searching for more obscure items so to me it is distracting (though cool!) The fact that it narrows to 1 item causes it to have this sharp distinction between distraction vs. narrowing.

Do you like or not? If I understand correctly, it did well in user tests. What say ye?

Kayak Auto Complete
Kayak.com is a good example of live auto complete. Say the user is wanting to fly into New York city. They seem to remember that the airport they want is called LaGuardia (not sure how to spell it or what the airport code is). When I type 'New Y' I get the following results:



Ok, this is nice. I hate remembering the airport code. And I hate having to go to another page to find out that the site could not figure out what I meant. Jakob Nielsen states as one of his ten usability principles, Error Prevention. Providing the feedback instantaneously to cue me to what the system thinks is great. Saves me time and makes me feel like I am narrowing in on the right thing. This probably ties in with Jared Spool's research on The Confidence Game which shows that users are happy to click and click as long as they feel confident they are reaching their goal. Here I have the best of both worlds. Raise my confidence and do it with the minimal effort!

Hey Travelocity, FareChase, Orbitz, Hotwire, Expedia-- this is good stuff! Get this feature in your sites!

Without a question this helped me narrow to my result and did not distract me.

Of course I have compared apples and oranges. Both Google & Yahoo are dealing with an enormous body of information that it is trying to give you instantaneous feedback on during your typing. Much to infer. Kayak has an extremely limited (though hard to remember) set of data. Perfect for an instantaneous narrowing opportunity.

Yahoo! Mail & Why it Dumped LiveSearch
The new Yahoo! Mail Beta (still in limited release--and no I can't get you in the beta! :-) has a nice search box for finding content in your mail. It works extremely well. When you search for some content you thought came into your mail messages, the results show snippets of the conversations with the matched text highlighted.





Now you will notice that the search box has a little "Go" button beside it (and when activated, the an inline progress indicator shows). So how can I call this live search? Well it really isn't. However, they started with a live search in the Alpha version. The user would type a few characters and then the search would trigger. However, when the product went beta they went with a more traditional "submit" model. In other words instead of key events (or losing focus) implicitly triggering a search, the user has to now hit the "Go" button to get a search initiated. Why the change?

The primary reason was performance. Supporting the scale of users within the Yahoo! Mail network would be an enormous hit on servers. However, I think there is also something to be learned from this on the user experience side.

Now this is not scientific. It is my observation. But when confronted with a live search box that will return results (not suggestions) I immediately expect a button to trigger it. So at first I am a little unsure. Ok, that can be worked around by learning the interface. But next as I start to type a string, say "liberty mutual", it would start matching 'liber' finding things about liberals, liberality, liberty and so on. Now it starts changing as I continue to type. I get through the first word 'liberty' and now I find mail that discusses liberty in the U.S. and elsewhere as well as finding an email from my insurance company. Finally I type the whole thing in and get what I am looking for.

Now here is the point. How helpful was the constant feedback loop?

Did the feedback help me narrow to the message I am looking for or did it distract me during the task of entering what the term I knew I was going to type?

I vote that it was distracting.

I feel like I am in a race with the instantaneous search engine to get my term in before it starts returning the wrong results :-(

Thankfully it was replaced by this more traditional (yet Ajax-based) solution.

Amazon Zuggests
Using the Amazon API, Francis Shanahan created a way (Amazon Zuggests) to search amazon using the similar approach of Google Suggests and Yahoo! Instant Search.



This is really nice since it shows the results to my search terms as I type. Since the results usually have cover thumbnails and some text, it is easy to use it to explore to find books on a topic without ever leaving the page.

But does it really help me narrow quickly? Well, yes & no. Since it seems to not try to search too fast (on my pausing to type) I don't get into the race I felt like in the early Y! Mail Alpha. I can type a word, say "football." What I get back is a bunch of books on football for NFL and college. What I really want is college football. So I continue typing, adding the word "college". Now I get a bunch of college football results.

By not narrowing too quickly (to one result as with Y! Instant Search) and not trying to return results to fast (like Y! Mail Alpha did), the feedback loop is nice and allows me to refine by typing keywords.

Summary or What I Think I Have Learned So Far

To kind of sum of the lessons I think I see here. Live search is useful when

• The results are direct results-- not indirect results (as is the case with Google Suggests)
• The results are narrowing and not diverging (as in the case of showing more search terms in Google Suggests)
  
• The results are narrowing and not distracting (as was the case with Y! Mail Alpha, Google Suggests and potentially Y! Instant Search)
  

There are other ways to refine search. Nice examples on the Yahoo! site include the new Yahoo! Shopping and Yahoo! Travel which allow you to select & unselect filters on the left and see the results on the right in real time. One of the early examples of this was on the kayak.com site in refining flight searches.

So I am interested in feedback. What other general rules am I thinking of? What other examples come to mind? What do you like or hate about live search examples?

Feedback appreciated.

Storyboarding Interesting Moments

In a previous post, I discussed the idea of an Interaction Matrix. I described its purpose as documenting the event states that occur within drag and drop, inline editing and other types of interactions.

However, the term event states is a rather dry and sterile way to think about this really important concept. In fact the term comes from the programming world (which I lived happily in for many years.)

Recently, I was at a talk where Nate Koechley presented about the new vocabulary of user experience in the world of Rich Internet Applications. He used the term Interesting Moments (which was coined by Eric Miraglia) to describe the event states within an interaction that are points of user engagement or interest.

I really like that term. Wish I had thought of it first ;-)

Thinking of storyboarding interesting moments within an application, an interaction, or a widget simplifies our thinking.

It actually turns event states inside out and focuses them instead on the user. It asks the question, "What is interesting to our user?" and "What is needed to engage them (invitations) and aid them (feedback) through our story?"

Nate also pointed out that designers have the role of director. As such we have a cast of characters (our interface elements) and the timeline (interesting moments) on which to play out our interface.

Let me know what you think...

Tags: storyboarding interactiondesign prototyping article

Visio Wireframe Toolkit for Download

In an earlier post I mentioned a wireframe toolkit I wrote for Visio to make wireframe creation go much faster. Specifically I discussed one aspect of the kit-- animating wireframes with Visio. I wrote a fuller article that is just getting around to being published on boxesandarrows.com. It should show up this weekend.

In the article, I provide a reference to the fuller wireframe toolkit and they (at boxesandarrows) have agreed to host the installation files. Since I have not really explained the wireframe toolkit nor provided a way to download it before, I felt it would be important to provide a blog article about the kit and how to get it for your own use.

Caveats
Please note. The kit was fine-tuned for our frameworks at Sabre (some of which became the openrico.org project). As such the code generation is only beneficial to those with that framework (sorry, not Rico). However, those that are industrious can open up the Visual Basic Editor in Visio and find the code that generates JSP and Java/Swing code and simply replace it with code to generate PHP, ASP or whatever suits your fancy.

Also, the style has been reduced to a mostly color-less variety suitable for wireframes. In the original we had our demo CSS style implemented in Visio. The color-less variety was a really quick hack I did to dumb it down.

I don't have any proper documentation. I have included a movie presentation on how some of the features look when someone is using them.

And finally, I have spent no time in the last 5 or 6 months refining it. Now that I understand how to create Visio shapes and manipulate them I would do some things differently. I keep thinking it would be nice to clean it up, fully document it and release it. That though was what kept me from sharing it before. So, here it is. Hopefully, some will find it helpful.

Wireframe Prototyping for Visio

Visio is widely used by interaction designers and information architects for creating wireframes. At my previous employer, Sabre, I created an extensive wireframe toolkit for Visio that included such features as:

• Complete web component stencil library (including standard components, table, menus, tabs, and tree)
• Fast, intelligent snap-to layout using pre-programmed Visio connectors
• Provide a way to visualize rich interactions (animating a wireframe)
• Intelligent components that have built-in behaviors
• Generate requirements documents from wireframe artifacts
• Generate code from wireframe artifacts
• Automated annotations and callouts

Download & Installation

The stencil library is available for download.

1. Make sure you have Microsoft Visio 2003 installed on your machine.
2. Download the zip file
3. Unzip this into your C:\My Documents\My Shapes folder. (My Shapes should have been created by Visio when you installed it.) You should have the contents of the zip directly in the My Shapes folder.

Now that it is installed, you can navigate to this directory and double-click inlineEditWireframeExample.vsd to experiment with the photo editing example. If you want to create a new Visio wireframe using the stencil library double-click the Wireframe.vst file.

Notes

• Make sure you allow macros to run (change your security setting to avoid the annoying messages... sorry I know how to fix this, just haven't gotten around to it.)
  
• The templates were originally built for enterprise web applications. Some parts may or may not be applicable to your application. I welcome feedback. At some point I would like to rework to be more generally useful.
  

Boxes And Arrows Article

Look for upcoming article (11/20/05 ?)

Presentation

• You can download a presentation of what the Visio stencil library contains. Download it as flash (4 MB) or as a quicktime movie (this contains all of the embedded videos -- 5 MB). I recommend the .mov version.
  

Enjoy!

Y! Trip Planner & Web 2.0 Content Objects

A couple of weeks back, Yahoo! announced Trip Planner

If you haven't had a chance to use it, I strongly encourage you to get your hands on it. In a nutshell, you can plan day trips, weekend trips, vacations into a trip plan. You can build the trip plan collaboratively with a group of fellow travelers or if you are a control-freak, all by yourself ;-)

At a later time I may blog about the details of the interface. Others have gone into lots of detail. And the team has lots of really cool features planned. On top of that, the team is full of talented folks and they are jazzed about this product. I am too.

Trip Planner is a good example of how an older idea can be transformed as it moves to become a Web 2.0 tool.

I used to use Microsoft Trip Planner. However it was limited since the maps and travel guide information were based on a snapshot on my CD. I loved it but it was severely limited in what it could give me as well as rapidly growing out of date.

There are a lot of things I love about this product:

• Collaborate on trip planning
• Share trips publicly
• Pulls trip planning into a single location
  
• Can find other's trips
• Uses the ever expanding Y! Maps products (map view)
• Has enormous tie in potential to other Y! products (watch for upcoming features!)
• I just love travel. Hey I live in the Bay Area. Lots of places to explore!
  

Web 2.0 Content Objects
But I think what has really excited me about this product is how it illustrates the power of Web 2.0 Content Objects.

In Microsoft Trip Planner the trip plan was a file on my disk. I could send the file to a friend and if they had the same application they could access it.

But think of the power of the web as a platform for these Web 2.0 style files. I can create trip planning content, share it publicly, and allow others (of my choosing) to collaborate with me on it. And once good trip plans surface over time, there will be less and less need for me to create trip plans from scratch.

This is what del.icio.us (and later furl.net and myweb2.yahoo.com) did for bookmarks. Shareable and findable.

Microformats
microformats.org is an attempt at defining the underlying data format for sharing user generated content. I don't want to discuss the merits of whether it should be in HTML or XML format. I just find the idea of movie reviews, restaurant reviews, trip plans, news clips, and a host of other content being in a format that is shareable, bloggable, findable to be really exciting.

Challenges for User Experience
So that leaves several challenges for us in the User Experience world. Here are just a couple of issues.

• Discovering Content Objects. Progressive disclosure (giving the user just the amount of features they need at the beginning and growing with the user) will help. Finding other trip plans while just searching around travel related items lead the user to explore.
  
• Getting folks to share. We all have suspicions about sharing information on the web. Do I want people to know where I travel, what I like to do? To some of us it is not an issue. To others that is terrifying. How do we create assurances (and more importantly we had better do the right thing with their data!) that there can be some anonymity? Trip Planner allows you to choose to share or not. But perhaps there should be a way to share anonymously. Have Trip Planner only post the outline of the trip and no user generated comments (only from other sources).
• Understanding collaboration. At Y! we struggle with who your community is. Is it Y!360, address contacts, IM buddies, flickr friends and family? And do user's really understand how they would work with other people (or how many will do this?)
• Avoiding feature bloat. We are building full-scale applications. Yet most user's engage us ligthtly. How do you make feature rich, discoverable applications? Providing "feature invitations" unobtrusively at the moment they need it.
• Getting users to understand how other tools might work together to solve their problem. Trip Planner uses Y! Local, Y! Maps, Y! Travel, Y! Search, Y! Travel Guides. It will use more properties in the future. How do you take a slice like trip planning across all of these products? Obviously you have to treat the other properties like services and build a complete application out of this slice. That leads to understanding how to present robust applications (without undue clutter, etc.) as a web application.

I'm sure there are other issues. As well as other solutions than those I briefly touched on above.

What do you think the challenges are for these types of applications? For these types of shareable content objects? Other examples you have seen?

The Blurry Line
And, one more thing. I notice that Microsoft has Streets & Trips 2006. Looks to be very full featured. It seems to pull its content from the web. This raises a number of questions about what is the right approach. Do I build a product like this as a desktop application or as a web application? Sounds like a good topic for another blog...

Animating Interactions With Photoshop CS2

Sometime in the next month my article for boxesandarrows.com will finally appear. It discusses using Microsoft Visio for animating rich interactions. I discuss this briefly in a prior blog.

Photoshop CS and CS2 introduced some new features that make it easy to simulate complex interactions including animated transitions.

Layered Comps
Photoshop CS brought us the wonderful world of layered comps. You can now name the layer configuration. The layer order, visibility, layer styles, and element positions are saved.

It is sort of like being able to take a photo snapshot of the current state of the design.

Its purpose is to create alternate designs and give them a name. Then the designer can walk through the different comp designs with a customer to choose the best one among them.

In the world of rich interactions, we can take a snapshot of the user interface at each interesting event state or user interaction.

Animation Palette
Photoshop CS2 brought an animation palette. By adding layered comps to the each frame of an animation, you can play the various layered comps. Think of it being able to play back a set of complex interactions.

A cool feature is the ability to create tweening between frames.

An example is I could have two rectangles positioned and named as a layered comp called rectangles. The next comp could switch these rectangles. This could be called swapped_rectangles. Dragging these two layered comps into the animation palette will create two steps to the animation: rectangles in their original position and rectangles in their final position. Not too exciting, right? Now select both frames in the animation palette and tell it to tween and allow it to create 10 frames. Now we have 12 frames total.

When you run the animation, notice that the rectangles look like they are swapping. The in-between frames make the animation look convincing.

Capture the Movie
Simplest way is to use a video capture tool (like SnapZ Pro for the Mac) to create a movie file of the interaction as it is played in Photoshop. The movie can be distributed to illustrate the interaction.

The combination of layered comps, animation, and video capture create a simple way to illustrate cinematic effects and complex interactions in a page.

Interaction Matrix

Recently, I have been exploring drag and drop and inline editing for the web.

At Yahoo! I am fortunate to work with some incredibly bright folks. We get together for brainstorming sessions to discuss interactions like these that have application all across the Yahoo! network.

When I started capturing our sessions and writing up documents for these two interactions, I was really struck with how non-trivial it was to define exactly how a drag and drop or inline edit would operate in every case.

Let me take drag and drop to illustrate my point.

With drag & drop there are at least ten interesting event states.

• Page load
• Mouse hover
• Mouse down
• Drag initiated
• Drag over valid target
• Drag over invalid target
• Drag over parent container
• Drop accepted
• Drop rejected
• Drop on parent container

And there are a number of elements that get involved in the interaction sequences. Let's call them our interaction actors. I count at least seven of them.

• Page
• Cursor
• Tool Tip
• Drag Object
• Drag Object's Proxy (ghost of object being dragged)
  
• Drag Object's Parent Container
• Drop Target

That means that there are 70 possible visual states or transitions in a single drag and drop sequence. If you eliminate ones that don't make sense (e.g., tooltip on mousedown) you end up with about 40 possible states.

So defining this in a meeting is non-trivial.

To simplify this, I created the concept of an Interaction Storyboard Matrix. For simplicity I created it as a Microsoft Excel document. Each row corresponds to an actor; each column corresponds to an event state. Each cell in the grid represents a different visual state or animation providing feedback or affordances during the interaction.

Here is what the drag and drop interaction storyboard matrix looks like:


Events and Actors Reveal Interaction Storyboard Frames

So how do you use it?

Just fill in the non-gray cells with how each actor will look or behave during each event state. The interaction storyboard matrix is just a way to show different visual channels against the backdrop of event interactions. Think of it as a choreographed dance and each state being a difference scene in the play.

Feel free to download both the drag and drop template and the inline editing template.

Let me know if you find this useful.

Special thanks go to my fellow Yahoos. Matt Leacock, Kiersten Lammerding, Lance Nishihira, Eric Miraglia, Rob Aseron, Kathleen Watkins, Eric Costello, Anja Krombholz, Ericson DeJesus, Greg Rosenberg and many others...

Popups With a Twist

If you lived through the desktop UI boom of the 80's and 90's, you will recall the history of popup windows. You will recall the rise and fall of their popularity. And now with the web we are seeing popups growing in popularity. Are we headed for the same problem? Or are these popups different? While I believe that once can create annoying popups, what we are starting to see on the web are popups with a slightly new twist.


Example of a Lightweight Popup from Yahoo! Local

So here is where I want to say (with a nice, slow, southern, raspy drawl), "Back in my day, we didn't have no popups."

But in reality we did. With the advent of windowing we kind of went popup crazy. We had moved from a world of ASCII terminal based applications that went from screen to screen (or if you were clever you could tile in an area of the screen using some IBM font characters to draw the popup border and create a simulated dialog) to a nice environment with menus, windows, mice, and icons. With that sudden power applications started adding popups everywhere.

In Alan Cooper's original About Face book, he used the term, Idiot Boxes, for unnecessary dialogs that interrupt the user's flow asking pointless confirmation questions or asking for information that they system should already have.

One key design goal that I have always strived for is to minimize modes, context switches and windows for the user to manage. Direct manipulation helps to realize this goal. But another technique is to avoid going to other screens or pages to get information from the user.

In the web world, for the longest, we were plagued with two types of popups:

• Javascript alert box. Your basic ugly dialog box
• Javascript open window. Which created another browser window (that you could leave fairly undecorated)

Later, two varieties of popups came on the scene

• DIV based lightweight layers
• iframe based layer

iframes provided some advantages and disadvantages. With iframes you can specify a separate HTTP connection and an iframe can cover native browser components (e.g., in IE/Win the combo box shows above any DIV layer and while you can mess with z-ordering to resolve it, other issues are introduced.) The problem with iframes is that they can be slow. The HTTP request and render cycle can cause a second or more delay to populate an iframe's content.

The use of a DIV that is absolute positioned and given a higher z-order index, styled with a title and perhaps made draggable has come into vogue of late.

And for good reasons.

• They allow the user to input more information without leaving the current page context
• They allow the user to look at more information without leaving the current page context

Notice the interesting twist.

On desktop apps, dialogs seem to be disruptive. In web apps, popups (when done correctly) can actually minimize the need for breaking the user's concentration by bringing in information in context quickly and easily. (Obviously abuse will not be far behind.)

In my previous post I illustrated the Hover Detail. Luke Wroblenski commented about using Hover Detail + In Context Tools to make more complex related commands readily available to the user without disrupting flow.

This is really intriguing! These really are not your father's popups!

Its the same basic idea. Just popups. But with a light twist. So what is this light twist that makes these web popups so much better than the old style? Here are some of the things that I think make them better.

• Their goal is to minimize disruption to the user
• They are virtually instantaneous. No waiting like in the old days.
• They can be styled to feel lightweight
• They can be styled to match the page they are part of (this makes them feel like they are part of the page, but yet not at the same time)
• They have enough familarity with normal popups that users know how to move and close them (hopefully!)
• They are often triggered with just a mouse hover and dismissed with a mouse out
• They remove the fear of where a link might lead me.
  
• They remove the need to load a new page
• They often bring information at the point of interaction and at the point of curiousity
• They remove the need for getting back to the context by using a back button
• They provide information in context-- a powerful information architecture principle.
• Couple with Ajax, they provide a world of information at the user's fingertip (or mouse point ;-)
  
• And they just feel great! No, seriously, after living in the land of page to page navigation it is refreshing to be able to pull content in quickly.

Several nice examples are in order.

Yahoo! Instant Search

Yahoo! Instant Search Uses a Lightweight Balloon Approach to Show Shortcut Matches

Netflix

Netflix Movie Details

MarketWatch

Lightweight, Quick but Substantive. From MarketWatch. Illustrates Information & Commands in a Single In Context Popup

Musings on Mouse Hover

I've been thinking a lot lately about mouse hovers. Yeh, I know I really should get out more often ;-)

A mouse hover is a really simple event. When you get a mouseover event you do someting. When you get a mouseout event you usually restore things to the original state.

Mouse hovers were virtually unheard of in the desktop user interface world. I remember writing some very sophisticated applications (games, graphical drawing packages, etc.) and only using mouse hover for some very basic operations. Tooltips & mouse coordinate feedback are two that come to mind.

It was a while before rollovers showed up. In the original Macintosh Finder and in Windows 3.1, rollovers were not used to indicate an object was actionable. It was the advent of the web and the need for discoverability that really opened the door for the lowly hover to be come to the forefront.

In the desktop world, hovers were not that immediately useful. It seemed gratuitous and redundant in those early days to do something on a mouse hover. Traditional desktop apps have always been structured around user interface controls providing the structure with data poured into this mold. Web sites & applications started with content. With hyperlinks and images embedded in the page, it was not obvious what the 'control' or navigation structure of the page was without some visual clues. Over time rollover effects that made it into the web found themselves migrating to the desktop.

Windows 95 flattened toolbars to remove the visual speed bumbs created by beveled button borders. In its place, the mouse hover showed the border and gave the essential clue that the object was clickable. As more and more folks have got used to exploring with a mouse hover, it became a more acceptable a way to discover functionality.

Ajax, DHTML and the Lowly Hover
Now that interactions are even more dense, the hover has become our friend to discoverability. We are introducing new idioms to the web space. Things like drag and drop and inline editability are not immediately expected. The hover can provide vital clues to the behavior of an application at the moment the user is curious about it. Hovers are also the lightest event for the user (they just move the mouse.)

Let's look at some places that hover is showing up more and more (not an exhaustive list!)

Hover Invitation
We can use the hover to cue the user what is going to happen next.

Inline editing
How would you know that parts of a web page's content is editable? We could be overt and just say it on the page. But that gets busy if there are lots of places that are editable. We could make everything look editable. But that also makes for a cluttered page. Hover lets us do just-in-time functionality feedback.

In flickr, hover over the photo title and you will see the color change to indicate the area has some interaction to offer. Coupled with the tooltip the user is invited to click to edit the title.


Flickr's Photo Title Before Hover


Flickr's Photo Title After Hover

Pretty obvious if the user ever hovers over the title.

In backpackit.com, the 37 Signals folks take a similar approach. They shad the area editable with a gradiated yellow background and add a lightweight inline, incontext toolset. It becomes obvious that you can edit, delete (trash can not shown below), etc. the content.


Backpackit Note - Non Editable


Backpackit Note - Showing Editability

In Yahoo's trip planner (travel.yahoo.com/trip) you get the same style of in-context toolsets on hover.


Y! Travel's Trip Planner - Itinerary Item


Y! Travel's Trip Planner - Showing Editability

Ratings
Yahoo popularized ratings. Just check out how the hover helps guide a user to rate a movie.


Yahoo! Movies Ratings - Not Rated


Yahoo! Movies Ratings - Invitation to Rate

By visually engaging the user in rating possibilities the user only needs to click to participate. This lightweight approach to engagement is the advantage the hover has. Hover requires little effort. The next step is just to click.

Hover is nice because it allows you to hide lots of controls and show them only as needed. Showing them in a light enough manner makes it much more engaging to participate.

One more example will suffice from Yahoo! Local's Reviews.


Yahoo! Local Review Rating - Before Hover


Yahoo! Local Review Rating - During Hover

Flagging Mail
In the new Y! Mail, hovering over a message's column for flagging shows a lightly shaded flag. Clicking turns the flag on.


Yahoo! Mail (Beta) - Unflagged Mail


Yahoo! Mail (Beta) - Inviting to Flag

I think gmail's star could have been greatly improved with the addition of a hover. Although I don't believe that Google believes in the hover event at this point in time ;-)


Gmail's Star - No Hover

In all of these the hover creates an invitation, a call to action. It shows what the user can do right now, right where they are at.

I call this the Hover Invitation.

Hover Zoom/Focus
There is another use for hover. Since the mouse can indicate where I want to look, the hover can say, hey I want to focus here... I want more detail.

Getting More Detail
local.yahoo.com does this with the map. Try searching for 'restaurants' in some locale and you will see a map to the left. Hovering over the map enlarges it. Leaving the map area shrinks it back to the normal size.


Yahoo! Local Map Inset - Before Hover


Yahoo! Local Map Zoomed - After Hover

This pattern is about Mouse Focus or Mouse Zoom. In this case the hover is the interaction. While it might lead to more interactions, the Hover Invitation is a specific call to action, an invitation to click.

However, there are problems with this approach. Once the area is zoomed up it can cover other important areas, controls on the page. The user also has to move a lot further to exit the now enlarged area to get it to shrink down in size. You have to be certain that the user really wants to interact with an object to zoom on hover.

This is also common with photo organizing software. Hovering over a photo automatically enlarges it slightly.

A very slight variation on this is enlarging an area on hover to make it more apparent it will be the object selected. The Macintosh OS X Dock does this. Although with mixed results. Part of the problem is the area is just magnified. If the icon is 32x32 and it enlarges to 64x64, you still only have 32 pixels of mouse movement to traverse the object. This causes people to zoom past tools by accident.

Hover Detail
And yet another variation is the hover detail. By hovering over something I get a separate view that shows up in a lightweight popup allowing me to see or read more data about an entity. Not too much unlike a the hover zoom, but with more emphasis on letting me peek at more information without changing the page at all.

You can see an example of this in netflix.com.

Netflix Hover Detail

Also, it is used to get more of the story in news.yahoo.com.

Yahoo! News Hover Detail

Going Forward
Of course, hover will be abused. Once could imagine a page with no controls showing and they only show their action on hover. This is the idea of mystery meat interaction a wonderfully hideous approach to engagement.

But used wisely, the hover can

• Engage the user at the point of interest
• Reduce clutter on the page
• Give specific previews as to what will happen if the user clicks
• Provide a lighter way to zoom in on things with little effort
  

Take-Away
Use hover to create a more lightweight but engaging way to cue the user to hidden functionality. Use it as a way to provide just-in-time details. Use it to keep your page visually simpler providing what is needed when they are most curious.

Rich Accessibility

Confession
Ok, I'll start with a confession.

I think accessibility issues have always been an abstract concept to me.

It usually was an afterthought, something that the usability folks dinged us for. You know the text wasn't dark enough or the font was too small. It seemed to me that every experience I had with accessibility was from the negative perspective.

You see, I love rich interfaces. I love visualizations. I enjoy pushing the envelope. Somehow in my mind I just saw accessibility and richness as mutually exclusive.

Conversion
This all changed over the last two weeks. It happened almost the first time I met Victor Tsaran, Yahoo!'s Accessibility Evangelist/Manager. Victor is an incredibly bright engineer who happens to be non-sighted. If ever there was an evangelist and champion for accessibility, Victor is the man.

Victor does not come at accessibility from the negative aspect. Not at all. He approaches it with an enthusiasm, a sense of humor, and a challenge to create rich interfaces that are richly accessible.

Instead of just looking at the government mandates to comply to accessibility, what about accepting the challenge to create richer interfaces for those that need assistance? That is something that is tremendously exciting. Rich Accessibility. And there is movement afoot to make this much more possible.

The Challenge
Screen readers (one of the assistive technologies used for those without sight) parse in the page and break it down into sections, links, form controls, headers, etc. and allow the user to use shortcut keys to navigate the content. As it navigates the content the reader will use speech technology to read the content and provide as much contextual information as possible. For example, it can tell headers, links and controls from each other based on HTML markup. The speech is usually sped up considerably as the user gets proficient at understanding the speech at a high velocity. In fact, Victor can navigate most pages faster than a sighted user.

But with rich DHTML and Ajax techniques the screen readers comfortable world of page refresh and static page content goes away. What happens when content is updated dynamically? What about the lack of keyboard navigation of the custom DHMTL controls that is critical to being able to explore a rich interface? What about only supporting certain features with the mouse (e.g., drag and drop being the only avenue to perform certain tasks?)

Fortunately a lot is happening in the world of web accessibility. IBM recently donated a large amount of open source code to Mozilla to support accessibility (BTW, IE is on the game too). Ways to mark up HTML (and thus components) in a rich manner to cue screen readers that I have navigated to a tree control and its 3rd node out of 5 is currently open and has the name MyFile. And of course techniques for moving keyboard focus around. IBM, Mozilla and the screen reader companies (JAWS and Windows Eyes) are working together to make it possible to fully describe a rich interface to a non-sighted user and allow them to have a rich experience on the web.

This is an exciting time to be designing for the web! The promise is that we can design for richness for all users.

Learn about the current state of accessibility on the web or for fun try out the Firefox Screen Reader Emulator Extension. Finally, read Nate Koechley's blog, Yahoo!'s longtime champion for accessibility.

Flock: On Ramp for Web 2.0?

Lots of buzz around Flock. The new social browser scheduled for an October release. Oh no, you say. Not another browser!

No, its not really a new browser.

Flock brilliantly chose to use the Firefox engine (Gecko engine). Flock is an open source browser (like Camino for the Mac) built by some talented guys in Palo Alto, some of which were part of the Mozilla foundation.

They keep the gecko layout engine. Its just the chrome they mess with.

So think about some of the things that really open the web up in the world of Web 2.0.

• Come To Me Web. RSS Syndication
• Folksonomy.
• The tagging phenomon popularized by flickr
• The social bookmarking popularized by delicious
• Blogging
• building blogs
• locating blogs

Now imagine a browser that makes it easier to do these things. Think about functionality added to the chrome that creates a web 2.0 access ramp for the average user.

Safari 2.0 made a step in that direction by making RSS subscriptions much easier. Flock appears to go much further.

Here are some of it features:

• sharing and tagging bookmarks. They have a partnership with delicious. They include a way to see these in what they call "bread crumbs". Bad name. More like tagged bookmarks.
• Watching lists of users and being notified as pages are bookmarked
  
• Blog tool that allows you to drag and drop elements from pages you surf into a shelf that you can later compose into a blog using the common blog publishing tools
• Ability to grab snippets and drop them as blockquotes in blogs.
• Flickr integration for photo sharing and dropping into blogs directly

DejaVu
Remember the early desktop operating systems? Did not even have disk fragmenters. Lots of utilities that are standard in the desktop OS now was once built as a little tool that got incorporated later into the OS. Is this where browsers will head? We could have stability on the layout engine (IE, Gecko, Safari being the main ones to consider) but have new browser wars that compete on functionality not just around being able to display a page and support richness.

Will IE7 have some of these concepts or did they miss the boat?

Extensions to Firefox can do some of this, but really who outside of geekdom actually installs firefox plugins or has used greasemonkey? And how many times has firefox crashed due to rogue extensions. Its seems natural that browsers will incorporate what the extensions do and will grow like desktop operating systems did.

Google has a secret Firefox project going. Aaron Boodman who built greasemonkey is working on that team. Its been rumored that google is going to unleash a new web os based on Firefox. Is it like Flock?

In an earlier post on the Come To Me Web there was some discussion about how do you get folks to adopt the power of Web 2.0. I think Flock has possibly hit on the right way to do this. The browser can be the On-Ramp for Web 2.0.

More information at ajaxian, technocrunch, wired, flock, rolandtanglao, barcamp.

New Yahoo! Mail Goes Beta Tomorrow

Finally going to be in limited beta release.



Ok, first disclaimer. I work for Yahoo. And Darren James, fellow Rico-man & former teammate at Sabre now works for the Y!Mail team. But, before joining he & I were avid gmail lovers. I got in very early in the gmail beta program and evangelized it to all my friends (and enemies ;-).

When I knew I was joining Yahoo, I was concerned that I would have to leave my gmail aside. Of course there is no one at Y! telling me I had to leave it. But it felt wrong to be using the competitor's product and liking it better.

Now, I knew some of the oddpost guys so I was pretty confident that it would be awesome. But would it be better than gmail? On the first day I got hooked into the new Yahoo! Mail.

I was relieved. I actually liked it better than gmail! Not that there aren't a couple of features that gmail has that I still like better. But, seriously the new Yahoo! Mail is better than gmail. I know sounds biased. But really its great.

The first version I got to use was a lot like the original oddpost mail in that it appeared in a separate window with no "browser chrome". Looked like a desktop app. Its own menus, etc. Shortly after joining, they made a decision to move it back into the chrome. Reasons included in the chrome is friendlier to tabbed browsers and popup blockers. I was nervous. Would this screw it up?

But no, due to the excellent product management & design (kudos to Greg Rosenberg!) decisions the in the chrome design is actually better.

Want to read & see some screenshots. Read Ryan Kennedy's blog about it (he works on the Yahoo! Mail web service underlying the new mail client).

Favorite features:

• Powerful, fast search with snippet view
• Tabbed search, compose windows for easy window management
• Fast auto-complete
• Drag and drop email into address book and it adds users to address book
• Endless scrolling (same concept as LiveGrid)
• Nice attachment interface
• Subject randomizer (can't think of a topic... let it pick one :-)

Watch for the expanding beta and give it a whirl. I think you will agree that it is the best web mail client available.

Update: Sign up for Beta program at: http://whatsnew.mail.yahoo.com

Rich Data = Open Data

James Governor has done an excellent job on expanding my definition of richness to more clearly include open information.

We are witnessing many tipping points. The Richness in the data dimension is not just about opening the page, it is about opening up the web as a platform.

Check out his blog.

Open Data is 3D data, Rich data is open data

Richness: The Web in 3D

What is Richness?

Richness in terms of a user interface means that the application provides a rich interaction model, a rich visual model and richness in the data and logic it provides. This is in fact a good way to think about richness—in three dimensions: the visual dimension, the interaction dimension and the data dimension. These three dimensions provide ways for communication to happen between the user and the system. They allow the user to visualize the system, interact with it and change or find information it contains.

Axiom of Richness: An interface is only as rich as its ability to communicate in all three dimensions.


Visual Richness
First, a user interface must visually communicate with the user. We often call this the presentation or the view of an interface. It is communication that moves outward from the software to the user. Along the visual dimension we find techniques like affordances, feedback, visual styles and graphical visualization. These techniques help an application create visual richness. But the key to richness is whether there is communication happening along the visual channel. Providing cinematic effects, blinking, flashing and other bells and whistles when abused can actually reduce the richness of an application. It is the finesse along this channel that creates a rich visual experience

It is interesting to note that the web has always had the potential for some level of visual richness. Free from the more stylized approach of desktop applications and with an open visual palette, web sites and applications have tended to be more visually stunning. The visual dimension though has often been on the static side. With the introduction of cinematic effects (visual effects that are more akin to those used in the world of cinema for transitional effects), the web now has the tools for expressing visual richness along a time continuum.

(Note: for simplicity I focus on the visual dimension. In reality it can include audible clues or in the case of those visually or audibly handicapped feedback along other tools like site readers.)

Interaction Richness
Second, a user interface must allow the user to interact freely with its interface. The user must feel freedom of movement, freedom to change their mind, the ability to interact directly with objects in the interface and the capability to make small changes and see the resulting impact. These interactions combine user events with feedback in the visual dimension. Previously on the web the main events included: submitting a form or clicking a hyperlink. With DHTML and Ajax support, the granularity of events has become finer in detail. User interaction can be as minute as the motion of the mouse or as coarse as submitting a form.

But again, richness in interaction is only as good as the communication it affords. Drag and drop and hover events do not necessarily make an interface rich. It is the proper uses of interaction communication tools (events) that make a rich interaction possible.

The desktop has long provided the capacity for rich interaction. It is the advent of Ajax + DHTML that opens up the door for the same level of interaction for the web. (Of course, this also includes the world of Flash as an alternative RIA model.)

Data Richness
But the final ingredient to rich communication is what the user can do with the world of information available on the web. And more specifically how tailored the information and state is to the user. If the application can remember the user’s previous state, allow the user to perform rapid lookups in place and do validation inline (all without a page refresh) then the potential for richness is even greater. Without the ability to change and find information rapidly, visual and interaction richness are severely limited. It is like owning a sports car but not being able to drive it.

If the information is relevant and lively then the interface will have the feel of richness. This is an essential ingredient to the experience that makes the Web 2.0 a platform for the come-to-me web.

Three Degrees of Freedom
Being able to move data freely in and out of the user’s space is a key to creating a rich experience in all three dimensions. In the classic web model we had a lot of freedom along the visual dimension (sometime to our own injury :-) We had a lot of freedom along the interaction dimension... but it was limited since the sandbox was the page. Ajax broke down the wall of the data dimension-- enhancing the other dimensions along with it.

This is one way to think about richness. In 3D.

Cell Phone Usability: Too Much Feedback

Growing up, my family had one of those boat-anchor black Ma-bell telephones that had the metallic bell. There was no voice mail back then. And generally it could ring 25 or 30 times before the circuit was released. Back then the phone was in another room. You needed the ring to let you know they were still calling and it was worthing running to answer it.

But I don't use my cell phone that way. And most folks don't use their cell phone that way.

1) It is hooked to their anatomy
2) They make a decision to either answer it quickly or ignore the call for later (or never)
3) The phone is now in public space

Given this different usage pattern, why do cell phones follow this old model... that of the ring, ring, ring? Why can't I set my phone to do abbreviated ring? I mean I use vibrate when in meetings, but at my desk I don't mind a simple one-time ring to let me know someone is calling.

Take my normal ring (say the first ring is 1.5 seconds long) and cut it in half. And that's it. No other rings. You know I am not stupid. I don't need the phone to keep ringing while I scramble to get it out of my pocket.

One argument against would be: I won't know if they are still calling if it doesn't keep ringing.
Answer: 1) I have a mental model of how long I have to answer the phone, I don't need the annoying auditory feedback, 2) The phone has lights that whirl and dance telling me the phone is ringing.

Maybe my phone is ancient. But I only have vibrate & annoying as my two options.

Oh and while I am ranting... this Samsung has a light that flashes every 5 or 10 seconds that I swear will blind you if you look at it. In fact I have to cover it up or turn it over just to sleep at night-- I thought it was a lightning flash at first... do these people use these phones?

Anybody have a better phone?

The Come To Me Web

Tonight I attended the BayCHI event, Are You Ready for Web 2.0? The panelist were David Sifry, Technorati; Stewart Butterfield, Flickr/Yahoo!; Paul Rademacher, HousingMaps; Thomas Vander Wal, PersonalInfoCloud.com.

Wikipedia defines Web 2.0 as:
Web 2.0 defines a newer incarnation of the World Wide Web typified by the transition from the typical website hosting HTML/XHTML pages, to a platform that provides a point of presence (sometimes known as a Web portal), from which any of the following interactions may occur: syndication, aggregation, publishing, etc.

My previous blog struggles with what to call the narrower slice of this platform that centers around rich in-page user experience vs. the old page-based model. But on to the broader topic... the Web 2.0 platform.

Here is what I heard tonight.

Stewart reminded us of Web 0.1, the days of gopher and the wonder of discovering a site. Web 1.0 moved us into browsing and consuming pages. Web 2.0 has brought about the addressability of smaller chunks or services. Meaning it or not, these became public APIs. Of course Flickr and others have formalized their APIs and allow others to create new and novel tools and services around their content. He used the quote from Tim O'Reilly, that this is an "Architecture of Participation."

Stewart also showed some of the new tools in Flickr. Things like the best photos rising to the top, a feature called interestingness. Of real interest was the concept of clustering or the ability to infer semantic meaning to a group of tags and cluster them. One example is the tag Turkey clustering around the country, the holiday and the food.

David (Technorati) showed some fascinating graphs on the blogosphere. They are tracking 15 million blogs! It has been doubling every 5.5 months over the last 30 months! There are 80,000 new blogs a day (almost one a second). And tagging is growing. Almost a third of blogs use tags with 10,000 new tags a day.

I like the phrase he used-- The attention economy.

Paul created HousingMaps.com. He called it a mashup of google and craigslist. The reference for mashup comes from remixing music by overlaying two songs with the hope that the result is somewhat pleasing. The new Web 2.0 and its open platform means mashups are possible.

Paul did a nice job with his interface for HousingMaps, but there was an interesting discussion that as some had tried to mashup his mashup the results were not so good.

But the ability to take rich services and put them together in a way the originators did not think about is an awesome power of Web 2.0.

Thomas (InfoCloud) is a fascinating guy. He has been thinking on the concept of personal information clouds that follow us around for quite some time. I especially liked his simple explanation of Web 1.0 vs. Web 2.0. The former was the I GO GET web and the latter is the COME TO ME web.

The I GO GET was about reading, consuming, printing, findability, etc.

The COME TO ME is about what we have found that we like, categories, reuse of information, re-findability, and about attraction.

The attraction part is really something to contemplate. Attraction is the ability to cause that information cloud to form around me in the websphere so that I can be hooked into relevant information. It is about preserving my time so that I spend less time finding and more time using what I have attracted. Or re-finding something.

Pulling the thoughts together, Web 2.0 is the Web on Demand. Across all of the medias the move is for deep personalization of content. RSS syndication is become more approachable to the average consumer.

But most folks have not entered into the world of Web 2.0 (outside the Bay Area-- I know I just moved from Dallas and it is a smaller community that is savvy to these concepts). So the challenge to the designer is how do we make mashups, remixes, RSS subscriptions easier to use?

One answer is providing subtle invitations to the broader Web 2.0 platform of possibilities along the a line of discovery as the user moves through his normal Web 1.0 style of navigation. Inferring what the user is interested in, offering to package similar content, helping them customize their pages with content are all important parts of this experience. It will be along the path of normal consumption that most user's will dip their toe into the Web 2.0 waters and hopefully they will be hooked.

PIAs vs RIAs

Ok, so I have been struggling with what to call the non-rich internet application approach. You know the web that we have known and loved for all these years. In writing about and discussing it I have noticed what a pain it is to succintly point out the differences between the old model and the new.

So what really is the difference between the old and the new?

Well, the traditional web has this model:

• The user enters information at the page level or clicks on a link to go to another page
  
• The page refreshes to show the result of the user’s request
  
• Everything is framed in the context of a page or document that has content
  

And the new web (I know its really not new) has this model:

• The user interacts with items on the page and the feedback is immediate.
• The page does not have to refresh to complete the user’s interaction
• The page can be more like a canvas or desktop with content being objects the user interacts with

Most of the time I just call this new web model RIAs (Rich Internet Applications). Its both short and long (ah! the beauty of an acronym!)

But what do we call this traditional, previous, older thingy?

Well it really is a page-based interaction model. Applications built with this page-based approach are really Paged Internet Applications, or PIAs. Or perhaps, they could be called Page-Based Applications (PBAs). But for symmetry (and maybe subtle confusion :-) we could talk about PIAs vs. RIAs.

What do you think? Certainly someone has to have a better idea?

BTW, I am aware of Web 1.0 vs. Web 2.0. I kind of like that but the term Web 2.0 was being used to describe web companies that started up after the dot-bomb and are thriving (like Flickr).