19 April 2009 ~ 0 Comments

When Designers Don’t Play Hockey

To the left are the standings for the NHL’s Eastern Conference.  The teams placing 1st through 8th are ordered by points and when the points are equal, tie-breaking rules are applied.  I’ve highlighted the 1st place (Boston) and 8th place (Montreal) teams.

Why is playoff ranking important?  It determines who has home ice advantage during the playoffs.  During a best-of-seven series games are played as such: home-home-away-away-home-away-home.  The team ranking higher plays 4 home games and 3 away games.

During the playoffs, it’s typical for a new interface to be used to display playoff matchups.  For the 2009 Stanley Cup Playoffs, here is that UI, with the Eastern Conference selected (notice the word “EAST” in white).

Before we get started, sports fans will recall how games are listed in box scores.  It’s always “away team – home team – eastern time zone time”.  For example if Vancouver was playing at San Jose at 7pm PST, you would see a listing for “VAN-SJ, 10pm EST”.  This is the same across all sports, not just hockey.

Now, notice the areas indicated in green and remember: Boston is the #1 team in the playoff seeding, and Montreal is #8.

“Well Boston is the home team for the first game, so I’ll put their icon second”, choosing to use box score game description to denote the brackets.

The problem is that when displaying playoff brackets you always display the higher-seeded team first from which any sports fan is able to instantly derive where the games are played / who has home ice advantage.  Otherwise this picture is interpreted as “#1 Montreal versus #8 Boston”.

Yahoo! even confused itself.  By the time the next person started working on the bottom of the UI, they must have understood playoff rankings and used the position of the bracket icons to draw the seeds – listing Montreal as #1 and Boston as #8 (3rd green box above the photographs).  Oops!

There is no standard to be found for how to display playoff brackets, it’s a format that’s been around as long as I can remember – not in the rulebooks though.  If you have a look at NHL.com or ESPN.com you’ll see what I mean.  This is How It’s Done(tm).

This underscores the need for domain knowledge when working on a UI and beyond that, a basic level of understanding contemporary design patterns that you won’t find in books.  I would characterize this as a very soft, advanced skill because unless you understand the basics you can find yourself “off the reservation” doing something that’s done on a couple of sites / applications / devices you personally prefer.

02 April 2009 ~ 0 Comments

And the Other Months Are…?

15 March 2009 ~ 0 Comments

BlackBerry Bold Impressions

This past Friday I unboxed and setup the BlackBerry Bold ordered via Amazon.  Since then I’ve been iPhone-free, emailing on the shiny new Bold.

This isn’t meant to be a comprehensive feature comparison – only what I’ve noticed over the last two days.

Where the BlackBerry Bold is Superior

  • Typing, by a longshot.  Old Rob would kid himself into thinking the iPhone was fine until I stopped sending emails because of typing accuracy.  Lightning fast on the Bold with far fewer mistakes – a few minutes after using it, versus a few weeks / months / years / never on the iPhone.
  • The unified inbox and calendar are amazing.  I have 4 email accounts and busy home/work calendars.  No clumsy hierarchical iPhone Mail.app account navigation (read messages – back – back – down – down – read messages – back – back – …) and the iPhone only lets you use one calendar at a time.
  • Navigability (speed, not ease).  Berries are for Getting.  Things.  Done(tm).  Screen swipes, transitions, big button prompts (click the Reply icon on the iPhone when reading mail) all look terrific and make the phone much easier to use and without any accelerators for the accustomed user, they slow you down.
  • The screen is brilliant.  Same iPhone res crammed into half the size, of course!

