Notes from Paul Annett Talk

Update – some links:

Pauls deck/audio (needs a bit of time to buffer)

slide deck


Standard live blogging alert

I’m here at GumTree offices in Gumtree, thanks kindly to @cyberdees++ letting me know about this lunchtime talk. Paul Annett (@nicepaul) just gave a fun talk about “oooh that’s clever” design, which contains lots of fascintating ideas and examples around the subtle things, the hidden and unexpected and often functionally pointless, that delight people and get them talking.

Is this Stuff Relevant? 13 Million People Can’t be Wrong

To demonstrate how people are fascinated by little secret details, he begins talking about his magic trick he posted to youtube, “This’N’That magic trick” with no less than 13M views. The interesting thing is the attention to detail people have, where the most commented thing is the few frames in which the third “magic card” is exposed. It’s like they have now discovered a little secret they can tell their friends about.

Offline Examples

You see similar things offline too: (sorry no links – I’ll just let you google these)

  • The hidden arrow in the FedEx logo.
  • The hidden bear in the Toblerone “mountain” logo.
  • The Aerosmith logo, which still says Aerosmith upside-down.
  • Darren Brown’s Trick or Treat logo, where the Trick is the Treat logo upside-down.
  • The “truce” logo, where another “truce” fits into it.
  • The Venetian Snares logo.
  • Mickey Mouse symbols – Disney hides them in different places, e.g. a silluoette in a picture, a figure in a man-hole cover in the theme park, and even a field on Google Maps.
  • The bottom of an Innocent Smoothies carton, containing various messages.
  • The inside of Moo card packages, which contain little hidden cartoon figures when you dismantle them.

Hardware and Software Easter Eggs

This has been going on a while in technology with easter eggs. There are hardware easter eggs such as a cheetah on a microchip. Look at the glow an Apple Mighty Mouse makes. An irregular pattern? No…it’s definitely a real mouse outline. And of course software easter eggs, e.g. “about:mozilla” in Firefox, the saga continues.

The parallax employed on the Silverback website is a well-known example of this. (In fact, @psd talks us through it on I Can’t Believe It’s Not Flash.) Parallax has been used elsewhere since then. The holding page for twequency used it nicely. Tweet1 also has some lovely effects like this, and also has an easter egg figure (at least one) appearing. A lot can be done with parallax, e.g. you could use it jumble sites around. The effect here is just a demo, but could be expanded to something more.

It adds to the brand of a large company when you see it has a sense of humour, e.g. zooming into Google Moon would give you yellow cheese. Try “ascii art” or “recursion” searches.

dConstruct site had a nice easter egg where the hidden top bar would switch different stylesheet. Some people said it detracts from the experience, breaks proper design principles, etc.; but the point is, no, users can still get everywhere, it’s just a bit of a delighter for people in the know.

Transparency

There are many interesting uses of transparency:

  • Modernista has a funnny iframe idea. Good example of transparency, which is a concept that’s under-used. Skittles also did this, much controversially, partly because they copied the idea from modernista.
  • This trailer shows fake browser with things breaking out of it to promote the movie’s 3-d ness.
  • fatuus.de
  • CSS Zen Ocean (zen garden project)
  • webleeddesign.com
  • Wario Land video breaks your expectations of YouTube, such a well known site structure. Good example of a commercial application. Likewie, iPod Touch ad on Yahoo! Games.
  • HEMA similarly breaks your expectations of an e-commerce site.

What’s the Point of All This?

Kano Model of Customer Satisfaction: 2 dimensions. Customer satisfaction and Execution. “Performance needs” tend to improve both at the same time, e.g. quick hotel check-in; quick e-commerce delivery. “Basic needs” where execution is higher won’t delight (ie improve satisfaction) but they are just expected and their absence will cause negative satisfaction. “Excitement needs” – e.g. these little design features we’ve been talking about.

These change across time. What excited you last year becomes expected this year, i.e. as enough time passes, the expected need becomes a basic need.

Q&A

