Admittedly I’m on the geeky side; I’ve got lots of gadgets. However, I’m have very lazy/efficient habits and would rather spend several hours setting something up if it saves me time in the long run. The main things I have setup are:

• Delicious
• Instapaper
• Huffduffer
• Boxee

What that actually equates to is that I use those resources on my:

• Laptop (working)
• iPad (reading)
• iPod (listening)
• TV (watching)

The key is that it is easy, and largely automated. If I see an audio file on a webpage, I can use a bookmarklet to ‘huffduff’ it. iTunes will then download it automatically and it appears on my iPod the next time I sync.

Boxee and Instapaper are even quicker, as external services they sync over wireless. For example, a friend sends me a funny YouTube video whilst I’m at work, I hit “send to Boxee”.

Next time I’m lounging on the sofa, I open up Boxee on the television (via the Mac Mini) and up pops the funny video in my list. (I do recommend watching the James Galea card trick by the way.)

The key is not the device per-se, it’s the situation. I can read/watch/listen on my laptop, but I’d rather send funny videos to my living room, and read long articles away from my computer.

Where will it go from here?

I can only see this type of functionality becoming more widespread. Google has already added ‘Send to mobile’ to the Chrome browser for sending to an Android phone. It feels like when Jack Bower (in 24) says Send it to my screen!, but more fun.

I picked on fridges for the title of this post because it is the household appliance that was always touted as being internet enabled someday, but could this be useful soon?

Apply the “send to” principle to e-commerce and I could see something online and order it to my fridge. That doesn’t sound very practical. This example would be better the other way around, so that when I am at my fridge, I’d know I’ve run out of something and it has a “send to” feature that goes straight to a shopping list on my computer, or even to the supermarket.

If you are creating an online service, the simplest implementation at the moment is to create bookmarklets for people to ‘send to’ your service. You can win over a lot of users by not making them think, now you can also enable them to use the most appropriate device for their context.

Good reading on Usability & Information Architecture

Design of Everyday things, fantastic for seeing usability everywhere, and realising why things can be so frustrating.

Don’t make me think. Great for understanding the bottom-line usability for the web.

Information Architecture (3rd Edition), the definitive guide to information architecture.

Mental Models, understand users’ reasons for doing things.

Usability Links

Methodology:

• Usability Net’s methods table.
• User research methods (and it’s worth reading into the original research as well).

Guidelines: Usability.gov
Design Patterns:

• Yahoo! Pattern Library.
• Wellie.com.
• More: My bookmarks on design patterns.

Further reading for other things referenced:

• Writing for the web.
• F reading patterns.
• 3 Mile island reflections.
• A/B testing.

Tools

I mentioned a few tools during the sessions, so it seems only fair to mention them again here. (NB: I have no affiliation with any of these tools, they happen to be the ones I’ve used.)

• Morea usability testing software.
• Optimal sort. online card sorting.
• Axure, wireframing / prototyping.
• Visio, wireframing and sitemaps.
• Omnigraffle, wireframing and sitemaps.
• Google optimiser (for A/B testing).
• Five Second Test

If I’ve missed something, or you have suggestions, please do comment below…

I promised to post up my presentation (and thought I’d add some more links etc) for the people at the event. The Accessibility is usability presentation (2.4MB tagged PDF). is available.

Presentation Overview

Audience of the seminar

A quick round up of the points made, sans examples:

• Intro and Quick definition of terms.
• There are a multitude of assistive technologies, too many to test with.
• You can categorise the ways that people interact with sites.
• Use these categories to understand how page interactions work in various circumstances.
• Research and a case study that imply usability is improved by increasing accessibility.
• Looking at several general usability principles (e.g. simplicity, consistency) you can see these are even more important for people with disabilities.
• Generally accessibility is usability, but magnified. Take advantage of this – testing people with disabilities will find more issues more quickly, and make it easier to pick up the harder to find issues.
• However, there is a gap, things like alt text, HTML structure, visible keyboard focus etc. do not affect the general population.
• These items in the ‘accessibility gap’ do have other effects though. Google and mobile access are the two most obvious at the moment.
• The answer:
  • In theory, accessibility = usability.
  • In practice, accessibility is mostly usability.
  • Legally, they are not the same.

More reading and info

I refered to a few links in the presentation, for convenience:

• Scripting enabled, a great conference last year which include a lot of information and examples with people who have cognitive issues, including videos from the event.
• DRC research, covered by Mike Davies.
• Legal & General case study.
• Transending CSS, future looking, and a great help in getting into seeing structure under your presentation layer.
• Tantek’s Elements of XHTML, see what we can do with markup today.
• Practical plans for accessible IA.
• Why text-sizing widgets are not a good idea.

More videos

The videos in the presentation were pretty straightforward examples, these are more all-round usage videos:

• Introduction to screen magnification.
• Introduction to screen readers.
• Assistiveware podcasts.

Facebook, in the new design, has both a ‘home’ link as well as the logo:

My mouse was hovering over the logo, which displays a little ‘home’ icon when you do.

The really interesting thing is that the URL that you get from these otherwise identical links:

http://www.facebook.com/home.php?ref=logo (for the logo)
http://www.facebook.com/home.php?ref=home (for the home link)

They don’t make any difference to the page you get, but those variables will be recorded in the server logs, giving them a straight forward answer to:

How many people click the ‘home’ link compared to clicking the logo?

For many sites it is less obvious that the logo is the homepage, so this will be the best case scenario, I wonder if they will share the results?

