Over the last few days I attended the Future of Web Design conference in central London. It was a great two days meeting some of my peers and heroes of web design. Here’s my notes from Day 2, featuring Ethan Marcotte, Femi Adesina, Josh Clark, Bruce Lawson, Martin Beeby (from #LWSIE the day before), Elliot Jay Stocks, Sarah B Nelson and once again, Josh Clark!

Sketchnotes for Day one can be found behind this link.

Thank you once again to everyone involved.

If you liked this, you may also like:

1. Future of Web Design Sketchnotes – Day 1
2. The Future of Web Typography with Richard Rutter (LWS Future)
3. The Progressive Web with Andy Hume (LWS Future)

There are loads of good reasons to look at and study users visiting your site: entrance points, pages visited, time spent reading, adverts clicked etc. Google Analytics (GA) provides a great free service for this and can’t really be faulted considering how much traffic it is receiving.

Still, GA only provides averages, aggregates and tries to show a typical user, rather than individuals, nor does it handle JavaScript-heavy pages or AJAX very well, and you also have to wait until the morning to get traffic stats on your site.

So, today I’ve been looking at real-time solutions, and I’ve come up with a few.

Reinvigorate (www.reinvigorate.net)

Reinvigorate.net summary dashboard

Reinvigorate gives you a few features the others can’t, such as named user tracking and detailed stats about those users (which pages they visited, in which order and how long they spent on each page). The heatmaps are great, tracking any click (though take some time to generate) and the dashboard updates instantly. It’s also pretty cheap given how powerful it is.

ChartBeat (chartbeat.com)

ChartBeat summary screen

ChartBeat works in a similar way to Reinvigorate, giving detailed real-time traffic analysis of your site. Its detailed and flexible dashboard gives you instant feedback on which of your pages are popular at a certain time. It’s also got a good API and an iPhone app to keep you informed on the move.

UX Tools

Arran Ross-Patterson (@arranrp)  sent me this bookmark list of analytics solutions over Twitter, of which MouseFlow and ClickTale looked very promising. These are tools designed to record all movements on the screen over the browser and be able to play them back to the developer, effectively performing silent usability tests. If anyone has any experience using these, please let me know.

So, for now, I’m using Reinvigorate, but I’m sure there are others out there. Let me know what you’re using in the comments.

If you liked this, you may also like:

1. Real World HTML with Marcus Alexander – #LWSWorld
2. Tales from the Trenches at #LWSEdu
3. Want your company to develop for iPhones? Get in the Yellow Pages!

Emily and the iPad

Aaargh! I hate this stupid thing! Why won’t it do what I ask it to do!

I heard this cry coming from the living room one evening. My fiancée, Emily, was trying to use my beloved iPad to write an e-mail. “What’s it done this time?”, I politely inquire in response.
“Everything!” came the reply, “All I want to do is send an e-mail, how hard can it be!”

Always wanting to help (like the loving husband-to-be I am) I show her how to copy and paste, move the cursor and find the comma key on e-mail layout keyboards, but then it struck me, why is this so hard? So, I asked her to sit down with me and tell me all of the problems that a real person(tm) has with Apple’s latest gadget.

“Firstly, before I met you, I hadn’t ever used a Mac. I had heard they were just for designers and arty-farty people, but they’re just normal computers for every-day use. This is not about not understanding Macs, this is about the iPad. Also, I love the long battery life, and I really like the screen, it’s brilliant.”

“I’m a Hotmail user, and I can’t get more than 50 messages when I’m using the Mail app. Your GMail account works fine, searches on the server and everything, but Hotmail is a second-class citizen and doesn’t get all the features it should. It also doesn’t sync read/unread items back to the web interface (which I use most of the time) so I don’t know what I’ve read and what I haven’t.”

“There’s no iPad app for Facebook. The iPhone version on the iPad looks rubbish, as do all iPhone-specific apps. The visual quality is really poor and not what I’ve come to expect from the iPad.”

“I’m left-handed, and sometimes the iPad doesn’t pick up the gestures that I make. Tapping on an icon sometimes sends me to the search screen! The whole interface seems to have been made for right-handed people.”

“Moving the cursor around when entering text is painfully slow and really inaccurate. When I’m moving it the magnifying glass is right under my finger so that doesn’t help at all! When my wrist touches the screen the whole screen moves and suddenly jumps to the bottom which is infuriating.”

“It’s heavy. For a girl, it’d be nice to have it in a handbag, but the iPad is too large and heavy for that. It wouldn’t fit in 80% of my handbags and any it would fit in would also take a 13″ laptop, which would be far more useful.”

“I’ve not played many games on any platform so I can’t compare the iPad to anything else like that. Still, the games I play on it are fun, if a little pointless.”

“Getting stuff on to it is hard. iTunes is an issue and if you don’t use Google/MobileMe, something like Dropbox or have your work e-mail on it, it’s even harder to put stuff on it. It needs a USB port to load documents on. The camera connection kit is good, but it’s pretty slow.”

“There’s no Flash support for it, and to me that’s critical. For example, checking the weather on the BBC, I can get the basic information but the radar weather map doesn’t work. Sites that have their own video player, like Wedding TV¹ don’t work, and for me, that seriously hampers its usefulness”

“I want web sites to work the same on the iPad as they do on the PC. These ‘Mobile-optimised’ sites are suitable for the iPhone, but not for the iPad and they shouldn’t come up (N.B. this is referring to the Hotmail mobile web interface). I don’t want to have to learn another interface. If I wanted just e-mail, I’ll use the Mail app, but since I want the web site in the browser, show me the actual web site!”

“It’s just not an improvement on a laptop for the situations where I’d use it. If I wanted something that size I’d take a laptop instead as it’s has a DVD drive, all my music and all my web sites.”

“All that said, it’s a brilliant device that has its purposes and has generally replaced the laptop for general Internet browsing, but for what I want something that kind of size to do, it just doesn’t do it.”

¹ Yes boys, it exists, it’s on Sky.

These aren’t the typical usability problems that his lordship Neilsen came up with, they represent problems of someone who uses Macs, works with a computer every day, and still has issues getting things done on the iPad. To be honest, some days I do too (discovering that yet another web site uses Flash is a classic).

What gets me is that many of these can be resolved by Apple and their close partners: making Hotmail work better with Mail, doing more testing with left-handed users, Facebook releasing an iPad app, Hotmail turning off the mobile site for the iPad, making the iPad render pixel-doubled iPhone apps properly (I refuse to believe that text can’t be made smooth), and finally making iTunes work better for file management (or enabling people to use explorer/finder).

The moral of the story is whilst you can’t please everyone with your designs, don’t think solely about your target audience. Try to think about the people around them who will use the device and make sure it works for them too. If you’re after a more practical use for this story, learn that the iPad isn’t perfect, in fact, it’s far from it. I still believe it’s the best that’s out there, and I’d love Emily to get her hands on a Galaxy Tablet to compare the two. We’ll have to wait to see what 2011 and Android 3.0 and the BlackBerry Playbook can bring to the table to gauge if the iPad has a real competitor which can make my fiancée happy!

If you liked this, you may also like:

1. I could really do with an iPad right now
2. Droid Doesn’t do tablets
3. iPad 2: the Porsche school of “all new design”

Hearing childhood teenage professional hero Andy Budd speak at #lwsux last month confirmed many things that I already knew, and introduced me to even more things that I needed to be more aware of (read my full write-up).

The one thing that really got me was talking about the “low-hanging fruit”. It’s a pretty simple concept, as a consultant, much of the benefit you will bring to an organisation, in improving a system’s design, will be painfully obvious.

Take, for example, a client of mine. An old system based on 2003 technology, with even more prehistoric standards support. It used javascript everywhere, all links opened in new windows (complete with navigation) and whilst there were templates, from a programmers perspective, there may as well not have been.

So, how to make it better instantly? Update the system to use templates, stop links appearing in new windows, make it work cross-browser and replace as much of the javascript with “server-side” code as possible. That’s before you get to the simple layout changes that you can make. Spending a bit of time on the information architecture improves the flow of information and user journeys. The system hasn’t changed much, but it’s infinitely more usable and user-friendly. The client almost had a “crisis” when I showed it working on my iPad.

What’s the lesson here? Take the easy usability problems and solve them with best practices.  Test as you go, there’s no need for large-scale user testing unless there’s a specific problem that you’ve been asked to solve. The simple solutions to simple problems solve most of the issues of user-friendliness within a system, and a good bit of IA generally does the rest.

So, take the easy option!

If you liked this, you may also like:

1. Destroy Twitter – my new favourite Twitter client
2. Recent work – entirely non-UI focused
3. Patching iUI

Last night was London Web Standards‘ UX Questions with Andy Budd  (of CSS Mastery and Clearleft fame)

My sketchnotes for this are at the bottom of the page. This is only a brief write-up, hopefully the LWS guys will put the video up soon. Much of this is para-phrased. Andy, if you do read this, let me know if you want any of these answers changed.

Q: Good UX vs Good design? (the actual question was a lot more wordy than that)

UX is a quality attribute, it can be good and bad. An aspect of good design takes UX into account, though there are exceptions i.e. the Phillips Juicer. Good design does not imply ease of use, UX is a design philosophy or style. A good UI designer understands HCI, social, environmental and cognitive psychology .

Q: User-Centric Design or Persuasive Design?

Both together please.

Q: How do you manage difficult clients?

Clearleft tend not to get them thanks to their reputation. Basically, just manage expectations all the way through.

Q: What should you do if you’re told to design “for IE 6″ or “inaccessibly”

Ignore the request. You’re a professional (dammit) and you need to use the right tools for the job. Don’t just keep patching a crumbling building, i.e. if you have an intranet made for IE6, don’t just patch it up, start again.

Q: What tools couldn’t you live without?

Pen and paper. Oh, and sticky notes.

Q: What makes a good UX designer?

• Empathy
• Inquisitive
• Unsatisfied with life (want to make things better)
• Desire to fix the world

Q: How do you get clients to invest in UX even if they have a small budget?

Design on paper to reduce costs. Too many designers just go straight into photoshop. This will allow for more iterations and less money in the long term. Remember that you’re also in a facilitation role so its up to you to guide the process.

Q: Is any testing better than no testing?

Yes.

Generally there’s lots of low-hanging fruit (if doing a re-design) so take that! You only need to do the deep level of thought if you’re solving a very specific problem.

Q: Are there any design patterns you use regularly? Should you make new ones?

Real-world patterns work very well, i.e. tabs. Most people don’t know that a site logo takes you to the home page, so always have a home link. If you’re making a new pattern, test test test, then think, would something else be better.

Q: Where do you get your inspiration from?

The real world. Architecture, a book called “Why people buy” (but not the section on the internet), the Disney Imagineers. Overall, it’s about how it functions, not how it looks.

Q: Is the user wrong? When does the designer know better?

Generally, the user isn’t wrong. It’s very rare that their opinion doesn’t count, so swallow your pride.

Q: How do you establish credibility in an organisation?

It’s difficult, very hard to do internally. You need to play the office politics game. Build a level of knowledge and use references as much as you can, so it’s not only you saying these things. Have confidence in you and what you are doing. Visualise it in your client’s language if possible.

Q: What should you do if a business objective creates a disjointed experience?

Andy can’t help on this one, this is an answer from the LWS crowd.

Switch it around, get buy-in from people and sell ti to them. Do it in the pub, many people are much more open there. With regard to “Dark Patterns” i.e. hiding a company’s phone number or directing through certain channels, read Dan Lockton’s post.

Finally, if you’re not happy in your job, there are loads of UX jobs out there at the moment. Clearleft is hiring a world-class interaction designer.

That’s it. Sketchnotes below. Hope you enjoyed it

UX Questions Sketchnote - apologies to Andy Budd

If you liked this, you may also like:

1. The Progressive Web with Andy Hume (LWS Future)
2. The Low-Hanging Fruit
3. The Future of Web Typography with Richard Rutter (LWS Future)

In the office on Friday, I was talking about web site content, more specifically about links and SEO. I discussed the most basic element of SEO, link text. The link text contains the keywords that Google, Bing, Yahoo et al use to match your search query to their web site. The more links to a page with the same keywords, the higher up the ranks it goes.

So, sounds pretty obvious that you should have searchable keywords in your links. But what do most people do? Well, you mostly see something like “Click here to see…” which to a search engine explains nothing about the target content. If you search Google for “click here“, you get 872,000,000 results, most of which point to Adobe Reader!

So, a very simple tip: Don’t use “Click here” in your link text.

If your link text matches the content of the <h1> or <h2> tag on the target page, you also get a rank boost as these headings telegraph that the content matches the link, making it a trusted link, rather than just spam or “Google bombing“.

It’s hard to underestimate how important SEO is for a web site. With billions of pages now floating around the Internet, if you don’t appear on the first few pages of Google for your targeted search, for all intents and purposes, you don’t exist.

If you liked this, you may also like:

1. A quick guide to IE8′s new features – Activites and WebSlices
2. Website Changes
3. Patching iUI

I’ve signed up for O2 broadband (again) this week, and I’ve been quite impressed with their service for setting things up. For every step you get an e-mail, then a text, which is great and keeps me up to date with how everything is going.

What’s better than that is the new router that they’ve sent me, other than that it arrived before the text saying it was on its way. The packaging on it is really quite clever and space efficient. Here’s the package I got:

It’s just a box with shipping labels right? The router will be in another box inside it? Wrong.

It seems that the outer box is the whole box. Everything is tightly packed and doesn’t move around. The best thing though is under the lid:

A list of package contents, quick steps on how to get set up and a sticker with the wireless information. It’s clear, it’s informative and it’s all I needed from the box. There’s only one sheet of cardboard, only one panel is written on to save printing and it’s small enough to fit through most postboxes. A definite win for packaging and the environment.

Competitors take note.

If you liked this, you may also like:

1. CSS3 Bookshelf
2. v3.03 and The Business
3. A Week in Web – May 17-21st

Just a quick post: a colleague of mine sent me this from Facebook CNet.

CNet login validation

Have usability and accessibility gone too far?

If you liked this, you may also like:

1. Facebook Logins with Facebook Connect
2. Getting a Facebook Login working on your application
3. Facebook Platform – a thought

I’ve never really understood the netbook craze. I can see the benefits of having a lightweight, low-power computer that performs 90% of the tasks you use a personal computer for; it just hasn’t appealed to me, or my wallet.

I can understand that it’s a very cheap way to get online (even though they are double US$ the price in the UK), but I’ve been perfectly happy with a 13″ Macbook I bought 4 years ago. I haven’t seen a purpose to re-spend the money that I invested all those years ago on a laptop that can do half as much.

Other things worry me about netbooks though, they’re a stop-gap. Since the iPhone, the dream has been to have a fully-fledged PC available in your hand, that works quickly and has a long battery life. Netbooks bridged a gap by providing a long(er) battery life and smaller screen, but have left it to the big boys to sort out the proper way of interacting with these smaller devices. See my post on netbook touch screen usability for more on how infuriating it gets.

So, in the next two years, netbooks will die completely. They will be replaced by what these users have wanted all along: a tablet PC with a good touch screen interface. For the first year, pretenders to the throne may have to carry a small bluetooth keyboard whilst the niggles are worked out, then the revolution will come, prices will drop and all those people who shelled out their hard-earned money will happily spend again to get a tablet.

If it is not beyond my power, I’d put the whole netbook format on deathwatch. Its death will be prolonged by price, but it will soon fall. The netbook’s time will come, and we’ll be a whole lot better off with its sucessor.

If you liked this, you may also like:

1. Tablet usability – the future can’t come soon enough
2. Why tablets aren’t working
3. Why electronic Monopoly sucks