Bit-cycling : UI Design

Keyboards can be fun, too

justsean — Fri, 08 Aug 2008 12:26:00 GMT

Those who know me know that I have something of a keyboard/mouse fascination. I’ve gotten almost every interesting new keyboard and/or mouse that the company makes.

To be clear though, what I’m looking for is a better keyboard and mouse, not just a pretty one. So I avoid the purely aesthetic devices that we create, like the ones designed by Philippe Starck, and I will probably not get the new ones due this holiday.

My current keyboard of choice is the Wireless Entertainment Desktop 8000 (pictured at right). It’s a light, thin, completely wireless (rechargeable) keyboard designed for use with media center. I actually have three of these – two at work, and one at home for use with my Vista Media Center setup.

As a media center keyboard, it’s near perfect. It has a complete set of media controls, including “record” and volume controls, as well as a built-in mini-touchpad, so I almost never use the mouse itself at home – and I do browse the web quite a bit on the big TV (often to go over to hulu.com to watch episodes of shows I forgot to record, or otherwise missed).

Surprisingly though, it’s also a great keyboard for work. The best feature (and the reason I have two) is that it’s compact. Aside from being thin, it’s one of the few keyboards we make that doesn’t have a numeric keypad – something I never use. Overall, it takes up little space on my desk, allowing me to have a fairly small desk, with little space taken up by my monitor and the keyboard/mouse charger.

It’s thinness also means that the keys themselves are very similar to keyboards on laptops – i.e., very short travel, which is something I have come to like a lot for fast, light, quiet typing. The media keys are less useful than at home, but still come in handy, and I occasionally find myself use the mouse touchpad for quick things when I’m sitting back.

The major travesty of this keyboard is that ridiculous blue Vista button in the middle, which is the “win” key. It is different from the other keys on the keyboard in that it requires a pretty solid “click” to depress, which makes it difficult hit the various “Win”-key shortcuts.

Less serious, but a pet peeve: I wish manufacturers would come to agreement about the position of the “Fn” key, relative to the Ctrl and Win keys. On Lenovo keyboards, it’s “Fn-Ctrl-Win-Alt”, and on this keyboard, it’s “Ctrl-Fn-Alt”. The difference between the two makes me hit “Fn-C” to copy more often than I’d like – on both keyboards, since my fingers get used to one when I’m at home, and the other when I’m at work. Yay.

Over time, I have come to look for a series of specific things in a keyboard:

First, ergonomic is a must. I started with the full-split “Natural” keyboards, such as Natural Ergonomic Desktop 7000 (nice soft palm rest on this one). With the development of the “Comfort Curve” layout (starting with the Wireless Laser Desktop 4000 and the related 6000), I came to prefer the less drastic split – more compact, and seems to just as comfortable.

The latter two keyboards above represent another thing I look for – the design of the delete, page up/down and arrow keys. The keyboard on the left (the Desktop 6000) has the 30 year old “standard” layout, which people may be used to, but which is completely silly, since it gives legitimate space to the “Ins” key, which is used by almost no one (except to accidentally change the Insert mode in Word and wonder why it’s in overwrite mode). The design on the right, which is also more compact (a theme with me) rearranges those keys. The delete key is large and easy to hit, the page up/down keys are aligned vertically next to it, and the Home/End keys are aligned horizontally above it, which is a design that actually reflects how people use keyboards.

Of the many keyboards I’ve had, most have plenty of extra keys. In practice, I use almost none of them. The main ones I use are media keys: play/stop, next track, and volume controls (in particular, mute), so I look for keyboards with those. I never use programmable keys, though I have occasionally tried to program one to be an “lock” key, but it works so inconsistently, that I just got used to Win+L, which always works. The most useless keys tend to be connected to some particular app: the “Windows Live Call” key, the Gadget key (Win-Space works much better and consistently), the Magnifier button, the Messenger buttons. I also never use the browser buttons, since I prefer the back/forward buttons on the mouse (or I press “backspace” on the keyboard). Part of the problem with specialized buttons is that because I move from laptop to desktop, my fingers can’t get used to a consistent location.

