NOTE: This blog has been moved to http://www.looksgoodworkswell.com

Thursday, March 30, 2006

Mind Hacking Visual Transitions

When I attended Kathy Sierra's workshop on Creating Passionate Users, she mentioned the book Mind Hacks. I quickly added it to my Amazon wish list. However the next day at O'Reilly's booth they were giving away books. I could only choose one-- guess what they had-- that's right, Mind Hacks.

Mind Hacks is all about short experiments or hacks you can do to discover how your brain is really working. There are 100 hacks. For example, hack #59 discusses how we actually hear with our eyes (you can check out the McGurk Effect for yourself). Or try #65 which explains Why Can't You Tickle Yourself? And goes on to describe how to build a self-tickling machine.

But the hack that really got my attention (no pun intended) was hack #37 Grab Attention.

Sudden movement or light can grab your attention, thanks to a second region for visual processing.

It turns out that besides our normal visual processing region of the brain (you are using the occipital lobe right now while reading this blog) there is a second region that deals with attention capture.

We experience it everyday. While talking with a friend at a park someone throws a frisbee to another person in the background. Without trying you notice this change of motion even though you are not looking directly at it. You can thank the superior colliculus for this little attention interruption.

As the authors describe it this region of the brain is not very sophisticated. But it does a good job of telling you to pay attention because something may be coming at you. You aren't sure what it is but you had better pay attention to it.

One of the next set of patterns I am working on getting out the door at Yahoo! covers the idea of Transitions (also known as animated effects or cinematic effects.) The connection between hack #37 and its application to transitions was immediately obvious. This is one of the reasons that moving something on the screen or causing it to fade or rapidly show up can get the attention of the user so readily.

So this fed into my thinking, "how do I use transitions for good and not for evil?" How do I use transitions to communicate the correct intention to the superior colliculus? As Kathy Sierra likes to say, "Learn to speak to the BRAIN, not to the MIND."

So a few days passed after reading this. I was starting to write up the rationale for the parent Transition pattern using the research cited in the Mind Hacks book. While doing some more research I stumbled across an article on 24ways that discussed the transition effects in the Scriptaculous library. At the beginning of his article, Michael Heilemann writes:
...let me just take a moment to explain how I came to see smooth transitions as something more than smoke and mirror-like effects included for with little more motive than to dazzle and make parents go ‘uuh, snazzy’.

Earlier this year, I had the good fortune of meeting the kind, gentle and quite knowledgable Matt Webb at a conference here in Copenhagen where we were both speaking (though I will be the first to admit my little talk on Open Source Design was vastly inferior to Matt’s talk). Matt held a talk called Fixing Broken Windows (based on the Broken Windows theory), which really made an impression on me, and which I have since then referred back to several times.

You can listen to it yourself, as it’s available from Archive.org. Though since Matt’s session uses many visual examples, you’ll have to rely on your imagination for some of the examples he runs through during it. Also, I think it looses audio for a few seconds every once in a while.

Anyway, one of the things Matt talked a lot about, was how our eyes are wired to react to movement. The world doesn’t flickr. It doesn’t disappear or suddenly change and force us to look for the change. Things move smoothly in the real world. They do not pop up.
Turns out that Matt Webb is one of the authors (along with Tom Stafford) of Mind Hacks (duh!) Well that made sense. I listened to his talk and got very excited. I had been writing and talking about how to use and not abuse these effects on the web. Matt's talk and his writing in the Hack book (and other articles online) finally gave me solid grounding for those propositions.

A couple of examples stand out from the Broken Windows talk.

Dodging the Apple Widgets
Matt pointed out the odd effect used to dismiss the Apple Mac OS X Widgets. Instead of going away from you when dismissed, instead they fly out at you and fade out. The effect is as if the widgets are coming straight at you (like a star field) and whiz right by your head. Matt's point is that the action is "put the widgets away" but the effect communicates "look out their are flying widgets that are about to hit me." The action is for them to diminish in importance. However the superior colliculus is screaming "incoming-incoming-look out!".

What Just Happened?
Zeitgeist

