Anti-Design-Patterns
I was choosing between three sessions to go to, and ended up in none of them. Very wise decision, the presenter was Bill Scott the Director of UI Engineering at Netflix and he talked about some user experience problems that he has seen in his work at mainly Yahoo, Netflix and randomly across the web. Here is another rough list though I want to go back over his slides and do a full post after the sessions are over.

  • The Meandering Way anti-pattern. Signifies that a user has drift throughout the system / user interface to accomplish their intended action. Bill used screenshots of all the UI’s in the process and then overlayed some red arrows showing the path the user would take. This was very successful in showing that the user had to navigate in a trail simulating the HARD track of Project Goth am Racing.
  • If your user experience is poor, people just won’t want to use your product. Having a great UX translates to people being more productive. If people are more productive… (the rest should be self exploratory)
  • Usability testing is important, you need to catch your design issues early. Writing that it sounds obvious, but we’re not currently doing it. We don’t feel like a big enough company, yet that doesn’t seem like a good excuse after this session.
  • Bill felt very comfortable dealing with contextual item issues. (Things like drop down action menus and on hover menus.) The major problems involved here are making your user hover over, then having to move the mouse outside the bounds of the item, yet inside the new hovered menu to perform your action. Imagine a picture of a full parking lot from above and you hover over the image of a car in the middle somewhere, a menu shows up, yet the menu is bigger then the car and so it opens up and you have to select the option to delete the car from the parking lot far to the right. This requires you to hover over a car, then move your mouse to the right, hover over another car and repeat the same annoying mouse move action. His argument was that its really pissing the user off having to keep move their mouse.  His advice was to put the core actions right over the car so that if you want to delete it, you know that you can put your hover focus on the trunk of the car and that’s where the delete button will be, regardless of how the rest of the window opens. This is an inelegant example that he showed, but that’s what ya get for staying home.
  • Netflix found that a quarter second pause on mouse over of a movie before you popup the context window, if it popup up to quickly it was really annoying.
  • Popups to circumvent good usability are called Idiot Boxes, as much as I’d like to assume it was because the designer was an idiot for dreaming up such a feature, its really about assuming your users are idiots. Which while people like to claim just isn’t true, they may seem like idiots when you design something really complicated and they don’t care to try to learn exactly how it works, but when you make something very intuitive and smart the user will just know how to use it, and its not a matter of smart or dumb.
  • You need to be careful with Drag n Drop, especially with checkboxes. Don’t mess with the checkbox, its simple, its powerful and there’s no reason to go messing with how it works. He made a good point about this, but I kinda forgot it, sorry. Drag n Drop though, just make sure that if you implement it, you do it uniformly. If you can drag to add, can you drag to delete? Drag to re-arrange? If its only partially in there, users will get confused.
  • There was some questions about Auto-save, its an action that kind of does something major without to much notification to whats going on. (Autosave like wordpress who saves your latest post without you requesting it so if your browser goes down you don’t lose your blog post that you didn’t remember to save). I think we basically agreed that it was good, but don’t remove the save button. I think as it becomes more commonplace in web apps, people will probably begin to expect it and soon be disappointed when they close their form and it wasn’t saved when they come back.
  • Last thing, Use a grid of actions and elements to plot out the different states the elements are in during each action. So on drag, over header, highlight column.

Whew that was a good class, I hope to keep in touch with Bill a bit to pick his brain further, at-least for some advice on directing the UI tier.

No comments

Leave a Reply