Gems from the web - 3rd Feb 2011

so I've decided to share my favourite things I've read from the web recently. Hopefully you'll like some of them as much as I did.
Punk Chip
Metadata for semantic information
[http://www.punkchip.com/2006/07/metadata-semantic-info/]
nice post on accessibility and metadata with code. It is a 2006 article , but it content is sadly still valid now in terms of accessibility.
Accessible Radio Buttons
[http://www.punkchip.com/2006/09/accessible-radiobuttons-checkboxes/]
Again shows both the markup and output and provides a bit of context about forms and how to design them well.

Super quick overview of WCAG 2.0
[http://www.punkchip.com/2008/05/overview-wcag-2-0/]
summary of some of the good points for accessibility for CAG update. Like the concepts of 4 principles ie perceivable, operable, understandable, and robust.

Bokardo
Creating engaged and passionate users (part 1)
[http://bokardo.com/archives/creating-engaged-and-passionate-users-part-1/]
talks about the social web and the usage lifecycle ie how users interact and what they need at different points in the lifecycle. Useful for design teams.

UX Crank
Design is a Side Effect
[http://dswillis.com/uxcrank/?p=480]
Discusses design and how it is crucial to good user experience, but that brand should not override user experience. Especially relevant is his 4 bullet points, but I'll leave u to read further.
Undefine Design
[http://dswillis.com/uxcrank/?p=457]
Discusses how design means different things to different people. Does design happen as a post development activity, does design include visual designers right up front. Design however, is just how it works, but you have to know how to do it well.

Goodwill hunting - the art of generating goodwill with your users

So i was re-reading Steve Krug's "Don't Make Me Think" and a few (ok more than a few) pearls of wisdom came back to me as to why 'this' (this = user experience, interface design web standards etc) is so important to get right in the first place !! You need to be very clear about what drives customers away, and what keeps them happy.

Let's talk about what generates negative goodwill (I'll call it badwill):

• hide the most useful information where people can't find it - this includes contact #'s, store locations, shipping costs, prices, availability of stock, delivery timeframes
• Don't let me do things the way I want - I don't want to have to enter in (), -, etc. I will add my own 10 cents here, and if you need data in a certain format then at least tell me what format is required
• Ask me for information you don't need, OR I can't see value in providing to you - now this is CRITICAL !!!!!! If you ask a person for information you have a duty to make sure you use it wisely and it serves a purpose TO THE CUSTOMER not you as the business. People don't like forms where you need date of birth to send simple feedback. Equally annoying is when once you have it you spam us, or you don't leverage it eg log in and see your details in the form. Otherwise you face privacy and security concerns as well as people turning off you cause you spam
• Fake sincerity and caring - if you say that you care then BE HONEST AND BACK IT UP WITH ACTIONS. The web especially is a very impersonal medium and it is easy to make words sound like bland generic 'lip service'. Lets look at the famous words " your call is important to us". Really? cause if I'm holding on the phone for 1/2 hour then I would disagree. If it wasn't important to me I would have already black banned you and told my friends not to bother with you. CAN U AFFORD TO THROW AWAY YOUR CUSTOMERS IN THIS WAY ?
• Blinging up the content but diluting the message - so you put some flashy graphics or visuals on your home page. Do they dilute the message or keep your brand strong and at the forefront of your customers. Don't do anything cause it's the latest and greatest. Do something because it fits your business model, brand and media direction. Most people just want to find content, complete their tasks and do something else. Think of the bank queue, what would you rather be doing
• Present a website that doesn't look amateurish - While this might seem at the other spectrum to bling, this is just recognising that your content cannot look sloppy, disorganised or unprofessional. My personal perspective is to try and use standard HTML markup and CSS presentation to give your content structure but a level of professionalism and branding

Now on the other hand are the goodwill bulls eyes - the tricks that will really help you engage with your customers:

• What do your customers repeatedly do on your site and make it easier to do this every time they come back to your site - if you only do 5 things in a refresh always review this part of your site. Can your customers easily and repeatedly do this right first time every time. If they can't then try and re-design it so they can
• Show me what I want to see - tell me all the hidden costs, terms and conditions, delivery etc so that I can make an informed choice knowing all the facts. Whilst you may lose a few sales you will get respect from people who found what they needed to make a decision
• Make it simple and only make me do what I have to - save me from completing unnecessary steps or providing irrelevant information eg allow me to track an order on your site, and send me the order number where I want eg to mobile via SMS or to email and make it link to the order information right away
• Put effort into generating appropriate content - people don't generally come to a site to browse. They are after information to answer a question they have. Once people have found what they want INVITE them to comment on how well they could find content and how useful it was to them - this is your chance to get feedback from the source at time of transaction. This is GOLD !! Consider also taxonomies and controlled vocabularies so that you present the same message in the same voice consistently
• Know my questions and have answers to them already - if you understand why people visit your site and what they do regularly then you have your first set of FAQs
• enable print friendly content - this is absolutely spot on. How many time have you printed something out and find that half the content is missing. I would add to this and say enable device friendly content. Try and re-use content on different devices eg web, smartphone, tablet etc. The other one is email link - but allow the person to provide text so that they remember the context in which they are forwarding to someone - sometimes it can be to themselves to read later - you never know
• error handling - ok the default option here is to enable people to recover from errors. HOWEVER I PREFER TO GIVE THE POWER TO THE PEOPLE - give people enough information so they can get it right first time and complete the task or transaction without requiring assistance. This can be assisted by both User Acceptance Testing as well as Usability Testing - ie going through tasks/scenarios with people to see how successful the task is
• when required apologise - if you can't do what people want then at least acknowledge this. People are less likely to get annoyed if there is a message up front to say you can only purchase via phone between 8-6pm for example
• allow diversity and inclusion - this is one of my own must haves. I think it's absolutely necessary to ensure that every type of customer you have feels included on your website and can do what they want easily and successfully. For example elderly people can use bigger fonts, people with screen readers can read complete transactions and purchase online etc. Whilst there can be some overhead with this it does open your market wider to people that you may never considered customers previously.

So, that was much longer than intended but as you can see, pearls of wisdom for you to review and adapt to your own business. Good luck !

The art of Wireframes - how not to get tangled in wires

Summary of blog post: u want to design a wireframe so that u can visually represent the site or page to others. I'll be discussing a low-tech version, high-tech version, and a summary of key things to consider when designing websites.

So, u want to design a basic visual representation of your idea.
You know what u want, but u really don't know how to visually represent your ideas.

Well there are two solutions that u can use:
The Low-tech version and the high-tech version of a wireframe. The low-tech wireframe involves paper, the high tech a computer.

So lets start of with the first option. The low-tech wireframe.
1 - grab a sheet of A3 paper (yes the big one) and ensure the long end is nearest to u. This represents all the space that you have available on your website
2- grab some different shaped post-it notes
3 - grab a large thick texta/marker/sharpie pen

Lets look at what we call the globals ie the parts of the website that will not change.
* logo in top left of site that hyperlinks back to your home page - write down on a small post it note "logo/home" and place it in the very top left corner of the paper. This will not change across the site.
* header and footer - this will have repeating information at the very top (header) and bottom (footer) of the page/site. For example the header may have a menu, and it may have a banner image and it could have text. The footer will tend to have copyright information and dates , a link to privacy statement , information about the company etc. Again write "header" and "footer" on the long rectangle pieces with key things you want to display
* there could be a left and/or right hand menu column that runs down the entire page for navigation, or the more familiar right hand side blog information eg about me, archive posts, image gallery, links etc. Again label this "left menu" and/or "right menu" with a few notes on large horizontal post it note
* unique page title - to ensure that search engine results can be displayed with accurate content to facilitate better searchability and findability (with the exception of framed pages etc)

You then have content specific to a page layout. Here I suggest that u consider the idea of templates and re-using content. But that's a topic all in itself that we can look at later. Lets keep going with wireframes.

Again, write on post-it notes that roughly represent your ideas for dimensions for the layout and content, and then keep placing notes on the A3 sheet of paper. When you have moved the notes around, re-labelled the post-it notes, and are happy with how it looks, use clear sticky tape to stick everything down and maybe even take a photo that you can send to others, or yourself (just in case the paper is lost and you were not lucky to have someone taking or typing notes).

At this point I would show it to a few people currently involved with the project, so they can look visually at what you've done and comment. Now pat yourself on the back for a job well done. Congratulations.

So now we look at the high-tech wireframe.
You could start off in much the same was as the low-tech version, but use a computer program like powerpoint. Use the landscape orientation as it provides a rough screen image that maps/is a visual representation of the computer screen. In powerpoint u have a multitude of shapes and dimensions that u can use to create your page. Also remember that with powerpoint and other packages, u may be able to copy images that u own or currently use on your website into the powerpoint slide. Use whatever is available to u, and that u have permission/copyright to access eg company logos or brand images, an images folder that u can use to to pull images into your slide, or marketing material. Just ensure that the images are web ie compressed and in a format that u can use eg gif, jpg or png. Images are great because they can provide a richer user experience to people instead of a few coloured boxes. However DO NOT get caught up in the image too much. People can and do get very distracted by images - as they see the image in their mind and then cannot change their mind once they have seen something. U have to manager your client's expectations. At least by keeping it basic, it allows u to assess the content and framework without a visual distraction.

If you want to get more fancy then there are programs out there that the pro's use, but unless u want to do this professionally, u may find that you can get good results via low-tech or high-tech solutions mentioned above.

So, in summary:
~ understand what u want the website to look like
~ get a feel for what other sites do and what u want your website to be able to do, or behave
~ why are u creating this website - who will view the site and why will they visit your site more than once
~ what is your market and what information do they want to see. Is there a particular format that everyone
~ seems to use that you can adapt to your own purposes ?
~ what are the key messages that u want to get across on the site
~ what content do you want and how will u get it - is it in a database or just typed in
~ you must use a unique page title - for searchability and findability
~ most important content goes at the top of the page unless you have deep links direct to content - avoid going "below the fold" in you can help it
~ ensure standard based coding is used to ensure the website looks and functions well in all browsers