Keynote: The urban web, Steven Johnson

This was an interesting introduction to the topic, highlighting the social aspects of the story of understanding cholera outbreaks. Unfortunately I wasn’t set-up to make notes at the time, but from memory it centred around the story of John Snow. I’ve heard this before in terms of good information design, but this highlighted important aspects such as the “social hub” that was the local vicar.

The modern examples mostly came from his company, outside.in, including radar. Radar appears to be an aggregator of local info, like a Google News for local blogs and tweets.

I’m not sure how it works, although one method it employs appears to be language to identify location. For example, monitoring a twitter stream, it picks up a tweet about “Dizzy’s”, a restaurant (or similar) in Brooklyn. Relying on language for this sort of thing seems flawed, as there are far too many overlapping terms (how many Springfields in the US for example?). However, perhaps there’s more to it?

In general it did make me think that it would be good to have a geo attribute, like the lang attribute, to show where a section of content is relevant to a particular real world location. However, I’m not sure what the values should be? Lat-long (numerical), or specified locations, like “Brighton, UK”. There’s probably a microformat for it already, but would be nice to have it baked in properly as a fundamental aspect of HTML5.

Steven also showed a nice way of showing how much of a voice you have compared to other people, with percentage pie charts of posts shown over various map locations.

Playing the web, Aleks Krotoski

(This is more of a notes format, simply getting down what the speaker was saying, my comments are in parentheses. Aleks is a very animated, entertaining speaker, which you won’t get from these notes!)

Aleks starts off by wondering why there is little overlap between the games and web industries. (‘Games’ and ‘web’ are used for their respective industries from this point.)

She first knocks down graphics and story as things that matter (critically) in games. Play is what makes people ‘stick’.

(Side note: I’ve often thought that the fun definition of a “User Experience Consultant” should be: the urge to make verbs into abilities. E.g. usability, findability etc. In this case it would be playability. Not a new term, but it did remind me about this!)

She describes the term ‘Experience Economy’ as essentially a boring term for making things fun.

Control systems

The things game designers can use to increase playability:

1. Carrots. Give people more for contributing more. It could be points, character levels, collectables etc. The web does do this to some extent, often you give more (e.g. personal details) and get more out of a site.
2. Openness. As in, games that are open as you play them rather than on rails, with no exploration. (This reminded me of the “Zone of proximal development” where there is a level of difficulty that is helpful.)
3. Have an important end goal, something to get to, or achieve.

The web has has much greater community, or at least, potential community, but games developers have really started utilising communities, e.g. hiring community managers.

The web does have a few rallying points, e.g. digg.

From the community comes social value, out of the central thing (that the designers created), comes other output from the social community, e.g. characters / assets that people create and then can sell on ebay.

Personalisation causes investment from the person. This is relatively new in the web as a common feature.

There is a social urge to collect things, so far web developers tend to concentrate on points, but could be anything to challenge yourself. (I missed the example URL for this, it was a virtual badge-collection site that rewards users for doing things like not using google for 7 days with particular badges. Sounded like ‘peanod’ or something, does anyone know?)

There is very little focus within games dev on theory, they are gamers who create games. Thoroughly separate from HCI. It is a case where you can show that the process has worked without knowledge of the theory of why.

(The main thrust which doesn’t come through from the notes is that the games and web industries have a great deal to learn from each other.)

Questions

Is ‘Little big planet‘ a first step?

The guy from Sony (not media molecule), comes from a web background. But it seems few and far between that this happens. There are 5 major games companies in brighton, but hardly any people here at this web conference.

It’s got wifi (on a Nintendo DS I think?), why can’t I do more with it?

Brief History tour: The most innovative device was the Dreamcast, it was so far ahead of it’s time, only now are we seeing what it could have done, and seeing those things in the mainstream. Why not more integration? In early 2000, the Dreamcast was connected to the internet. You could create your own content, share it, play a multiplayer online games, and it also had VMU (Visual Memory Unit), part of the controller. This little device had a little screen which you could take out, about the size of (modern) mobile phone. You could play a pared down version of the game. E.g. Sonic, you could take it away and play a sub-game that then affected the main game. The game cube did something like this. We’ve still not really seen the realisation of these things.

Information around the Xbox 360 launch said you’d be able to connect the Xbox with other machines, e.g. iPods, Playstations etc. There are lots of cross-platform issues, but the potential is there.

What creates the divide? (Between the web and games industries)

They developed in two different ways. In the UK, the games industry developed out of a bedroom coder mentality. A small pocket.The Web industry attracted different type of people, as the connections/connectedness of the online sphere have always been there.

Now people really engage with the web, there should be more cross over.

The games industry has some unfortunate perceptions, e.g. games are childs playthings, and people generally don’t recognise the depth and breadth of what is going on.

Perhaps it’s a marketing issue?

(I couldn’t hear the question, but…) What about the barrier to do with open standards on web vs very proprietary practices in games.

I think that will change with more smaller developers using (perhaps open?) standard environments.

What about a negative feedback loop with games players becoming games designers. A lot of web practice is about designing for another audience that is not you.

There has been a lot of research recently in games industry, see the paper Chicks and Joysticks: An Exploration of Women and Gaming. Another perspective is the DS’s brain training, plus the marketing with the adverts of non-typical gamers (e.g. Nicole Kidman using the DS). The industry recognises the current audience (The average age of an Xbox gamer is 28), but we need to adapt or there will be a drop-off.In the web industry? I’m not sure, I’ll think about it and I might blog about it.

