Martin Polley

This caught my eye this morning. This sign-up form for a daily...

Wed, 03 Mar 2010 08:01:47 +0200

This caught my eye this morning. This sign-up form for a daily horoscope (in Hebrew) asks you to specify whether your device has a regular screen or a touch screen.

Now I can’t be sure, but I suspect that this is so that they can tailor the experience depending on whether you have touch or not. Most likely so that things that rely on hover can be surfaced in different ways.

I expect to see a lot more of this sort of thing.

Wow! I love the way they’ve used stop-motion to...

Sun, 28 Feb 2010 14:21:47 +0200

Wow! I love the way they’ve used stop-motion to demonstrate their product. Nice one!

http://makedo.com.au/

Wow. Just wow.

Mon, 22 Feb 2010 08:40:44 +0200

Wow. Just wow.

Shouldn't it be the other way round?

Thu, 11 Feb 2010 07:27:52 +0200

Wouldn’t it make more sense to have floor 0 (ground floor) at the bottom instead of the top?

Flash Video vs HTML5 Video—An Experiment

Thu, 04 Feb 2010 10:38:22 +0200

I played the same YouTube video in Safari (on Mac OS X), first using YouTube’s HTML5 video player, then using their Flash player. This is what the CPU monitor looked like:

Feel free to draw your own conclusions :)

Sugru—Looking Good So Far

Tue, 02 Feb 2010 11:09:38 +0200

My Sugru arrived yesterday. So this morning I set about fashioning some new feet for my aging PowerBook.

I used the smallest sachet, 5 grams, but the feet only needed about 1 gram. What to do with the rest?

I had a little scout around and found something that has been annoying me for ages—on my bike, my daughter’s bike seat is not attached at the back (and there’s no obvious way to attach it). It’s not dangerous, just annoying. So…

Now I’ll just have to wait and see how it stands up to the rigors of everyday use.

iPhone and Nexus One

Wed, 20 Jan 2010 07:57:53 +0200

I’ve finally figured out why I like the iPhone better than the Nexus One. It’s because the iPhone is truly innovative, while the Nexus One is a me-too product.

Google is playing catch-up. They should be playing leapfrog.

Fitts's Law for Asymmetric Targets (Like Tabs)

Sun, 17 Jan 2010 13:03:00 +0200

(Originally posted on my old blog on June 29th, 2009)

Since I started putting together my entry for the Mozilla Labs “Reinventing Tabs” challenge, I have been thinking about Fitts’s Law. Here’s what I have been thinking: does the shape of the click target affect the ease of acquisition?

More simply put, is it easier or more difficult to acquire a rectangular target that is (say) three times as wide as it is high than a square target of the same area?

And also, does the orientation of the rectangle make it easier or harder to acquire? (That is, does it make any difference whether the rectangle’s long side or short side is facing towards the pointer?)

Why does this matter? Well, if you have a bunch of tabs stacked up the left side of the screen (as in my entry), the answer could mean that they are easier or harder to click on than regular tabs of the same size that are strung out horizontally above the content area.

And now I have found a paper that contains the answer. At least, it contains the answer to the second part of my question (about orientation).

If you want to read it, go ahead, but here is the money quote:

… when possible graphical widgets should be extended along
the more frequent movement direction. … horizontally enlongated widgets, which are often due to the labeling in English words, should be placed on the left or right rather than the top or bottom edge of the desktop interface.

But there is a caveat:

However, the average horizontal movement distance is somewhat longer due to the landscape display geometry in most computers.

In plain English, tabs that are stacked at the side are easier to acquire than ones of the same size and shape along the top. But because monitors (especially modern wide-screen ones) are wider than they are high, this advantage may be mitigated (or even outweighed) by the extra (average) distance that the pointer must cover.

Here’s a quick example of stop-motion video that I created...

Wed, 13 Jan 2010 13:30:58 +0200

Here’s a quick example of stop-motion video that I created using Chris Neale’s excellent Animationizer.