I don’t care if they are bluetooth or not, as long as they are wireless. Rechargeable is also something I don’t care about (battery life on these things tends to be great).

On the mouse front, Microsoft has made had a great wireless mouse design for a several years, so I have a few variations of that mouse, in different colors and textures. I’m not particularly picky with mice (in fact the reason I have a few of them is that they tend to come with the keyboards) – they need to be wireless, have good weight, and have a scroll wheel, and back/forward buttons. Most of the mice Microsoft has made in the past few years meet those needs well. My current mouse is the one that came with the Desktop 8000 (pictured above).

I also have one of the nice new portable mice, Yes, that’s right, "Dragon Fruit”, beaatch.

A few years ago, I would pick up a new keyboard with every launch, looking for that something better. Most of the time they would improve something and make something else worse. But, in both the mouse and keyboard space, I’ve become pickier over time as I seen what works and what doesn’t, and I’m pretty happy with what I have now. So I don’t expect to pick up whatever the team produces for this fall, unless they produce a new variation on the WED 8000 with a less-stupid Windows key.

A lesson in branding: PC laptop manufacturers

justsean — Thu, 07 Aug 2008 22:13:00 GMT

When you look at this picture, you are overwhelmed by Apple logos. There are other laptops there, but they don’t stand out.

Apple laptops do two important things with their logo. First, it is the right way up when the lid is open. To do that, the logo has to face away from the user of the laptop when it is closed. This is not a problem because the user of the laptop is perfectly aware of who made their laptop.

Second, it is very easy to make out, even from a distance. In fact, it glows.

On my new laptop, it’s clear that Lenovo hasn’t learned the simplest of these premises. When someone is sitting at a coffee shop with their awesome new tiny laptop, everyone else in the coffee shop (or across the conference table, or classroom) should be able to read the logo on the lid.

The X300 has a tiny black-gloss-on-black-matte “lenovo” logo on it’s lid, and it faces the user (and is therefore upside down to everyone else). The ThinkPad logo (two logos!) is easier to see, but is still small and upside down. The newer Lenovo IdeaPads seem to have improved in both of these areas.

Other laptop manufacturers vary (and also vary from model to model).

The Vaio laptop (the crocodile surfaced one in the front) we got recently gets the logo direction right, but what you can’t see in this picture is that the logo itself is indented and a highly reflective silver, which means that without the right lighting or angle, it’s quite difficult to make out.

The Toshiba Tecra M4 I retired for the Lenovo had a tiny silver-on-silver logo, facing the wrong way, but their latest laptops seem to go for large noticeable logos.

The overall branding lesson is here is that laptops (especially consumer, but more and more corporate, as well) are a “statement” device – something that you want to show off. Manufacturers need to take advantage of this trend by making showoffable laptops, and taking advantage of the opportunity to increase their brand awareness. And they also need to not wait 4 or 5 years after the competition does it before finally figuring it out.

Surfing through my phone – Windows Vista and Windows Mobile

justsean — Thu, 07 Aug 2008 00:03:18 GMT

A long time ago when I worked on Windows XP, I worked on a project to add Bluetooth PAN support to Windows. At the time (March 2004), I wrote:

We also added Bluetooth Personal Area Networking (PAN) support. PAN is a Bluetooth profile that essentially creates a standard IP network over a Bluetooth connection. PAN support is the first step to enabling rich Bluetooth networking scenarios, which can be secured using the well-tested IP-based security standards (IPSec, 802.1x, etc.). Devices supporting the PAN profile are already on the market, and there should be many more in the coming year (demand it from your vendor!).

Well, it took a while (I didn’t quite demand it from my vendor), but I finally got a phone that supports Bluetooth PAN earlier this year, specifically, the HTC Hermes, or the AT&T 8525, as it’s known. It runs Windows Mobile 6.1 (I think it comes with 6.0, but I upgraded). I like this device because it has a full keyboard, as well as a touch screen, which is handy for use with the Live Search mapping software.