The second example is the Flickr Daily Zeitgeist a blog sidebar plugin (Matt discusses this in detail here). When new photos show up they fade slowly in place overlaying four photos within the tile of photos. Not bad. You may or may not notice the photo showing up but that's ok. Its very secondary. However when it goes away it rapidly scales down revealing the images underneath while replacing one of the four images. The sudden rapid movement once again gets the superior colliculus to say "What the..." You look and by the time you glance you are not really sure what happened.

How the Real World Works
Matt also makes the same observation that I have discussed before. That real world objects don't just pop in and pop out, appearing and disappearing suddenly. We usually see them go away or go somewhere in particular. By creating an online space that never behaves this way it makes for a more brain-intensive experience in trying to determine "what just happened."

A Few Transitions
Just so we are all on the same page, here are some of the transitions that are being reviewed for the Yahoo! Design Pattern Library:
  • Brighten. Raise the luminosity or opacity of an object. Used to call attention to an area. The opposite of dim.
  • Dim. Lower luminosity or opacity of an object.
  • Expand. Animate an object growing.
  • Collapse. Animate an object shrinking.
  • Slide. Show an object move out from another object while being attached to that object.
  • Self-Healing. Once an object is removed from an area a hole is left. Once the object is placed elsewhere the hole seals up, effectively healing itself.
  • Animate. Simply animating position.
  • Fade In. Cause an object to appear by fading in the object's opacity.
  • Fade Out. Cause an object to disappear by fading out the object's opacity. Often the Self-Healing transition is used to close the hole left by the object.
  • Spotlight. Usually used to momentarily highlight a region that has changed. The highlight is often combined with a Fade Out to create a One-Second Spotlight pattern.
What Transitions Communicate
To me the key thing that any interface must do is communicate clearly and effectively.

Transitional effects should communicate the state of the interface or the actions that have just taken place.
  • If an object fades away we know it changed state from visible to invisible even if we are not staring directly at the object.
  • If an object fades into view then we know the object has arrived. It was not there but now is here.
  • If an object fades rapidly it is seen as more important. If it fades slowly its importance is lower.
  • If an object is coming at us (getting larger and appearing to go past us) then we think of it as something that is important (and dangerous).
  • If an object zooms down in size rapidly and disappears it will capture the user's attention immediately. However if the object was not in the user's immediate focus (user was not directly manipulating the object) they will glance to see the change but may not even be able to tell what object went away.

Purpose of Transitions
First, they are primarily for communication. Keep in mind that transitions reinforce communication. Having said that, it is important that the goal of communication be kept in mind regarding any transition effects.

Second they can be used for engagement.
Interacting with an area on the screen that responds by slightly growing or seeing an accordion pane "snap" into place creates a slightly richer and compelling experience. The interface seems more alive. Of course going slightly overboard can be the equivalent of blink for Web 2.0 (blink 2.0?)

One can imagine situations such as in games where engagement can take a more important role. However, in most web sites, communication is the most important purpose for transitions with engagement being second.

Guidelines for Transition Effects
From the discussion above we can extract some general principles for transitional effects.

1) The more rapid the change the more important the event.
2) Rapid movement is seen as more important than rapid color change.
3) Movement toward the user is seen as more important than movement away from the user.
4) Very slow change can be processed without disrupting the user's attention.
5) Movement can be used to communicate where an object's new home is. By seeing the object moving from one place to another we understand where it went and therefore will be able to locate the object in the future.
6) Transitions should normally be reflexive. If an object moved and collapsed to a new spot, you should be able to open it and see it open up with the reverse transition. If you delete an object and it fades, then if you create an object it should fade into place. This creates a concept of symmetry of action.

I would love to have feedback on what you think are the proper usages for these kinds of transitions.

Technorati Tags: , , , , , , , , ,

Tuesday, March 28, 2006

Round Up from IA Summit 2006

Just got back from lovely Vancouver where I attended the IA Summit 06 (Mar 23-27). I really meant to blog during the event. But I always found someone interesting to talk to or somewhere lovely in Vancouver to explore. I was also on a panel discussing Challenges to Wireframing with Rich Internet Applications.

