Humte

Below you will find posts on all four subjects of my blog. I discuss: running a small business, marketing, design and usability, and the use of a wonderful piece of software called Drupal.

PicLens: 3D UI that works

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.

screenshot showing the piclens link when hovering over an image in google

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.

a screenshot of PicLens

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).

False Networking

I recently started looking for networking resources (that's networking with people not networking computers).

So far I've been disappointed by my options. What I'm after is just a place where business people gather to meet other business people. But what I'm finding is exclusive networking clubs; clubs that allow only one member per job type. That means if I joined, no other web developers would be allowed to join the same club. Therein lies the exclusivity.

The basic idea is that every member carries around a bunch of business cards for their various networking friends. When they come across people who need the services of someone in their network, they recommend that someone and hand out the card.

I hate stuff like this. Fine, I understand that they qualify the people who join up and make sure they are up to standard. But people are still recommending another business based on their membership to their group. It's not natural.

I'm not interested in joining a group where I don't have to deal with competition. I don't want to join a group where people remember me because I qualified to join their clique. I don't, in fact, want to join a group at all. All I want to do is meet people and have enjoyable and interesting conversations about business.

Every Three Zebra Stripes

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)

table with zebra stripes on every row

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)

table with zebra stripes on every 3rd row.

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.

Seeking Help is a Strength

Turns out I'm not socially dynamic enough to do something as simple as ask for help. This has to change.

When I was at school I used to hate working in groups because I knew I could do a better job than anyone else. This was just my opinion and arrogance, but it stopped me from being effective when we were forced to do group work.

