Blog Stuff we're discovering, learning, reading, watching, enjoying...

This HTML5 presentation is an easy to understand and exciting introduction to sensibly applied HTML5 techniques. Obviously there’s little point in viewing it in anything other than Chrome or Safari, or possibly Firefox 3.6, but if you can see it all then it offers a great demonstration of modern HTML5 capabilities. In Chrome on the Mac it did seem to stutter a little so there’s clearly still a few performance issues even in the most advanced browsers, but applied in a manner that degrades appropriately in other browsers there’s no reason not to start applying these techniques today.

I’m all for standard approaches to interface design and conforming to best practice and UI guidelines, but let’s face it, you don’t very often create magical interfaces that way. However, most of the application designs over at Well-Placed Pixels feel much more likely to catch your breath, whether by pixel-perfect information design or beautifully crafted and finessed creativity. An excellent resource when next needing application UI inspiration.

Google seem to be all about continual iteration and roll-out of small new features these days. Whether it’s visual tweaks to make the search box more obvious on their homepage, helping computers understand language or adding subtle intelligent enhancements to the search results. In the latter case, searching for “empire state height” would have highlighted “…the height of the Empire State building is…” whereas for relevant information types it will now highlight “…the Empire State building is 1250ft (381m)  to the top…”.

I guess when your core website is the most used site in the world and revolves around two pages [or increadingly one page due to the initial search box being built into browser interfaces... it took me weeks to notice the visual effects on the Google homepage] you’ve got a lot of scope to continually iterate and refine the experience.

I have to confess, until I read this article I knew literally nothing about CSS transitions. I hadn’t even considered they were possible, despite becoming fairly used to using other CSS3 features and to enhance pages for browsers that support them [drop shadows, text shadows, rounded corners, etc]. Apparently part of the delay regarding CSS3 transitions being implemented was a debate regarding whether transitions are ’style’ [and therefore part of CSS] or ‘interaction’ [and therefore part of scripting].  To my mind, they are certainly just style additions - mainly just enhancing a hover state or reveal that remains functional regardless of the effect/style used. The examples provided demonstrate quite appealing enhancements such as soft reveals of a drop menu or subtle glows on hover states, though the demo moving an object [a spaceman] from point A to point B seems to stretch the “this is just a style” approach and feels less obviously applicable to most web pages. So, using a compatible browser such as Safari or Chrome, check out the CSS Transitions 101 article at Webdesigner Depot. In fact, it’s worth comparing the article in a non-supporting browser too, just to remind yourself of the experience without the transitions.

Having been a very happy Google Android user for some time, when I recently decided I could no longer get away with being a mobile professional who hasn’t used an iPhone as their main device I was surprisingly unexcited about the switch. Furthermore, I’ve had an iPod Touch for ages so it’s not even as though the iPhone held much mystery. Still, it could be ignored no longer (not now it’s on Orange at least) so I thought the least I could do is report back my findings as someone who’s genuinely invested a lot of time and a bit of love in the Android platform. So, with no particular comparison approach in mind, here’s some thoughts…

• iPhone SMS client. Just how bad is this fundamental communication element of the phone. It looks awful and is highly restrictive in that SMS is so often a trigger to other activity such as a call, calendar event, etc. Criminally bad in my opinion and utterly un-apple-esque.
• Similarly, how long will Apple persist without better use of context actions. Android is fantastic at this… Just hold down over a picture, SMS, contact, etc and up pops a menu of all the stuff you wanted to do. Very occasionally this is implemented on iphone and when it is I find it works well (off the top of my head, I think it’s used when you save a safari bookmark).
• I miss the trackball on Android. Repositioning the cursor to edit text is more cumbersome with iPhone’s zoom method, particularly if you just want to go back a few characters.
• iPhone’s screen is glorious (the screen on my new MacBook Pro is equally superior over all PC laptops). Oh, and the sound quality. Oh, and the performance. Oh, and the fact that everything just works. Pretty much flawlessly.
• iPhone’s soft keyboard easily beats Android’s. The Android has a very good hybrid mini-qwerty keypad mode, but that seems a bit like a shortfall of the full size qwerty. (Note: the hard qwerty keypad devices on android are excellent).
• Android’s google-centric always updated sync. is just brilliant if you’re Google-centric (e.g. a Google Apps user). With a little hackery, I’ve managed to get the iPhone to sync with Google Apps just the same but it wasn’t as easy out of the box.
• The iPhone copy n paste is way, way better.
• Most critically for commercial success and end-user desirability, the iTunes and App store ecosystem is the stuff android can only dream of. In fact, no other hardware/software package on any platform can match it.
• The iPhone is pretty heavy. But after a while you forget, and put it down to just being top-end build quality.
• iPhone battery is better, despite what people say.
• It feels initially as though the android is quicker to navigate around - especially regarding multiple tasking and app switching. However, once you’re into the iPhone’s “everything starts on the honescreen” method it gets pretty quick.
• Even with unlimited desktops, the iPhone is much less structured. This can be confusing when you get to having a lot of apps. And you will do.

