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

Showing posts with label design. Show all posts
Showing posts with label design. Show all posts

Sunday, June 27, 2010

Zurb's 110 Interesting Moments for BounceApp.com

In our book and often in our talks we discuss a technique for thinking through and documenting detailed interactions in a user experience. Just arrange the interesting moments in a grid. List the "actors" (user interface elements) vertically and the events horizontally. The cells in the grid become the interesting moments.

With the classic example from the of drag and drop there are at least 96 interesting moments (6 actors X 16 events = 96 interesting moments).

BounceApp Annotation Interaction

About a month back I gave a talk at Zurb, a northern California design firm, in which I discussed this technique. On Friday I was pleasantly surprised to see they had already taken the idea and used it in a new product they announced last week -- BounceApp -- which was featured on TechCrunch.

Check out their article on 110 Interactions for Editing Annotations on Bounceapp.com.

Nice application of the grid.

Friday, March 05, 2010

Microsoft Courier Interesting Moments & Design Patterns


I culled numerous screenshots from the video posted on Engadget in their article: Microsoft's Courier Digital Journal and have organized these into 17 sets on my Designing Web Interfaces flickr site. Each corresponds to an interaction pattern with individual keyframes to call out the interesting moments.
The 17 patterns
What Stands Out to Me
  • 2 individual panes. Perfect for book reading. Perfect for master/detail pattern (which is being exploited in the ipad as well).
  • Pen, finger & hand gestures. Little wider input vocabulary as you advance in skills.
  • Even more physicality than iPad (or at least it appears so if the video is really a true representation). When objects are selected, they move upward to a higher plane and float above the other elements. Using the z-index is a clever way to represent selection. When the elements break free of "flatland" they wiggle/wave like a flag as they move into position. The page that gets mailed, transforms itself into a postcard through a series of origami style folding.
  • The pocket is really clever. Store stuff in the binder/gutter and move around then pull it out.
  • The language of object on object meaning is also richer than the iPad (will the normal consumer understand this?)
  • The use of the pie menu with the pen is a good idea. Pie menus have been shown to be efficient and seem natural in this interface.
  • Returning to the pen. Being able to use the pen for finer pixel level manipulation is good (again, this is not as simple as just the finger, but provides more capabilities). Also being able to input with the pen (hopefully they nail this) should be faster than the keyboard for short spurts (don't have to leave the surface to begin writing).
  • Gobbling while surfing. I am not sure if my former colleague Karon Weber has been involved in this project (she works on touch based interfaces at Microsoft with Bill Buxton). We did the Yahoo! Teachers project together and she & Samantha Tripodi designed the gobbler which I built. The premise was easily grabbing content from around the web and dropping it into "wells/objects". In the Courier this is made simpler by tossing into the right pane (the receptacle for the drop). The tossing seems pretty effortless and the landing target is huge (can you say Fitts law?)
Of course, all of this may just be vaporware, but regardless I found it useful to analyze the interactions as they illustrate where interfaces will be heading as we break away from the world of pure WIMP (Windows, Icons, Menus, Pointers).

Tuesday, October 27, 2009

Rich Web Experience coming in December

Excited to be speaking at the Rich Web Experience Dec 1-4 in Orlando, Florida.

If you sign up before Nov. 2nd you can save $200. Hope to see you there!

Friday, October 16, 2009

Mental Note Cards - Stephen Anderson


I mentioned a great talk a while back by Stephen P. Anderson. In that talk Stephen teased us with a project he had started for capturing design principles/patterns in a deck of cards. The good news is you can actually pre-order a set now at a discounted rate! Already ordered mine.

Check it out at getmentalnotes.com. He also is offering a preview set of 7 cards in PDF format.

Wednesday, October 07, 2009

Slot Machine Tabs (Needless Fanfare)

Ok, one more in this vein. Please indulge me as I find it humorous what abuses can be foisted on the user.

Sunday, October 04, 2009

Jumping Tabs (Needless Fanfare)

Another example of the Needless Fanfare anti-pattern. Do we really need tabs leaping up to meet your mouse?

Saturday, October 03, 2009

Silicon Valley Code Camp Talk - DHTML Prototyping

For those at the Silicon Valley Code Camp (and anyone else :-) here is the talk from today. I added references that I mentioned to the end of the slides. Also I mentioned CSS Specificity via Star Wars. This is a great way to learn the rules for CSS Specificity. You can also download the PDF for a larger version here.

Friday, September 18, 2009

Designing for Interesting Moments Talk

I gave a talk on Designing for Interesting Moments for the IxDA at the Google campus also at Microsoft for the UX team as well as at the Ruby Meetup Group at CMU and finally this week at The Ajax Experience in Boston.

If you want to hear it in person I will be giving it at the Rich Web Experience in Florida the first week of December.

Here is the longer version of the talk.

Tuesday, August 25, 2009

Renting an Idiomatic Experience

When my wife & I arrived in Seattle recently, we rented a car from Avis. After an exhausting re-route to a different counter than the one conveniently located beside the baggage claim area and a long, long wait to get a car (geez, what do most people do at the rental counter? I just say "rent me what I ordered, I don't want an upgrade and no I don't want insurance") we got to our 2009 Altima.

Now I am not into cars. Except for a brief stint as a teenager tricking out my Camaro with Keystone Classic chrome wheels and hosing down the glass-pack mufflers to make it sound really loud I have mostly settled for "cheap & paid for". So when I was confronted with "keyless ignition" I was frankly baffled.

Here is what would have been the key.

IMG_4581

Now I get FOBs and I know that keyless ignition exists. So I thought, ok this is cool. I looked where the keyhole should have been and saw this:

IMG_4582

So I pushed the Start/Stop button.

IMG_4583

Hmmm. ACC. Ok, accessories are now on. Radio, etc. So I need to push it one more time.

IMG_4584

It says "On". Right. But the engine is not on. Just the stupid "On" light is on. Ah. Maybe I need to hold it down at this point to get the engine to start.

IMG_4585

Back to square one! Defeat. Deflated. Ok, so now I do what every user does when faced with something that didn't work. I do all of the steps again. And again. Now I know better. But still I keep cycling through Off-Acc-On-Off again and again. I look around the car. Checking out the dash.

IMG_4586

I look to the left side of the dash.

IMG_4587

Ah. Maybe I need to buckle my seat belt... Nope that did not do it. I see the Brake indicator. Take off the emergency brake? Nope that did not do it either. By this time I get out of the car and look for an Avis representative. I feel really, really stupid by this time. I am a geek. I am a designer & an engineer. I decide there is no way I am asking someone how this thing works. I will figure it out if it kills me. So back in the car.

Finally I notice (by peering over the steering wheel slightly) some items lit up in the center of the dash!

IMG_4589

First icon. Foot on a brake. Second icon. What is that? Hmmm... the gas pedal is next to the brake. So that must mean madly press the gas as I press the brake while pushing the Start/Stop button.

Success! Although I almost flooded the engine.

It turns out the second icon means "push the button". Maybe if it had been a finger on the "button" I would have gotten the sequence: foot on brake, finger on button.

Ok, so now that I know the magic sequence, keyless ignition is cool. In my everyday experience it is much better than keyed ignition. Just hop in the car with "key" in my pocket, put my foot on the brake and push the button -- awesome! Normally a car salesman would have happily explained it to me. But in the Avis parking garage I had no car manual nor anyone explaining the process.

My experience figuring it out was very frustrating. Yet the everyday experience was not. Why was this?

Since I was left to figure out this sequence on my own I had to rely on what I already knew about about starting cars. And it had nothing to do with putting your foot on the brake. This you see is not an intuitive interface. It is what Alan Cooper calls an idiomatic interface.

In Cooper's book, About Face 3 he describes three types of interfaces: instinctive, intuitive and idiomatic (pp 273-275).

An example of an instinctive interface is when you can't keep your eyes off of the dancing cowboys in the ubiquitous mortgage ads. Your brain is hard-wired for attention processing.

An intuitive interface is one that utilizes the brains ability to do a mental comparison between familiar experiences and a new one. An example might be guessing what the trash can icon on a desktop does since you already understand a real world trash can. Putting items in it would throw them away.

But getting items into the trash can may not be something you could intuit without being shown drag and drop. This is the last type -- idiomatic. Idiomatic interfaces are what make up most user interfaces. Scroll bars, nested folders, radio buttons, drag and drop are not instinctive or immediately intuitive. Instead you have to learn how to use them (yes there is a gray line between intuitive & idiomatic). In the original Mac the shortcut for ejecting a disk was to drag it to the trashcan. Not intuitive and not instinctive, but idiomatic. Like learning the idiom "beat around the bush" once it is learned it is easy to use in common speech. Ejecting a disk by dragging to the trash can was a nice shortcut (before the mac had right click menus).

Once I was shown this idiom I did not forget it.

Another example of an idiomatic interface is the iPhone's ability to move items around. You hold your finger down for a second or so on the icons on the home screen. They get jiggly. Then you can drag them around. Totally not intuitive. But idiomatic. Once learned it is easy to do.

dwi_0113b

So back to the keyless ignition. This is an example of an idiomatic interface. Not intuitive. Why the brake + the button? Why not just the button? I am guessing this keeps the kiddos from starting the car up. Also guessing the seat requires someone sitting in it before the brake + button would even work -- all safety features. But even though it was not intuitive it was learn-able. And as with all good idiomatic interfaces once I learned it the interface was simple.

Alan Cooper states it this way:
All idioms must be learned; Good idioms need to be learned only once.

Saturday, July 18, 2009

Upcoming Talk: Designing for Interesting Moments @ IxDA 7/22

I am busy this weekend restructuring a talk I have given in the past that parallels my book. I will be restructuring the way I present the information as well as bring in new material. When I was at the Big D Design conference in Dallas in May I was really impressed by Stephen P. Anderson's presentation on the Art and Science of Seductive Interactions. Not only was the material helpful, but Stephen's take-aways and presentation organization were excellent as well.

Anyway I am looking forward to a fresh take on this topic. The talk will be titled Designing for Interesting Moments. I will be giving this same talk on 8/24 at the Microsoft campus in Redmond as well as at a Ruby Meetup group (event details in a followup blog posting).

If you can make it meet me at the Google Campus on Wednesday night, 7/22 at 7:30pm. Note: It will be in Seville which is in building 40, not building 43 as advertised!

By the way, I have embedded Stephen's talk (again not mine!) here for your enjoyment:

[Stephen P. Anderson's talk: The Art & Science of Seductive Interfaces]

Thursday, June 25, 2009

Anti-Pattern: Needless Fanfare (Turbo Tax)

I mostly love Turbo Tax (except when it tells me I owe a tax payment :-). But here is one that I found to be very annoying and a good example of an anti-pattern Theresa & I write about in our book... Needless Fanfare.

While doing my taxes back in April I was constantly going back and re-entering information that would hopefully bring my tax payment down (numbers below are not my actual tax payment :-)

Here is the real time version.



When turbo tax recalculates your tax burden it plays the Biggest Loser TV show's game of running the values up & down in a random fashion. The change in the videos below is from $10,533 down to $9,177. However at one point it goes all the way up to $98,000! Now we all know that "inside the computer" calculations are not done this way. Someone thought this would be cool way to call attention to the change happening.

But let me tell you this is a horrible experience. It gave me a heart attack as it ran up & down playing with "my money" till it finally said "ok, ok it went down". But because it does this nonsense it makes it hard to see what change actually happened (a variation on change blindness).

Now watch it in slow motion to see what it is doing.



There are other ways to signal a change. The most common is to spotlight the change for a brief moment usually using a fade anything technique (see these examples.)

Torturing me is not a good user experience. This is as fake as the Biggest Loser scale.

Anti-Pattern: Geek Speak (Facebook)

Need I say more?

facebook-database-error (by Designing Web Interfaces)

Saturday, May 30, 2009

Big D Talk - 5/30/2009

Thanks to all that attended my talk in Dallas. What struck me the most is the vibrant community of designers, innovators and startup incubation that is growing locally in Big D. From my visit to CoHabitat in uptown Dallas to the Big D Conference itself I found the same conversation threads that I hear every day in Silicon Valley. Maybe it's the immediacy of information available now that brings us all closer. Or maybe the economy is driving lots of people into consulting and scrappy self-funded or low-funded startups. But it is refreshing to see it in action.

For those wanting the Big D version of the talk (slight variation on previous versions) you can get it from billwscott.com/share/presentations/2009/bigd/DWI.pdf


An earlier version is available on Slideshare.

Thursday, May 28, 2009

Speaking at Big D Design Conference this Weekend

Small Big (D)esign Speaking Badge

Happy to be traveling to Dallas to speak at the Big D Design Conference. Lots of interesting speakers. In particular looking forward to hearing Norm Cox's keynote as well as hear from several former colleagues: Micah Laaker, Jim Carlsen-Landy, Stephen P. Anderson and Adam Polansky.

I will be speaking on Designing with Patterns at the 1pm slot on May 30th -- a shorter version of my 3 hour workshop I gave at WebVisions 2009.

On the personal side I get to visit 2 of my sons, daughter-in-law, grandkids as well as mom and brother.

Thursday, May 21, 2009

WebVisions 2009 - Bringing Design to Life

What are the disconnects between web design & web development? How can the two work together more efficiently? What do developers wish designers knew?

I gave this talk today (May 21, 2009) at WebVisions 2009. Enjoy!

Monday, May 18, 2009

WebVisions 2009 - Workshop & Talk

Excited to be heading to Portland for the upcoming WebVisions 2009 conference. I was fortunate to attend & participate on a panel at WebVisions in 2006. I found it to be a no-hype, practical conference with good speakers and excellent attendees. And of course Portland is a wonderful city.

Designing with Patterns Workshop
I will be giving a 3 hour workshop on Wednesday afternoon (May 20) starting at 2pm. Here is the planned agenda:
  • Pattern Overview
  • Survey of Pattern Libraries
  • Design Principles
  • Principle One: Make it Direct
  • Exercise: It's a Drag
  • Present Solutions
  • Principle Two: Keep it Lightweight
  • Principle Three: Stay on the Page
  • Principle Four: Provide an Invitation
  • Principle Five: Use Transitions
  • Principle Six: React Immediately
  • Exercise 2: Button Mayhem
  • Present Solutions
  • Q & A
Here is a description of the workshop.

In every field of design one of the first things students must do is learn from the work of others. They study and break down real-world examples in order to understand the underlying principles and patterns that make for successful design. Then they are able to apply these learnings to their own set of problems. Designing for web interfaces is no different. We are constantly searching for inspiration and practical guidance in solving the problems we face as designers each day. One approach to curating and applying solutions is through the idea of design patterns. Design patterns define a solution in the context of a real world problem.

In this workshop, Bill Scott will discuss the rationale behind patterns, present a number of excellent pattern libraries for your consideration (20+), and then dive deep into 100+ examples from around the web that illustrate good interaction techniques (design patterns) as well as the not so good (anti-patterns) all organized as a set of six design principles. The main idea of the workshop is to expose you to lots and lots of real world examples and discuss the nuances and best practices that can be distilled from the them. In addition there will be time for two group exercises -- both actual problems that are currently being worked on at Netflix.

Many patterns are discussed. Here are the main ones:

In Page Editing. Direct Selection. Drag and Drop. Complex Inline Editing. Alternate Edit Path. Symmetry of Interaction. In Page Action. Remembered Collections. Rating an Object. Contextual Tools. Vote to Promote. On Demand Scrolling. In Context Expand. Inline Assistant. Hover Details. Lightweight Popup. Lightbox. In Context Configuration. Accordion. In Context Insight. Inlay. Overlay. Pagination. Carousel. Paged Scrolling. On Demand Scrolling. Seamless Paging. ZUI. Inline Checkout. Inline Assistant. One Page Checkout. Step by Step. Single Page Flow. Page in a Menu. Invitation. Tooltip Invitation. Cursor Invitation. Hover Invitation. Drop Invitation. Tour Invitation. Blank Slots. Blank Slate Invitation. Something Askew Invitation. 1-2-3 Call to Action. Sneak Peek. Question Invitation. Familiar Invitation. Button Invitation. Navigation Invitation. Fade. Self-Healing. Zoom Box. Slide. Animate. Spotlight. Auto Complete. Busy Indicator. Live Previews. Periodic Refresh. Focus+Context. In Place Drill Down. Tickler Menu. You are Here.

You can learn from the bad examples as well. Along the way, anti-patterns are pointed out. The anti-patterns discussed are:

Anti-Patterns: Non-Symmetrical Interaction. Artificial Construct. Tiny Target. One at a Time. Hover & Cover. Double Duty. Mystery Meat. Stalker. Pogo Stick Navigation. Idiot Boxes. Mouse Trap. Animation Gone Wild. Needless Fanfare. Missed Moments.

I will also be presenting Bringing Design to Life which explores what designers should know about interface engineering and ways for engineering & design to work in synch to bring design to production.

Thursday, March 19, 2009

Talk: Interactive Prototyping with DHTML (Mix 09)

Gave a new talk this morning at Mix 09 here in Las Vegas. It seemed to resonate with the crowd so sharing it hopes that others find it helpful in their practice.

One note, I am a fan of rapid ideation which is often hard to do in DHTML. Sketching as Bill Buxton points out is an incredible way to do this. Both Flash Catalyst and Microsoft Expression Blend 2 (version announced this week) get us closer to this vision. But often we need to prototype directly in the technology of our web site (often DHTML). This talk works to point out ways to make this faster and more error free.

Talk Description


Prototyping can be challenging. Especially prototyping in DHTML. But over the last few years a number of tools, techniques, libraries and frameworks have emerged making the task easier. Drawing from years of experience at companies such as Yahoo! and Netflix, come hear Bill Scott discuss these solutions and best practices for laying out pages rapidly, injecting interactive behavior and simulating data for prototyping your Web applications in DHTML.

Saturday, February 14, 2009

O'Reilly Webcast Video & Audio: Designing Web Interfaces

I have been having trouble getting my audio synced to the slideshare version of my O'Reilly Webcast. Hoping that the good folks of slideshare can help me figure out an easy way to get it going.

In the meanwhile, the O'Reilly team has placed the live video & audio feed from the webcast on YouTube. This video will give you a clear idea of what is kind of material is covered in the book.



NOTE: For best experience, watch it on the YouTube site in high resolution. http://www.youtube.com/watch?v=LW4MwvgW_ww&fmt=18

Thursday, February 12, 2009

Interview: What Developers Wish Designers Understood

Lou Rosenfeld interviewed me on the topic "Bringing Design to Life: What Every Designer Should Know About Interface Engineering". This is a really interesting subject and gets to the heart of how to get engineering and design teams to work together better.

The interview gives you some of the points I will cover in my upcoming webinar on the same topic (Feb. 26th, 10AM PST/1PM EST).

Also there is a short video presentation (about 7 minutes) that provides a sneak peek into the webinar presentation.

Use code RMWBNR for a 20% discount off your ticket purchase.

Tuesday, February 10, 2009

Oodles of Screencasts Available for Designing Web Interfaces Book

Last Friday night I uploaded about 390 interaction movies (screencasts). I have been collecting examples (good and bad) that illustrate various patterns and finally took the time to get them out on the Flickr Designing Web Interfaces site.

Details can be found on the Designing Web Interfaces blog.