The Pleasures and Sorrows of Work — Alain de Botton (LSE...

Tue, 12 Jan 2010 07:25:21 +0200

The Pleasures and Sorrows of Work — Alain de Botton (LSE Lectures)

The Top Ten Essential Interaction Design Books—Dan Saffer

Thu, 03 Dec 2009 09:15:33 +0200

The Top Ten Essential Interaction Design Books—Dan Saffer:

Dan Saffer shares his list of the top ten must-have books for interaction designers.

About me

Tue, 01 Dec 2009 00:00:00 +0200

Interaction designer masquerading as a technical writer. Dad. Husband. Etc. Brit in Israel. Johnny TV dude.

Twitter
Facebook
LinkedIn
Flickr
Delicious
last.fm
Huffduffer
Google Reader shared items
Google profile
I live here

Allocating Storage Resources to an Organizational Unit

Tue, 01 Dec 2009 00:00:00 +0200

Brief

To enable administrator users to assign storage resources (physical disks) to organizational units.

First Steps

This is not a complex problem that has never been solved by anyone else before (though there are a few wrinkles that need to be taken care of). So I looked to the available design patterns to see what would work best.

The interface was already in place for selecting an organizational unit in order to configure it. So all I had to worry about was assigning disks to the currently selected organizational unit.

Initial Design

I thought that the way that Google Calendar allows you to add as many alerts as you want to an event could be adapted (copied?) for assigning disks to organizational units.

The thing that makes assigning disks different is that each disk belongs to a file server. So first you have to select a file server and then select the disks (any or all of them).

So I decided to go with something that worked a bit like Google Calendar’s alert-adding interface, but where each row could be in one of two modes—add/edit mode and view mode. The user would be able to click the row (or an explicit link) to edit a row in-place.

This screencast shows what I came up with (prototype created in Axure RP while trialling that application):

The Implementation

The implementation was quite similar to my design, except that the Save and Cancel buttons were directly below the file server drop-down, and did not move down when the disk radio buttons appeared.

The fonts and alignment were also a bit off but these are easily fixed. This screencast shows the implemented version.

Fixing Things

I understood that putting the Save and Cancel buttons below the row was a bit of an afterthought on my part (maybe a result of my initial design not having these buttons). The implementation compounded this problem.

I realized that it would make much more sense to put the buttons to the right of the other controls (thus providing a straight line for the user to follow from left to right to complete the sub-task).

I created a new wireframe and showed it to the developers (see the quick ‘n dirty screencasts below).

This will be implemented when time allows.

With Save and Cancel buttons

Without Save and Cancel buttons

Mozilla Design Challenge Entry

Tue, 01 Dec 2009 00:00:00 +0200

Replication—Provide a Way for Users to Set up Syncing of the Contents of Multiple Storage Areas and Track Sync Status

Tue, 01 Dec 2009 00:00:00 +0200

Adding Filtering Functionality to a Data Grid

Tue, 01 Dec 2009 00:00:00 +0200

Brief

To enable users to filter the items that are displayed in a data grid by any criteria they choose.

First Steps

The first thing I did was to sit down and talk with the project’s lead developer. He said he wanted something like the search feature in the bug-tracking system that we use (which allows you to create and save complex boolean searches on multiple criteria). My initial reaction was that in most cases, this approach would be overkill and the level of complexity that it introduces would make it difficult to perform the simple filtering that this feature would be used for most of the time.

Research

To get an idea of the possibilities, I looked at several examples of search and filtering interfaces: the in-house bug-tracking system that the developer liked, a different bug-tracking system that had been tried there (JIRA), and things like Google’s advanced search and various ecommerce sites with faceted search.

Based on this, I decided that the following points were important:

Having the search/filter area separate from the area where the data is displayed (i.e., on a separate page or in a modal dialog box) is A Bad Thing. If you want to tweak your query after seeing its effect on the data, you have to pogo-stick back and forth between the data area and the search/filter area.
Allowing users to use operators or other complex syntax in a simple text-box-based search/filter interface is useful, especially if you also have an easier way of doing the same thing that shows the equivalent operators. (For example, as you manipulate the controls in Google advanced search, the read-only text box at the top of the page shows the query as if you had typed it into the regular Google search box.)
Having a wide variety of different types of controls for filtering on different types of data (e.g., having sliders, text boxes, AND combo boxes) introduced too much visual noise and meant that the feature could not be easily reused for data grids displaying different types of data. (This was important for the developer, as the plan was to use this feature for several different data grids.)

Initial Wireframe

After some initial sketching, I came up with this:

(Click for a larger version in a new window/tab.)

This was to be displayed as a slide-down panel between the toolbar and the data grid (to allow users to modify their searches and see the results immediately). The panel could then be closed so as to maximize the area available for displaying data.

The other two options that are shown would work as follows:

Preconfigured search—this would contain a list of commonly-performed searches which could be selected from a drop-down list.
Quick search—a simple text-box-based search where the user could type a search query (but would have to know the data field names and the search syntax).

You can view a short screencast that I made from my Visio wireframes here.

Feedback

After discussions with the development team, we came to the conclusion that even this was too complex—having “match all these criteria” and “match any of these criteria” was confusing. We decided to get rid of the second section and only display records that match all of the specified criteria.

Other Issues

There were other issues that had to be figured out:

Should we call it search or filter?
In the end we went with filter, as you start out with a set of records of a finite, known size, and reduce the size of the set.
How to indicate that what is displayed is filtered or not?
Initially I thought that the grid should have a kind of status bar below it, which could show something like “22 items, 18 hidden”. But I decided that this was too subtle. So I decided on a strip that would be displayed between the toolbar and the grid showing the current filter. The strip’s background color would be the same as that of the filter panel.
What should happen when the user switches from one filter type to another (e.g., from Custom filter to Quick filter)?
Due to the complexity of taking, say, a complex query that the user typed into the box in Quick filter and translating it into the values in a set of controls, it was decided to clear the filter (and warn the user) when switching.
Which filter type should be the default?
Quick filter, although it looks simpler and so perhaps most suitable for use as the default, it is really only for power users who already understand the syntax. So Custom filter became the default.

The Implementation

(Click for a larger version in a new window/tab.)

The initial implementation bore some similarities to my design, but there were lots of missing pieces. For example:

There was no default filter—the user had to select one of the three options every time.
The selected filter was not visually differentiated from the others.
There was no way of knowing whether a filter was enabled or not.
The spacing and alignment were all over the place, which made it hard to see what was related to what, which elements were most important, etc.
The panel had a white background, so the fields did not stand out.
Things that were clickable did not look clickable because the pointer turned to a text pointer instead of a hand on mouseover.

Fixing Things

When I saw how the design had been implemented, I started playing around with the CSS to see what I could fix just by changing things there. It turned out that substantial improvements could be made.

I also sat with the developer and showed her the problems. She fixed most of them, I made the changes to the CSS, and all was well.

For a while…

The New Version

Some time later, the developer who had implemented this feature left the team and a new developer joined. He was given the task of adding another new feature—the ability to group records (and also aggregate selected fields). Unfortunately, nobody consulted me about the feature until after it had been implemented.

The developer had decided that, as adding a filter and specifying a grouping were both kinds of queries, they could safely be combined into a single feature. He had combined them into an “Advanced Query” wizard that was displayed as a dialog box instead of the original panel (so reintroducing the pogo-sticking problem mentioned earlier).

The first stage of the wizard was where the user could specify a filter. The user could apply the filter without having to go through the other two steps of the wizard. But if the user wanted to group records, they had to click Next to move on to the second stage. There was no indication that the ability to group was unavailable until the second stage was reached.

The user would then click Execute, which would close the dialog box and open a new dialog box, containing the third stage of the wizard (specifying which fields were to be aggregated and how—count, sum, average, etc.).

Needless to say, this was less than ideal… I talked to the developer about it, and explained the rationale for originally having a panel instead of a dialog box. I also explained why I thought filtering and grouping are, for users, separate, unrelated things and so should be implemented as separate features. He agreed, but said that to change it, he would have to get the lead developer’s approval.

And that is how things stand right now. I do not have high hopes that my suggested changes will be made before the imminent release. (It works, so fixing it is a lower priority than fixing all the other bugs and problems before the release.)

I will push for this to be fixed, though. If not now, then later.

What I would do differently

I learned from this experience that it is very important to keep in touch with the developers during the implementation stage. To explicitly ask them to show me what it looks like at various stages. Once something has been built and works (however badly) it tends to stay that way (especially in an enterprise setting). If it works, there’s not much incentive to go back and make it better. There are always newer, more important things to work on.

Awesome New Israeli UX Site Launched

Sun, 29 Nov 2009 12:45:22 +0200

Awesome New Israeli UX Site Launched

Battling SVN

Wed, 25 Nov 2009 08:55:17 +0200

So I’ve got SVN set up on my Mac. I can check stuff out locally using file:///. svnserve seems to be running, but I can’t check stuff out using svn://localhost/.

WTF am I doing wrong?

UPDATE: It seems like I’ve got it working. The annoying thing is, I’m not sure why it works now. I changed something that shouldn’t have made any difference, and now it works…

New Johnny TV Post

Thu, 19 Nov 2009 08:18:28 +0200

New Johnny TV Post:

I just posted Matt Webb’s Lift 09 talk, “Scientific Fiction” on Johnny Holland TV. I am actually quite excited about this. I admire Webb and his work, but more especially, his thinking. I think my next JHM article is going to be about this video.

Thanks to Mr Merlin Mann, I am posting this from a cute little Dashboard...

Sun, 15 Nov 2009 10:06:39 +0200

Thanks to Mr Merlin Mann, I am posting this from a cute little Dashboard widget.

http://www.kungfugrippe.com/post/243861520/marco