Where the iPhone is Superior

  • Software support.  iTunes as the control center was a terrific idea on Apple’s part.  The Berry has no such thing.  Mac users get 3rd party software (PocketMac) which allows to you sync data from different apps (Address Book, iCal, iTunes) though the software itself is a shambles.  It took several attempts to perform a sync of only Address Book contacts, many of which hung or crashed PocketMac entirely.  In the end, only a small number of my contacts made it over and I have no idea how to get them all across.  I’m shocked RIM provides this as the default support mechanism for Mac users.
  • Two-way sync on all mail providers.  All IMAP accounts have two-way sync (e.g. read a message in Gmail, appears read in the iPhone).  The BlackBerry only supports this on BES accounts only (corporate email) and on ISP accounts it supports 1-way sync (read message on device, marks it read on Gmail).  If you only read these in your BB, it’s not a problem.  If you routinely swap between your web browser and the device, it’s a major annoyance.
  • Web browsing.  The world has already implemented crippled sites for BlackBerry browser detection and you need to change your User Agent in the browser settings to get the full web experience.  Changing your agent to Firefox or IE means you get to experience the web as though you were using the IE5 renderer.  Things work… mostly.
  • Google Maps.  The killer app on the iPhone for me.  The BB has maps as an app download from Google, though it’s much slower and clunkier than the iPhone even over WiFi and 3G.
  • Mail account setup: you use the browser on the phone to access the BIS (BlackBerry Internet Service) and setting up an account is circa 1999.  The only way to get IMAP is to leave your password empty, get an error, choose to set your settings manually and then specify an IMAP mail server.  Is your IMAP server also listening on a POP port?  OOPS!  The BIS looks for POP first and won’t let you set it to IMAP.
  • Overall organization of apps and options – settings on the Bold are in a few different places.  There’s a “Setup” icon and a “Settings” icon…?  Want to change your ring tone?  Use the Media app and select ring tones.  Want to play music?  Not under “AT&T Music”, under “Media”.  The saving grace here is that you can get rid of the noise by hiding half of the useless icons that ship with the phone.

My Choice

In the end I decided to go with… the iPhone.

  • Lack of two-way sync on non-BES accounts played a major part in the decision.  Picking up my device at the end of the day, full of messages that I’ve already read from my desktop, did not work well for me this weekend.
  • Amidst a myriad of crashes and hangs, PocketMac did not earn my trust and I won’t be depending on it to manage “my digital life”.  Who knows what havoc it could wreak on my data?
  • Apple hosts major updates to their firmware at least once a year and one gets the feeling that while they’re lagging behind in copy-and-paste, MMS, etc. that these are just around the corner.  For example, if iPhone 3.0 adds a landscape keyboard, will that do the trick on typing mistakes?

Thus ends my weekend of using the Bold.

22 February 2009 ~ 0 Comments

Credit Crunch?

From my Amazon.com Visa January credit card statement.  Anyone know any loan sharks?  They’re bound to have better rates…

22 February 2009 ~ 0 Comments

First Impressions

My company recently switched (back) to WebEx for our web conferencing needs.  To begin the signup process, you complete an “email answer-back”, meaning that WebEx sends you an email which verifies that you have access to your email account.

The first step is to assign you a password.

There are a few things that have me concerned:

  1. The new password is displayed on my screen, “in the clear”.  Rather than assigning me a made-up password, how about allowing me to change the password right now?  Certainly WebEx doesn’t expect me to remember this randomly generated password.  If the next reasonable step is to change it, allow me to do that right from this screen rather than require me to search through the WebEx plug-ins or website.
  2. The password is so complex, I have to write it down.
  3. There’s no indication that I’m able to change it, and quite the contrary – a strongly worded message instructing me to remember it.  I darn well better write it down! (I took a screenshot – it was easier than writing)

I’d prefer not to write it down (I don’t have to write down any other passwords – why start now?).  My first order of business will be to figure out how to change my password.

Before getting started, I’ll quickly peruse the receipt WebEx sent out:

I have a dream… That one day, WebEx will refrain from displaying my password.  At this point, I’m assuming the worst WebEx is doing is storing my password in the clear in their own internal databases, though with their propensity to flaunt my secrets willy-nilly, let’s just assume they have a monthly newsletter containing the passwords for all new accounts, distributed to local newspapers and radio stations.

Well, I’m going to give WebEx a piece of my mind.  By sending a carefully crafted letter to customer service, I hope to achieve real results!

WebEx, digging deep into their bag of tricks, surprises me yet again!

Not only is WebEx putting my password in Christmas cards to all of their customers, they don’t want to hear about what I think of such things.

WebEx, you’ve won.  I’ve given up.  I’m walking away, with my tail between my legs.  I’m quietly changing my password and moving on.

Well, not before WebEx sends me a few parting shots.