I asked paul about how to get these features known, when you obviously don’t want to just blab about them on your blog. With big sites, you can rely on people to discover these things by accident or investigation, but with little sites, they could sit for years without anyone spotting them. He mentioned it could be as simple as telling a few friends and see where that goes as one route. A more technical trick is positioning some text outside the document. Users will see it when they zoom out, and it would also be interesting to experiment with an image at the edge of a document turning out to be something unexpected when you zoom out to see the whole thing. “View Source” is another common thing you can play with. Tangentially related are playful copyright messages and 404 pages.

Someone mentioned “contextual delighters”. Things specific to certain users. e.g. “Welcome fellow Reddit user. Could also do the “styling visited links” hack to freak people out. Who’s going to make a site where your website tries to log into other websites using the same username and password, then says “actually you used the same password on flickr, so please change it”! (Paul urges us not to try this at home!)

Live Blogging Open Source Show and Tell (OSSAT) at TheTeam, November, 2009 (Part 2)

standard live blogging warning

Continuing on from part 1

Phil Hawksworth: Playing with Each Others’ Toys

Phil describes the open source spectrum, from open-fan to open-curious to open-skeptic.

Open source is about sharing, so in that spirit, he’s going to show us some toys he’s made.

First up, Polaroiderizer. One of his lessons from this was don’t register a domain name that can be spelt and pronounced in many different ways! But back to Polariser…

The tool is made with simple technologies, requiring nothing more than some text files. HTML and CSS, JQuery, Flickr API. Able to be put together in just a couple of evening’s work.

Next specimen is Pinboard. Similar tech. This time, there’s a server, so he’s used the excellent Sinatra. Along with Ruby and SQLite. He did the whole thing in Heroku, pushing to it via Git.

And then there’s vlolly, Phil’s ticket to an early retirement as soon as it goes viral. Another open source project with Ruby, using base62 gem to generate unique IDs.

Rain Ashford: Open Source Gaming for Handhelds

Having convinced us she is a true gaming geek, Rain walks through a few of the nicer open source games out there, including:

  • Malice
  • Lemmings
  • Word Up!
  • Meteorea
  • Setsuzoku no Puzzle (hosted on “DS Scene” so it must be cool)
  • Pocket Physics
  • NitroTracker
  • FreeDroid Classic (based on C64 “Paradroid”)
  • XRoar (Dragon emulator for DS and GP32)
  • Nethack (DS and GP32 ports)- still going on strong

This session yielded the most challenging question of the night: Can you smell a wumpus?

Robbie Clutton: iPhone Dev

What’s all this objective C? A bit like C and C++, but also message based like Smalltalk, which is dynamic but not, and object-based like Java. In other words, it’s a different paradigm to what you’re probably used to and it gets tricky working out which languages to take design patterns from.

When Robbie started looking at how developers can embed a web view into their app, he started wondering about the possibilities of developing an app that’s mostly a plain old web app. Doing this would make development incredibly easy and you could get data from the local device in addition to the cloud. However, you don’t get any device integration, and some events like gestures don’t translate well.