Windows Mobile 6 comes with an application called Internet Sharing, which enables the Internet pass-through. I’ll let you use one of the many instructional sites on the web to do it yourself. Side note: that article I linked to talks about how to use your phone as a “modem”, which is not strictly correct – there are two Bluetooth profiles, one that lets your phone look like a modem and one that makes it look like a network router. This technique sets up your phone to look like a router, which allows the full networking stack to come into play and is ultimately more efficient (plus you don’t need to dial into an ISP – you just use the phone’s Internet connection).

All of the UI I designed in Windows XP is unchanged in Windows Vista, which was nice for me, since I never used it in the real world on XP. It was clearly not an area that was invested in for Windows Vista, in part, I’m sure, due the fact that it was rarely useable at the time, since most people’s phones didn’t support it. As more and more phones start to support Bluetooth network passthrough, I expect it’ll get some cleanup and better integration into the rest of the experience.

I have to admit, I cringe a little when I look at that UI, but given the constraints I was under at the time, I’m not completely embarrassed by it. A lot of what I was doing, as the owner of the user experience, was attempting to build a usable experience on top of a technology that was overwhelmingly technical and complicated. I’m not sure I completely succeeded in this case, but I think it might have been much worse :).

Once connected, the experience using the passthrough is pretty smooth. It’s completely unnoticeable to any of the applications I use and with the AT&T 3G network (unlimited data plan required for this activity :), it’s slow, but very usable. I can surf, have Outlook sync’ing the background, and have a remote desktop connection open to a system at home without any real problems. I tend to use it at the airport or at a coffee shop when I don’t want to pay for Wi-Fi. It can suck battery life from the phone, so I try to keep usage limited unless I know I’m going somewhere where I can charge the phone – but I have gotten at least two hours out of a fully charged phone without fully draining the battery.

The more things change, the more things stay the same

justsean — Thu, 16 Aug 2007 23:22:17 GMT

Some years ago Chris Pratley, an Office GPM, wrote an interesting article that talks about some of the mid-90s competition in the word processing space from the point of view of someone working on Microsoft Word.

The thing about these comparative reviews is that they tried to evaluate the products each release as if you were a Martian - that is "objectively", as if you had no previous experience in any tool - which of course did not reflect reality. I also put "objectively" in quotes because, well, these reviews were really totally subjective and reflected the bias of the reviewers pretty strongly.

They rarely connected with real customers to see what mattered - instead they prioritized what they thought was important (for example to them "word count" was such a big deal but it is rarely used among the real user base outside of students and professional writers - we have quantitative proof of that. Naturally it turns out reviewers need it all the time, so it became one of the "critical features" of a word processor according to these reviewers). [emphasis mine]

I've always remembered last comment because it reminds me to be cautious about doing what "reviewers" say that we should do (but also the importance of sometimes pandering to reviewers because reviews do matter, to some degree).

Twelve years later, it looks like nothing has changed. From today's Walt Mossberg's Wall Street Journal article about Apple's iWork '08, under the headline Apple's iWork Package Is Elegant but Wimpy Compared With Office:

[Pages, the word processing application in iWork], still de-emphasizes some writer-friendly features. For instance, its auto-correct function is much weaker than Word's. Another example: In Word, to see how many words your document contains, you just glance at the bottom of the screen. In Pages, you must dig down into a submenu to find the answer. The command for showing invisible formatting marks also is harder to find than in Word.

I have to say, Walt disappoints me here. He usually tries to be a "man of the people" (with decent success), but he's lost sight of that with this review. Maybe word processors are always going to suffer from this problem since reviewers are almost always also journalists.

Vista DST coolness

justsean — Tue, 06 Mar 2007 18:32:00 GMT

Blah, blah, blah, Daylight Saving Time is changing... Yawn.

This, however, is very cool mini-feature in the Vista clock (click on your clock on the tray).

One thing I like about Vista is the tiny little features that add up to a great experience.

"Why Software Sucks"... Sigh.

justsean — Fri, 12 Jan 2007 08:46:00 GMT

Okay. Major disclaimer: I develop software. I've designed many a piece of UI that makes me cringe to think about it (including the most seen and irritating balloon on the face of the planet -- "Wireless Network Connection is now connected". I'll write a blog post on that one sometime soon). So, I'm biased.

