Notebook

This is a major revision to the OmniGraffle Wireframe Shapes that I've been providing at urlgreyhot since OG version 1.x. It's been over a year since the last update to that version. This version adds new elements and is formatted for OG 5.x. You can get it here in the Tools section.

Tog's comparison and analysis of the human computer interaction versus the user experience with both the Amazon Kindle and the iPhone/iPod Touch is excellent. The separation of HCI/UX in his analysis really drives the point home that good interaction and industrial design can make the experience, and a good experience isn't only about the design.

I don't use a Kindle daily, so I can't comment personally on it, but the industrial design was a showstopper for me and kept me from wanting it. Truth be told, though, the kind of books I read are probably better on dead trees. The thing that impressed me most was the mobile connectivity and the screen. But when I held it in my hand and paged through, the buttons kept me paging through accidentally. I think the lack of back light for darkened rooms would also be a let down.

As for the iPhone, I'm not one of those people that dotes on it. Don't get me wrong. It's without a doubt the single most enjoyable device I use daily, and I wouldn't want to be without it. But many of the elements of the experience have frustrated me, and I still won't be convinced that typing on a touchscreen is a step forward from a physical keyboard. The Sidekick spoiled me.

The best part of this article is that step back that tells the story of why we need to take a holistic approach to the product, from the interaction with the interface to every aspect that radiates from the product.

Companies that pay attention to both the mechanics of the interface and the subtleties of the user experience win. Explore websites like Bed, Bath & Beyond and see how good screen design and carefully-plotted user experience come together. Don’t just examine look and feel; set up a shopping scenario and experience every step from thinking about maybe buying a product to selecting it and checking out. Bed, Bath & Beyond has perfected a superior experience in their real-world stores, and they have translated it beautifully into the cyber world.

There are no trade-offs here. Human/machine interaction is a subset of the user experience. Anything done to improve the mechanics of the interface will, by its very nature, improve the overall experience. Anything done to improve the user experience will amplify the good qualities of the human/machine interaction.

You must, however, research and design each of them separately—and to test each of them separately. They each require a specific frame of mind, and concentrating on just one will lead to the kind of uneven design that both the Kindle and the iPhone/iPod Touch have been offering.

And that last part strikes home most. These are separate activities, but require a holistic approach and frame of mind. Investing in research and design on both of them can be seen as either a luxury or a given depending on how and where you work. But the holistic approach ensures a better experience.

Brandon Schauer gives us 9 ideas for experiences whose time has come--the idea being that these are things we can do to create or extend the experience with our businesses because the timing is right. With luck, execution of any of these ideas can turn into real value for businesses and their customers.

Will Evans discusses how he uses wireframes in his design process. The story is one you've probably heard before. It's a description of concept design, using wireframes as the tool for finding the right design. One could use sketching just as well.

He's talking about that path we take as designers to frame the problem for discussion, extrapolate solutions from that discussion, and generate possible solution concepts. He calls his process one of divergence, transformation, and covergence. This maps to a common cycle in design where there is a lot of front-loaded generation of ideas and further and further reduction of solutions as the process unfolds. There's a great diagram in Buxton's Sketching the User Experience on page 146 (based on Pugh's 1990 work, Total Design) which discusses the waves of expanding and contracting generation and reduction that happens as designers find focus. The right design emerges at the end of the process of ideation and selection.

It's interesting to read Evans' description of his thoughts during his design process, as it mirrors what Buxton and Pugh describe. We need to hear more detailed accounts like his, that fill in the picture for other practitioners, and hopefully impress upon some of us different ways for practicing our craft.

Faruk Ateş provides some suggestions for implementing pagination, all of which I would agree with. After the suggestion list, Ateş shows quite a few examples and discusses what's good and bad about them. There's a huge list of examples on Smashing Magazine as well, although some of them are a little fussy.

Oddly enough, while a few of the examples show the method of using an ellipsis plus the last few page numbers as a way to show number of pages, Ateş doesn't count that as a recommended practice.

Here's a screenshot of Flickr using this method. I like Flickr's as an example because it's as straightforward as ou can get with no fuss.

The practice of showing the an ellipsis plus the end pages is one of the pagination conventions I've been using for years and is one I'd add as a more explicit recommendation to the lists above.

Jakub Linowski has started publishing Wireframes Magazine, a blog to showcase people's user interface wireframes.

Henrik pointed me to Raphaël, a nice JS library for generating interactive charts.

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy.

Via tweet from Henrik Lied

One of the things I've always found a chore, being a producer of graphic documents, is versioning and organizing the docs for a team. I've had to use different tools like Source Safe, Sharepoint, Basecamp, and just shared drives to this. One nice thing I like about working with our Traction server is that it does Webdav for document management and file versioning. That's one of the projects I'm working on a preview release of to make the web-based interface a bit more friendly.

The thing with Webdav is that I can mount the shared folders in my Mac Finder and drag and drop tons of documents in there without going to the web site. But I don't want to have to manually connect to the shared folder. Luckily it's easy to have the Mac OS automatically connect to servers when you log in. Someone tweeted today wondering how you do that, so I posted a screenshot showing how I've set up my Mac. You can do the same thing with whatever share point or server you use.

Here's the steps:

  1. Make sure you're in the Finder. Connect to the server using menu Go > Connect to Server, or keyboard shortcut Command-K.
  2. With the volume mounted, open System Preferences > Accounts, and select your user account. Click the Login Items tab (you may need to click the lock icon in the lower left to edit login items).
  3. Now just drag the mounted volume from the Finder in to your System Preferences > Login Items list.

That's it. Now your Mac should automatically try to connect to your server volume whenever you log in, and it will show up in your Finder.

I just came across typeface.js, a type face replacement method like SIFR and FLIR, that lets you embed custom fonts in your pages using CSS. On the backend, javscript is used with or VML to draw the glyphs for your fonts.

Compared with SIFR, this suffers from some issues. Biggest one perhaps is that you can't select text since it's rendered as an image. Not so with SIFR. I wouldn't go using this method for body text, but if you're already considering doing image replacement for elements like headings, this would be a library to watch. There's bound to be accessibility improvements in the future using methods that put invisible text over the image, or something like that.

UX London is a three-day event for user experience designers that combines a day of inspirational conference with four half days of practical, in-depth, hands-on workshops, all presented by some of the biggest names in the industry. Speakers include Don Norman, Leisa Reichelt, Dan Saffer, Luke Wroblewski, Jared Spool, Jeff Veen, Eric Reiss, and Peter Merholz. If I were in Europe I'd definitely want to be there.

It seems it's time to start spilling out some of the meta-discussion in my head--the monologue I guess--about what I'm doing here on Konigi. So I started to post announcements and thoughts about what I'm working on with a Konigi Twitter account.

Basically, I feel like I want to separate Konigi-specific postings from my regular Twitter stream so I can update interested readers via that account, as well as post more work in progress commentary, observations, and announcements related strictly to Konigi. So if Twitter suits you more than RSS or Email, or if you're interested in my back-channel banter, you can get updates there.

There's also a product page for Konigi now on Facebook.