Enter Phonegap. It’s open source, cross device, and gives you integration with native features like vibration and the accelerometer. The way they do this is quite neat – your app basically connects to a phonegap server. So you do things like vibration by making standard Ajax calls. (The calls actually go to URLs with “gap://” protocol). Demonstrating the power of open source with a strong community, Robbie’s submitted patches which have gone back into the product.

HTML 5 is a better way to do it in some respects. One of the obvious downsides is it doesn’t show up as a native app, though you can still provide a HTML5 manifest so the app loads straight from the phone. There’s also the question of talking to specific device features. You can do it in a limited form with device-specific meta-tags, but of course it ruins the whole standards-based approach to web development; move to another phone and you’ve got a port job ahead of you.

One of the nice things about this approach is you can use it elsewhere too, e.g. if you can put the whole thing in standard HTML, CSS, and Javascript, you just create a simple XML file, run “adl application.xml”, and you now have an Adobe Air powered desktop app.

Live Blogging Open Source Show and Tell (OSSAT) at TheTeam, November, 2009 (Part 1)

standard live blogging warning

I’m here at TheTeam offices in London Bridge, with a number of my Osmosoft colleagues for this open source event.

Event Announcement

The agenda:

  • Iain Farrell, Canonical – Ubuntu Update
  • Julien Fourgeaud, Symbian – Managing the Symbian community
  • Jeremy Ruston, Osmosoft – HTML5 and the slow death of Flash
  • Leisa Reichelt, Disambiguity.com – Drupal 7 Update
  • Phil Hawksworth, The Team – Playing with each others toys: Developing with open technologies
  • Rain Ashford, BBC – Open Source Gaming for Handhelds
  • Robbie Clutton, BT – iPhone development using web technologies

Canonical: The Ubuntu Developer Summit

Iain explains the process of updating Ubuntu. Happily enough, the release cycle is 6 months, coinciding nicely with these OSSAT events, hence the trend is set for an update each OSSAT.

Every 6 months, there’s a big Ubuntu shindig; this is (I think) just after the last release ships. All ~240 employees invited and ~30 invited people from the community. Room for talks – the schedule is always evolving even during the conference – and spaces for just hacking. Very online too for those who can’t make it – stereo recording in every room. All the audio, mixing, publishing, and so on is power by the magic of open source. Naturally.

The design process is generally speaking 6 months ahead of the development process, i.e. in cycle t, they’re thinking about what they’ll be developing in cycle t+1. For users, a 6 month cycle means lots of incremental improvements, as opposed to

Julien Fourgeaud: Symbian’s Community Programme

Nokia started as an alliance and Nokia then purchased Symbian Ltd. When that happened, there was a move to open source the code. Julien explains the ecosystem – 90 people maing up the foundation (people in US, UK, Finland, Japan, China, elsewhere) – working with a large community of consumers, ODMs, OEMs, and operators. They often run BOFs embedded in other conferences.

What’s Symbian doing to get consumers what they want? They’re creating initiatives to get agile and engage in dialogue going with consumers. [I would have liked to see more on this, but it sounds like they're just at the start of the path here.]

Of possible relevance to the next talk, Symbian’s portal is a Flash-heavy representation of standard web technologies such as hyperlinks …

Jeremy Ruston on HTML5 and the Slow Death of Flash

Jeremy points out he’s dogfooding by presenting in Cecily, his 3D zooming and panning interface powered by open web technologies. He points out the anti-Flash vibe isn’t new, with Jacob Nielson having declared Flash “99% bad” back in 2000. A few of the problems with Flash are:

  • Battery drain
  • Crashy
  • Can’t exploit hardware acceleration (except video and certain blitting operations) – the operations of HTML5 have been designed to take advantage of it
  • Big opaque ball of bits – can’t reach in and get at the data/content inside
  • Controlled by media interests (e.g. to ensure ads are watched)
  • Breaks the web UI, e.g. browser navigation, text selection, accessibility
  • Not properly open – the license stipulates for what purposes you can use it (restricts uses such as downloading video)
  • Not compatible with open source – can’t ship as part of open source; so a pain for users as it requires a separate download.

Jeremy shows Chrome Experiments and I Can’t Believe It’s Not Flash (the site I made with @philhawksworth which should really be launched at some point. ahem.)

He walks through the history of Flash. He explains there was a time when they looked quite innovative, but it’s become more closed systems and walled gardens, with silly license fees. So a young person who wants to get into the industry is required to pay 500 quid to get started with it.

Where does HTML5 fit in? A couple of weeks ago, When Can I Use launched, and the meta-message of that site – when you look at the complicated matrix of HTML feature support – can be interepreted as “Damn, HTML is complicated”. This led some to say – why would I want to use HTML5 when I can get it up and running, cross-browser compatible – with Flash right away. So Jeremy’s call to action is to take a few steps back and build some kller authoring tools that let us do similar things in Javascript.

In Q&A, @psd points out that Flash lets you make nice toys, but HTML5 lets you build something better than Flash, i.e. the data inside there.

Drupal 7 Update

Leisa Reichart explains the design work going on with Drupal 7. Where most open source (including Drupal) is done bottom-up, grassroots, stuff, there’s an element of top-down design here. Leisa’s talking about “open source design” (#d7ux), where she’s spent around 85% of her time engaging the community to help with design, rather than just doing it herself. The community includes end-users, agencies whose customers are using the CMS, and also other designers and usability studies. (Reminds me of the message in the community session at OWF – don’t just engage programmers, but also translators, designers, tech writers, etc.)

They set up a WordPress, yes WordPress, blog to act as the community portal; because (a) Drupal takes too long to get a very nicely designed blog; (b) it sent out a message to the Drupal community and got them engaged.

She also shows a nice eye-tracking study, something you don’t see much in open source land.

Embedded Images in TiddlyWiki Under IE6 via MHTML – Proof-of-concept

tiddlywiki mhtml images (by mahemoff)

I only came across the MHTML image hack over the weekend, while listening to @jeresig on the new jQuery podcast (incidentally not the only jQuery podcast to be launched in the past week or two).

The MHTML image hack lets you embed images with text, just like ye olde data: URI hack, but in a way that works for IE6. MHTML is MIME for HTML.

Of course, I immediately wondered if it could work in a single-page web app like tiddlywiki, and it turns out it can, though my quick exercise still has some problems.

IE6 TiddlyWiki images demo here

As I wrote on the demo itself:

Normally, images are contained in a separate location, pointed at from HTML IMG tags or from CSS background-image properties. However, Tiddlywiki is a style of web app where everything resides in one file. So how to include images?

The usual hack is to embed data: URIs (http://en.wikipedia.org/wiki/Data_URI_scheme). However, no go for IE6 and IE7. Hence, a “newer” technique – newer meaning recently discovered. That is, MHTML (http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/).

I was curious if MHTML worked in single-file HTML pages, reading off a file URI, and to my surprise it does. That said, it’s not perfect at all. Firstly, I had to hard-code the location, because I don’t know how to refer to “the current file” within the MHTML link. (I suppose a workaround would be to output the image file and refer to that with a relative URL, but we lose the benefit of everything being in one file.) Secondly, I played around with various base-64 images and this arrow one (from the phpied.com demo) was the only that worked :(.

So it’s a proof-of-concept with many gaps left for the reader to fill!

Hopefully people play with this further. At 3002 days old and counting, your grandpa’s browser isn’t going anywhere fast.

Whoa! jQuery’s Adding User Comments to their Docs

I just heard on the new jQuery podcast that jQuery docs will be getting comments. jQuery just got a whole – even more – useful. This is direct from the horse’s mouth, an interview with jQuery head honcho John Resig.

I’ve felt for a long time jQuery has been ahead of the pack with its documentation, and since then both jQuery and its docs have gone from strength to strength.

One thing I was still missing though is user comments.

PHP leads the way here, with the official API docs allowing user comments at the bottom (example). No-one can anticipate all the issues that will arise, so why not open up docs to the developer community? Allowing user comments is also an easy way to help keep the docs up to date (if something of a compromise.) It could also be done as a wiki, if the wiki is managed well. (The Rails wiki is a good example of a well-maintained wiki that receives frequent contributions from people in the know.)

I was missing it until I heard that announcement. Again, jQuery’s leading the way.

I realise there are spam complications, but user comments are a no-brainer for making documentation useful. I continue to derive huge benefit from user comments. (To wit: The user comments about random number seeding were of vital importance in the making of the site I realised earlier today. I use them pretty much every time I have a PHP problem.)

I’ve even thought of making such a project myself, so much did I miss doc based comments.

The docs are being migrated from MediaWiki to WordPress. FWIW I think the OWF could benefit from a similar architecture if the wiki is going to engage with the community. As I’ve learned from AjaxPatterns and maintaining the tiddlywiki comments plugin, most people would rather append comments than updating a wiki. Updating a wiki is intimidating for some, and in any event, requires much more thought in order to make it coherent. Comments tend to be easier to moderate too because of their atomic nature.

Anyway, great news for jQuery and the community!

IE6 Is Older Than Your Grandpa

Internet Explorer 6 - Wikipedia, the free encyclopedia (by mahemoff)

days since August 27, 2001 - Wolfram|Alpha (by mahemoff)

What is “IE6 is Older Than Your Grandpa”?

IE6isOlderThanYourGrandpa is a site I launched today to commemorate IE6 turning 3000 days old. A milestone like that should be an interesting piece of trivia, like celebrating the birthday of the tape recorder. However, IE6 is still in wide usage today, making this milestone more tragedy than trivia. 3000 days in internet time is the equivalent of several decades in human time; we’ve seen many critical developments on the web, none of which were anticipated by IE6.

I know something else that IE is older than.

Great, please add it to the comments below or let me know, preferably with a wikipedia link. If it’s well known to the global community, I’ll add it to the site.

How do I know if I’m using IE6?

Visit this site to find out.

(To those who can’t believe this question has any purpose…see here.)

How does IE6 hold users back?

IE6 holds end-users back in many ways. It runs dynamic websites slower than modern browsers. It goes against many web standards, so applications often don’t work as well. As time goes on, and it becomes more and more ancient and less and less popular, web developers will simply stop supporting IE6 for certain features, or just give up on supporting the browser at all. Finally, modern browsers have features designed to make them more helpful in terms of searching, bookmarking, and viewing websites. They are also more secure in many cases.

How does IE6 hold developers back?

Web developers have to support users running many different browsers inside many different operating systems and devices. Fortunately, there are standards established to provide some consistency across all these platforms. Unfortunately, IE6 significantly deviates from these standards. Thus, developers have to pour substantial resources into supporting IE6 alongside other browsers, at the expense of making a better website. This is why you get web developers constantly complaining about IE6 on blogs and twitter.

If IE6 holds developers back, how come the examples you cite – Google Maps, YouTube, and others – still work in IE6?

Firstly, there’s a selection bias here; to make examples accessible, I’ve specifically chosen sites that, though they are revolutionary, do work in IE6. The truth is that no major site would ignore IE6; it’s too big to ignore. The trend’s changing though; even Google released its new hotness – Google Wave – without IE6 support. The team apparently found it too much work to support this relic of a browser, so they suggested IE6 users install the Chrome Frame plugin; if you’re doing that, you may as well just install the Chrome browser. There are also many smaller sites, demos, and browser extensions that don’t work in IE6 and will never work in IE6. Even for sites that do work, the experience is typically faster and richer in modern browsers.

In the case of an app like Maps, Google has directed considerable resources and brains to solving the problem of building something innovative, while still supporting IE6. Smaller developers simply don’t have the option to do that.

Furthermore, when you see video, sound, and rich graphics inside IE6, you’re not really looking at IE6, but Flash, Silverlight, or Java installed on top of IE6. These third-party technologies are becoming redundant, as modern web browsers implement open standards for video, sounds, and rich graphics. Apart from the lock-in aspect inherent in many third-party plugins, there are several compelling reasons to prefer open web technologies.

Is this an anti-Microsoft campaign?

No. Compared to most of my peers in the tech community, I actually have a lot of respect for what Microsoft has done to further access and ease-of-use in the IT industry. Oh, and for the record, I do not know and never have spelt Microsoft with a $ in its name ;). I am speaking here not about Microsoft, but IE6, a specific product Microsoft released at a specific time in the distant past. The same company has since released two more major versions, so if you prefer Microsoft, look at IE8, not IE6. According to Microsoft, IE8 is “faster than ever”, “easier than ever”, and “safer than ever”. Compare it to Firefox (my personal favourite, let it be known), Apple’s Safari, Google’s Chrome, or Opera; or many other niche options, and choose the one you like the most. Best of all, they will all cost you a big fat zero. (This is not to say that IE8 is perfect; it’s still the least standard-compliant of all these options, but it’s big step up from IE6.)

The real question is why corporate IT departments continue to mandate IE6. There are a range of reasons for that, some reasonable and some very irrational ones, but I’d rather focus on the benefits of upgrading and leave the cost-benefit analysis to others.

Where can I find more info?

Here.