That said, I read David S. Platt's blog with a deep sigh [note: looks like David's blog is down at the moment].

Of course, criticizing software UI has a long and storied history. Heck, I do it daily (it's like calisthenics for the mind). However, I have to sigh deeply when I read this kind of surface criticism of things that are way more complex than they appear (I have an old post on this topic, so I won't repeat it).

It's not that I disagree with his points, and I'll put aside the fact that he has a book and a series of classes to sell (I'm sure they're great, and he seems to do a bang up job of teaching people how to code). It's just that these are easy shots and aren't really moving the needle forward on software design. It's a little like beating up on a team that's losing by saying "well, it's because they didn't score any goals. They need to do more of that. And they allowed that other team to score on them. They need to stop doing that." No kidding.

Lesson time, kids:It's really easy to criticize, harder to do a good job in real life.

Here's an example: David's blog has two little links on the right hand side his blog with the words "RSS" and "Atom" (screenshot included below for the lazy).

Aside from the obvious point that using these two highly-technical terms with zero explanation is a bad idea, I'd point out that from an end-user's perspective, these two technologies are completely identical.

So, when a user wants to subscribe to a feed on David's blog (which is what those links are for), David's forcing them to make a choice when it really doesn't matter which one they choose.

Any good UI designer knows that when presented with a choice, many users will just bail out. So why make them choose? Just pick one format, label the link appropriately (like "Subscribe to a feed of this blog"), and ignore the underlying technology. Even better, use the somewhat-standard feed icon to indicate to users that the link is to a feed (I have a mini essay that rambles a bit, but does get around to explaining why icons are good things).

Bottom line, software developers make a lot of assumptions about what people will and will not understand based on their own understanding of the world.

Yes, yes, yes...

Alright, so David makes lots of good points, and it's a bit sad that Vista has only has a slight improvement in that department (death to the "Yes", "No" "Cancel" dialog -- now that's a movement I'd get behind).

But David, if you're reading this, skip the cheap shots and acknowledge the complexity in what you suggest. For example, you might note that an always-saving app is a non-trivial thing to write, and is probably a waste of time for something like notepad. Appealing to Quicken doesn't help, either. A Personal Finance Manager looking like a checkbook is a no-brainer (that's 20-20 hindsight, of course - early PFMs didn't do this). But suggesting the real world mental model for a document editor is pencil and paper? No, seriously... that's not going to work for a dozen reasons, and I think you know it. Once you start down the path of trying to match software to real-world analogies you end up with gems like Microsoft Bob, or internet phone applications with clickable keypads. Sometimes it's not the model, but how you choose to present it.

For the rest of you...

If you want something that really makes you think about UI design, read asktog.com (in particular, First Principles of Interaction Design) or pick a copy of The Design of Everyday Things. Or wait for David to start tackling things that are actually non-obvious.

Lessons on Simplicity in Software Development

justsean — Fri, 15 Dec 2006 05:41:16 GMT

Nick Bradbury, creator of FeedDemon, one of the best feed readers around, has been writing a series of blog posts on the theme of "Simplicity Ain't So Simple."

They are definitely worth checking out. Here are links to the first five in the series:

Part I: Decide what to Hide
Part II: Stop Showing Off
Part III: Don't Add Features You Can't Support
Part IV: The Blessed Curse of Power Users
Part V: Combine Features

Check out his blog for the rest.

UI is hard

justsean — Sun, 09 Jan 2005 23:02:00 GMT

It's always nice to see someone who understands. Via Scoble, I read this post by Damien Katz about re-writing the Formula Engine in Lotus Notes. A fascinating story, but the part that made me smile was this:

UI stuff is hard, but not many people actually appreciate how difficult it is to do correctly. Everyone thinks they're an expert, but very few have actually spent any time thinking seriously about it, reading any article or books on the subject, watching users behind one way mirrors during usability tests and seeing how easily users get confused and distracted. So one day I'd had enough, I couldn't stand it anymore, I was tired of battling all day with people who thought their "little" tweak would have no repercussions whatsoever. Being a UI guy isn't just producing UIs, it also requires negotiating with lots of people, at least at Iris it did, which was the part I liked the least about the work.