Leveraging Cognitive Bias in Social Design, Joshia Porter

This is about the merging of the web with social psychology.

Web designers need to add (social) psychology tools to their belt. But, those worlds haven’t collided yet.

A little experiment: which of these two restaurants would you choose? (95% choose second)

1st has physical barrier, and no one sitting down. The second has lots of people there, with a small queue.

Calls this the ‘bandwagon effect‘. Associated with sheep mentality. With little information available we tend to follow others. It’s one way (heuristic) we use to make decisions.

It’s a short-cut rather than doing the logical thing: gather all the needed information. Makes up for a lack of resource.

Sometimes there is ‘cognitive bias‘, and these are often predictable outcomes.

There is the Lake Wobegon effect (where every one thinks they are above average).
We all know the Self-serving bias, and the prediction bias (leads to underestimate work, part of the Focusing effect).

The main paper for this stuff is Judgment under Uncertainty: Heuristics and Biases, by Amos Tversky; Daniel Kahneman in 1974, (although there are plenty of easy links to the Wikipedia for this!).

Examples

(You could probably go through the List of cognitive biases and assign design patterns to them? Joshua makes a great start on this.)

For representational bias (couldn’t find a reference), uses Freshbooks happy users example. They show a ‘representative’ selection, showing the ones that resonate with their exact audience. Rather than stock photos, uses real (or at least realistic) ones.
(This seems more related to the bandwagon effect combined with Ingroup bias to me?)

Review of the day on yelp.com, the chosen users are always the ‘best’, people that do a lot on the site. Power users. By showing that, they show the desired behaviour. This should attract those people interested in doing the same, and perhaps put off people who aren’t.

Loss aversion, e.g. Few people would take a 50% chance of loosing / gaining £100. At 3:1, there is a much better response.

“Losses loom larger than gains”.
Therefore make sure people gain before they lose something, e.g. personal data. Netvibes frame the registration as “login to save your page.” I.e. not loosing information.

OpenID feature, framed as ‘don’t forget another password’.
Rather than call something ‘save time, create an account’, frame as not loosing something.
E.g. “don’t lose the ability to track your package.”

Ownership bias: people value things more when they fell a sense of ownership.
(I think this is a weak example based on copy: youtube, my hotel etc. Flickr has lots of “you”s. I’m not convinced about that as the whole you/me thing can cause usability issues, but it could certainly apply to keeping people on sites when they have created / uploaded something, which is covered later.)

Sign up problem effect (the 9x effect): People value current software about 3 times as much as a theoretical real value. Software makers tend to overvalue their products by about 3 times. Therefore a product has to be 9 times better to actually convert people.
From ‘Eager Sellers and Stony Buyers‘.

Websites now can get you engaged and creating something before asking for any sign up. This creates an instant feeling of ownership.

Geni gets you started very quickly, just three bits of information and you have the start of a family tree that you can share.

Freshbooks uses every sign-up tactic possible:

• bandwagon (thousands of new users)
• features and benefits
• why it’s better than you current product
• they explain what it is immediately
• provides a telephone number
• shows where freshbooks is used (with a world map)
• shows feedback
• shows more happy users with quotes
• has a tour
• highlights free registration

Questions

Isn’t this evil?

Absolutely, that’s a great question. Depends on business ethics really. Trying to provide a win-win. If you provide a better solution, your making the world a better place. However, getting into psychology is what casinos do, e.g. people still sign up for cards etc.

Even when we are aware of cognitive bias, we are still susceptible (see Blind spot bias).

Regarding the e-commerce checkout without an account signup, where was the stat from?

A major US retailer gained 10-20% from allowing people to checkout without signing up, but I can’t name names.

What doesn’t work internationally?

I have no idea, great question.

(Comment from the audience) Regarding International applicability, things like youtube/myspace are less relevant to asian societies than western societies.

Great point, now you mention it, it’s mostly about strength of bias in different societies. It will vary.

Can you reconcile Freshbooks Direct Marketing style approach, vs slide, which is less ‘full on’? Is there a heuristic for when you’ve gone too far?

There is a danger of trying to automate too much, if people don’t know what’s going on, there could be an issue. It’s a very contextual question, each case is different.

In the workshop yesterday, we mentioned that some sites start you instantly, some don’t. There is a trade-off where a screen describing what’s going on could be more important.

What most designers don’t think about is the behaviour change that happens when you use a new bit of software. Habits and behaviour change can be huge, so you want to minimise that.

I read that google was so successful because you didn’t have to change your behaviour. But another site can copy that…

Designing for interaction, Daniel Burka

Daniel is Creative director of Digg, and co-founder of Pownce.

Makes point around the effects that large crowds (e.g. for baseball), and the infrastructure around it. That’s what we are doing, building the infrastructure to allow people to do similar things.

Challenges for social design

Challenge 1: Getting signups.

Encouraging people to participate.

Percentage of people that ‘view’ is much greater than participants. Need to increase benefit, go beyond altruistic motivations. Tap into self-interest.

Therefore, in digg they’ve added a recommendation engine. It takes your activity (digging, burying), compares it to others, and makes recommendations based on that. The more you tell the system, the better it can be.

There might be 16000 stories in 24 hours, so boiling it down to the dozen you’re interested in is tricky. Therefore this recommendation (personalisation) is very useful. The more you do, the better it gets, and the messages on the site reflect this.