Is the password “invalid”?  Or does it not meet WebEx’s security requirements?  More than one “letters”?  More than one “numbers”?  With examples of what letters and numbers are?  The “host name” is an “easy-to-guess characters”?

To be clear, I’m not picking on the individual responsible for this dialog and error message, I’m picking on WebEx for choosing to assign work in a sensitive area (enforcement and communication of password strength requirements) to a non-native speaker.

How about something like this?

Here is a dialog:

  • That does the work of both dialogs above.
  • Indicates which of the criteria have been met (although I should incorporate display of the company and host names just so you’re sure).
  • Allows you to proceed while alerting you to your password strength.

Taking this further:

  • Distinguish between “required” and “optional” criteria (perhaps with horizontal rule and some labeling).
  • Indicate password strength along a spectrum or use of grading.  “Your password is of MEDIUM strength.”

If your password requirements are too stringent, people have to change the way they work with your system, and that’s never a good thing.

Stepping back, if WebEx were to run a survey on their brand after the first 15 minutes, what do you think the results would be?

  • “insecure” – passwords in the clear both in the browser and via email
  • “sloppy” – customer service email address incorrect, confusing wording/grammar in the password dialogs
  • “annoying” – requiring me to remember difficult passwords, not immediately apparent how to change them, excessive password requirements (if it’s stronger than my bank and doesn’t have my money, it’s excessive)

What baffles me about all of this is that this process is undertaken by all of WebEx’s users.  Anyone hosting a conference signs up for an account like this.  The password requirements are so strict that a majority of them will experience at least one, if not both password error dialogs.

After recently finishing The Designful Company and going through the WebEx provisioning process, you realize that it’s not just the product itself…  We’re a world away from the WebEx conferencing software (which works quite well) though we’re still solidly in the realm of an experience that would benefit greatly from design.

18 February 2009 ~ 0 Comments

109 / 68

At a checkup for a small break on my left index finger…

“Is your blood pressure always this low?”

I’m not sure, maybe I have a case of the Spanish Handouts?

02 January 2009 ~ 0 Comments

Serving SVGs with Ruby on Rails

I’ve been working with Rally’s Ruby API intermittently over the last several weeks, as part of a side project to create some alternative visualizations of SCRUM release progress.  I’ve just now finished gathering the data from Rally and am moving on to creating the charts.

My options are Google’s Chart API (or another hosted graph creator) or to install one of the more popular Ruby gems (Gruff Graphs or Scruffy) though this doesn’t appeal to me as they both require ImageMagick and I want to minimize platform dependency down to native Ruby.

After some recent experience with SVG at the office, it ocurred to me that having a designer make a nice looking chart in Adobe Ilustrator and exporting it to SVG would be pretty slick.  You start with a hardcoded chart as your template, insert some dynamism and you’re all set.  Though it looks like the SVG exporter is still using a DOCTYPE and this is no longer recommended; an easy fix though since it’s all XML (ta-da!).  This assumes your browser supports SVG (FF3, Safari 3, Opera, not IE7).  Fortunately my project is internally focused, so requiring an alternative browser is acceptable.  A luxury, I know ;-)

Thus began a small adventure into just about every Rails nook and cranny, so save yourself some time and learn from it!

30 December 2008 ~ 0 Comments

The Good, The Bad and The ?

There are (fortunately!) many examples of modeless feedback these days, and I’d like to take an opportunity to briefly highlight two of them.

THE GOOD

Amazon.com’s new modeless indicator of shopping cart content!  The button you click to access your cart changes to reflect the number of items you’ve added.

Note the placement of the number ‘inside’ the cart.  Terrific.

The icing on the cake: a mouseover displaying the contents of your cart!

If anyone is interested, that D3X is on my wish list, so feel free ;-)

THE BAD

Well, bad modeless feedback is akin to bad pizza – it’s tough to get it so wrong as to be detrimental.  Hey, at least it’s modeless :-)

THE ?

Ever notice that Gmail will display the name of the next off-screen responder in your conversation?  It’s here:

And a close up:

Is it the next off-screen person in the conversation?  Or the next person that isn’t me?  It’s puzzling enough that I’ve never bothered to understand its utility, though scrolling through a long conversation, it’s a bit distracting to see the color and value change frequently.

