Category Archives: Accessibility

usability grades: checking the flight status on an airline

Posted on by
Reply

I’ve tried checking the flight status from a mobile device for a number of different airlines this year.  Both flights I was taking to check they are leaving on time and for flights arriving with friends/family.  I then tried a few others for the purposes of this blog entry.  Care to guess which of these airlines inspired the blog entry?

Remember the goal is simple:
Check when a flight is departing or arriving given two airport codes for the current date.

Alaska Airlines – alaskaair.com
Steps:

  1. Click flight status
  2. Defaults to today, but the only option is flight number.  Click “lookup” to get the flight number
  3. Enter the two city codes.  One of mine was SAN (San Diego).
  4. Alaska comes back with a list of cities beginning with “san”.  The first is San Antonio. Um no. I meant San Diego which has the airport code I typed in.
  5. Then I have to pick month/day/year from drop downs. No shortcut for today?  No inference of the year?
  6. After all that work, Alaska shows Shows me the scheduled times of the flight.  I now have to remember the number and retype it on the flight status page

Grade: C.  This was a tremendous amount of work to get the answer. They did have a mobile view and each page loaded fast though some were 24KB – quite large for a mobile view.

American Airlines – aa.com
Steps:

  1. Wow there’s a lot of choices here.  I think the one I need is “Gates and times/wifi”.
  2. Enter codes with option to look them up.  Assumes we are talking about today.
  3. Lists departure and arrival times

Grade: B.  The double take at all the options wasn’t obvious, but possible to figure out.  Everyone else calls it “flight status” American.  Why can’t you?

Continental – continental.com
Steps:

  1. Click flight status
  2. Click “don’t know flight number”
  3. Enter two cities, assumes today
  4. Shows list of all scheduled flights.
  5. Click the one you want and shows departure arrival times.

Grade: A. Lots of options and easy to use

Delta – delta.com
Steps:

  1. Click flight status and updates which is conveniently the first option
  2. Enter codes with option to look them up and select the radio button for cities instead of flight number.   Assumes we are talking about today.
  3. Lists departure and arrival times

Grade: A-.  I shouldn’t have to select the radio button.  Once I type in an airport code, it’s apparent that is the option I want.  Presenting me with the screen with an error that I didn’t enter a flight number is less friendly than it could be.

JetBlue – jetblue.com
Steps:

  1. Click Flight Status
  2. Select departure and arrival cities from a drop down menu.  I suppose this is easier than expecting people to know/lookup the code, but it took me a couple tries to select the correct entry from the drop down.  Defaults to today.
  3. Lists departure and arrival times

Grade: B+. I have to subtract for the drop down.  It assumes extra and unnecessary dexterity.

Southwest – southwest.com
Steps:

  1. Click flight status
  2. Choose cities from the same style pulldowns I didn’t like on JetBlue
  3. Lists departure and arrival times

Grade: B+. Same reason as JetBlue.

United – united.com
Steps:

  1. Click flight status
  2. Assumes talking about today.  Enter codes with option to look them up.
  3. Lists departure and arrival times

