So I’ve been trying out a bunch of things that have been better or worse for me, but this post isn’t about them.  It’s about the curious lack of OS-level integration of Windows Sky Drive and the complete failure of the service to live up to its totally awesome potential.

Sky Drive is a Windows Live service that offers 25gb of storage for free.  It’s marketed as a number of things, one of which is “online storage that you can access from any computer,” which will synchronize with their various programs like Office and whatever the photo program is called these days.  Now I don’t actually use any of those programs, so I haven’t tried that particular syncing method, but I do use Windows and this seems like an obvious way for Microsoft to attempt to integrate cloud services into the operating system.  And Windows Live already prompts you to download a piece of software called Windows Live Essentials, that seems like a great place to put a shell extention that would do that.

Perhaps my imagination went a little wild at this point, having been disappointed by several backup solutions already, but I thought “Surely Microsoft could do it right!  This is the area they’ve been trying so hard to get into, and there is such obvious potential here that even they could see it!”  I expected something awesome–after all, they wrote the operating system, they ought to be able to integrate with it well, perhaps in ways other programs can’t.  I expected to be able to right click on a file or folder and get a “add to Windows Sky Drive” option.   This would of course sync my files automatically whenever I changed them.  I expected a  “Restore my files from Windows Sky Drive” utility for when my files got lost in a horrible hard drive incident.  I expected something simple enough for an elderly technophobe to use.  I tell you, friends, I was disappointed.

There were no Sky Drive utilities in the largely-useless Windows Live Essentials package.  As far as I can tell, Microsoft makes no such thing.  What you get, unless you are using their Office integration or their Photo sharing, is a webpage with 5 file upload boxes on it.  You are expected to fill up those 25gb 5 files at a time, selected individually, each no more than 50mb.  Wow.

The Sky Drive upload form with its 5 upload dialogs

Convinced that this could not possibly be right, that there must be some way to back things up to Sky Drive more easily, I started searching.  The very best solution I found involved not just one but two third party programs, the first of which gave me the worst End User License Agreement dialog I’ve ever seen:

A dialog inviting you to view the EULA on a webpage with a non-clickable, non-selectable url

Now I know no one reads these things anyway, but they’re not even trying here.  You have to go to a web page to view it, and that’s not even a link.  In fact, it’s not selectable, either, so you can’t even copy and paste.

Incidently, it is possible to get automated backups working with Gladinet alone, without the second program.  This still isn’t as good as I originally envisioned, but I suppose it will do until something better comes along.

Most of the code in there is stuff I find myself writing over and over again every time I work with dates in javascript, just bound together into one nice function.  If you think you would find it useful, too, go check out jsdate.

Edit:

I made some changes to one of the functions, and I found an error that had been preventing the minified version of the file from working.  So those should be better now.

The show was about genetics and mutations in the human genome.  That’s a really complicated subject, but the show did a very good job in presenting it in laymen’s terms.  One could just as easily become confused and frustrated and give up on the show entirely, just as one could on a website, but the content and graphics were very carefully designed to break everything down and to make the viewer believe that they have the ability to understand, and to take pride in that ability.

When I was in 9th grade, my teacher said that authors, especially mystery and suspense authors, liked to write so their audience was just a little bit ahead of the characters in figuring out what was going on.  That way they would get a little ego boost that they were smart enough to figure it out and feel good about continuing to read the book.  I think the genetics program provided similar little ego boosts throughout the program to keep the interest of people who otherwise might not think they could understand the subject.

I’d like to talk about one animation in particular, and it’s a pity I didn’t manage to find a clip of it, but little text diagrams will do.  Several times the show talked about the genetic changes that appear between the genomes of people with a genetic disease and without or between chimps and other animals and humans.  Now, genes can be represented as a series of the letters A, T, C and G, and while the voice-over was talking about the changes the program showed the sequence of letters from one gene and from the other gene with the differences highlighted in red.  Then it would show just the changed letters all by themselves, isolated from the rest of the gene.  So you might (if you’ll pardon my completely making the sequence up) see something like this:

AATGCGAAT

AATGTGCAT