What exactly does it mean and how would it change my behaviour?  Would the contents of this mouseover ever prompt me to scroll or stop scrolling?

?

28 December 2008 ~ 2 Comments

Guitar Hero World Tour: 4, Rock Band 2: 0

The scene at my local Best Buy customer service counter, the day after Christmas:

What you don’t seen is the woman in line behind me, also with a set to return.  I would suggest holding off on Guitar Hero World Tour.  Alternatively, pick up a copy of Rock Band 2 like I did after returning mine! :-)

(mine’s the one on the far left)

UPDATE: There appears to be an issue with the placement of the sensors on the cymbals that you can fix with a combination of the RedOctane GHWT Drum Tuning Kit and perhaps a manual relocation of the sensor inside the pad.  I’m pretty sure the price of the full kit just dropped from $189 to $159.

28 December 2008 ~ 8 Comments

Irony

As stackoverflow grows in popularity, I’m seeing it as frequently as Yahoo! Answers when asking technical questions.  Doing a bit of Rails lately, there I found the answer to my question-of-the-moment.  Stackoverflow is about us helping one another, so I had a look at the front page to see if I could return the favor, when I noticed this question:

There are some great examples in there, tinged with frustration – the same motivator that is responsible for this blog.  I pointed the OP towards this site, as I have about a years worth of gripes saved up :-)  Before posting, I noticed that it’s possible to get credit for responding.  In order for me to login (to get credit), I have to choose an OpenID provider.  OpenID?  What’s that?

From OpenID.net, “What is OpenID?”

OpenID lowers user frustration by letting users have control of their login.

Less frustration?  More control?  Let the healing begin!

Here we are at the OpenID login prompt.

I’m not quite sure what to enter in this field, though I do know how to use a drop-down.  Let’s see what happens.  Note though, that I’m interacting with the components in reverse order, using the drop-down to fill (or understand) the contents of the login field.

I have Yahoo!, Google, Technorati, Flickr and Blogger accounts and maybe an AOL account from 10 years ago.  Which of these is the right choice?  What are the ramifications?  My Google and Yahoo! addresses contain a lot of personal information; will it be visible on the site if I choose it?  Will stackoverflow have access to my personal information?  I choose Google (for no reason really) while feeling a sense of empowerment and control like never before.

Next, the “login field” appears as below:

Is this correct?  Or a bug?  What does this mean?  Should I replace this with my Gmail address?

The only two things I know about OpenID so far:

  • I should feel like I just landed on the moon having ridden a rainbow of non-frustration.
  • The administrator at stackoverflow knows that “OpenID is awesome” and that it belongs with at least one person.

That posting at uservoice (a request to not require OpenID) has many comments: should stackoverflow be using OpenID?  Will it limit site adoption?  My guess is that it would have many more comments though it was declined as a feature request and cannot be voted on.  Understandably so, as OpenID is quite contentious.

Jeff Atwood, author of codinghorror and the founder of stackoverflow has this to say:

…which means the real question is not whether or not stackoverflow should be using OpenID.  It is this:

How can stackoverflow increase satisfaction with its OpenID implementation, such that the purported benefits of less frustration and more control are realized?

One would start by learning from others, such as Yahoo’s OpenID Best Practices:

Promote the utility, not the technology. To reach the majority of users who aren’t familiar with OpenID as a technology, promote the ability to log in using an existing account, not “OpenID” itself.

Or even uservoice.com.  In order to login and reply at uservoice, Jeff would have had to go through their OpenID sign-in process:

An OpenID login process, with no mention of OpenID.  Clicking on “Google” sent me over to Google and voila!  I’m logged in, all the while completely unaware of OpenID and its empowering effects.

Stackoverflow gets a lot of things right.  The site is responsive, the UI is slick, sharp and minimalist and if you get as much of your technical help from message boards and blog posts as I do, you’ve got to love the idea behind it.

What Jeff should keep in mind is that if he’s going to evangelize, he’s got to do more than the bare minimum.  Simply stating your opinion and creating an implementation-model UI isn’t going to win him any OpenID converts.  In fact, quite the opposite – provably so from the momentum of the aforementioned uservoice posting before it was locked.

I do hope stackoverflow nails their OpenID flow, at least for my sake because I’d love to get credit for my responses ;-)