Grade: A. No unnecessary obstacles.

    Conclusion
    Quite the range in usability here.  I was happy to see that Alaska was by far the worst.  They prompted this blog post after all.

    “head first” style aria

    Posted on by
    3

    I attempted to give a Head First style speech at the Toastmasters humorous speech competition. As a moderator at JavaRanch, it seemed fitting to put a transcript of one iteration online. While it changes a bit each time I give it, this is the idea.. Shown here with a bit of organization.

    This was given to a largely non-technical audience.   For the more technical readers here, ARIA actually has four levels: off, polite, assertive and rude.  This article on ARIA is an excellent read.  My audience tells me the concepts were memorable and the speech was funny.  So I guess I accomplished my goal.  I did win at my club and get to go on to the next level.  Which gives me the chance to give this speech in front of people I don’t know.

    You no longer have to imagine the sock puppets :).  I had two – one for the browser and one (with glasses) for the screenreader.
    screenreader puppet

    Anyway, here we go:

    Introduction
    Me: When you think of technology, do you think of humor?  I do.  My goal is to teach you about a technical topic called ARIA – Accessible Rich Internet Applications.  Boring?  Just you wait.  I brought sock puppets.

    Welcome the characters
    Me: We all know what a browser is.  We use it every day to browse the web.  I’ll let you imagine that this sock puppet is IE 7.  You may not know what a screenreader is.  Imagine you can’t see the screen.  What does our browser friend here look like?  Well, the screenreader reads the words in the browser to you.  The glasses remind us of reading so it will be easy to remember that this guy is the screenreader.  Lets listen in on how things worked up until now.

    Scenario 1 – Before ARIA
    Browser: I’m IE 7.  Who are you?
    Screenreader: I’m a screenreader product called Jaws.
    Browser: Ah!  A shark!  And I can’t see my users!  A shark ate my users!
    Screenreader: Stop being so dramatic.  Your user is write here – safe and sound.  I help your user.
    Browser: My user is just find without your help.
    Screenreader: Want to be IE 7?  Watch what happens when a blind or vision impaired users tries to fill out a form without a standard called ARIA.
    Browser: I’ll set the scene.  It was a dark and stormy night.
    Screenreader: Get on with it.  I can’t read to the user until you get around to rendering the page.
    Browser: Fine.  Here’s your page.
    Screenreader: Ok.  User? I’ve got some questions on a form for you.  <hum as they go back and forth>
    Browser: Uh oh.  The user entered a bad country.  I know because I checked with the website while the user was filling out the form.  I know!  I’ll put a big red message on the screen.  Surely the user will see that.
    Screenreader: <back to humming>.  Submit.  My masterpiece.  All done now – time for a nap.
    Browser: Wait a minute!  The country is still invalid.  Jaws – can sharks swim with their eyes close?  You’re falling asleep on the job.  I told you there was a message.
    Screenreader: Did not!  You place a secret message and didn’t tell me it was there.  That’s like putting a note in a dictionary in a basement in Europe and claiming I should have seen it.
    Browser/ Screenreader: Did not!  Did too!  Did not!  Did too!

    Me: All right guys. Break it up.  Luckily this is a thing of the past.  Let’s upgrade to IE 8 and see how it looks now.  Ready IE 8?

    Scenario 2 – Urgent Message with ARIA
    Browser: Yes!  I’m all bright, shiny, new and upgraded.  My father was IE 7.  Parents are so backwards!  I’ll set the scene.  It was a dark and stormy night.
    Screenreader: Just like you father.  Get on with it.
    Browser: Where’s the fire?  Here’s your page.
    Screenreader: <hum to user while fill out form>
    Browser:  Uh oh.  The website says we can’t ship a book to North Korea.  I know!  I’ll set the rude ARIA property to tell the user.
    Screenreader: I see the rube property is set.  The sky is falling!  The sky is falling!  I must tell the king, I mean the user.  User – Abort!  Abort! Urgent message – no books can go to North Korea.
    Screenreader: Browser, that was a close one.  But we save the day – and the user – thanks to ARIA.  Remember what that stands for?
    Browser: Yeah.  Accessible rich internet applications.  Accessible.  That would be you screenreader – reading to the user.  Internet Application.  That’s a website where we can fill out forms.  And rich.  That must mean the website has a pot o’gold.
    Screenreader: Not quite.  Rich means dynamic and interactive.  Like gmail.  You can do things without reloading the whole page.

    Interlude
    Me: As you can see, IE 8 support is much better than IE 7.  But does this mean we have to interrupt the user for ever little thing.  Seems distracting.  T-O-P- Wait!  I have something unimportant to tell you. !  Let’s watch.  Browser?

    Scenario 3 – Informational Message with ARIA
    Browser: I’ll set the scene.  It was a dark and stormy night.
    Screenreader:Oh for crying out loud!  Can’t we skip that prt?
    Browser: Fine.  Here’s your page already.
    Screenreader: <hum while fill out form>
    Browser: Hmm.  The website says that city and zip code don’t match.  Probably a typo, but I should tell the user.  I’ll set the polite ARIA property.
    Screenreader: Interesting.  I see the polite property has a message.  I’ll wait for a good time to tell the user.  <hum more>.  Perfect.  User, while you are between fields, can you check this?  Oh, it’s wrong?  I see.  Good, we get to fix our mistake.
    Browser: That was nice and polite of you.

    Conclusion
    You came to hear  a funny speech.  You learned what ARIA – accessible rich internet applications are all about.  Without even feeling like you were learning.  My motivation for doing this was the Head First series of books which often teaches through humor, dialog and personification.  Remember ARIA may be rude or polite, but always helpful.  Just like Head First.

    [edited to add sock puppet picture]

    javaranch – the web based pick winners program

    Posted on by
    Reply

    JavaRanch uses a Java program to pick the weekly winners for book promotions.  It previously used a serious of classes that went the URLs, parsed the data, went to more URLs, picked some random winners and then output them to a file.  These contortions were done because the old software was hard to change.  With the new Java based software, we have much more active development.  Time for a new approach.

    Designing the new pick winners program.  (It’s the 3rd iteration of the program and the 2nd I’ve done so I’m familiar with the domain.)

    1. Decide to make a web based version (servlet)
    2. Think about what I need from the database.
    3. Write three DAO methods to get post, topic and user info.  While I wrote the integration tests first, I did write the unit tests after the code.
    4. Start the pick winner class  Realize there is a lot of date validation logic (and determining the default week) and rename class to WinnerPickingWeek to encapsulate the date range.
    5. Start the pick winner class again.  Call the three DAO methods tying them together.
    6. Now add the randomness.  My test with 1 post will give me enough determinism to keep the tests passing and useful.
    7. Added a test for excluding ineligible winners (like Henry and I – the winner pickers)
    8. Now on to the front end.  My servlet needs to make sure you are logged in as admin and then delegate to the processing logic.

    This got a useable program that runs much faster.  After that I added some jQuery logic to make the page dynamic and even more useful.  But that’s another topic – possibly a more interesting one.  I’ll post it later in the week.