↓

TC

I’m not a geneticist, but I’m pretty sure that the TC there all by itself doesn’t really mean anything isolated from the rest of the gene.  All it’s really communicating there is the amount of change that happened, but it maintains the original sort of “techy” look.  This was especially interesting when they were talking about two sets of changes—the differences in a particular gene between a chicken and a chimpanzee and between a chimpanzee and a human.  There were very few changes between the chicken and the chimpanzee, but a lot between the chimpanzee and the human, so the red highlighted changes that they pulled out looked something like AG and CCGATTAATG.  They could have communicated the difference simply with lines of different lengths (|–| and |———-|), but by keeping in the original letters it sort of feels like you’re understanding something more complex than just “this change is more dramatic than this change.”  And if you feel like you’ve understood one complex thing, you’ll have more confidence that you’ll understand other things the show might tell you as well, and feel good about yourself for understanding.

I wrote before that technical looking things should be avoided, but in this case it’s actually a benefit.  However, what it’s actually communicating is quite simple, and by that point in the program the viewer already has a fair amount of confidence from other animations and explanations that the program will break all the technical things down to an understandable level, so it’s not going to scare people off immediately when they see it.  So it is a very interesting method of building a user’s confidence in themselves, but I wouldn’t use it without earning the user’s trust first that you won’t throw them things they can’t handle.

So now I’m thinking about other ways to make a user feel proud and empowered for having understood something, and other classic narrative conventions that can be used to build engagement and trust.  If you have other examples like this, I’d appreciate it if you’d mention it in the comments

Edit: Fixed!  It turned out that the plugin I installed to produce pdf files for things like my resume was converting all utf-8 characters on all the generated html pages, too, not just the generated pdfs.  *sigh*  Well, I won’t be using that one.

But I’ve been looking around and I can’t find anything of the sort for aural web design, other than that you should use those properties to make your designs less terrible for people on screen readers.    You might be able to adapt from radio guidelines, if such things exist, but it doesn’t look like anyone has yet.

Am I wrong?  I’m sure there are some conventions shared between screen readers for default aural stylesheets the way that visual browsers do, but I admit I haven’t spent much time with screen readers.  And I’m sure some improvements you could come up with off-hand, like adding a pause before and after headings, which I suspect is one of the screen readers’ defaults.  But some things don’t have direct analogues to visual styles–what does a hyperlink sound like?  How about when you hover over it?  And according to Professor Bruce Walker in an Intro to HCI course I took a couple years ago, there are some things that the blind and the sighted just conceive of differently, like high vs low pitch to mean something large.

I’ve never attempted to design an aural stylesheet, but I’m genuinely curious now and probably will.  If you know of a style guide (or several), please let me know in the comments!

Mom: “There were all these numbers and letters I had to type in the email, and I wrote them down but it didn’t work.”

Me: “You know, you can get the computer to copy that for you and tell it to stick it into the other window.”

Mom: “You can?  I didn’t know that.”

Me: “Yeah, it’s really handy, I’ll show you.”

Mom: “Oh, but I’ll never remember how to do that.”

Copying and pasting isn’t hard, and it’s definitely not beyond her ability to learn or remember.  She knows all sorts of stuff that’s a lot more technical than that, but she decided before I even told her how to do it that it was too hard for her.  I think the problem is akin to learned helplessness–it’s not that she can’t learn to do it herself or that she can’t remember, but that she believes that any effort on her part is useless, she’ll never be smart enough to learn to use this computer thing.

The interesting thing is that she knows more than she thinks she does, she can figure some things out on her own.  She had already managed to send herself a password reset email, but was helpless to find the link or even navigate her mail client (which was one I’d never used before) without my help the moment I was looking over her shoulder.  In retrospect, it seems sort of defensive–getting my help on things she could probably do to prevent real criticism when she makes a real mistake, or in other words, pretending to be stupid so I don’t think her actual ability is stupid.  The upshot is that even if you could get someone like her into a usability study (protesting all the while that you couldn’t possibly want her, she doesn’t know anything about computers!) you probably wouldn’t ever get real behavior.

