PicLens is a browser add-on which allows photo galleries (including Flickr and Google image search) to be viewed in a three-dimensional display.

Apart from looking rather neat, it is proving to be an excellent interface for searching through images on the web. One benefit of the 3D view is that it allows you to zoom so that you can see a single image fill the screen, many smaller images together, or any size in between. Another nice feature is that a single click on the image, will load the full resolution image without changing the view. However, in my opinion, the number one feature is its progressive downloads; instead of clicking on a 'next' link to view another page of images, thumbnails simply load as you move to the right. It has made image searching so much faster for me.

The 3D desktop is a relatively new movement and generally gets an 'oh cool' type of response, but there are few 3D user interfaces that I've found to be really helpful. My favourite 3D application prior to PicLens was Google Earth. Overall, Google Earth provides a wonderful experience, but it has one important issue that keeps me from ever using it: it's a hassle to open up. It's only a minor barrier, but enough of a barrier to mean I use the simpler Google Maps in my browser instead.

fig 1: Hover over an image in google image search and a little play icon appears on the image, informing you that this page supports PicLens. Clicking the icon takes you into the 3D view (fig 2).

Lenspic does not have this issue.

First, it runs in the browser and opens instantly. Load times are a huge barrier when the actual task is a very quick one, so this is a huge plus.

But I think the smartest UI decision for PicLens was to provide a contextual link on websites that support it. If you do a Google image search, for example, you are likely to click on one of the images in order to view the full image. As you do so, a little play-icon will appear on the image reminding you that you can view these results in PicLens (see fig 1). Click that icon and you are transported into 3D mode.

It's an absolutely brilliant design decision because it helps form the habit of using the add-on. If a user has to think about using a new feature by going to a menu or clicking in a toolbar, they are less likely to start using it. But when you insert the new feature into the user's normal workflow, the habit of using it gets formed without trial.

fig 2: The PicLens three-dimensional view.

If Google Earth was as seamless, I would be using it a whole lot more.