When I got to university I discovered group work was absolutely brilliant. I could get so much more done; achieve so much more. Even if I could have done the work better than anyone else (I couldn't) I didn't have time to do it anyway. And by learning each person's strengths and what motivated them, that work became ten times better.

I know this. I've just forgotten to practice it. Why am I not seeking help when I could really use it? What am I trying to prove?

When working at home all the time it is, of course, easy to isolate one's self all the time. But this is still my fault.

I read the following by Richard Branson earlier today:

I had never really been in business before – other than the usual schoolboy schemes of the lemonade stall variety – but I knew enough to know that no man is an island. We all need someone to act as a counterbalance to our weaknesses and work off our strengths. Sometimes it's one person, sometimes it's a team, all of whom bring their unique talents and abilities to the table. Your family is often your network of support – and my advice to a budding entrepreneur would always be: listen to your family, accept their help, don't dismiss them out of hand.

Richard Branson in Screw It, Let's Do It. Expanded. Lessons in Life and Business (2007) Virgin Books Ltd. p14.

I've always had the intention of one day forming a company, employing some great people and getting back to team work. But why am I waiting?

Just because I'm currently freelancing doesn't mean other people should not be involved.

I shall begin by asking my parent's for their help and advice.

Design is Deeper Than Skin

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...



Shoe Salesman

Once again I'm entering scary but very exciting waters.

In fact for most of today – as I began to work out how to implement my plan – I've been full of nervous energy. I'll certainly be stretching myself in the months to come because I have to learn to conquer my worst skill.

Sales.

The last sales job I had was selling shoes. And I sucked at it. My technique went a little like this:

Customer: I'll take them!
Me: Are you sure? They don't quite fit properly and they're not real leather.
Customer: No, they're fine, thank you.
Me: See how they slip at the back? That'll give you blisters if you walk in them for any length of time.
Customer: H..
Customer: Why don't you try that new store up the road? Much higher quality.

And to be fair, it was much higher quality at the store up the road. Our store was buying cheaper and more cheaper goods and nobody wanted them. (Sure, I admit I probably didn't help matters).

The moral of the story is I can't help being honest.

About a year ago, I almost certainly had the skills necessary to be making a living from developing websites. But if I tried selling myself a year ago my sales pitch would probably have been: 'I can create you a slightly above average site'.

Since then, I've become a little obsessed with the subject of web development, design and programming. I shifted my focus away from getting a steady stream of work and put it squarely on learning to be better. I'm not sure how healthy it is to work seven days a week, but I'm pretty sure I've learnt a healthy amount about web development in that time.

It's time to see if sales is easier when you truly believe in what you have to sell.

Finding Contrast on the London Underground Map

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.

london underground map with added you-are-here symbol

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.

Yubico's Yubikey

Through the rather excellent Security Now podcast, Steve Gibson has introduced me to an emerging product from a new company called Yubico. By the sounds of things it has the potential to completely revolutionise authentication on the Internet. It sounds as interesting and revolutionary as OpenID, and can actually build upon OpenID to make it more secure.

I'll just give a really brief introduction because I'm not enough of a security expert to really explain this and the podcast does a much better job if you have an hour and a half to geek out on this. If not, it's something to pay attention to anyway.

Something you have

Some large companies such as Paypal and Verisign offer a key-fob/dongle to add a layer of security when signing in; making it multi-factor authentication.

(For the uninitiated, a password is basically a single factor authentication system and that factor is referred to as 'something you know'. It's secure unless someone discovers your password, at which point they can log into your system. Another factor is 'something you have'. This means that someone trying to log into your account would have to steal something physical from you in order to authenticate and this is obviously a lot harder than grabbing your password somehow. The key you use in your front door is probably the most obvious example of this.)

These dongles are small devices which produce a unique one-time password when you press a button. The password changes every time you press the button and has a limited lifespan. If anyone tried to learn the password they would be out of luck because it will expire by time they get to use it. This means you must own the dongle to get into the site. It adds the 'something you have' authentication and makes everything a lot more secure.

Yubikey Revolution?

Good so far. But the Yubikey is revolutionary for two reasons.

First: it is a USB key which is essentially a keyboard. This is a particularly good idea because it means there are no driver difficulties or issues with installing client software. You simply plug the key into your USB connection, go to the login screen and then press the button on the Yubikey. The Yubikey then spits out a really long one-time encrypted password and your computer interprets it just like you were manually typing it out on a normal keyboard. This makes it really easy to use and instantly compatible with pretty much any computer.

Second, it is open source. This means anyone can set up a server because all you need to pay for is the actual USB key. This makes it usable by more than a few small large corporations who set up an account with someone like Verisign.

The possibility of using this with OpenID is particularly exciting. One of the issues with OpenID is that you have only a single password that lets you into lots of stuff on the web. This means that if someone found out your password they could get into a whole load of your accounts instead of just one. The Yubikey makes your OpenID a whole load more secure.

So the Yubikey is really useful for small businesses and even single individuals. But it's also a benefit to large corporations because they can run the servers themselves; on an internal intranet if they choose. It's really a win for everyone (except Verisign, of course!)

As long as Yubico has the capacity to make these keys in huge numbers, I'm 99% sure this is going to be massive.

If you want to know more listen to the Security Now podcast and take a look at the Yubico website.

Outdoor MacBook

A huge reason why I'm choosing to freelance is the freedom it gives me to work when and where I like. When summer comes, the idea of sitting indoors and working drives me crazy.

Last year I really did go crazy. I had to sit in a darkened room (to help keep it cool) with the jet-engine sized noise of a fan whirring in the background keeping my computer chips cool, but doing nothing for my personal overheating problems. I had to escape to the outdoors during breaks to cool down (I found screaming helped too).

This year I have a laptop and today I've taken it outside for the first time.

I was a bit concerned at first because I thought the reflections on the glossy screen were going to make working impossible. Then I realised I had my sunglasses on; as soon as I removed them things became a lot clearer. But then I had another problem: the casing of my MacBook is white which glares in the sun with an intensity unmatched by Medusa. But moving to the shade cleared that problem up too. I'm still not totally happy with all the reflections on the screen, but it is at least workable.

My MacBook also seems to have a phenomenal battery life. I've gone to work a couple of times (when I need to go to an office) and accidentally forgotten my power cord. The battery has averaged a good seven hours which has practically got me through the day. That means I should be able to work outside for a good portion of the day without any power issues.

I'm very happy about this. Mankind was not built to spend the summer indoors.

It takes time

Film camera

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.