Pixel Thread

Clearleft have pulled out all the stops for UX London this year and wheeled in the UE heavyweights: Don Norman, Jared Spool, Peter Merholz… Their conference formula seems to work well - big names + practical workshops = sold out event.

I’m fortunate enough to have a ticket and I’m looking forward to talking shop with as many people as possible.

I’ve just been working on a really exciting project with Adam from Robeam…

Edenbee.com have been looking at ways of engaging an environmentally conscious community inside Facebook. They wanted to build an application that would allow users to create and share green goals.

So we ran a workshop with the Edenbee team in their Dublin office, where we tried to nail down who would use the app and get an idea of how it might be structured. Brainstorming was facilitated by the best fish stew in Dublin, lots of coffee and scribbling on walls…

After the workshop we went away and designed some draft personas and user journeys. A few rounds of amends later we were ready to create a full prototype of the application, on which we then ran a round of usability testing / user research.

The UX phase of the project is now pretty much finished and Adam’s now getting the visual design and illustration worked up with Nathan Fletcher.

We’re (possibly slightly optimistically) hoping to launch the app by the end of April, look out for it on Facebook and in the meantime, check out edenbee.com.

Thanks for the link Fergus : )

For better or worse I’ve been spending lots of time recently designing web forms for a few different sites. All the sites have a huge number of potential users - one of them already has over a million members. So it’s critical that these forms are designed as efficiently as possible, both from a business perspective and from a user’s perspective.

Initially I was agonising over positioning of labels, positioning of input fields, positioning of buttons, error handling and much more… Until I came across Luke Wroblewski’s excellent book: Web Form Design: Filling in the Blanks. For anyone working with web forms, there’s a wealth of useful advice, based on extensive user research.

Some of the useful tips include:

• use labels above fields for fastest completion rates
• only use a button on the form for the primary action
• make all other actions links, to avoid user errors
• align the primary action button with the left edge of the input fields above - eye tracking research has shown users follow the line of the left edge of input fields down the page

Patterns are optimal solutions to common problems. As common problems are tossed around a community and are resolved, common solutions often spontaneously emerge. Eventually, the best of these rise above the din and self-identify and become refined until they reach the status of a Design Pattern.

~ IAwiki.net

Given the now ubiquitous use of javascript libraries such as jquery, mootools and YUI for rich interactions across the web, design patterns are more important than ever. With numerous options of implementing functionality such as drag and drop, select a date or expanding and contracting a div, using documented design patterns make sure you don’t re-invent the wheel.

Useful design pattern references include:

• Yahoo Design Pattern Library
• Design Patterns on Flickr
• UI Pattern Library
• Pattern Tap
• UI-patterns
• Konigi
• Search design patterns compiled by Peter Morville
• Welie - patterns in interaction design

And for prototype tool of the moment - Axure (thanks for the recommendation Nic) - there’s a library of design and interaction patterns here and another one on Google Code here.

As part of World Usability Day on Thurs 13 Nov, Bristol Usability Group are running a free usability surgery at Pervasive Media Studio offering advice, help and support for any projects that you think could be more user-focused…

Recently I’ve been thinking about ways of engaging people in workshops. Delegates might have volunteered to attend, but from my experience, it’s more likely they’ve been coerced into it.

Tim Brown uses some fun exercises to illustrate the fact that play’s important: draw the person next to you in 30 seconds, fill in these circles, fire the foam missiles at me…

I thought this at school and I still think it now: we need more playtime!

A powerful tool in the early stages of developing scenarios is to pretend the interface is magic. If your persona has goals and the product has magical powers to meet them, how simple could the interaction be?

- Alan Cooper, About Face 3

In the early stages of a project, it can be productive to imagine that the interface you’re going to build can do whatever you want it to do. I try not to think too much about ‘how are we going to achieve this’ because it limits the ideas we come up with.

A great idea might be achieved despite the limitations of the technology.

If you aim for 150%, but end up only reaching 125% because you have to rein in your ideas later in the project, that’s fine. But if you start with the technical constraints, you’ll be aiming for 100%, and the end result might come in at 90%.

BTW Not really relevant but writing this reminded me that the iPlayer volume control goes up to 11 : )

A couple of months ago I bought a Nokia N95 8GB. It was almost a 3G iPhone, but the five meg camera swung it for me. And I love the N95 despite its user interface.

• I recently had a baby and was able to use Fring to keep in touch with friends and family during my time off, away from the PC. Fring is an uber instant messenger, connecting all your IM accounts - in my case Google and Skype - and puts them in your hand wherever you are
• Using Fring plugged into Skype, I used VOIP to have long free conversations with my Dad who was working in Canada
• Using the file transfer function of Fring, I filmed my newborn using the N95 and transferred the film to my Dad while we spoke
• I carry the phone with me whenever I’m out and about so always have a good quality stills and video camera with me - high res, auto focus and flash
• I use Opera Mini and Google Reader to catch up on my RSS subscriptions in the evening, which I rarely get around to reading in the day
• I store hundred of tracks on the phone, which I listen to in the car, train and around the house
• Using Mobbler I stream my last.fm account to our stereos in the sitting room and kitchen 
• I ‘listen again’ to BBC radio using the new iPlayer application connected to our stereos
• I’ll soon be able to download programmes from iPlayer to watch on the train
• I’ve used the GPS and Google maps to avoid a dead-end walking route when we’ve been out and about with kids
• And oh yeah, I can phone people and just like, talk in real-time ; )

Now I would love the N95 just a little bit more if it was a nice object to hold, if it had a big touch-screen and a beautiful UI tied to an intuitive operating system. What’s that you say? iPhone?