Reduce barrier to entry. Currently Digg pops-up a dialogue when you need to login. The next version will allow you to login via other social sites, like Facebook. Put those details on, and it takes the details from there.

Let people Dip a toe in the water. Get going quickly, get invested quickly.
Geni (overlapping with previous pres), is possibly the best of it’s kind.
They show you what it is, you only have to put in 3 things, and you are started.
Once you get to the next step, you’ve got something already.

Challenge 2: Encouraging positive behaviours.

Personal profiles, gives you sense of trust, and creates trackable connections.
Silverorange intranet was something I was involved in many years ago, uses avatars, and this makes it quite emotional for the users.

Last.fm, mixes info from user (name, sites like tumblelog), also your music taste, recently listened to. The digg profile page does this as well, you don’t have to do anything beyond normal usage to keep it up to date.
In pownce, we link to other profiles. Uses info for other sites.

Focus on tension points. Copy and design can go a long way.
If a particular place in the site is a tension point, focus on that. Getsatisfaction has a good interface for this, where you can show how you feel about something when adding a comment. The reason for being on the site is probably negative, in GS, they have the faces to show emotional state.
Makes it explicit, “dorky as hell”, but it works. Simple to do, but has a big effect.

Avoid negative competition. Kind of the hill contests don’t work. The system on Digg listed the users by how many stories got to the homepage. Self-fulfilling prophecy, and new users couldn’t get on the list. The system encouraged bad behaviour, people tried to game it. With critical mass, the feature went from encouraging to negative.

Challenge 3: Allow for flexible participation.

Allow for niche, allow for small participation, allow for huge contributions, it’s a difficult challenge and no one has cracked it. We need to adapt to different data, volume and frequency.

E.g. use benjamin roethlisberger, who has a really long last name. Uses him as the example guy in designs. Chemists use ‘unobtainium’, which can be anything.

Designers do the same, enter just the right data, perfectly align things etc.
Make sure you enter silly data, use stuff from a myspace profiles etc. It’ll be more realistic.

Flow, amount of stuff going in. Facebook is quite good at dealing with this.
It tries to determine what you think is interesting. However, you’re never sure if you’re friends receive things, as they may not see it in their feed. A preferences pain like facebook uses is a bit of a crutch, but I’m not sure what the best solution is.

Follow trails, paving the cow paths.

Don’t be afraid to adapt to your users.

Pownce thought files would be biggest thing, but actually links was the biggest thing, by far.

Then adapted by sucking in video to display directly, and even created oEmbed to enable that more easily.

The comment system has evolved greatly, even used to have threaded comments as they thought Digg was big enough, and because people started using the @notication to reply to other people. Pownce has smaller conversations, and they concluded that it wasn’t useful there.

Questions

Question on progressive registration, is that good thing?

Can be strange, you can end up with quasi accounts. Not very conformable with that, prefer the linkedin style “you’re 30% complete”.

Do you have release cycles?

We used to do changes on the spot, now we have a roughly 30 day cycle. Wouldn’t want to loose the advantage of making small adjustments quickly.

Do you do user testing?

Mark Trammle can give you the in depth answer. However, we’re getting better at it, we used to do quick and dirty, partly task-analysis testing.

Now we do focus group testing at start of project, then do user testing with paper prototypes or comps, then do task based testing towards the end.

Every time we just do a little bit, it’s been worth it, finding obvious problems that hadn’t been that obvious to us before.

Social network portability, Tantek Çelik

I didn’t takes notes on Tantek’s, he’s always very good at doing comprehensive presentations and publishing them (the link is in the heading).

Designing for the coral reef, Matt Jones and Matt Biddulph

Will do an experiment, download ‘neo-readder’, for iPhones, N series Nokia phones and others.

Yay: not invented here! Something of a Dopplr motto.

What we do with computers in general: We make models, e.g. spreadsheets, and manipulate things to see how we make things better.

(Shows model of all space time!) notes it may change next week with the LHC.

Dopplr is a “social physics engine”, a piece of software that underlines the physics of the world, how things behave. It’s kind of a middleware as a website.

Shows a graph of enzymes showing the increased interaction due to the catalyst, Dopplr intends to be something that increases the effect of the parts.

Show a picture of Jon Postel, famous for his be conservative in what you send, be liberal in what you receive, something they take to heart.

Coral reef as a metaphor: Dave Winer made this comparison initially, and they show some imaginary outlining it as both an infrastructure and an animal.

From the coral reef diagram, we are tropic level 2!

Web 2.0: It’s an arc of history, with connected computers. In the early days people used mainframes with time sharing. You would get economies of scale, and the individuals benefit.

Then we got into the personal computing era.

Then with sites like Flickr, it widens out again. With the internet, and the data oriented uses of it, Flickr is a mainframe, and using the economies of scale.

See also Tom Coate’s, native to the web of data.

We design for other sites, re-use of data. Sites that open up, are themselves benefiting.
Matt Webb: Your web service is a finite state machine that operates on your users.

Michal Migurski. Doing stuff with maps and lots of data. They started wtih google maps. But started creating open source map frameworks, e.g. modest maps, mapnic.

“Slippy maps”, like Google’s, are more like games, where you can slip through. They divide the world into discrete chunks, then stream them. It’s like looking at a blue whale through a letter box.

From a game design article, they make valiant efforts to avoid landing screens. This is a lot like web 2.0 stuff, where you try and stream things in as you go along. There are a lots of places on Dopplr where we use that.