Yes! Nailed it. Doing UI work is one of the hardest and least-appreciated jobs in software development. Everyone has an opinion and everyone thinks they have a clue what makes good UI. Well, very very very few people do.

To make matters worse, everyone thinks it's easy! Well, sure, once you know what you're doing, slapping together a dialog is easy, right? Wrong. Putting aside the dozens of iterations required to come up with a good design in the first place, even creating a good dialog can be tricky. There are so many things you can get wrong that people take for granted, but that make the difference between clean, elegant UI and a piece of crap.

Some day, I'll talk about the design process in more detail (though you can take a look at my story about wireless icons for some insight). For now, I'll just rattle off a few thoughts on some of the things that make to hard to get even a simple piece of UI like a dialog right.

Tab order -- it's amazing how many people get this wrong. People do use the keyboard! And it's not just advanced users. There are a lot of people who can't use the mouse.
Accelerator keys -- more of the above.
Aligning and spacing controls -- #1 way to make your dialog amateurish is to mis-align your controls.
Grammar and spelling -- okay, I was wrong. This is the #1 way to make your dialog look amatuerish.
Handle errors right --Jeff Davis speaks to this better than I can.
Using the right control in the right place -- again, I'll let Jeff's post say this better than I can.

Like any problem space, it takes experience and practice to get this right.

Glad I got that off my chest.

Edited: 9:24pm -- corrected some typos (thanks, Bruce :). That's what I get for posting without re-reading. Which, by the way, is an important lesson... always have someone else read over your text before you release your software. You, or your QA team, should be reviewing your UI with an eye for the spelling and grammar -- not to mention making sure that what you say actually makes sense.

Musings on Consistency in OS Design

justsean — Wed, 07 Apr 2004 10:28:00 GMT

I'm a bit behind in my browsing and posting, but I wanted to note that Pierre Igot has posted parts 2 & 3 of the Mac OS X Hall of Shame. I take these articles as object lessons -- examples of things I wouldn't want to repeat, and an opportunity to get a different perspective.

In part 2, Pierre starts off with a discussion of the dock's bouncing behaviour (I believe the best description was “like a Jack Russell f**ing Terrier”). Now, dock bouncing aside, there's a thread that runs through Pierre's examples in this installation of the Hall of Shame: consistency. “Huh?” I hear you say, “I can see that the last one is all about consistency, but the first two?” Well, here's where college classes in literary criticism (“lit-crit”) come into play -- the fine art of extracting a theme from a text when you're 99% sure the original author never intended that theme to exist. Bear with me.

An operating system is many things. A kernel, a collection of device drivers (even “poorly debugged” ones), a couple of APIs here and there, sure, those are good. But to a user (remember them?), what is it that an OS does for them? For the purposes of this discussion, I shall postulate that an operating system is a promise of consistency.

Let's start with the obvious one: consistency in interaction. Pierre's third example covers this very well (look, if you haven't read the article, you better go do so, and come back. I'll wait... okay, welcome back.). When I sit down in front of an app on Windows, I expect to be able to select some text and hit Ctrl-X to cut it, and Ctrl-V to paste it. If those don't work, I'm pretty ticked. All of my “learned behaviours” are out the window. I have to spend some time to learn how the new app does things that every other app does. Well, unless that app is more-or-less indispensable, it's going to find its way off my PC pretty darn fast.

This sort of functional consistency is everywhere and is key to the overall experience. This consistency is part of what it means to be a “Windows app” or to be be “Mac-like” (violating this notion is the great sin that Word 6.0 for Mac was -- apparently rightly -- accused of committing).