Drupal already has a module to add support to a website (though I've not tried it yet).

Zebra striping provides a visual guide for the eye as it scans along a row in a table; helping avoid confusion with adjacent rows. But there's more than one way to skin a zebra...

Do we need it at all?

As a quick aside, there was recently an article by Jessica Enders on A List Apart describing the results of a study into the effectiveness of zebra striping. As someone pursuing a degree in psychology this is right up my alley, so I found it somewhat interesting. However, it is worth noting that conclusions built on a single study are rarely that conclusive (especially initial studies since they tend to have flaws in their design). Conclusions that we can actually make use of tend to happen over the course of a series of experiments. This is one reason why main-stream-media science reporting is usually so awful. So take it for what it is.

One thing the study does reinforce is that we really don't need zebra striping on every table. Narrow tables, for example, don't require them since the fovea can take in the whole row without scanning. In contrast, tables with missing data may have a greater requirement for it since the text no longer acts as such a clear visual guide.

Wide Stripes

Zebra striping typically alternates the stripes on every row. However, each row tends to be pretty small in terms of height, so scanning is still relatively slow. The tightness of the stripes also draws more attention to itself causing us to shift to the more dominant colour. (fig 1)

fig 1: Striping on every row gives the eye a narrow track to run down.

An alternative is to stripe on every three rows. This gives us a much larger band for our eye to stay within so we should be able to scan quicker. Three is an optimal number because it provides us with an additional guide: a row is either at the top, middle or bottom of the zebra band. (fig 2)

fig 2: Striping on every third row gives a much larger track. Orientation on the individual row is further aided by recognising that the row is either at the top, middle or bottom of this track.

False meaning

One potential issue here is that the stripes create groups. Some may look for meaning in this grouping, believing it to be more than just a visual guide.

For this reason, in cases where there are natural groups, it may be best to stripe according to these.

One design I have seen is an inconsistent striping pattern. For example, 3 rows grey, 2 white, 3 grey, etc. This always leads me to look for groups that don't actually exist, so I suggest keeping it consistent.

Yves Behar at TED:

What I realised then is they didn't really want to change the legacy stuff. They didn't want to change the insides. They were really looking for us, the designers, to create the skins. To sort of put the outside, to put some pretty stuff outside of the box.

And I didn't want to be a colourist. It wasn't what I wanted to do. I didn't want to be a stylist in this way.

And here is the full presentation...

On a recent trip to the London Underground I found myself searching a map for my bearings. What I needed was a 'you are here' pin pointer, but the complex underground map did not provide one.

Today, I started thinking about how the map could best accommodate this symbol.

The one big criteria here is that we don't simplify the rest of the map, since we need that information. This swiftly removes many options for providing a symbol. Colour, for example, can not be used to highlight the pointer since the map already heavily utilises so many colours. Any big arrows or such like would also cause issues since we don't want to cover any station names or parts of the track.

The circle

I opted for a semi-transparent circle which holds the current location at its centre. The transparency ensures that no important information gets covered up, and we forgo any useless 'you are here' text which would cause clarity issues with this design.

A circle is particularly clear because everything else on the map uses straight lines. The only other circles (or indeed circular shapes) on the map are small symbols such as the one for interchange stations. On a treasure map an 'X' might mark the spot; this would be a superior choice since that map would contain fewer straight lines. The key here is contrast: to make something stand out, some dimension of it has to be different from the rest of the design.

fig 1: A circle provides contrast against so many straight lines, and therefore stands out. However, it also exacerbates the existing information-pollution issue.

Issues

So have I improved on the design of the map? No. There are two problems.

One: despite what I said above about not wanting to alter the original map, the original map could do with a clean-up operation. It is full of pointless information junk that distracts more than it informs. This is probably a consequence of designing the display with too little regard for context and the user.

Designing with little consideration for context is the second problem. In my alteration I have simply taken a single viewpoint (my own during an isolated incident). I have also not considered how it would work when printed large and hung on a wall in the station.

But that takes time, and I have at least demonstrated my point about contrast.

I spent last weekend shooting a short film. I was doing the cinematography and I didn't do a great job.

My greatest issue was that I had very little time. I was asked to do the work at the last minute and so didn't have time to check out the equipment, spend time assessing the location nor to think about script, character or mood.

Learning the equipment is the obvious part. It takes time to learn our tools be they cameras or CSS, lights or Photoshop; but we all appreciate the importance of doing so and put in the time to master them.

But there is another place where time must be spent which is more easily brushed over. We may be experts in the discipline of our work, but are we experts in our client? Too often, we are not.

This becomes noticeable when looking at the output of experts who produce consistently high quality work, but work that doesn't quite fit the client. I see this kind of work showcased regularly on sites like Smashing Magazine. The work is of an exceptional high quality, but it often misses something. That something is the individuality that makes that client, that client.

I can think of two ways to help. First, develop a unique style so that clients see the work and think yes, that's us. Then, to get the rest of the way, the designer has to get to know the client. The less we understand the business and the personality of the client, the less fitting the outcome will be; so to produce the best work we must spend time understanding the client and their customer.

This takes time, of course. That time costs money. And this makes the sale tougher. I have found that clients I currently work with don't expect this level of detail and so it is relatively easy to make them very happy. In my current situation I could take short cuts, make more money and everyone would still be very happy.

But if I did that my work would never become great.

When I was in film school, I never compared my work to other student films; I compared it to Hollywood. And because of that I tried to put in the time and preparation I would have to if I were employed on such a production.

The same attitude is true of my design work.

Microsoft love dreaming about the future. Unfortunately they have lost their touch when it comes to turning their dreams into reality.

In the video below, Microsoft dream of how devices will communicate with each other seamlessly. There are a couple of interesting UI ideas in there. But most of it is obvious; though difficult to actually turn into reality.

Considering the content of the video, I found it somewhat ironic that I had to download Silverlight before the video would play.

From Channel 10

Can the Internet really be a catalyst for bringing freedom to Burma?

From a BBC article

Images of saffron-robed monks leading throngs of people along the streets of Rangoon have been seeping out of a country famed for its totalitarian regime and repressive control of information.

The pictures are sometimes grainy and the video footage shaky - captured at great personal risk on mobile phones - but each represents a powerful statement of political dissent.

[...]

The use of the internet as a political tool is one of the most marked differences between the latest protests and the 1988 uprising, which was brutally repressed.

fig 1: via Ko Htike's blog

And from another BBC article:

Aung Naing Oo, a former student leader who was involved in the 1988 uprising and who now lives in exile in the UK, believes the junta cannot stop the protesters.

"There was only very little information about the killings. Now with the internet and the whole world watching I think it's a totally different story... monks are highly revered in the country."

Technology brings power to the people. But note how important the ease of use is here. The blog which is the focus of the article is on Blogger, a free service that is hosted by Google and is therefore really simple to set up and has the resources to scale. Making it easy and cost free means it becomes available to a much wider demographic.

Uses like this are why I think creating easy to use tools for the masses is so incredibly important. Remove as many barriers as possible, and we can give more people a voice. Usability really is life or death important.

Of course, the importance is nothing compared with the bravery of these protesters. Makes one feel incredibly humble.

Let us hope these peaceful protests work.

Ko Htike's blog which is cited in this BBC article

fig 1:

I recently began to understand a trend in my impression of website design. I would regularly cross paths with a design I felt looked great, but the next day it would have lost its freshness.

If the copy was the main source of delight, this mattered very little. As long as the initial impression is good, that's fine. The writing will keep you coming back.

But still, design can do more than offer a good impression. When it's done well it will really support, even enhance, the content.

When I stumbled upon Garrett Dimon's site after he implemented his new design something started to click. His design, a major inspiration for Humte.com, blew me away. It looked like a book! Then I read his thoughts on his design and it got me thinking...

Today I came across another rare example of design that looked like print. A Brief Message's tag line is: 'features design opinions expressed in short form—200 words or less,' but I think it is the art direction that accompanies it that makes it remarkable. Nothing is boxed in and the images interact with the text by flowing in and out of it. Most importantly it is individually tailored for each piece of content. It's the kind of design we see in print all the time, but it's rarely seen on the web (fig 2).

fig 2: Web design inspired by print design. It takes more work to art direct a page, but it's totally worth it.

What I find particularly interesting is if you take away the main content, the design would look quite bland. It would look fine, but it wouldn't stop you in your tracks. It's like the frame for a painting. The frame on it is nice, but nothing special. But put in the content and everything changes.

So many beautiful web designs focus heavily on the frame, so every page looks the same.

Focusing on content design, makes every page fresh and unique.

There are problems with this design method.

• One of these is time (though personally I like to be forced to spend a little time tweaking a post as it makes me think about a topic a little more deeply.
• Another is expertise. You probably need to hire a layout artist to get this right, and they are going to have to tweak the CSS for individual pages to make their vision a reality.


fig 3: When a reader resizes the text (one of the beauties of web design over print) they mess up the design. But if this were print, the reader's only choice is magnifying glass.
• Finally we lose some of the flexibility of a page, such as the ability to resize text. I like the compromise that A Brief Message has taken though. It's optimised for a certain screen and text size, but it is still flexible enough to accommodate those flexed conditions. Look at the image right (fig 3). The larger text may start covering up the image and upset the design, but in print you wouldn't even have this option.

Says site developer Khoi Vinh:

It’s a nontrivial amount of work to design something unique for every article, but that’s what we’re aiming to do here — and hopefully with brilliant, evocative illustrations every time, too.

[...]

In a way, this is a kind of wager that this kind of design can be done online. I’ll concede right out of the gate, though, that while it will aim to be pretty, it may be frequently ugly. If you peek under the hood from time to time, I’m sure you’ll find some semantically improper or just plain goofy code, and cross-browser consistency will not always be exemplary. It’s going to be a learning process, so your forbearance will be greatly appreciated.

It's a good idea to stretch the boundaries of a technology I think. Set the vision then build the tools to make it easier and cleaner under the hood.

Go read A Brief Message

Occasionally I like to listen to a talk radio show by Ian Collins on TalkSPORT. Unfortunately my medium-wave signal is lousy, so I decided to abandon the radio and tune in via their website.

Their page is a bit of a jumble, but I found the link to listen to the show easily enough. I click it.

And find myself on a blank white page.

heh

I click the back button. Try again. Same.

hmm

If I wasn't such a persistent critter, I'd probably have given up right then. But I kept looking and found another link that read 'listen to us'.

Click.

Absolutely no mention of listening on the Internet.

hmm

fig 1: The TalkSPORT website. The 'listen live' link probably works for most people. But what about the people who run into trouble; where do they turn for help? Not the 'listen to us' link, that's for sure.

Eventually I guessed I might be able to load it by opening up Windows Media Player and loading the URL directly. That worked, but it took me about 20 minutes to figure it out. Not good.

Although their site clearly needs some serious work, problems like this are always going to slip through the net.

The only way of discovering these annoyances is to have a strong community feedback loop. Ideally a feedback loop that is published on the site. The transparency will encourage people to use it properly.

Occasionally you come across posts telling you exactly how to do your job. They are not always written with you in mind, but they are still highly relevant.

I just read a post of that description by Bèr Kessels
titled Good CMS (Drupal) designers are rare: ten [sic] points on how to find your perfect designer.

The Six Points

I'll run through the points to make sure I'm up to scratch:

1. Parallel discussion:

Don't just talk to a designer. Define the concept and goal. Then talk to the developers, designers and consultants together.

Well, I can't really choose who a client talks to in order to implement a team unless I'm put in charge. But what I do understand is how a broad range of jobs come together in order to create a successful project. If you don't manage each job properly, you are going to create a mess.

Since I'm the every-man -- I know a lot about a lot of things, but I'm not the best at any of them -- I fit well into small projects where it is just me collaborating with the client. If I have a speciality it is usability and the customer experience, which combines so many of these areas.

2. Never overestimate looks

Every successful site is ugly

My view is that if a site is ugly it probably has some usability problems. But ugliness really only shows up the smaller usability problems. Those successful ugly sites, get 95% of everything else right and that really matters. Pretty sites that get no traffic get the 5% right.

I'm aiming for 100%. But if I don't hit it (and I won't), 95% is not bad.

3. Ask for style guides

Static pages are not what you get when you implement the final site. A CMS is dynamic and you've got to deal with those dynamic items in the design.

As soon as I started working with Drupal I realised that a design that looks good when it is static is not yet complete. As soon as you take that static HTML and make it a Drupal theme, you suddenly have a whole bunch of issues such as login screens, warnings and other messages, extra buttons and forms, extra menu items...

These are difficult to deal with, but it is the job of the designer to sort them out.

I think it is important to not over-plan these areas though. Concentrate on the big stuff that is hard to tweak, and iron out the creases later.

4. Multi-talented

Developers and designers need to coordinate. It pays to understand each other's jobs

I'm not the best designer in the world precisely because I try to know lots about lots of things. But while I may not be able to create the most beautiful sites, I know how they work as a whole and I believe this is more important.

We are not painting pictures. The web is interactive, not something we hang in a gallery.

This means a designer on the web has to be different to a print designer. You can draw a distinction between skinning a site, and creating the whole user experience. You can do a lot with CSS and Photoshop, but once you get beyond a simple brochure site you need to start thinking about being a bit of a code monkey too.

Of course the bigger the team you are in, the more you have the chance to specialise, but it still pays to understand each other's jobs.

I may not be the best coder nor the best designer, but I AM happy in both environments... and more areas beside. I understand user experience, and I have solid ideas on how to improve it.

5. Think in Models, Views and Controllers

The designer is only creating the 'views' part of the site. Implementing extra functionality is the work of the whole team

Since I'm currently working on smaller one person projects, it is much more of my responsibility to add the functionality. But I'm not really the whole team. The whole team includes the client.

6. Ask about CSS, JS, standards and XHTML

I'm currently weak on Javascript and it is certainly something I need to work on. The other areas, I know. Add PHP to the list as well, because I know that better than Javascript.

Good designers are rare

The bad news for me is that to be a good designer I've really got to know a hell of a lot. When I decided that developing for Drupal would be a good career choice I thought I had most of the skills I needed. How wrong I was.

The learning curve is steep even to become good.

To become great is going to be incredibly hard.

The good news is that once I get there, I should have lots of work!