The long zoom, designing a distributed interwoven identity.
The genius of a coke bottle is that if it smashes into a thousand pieces you still know what it is. Because details are so hard to get right, they are hard to duplicate.
Ideas aren’t going to win, it’s going to be the execution, the details.

Dopplr was an idea, and then they later realised the scope of what we could do technically.

Another word: delighter, a word from the W hotels in new york, where you put something into their experience (in their room). If you go in and there’s a rubber duck, it’s an “eh” moment. If, on your second day, after shopping and being knackered, and you find a rubber duck, it’s a delightful moment.

In Dopplr, the colours change based on your location. It takes ages, people tend to notice after a month or so. Then you notice it in the favicon!

We wanted to put in data toys, e.g. delighters. Personal velocity works out how far you’ve travelled in a year, and works out how far you’ve travelled in a year. Turned them into things, we ‘equivelised’ (TM) these into an animal. We tried animals, it took a while to work out how fast animals move (Wikipedia isn’t that great for this sort of query!).

The fastest person on dopplr is going the speed of a whippet, but many are very slow. The nasa transporter and a glacier were good equivalents. We have the fail snail, a fail whale equivalent we hope you never see.

Building distributed interwoven system

In Dopplr, as well as the cache, it’s very important to use asynchronous services.
There are many services surrounding central Dopplr, and then the 3rd parties are outside of that.

You need to be playing with asynchronous systems now, Beanstalkd, Apache Caramel. These systems move at different speeds, you need to be flexible and allow for that.

Jeremy Keith showed the chain reaction of updating fire eagle, then Dopplr, Pownce etc.

Shows a diagram of the current schema around other sites such as friendfeed and facebook.

Dopplr is an example of a site that can be successful without people visiting it.
There is a lot to be gained by sending people away from your site, and Google has demonstrated that this isn’t always a business problem.

However, it can be a bit like choosing hi-fi separates, where you try and optimise the overall by using different pieces. It can get too complicated!

They have open sourced some of the routines, like social network imports, search github for Dopplr. (I couldn’t find anything through github’s search, using google I found Identity matcher, Matt’s profile may be better.)

Social network subscription will be next, so things automatically update across sites.

The big challenge is the interactions with the user. Dopplr is careful to be contextual, we won’t automatically import things etc.
Your Linkiedin set of people is not the same as you network on facebook. (This is an important point, it will have to be quite )

We added public profile support a while back, and have been adding more and more toys, e.g. personal velocity. Coded it to be embedded as a blog badge etc. They are open social applications. So if another site supports Open Social they can embed it. Uncoordinated collaboration.

Twitter: You can send messages to Dopplr through that, or email about it, and then it updates dopplr.

It’s an announcement, an instruction to other things.
However, it does depend on language parsing. We’ve built up the top 1000 destinations, but also had to build a ‘stop list’ of the common words in emails that are also town names, e.g. conference.

Just released groups, which get quite a few features of the individual pages. For example, the Dconstruct goup.
Even a group carbon footprint calculator, which should be popular for CSR.

It used to be that you could only get anything once logged in.
Just done “share this trip”, you can get a guest pass URL to share with people to access that trip only.
As a non-user, you get a small view.

Experiment: Share a trip, showed a barcode, but unfortunately no ones phone could get it.

<rant>

Merlin Mann on the case for a pause button: against the fake follow fucntion on friendfeed.

The fake friend function on friendfeed may be very clever, but the fact that there are fake friends shows a problem. Matt talks about the pause button on social sites (see the Merlin Mann article).

My take: friending considered harmful. We are tying ourselves in knots because of the language. Using the word friend makes it necessary to contort yourself.
Don’t use friends, talk about the actions, trust etc, not friends.
Plausible deniability of friendfeed makes you jump through a lot of hoops.
Shows pic of US politician with a shotgun.

The System Of The World,
Jeremy Keith

This I didn’t even try and take notes about. This was less a presentation and much more of a performance, the presentation and MP3 will be available soon, the text is available now.

I get over 100 email a day that I should read (i.e. not spam, which I get much more of). This is simply too much to read and do work. So how do you cope? I used to get interrupted all the time, checking lots of email. When I got annoyed with that, I’d miss email that I was supposed to respond to.

So I fell into a system that let me differentiate the ones that I should read soon, and those that were ‘FYI‘. Using this system can also help to enforce a little email best practice in other people as well.

Some people will probably think “well, that’s obvious”, but I know many people struggle with this, so perhaps a quick ‘how-to’ will help someone.

Folder structure

How you categorise things will depend on your email, but I split things into email about projects (folder per client) and internal email (non-project specific work email, folder per team). You might consider a folder per person, but if there are more than about 10 I would suggest grouping them by business function / team.

I’ve assumed the use of outlook, but most email clients should be able to do something similar. I’m also assuming each project has a group email list that you can use to filter those email.

That leads to a folder structure similar to this:

• Not to me
• Clients
  • client 1
  • client 2
• Teams
  • team 1
  • team 2
• Other folders

The ‘not to me’ folder I’ll explain below, and other folders could be any that don’t get that much email.

Rules

There are several layer of rules, most should ‘stop processing more rules’ once it has run:

