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.

First Impressions of users with systems and websites

First impressions are made when meeting people as well as when a system is used for the first time. Like real first impressions, the first look and use of online and system environments is also as critical for it's ongoing success. People will rate a site very quickly.
When you look at something from the usability perspective of a first impression, consider,

1. usability - is it easy to use the first time, make sense to your users, fits with existing mental models that your users have
2. trust & reputation - your users need to feel confident that information is correct and reputable
3. purpose - your users must feel there is useful information, it could "close a sale", it inspires your users, does it meet user goals/tasks, it iscreditable/reputable/reliable/quality outcome
4. visually appealing - ie fit with the personality/persona of your users, people can pick up alot of subtle non verbal cue from visual presentation
   
5. visually matches the words or task focus eg
   if it's a travel site or system talk about destinations, adventures,
   if it's about style or luxury talk about aspirations, success, do not disclose price, consumerism
   if it's about value for money talk about clean lines, text, price, buy now
6. keep it consistent - if you are part of a chain of companies and people know this then if it is part of your plan re-use functionality, tools, look and feel so that people know what to expect. Otherwise use other well known models that people are already familiar with.
   

So the moral to the story is, first impressions are as important for systems and tools as they are with people, so make it count. If you don't deliver on what is stated then people are not happy and it takes alot to change their mind later.

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

how do people really use the web?

so recently I had a discussion about how people use the web and exactly what they like to see verses some cool exciting innovative designs.
My dilemma, looking at what is a good nice clean and what I consider very functional and useful v's what users really want.
At the end of the day, for people with no special needs, nor tech savvy, keep it basic and ensure it follows existing design conventions such as link to home from top left hand image/icon/logo, use tabs for different pages, keep it standards compliant so that it looks and works the same in any browser, ensure a balanced use of javascript, in case javascript is turned off, and ensure that the page can 'degrade' gracefully ie don't just design it so that people must have the latest and greatest updates to browsers or web applications. People don't do what you expect - this is the only constant you can rely on in the UI, UX design area.

make it easy and they will come, or use what already works well

I guess that this could be a chicken before the egg kind of conversation, but what is more important?
An easy to use site or something that they are familiar with.
Qn - can it be both?
My 2o cents (inflation): look at what the users are comfortable with and thn stretch the boundaries a little over time tweeking and enhancing.
Unless the website is suppose to be a bit moe future oriented, don't do gimicks as they are just not enjoyed by real world users to a site.