As a quick aside, I do not believe I have visited a friendlier city. Smiling, friendly, helpful and always accommodating. And what an incredibly beautiful city. The 2010 Winter Olympics will be there as well as just north in Whistler. I got a chance to drive half-way to Whistler to the lovely town of Squamish. Mountains, sea, waterfall-- splendid beauty.

Ok now back to the summit.

Big Thoughts
So not really sure I came away with a lot of new revelations. But several ideas were reinforced.
  • Make good design viral
    Not his words, but my take from Jared Spool's talk on the Role of IAs in User Experience: The best organizations propogate good design by education & adminstration rather than by review or consulting. Both consultation & review become bottlenecks. I have often been in centralized groups (as I am now at Yahoo!) and I find that sharing knowledge and creating many avenues for sharing best practices to be the secret to new and wonderful ideas forming. Here were some of his tips:
    • Have a clear vision of success
    • Disseminate user knowledge and feedback quickly
    • Use design problems as teachable moments. People that find problems get kudos.
    • Make collecting feedback inexpensive
    • Share learning
    • Make good design the path of least resistance
  • Embrace Change
    I didn't really hear anyone say this but there are some in the Information Architecture community that are a little fearful of the changes that are happening with the move from content being central to interaction being more central. I say to them go read Who Moves My Cheese? and go embrace change. Jared mentioned that if you are going to be an IA specialist you will need to find companies large enough to have an economy to support your specialization. [hey there are folks who only do surgery on the hand-- they are needed but are not abundant.] And let me clarify one point. The skillset of IA is just as needed now as ever. It is the specific narrow role I am speaking of.
  • It's About the Community, Stupid
    The term mentioned by Rashmi Sinha was Social Information Architecture. This is the understanding the information must be crafted/architected in a way that can be virally manipulated by social networks. It gets to the heart of the thought the experience is not just the computer human interaction but the interaction between humans enabled by technology. This is also the thought behind David Weinberger's book, Small Pieces Loosely Joined (he gave the keynote).
Great Talk
Has to go to my fellow Yahoo!s, Kevin Cheng and Jane Jao. They presented on Communicating Concepts Through Comics. Kevin is one half of the wonderful ok/cancel site (the other have is Tom Chi also at Yahoo!). It was a fun talk that showed how storyboarding with comics can communicate user scenarios in a way that engages the complete product team as well as users who participate in reading the comics and commenting on the storyline. It is a great technique for fleshing out the conceptual phase & features of a product.

