Archive for the 'User Interface' Category

Firefox 3 - Back Button UI Annoyance

I’m currently using Firefox 3 RC2 FireFox 3 and absolutely loving it - I love the new tags feature, the overall faster browsing experience, everything…

Well, almost. One thing that I find quite strange is the location of the control for jumping back several pages:

Firefox Back Button - actual

I remember the first time I needed to go back several pages and saw this and sort of looked at it like “hmm, seems like you can jump ahead several pages, but how do I jump back several pages?” But after clicking on the little control, it turns out that to go back several pages at once, you click on the control next to the forward link:

Firefox back button clicking on multi page control

Unintuitive indeed. Would it not make sense to have this control be next to the back button, maybe something like this?

My version of the Firefox back button

Here, the location of the control maps to our mental model of where we want to go, as in backwards.

Favicon Usability (or, please let me use them as buttons)

Over the weekend, I think, Google updated their favicon (or shortcut icon) …

New Google Favicon with lower-case g

First off, I was pretty confused when I saw this, since seeing that g out of context doesn’t remind me at all of the Google brand. The old favicon was much better:

Old Google Favicon

While that lowercase g could be pretty much anything, it’s hard to confuse this with anything other than Google. But worse, and this was the case with their previous favicons as well, they have the same favicon for several different services, such as search, maps, and news.  So why is this a big deal (or a small-big deal)?  Well, I use favicons as buttons in my bookmarks toolbar…

Example of how I use favicons as buttons

This is a great way to conserve space.  The only requirement is that the people who are designing the website are thinking about how favicons might be used.  (Ok, in addition to the requirement of having a favicon in the first place.) Maybe what I’m doing is a bit unusual - basically turning favicons into buttons by removing the text description, but it seems to make sense, no?  So, if you happen to be someone who designs favicons or has any say about it, if you’re working on a suite of services, don’t use the same favicon for all of them.  Even if users aren’t being nerdy like me, it still makes it easier to target the right app if it has distinct visual mark or brand.

JotSpot reborn as Google’s version of BaseCamp

JotSpot used to be my favorite Wiki tool and I was so sad to see it vanish after being acquired by Google. Today, at long last, JotSpot is back in the form of Google Sites. Weirdly, the only way you can sign up to use it (for now), is if you have a Google Apps account - which I think is something primarily used by small businesses. Not sure why Google would assume that individuals would not be just as interested in this tool - for the same reason that BaseCamp is used both by teams and individuals. Well, no matter, I happen to have a Google Apps account and started playing around with the app - and I have to say, I wasn’t very impressed. Sure, it’s still in ‘Beta’ - but Google has sort of shot themselves in the foot with their liberal use of that term (with Gmail still in Beta, Google has basically rendered the term meaningless) - so because it’s meaningless, people ignore that supposed message that things may not be quite working as expected, and expect everything to work just right. The whole experience still feels a bit clunky, at least by Google standards - for example, I created a new page, assuming it would then show up in my list of pages in the sidebar - but for some mysterious reason, I have to go into the settings for that page and choose to have it display in my page list - makes no sense. Considering that this app is integrated with the apps suite, it’s also not clear to me what the relationship is between the various dashboards you can create as part of this app and the dashboard that is part of the Google Apps suite - to be clear, this is not the same as the iGoogle dashboard. In fact, it seems like Google in general is having a bit of an IA problem - lots of apps all sort of interconnected but no overall semblance of order.

Anyway, bottom line is that Google Sites will probably be a worthwhile Wiki, Team Tool, whatever, eventually, but for now, it’s still a bit rough around the edges.

Buzzword: why Google Docs should be Flash-based

After having just spent a few minutes playing around with Buzzword, a new WYSIWYG web-based document editor, it’s hard to return to Google Docs. I mean, it just feels so clunky compared to this elegantly designed editor. Sure, Google docs is a lot more than a WYSIWYG editor. But looking strictly at the editor features, Buzzword completely blows Google Docs out of the water. And it’s still only in preview. One reason for this is because the people at Virtual Ubiquity made what I think was a very smart decision and designed the app in Flash, which just makes it so much easier to add advanced functionality beyond the glorified Rich Text Area interface the Google Docs really is. Oh, by the way, I’m talking strictly about Docs here - the far more complex Google Spreadsheet remains a work of art.

Single-click: The one Windows feature *still* missing from the Mac

Apple will soon be releasing the new OS X Leopard, which will be adding over 300 new features to the OS. There are some absolutely amazing additions to the Mac OS in this release, such as the Time Machine backup tool or the Spaces custom workspaces to keep your desktop clutter-free. And yet, as I was scanning through this stunningly impressive list of Insanely Great stuff, I was once more disappointed (and a bit surprised) to see that Apple *still* has not added the one feature that has led me to continue to use Windows: the single-click feature…

Single-click - the one Windows feature *still* missing from the Mac

