Mark Cohen is a CIO at Australia's largest online retailer and is a hands-on, sleeves-rolled-up, code-cutting geek. He lives in Sydney, Australia with his wife and boys and can sometimes be spotted puffing and panting as he runs at Maroubra Beach

Archive for the 'MIX07' Category

Yahoo UI Session

Notes from Yahoo UI session… References at the end

Some points raised around the proliferation of “because I can” programming – overuse of drag ‘n drop where a one-click could star, shortlist, etc

Principle: Keep a light footprint.

Posterchild is http://digg.com. One-click voting for items. Kevin Rose (founder) thinks that the one-click Ajax vote was key to Digg’s success. It removed usability pain points.

“Paradox of choice”: – The more choice you offer users withing a specific action, the less they like it.

“Design for Engagement”: Use invitations and feedback, treat it like impulse buying in the supermarket.

“Cross borders reluctantly”:

  • “endless scrolling” – avoid paging.
  • Hover details / “sneak peek” – users can preview in thumbnails on hovering so they dont have to click and leave the page.
  • Inline assistance.
  • Lightweight popups vs full window popups.
  • Every page boundary you make the user cross is a “speedbump”.
  • Rethink process flows.

Search results are a bad place for “endless scrolling” because you’ll kill your scalability.

Scrolling:

  • Shortlist scrolling, image scrolling, scrolling within page “boxes” like divs works.
  • Data the user “owns” like thier shortlists is better scrolled than paged.
  • Direct selection like highlighting the selected rows works beter with non-paged (endless scrolling) and checkboxes work better with paged results. the user expects the system to remember wht they checked on previous paged (obviously :) )

Popups: Use in-context expands over popups (popups hide information)

“Prefer direct, lightweight, in-page interaction”

Principle: Give live feedback

  • live suggustions
  • autocomplete (ajax style)
  • periodic refresh (ajax style, not meta refresh :) ).
  • Busy Indicators – visual cue to inform user that something is happening
  • “An ounce of preventive design is worth a pound of error-handling code” – I like that quote best ;)
  • Use live previews – only really relevant for highly interactive sites
  • Use laws of proximity in providing feedback

Principle: Offer an invitation

  • Patterns – hover invitation (tooltips / hover actions),
  • tour invitation
  • drop invitation (visually indicate drop zones etc)
  • Keep actions out of it: The user must feel free to explore. Anything they do must be undoable easily. If a popup is shown, the close action must be as easy as the open was. Also don’t make actions happen that make the user feel out of control. Example “show big map” link that hides a lot of page content automatically if you hover on the link. Upsets the user.
  • Speak to the brain: refers to the book “Mind Hacks” by Tom Stafford & Matt Webb, published by O’Reilly.
  • Show transitions:
  • Motion is useful for getting attention. Example – Flickr Zeitgeist. Movement makes people look at the widget, but they feel like they missed the action. makes them want to click to see what they missed.
  • Motions are good for state changes – eg delete an item from a shortlist, it fades away
  • Keep it sane – ie don’t overuse.

Principle: Think in objects

  • Flickr – geotagging of photos. Basic OO principles carried through to UI design
  • Think deeper interaction – Multivariate data, focus + context
  • Embedded contextual infrmation and mashups

Key Principles for richness:

  • Prefer direct
  • Provide invitations beforehand,
  • Think in objects and tie information to interactivity

References:

Windows Live Services

I went to an interesting session on Windows Live today.  The most powerful thing they are going to be offering looks like the contacts component.  It will be possible to build integration into your website to leverage the Windows Live Messenger contacts that your users have.  This is basically the ability to add a social networking component to your application, using a pre-existing social network of many million of people as the foundation.  The service will be free for use on smaller sites, with fees kicking in at the million user mark.  Read about the new contact control here and the new contacts api here.  At 25 cents per UB per year, charges for a million user plus site will probably start at around $250,000 per million per year.

Match.com demonstrated the use of integrated live messaging, and the potential looks huge.  suddenly they bring the ability to IM people who are logged in to Windows Live Messenger from the website.  This means that people do not have to actually be on match.com to be messaged through the website.  I would gues that the effective online audience at any point would be grown by a factor of ten.  That’s a compelling business case in itself.