Kevin and Jane also gave an all day workshop and taught people how to draw simplified comics. I dropped in at the end of the day and was really impressed with some of the comics I saw. (I will have them on flickr later tonight tagged as iasummit06

My Panel
I had a great time with Todd Warfel, Thomas Vander Wal, Nathan Curtis and Livia Labate discussing with the audience the challenges of creating rich interactions with wireframes.

Some folks requested the latest version of our interesting moments grid. You can find the inline editing and drag and drop templates at my blog article on The Interaction Matrix.

Some Books, Sites and other Things of Random Interest
  • Book - How Customers Think
  • Carson Workshops - Mentioned by Francois Jordaan
  • Book - Lead Users - Understanding early adopters as users
  • Interesting IA Tool - swipr - Visio toolkit for end-to-end wireframing. Looks promising.
My Badge
They gave us big badges with lots of space to tag ourselves (or let other tag us). I chose to tag myself like this:



Technorati Tags: , , , , , ,

Friday, March 17, 2006

Real World Ajax - NYC

Real World Ajax in NYC, Monday 3/13 was a blast. I gave a talk on Designing for Ajax. It is a look at the most common patterns used by Ajax applications and the good design principles that underpin them.

You can catch a video interview with me about what is going on with the patterns, ajax and developer services at Yahoo.

I especially enjoyed
  • Christophe Conraet from Adobe demo'ing the extra cool Adobe Ajax-Flex Bridge. I have already found an internal app within Yahoo! that this might be a good fit for. Essentially I can now mix Flex and Ajax freely on the page. I can manipulate flex (flash) components via JavaScript. And with the connectivity capabilities of flash you can do some pretty cool Comet style interactions (collaboration, white boarding, push style technology)
  • David Heinnemer Hannson's Rails talk. David just keeps adding more and more cool stuff to Rails every day. His example of driving multiple rails applications via a flash bridge (again Comet-style technology) was really cool.
  • Kevin Hackman of Tibco gave a very interesting tour of early Ajax apps in the enterprise (1999-2003). Its really cool to see what incredible work was happening before the "Ajax Christening."
  • Scott Dietzen, CTO of Zimbra gave a great look into the world of Zimbra. I really like the Zimlets. Great way to extend their product. Scott, Ross and the others at Zimbra are a very talented team.
I also had interesting conversations with Backbase by CEO Jouk Pleister and Rob Gonda the new editor-in-chief for Ajax Developer's Journal.

It was good to touch base with JackBe founder, Jacob Derechin. The exciting news for them is they have added three really talented folks from Sun Microsystems (Deepak Alur, Dan Malks, John Crupi). These are the authors of the Core J2EE Patterns book. I had an great talk with them about the world of patterns. JackBe is an interesting Ajax toolkit for the enterprise. It is the only full framework I am aware of that can handle really low bandwidth/latency connections (and I am talking 9600 baud Ajax!)

So others have done a great job of summarizing. Here are a few articles on the conference:
Jeremy Geelan and Dion Hinchcliffe are great hosts. Check out their upcoming seminars in San Jose, CA in April as well as back in NYC in June.

Thursday, March 16, 2006

All I Really Need to Know I Learned from a 128K Mac

On Monday I had the wonderful opportunity to speak at the Real World Ajax Conference in NYC. During my talk on Designing for Ajax, I mentioned how I got my start in the world of user interface and user experience -- writing the Macintosh game GATO in 1985.

Several attendees came up afterward and told me that they had played and enjoyed GATO. That's always fun to find someone who has enjoyed something you created.

One of those that spoke with me was Blake Patterson. I didn't recognize the name but after an email followup I connected him with one of his sites that I have frequented, ipodhacks.com. I also found out he runs ByteCellar a site that covers the history of early computing. Blake requested that I give some of the history behind creating the game and the experiences of early Macintosh development. I pointed him to some comments I posted on Andy Hertzfeld's Folklore site.

Blake wrote up a nice summary of those comments. You can read his article here.

After reading his article it really came home to me how defining the event of writing that game was in my life. Like the famous book, All I Need to Know I Learned in Kindergarten; I can say that really All I Need to Know I Learned from a 128K Mac. So what did that Mac teach me?
  • Passion. I fell in love with computing on that puny Mac. I caught the passion of folks like Guy Kawasaki and Steve Jobs for this insanely great computer. Heck that phrase "insanely great" I continue to use to this day.
  • It's Possible. Look when we started development we were green. We did not know the "C" language. We made horrible mistakes. It looked like we would never succeed. We had unrealistic deadlines. But one by one we solved our problems. And we did it.
  • Event-Driven programming. The Mac introduced me to the world of event-oriented development. This underpins everything today. It is the re-introduction of the possiblity of finer-grained events via Ajax that makes it possible to build cool apps on the web.
  • Object-Oriented programming & design. While C was not object oriented, the Mac had an object-based feel to it. It got me into reading the book on SmallTalk, the purest Object-Oriented language.
  • Model-View-Controller. The powerful pattern that taught me the concept of separation of concerns, pub-sub concepts and the power of abstraction.
  • User-Centered Design. The original PC GATO was divided into many screens. When we sat down to do our brainstorming on how to write a submarine simulation game we thought a lot about how submarine crews need access to their controls/panels. We interviewed a GATO class captain from WWII. That drove us to design a display that never lost the most essential controls. You could flip between a map and other less important controls but never lost the gauges, controls and dials.
  • The Importance of Understanding the Deep Magic. What I mean is after GATO was released we went under the hood. We disassembled the ROM code. We documented it. We reverse engineered everything we could. We learned exactly how memory management, regions, event management and so on worked from the bottom up. This need to demystify the complex was first learned on my Mac.
  • Where to Optimize. Learning from the master, Bill Atkinson. His drive to have a solid design approach and then optimize in the 5% of the code was a lesson I took forward into many projects in the future.
  • Use the Tools. There weren't many tools available on the Mac. But we put MacPaint, MacDraw to use to create backdrops and vector shape files to create the graphical aspects of GATO. I have since always tried to use tools in novel ways to get my work done (see my VISIO toolkit as one example).
  • Being Pixel Perfect. Design is made up of nuances. Apple always has gotten this. I fussed over every pixel in drawing the GATO screens (although I will admit the explosion routine was horendous -- it was created the night before our first public demonstration.) To this day it drives me nutty to see something one or two pixels off.
  • Minimalism. Heck we only had black and white. It forced you to think about designs without having tons of colors and shading, etc.
  • Principles of Interactive Design. Directness, Immediate Feedback, Modeless Design, and so on. Writing one of the first complex games utilizing Windows, Menus, Icons and Pointers (WIMP) was an exciting playground to learn within. We had the Mac & Lisa to thank for inspiration.
  • Pay Attention to Real World Constraints. Hey it was a 128K Mac. Its one thing to design for the sky, its another to design for an extremely memory constrained system.
That's the list of things that immediately come to mind. I am sure there are others. For folks who did not live through the Mac & Lisa revolution I hope this little walk down nostalgia lane can capture the magic I felt when working on GATO and my lowly 128K Macintosh.

I should add that the other two developers/designers were James Rhodes and Sean Hill. James was (and I am sure still is) one of the finest developers I have ever worked with. Sean was a master at marketing and creativity. Sean later led the game unit at Sphere (formerly Spectrum Holobyte). As I understood it he was lead for the highly successful Falcon game.

Tuesday, March 14, 2006

Google Acquires SketchUp

About a year or so back I fell in love with an application.

At the time I had been pondering what should the ideal user interface prototyping tool look like. In my mind what I wanted was a way to doodle ideas and make those ideas come alive. Once alive I felt I should be able to quickly re-arrange the sketches and interact with them or allow users to interact with them.

The key thought was I don't want to burdern this interface sketching tool with requirements generation or code generation. I just want it for quick ideation. And I would like it to be approachable to those who are normally tool adverse.

In researching the space (at the time I had a desire to design, build and produce a product) I stumbled across SketchUp.

SketchUp was the perfect example of what I was struggling to envision. SketchUp was created by a garage startup to go up against the likes of AutoCAD. Its mission was to bring 3D sketching to the masses. I remember the first time I played with my son, who was 7 at the time, was having a little timeout on the bed next to where I was working. I heard a "WHOA, Dad that's cooool. Can I play with that?" Now I thought geez this is an awesome serious tool. Real architecture, landscaping, even game design can be done with this sketching tool and here my son who is only 7 sees it as a fun. And after his timeout, yes even he could do some cool stuff with it.

I remember having a conversation last year at the IA Summit in Montreal with Jesse James Garrett about this tool. At the time I was trying to gauge the need for a tool like this. He remarked that he had heard Alan Cooper talking about it being a great example of wonderful application design.

I forget where I read about it, but in an article describing how this little company (@lastSoftware) was able to withstand even AutoCAD's response, they said the real secret to SketchUp's success is "it is just a blast to use!"

And today that application I fell in love with just joined the ranks of Google. Congratulations Google! I am wondering what's cooking with MeasureMap (another favorite of mine), Writely and SketchUp joining the fold.

BTW, I still would love to see a SketchUp for UI prototyping. Wish I had time to work on it. Maybe someone will catch the vision.

Wednesday, March 08, 2006

Slides from eTech Talk

I gave my eTech talk today at 12:15pm. I followed an incredible sweeping history of computing by George Dyson.

I kept thinking, wow! how to follow someone like Mr. Dyson.

But the talk seemed to be well received. Most importantly several folks really got excited about the vision that I was putting forth. In a nutshell, a pattern library becames a vocabulary for a tribe. It becomes a nesting place for exposing solutions to help create a passionate design & development community.

You can get the PDF here (5 mb). If you want all of the animations here is a MOV version of the Keynote (3.6 mb). (Note: Links have been updated as of 3/9 12:24am PST. Prior to this they pointed to an incorrect version of the talk)

I had prepared the speech on paper. However, my extemperanous nature took over and I gave the talk from the gut. But just for heck of it here is the full text of the prepared speech.

The Written Form of the Talk (with the accompanying slide noted in brackets)
[interactive language of attention]
I was very fortunate to attend Kathy Sierra's talk on Monday Morning -- Creating Passionate Users. So many nuggets I am still ruminating on. But one thought in particular is apropos to our talk today. The "Power of a tribe" Its really about thinking about who your tribe of passionate users will be around your product or services.

Its not so much thinking about how to get their attention but how to foster a tribe. For once you have a tribe you have attention.

[attention. tribes pay attention.]
Tribe members pay attention to the tribe.

I was also struck by the quick peek we had into the second Life tribes. Wasn't that an incredible story about the tax revolt. Second Lifers setting property on fire to protest taxation. And guess what? It got attention. And it changed the rules.

[tribal platform.]
Yesterday, I heard Jeffrey McManus who leads our Yahoo! Developer Network describe the suite of web services as a "Participation Platform". May I stretch it a bit and call it a tribal platform?

[Yahoo! Developer Network.]
The Yahoo! Developer Network has been a shining example within Yahoo! (and we believe outside as well) of the importance of openness in this clamor for garnering the user's attention. It has been the backplane to our openness, sort of a canvas of openness on which we can express even more openness.

[internal tribes]
It has had a good social impact within Yahoo! Its platform of participation has created tribes within Yahoo! that are motivated to share and connect with tribes on the outside. And we have our tribe days too - called hack days. These internal mashup contests, the best Yahoo! Music Engine Plugin, the best Konfabulator (Yahoo! Widgets) day. These kind of tribe days captivate the imagination and attention of our best designers and developers.

In fact a good example of this is just yesterday Chad Dickerson, Edward Ho, Jonathan Trevor, and Karon Weber unleashed CheckMates here at the conference. You can check it out at chaddickerson.com. Its really just a tribal sort of thing.

[two recent examples]
Well with all of this tribal goodness going on inside the halls of Yahoo! it just had to work its way out into the wild.

Two very recent examples I would like to share is the release of the Yahoo! Design Pattern Library and the Yahoo! User Interface Library.

[design tribe]
So at Yahoo! I have two roles. One is as Ajax Evangelist. The other is the Design Pattern Shepherd. I am organizationally within User Experience. I am fortunate to work for the likes of Erin Malone and Larry Tesler. Both who believe strongly in the power of the tribe.

[design tribe. new models.]
Well, this last year has seen the rise of Ajax and the revival of JavaScript and Flash. We are no longer bound by the page refresh model. With this change, new user interaction idioms have surfaced on the web. The exciting thing about these new "patterns of interaction" is that they make it easier to create engaging interactions. And they also go a long way in making information relevant. Engaging interactions help get the user's attention. Relevant information goes a long way in keeping the user's attention.

[attention. engaging.]
Getting the user's attention is all about engagement. It's about creating a compelling reason for interest. It's about what we call the Wow! Factor. There are points in the user's interaction that are pure moments of opportunity. Opportunities for engagement. Opportunities for getting the user's attention. Moments for creating interest. Interesting moments.

[attention. relevant.]
But it's not just about getting the user's attention. It's also about keeping the user's attention. It's about creating relevancy -- creating more reasons for the user to stay interested. By having intelligence more near the user can experience a deeper delight with the interface. Not just an initial euphoric Wow!, but a deeper more satisfying delight.

[attention. loyalty.]
The final stage of all of this goodness is pure, unadulterated love. It's that "sit around the campfire singing Kumba-ya" kind of attitude. It is when attention turns into habit. The goodness of wow and delight blend together to create loyalty. The blending of engagement and relevancy.

Now here is where as an Ajax Evangelist I would normally make an altar call to come to this Ajax goodness. But I am not going to claim that a little Ajax powder is going to guarantee you a slice of the user's attention. All I can say is that there are new ways of interaction. And these new ways of interaction create the possibility to be more engaging and more relevant.

And that is what this design tribe is struggling with. How to communicate, design, document these rich interactions.

[immediate]
First, its about the immediacy of information, logic and presentation that can be brought near just in time. Ajax makes it possible to provide what is needed in the nick of time.

What immediacy brings to the table is the ability to be relevant. No longer does information have to be stale. Patterns exist that illustrate how to bring information near. Relevant, just-in-time information is attention-getting & keeping.

[direct]
And what about directness? If the user has to go through a lot of indirect steps to find information or accomplish their task, how long do you think you will hold their attention? But if you can provide direct editing, drag and drop and other desktop mechanisms the user may find themselves more confident and engaged in your site.

[inviting]
And how about the power of an invitation?
Nothing gets someone's attention more than offering an appropriate tip at just the right moment. And how about politeness? Doesn't that rank high on your attention meter? These patterns throw out the welcome mat. If done correctly, they provide relevant instruction just when you need it. Enticing the user to engage.

[without boundaries]
Want to lose the user's attention? How about erecting hurdles for them? How about making them jump unneccessarily from page to page and turn a simple process into a laborious one? That was the old model. It centered around page-to-page interaction. But these patterns bias staying in the page. They help keep the user engaged by not giving them a point to decide to bail out.

[light footprint]
Users will lose interest if tasks seem to hard. The newer styles of interaction center around keeping a light footprint. Making it easy for the user to interact.

[cinematic]
And don't forget animations (in measure). Transitions can communicate relationships. What has changed. Symmetry of action.

[rich in objects]
And finally, if all content has the same level of richness, what kind of interest will be created? Little or none! But take some content and turn it into an object. Now its bloggable, shareable, searchable. Rich Internet Objects like trip planner make it fun to create content. Similar work is being enabled by projects like microformats.

[pattern list]
This is just a few of the themes of interaction that have emerged recently on the web. And these are the patterns that make up much of these interactions you now see on the web.

This study of what patterns were emerging on the web and what patterns were emerging across Yahoo! are being catalogued within the Yahoo! Design Pattern Library.

[pattern library]
Recently, 2/13, we released a public facing version of the Pattern Library. While it currently only has a handful of patterns in its initial release, we plan to fill out this library over the course of the year.

Why? It's really about surfacing a vocabulary. It's about creating a language around getting and keeping the user's attention. It's about ways to create Wow, Delight & Love.

Every good tribe has a language. This is one dialect of the design tribe's language.

So when you create a language connotations arise and metaphors and similes and double entendres arise. Lots of various birds come to roost here.

So its also about creating a nesting place for all of the other ideas that surround design solutions. It's about understanding and discussion the context of a problem. When to use a pattern. How to use a pattern. And the rationale. But it's even broader. By having a library, a language we can talk about getting and keeping user's with special needs. We can consider accessibility concerns. We can consider internationalization issues. Issues with degradability. All the things that affect getting and keeping the user's attention.

And even more exciting from its branches we can hang the fruit of code. Good and honest implementations of the patterns.

[developer tribe.]
So the the new model also affects the developer tribe. In this case it is a struggle to find the best code solutions to interaction problems

[developer tribe. yahoo! ui library]
For this tribe we have released Yahoo! User Interface Library.

[another ajax framework?]
So why another framework? Well, inspired by the acquisition of Oddpost (now Yahoo! Mail Beta) in 2004, Thomas Sha started the development of a Yahoo! Ajax framework in Jan/2005. As it flourished internally the decision was made to expand the tribe.

Once again the belief was that by using the Yahoo! Developer Network's Participation Platform we could share and benefit at the same time.

And we see a real synergy between the various tribes: mashups, designers and developers.

So in conclusion, the real purpose of all of this is to surface a vocabulary and expose solutions so that the language of the tribe is more visible and the path to full tribal membership is clearly marked.

[surface, expose]
The patterns are important because they surface a language. By exposing services and the code that can implement the designs we are providing a few tools that may help you get and keep your user's attention.

Monday, March 06, 2006

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:

Sites:


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.