1. Spam (move anything with “[SPAM” or equivalent into the junk folder).
2. From me (anything sent by me is marked as read. This applies before the other filters, so don’t set ‘stop processing more rules’.).
3. Client/Project emails (anything sent to list for “Client x” is moved into the Client x folder, except if my name is in the To or CC box, or it’s marked as high importance. Set ‘Stop processing more rules’).
4. Team emails, (anything sent to “team x” is moved into that folder, unless my name is in the To or CC. Set ‘Stop processing more rules’).
5. Internal people emails (anything sent by person in “team x” is moved into their team’s folder, unless my name is in the To or CC. Set ‘Stop processing more rules’).
6. Not to me (anything where my name is not in the To or CC, except if it’s high importance).

This has the effect of filtering anything that isn’t sent directly to me (also preventing the pop-up by the system tray in Outlook). Therefore anything that is sent to me, is worthy of looking at soon. Everything else can be left until I go through project or team emails.

Projects are dealt with before internal email simply because it’s more important to deal with. If you think about the filters, if colleague X sends you an email, it will go to a project list if it’s about that, their team folder if it’s not sent to you, or your inbox if it is.

This has also been quite helpful for getting others to think about how they address emails, as they quickly work out I will reply promptly if it’s sent to me rather than (or as well as) a list.

The ‘not to me’ folder gets any email that isn’t sent to a project list, from a team mate, and isn’t addressed to you directly. That catches a lot of miscellaneous email like discussion lists you haven’t dealt with, or spam that’s BCCed to you.

Favourite folders

Whilst emails are pre-sorted into the appropriate folders, it also really helps to read across many folders, like cross-section indexes on a website. I tend to have these ‘favourite’ folders:

• Inbox
• Today (a search folder that aggregates everything sent today)
• Unread email
• Sent items
• For follow up
• Junk email (so it’s always in view, and I can drag things into it easily).

These enable me to go through all the recent or unread email quickly if I’m using a block of time to deal with email. I’m sure there are many other ways and tricks, but this feels right for now.

The meat of the article is the findings from John (a retired research worker from Sussex) and his use of the Independent Newspaper site. For example:

The text-heavy appearance of Independent.co.uk and its lack of a left-hand navigation bar aided John’s ability to tab through the content, as he said he would rather be tabbing through individual links to articles than an excess of section headings.

This is a little confusing to a web developer, as in the tabbing order, there are 10 section heading before the content. In the source code, there are almost 200 links in the top navigation, one of which is the ‘Front pages’ link referred to later in the article. That doesn’t really match the conclusion drawn about accessibility, and it’s just a red herring to infer from this that the text nature of the site is a good thing.

What would be really useful for that situation is a skip link, or a better method of drop-down navigation.

There are some valid points on pop-ups and consistent navigation. The search issue (there being two) was especially good because visually, the two searches are very separate. However, in the source they are next to each other, with no means of distinguishing them. However, you might take from the article that one should be removed, whereas a hidden heading or two would be more appropriate here.

I think one of the bigger concerns for me is that John apparently uses JAWs 3.7, which has been out of date for at least 5 years! The impact of this is that many functions standard since version 6 (and improved in 7 & 8 ) aren’t available, so John didn’t know to complain that many of the headings are not marked up as such, or ask why the navigation items are wrapped in <pre> elements.

As well using an old screen reader, it’s problematic to just use one screen reader. I wouldn’t expect many organisations to test with more than one screen reader, but you can’t then generalise the results without reference to the accessibility standards. It is notable that the expert opinion has to try and put John’s finding in perspective, bringing in comments about non-screen reader issues.

Don’t get me wrong, getting a real user to test a site is a good thing, and helps to hammer home why it’s important.

However, to work out how to improve, I would want a much broader view. Usability testing of any kind is essentially a case study approach, and the findings have to be taken in a wider context that encompasses of the all the site’s users and goals.

(For a much more in-depth look at this type of issue, try reporting accessibility issues. You can also find all the accessibility articles on journalism.co.uk)

The post was mostly about the UK Governments forays into Web 2.0, but the last part is about the usability advice on the localdirect.gov.uk site.

Background

We had been contracted to provide a usability and accessibility helpdesk for local authorities. This was early 2006, and when it came to the end of the contract, even the critical (of Government) Public sector forums only had this to say:

a telephone helpline was made available alongside a raft of good practice guidance and an online forum to “encourage the knowledge sharing”. Local Directgov claimed that by May, 234 local authorities and 12 government agencies had signed up to the helpdesk. As far PSF is concerned, we’ve heard – amazingly – almost nothing but good words said about it.

(Before then being critical of the service stopping).

The complaint

However, Paul Canning (who I believe was a member of the forum at the time) now takes umbrage:

The answer, written by Nomensa I assume, a usability company contracted by Whitehall, claims that: no usability guideline is black and white, and the context and users have to be taken into consideration.

Whoever wrote this has a vested interest, pushing their expertise— are they really saying that someone like Jakob Nielsen doesn’t make basic, apply to all, guidance? That ordinary web workers have nothing to learn from Nielsen or any of the others in my links list? That only filtered and packaged government-approved usability guidance is kosher?

I did a double take, as that sounded like something I would say. In fact, I did. The localdirect.gov.uk site has published many of the forum questions and answers as a usability FAQ (I didn’t write all the answer though).

Generalised usability guidelines

If you read the whole section on that FAQ, you’ll see I did indeed point out the best source of general usability guidelines I know of, the research based set from usability.gov. However, I still standby this: “no usability guideline is black and white, and the context and users have to be taken into consideration. To which Paul says: are they really saying that someone like Jakob Nielsen doesn’t make basic, apply to all, guidance?

No, not where people are involved.

Jakob Nielsen has done much to publicize usability, but you do have to take care when things are simplified too much, or assumed to be sacred. For example, he used to say people wouldn’t scroll (mistake 6), but this isn’t the case anymore (e.g. 22% scroll to the bottom in this sample, and most scrolled to some degree).

In any case you are dealing with percentages, statistics, and optimising. Not clear guidelines that work for all, which is what I was trying to suggest. There is only one proven ‘law’ in pschology: Fitts law (the time taken to aquire a target is proportional to the size of the target and distance you start from the target). Everything else is interpreted.

The person in the field I respect the most, is Jared Spool, and for a while they were printing t-shirts with “it depends” written on them, because it does. Any usability finding has to be in the context of who, when and what. It’s actually in the definition of usability (emphasis mine):

the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

Spool provides a good example of the problem with assuming there are broad, infallible ‘facts’ in usability:

It is often stated as if it was almost a law of nature that the faster pages download, the more usable the site was. But when we actually compared the usability of sites to their download times, we didn’t see any correlations. None, zero, zip. If this “fact” was true, we should’ve seen something.

When interviewing candidates for a usability position, I tend to ask their opinions on common usability myths such as 5 users, 3 clicks and 7 +/- 2 menu items. I’m actually looking for these things:

• Relying on data, not opinion. (I.e. knowing what the data is really saying).
• Knowing what their own opinions are based on, and being able to justify it dispassionately.
• Knowing which methods suit different situations.

A good usability person doesn’t really have opinions on usability, they have previous experience with similar situations in terms of user groups, scenario and technology. People who have strong opinions do not make good researchers, which is effectively what a usability professional should be.

Many sites would benefit from quick internal usability testing at various stages of the process, that is only to be encouraged. But you do run the risk of finding out what you want to hear, or using the wrong tool for the job. Again, it depends. If people are asking for general guidelines to use, it’s a good indicator that help is needed with the methodology.

Anyone can claim to be a usability expert, just like anyone can set up a web site. But like web development, there is a need for professionals.

My friend and colleague Frances Forman has just had an article published on Boxes and Arrows, on Practical plans for accessibility. Covering labelling, controlled vocabularies, navigation frameworks and wireframe design, it is also a call to action for IAs:

Creating an accessible web experience requires the coordination of independent groups. Initiating, managing, and designing for accessibility starts with strategy and ends with site evolution, content creation, and quality assurance. As IAs we should be advocating, designing, and supporting teams that provide equal access to information, as well as easier access for our primary personas. We should be looking for practical, design-driven ways to make accessibility a consideration through every phase of a project, and not just an afterthought.

Oh, and although I’m writing this article, much of the implementation (and Flash expertise) is from my colleague and co-author Tom Hooper. Any Flash questions will be directed his way!

Intro

Recently we re-launched our CMS’s site, defacto-cms.com, and with it a flashy (in both senses) case study selector. If this were a clients site it probably wouldn’t be worth the time for this purpose, but now the framework is in place it will be easy to replicate.

The ‘carousel’ navigation widget is only used in the case-studies section at the moment, and it is essentially local navigation for that section. You select a case study, it spins into the center, and if you select it the content below is replaced by that case study’s information. The visual effect is not 100 miles away from the iTunes ‘coverflow’ effect, although there are some subtle differences. It uses the Papervision3D open source ActionScript 3 engine for the 3D effect, plus a fair bit of scripting!

NB: Don’t use this in Safari yet! There’s a crash-bug we’ve discovered in Safari affecting the AJAX. You can load and play, but don’t select a case study with the Flash.

It is worth noting that we needed to use quite a recent version of Flash to get that effect (V9.0.28+).

What’s different?

I don’t think there is much new in terms of techniques, although I haven’t seen people use the content of a page as source for the Flash in this way before. It has also had quite a lot of attention in terms of bullet proofing and making accessible.

The foundation

The foundation is straight XHTML 1.0, and on a basic browser you get a list of links with images.

The HTML needed to run it is a container div, its content (used in the Flash), and an object which is used to configure the Flash element on the page. This is a very generic method that we will be using for any Flash content, but as an example, for carousel that skeleton is:

<div class="flash-object" id="landing-proposition-inner">
<h2>Websites powered by Defacto include...</h2>
<ul>
 <li><a href="page1.html">
<img alt="Organisation website screenshot" src="shot1.gif" />Organisation Name</a>
</li>
<!-- more items -->
</ul>
<object>
	<param value="/defacto/live/swf/carousel.swf" name="swfLocation" />
	<param value="200" name="height" />
	<param value="#0E3E80" name="bgColour" />
	<param value="url" name="sendMode" />
	<param value="9" name="reqMajorVer" />
	<param value="0" name="reqMinorVer" />
	<param value="28" name="reqRevision" />
</object>
</div>

What the scripts do

A JavaScript script is used to embed the actual Flash into the page, in broad strokes, the page loads and the script then:

1. Runs, if you have a fairly recent browser (we used jQuery, so it matches Yahoo!’s graded browser support table fairly closely).
2. Checks the version of Flash that you have, and either:
   • Replaces the content of the container div with the Flash, or
   • Adds a small “Would you like to upgrade your Flash” link.
3. If the Flash is added, the current URL and container ID is passed to the Flash.

The Flash then loads, then displays the carousel using the images and links from the URL and ID it was sent. When a case study is selected, the Flash calls a JavaScript function to replace the content of the page (using AJAX).

Reasoning

If I were you, there would be several questions going through my mind:

Question: Why use AJAX?
It prevents you having to re-load the Flash each time you view a case study. Even cached, it’s doesn’t load instantly, and this way you don’t have to sit through the initial animation again and again

Question: Flash has to load the page itself to get the content, why not pass the content from the JavaScript to Flash?
We tried that, but it seemed very CPU intensive, and given that the nature of the widget is already CPU intensive, we steered away from that. Although it may mean loading the thumbnails twice, they should be cached for the second load. In our initial testing, the caching/loading differed between browsers:

• Firefox loaded the page fully before the Flash, which is strange, so Flash gets the cached images.
• IE seems to load the Flash and page simultaneously, so the first request for the images is usually from Flash.

Technically as the images are removed from the page when the DOM is ready, they shouldn’t all load, but I can’t confirm this yet.

Question: Why not do the Flash version detection in the Flash?
In the case of Flash not being installed, you either get a warning from the browser, or a broken plugin display. There is also a problem with signposting users what to do next, as you end up with dodgy inaccessible buttons or messages in Flash. Since the AJAX interaction requires JavaScript anyway, we decided to use JavaScript detection to deliver a much smoother user experience.

Progressive layering / enhancement

The easiest way to describe the layering is to describe the progressive enhancement, i.e. what you get with what capabilities the browser has:

Basic browser (no CSS or JavaScript)

An HTML list (ul) of standard links that work and image thumbnails.

Standard browser without JavaScript support

An HTML list of links that work. (Images are hidden with CSS, as they are too big when you have the layout in place.)

Standard browser with JavaScript, but without the required version of Flash

An HTML list of links, and a little link at the bottom of the area suggesting you update Flash.

Standard browser with JavaScript and required Flash version

The Flash carousel version, using AJAX to load the content.

In the first version the “has JavaScript but not Flash” condition used AJAX to load the content, which seemed like a more even step. However, the accessibility and browser support issues mean that the weak point is really scripting (AJAX), not Flash.

Benefits

There are several advantages to this whole method that appealed to us:

• The method scales up. The first time we tested this was for a micro-site that replaced the whole site with Flash.
• Search Engine Optimisation (SEO). Since your content is well structured XHTML, Google doesn’t even know you’re using Flash.
• The presentation in Flash can be very different from HTML, even with the same source content. (Caveat: the more Flash elements you layer on top of the source content, the less flexible the content becomes.)
• Flash can call JavaScript functions to interact with other parts of the page, so you can still use (X)HTML when it is best suited to the content.
• You can have multiple Flash instances on the same page, each with it’s own variables.
• It is easy to turn on/off, bulletproofing the accessibility.
• No duplication of content, you don’t have to update two things.
• You can edit the content within any XHTML capable CMS.

I’ll repeat that for those at the back: You can edit the content in a CMS, not one coded specifically for editing Flash or custom XML files.

Obviously, you can’t add or change functionality, but in this case you can add case studies (links and their thumbnails), and in other cases you could change the content of pages (i.e. text and images).

Accessibility issues

We are tripping several alarm bells in terms of accessibility by using Flash and AJAX, but actually it wasn’t that hard.

The pages work fine without JavaScipt. The AJAX loads on a keypress of enter, so screen readers will generally update the virtual buffer. There could be a problem if the content takes a little while to load, but adding Juicy studio’s update buffer function should resolve that.

For the the Flash you just have to put in the work (and knowledge and testing) to ensure that it works with both visual keyboard access and with screen readers. You also have to work out what should be shown to screen readers in what order for it to make sense. We did find a bizarre bug in JAWs (8.0 original version) where the whole pages content was repeated when it entered the Flash, but applying the later patches to JAWs fixed that.

User control

One of the basic assumptions we accepted is that people may not be able to, or want to, use this feature. Therefore we added a “Disable scripts” option at the top. This essentially turns off the advanced scripted features such as the flash, but leaves the cosmetic ones in place (e.g. adding rounded corners).

This is very useful for older screen readers, which may understand just enough JavaScript to get into trouble. At the moment, it’s also useful for Safari, as we’ve encountered quite a severe bug when it encounters the AJAX function.

Usability additions

Usurping the innate page model of the web comes at a cost, some of which we’ve worked around. If you just use the Flash, it’s fine, but if you switch between navigation methods it’s a little clunky as the Flash is not reloaded.

The aspects we did work around were primarily changing the page title when you load a new case study, and providing a mechanism to get back to the index page (in the breadcrumbs).

We also made the visual aspect somewhat more HTML-like, so that a case study has underlined text “View case study”, then when you select it that disappears. Adding this made the keyboard/screen reader aspects easier to deal with as well.

Improvements still to make

There are a few things we would still like to adjust, the first of which has to be the Safari bug we’ve tripped. It actually crashes Safari! Unless we can track it down, we might have to add an “if browser is Safari then don’t run” type rule. JavaScript debugging in Safari isn’t that easy, and yes messieurs Christian & PPK, you can say “I told you so”. However, it would have taken an awful lot longer than we had (1.5 days on JS) to complete it without a library.

Although we’ve restored the titles to individual (AJAX) pages, we haven’t re-enabled bookmarking of individual pages. Although search engines will have no trouble finding the pages, people will have difficulty bookmarking individual case studies.

I’m also not convinced that the double click aspect (i.e. one to move the case study to the center, a second to select it) is the way to go. Some people expect the first click to select a new page, some don’t.

Which did you expect?