Overall, the iPhone has become a clear winner during the 6 weeks I’ve written this. The alround user experience is almost perfection (except the SMS App, and even that I’m beginning to forget about). The Android is a very competent platform, and I expect it will go on to great and more varied things than the iPhone. However, the iPhone, as with many Apple experiences, is like a lesson in how to do things right. The icing on the cake is finding the many little gems of interface intelligence and design that they don’t even bother to tell you about - they just let you discover. iPhone users will know what I mean, and if you don’t then check back here and I’ll collate some soon.

(just to be clear, I’m comparing an HTC Hero to a 32gb iPhone 3GS. Oh, and I wrote this post using the Wordpress 2 App over a couple of days sat on various trains).

Hopefully no major surprises to web designers and developers in this 10 Usability Crimes You Really Shouldn’t Commit, except that one which I think is often ignored these days is maintaining a visual indicator for links that have already been visited. Often, from a visual perspective, having unvisited and visited text links appear in two different colours can look slightly untidy but it’s a valid point that the usability issue of not recognising that you’ve visited a link previously has a potentially greater negative impact on the user experience than the different colours.

At the FOWD tour event in Leeds earlier this year, Brendan Dawes gave a great talk on the importance and role of beauty in everyday life and how this should be applied in interface design and digital systems. The Small Worlds Flash game is definitely an example of this. I’m not a gamer [not by modern standards, though I'm still weak to temptation when it comes to any release of FIFA on XBox 360], but there is something magical about the Small Worlds game that just draws you in. Despite winning a recent gaming award, I guess Small Worlds won’t be challenging CoD7, WoW9 or DGACAG5 in the annual gaming honours, but it’s a fine way to waste 10 minutes online, and might just remind you that small can certainly be beautiful.

Two totally different new websites came to my attention today…

Javari.co.uk is Amazon’s attack on the shoe market. I understand it’s been running in the US for a while and has already made a massive dent in the traditional shoe retail business. Amazon have tried to remove the barriers to online shoe [and presumably clothing] purchase by offering free one-day delivery, free 365-day returns and a fantastic product preview experience including high-res ‘exploratitive’ zooming of multiple product photos. It’s not the same as trying on a shoe and walking round the shop but if the price is right then it’s got to be tempting.

Jimcarrey.com on the other hand is a totally different approach. As rich Flash portfolios go, this one is going to be hard to beat. You can see the creators were basically given a blank sheet of paper, probably a blank cheque and certainly told not to hold back on the bells and whistles. Every possible effect and embellishment has been used but, along with a slightly eclectic and twisted creative direction, it completely fits with what we know of Jim Carrey. Great execution all-round and a worthy use of 10-minutes spare time.

Econsultancy’s article describes a handful of rules that many information-centric mobile sites would do well to learn from. The tips in Mobile news sites: best practice tips range from technical issues such as auto-redirection to the mobile site from the full website [if searching from mobile] through to content issues such as providing as much content as possible and allowing commenting. The article doesn’t dig much deeper than some introductory tips but it’s a good baseline to start from.

Something I’m often asked is “What’s the point of building a mobile-specific internet experience when many new phones have the capability to browse full websites?”. [Or even worse, people usually say "my iPhone" rather than "many new phones"]. I’m a strong believer that a mobile-specific service will always provide a better user experience than merely viewing a web-oriented one on a capable device. Even though there are a number of technical reasons to consider [connection speed, screen size, processor speed, lack of rich-media support, etc] there are far greater and more impacting user-focussed reasons, including user context, use of mobile enablers, stronger likelihood of task-oriented activity, appropriate interface design and navigation approaches. The summary from mobiThinking in The mobile Web is dead… Long live the mobile Internet explains some of the reasoning in more detail.

From Wordcamp Seattle, Eric Amundson’s 5 Free Ways to Bulletproof Your WordPress Site provides a great 5-minute video overview of areas to strengthen your Wordpress site, including security, usability and user experience. We’re already using many of his techniques but two new plugins I now have to investigate are WP Super Cache to enable cached HTML pages to be served instead of server-greedy dynamic ones, and Relevanssi which allows for relevance-based search results instead of the default chronological results that Wordpress generates by default.

Don’t mistake this for those childhood ‘colour by numbers’  books where each numbered area could be matched to a colour. Google Assaults Designers With Data is an interesting report from a recent talk by Marissa Mayer, “keeper” of the Google homepage since 1998. In her presentation, Marissa outlines just how much of “the devil is in the detail”, and how running a service with a simple interface is not a matter of sitting back and resisting adding complicating features, but of gradually fine-tuning, testing and iterating. It might not be the inspirational, creative approach to design that we all love to get excited by, but it demonstrates results and proves that versatile modern day designers need a toolbox containing more than just pure creative flair.

One of the most prominent utilities that we now take for granted on the web [and to a lesser extent on mobile] is that of URL Shorteners. These services create a short url that redirect a user to the original destination whenever visited, sometimes with additional services inbetween such as collecting traffic statistics. The first well known service was tinyurl.com, but there are a range of other choices now including bit.ly and is.gd. Unfortunately tr.im - one of the relatively prominent services recently - has just announced that is to discontinue it’s service, and this has raised some debate about a potential over-reliance on URL Shorteners and indeed the risks of relying on web startup services on the whole. E-consultancy have a good summary of the debate - What’s bad for tr.im is good for bit.ly, recognising amongst other things that Bit.ly’s relationship with Twitter as it’s default URL Shortener has allowed Bit.ly to become the market leader and potentially the safest bet for the future.

From a user experience perspective there are also growing concerns that using URL shortening is a poor approach anyway. For example, Webmonkey suggested in April that, at the very least, one of the problems with shortened URLs is that you have no idea where they go. Additionally, as in the case of tr.im, if a URL shortening service closes down then [soon after] so all their links, because the cost of the bandwidth in redirecting all those URLs is one of the major overheads for such services. In an age of web semantics, better url schemas and a stronger focus on user experience, it does seem that the future for URL shorteners isn’t completely safe.

Our blog has been suffering a little lately… summer attitudes, holidays, deadlines, etc. However, via Twitter I came across the Design for Service blog this week, offering excellent insight and resources around thinking and designing using a Service Design approach. Whilst quite niche, I think the general thread of the site demonstrates the important but often misunderstood role of Service Design within the digital/interactive environment.

A piece of work created at the MEX Conference in May shows the interesting, if unsurprising, disconnect between what mobile operators and the end consumer see as key elements of the mobile user experience. The mobile user experience is intricately complex… hardware/devices, network connectivity, differing usage requirements between users, content and services, billing, enablers, marketing/branding, etc. Whilst it seems unlikely that the ‘building blocks’ in the MEX diagram would ever be identical on both sides, it is hoped that they might one day be complimentary. Until the mobile industry adapts and recognises this it appears that mobile user experience will continue to disappoint many consumers for a variety of reasons.

NOTE: If the title to this piece, and perhaps that of the original MEX content, seem familiar then you’re probably thinking of the excellent book by Jesse James Garrett, The Elements of User Experience.

What might happen if we were really connected all the time? Newspapers would actually have video in them, book reviews would appear on book covers as you pick them up and you could check the time just by tapping your fingers on your wrist. Or at least that’s the vision in this MIT demo.

Two things strike me about this excellent video from MIT. First, you can’t knock someone who’s prepared to walk around looking as ridiculous as the guy covered in all the gear. I’d do it in a flash if it were me. Second, I love seeing the incredible approach at MIT where so much stuff actually gets prototyped. Don’t bother pontificating about how it might work. Build a prototype and see how it might work.

Some interesting perspectives regarding whether any of many’other’ app stores [Google's is out, Nokia due imminently, Blackberry and Microsoft on the way, various operators are live or in the pipeline, etc] can expect to have any of Apple’s success. Without the all-round integrated experience of the iTunes ecosystem it’s hard to see how any other app store can deliver quite as good an experience but time will tell.

We’ve been following the progress of the relaunched Skittles site with interest to see if they’d be sticking with their relatively brave approach to creating a web experience relying almost exclusively on utilising the big destination sites such as YouTube, Facebook, Flickr, etc. The site itself doesn’t offer much that’s new except for the blatant approach to exposing the underlying web properties and a quite nifty [though also not new] use of a floating Flash ‘controller’ to keep it all together. Wonder how long this will last and/or if other brands will follow suit.

Not much point in pretending we’ve had chance to play with iPhone OS 3.0 [it's not officially available until summer '09] but it looks like a pretty significant update and shows just how serious Apple is about staying ahead of the field. Check out the excellent Gizmodo review and some great screenshots from Engadget.

This Econsultancy article about how Amazon made $2.7bn with one small tweak offers an excellent insight and short analysis of the value of constantly fine-tuning user experience to make the best of your content. This is particularly pertinent to user generated content which can vary hugely in it’s quality and value to other users. The article also demonstrates that content requirements change over time. In this case, as the number of comments grow they initially become useful but then after a certain amount it becomes difficult for a user to know which ones are valuable. Other similar scenarios may be to promote proven “respected” reviewers over others or to recognise that some products change over time too and therefore the respective reviews may have differing value.

Apple have implemented one of the best known gesture based interaction models on their laptops and iPhone/iPod Touch, but Oblong industries, inc. have gone way beyond this as they try to bring to reality a Minority Report style interface.