Google is your homepage. It’s where the user experience begins and where first impressions are formed. If a site isn’t on Google, it doesn’t exist.

Lots of beautiful expensive sites still fail to make the grade on Google because search optimization hasn’t been factored into their design.

Search engine optimization, known as SEO, is the craft of encouraging search engines to index your site and then rank it - preferably highly - in their search results pages. As a practice, it sits somewhere between marketing and technology.

SEO is an essential component of the design process and fortunately it’s not rocket science. With a little planning and some well written HTML, any developer can build a website that gets indexed for their chosen keywords.

RESEARCH AND PLAN

1. Research your keywords

What do you think are the words and phrases your potential visitors might use for when they’re looking for your product or service?  Use Google Adwords to help you come up with ideas and check terms competitors are targeting by looking at the page titles on their sites (text in the blue bar at the top of the browser).

Draw up a list, then use freekeywords.wordtracker.com to check the popularity.

If you’re just starting your site optimization, choose words / phrases that are uncompetitive where you’ll have most chance of success.  Try and whittle the list down to around five.

2. Use a relevant URL if possible

If you’re working on a new site, buy a URL relevant to your search terms. Try and include key terms in your site URL: e.g. www.apples-bananas.com. If you’re targeting a phrase, separate the words with a hyphen rather than an underscore

3. Plan the site architecture

Let your keywords influence the structure of your site, so if one of your keywords is apples, have a page on the site called apples. If another term is bananas, have another section called bananas. Put them in a section of the site called “fruit”. This is more effective than mixing the terms into one page.

START CODING

4. Use keywords for file names

Your page about apples, should be called apples.html on the server, so the URL becomes www.apples-bananas.com/apples.html. If your site is running from a content management system that generates URLs, set it to generate readable URLs rather than incomprehensible codes for pages. If this isn’t possible, consider using a different CMS or getting a developer to hack your current one.

5. Include keywords in page titles

The page title of the page about apples must include the word apples. This is probably the single most important factor in SEO.

The page title is a piece of HTML placed inside a page header, it displays in the blue bar across the top of the browser.

This might seem obvious, but it’s amazing how often you see sites with the same title used throughout. Make sure every page has a unique page title.

Don’t stuff keywords into page titles, keep them succinct and relevant. These page titles also display in search results, so are effectively the first piece of content a potential visitor sees.

6. Keep your code simple

Keep content and design separate - use HTML for content and CSS to style and position the content on the pages. The less mark-up there is for a search engine spider to dig through, the more chance there is that it will read the important stuff.

7. Make sure your page is readable with no CSS

Your code should be readable with CSS turned off and all code should validate with W3C.

8. Use JavaScript to build on existing functionality

JavaScript should be used to enhance an existing experience but definitely shouldn’t be a requirement for viewing the site. Use a JavaScript library such as jquery or mootools to keep your script simple. Read up on progressive enhancement.

9. Use Flash where appropriate

Although this has improved, search engines still have problems reading Flash content. Use Flash to accomplish something that can’t be done using a javascript library e.g embedding video in pages. Always provide alternative HTML content using SWFobject.

10. Don’t use JavaScript or Flash for navigation

If you do search engines won’t be able to follow links to content in your site. Use CSS controlled sprites for non-html fonts in menus. If you’re feeling clever you could enhance a menu using JavaScript, but definitely don’t rely on the JS for functionality.

11. Use sIFR or CSS to replace image text

To use a font for headers that’s not supported in HTML, use sIFR or CSS image replacement to make sure the text can still be read by search engine spiders.

12. Include keywords in alt tags

Label the big image of an apple on the apples page with an alt tag that includes your keyword, e.g. a juicy red apple. Alt tags display when user rolls their mouse over an image.

13. Use heading tags appropriately

Make sure you use an H1 on every page and ensure it includes the relevant keyword - so for example your page about apples has an H1 of ‘All about our apples’. Appropriate use of heading tags also benefits users accessing your page with a screen-reader. H1 = main title, H2 = section title etc.

14. Use keywords in the page text appropriately

Be sure to mention your keyword in the page a number of times, but don’t overdo it. There’s lots of debate about how influential keyword frequency is in a page, but don’t get too hung up on it. Write for your users not the search engines.

15. Use keywords when linking to pages within your site

Use “Find out more about apples here”  rather than “click here”. Never use “click here” - link text should always describe its destination. Users on screen readers can’t differentiate between links if they all have the same text.

16. Include a site map page

This page should be flat HTML linking to all the other pages and as before link text should include keywords. It should be called site-map.html or equivalent and should be linked from your home page.

PLUGGING YOUR SITE INTO GOOGLE

Once you’ve created your optimized site you need to let Google know it’s there…

17. Create an XML site map

Create an XML site-map and submit it to Google Webmaster tools, n.b. this is in addition to the static HTML site map that you include as a page on your site.

18. Build up inbound links

Google ranks your site based on the number of inbound links it sees, and the perceived value of the sites hosting those links. You need to build up a network of links in from relevant sites.

Critically the links to your site must include your keyword, so on a site linking through to my apples page, I would ask for the link text to read - ‘find out more about apples here’. Try to get anyone you know who blogs to mention and link to the site. Include your site in your email signature, if you post on forums, include it in your forum signature.

19. Track your success with analytics

Install Google Analytics on your site to measure the number of visitors and where they’re coming from. You can see terms they’ve searched Google for to reach your site.

20. Patience is a virtue

Don’t expect overnight results - it can take months even years for a site to start appearing anywhere worthwhile on Google. Continue to build up inbound links and slowly you’ll reap the rewards.

How you handle those visitors once they start arriving is another matter!