Speedy-ness

The iPhone has been a catalyst for a number of mobile versions of popular sites, including many I use most days:

Xero, NZ Herald (*), TripIt, Kiwibank, Google Reader.

(*) if you haven’t discovered m.nzherald.co.nz I recommend you check it out – I’ve completely abandoned Stuff since they launched this.

I’m interested to see how these mobile versions have been designed.

They don’t try and cram in too many features.  They use super large fonts and large buttons, and as a result there is not a lot of room on each page for too much noise.  The things you can click (or do we say “touch” now?) are immediately obvious.

They are not bogged down by lots of unnecessary images or scripts … so they are FAST!

Here is a quick comparison of the corresponding login/home pages:

Site Version Page Size Download
Xero Standard 938.4kB 7.86s
Mobile 12.7kB 2.92s
TripIt Standard 334.2kB 8.15s
Mobile 13.7kB 1.78s
NZ Herald Standard 595.8kB 8.89s
Mobile 126.5kB 3.58s
Kiwibank Standard 69.5kB 4.79s
Mobile 34.3kB 3.06s
Google Reader Standard 71.1kB 3.82s
Mobile 3.7kB 1.12s

I realise that this is completely unscientific.  For example, I used an empty cache in each case.  No doubt many of these sites are faster the second time you visit because of caching.  I also tested only one load of each page, and there are any number of things which could have caused the speed to vary.  And it’s a somewhat random sample of sites to choose.  But, I hope it is a rough drawing of the point I’m trying to make nonetheless – that is, the mobile versions are much smaller and as a result much faster to load.

I wonder how much of this thinking will filter back into the main standard browser versions of these sites?

Hopefully designers and developers will start to see the benefits of some of these things (less design, bigger fonts, etc) into ALL of the sites they work on, whether intended for mobile users or not.

At the extreme of this trend is a site like Muxtape which only has a mobile version of their site.  If you visit using a normal browser, you get the mobile version – a simple, fast-loading page with big obvious design elements.  In other words, you get a great usable webpage.

Which makes me wonder … if I’m just wanting to see the latest headlines, check my balances or lookup a travel booking, why wouldn’t I load the mobile version of these sites in my standard browser, rather than waiting around for the full versions?

Loving TripIt

I’ve raved about TripIt here before.  But, it’s worth repeating.  If you travel a lot and don’t use this service you’re missing out.

Here are a couple of aspects of their service which I’ve only recently discovered, which make it even better …

1. m.tripit.com

They now have a version of their site designed specifically for mobile browsers, so you can quickly and easily get details of your itinerary and bookings from your phone on the go.

They’ve even included a “Check Flight Status” link for upcoming flight bookings, which is very handy.

More information

2 iCal feeds

Previously whenever I booked flights I would manually add the details to my calendar – including times and flight numbers etc.  I would also usually enter an all-day appointment for the days I was away, so I didn’t accidentally make other appointments when I would be out of town.

TripIt can take care of all of that for you automatically.

Just add the iCal feed to your calendar and any trips and flight bookings will automatically show up on the appropriate dates.

Those two things aside, the single greatest feature of TripIt is still the complete lack of data entry required – just forward on the confirmation emails you get from airlines, hotels and rental car companies and they will pull them all together into an itinerary for you automatically.

Magic!

Affordance

Affordance is a simple but powerful idea.

I first came across is in Don Norman’s book The Design of Everyday Things, but according to Wikipedia it’s much older than that.

At Webstock this year Liz Danzico defined it as: “providing uninscribed and detectable cues that loosely govern a set of actions or interactions”.

I would say: “make it obvious to me what I can or should do with things”.

The classic textbook example …

When you approach a swinging door how do you know which was the door opens? Do you push the door away from you? Or pull it toward you?

The “handle” that’s placed on the door should make this obvious.

Correct:

Picture: http://blogs.technet.com/ewan/

Incorrect:

Picture: http://www.iqcontent.com/blog

If you think about it the flat piece of metal with the word “push” commonly placed on doors is an odd design element. It has no real purpose other than to remove the doubt about the direction of the door, and perhaps to indicate where is an appropriate place for your hand to push. But, we’d struggle without them.

Some other examples from web design:

  • Links should look like links (i.e. normally blue and underlined)
  • Buttons should look like buttons (i.e. rectangular with a label, and probably with a subtle 3D effect to give the impression that you can press them in)
  • Scroll bars should look like scroll bars (i.e. to the far right of the page and, ideally, using standard controls from your operating system)
  • Tabs should looks like tabs (i.e. with the selected tab appearing to sit physically in front of the other tabs)

Notice a pattern here?

What other affordances make your life easier every day without you even noticing?

Playing with colours

I’ve been doing a bit of design work over the last week or so, which has been fun. I’m not a great graphic designer, but I can do enough to be dangerous. I enjoy having the freedom to experiment with different ideas without having to bother somebody else to do the heavy lifting.

This is the first time I’ve really got stuck into this sort of work since I switched to my Mac, so I’ve had to get used to a bunch of new tools.

Coda LogoFor HTML and CSS I’ve been using Coda, which I chose basically on the strength of its logo (see right), but which has turned out to be a nice tool. I especially like the built-in reference books, which are great for somebody like me who doesn’t spend all of their time coding and needs regular help.

http://www.panic.com/coda/

For image editing I’m using Pixelmator to replace my old favourite on Windows, Paint.net. It’s taking me a while to get used to this, and I’m not sure I’ll continue with it beyond the free demo period. I am feeling quite slow using it, and it’s missing a few of the things I use a lot – for example, it doesn’t support vectors at all so there is no rectangle tool, instead you need to select the required area and then fill in the selection which seems cumbersome when you’re doing it a lot. I’m also pretty slow with it generally, but I have a feeling that will improve once I get on top of the keyboard shortcuts etc. It’s very pretty, but I’m not sure this is the right tool for the job I have in mind.
http://www.pixelmator.com/

I’ve had a quick play with Inkscape, but it uses X11 and doesn’t really feel like an OS X application.

What other alternatives can you Mac users recommend?

(In looking around I did find a really cute tool called Scribbles. If you’re into graphic design I definitely recommend having a play with this, just to check out the smart interface, including a whole new approach to layers which seems really intuitive. It’s designed for kids, but I suspect that kids of all ages could have a lot of fun with it.)

I’ve also found a couple of other useful tool-lets which I thought I’d share (for my own future reference if for no other better reason):

At Webstock Dan Cederholm talked about basing a colour palette on a photograph from nature. This tool from De Graeve makes it easy – simply upload your image and it will pick out a range of complementary colours from the image. It even gives you the hex codes:

http://www.degraeve.com/color-palette/

They also have a simple fav icon editor:

http://www.degraeve.com/favicon/

HexPicker Preview

Robin Wood has a really useful introduction to the OS X Colour Picker, which is actually much more powerful than it first appears.

The magnifying glass and swatch drawer were both new to me.

And, what’s more the picker can be extended with third-party add-ons.

I found this from Waffle Software, which adds a simple hex picker tab (see screenshot right):

phttp://wafflesoftware.net/hexpicker/

Fun, fun!

What other tools are people out there using for this sort of thing? I’d be interested to get your suggestions.

:-)

Apple Design Genius

Four snippets from one interesting article

“To whatever degree Apple can be said to make products with a distinctive genetic code, they can also be said to have inherited most of their traits from a single parent: founder Steve Jobs.”

“There were three evaluations required at the inception of a product idea: a marketing requirement document, an engineering requirement document, and a user-experience document,” [usability legend and Apple’s VP of advanced technology from 1993 to 1998, Don] Norman recalls. [Senior VP of creative at Frog Design, Mark] Rolston elaborates: “Marketing is what people want; engineering is what we can do; user experience is ‘Here’s how people like to do things.'”

“The businessman wants to create something for everyone, which leads to products that are middle of the road,” says [Apple’s director of industrial design from 1989 to early 1996, Robert] Brunner. “It becomes about consensus, and that’s why you rarely see the spark of genius.”

“Jobs is a dictator, but with good taste.”

There is something to be said for a dictatorship like that, I guess?

Canonical web design

I’ve mentioned this Joshua Porter post to a number of different people over the last few weeks. It should be compulsory reading for any designer working on an interactive web site …

“You can’t appreciate a web site in the same way you appreciate a logo or a poster. When a logo works, it makes you think certain things. Makes you think about the company, their influence, their reach. It’s about branding. The IBM logo suggests a solidity, the rock that is Big Blue. At this point, after you’ve thought these things, you’re done. There is nothing else to do. Maybe you’ll consider their products in the future.”

“When a web site works, on the other hand, you’re using it to do something. You might be looking for your next favorite book on Amazon, or searching for a critical piece of information on Google. You’re using the web site…interacting with it, having an experience that, contrary to logos, involves you. You are inputting information, asking questions, getting answers.”

“So, as a web designer, there is no analog to ‘look at this logo and see how it stands for a company’. That’s relatively easy for graphic designers because we can quickly appreciate the way a logo graphically depicts some attribute of the company: ‘solid, blue, Big Blue, trustworthy’. Even if we don’t like the company or if its never done anything good for us, we can make this judgment of the design of the logo.”

“But in web design, we can’t pass such sophisticated judgement on a design without having an actual experience with the web application itself. Without actually experiencing the value first-hand, we can’t look at a web site and say ‘hey, that web site is well designed because it represents the company well’. This is the primary disconnect when talking about judging great web design. You’ve got to experience it in a real way to know if it is great.”

If you want to read more I recommend you start with his “Five Principles to Design By” on his about page.