So how do you design for someone who doesn’t believe they’re smart enough to use your system?  The trick is adding a sense of empowerment and taking out the disempowering elements (without disempowering more skilled users), but what does that mean?  I don’t really know the answer to that, but it’s an interesting lens through which to try to view a design.  Let’s take a look at the Facebook password reset process.  I’m not picking on Facebook, here, it’s just what Mom happened to need help with but it could be any website.

Step 1: Sending the password reset email

Facebook's password reset form

The page you get to when you click on the “forgot your password” link is pretty cluttered.  What do you look at first here?  As someone experienced with the web, I know a captcha when I see one and I know what it’s used for, but it’s the biggest, boldest thing on the page and it doesn’t make any sense.  It looks techy, as my mom would put it.  Sure, it prevents robots from resetting people’s passwords for them, but there are other ways to do that.

If you must use a captcha, there are better ways to present them, ways that don’t detract from the two things that actually matter on this page–the description that says enter your email address to get a reset link and the field where you enter your email address, now currently separated by the big block of nonsense.  Hiding the captcha until after the critical text is entered and then displaying it with an animated transition and friendly explanatory text that this is here to stop the naughty robots would be a good move, too.

Most users will figure out what to do here from having seen this sort of process elsewhere before, but for someone who doesn’t know the pattern you should emphasize the one simple thing they need to do here.  All we need is your email address and maybe a few nonsense words.  There, wasn’t that easy?  Let’s move on to the next step.

Steps 2 & 3: The password reset confirmation page and the email

The Facebook password reset confirmation page

The password reset email

After you submit the password reset page, you get a confirmation page telling you that an email has been sent and asking you to enter a code from the email into the box.  Honestly, I think you could remove almost all the text from this page without losing anything–the wall of text is intimidating and unnecessary.  The thing that matters is that you should go check your email.  Users who are still having trouble can click to open up suggestions.

Mom was confused by the confirmation code thing, and really I can’t see why it exists.  It’s completely redundant with the link that is also sent in the email.  It’s easier for anyone to click on the link (how many email clients don’t support them these days?), and just as easy to copy and paste for those users who now how.  Mom doesn’t know how to copy and paste text, and she was confused about what to use as the code, anyway, and whether she still needed it when she clicked the link, but she knows exactly what to do with a link if you just tell her to click it and nothing else.  The link is simple enough to understand.  The code adds “techy” stuff that has to be written down and remembered, and I really don’t see the benefit of providing multiple redundant methods of setting a password.

Step 4: Changing the password

The password reset page

Mom liked this page.  She approved of the “Passwords match” checker telling her that she got it right before she submitted the form.  She didn’t understand the password strength thing, and I don’t think she even noticed the question mark next to the field, which just looks like a question mark, not a link or other item that could be acted on.  I told her to ignore the strength meter, no one is going to try to steal her facebook account and remembering a harder password for someone who is already concerned about remembering technical things is not worth the effort.  (I also told her it’s ok to write it down and stick it on the monitor.)  I have no idea how to incorporate that into a design heuristic–explaining the password strength would incorporate dire warnings about stolen accounts, but how do you know when it’s better to ignore the advice?

Conclusions, such as they are

I don’t really have any ground-breaking conclusions to draw from this, mostly it’s an interesting thought experiment.  Anything I can say is just good design advice:

• remove all unnecessary content (this includes alternative methods of doing something, except perhaps on pages meant for experts)
• emphasize the important things (happens naturally if you remove unnecessary things)
• don’t separate items that need acting on from their explanations
• remove jargon and other techy sounding things when they aren’t necessary
• when techy things like captchas are necessary, make them friendly and non-threatening, and hide them until necessary
• “?” doesn’t make a good help icon unless you make it look like a button
• feedback as you progress is a good thing
• advice you give to some users will be bad for others

I’ll be using this space to discuss usability, accessibility, sociability, and perhaps other things that end in “ity”.  I’ve got a few ideas for things to write about, but I’ve never really blogged before, so we’ll see if I ever get around to writing them.  For now, I’ll leave you with my favorite error message of all time: