Archive for the ‘User Interface Design’ Category

A first step towards accessibility

I’ve admittedly never thought much accessibility when it come to web development. While I’ve come across efforts to increase awareness of accessibility needs from time to time, such efforts never speak to actionable items that can be taken by developers.

Take for example the recent article Designing for Everyone, in UX Magazine, from which my only takeaway was a need to be aware of the accessibility needs of your audience. In theory that sounds great, but such information is not trivial to gather, you can’t simply open up Google Analytics and find out what percentage of your user base has limited motor skills. For individuals and smaller companies, I can’t see where the time or money would come from to do such user studies.

So I was pleasantly surprised when I came across the post Accessibility and web developers on Paul Irish’s blog, and saw the following:

During a Nicholas Zakas & Victor Tsaran talk years ago I finally grokked the easiest rule for a first step towards accessibility. For such a long time, we conflated functionality while JavaScript-disabled with “being accessible”. It took me years to learn that making it keyboard-navigable was the top priority.

This is personally eye-opening for me but also, from a developer’s perspective, it’s a task that can be readily tackled.

SmallChange and LargeChange properties of scrollbars

These properties apply to scrollbar controls in WinForms, but the concepts are pretty universal:

  • SmallChange is the change in value that occurs when you click on a scrollbar’s arrows
  • LargeChange is the change in value that occurs when you click on a scrollbar’s track
  • I had some vague ideas on how to set these values, but this MSDN entry confirmed by suspicions that the values should be set relative to size of the container and not the size of the content.

    User interface guidelines suggest that the SmallChange and LargeChange properties are set relative to the size of the view that the user sees, not to the total size including the unseen part. For example, if you have a picture box with scroll bars displaying a large image, the SmallChange and LargeChange properties should be set relative to the size of the picture box, not to the size of the image.

Making better progress bars

An interesting study I came across a while back, regarding changing the animation of progress bars to alter users’ perception of how long an activity (e.g. a file download) takes to complete. By just changing the animation of the progress bar, an activity can seem 10% faster to users.

… Harrison’s group generated a series of animated progress bars: some pulsated between pale and dark blue at varying speeds, and others had pale blue ripples moving either left or right, also at different rates, as the bar crept forward (see video).

Many participants said that progress bars which pulsated increasingly quickly made the download time seem shorter than those that pulsated increasingly slowly.

A significant number also said downloads were faster when ripples in the progress bars moved to the left rather than to the right.

Note the key phrase, increasingly quickly; the pulsating of the progress bar has to accelerate.

In terms of the ripples, it seems they need to accelerate (I’m assuming, the article wasn’t specific on this point) or decelerate as well. Constant velocity ripples (such as those in OS X progress bars) actually result in a negative effect:

Apple uses left-moving ripples that travel at a constant velocity for progress bars in Mac OS X. However, many of the volunteers in Harrison’s study said that this type of animation appeared slower than one in which the left-moving ripples slowed down as the download neared completion.

Icons and labels

I was reading Ars Technica’s first look at Windows 7’s UI and one thing in particular stood out for me, the fact that text descriptions for buttons on the taskbar will be going away.

windows 7 taskbar

Text descriptions on the buttons are gone, in favor of big icons.

There are still text descriptions, but they appear over thumbnails that show up when you mouse over one of the taskbar icons.

windows 7 taskbar thumbnails

There’s a big dependence on iconography here. There was a very small bit of this in Vista, as the Start button was replaced with the Windows logo, but these changes are a much greater shift towards favoring icons over icons+text in the UI. Unfortunately, a potential issue I see here is that unless a user recognizes an application’s icon instantly, they’re now forced to mouse over all the taskbar icons unknown to them in order to find the app or window they’re looking for. This may, however, be a non-issue as the taskbar may typically just be filled with application icons familiar to the user, so cases of scanning over unknown icons in the taskbar will be rare. Whether this is a success or not remains to be seen, but the reason this caught my attention was because of something I read a long time ago on the importance of labels, written by a program manager on the MS Office User Experience team,

One of the problems noticed again and again among non-expert users was that people didn’t use the toolbar at all! … people used the menus to reply, forward, and to create new messages.

… one change caused a total turnaround: labeling the important toolbar buttons. Almost immediately, the toolbars were a big hit and everyone at all skill levels starting using them.

It’s not that icons can’t work by themselves, but that most people have a fairly limited vocabulary. Floppy disk = save. Printer = print. …

… considering that I already know how to speak English; it’s a lot of work to learn how to speak “Iconese” on top of that.

What’s particularly interesting is that the icons being talked about aren’t particularly exotic (reply, forward, send, etc. in Outlook), and toolbar icons are perhaps as common as taskbar icons.

Finally, developers will understand this, what happens if you have 2 applications with the same icon? I don’t expect this to be a major concern, but still, I have a bunch of apps I’ve written with just the default application icon, these changes to the taskbar will certainly make switching between them more difficult.

The Initial User Experience: Dashboard vs. Yahoo! Widgets

I recently got a Mac Mini and begun playing around in OS X. One of the first things I stumbled upon is Dashboard, which brings up an overlay displaying widgets, small apps that display things like weather, time, calendar, etc. I thought this was incredibly cool (especially because of the weather widget, as I hate going to weather.com and having to type in my zip code every time I want to know what’s happening outside). As a feature it’s very well designed; it looks great, it’s easy to get to, it didn’t pollute my desktop in any way, the information was useful and informative, and in less than a minute I implicitly understood how it worked.

I figured there must be something similar for Windows, if not I was even thinking it might be a fun project to make something similar. I did try Google Desktop a while back, but the experience was not the same, and was definitely not pleasant. I didn’t like that it was essentially a panel (a large one at that) pasted into a corner of my desktop. I like my desktop. I want my stuff on it. I don’t want to cede the real estate to a third-party. In the end, I uninstalled Google Desktop, and was left with an overall negative impression of the product. I haven’t used Vista as much, but the Vista sidebar seems to make the same mistake.

After some searching I found Yahoo! Widgets. It seemed perfect. However, after I installed it, I was disappointed, it looked cool, but it didn’t seem to function like Dashboard at all. After some twiddling I did finally massage it into working akin to Dashboard; however, I been less patient or not as tech savy, I would have quickly uninstalled it and deemed by discovery worthless.

So, what’s the point? The point is pretty simple (and I don’t think I’m breaking new ground here): the initial experience a user has with a piece of software is vitally important and if the developer fails to provide a positive experience to the end-user after setup, the software is a failure (users will simply uninstall it), no matter how cool the interface is, the potential productivity gain, or the hundreds of cool features. My experience with Yahoo! Widgets and Dashboard exemplify this perfectly.

So what’s wrong with Yahoo! Widgets? Technically, I don’t think anything is wrong with it. It seems stable, powerful, has nice features, and the widgets seem cool (personally, I really only cared about the weather and a calendar). However, after installation, it stuck this dock panel on my desktop along with a bunch of widgets. Now, as I already mentioned, I hate things assuming they have the right to pollute my desktop. Ownership is important. So I was not a fan of the dock nor the widgets themselves, which, unlike the dashboard widgets, didn’t fade in and out with an overlay. This was annoying. I wanted my desktop back.

So I went to preferences and found out I could press F8 to active the overlay. Great! (however, I’m going into the Preferences window to actually figure this out – why wasn’t this mentioned sooner). The overlay shows up, kinda disappointed that the taskbar isn’t covered, but I can live with that. I deactive the overlay. damn! the dock and widgets are still stuck on my desktop.

I play around in the Preference window for a while and look at the options for the dock. I discover I can get rid of the dock, that’s good, but I’m thinking this isn’t for me, and about ready to uninstall.

I continue playing around. With the overlay off, I close all the widgets. I accidentally hide one of them. I hit F8. Wait! That’s the effect I wanted! But what did I do? I realize that there are 2 options to get rid of a widget, Close and Hide. Close gets rid of the widget altogether and Hide only show the widget when the overlay is active. Why didn’t I know this, like the F8 key, this was never explained to me (remember me, the end-user, the one using the product). It’s not in the product tour, there’s no tooltip, and I certainly didn’t spot anything in the help.

I’m happy now! I customize the system to show the widgets I want and I hit F8 whenever I want to see them :)

So that’s the story. Ultimately, from my experience with both applications, I learned:

  • The desktop belongs to the user, don’t pollute it unless they allow you to. (this might be more of a personal preference than anything else)
  • Present important app-specific information ASAP and make things as intuitive as possible. Avoid having users discover features by reading documentation or going into a settings/preferences window.
  • The initial user experience is important. Don’t fuck it up.
yahoo widgets

I do realize there is a bias here as I was looking for something that functioned like Dashboard, but if the default post-setup environment for Yahoo! Widgets is how the developers see others using their application, that seems totally weird to me because it’s assuming a whole lot of users have so much free space on their desktop that they’d obviously want to stick a bunch of widgets on it. Hmm, I don’t know, maybe I’m wrong and most users do have a lot of free space on their desktop, but my desktop certainly doesn’t fit into this category, and even if it did, I’m not sure I’d want a widget on it (I like my wallpaper).