Windows, like everything else, has some issues here. This past Christmas I was watching my mother navigate her way around Windows. The most fundamental thing she had a problem with was knowing when to single-click and when to double-click. I developed a rule for her to use: Put the mouse over the object. If the object, or the mouse, reacts (changes colour, highlights, looks like a button, gets an underline), then click it once. If it doesn't, double-click. For the most part this works, but frankly it's a lame rule (and in list boxes, for instance, it isn't foolproof).

The point though, is that the operating system has a fundamental responsibility to establish the rules of consistency, to document them both in words (Style Guides) and deeds (internally applying the rules across the components of the operating system). An amazing number of OS developers (from all camps) don't even realise that they have this responsibility. Windows hasn't lived up to the responsibility particularly well. The Windows Style Guide hasn't been given the attention it deserves, and hasn't really been updated for Windows XP (not to mention, it's really hard to find). Across the Windows components, you'll find lots similar things that aren't consistently implemented.

Occasionally, this responsibility for documenting consistency is explicitly shirked, as in the first Hall exhibit of Pierre's article, wherein he notes that Apple developers have said (paraphrasing) that it is up to application developers to choose how they interact with the OS X dock. That may be true, but the OS components define the standard, and its difficult for anyone to do something different. Often, application developers assume that if the OS does something some way, then it's the right way -- I mean, they must have done tons of usability studies, right? It sometimes takes a certain confidence in oneself to do something differently from the way the OS does it. Additionally, the OS often provides support in the core APIs for doing things in a certain way, and doing things a different way becomes harder, and really, who cares if the dock icon bounces like a deranged puppy dog -- it gets their attention doesn't it? (Hmmm... one day, I'll post about the OS's putative responsibility to protect users from over-aggressive programs. Stay tuned).

Consistency, however, extends into another realm. Not only do users expect a program to open when they double-click on its icon, but they expect it to open every time. They expect that if they carefully formatted a document and saved it, it will look the same way when they open the document the next time. In CS classes, we called this “deterministic behaviour”. Fundamentally, the user has a defined a mental model of “the way things should work” and they expect that the OS will conform to that model. The model was formed by a combination of the “promises” that the system gave them, and subsequent observation. One key promise that a modern OS gives it that when an update is installed, it will fix problems, not create new ones (aha, I bet you were wondering how I'd get Pierre's final item into this discussion). When updates do not perform as expected, they break the consistency model and users are clearly dissatisfied. Interestingly, a broken update breaks two separate consistency models: the “updates shall do no damage” model and the model of whatever functionality was broken by the bad update.

One way to think about this consistency issue is to use what psychologists call a cognitive model -- a model for how people think about things (disclaimer: I am not a psychologist by any stretch of the imagination, so I'm probably going bastardize the concept). Think of how people use a computer as the building of a set of rules: given a set of conditions and actions, expect a certain result. These can be very abstract: if I put a mouse over an object and it react, single-click on it. Or they can be very specific: when I'm in notepad, if I need to see the status bar, I have to turn off “word wrap”. Obviously, the more abstract a rule is, the more situations it can be used in. Now the user's objective (and the designers) should be to keep the ruleset as small as possible, and hence, to provide more abstract rules than specific rules. The smaller the rule set, the easier it is for people to learn, and to use the system. If a user can apply a set of rules learned elsewhere, all the better. The first trick is getting people to learn a rule -- sometimes this is by explicitly stating it, or simply by consistently applying the rule and having the user learn it by experience. The other trick is get the right rules -- the most productive or most positive rules. For example, if a user applies a system update, and it hangs the system, they've learnt a rule: never apply system updates. Not exactly the rule that was intended...

Microsoft has felt the brunt of this kind of adverse rule-building recently. A few bad patches over the past few years have created a reputation in some areas that we're unable to consistently deliver solid patches. Now, when, because of widespread security attacks, we need people to be patched, some don't trust us and resist, thereby putting themselves in danger.

So, in the final analysis, we learn why consistency is truly valuable: trust. Consistency breeds trust. And trust is, ultimately, what we as OS developers need from our users, and what, frankly, we as Windows developers, don't have enough of.

Now... aren't you eager to find out about the theme of Part 3? Well, I'll save that for another post, but I'll give you a teaser: it's a different aspect of consistency... namely, “Compatibility and the Art of Rebuilding a Road”.

Where do icons come from?

justsean — Mon, 22 Mar 2004 01:23:00 GMT

One of the more interesting things I worked on during the past few months was the development of a new “wireless“ icon for Windows. I found it a fascinating process and I thought it would be illuminating to share what we go through. Icons are interesting...(read more)