Now, for someone not familiar with this feature (and, actually, for someone who is familiar with the feature), this might seem a bit weird, so let me elaborate. For me, I’ve found that constantly doing a lot of double-clicking causes pain in my wrist, so access to this feature, and the prevention of wrist pain is no small thing. And I guess what is really significant here, is that, even though I know that the Mac OS clearly is superior and just all-around more modern and robust than Windows XP, I still haven’t made the switch. Or, to be more specific, I haven’t made the switch back. For many many years, I was a hardcore Mac-Head, but then I needed to use Visio for my work, and was therefore forced to use a PC. At the beginning, I hated it, but then I discovered that, as with many things once you become more familiar with them, wasn’t so bad at all. (Keep in mind that this was in the pre OS X days, at which time I’d have to say that Windows was in fact the superior OS.)

I have to say that I am really surprised that Apple has not added this, especially with the web making single-click an even more predominant interaction form. I’ve talked to some Mac users and when I describe the feature to them, they are as surprised as I am, especially when I explain some of the bonus benefits of the feature, such as if I am creating a new file and want to name it similarly to another file, I just hover my mouse over that file, at which point the file name field is populated with that value, and I can just modify it (e.g. adding ‘v2′ at the end or whatever.)

If perhaps I should be mistaken, and Apple in fact has added this feature, I’d love to hear about it. I’ve searched extensively for it, including for 3rd party software, but to no avail.

Why doesn’t Amazon.com support embedding of their content?

So yesterday, when I was writing about Bill Buxton’s new book, I went to Amazon.com, thinking I’d grab a picture of the cover of the book, and as a thank you to Amazon.com have the image of the book cover link to their site. So, I started doing the same old rigamarole of saving the book cover graphic, opening it in Photoshop to tweak it (resize it, remove the gray background inserted by Amazon, etc.) and then I thought “wait, why I am I sitting here preparing a graphic that already exists on the web? Why not just point to that graphic?” So, I went back to the Amazon site and viewed the page source and trawled around to find the url for the image. And I’m sure if I had tooled around enough in the page source, I would have been able to find the right link, but after a while, I simply decided this wasn’t worth my time. At some point, while all this was happening, someone sent me a link to a video on YouTube (yes, it was another completely ridiculous but funny YouTube video, and no I won’t tell you what it was), so I went to watch it, but found myself instead staring at YouTube Embed/URL feature and wondering why in the world Amazon doesn’t add this to their site. Y’know something like this…

Mockup of how the YouTube embed feature might look on the Amazon site

Let’s see what all the possible advantages might be of this feature:

  • Authors of the book can easily promote it on their site, and the embedded content could include optional sales info or ratings info or whatever.
  • People who have reviewed the book on Amazon’s site can display a snippet of their review on their website. Users who want to read the rest of the review would be taken to the Amazon site.
  • Bloggers, like me, who want to write about a book could easily display a book cover (and maybe optional features like the search inside link in their blog entries.

So why hasn’t Amazon done this? Is there some legal reason that prevents it? Do they already have the feature but I just wasn’t able to track it down?

When small features are show-stoppers

Since posting this, I’ve been working a lot with FW CS3 and have realized that some of the points I make below are inaccurate. Inline text styling is actually possible in FW. What is not possible, at least from what I can tell, is applying text styles at a level more granular than the text object. So, my love affair with FW CS3 is *not* over - we just needed a little time apart ;)

Thanks again to Alan Musselman at Adobe!

I recently wrote about how I had high hopes for Fireworks CS3, in part because of how the prototyping process had been integrated into the design process, and because of the generally increased integration between former Macromedia products and Adobe products. But alas, after having now worked with the tool for a while, it turns out that, at least for now, FW will not be added to my design toolbox. But why oh why you say? After all, with the new version, it’s so easy to sketch out some ideas, hotlink them together into pages, and post it for discussion (I was able to crank out some simple prototypes literally in minutes.)

Well, as it happens, one seemingly innocuous missing feature spelled the end of my short (but intense) love affair with Fireworks CS3: no inline styling of text boxes. Huh? Why would that be such as big deal? Well, here take a look at this example:

Sample from a Contact Us wireframe

So here we’ve got a snippet from a pretty generic contact form wireframe. Notice the privacy policy link. I was working on this wireframe and wanted to add this seemingly simple little text link. The only way I was able do it was by placing any differently styled text in its own layer. Not good if you’ve got loads and loads of these links on a page, like on a search results page, for example. Here is a snippet from a wireframe of one:

snippet of a search results wireframe

Ok, so this one is pretty crazy-busy, but even so, having this many links on a page is not out of the question. Can you imagine having each of them in their own layer?! FW apparently treats text boxes as the most granularly defined object, so for example if you want to apply a style, you have to apply it to the whole block of text. Considering how critical the ability is to control the style of virtually every character on a page is in the world of modern user interface design, I’m very surprised that FW doesn’t have better support for this, especially considering that old clunkers like Visio have amazing formatting capabilities (clunky to do sometimes, but at least you can do it.) Hopefully, better support for this will be part of a future version of FW. Or, more likely, someone somewhere will figure out a hack for getting around this issue….

Getting Joost

So I just started playing around with Joost today. (Thanks Michael for the invite!) and I think the best way to describe the initial experience is simply a wow! As soon as I had installed the software, it basically took over my computer (in a good way), sort of like when you’ve been sitting in a bleakly lit movie theater before the movie starts and then the lights go down, and the screen goes black and for a moment you’re 12 again, and about to watch Star Wars for the first time.

Maybe my favorite thing about Joost is how nicely I was transitioned into this radically different desktop experience. All the buttons and ui elements feel smooth and friendly without feeling like you’re playing a children’s game or whatever. And more importantly, I didn’t really have to do much to start watching TV shows. I think it would have been really easy for the ui designers to default to asking the user to first make a selection in terms of what they wanted to see, but Joost was really smart about this, I think, in that they seemed to realize that, because this is a completely new experience for most users, what they watch at the outset is far less important than that they are watching something. I actually wasn’t even sure what the first show I watched was (Adult Swim? Some Comedy Central show?), but I didn’t care. It was fun just toying around with the app. Unfortunately, after a few minutes of that, my Joost honeymoon was over. I wanted to actually find something specific and that’s when the experience became not quite so sublime (remember, though, Joost is still in invitation-only beta mode, so the issues I’m raising are in no way a critique of the joost ux.)

My biggest complaint with the current beta is that it isn’t clear how to get out of stuff that you get into. For example, here is the default view of when you hover your mouse along the edge of the screen to display the Joost main controls…
Default view of Joost controls

If I click on the My Joost button, all kinds of windows and widgets slide onto the screen….
My Joost - options

The first thing I wanted to be able to do when all that happened was to make it all go away. I would have expected that function to be nearby where the My Joost button I clicked on would be, but after hunting around on the screen for a while, I discovered that the close button was some icon that I guess sort of looks like a close button, but the problem is that that this button was already present before I clicked on the My Joost button, and there just is no clear relationship between these two elements, in terms of proximity or otherwise.

Anyway, enough complaints for now. One really cool feature of Joost, which shows that the designers of the tool really care about their work, is the little effect that is played when you exit Joost - the screen collapses into a tiny white dot on the center of the screen, which then slowly fades to black, sort of like the old tube televisions used to do.

Bottom line is that Joost rocks, and my only real concern is how addictive it is, and how I’m going to be able to get any work done when the real thing launches…

smart design vs too-smart design

I love gmail as much as the next guy, but sometimes even the ui wizards at Google seem to have fallen for that most tempting of traps in user interface design - trying to be smart. Wait a second you say, isn’t ui design about being smart! ok, not to get bogged down in semantics here, but what I mean by this is when the overly eager designer tries to make one too many assumptions about a user’s behavior, essentially painting their design into a conceptual corner. For example, the designers at google decided that if someone posts a message to a list, and you are on that list, that you would not want to also be a recipient of that same message once it has been posted. Really? I actually like to see that my message went through. But ok, let’s say that I’m ok with this. Unfortunately, the real problem with trying to be smart are all those pesky unexpected scenarios that you hadn’t consider. Ever tried sending an email to another of your addresses that is in turn forwarded back to the gmail address? Well, gmail sees that it was sent from your address and therefore decides (apparently) that this was someting you posted to a list and quietly does away with the message. Same with the otherwise brilliant gmail alias feature. Am I being overly picky? Are these realy non-issues? (How often do you need to test your own email address?) Possibly. At the same time, not showing you an email that you sent to yourself is non-standard behavior. For that reason, even if it is a good idea, it is something that the user should be able to decide that they want to do. The first time gmail does this, it should ask the user if this is their preference, and provide information on how this preference can be updated. This provides the best of both worlds, rather than mysteriously lost email because some designer decided that they know how their users behave…

Yahoo AddressGuard vs Gmail aliases - a case study in thinking outside the box

I remember when Yahoo AddressGuard came out. After having had two of my favorite email addresses pummeled to oblivion with spam, I jumped on the opportunity to a near endless store of disposable email addresses. I do remembering thinking that the process of creating new disposable addresses seemed a bit cumbersome, but what the hell, it was worth it! And then gmail was born, and with it came gmail aliases, and suddenly Yahoo AddressGuard seemed like a big old clunker…

Why? Well, the genius of gmail aliases is that you get almost all the benefit of Yahoo AddressGuard, but there is no ui, no forms to fill out, no disposable addresses to manage. All you do is add a plus sign to your current user id and then add some descriptive term to identify the alias. For example, if I’m filling out a form at BigBBQ.com, I might fill in my email address as gmailusername+bigbbq@gmail.com. Essentially, google replaced an entire user interface for managing disposable addresses with a plus sign! Ok, there is still a bit of a trade-off - your actual email can relatively easily be parsed out of the alias, but then gmail’s spam filtering is so good, that for the spammers who go to the trouble to do that (it won’t be worth it until gmail aliases become widespread), they’ll get dumped into the spam folder anyway.