Zabisco Blog

World Usability Day - Design for a Sustainable World

noreply@blogger.com (Marianna) — Fri, 13 Nov 2009 16:52:00 +0000

Yesterday (12th November 2009) was this year's World Usability Day. This celebration started 4 years ago in 2005 as an initiative of the Usability Professionals' Association (UPA) so as every year to remember that products & services important to human life have to be accessible and simple to use.

I am really happy to announce that every year more and more clients discuss with us how they can create a website having in their mind: "How to create a website accessible to all?", "Redesign their website so as to approach more people than they do know", "How can they improve the website interface, navigation in order to help people use their site, help users understand their products & services".

This year's theme is "Design for a Sustainable World". Sustainability which can be reassured by taking four main actions: Recycle Reduce Reuse Restore is applicable to almost every facet of life on Earth, from local to global scale. In technology area, digital innovations continue to getting cheaper, faster, better and easier to use enabling the invention of new and expanded uses for Information & Communication technologies every day. As a result the new uses provide sustainable economic, environmental and social benefits on a national & global basis. (source)

You can find the most recent news about events taking place around the world on @WUD2OO9

Popular events that took place across the UK:

A) Web site usability drop-in clinic in Birmingham

B) Usability Open Day in Bristol

C) UK UPA World Usability Day in London

Feel free to share with us how you celebrated this day or ideas of how technology can ensure long-term maintenance of human wellbeing, wellbeing of the natural world and the responsible use of natural resources.

Best UX tweets of 28th August

noreply@blogger.com (Marianna) — Wed, 16 Sep 2009 08:44:00 +0000

Ever since Zabisco opened a twitter account tries to follow as many user experience practitioners as possible. On August 28th I was checking the Zabisco twitter account (@Zabisco) frequently and I was reading most of the tweets. I gathered 10 of the best user experience tweets of that day as they can be a good source of reference for the future. I share these with you in case you haven't come across them before.

1. 48 Trendy And Fresh Web Interfaces From Deviantart: August 2009 from @my6sense

2. Addendum: Version 5.2 means that OmniGraffle is ready for Snow Leopard from @OmniGraffle

3. The Keynotes Of Web 2.0 Design Elements With 30 Dazzling Showcases from @DesignNewz

4. 10 Websites That Help You Discover the Best Web Apps from @smashingmag

5. The Web Design Process Start to Finish from @smashingmag

6. What can designers learn from agile? What can agilists learn from design? from @youtube

7. New Topic: User Experience Design for Working Web Sites and Applications from @ixda

8. Comparison inspiration - 30 Beautiful Contact Forms from @abduzeedo

9.6 Essential tools to check your website Usability from @alexpuig

10. 10 User Interface Design Fundamentals from @salvatorecosta

If you have more tweets to share relevant to web design & user experience I would be interested to hearing from you.

Useful Resources

noreply@blogger.com (Marianna) — Thu, 16 Jul 2009 08:52:00 +0000

For a while now, I exchange insightful links with my colleagues in User Experience, Design and Developing areas. I believe is time I share these links with you as you mind find them useful for your own projects or in case you want to read more about these areas.

User Experience area

· User Interface-ALLTOP

· IA Institute

· UX by design

· UPA

· UX booth

· BCS HCI

· Boxes and arrows

· Semantics studios

· Useit

· A list apart

· Dey Alexander Consulting

· UXmatters

Design area

· Smashing magazine

· Hongkiat

· psdtutsplus

· webdesignerwall

· tripwiremagazine

· sixrevisions

· mogdesign

· UI-Patterns

· Designm.ag

· Just Creative Design

Developing area

· .net

· Web developers handbook

· Web Design Booth

· Speckyboy

· Elements of design

· Ajax rain

· noupe

· mootools

· nettutsplus

· W3C

I am sure there are other imformative links out there. Feel free to share your sources of information too.

Information Architecture Institute Article translations

noreply@blogger.com (Marianna) — Wed, 10 Jun 2009 13:32:00 +0000

As a member of Information Architecture Institute (IAI) I wanted to contribute to this big community. As I am originally from Greece I thought of translating some articles ("What is IA" & "Am I an IA?") in Greek. For those of you who know how to read Greek or are interested in other languages you can find translated articles here. Some volunteers have translated the whole IAI website in other languages such as Italian.

The Information Architecture Institute is a global organization - operated by a dedicated, multi-national group of people- that supports individuals and organizations specializing in the design and construction of shared information environments. Through education, advocacy, services, and social networking, the Institute provides a framework for members to improve their skills and enhance their professional standing.(source IAI website)

As a member you have access to valuable resources, discussion forums and discounts to well known & successful conferences around the world.

Keep visiting the site as I will translate some more in the future!

Google Wave

noreply@blogger.com (Marianna) — Mon, 01 Jun 2009 13:27:00 +0000

Two brothers Lars Rasmussen and Jens Rasmussen from Denmark who are behind Google Maps, together with Stephanie Hannon who is a Google Product Manager who was previously on the Google Maps team too are the founding team of a new online communication and collaboration tool called the Wave.

Google Wave combines: e-mail, advanced Instant Messenger (IM) as we have never seen; editing and sharing online documents, instant translation tool and much more. Its founders say Google Wave has three layers: Product, Platform and Protocol.

· The Google Wave product (available as a developer preview) is the web application people will use to access and edit waves

· Google Wave can also be considered a platform with a rich set of open APIs that allow developers to embed waves in other web services, and to build new extensions thatwork inside waves

· The Google Wave protocol is the underlying format for storing and the means of sharing waves, and includes the "live" concurrency control, which allows edits to be reflected instantly across users and services (source)

You can view a video of Google Wave preview here

Google announced that Wave will be available later this year. The reason they presented it last week to the public is because Google Wave is an open source tool and Google wants developers to contribute to the final form of the product.

Some things that make this product different from what we have seen so far are:

· Advanced IM with translation tool

Picture 1 (source)

· Easy creation & sharing of photo albums

· A play back feature that allows users to view past actions that took place in a Google wave. For example the last 5 discussion messages in instant messenger or if you are playing a chess game with someone you can view again the whole game

· As it is a Google product it allows using Google tools as search engine inside the Google waves

· Users also have the ability to edit documents online and blog through the waves

· Allows integration between Google wave and other communication applications as twitter

Picture 2 (source)

Looking forward to seeing what other features developers will add to Google Wave. It seems that is a very promising tool that users will highly uptake once it is ready to use. What are your instant thoughts for this new tool?

1st IA London mini Conference

noreply@blogger.com (Marianna) — Mon, 18 May 2009 09:53:00 +0000

On 20th April 2009 I attended the first IA mini Conference organised by Ken Beatson taking place in Guardian Offices in London.

The purpose of the conference was to bring IA London group members (who are more than 500 now!) together to discuss about Information Architecture issues, networking and understand how other people work. The conference was a real success and as a result it is going to repeat next month in 16th June 2009 in "The Sense Loft" in London and is already sold out.

During the 1st IA mini Conference 6 presentations took place after Guardians' Information Architect Martin Belam welcome presentation:

· Agile UX presented by Cennydd Bowles

· Why users don't follow instructions presented by Phillip Winwood

· Spec docs from Axure wires presented by Ken Beatson

· Design Consequences workshop presented by Leisa Reichelt

· Interacting with forms presented by Matthew Solle

· Interactivity - how IA's learned to stop worrying and love designers presented by Tom Coombs

You can view presenters' profiles and their presentations' slides here if you sign in to London IA group.

It's good that efforts are made for Information Architects, Designers and Developers to meet together. From the 1st IA mini conference discussion topics between the presentations such as "How to get your clients sign off your deliverables to continue to the next step" or "What's the best way to design a form and necessary fields to include" I realised that there are lots of controversial issues that is good to bring to the table and discuss to find optimum solutions. Leisa Reichelt's presentation involved a collaborative wireframe exercise that we all had to participate which again revealed the different ways each project can be approached.

So if you are keen to discuss with IA experts, if you want to participate in future IA conferences or you want to know what Information Architecture is all about or even if you want to check out what IA London group is, visit: London IA

E-commerce sites - Muhimbi project Part II

noreply@blogger.com (Marianna) — Tue, 14 Apr 2009 09:23:00 +0000

Continuing from Part I...

The way Per-so-na approached this project was first to capture client's requirements then to form a set of different versions of Sitemaps and User Journeys and then to design a number of Wireframes. Due to the fact that the e-commerce site is CMS based; User Experience department worked closely with Development department to adjust the limitations of Content Management System (CMS) with the user journeys in the most efficient way. Through the whole life cycle product process Per-so-na formed the following guidelines:

The guidelines

Shopping basket page guidelines:

· A short cut link to shopping basket page from all website's pages

· The option to remove or add item(s)

· Description of the chosen items (images are useful too)

· The option to continue shopping i.e. ebuyer

Picture 1: Ebuyer shopping basket

· A call to action to check out and purchase the items

· Unit and total price of items i.e. play

Picture 2: Play shopping basket

· Product code

· Details of any tax/delivery charges applicable to the purchase

Picture 3: Muhimbi shopping basket wireframe

Check-out process guidelines:

· Always indicate how many steps the check-out process has (reduces user frustration) i.e add a process line as Amazon or ebuyer have:

Picture 4: Ebuyer check-out process line

Picture 5: Amazon check-out process line

· Users should be able to go back one step in the check-out process before accepting to pay the product

· Address forms should auto-generate users details to reduce check-out process time

· Always indicate mandatory fields in forms

· Avoid including main navigation elements in the check-out process (danger the user stop the check-out process) i.e amazon

· Provide helpful text where further explanation is required

Sign-in process guidelines:

· A short-cut link to sign-in page from all pages

· User should be able to create a new account if he does not have an account

· Keep sign-in page simple (ask only necessary information) i.e play

Picture 6: Play sign-in page

· Provide the user with the opportunity to recover his password

· If the user is already signed-in he should be able to sign-out from all pages

· User should have access to get help in case of a problem

· Error handling mechanism in case of incorrect password or username

Conclusion

Jacob Nielsen reports that web users are becoming much more impatient while shopping and browsing on-line. Instead of spending their time going to a site's homepage and finding the content by categories or other product recommendations, most shopping is done by quick Google searches. As experts it is our responsibility to design and build user friendly websites always aiming to optimise the user experience.

You can see the final design look and feel of muhimbi website below:

Picture 7: Muhimbi homepage

E-commerce sites - Muhimbi project Part I

noreply@blogger.com (Marianna) — Wed, 08 Apr 2009 09:28:00 +0000

The Theory

Many companies have already established e-commerce web sites, and in the next few years, many more e-commerce sites will come on-line. According to Tilson (1998) companies choose to develop e-commerce sites for different reasons, for example to reach new customers, to stay abreast with their competitors, and to meet their needs. E-commerce websites are proved to be a valuable channel for selling products and interacting with customers as well as an important intermediate for communicating with the general public and prospective consumers. (Hoque & Lohse, 1999).

As the e-commerce market is highly competitive businesses providing better user experience have a strong advantage towards their competitors. As Jesse James Garrett states: "it is the user experience that forms the customer's impression of the company's offerings, that differentiates the company from its competitors and it is the user experience that determines whether your customer will ever come back". Ask yourself the question - if you walk into a high street shop and can't quickly find the item you are looking for, do you stay in that shop long? In general the answer is "no", and exactly the same is true of websites.

The Practice

At Per-so-na the past couple of months we were working on a large scale e-commerce site, our client has tasked us with creating the site right from designing the site architecture and user experience through to the design, development and deployment of the site. Some areas that required higher attention were the product details page, the shopping basket page and the check-out process pages.

Undoubtedly primary goal of any e-commerce site is to connect users and products and once products are chosen users should be able to access and begin the ordering process quickly and simply. As a result the initial step of the user experience process was to design an informative "product details page" with a clear "buy now" message. Then we formed User Journeys for various website paths as the "sign-in" (picture 1) and "check-out" (picture 2) processes. From these exercises some guidelines came up that I will discuss in Part II.

Picture 1. "Sign-in" process, Muhimbi project

Picture 2. "Check-out" process, Muhimbi project

The second part of this article will have references to well known e-commerce sites and guidelines for the shopping basket page and "check-out" and "sign-in" processes.

Sources: a) Tilson, R., Dong, J., Martin, S. & Kieke, E. (1998). Factors and Principles Affecting the Usability of Four E-commerce Sites. 4th Conference on Human Factors & the Web. Ease of Use, IBM, Austin, TX, USA.

b) Hoque, A,. Y., Lohse, G., L. (1999). An Information Search Cost Perspective for Designing Interface for Electronic Commerce. Journal of Marketing Research (36:3). pp. 387-394.

Navigation menus

noreply@blogger.com (Marianna) — Wed, 01 Apr 2009 09:39:00 +0000

Throughout the years many different layouts for navigation menus have been designed and developed. But which are the most dominant? Which are the ones that successful websites use and why? To start with, some nice examples that can be valuable sources for future projects:

·CSS play

·UI-patterns

·Welie library

·Smashing magazine article

Doormat navigation, drop down menus and double tab navigation are some of the most frequently used in all kinds of websites.

Doormat navigation allows to a person/company to better expose the content and subjects available throughout the site, is well suited for sites deep in hierarchy, wide in context and open to interpretation by different people.This pattern is used to direct users to the appropriate section of the site. This works well if you have a small number of categories, with each having a number of sub-categories. The typical use of this pattern is on a landing page or home page.

Picture 1: RBS bank

Double tab navigation is mainly used where large amounts of pages are available and are hierarchically structured. The main advantage of this layout is that users know where they are and how they can get back to the main page.

Picture 2: Nokia

Picture 3: NatWest bank

Drop down menus are used when a user needs to navigate among sections of a website, but space to show such navigation is limited.

Picture 4: Adobe

However, the latest trend in navigation patterns that has a big supporter "Jacob Nielsen" (wrote an article recently about mega drop down menus) in terms of usability and accessibility is "mega drop down menus". Their main characteristic is the two-dimensional panels divided into groups of navigation options and their main advantage is that users have access to all the information at once and without scrolling. Some big companies as SONY, IKEA, TESCO have followed this trend. See some examples:

Picture 5: SONY

Picture 6:IKEA

Picture 7:SAMSUNG

Picture 8:TESCO

A similar approach has been adopted lately for search engines too. So the stereotype of a search engine presented by a simple box in many cases has been enhanced or replaced by a drop down menu with advanced features. See some examples:

Picture 9:kontain

Picture 10: Collabfinder

What do you think? Which is the most frequently used navigation pattern?

When Nottingham business people meet together

noreply@blogger.com (Marianna) — Wed, 11 Mar 2009 11:04:00 +0000

Yesterday I attended a networking event with one of my colleagues David Coveney in Nottingham city centre called "Nott Tuesday" organised by Adam Bird. This was the second event and a significant number of attendees were present this time too. It was very interesting meeting people working in different sectors of the IT Industry and other Business areas too.

In yesterday's event there were two key speakers. The first one was Doug Ashby, who through his own business development example explained to us whether it's a blessing to retire at 45 or not; though he confessed he continues working on various projects. The second one Ian Lockwood - an independent consultant specialising in online marketing talked us about a new project with Accelerate Nottingham to bring commercial fibre connectivity to Nottingham city centre and why this project requires our involvement too. He mentioned they have the technology that could bring 100Mbps symmetrical broadband to Nottingham businesses.

As a User Experience Architect representative of Persona I had valuable discussions with several people, who were willing to know and understand the necessity and procedure of usability involvement in a product development life cycle. Many of them were interested about website user testing and how we recruit participants for user testing. All these conversations made me think that business people in Nottingham are interested in Usability and Accessibility issues and have realised through their own business experiences that keeping the end users happy in all aspects is the main achievement above all.

So if you are interested in networking with people face to face, exchange your business cards or even discuss with people in a friendly environment "Nott Tuesday" are the events to do that.

Internet change politics - For those who do not believe User Experience can make the difference

noreply@blogger.com (Marianna) — Fri, 19 Dec 2008 13:01:00 +0000

2008 will remain in history as the year where Internet changed politics forever. The main reason for that is the pre-election campaign of Barack Obama, especially the way his consultants used the internet as a political tool.

The very well designed website of the today's President of United States and the wide use of e-mails, YouTube and other social networks as Facebook and MySpace, but also the use of other tools for the gathering of funds, are nowadays established tactics that are being used from other politicians too.

Lots of people claim that if it wasn't for the web Barack Obama wouldn't be a President today. I recently came across a very light full blog post "Lessons for User Experience Consultants from Barack Obama" that evaluates Barack Obama pre-election campaign web site published by John Yesko.

Among the lessons the author believes Barack Obama's website teach us are:

·Lesson 1: Use Clear Calls-to-Action: Donate now is the key call to action Obama uses on his website while is not the only message.

·Lesson 2: Put a Priority on Creative: Work with smart, talented creatives. Involve them from the beginning, and encourage them to be the stewards of the brand throughout the process.

·Lesson 3: Make Personal Connections (Or At Least Fake It): Use labels that are simple and easily comprehensive from the users (see also my post: can users read your website)

·Lesson 6: Be Young, Charming, and Good Looking: Everyone wants to have a fluid experience, come across with new concepts and ideas and view an aesthetically pleasing website when navigates through the net.

If we take a closer look of Barack Obama's web site homepage in comparison with his competitor John McCain's we can see clearly why Barack Obama's internet campaign was more successful:

Navigation: Obama's website has 6 main navigation elements and 2 less highlighted while McCain's website has 9 main navigation sections (far too many).

Labelling:The labelling Obama uses is more user friendly and commonly used in public as People, Media, States while McCain uses more vague terminology as Issues, Coalitions & Contribute.

Website goal: Obama's website has a strong "donate now" message while McCain's dominant point is "vote now" message and how to promote his personal image more.

Images: By comparing the politicians' images on the top left hand side we can also see that Obama's low angle shot looks more professional. A politician is the voice of the public so he needs to use humanise photos. Unfortunately McCain and Palin photos fail to convince us that they are potential future leaders.

Top Homepage message: Obama chose to use a very communicative personal quote "I'm asking you to believe..." while McCain chose a distant message using capital letters making it even more alienated from the users "COUNTRY FIRST REFORM....".

Page layout: Obama chose a two column page layout while McCain chose a three column template. While Obama placed efficiently information on the page leaving sufficient space in between, McCain made the mistake to place lots of information with different coloured icons, buttons and banners to the three columns resulting in a distractive output.

Here is a visual presentation of what I mention above:

Have a look on the two politicians' websites to judge by yourselves:

Picture 1: Barack Obama website

Picture 2: John McCain website

After reading this post I hope you are now convinced that User Experience Architecture can make a difference in the way people see and get influenced by your website.

Can Users Read your Website?

noreply@blogger.com (Marianna) — Wed, 17 Dec 2008 16:37:00 +0000

How many times have you visited a website, get attracted by its design but couldn't find what you were looking for and navigate away? But still after you left the website you did not know what was the problem as the website seemed so aesthetically pleasing, user friendly and all the information at least on the homepage you visited seemed to be in the right position?

The problem is in Nomenclature Design. It is important users to be able to comprehend the labels and the terminology you use. Before you define the content of your website you should ask some crucial questions:

·Who are your customers?

·What tasks do customers want to complete when they visit your website?

·What content are customers looking for via your website?

·How can you help customers find the information they need via your website?

·What are the services your company offer and you try to promote via your website?

·What are your business objectives? (See also: Online persuasion or better user experience - You be the judge!)

·How do your business objectives align with your website goals?

·What search terms are customers using?

After consider all these questions you should also make sure you choose user- centric language for your website and not internal, company language. Virtually no user read a webpage word for word so it's important to have the information they require in the best places. If they can't find what they are looking for in a few seconds then they will disappear. Also, if they don't understand a term you use then there's a good chance they will disappear too.

Sometimes different websites aim to different audiences so many sections though they are repeated in many websites are labelled different. For example many websites use the word "Vacancies" for the section where they place the job positions while others use the word "Jobs" or "Careers". This varies depending on whether you are looking for people for a short period of time or you advertise a position where actually the applicant can build a career inside your company. It also varies depending on what kind of users will visit your website.

Have a look of how three different websites use different labelling for job positions:

Picture 1: Oxfam website

Picture 2: BT website

Picture 3: Scottish Health Council website

As Rick Oppedisano states in his article "Common Principles: A Usable Interface Design Primer" : "Simple and comprehensible navigation is essential for the success of any application. Users must be able to move from page to page via links, buttons, or menu items. More importantly, navigation must also address the tenuous balance between real-life user goals and business goals of the application. When business requirement terminology filters into navigation, there is risk that the typical user may misinterpret the language used in the navigation. This misinterpretation compromises the user's ability to complete the task, and can override the benefits the technology aims to provide".

If you can go out of your corporate role and try to read your website as a simple user or have the opportunity to ask external visitors who are not aware of your company's jargon and they can understand the aims of your web site; then the rest of the world will do too!

Persona feature in NMA

noreply@blogger.com (Anonymous) — Mon, 01 Dec 2008 12:57:00 +0000

To coincide with World Usability Day last month (13 November), the influential New Media Age User Experience Directory was sponsored by Persona this year!

It's a pretty big deal as this publication is regarded as the annual who's who in online usability and is read by the industry's biggest players as well as brand leaders from all over.

If you don't subscribe to NMA, you can download the report in PDF format and read the two great articles from our ever vocal leader, along with an eye catching agency advert. We've also used the back page to soft-launch our industry standards initiative - Wireframeworks.org.

So if in these difficult times you need to engage with your audience in a more positive and effective way - you know where we are.

How to organise effective workshops

noreply@blogger.com (Marianna) — Fri, 21 Nov 2008 11:21:00 +0000

A workshop formed by User Experience Architects in the phase of requirements gathering is a meeting or a series of meetings, depending on the size and budget of the project emphasising interaction and exchange of information among a number of participants.

Before the workshop:

· Invite the people that are related to the project (if it is possible from different departments; all can add value to the discussions).

· Make a list with the willing outputs from this workshop i.e. define related personas to the project, discuss all the sections the web pages should have, prepare questions to capture as many project requirements as possible, understand all the aspects of the project in detail.

· Organise exercises for the workshop as: card sorting method, exercises aiming to group design of conventions (i.e. site navigation bars, search facilities), or create priority lists to get all people interested in the workshop.

· Review all the information you have gathered so far for the project.

During the workshop:

· Check the list with the willing outputs from this workshop to make sure everything is achieved (do not hesitate to make alternations if you get valuable input during the workshop).

· Explain the scope of exercises to the participants. If the number of the participants in the workshop is large, form smaller groups. Make sure to gather all the outputs at the end of each exercise.

· Try to encourage all the people to speak and participate during the workshop sessions.

· Be a good listener. Do not try to lead the conversation by expressing your opinion, but leave the other people participating in the workshop to express their thoughts, sometimes argue with each other. "The best way to have a good idea is to have lots of ideas." (Linus Pauling)

· In the end ask if they have anything else to add, that has not mentioned at all.

· If there are moments that no one is speaking try to find efficient ways to start the conversation again i.e. suggest something really radical that can raise controversial opinions.

After the workshop:

· Group the information you have.

· Check if you accomplished all the tasks from your list.

· Analyse the data you have gathered.

· Continue to the next step (that varies to the project i.e. organise a new workshop, create Personas, design User Journeys).

If this sounds too much we can help you. Contact us today for User Experience Design, Creative Web Design and Online Marketing services.

World Usability Day

noreply@blogger.com (Hammad) — Thu, 30 Oct 2008 11:04:00 +0000

Most of us use planes, trains and automobiles all the time, so we're used to things that go bump in the night.

This year, World Usability Day is on November 13th (don't worry, it's not a Friday!) and the topic is Transportation. Visit www.worldusabilityday.org and you'll be amazed at the number of events, webcasts and discussions taking place by some of the best thinkers out there on how the next generation of transport systems will be better for all of us.

CAPTCHA

noreply@blogger.com (Marianna) — Mon, 13 Oct 2008 13:33:00 +0000

CAPTCHA (contrived acronym for: Completely Automated Public Turing test to tell Computers and Humans Apart) is a program test used in computing to protect websites against web robots by generating and grading tests that humans can pass but current computer programs cannot (captcha.net).

One of the main reasons our web design agency and other websites use CAPTCHA is to prevent spambots to create numerous accounts through sign up forms. Other applications of CAPTCHA are:

Preventing Comment Spam in Blogs
Protecting E-mail Addresses from Scrapers
Ensuring the validation of Online Polls results
Preventing Dictionary Attacks in password systems
Search Engine Bots
Preventing E-mail Worms and Spam (source: captcha.net)

Though it is a useful tool for developers not all CAPTCHA are designed to be user friendly or even accessible from users who are blind, have low vision, or have a learning disability such as dyslexia. Example:

Picture 1 : Hard to read the letters due to colorful background (forums.steampowered.com)

Recommended guidelines for any CAPTCHA code:

Accessibility. CAPTCHA's must be accessible. CAPTCHA's based solely on reading text or other visual-perception tasks prevent visually impaired users from accessing the protected resource. Any implementation of a CAPTCHA should allow blind users to get around the barrier, for example, by permitting users to opt for an audio or sound CAPTCHA.
Image Security. CAPTCHA images of text should be distorted randomly before being presented to the user. Many implementations of CAPTCHA's use undistorted text, or text with only minor distortions. These implementations are vulnerable to simple automated attacks.
Script Security. Building a secure CAPTCHA code is not easy. In addition to making the images unreadable by computers, the system should ensure that there are no easy ways around it at the script level.
Security Even After Wide-Spread Adoption. There are various "CAPTCHAs" that would be insecure if a significant number of sites started using them. An example of such a puzzle is asking text-based questions, such as a mathematical question ("what is 1+1"). Since a parser could easily be written that would allow bots to bypass this test, such "CAPTCHAs" rely on the fact that few sites use them, and thus that a bot author has no incentive to program their bot to solve that challenge. True CAPTCHAs should be secure even after a significant number of websites adopt them. (source: captcha.net)

Good examples of CAPTCHA:

Picture 2: CAPTCHA with audio option (digg register form)

Picture 3: CAPTCHA with not case-sensitive letters and help for disabled (gmail sign-up form)

Picture 4: CAPTCHA with refresh button (my space form)

The CAPTCHA used in the World usability day website complies with all the guidelines mentioned earlier.

Picture 5: The website has audio CAPTCHA option for blind users / ability to refresh the CAPTCHA in case user does not find it easy to read / help section (world usability day account)

However the W3C group published an article in 2005 about the inaccessibility of CAPTCHA considering that they should not be used as there are other ways (spam filtering and/or heuristic checks) to spam control. Among their arguments were:

CAPTCHA using logic puzzles with mathematical equations prevent users with cognitive disabilities to register. Example:

Picture 6: CAPTCHA with logic test (Quantum Random Bit Generator Service: Sign up)

·Users who are deaf-blind, don't have or use a sound card, work in noisy environments, or don't have required sound plugins are likewise left in the lurch. Since this content is auditory in nature, users often have to write down the code before entering it, which is very inconvenient. Worst of all, some implementations of this technique are JavaScript-based, or designed in such a way that some blind users may not be able to access them.

·External projects such as BREAKING, AICAPTCHA and PWNTCHA have shown methodologies and results indicating that many of the systems can be defeated by computers with between 88% and 100% accuracy, using optical character recognition.

CAPTCHA should be used only where is necessary and mainly in large websites. It is advisable smaller websites to use other mechanisms to prevent spam. When used, the developers should make sure they are accessible from different categories of users.

What's your opinion about CAPTCHA? Are there any good or bad examples you came across lately?

Sign-up forms - basic elements

noreply@blogger.com (Marianna) — Mon, 29 Sep 2008 11:05:00 +0000

Though most web sites have sign-up forms, they are not always necessary or useful. There is the danger sign-up forms transform a nice website user experience to a bad one; by restricting users from pages that should be accessible to all i.e. content pages, access to resources pages (case studies). This usually is noticeable in websites that have a persistent sign-up form on the homepage and urge the visitors to sign-up first before they can navigate throughout the website. As a result, there is a risk to alienate visitors who do not wish to commit to your site yet.

However there are many websites (see smashing magazine: list) where sign-up forms are necessary such as most of the e-commerce sites. Especially when a user wishes to purchase a product he has to navigate in secure pages so as to complete payment detail forms. It is critical though when we should ask the user to sign-in and where we should place links that lead to the sign-up forms. Common place to have a link to sign-up forms is on the top of the page and repeated in all the pages, not only on Homepage. This could give the chance to the user to sign-out if he wants or sign-in from all the pages. Nevertheless there are occasions when a sign-up form needs to be on the homepage i.e. in social networking websites (i.e. Facebook) that most of the website's pages are based on users' customised settings. In this case make sure that you explain the customers why they need to use them and how they can use them.

Elements sign-up forms should have:

- Place sign-up form or sign-up link where people can see it (i.e. amazon homepage)

- Have a message reassuring them for the privacy of their details (i.e. windows live hotmail)

- Make them easy for users to understand them-use an example (i.e. BT account sign-up)

- Clear labeling next to the input fields (i.e. my space sign-up)

- Ways the user could retrieve from errors i.e. enter wrong password (i.e. ebuyer.com)

- Provide friendly inline messages at the point of the form where the error has occurred along with an overview at the top of the form (i.e. google mail sign-in form)

- Indicate clearly the mandatory fields (i.e. delicious form)

- Ask only necessary information / avoid long list forms (i.e. last.fm form)

What's your opinion about sign-up forms? I am interested in listening your examples and experiences.

Interactive maps - a simple tool or something more?

noreply@blogger.com (Marianna) — Fri, 05 Sep 2008 13:59:00 +0000

One of my responsibilities as an Information Architect is to keep abreast of the latest releases in the computer science industry. Recently I have come across a selection of different maps from a variety of sources that have made me realise there is a trend nowadays to use more and more interactivity when presenting data. A set of examples is:

- A UK interactive map that enables Regional Economic Strategy (RES) to display evidence data in an engaging visual way.

- A world interactive map from www.publicprofiler.org which presents the distribution of certain surnames, compiled by researchers from the University College London (UCL) using publicly available sources of information such as electoral registers and telephone directories. It contains information on over 300 million names covering 26 nations from Europe, America, Asia and Oceania.

- And a visualisation tool in the form of a map created by the New York Times providing information about the Olympic medals throughout its existence. Each country that has won medals during the Olympic Games is represented by a circle - its size relative to the number of medals won.

In terms of usability these three maps along with all the other well designed maps in the web are bright examples of well presented data, in a user friendly way saving a lot of time for the user. The users can effortlessly figure out how to use these interactive interfaces and at the same time they are easily memorable. The usage of a variety of colours in association with tables, pop-up windows with information or lists under the maps form a powerful source of information accessible within a few seconds. The efficient usage of white space also enhances the user experience.

Interactivity is one of the major advantages of web maps, enabling simple map tools to fully integrate multimedia elements. It helps to explore maps, change parameters, navigate and interact with the map, reveal additional information, link to other resources, and much more. My conclusion of this short reference to interactive maps is that they are a powerful tool in terms of efficient access to a large amount of data.

A new browser - Google Chrome

noreply@blogger.com (Marianna) — Fri, 05 Sep 2008 13:40:00 +0000

Some days ago Google released a beta version of their new browser called "Google Chrome". The browser is still in an early stage of development but as Google states they will constantly updating the browser following users' reviews. With this browser Google team believes that they will "add value for users and help drive innovation on the web".

My first observation is that Chrome is a modern browser managing to introduce a new minimalistic design, leaving behind old design concepts. The first innovation you notice is the usage of tabs at the top of the page instead of being under the address bar and toolbar. This layout eases the way users manipulate tabs. They can easily add or remove them and each tab can be dragged independently out of the browser window opening a new Google Chrome browser improving the speed that users handle different tabs.

The Google team has also created a user-friendly help page where you can find all the information you need for various topics, either using the help search engine or clicking a link from one of the group links (getting started, troubleshooting, using Google chrome, and popular articles or help resources). From this help page a user can change the language settings too.

The browser's homepage is another newbie. It is called the "Most visited" page and so far it displays icons with links to the most frequently visited pages. It also has an internal search engine where you can search among those pages, together with a box of recent bookmarks and a link to a full history list. This page can save a lot of time to the user eliminating the number of clicks he has to make in order to view his bookmarks and navigate to the most popular pages.

Picture 1: Google Chrome Homepage

The combination of the address bar and search engine into one (known as the "omnibox") is another plus point of Chrome. Many times in the past I got frustrated by Mozilla Firefox's browser when I typed a word in the address bar but a "failed to connect" message appeared. Then I realised I was not typing on the search engine box! I am sure I was not the only one! This feature makes the design more simplistic and saves more space on the tools area too.

An additional feature that Google launches for the first time is the "incognito window "where you can view pages without appearing in your browser history or search history, and they will not leave cookies, on your computer.

Picture 2: "Incognito window" feature

Enough with all the appraisals! Google Chrome received a lot of bad reviews too; though it has become the 4th browser used already. Google has released a list with known issues for Google Chrome that grows bigger day by day. Among them are plug-in issues such as "Scrolling is delayed on pages with a lot of plug-ins" and display issues such as "Google Chrome's fixed width font is tiny on some sites". There are also claims that Chrome is not a secure browser at the moment but this is probably expected as it is a beta. In terms of user experience a negative issue indicated by the usability blog is that Google chose for the browser to use Windows Vista icons that are not allowing any customisations made by the user. As a result users with poor eyesight, tend to increase the size of these controls so they can easily minimise windows without accidentally closing them.

Google has still a lot to change in Chrome, especially things that they see as important, and it'll be interesting to see how it will evolve.

What do you think about Google Chrome? A good User Interface or not?

Thoughts on "Thank You" pages

noreply@blogger.com (Marianna) — Fri, 29 Aug 2008 08:10:00 +0000

While finishing the first draft of a website's project wireframes; I noticed that one of the pages that troubled me most was the "Thank you" page. This wireframe can be just designed as a plain page with a simple "Thank you message" being polite to the user after accomplishing a purchase or an action.

On the other hand this page can be a lot more than that and I believe it should be designed with a lot of attention to detail:

This page could have effective calls to action so as to bring the users back again to your website instead of saying goodbye to them and lead them to navigate away. If the message is "Thank you for purchasing a product", this page can be a great opportunity to advertise more products. Statistics have proven that a big percentage of consumers (39%) continue to purchase another product if they are prompted in the "thank you page".
This page can also show some authority of your website by reminding the user that his card details were securely used. Furthermore it can inform the user that the details of the purchase will be send to him through an e-mail.
This page can provide a signature or a photo making your website more personal for the user. As a result a trustworthy relationship will develop between your website and the user (Alexandria K. Brown).
It is important to provide the customer with instructions in case something goes wrong with the purchase or if he requires any other help.
Last but certainly not least, you should provide a path for the users to exit the "Thank you page" without having to close the web browser or navigating away from your website.

I am sure there are other reasons why we should carefully design "Thank you" pages for websites. I am looking forward to hearing your ideas too.

Good examples of "Thank you" pages:

Picture 1. "Adobe" website "thank you" message after downloading free trial software.

Picture 2: "East Midlands Trains" website "thank you" page after completing a form to receive ticket offers information.

Online persuasion or better user experience - You be the judge!

noreply@blogger.com (Marianna) — Tue, 29 Jul 2008 10:04:00 +0000

There is a thin line between designing a web site to increase the company's sales and to increase the users' experience.

A clients' main reason for creating a web site or redesigning their existing web site is to increase profit/company sales, which can happen by improving the web site's traffic.

Sometimes Information Architects have the dilemma of whether to design with focus on a client's or a user's needs. Don't get me wrong, both should be taken into consideration, but some circumstances dictate more attention should be given to one than the other.

If we create a new user experience that should strongly promote services and products (Picture 1), persuading more and more people to engage with the page, we have to design a web site with authority, give examples of what other users do and add user testimonials. In general, we should enhance understanding, create persuasive visual design, generate confidence and stimulate desire (How to manipulate website visitors). On the other hand, if we are more user-focused (Picture 2) we should for example: avoid blinking imagery (though it could drive user attention to a service or a product), have no more than one animation per page and provide users with a sense of control.

As Spencer Gerrol and Kim Snedaker discussed at UPA 2008 there is a difference between what users "can do" (usability) and what users "will do" (persuasion) while visiting a website. I believe the best approach, is to ensure that users will have access to all the possible options before proceed to the desired action.

Picture 1

Picture 2

Silent Corridors

noreply@blogger.com (Hammad) — Thu, 03 Jul 2008 20:18:00 +0000

It's not often that I come across a bit of industry lingo that I haven't heard before, but whilst working with a partner agency recently, I came across just that.

A Silent Corridor.

Now apparently the phrase was coined by somebody at BT and it refers (at least in the world of Information Architecture anyway) to a column on a page that becomes completely empty under certain circumstances.

For example. It's commonplace to use a 3 column layout for a web site, with the right column used for related links etc. However, what happens if a page/template no longer needs to use this area as defined? It's not always as simple as allowing the central column to 'flow' into this open space, as it's often restricted by a series of inherited template definitions (especially if the site is developed on a Content Management System; aka CMS). This actually happens quite a lot, like on Privacy policies or Sitemap pages. It can also be relevant during an e-commerce/shopping process, when you want to strip back on the hard-sell and keep people focused on what happening on the core real estate.

The result is a silent corridor; a complete end-to-end column that is empty and has nothing to offer anybody wandering into it. If you try to use it, you will go unheard.

It's not actually a bad thing to happen though, despite the eerie name it has become Christened with.

Template and layout consistency is very important for a good user experience and so by using a silent corridor effectively, you can keep your users focused on the important content on a page, instead of ramming unnecessary links and promos in their face and making them claustrophobic.

(oh dear, I think the hospital connotations are starting to take over!).

Persona card sorting exercise

noreply@blogger.com (Marianna) — Fri, 20 Jun 2008 13:07:00 +0000

Persona is involved in a new IA project for the redesign of one of a partner's client website. The deadline for designing a new sitemap for the client's website was tight so we conducted a card sorting exercise to identify possible ways to design the navigation layout.

The Card sorting method was chosen among other user-centred design methods as it is a useful tool Information Architects' use when they have to design a website sitemap in a quick, inexpensive, and reliable way. Card sorting helps efficiently structure the information you have. Furthermore, it gives suggestions for navigation, menus and taxonomies. (Donna Maurer)

The card sorting method usually does not provide results that can be used in the final structure of a sitemap, but can help to resolve several initial issues as:

Structure the Information under the same group
Find names for the groups
Identify categories that the Information Architect might have not included
Identify whether users want to see information structured with focus on subjects, audiences, or both

In order to organise the test sessions, we formed a list with items that could be placed in each card. Then we created 53 different cards with short labels that participants could quickly read but were detailed enough for the card content to be comprehensible. Seven individuals were invited to participate on the exercise. They were advised to carefully read the cards and try to group them accordingly. Throughout the sessions, we tried to answer some of their questions and took some notes to keep track of insightful comments they made. Finally, at the end of each session, we encouraged each individual to add any other cards he thought would be appropriate, or exclude any he thought were not relevant within any group.

Some individuals preferred to organise the cards in groups and then decide which will be the name of each group (picture 1, 2) while others chose to form a sitemap by first identifying the main navigation sections and place each card under them where appropriate (pictures 3, 4, 5). None of the individuals added any new card, though some of them excluded some which proves that we might have added more cards than those needed.

Picture 1

Picture 2

Picture 3

Picture 4

Picture 5

After the completion of the exercise, we gathered all the results and designed a sitemap, taking into account most of the users' preferences. The whole card sorting procedure proved to be very helpful as we wanted to form a navigation layout that would be more user- than project-driven. This method of involving real users before the design helped reach that goal and it also reduced the research time.

Finally, we would like to thank all the participants involved for their time and clever suggestions.

Reading a web page backwards

noreply@blogger.com (Hammad) — Wed, 02 Apr 2008 13:19:00 +0000

Lately, I've been tracking various types of user behaviour when using web sites; you know, the usual kind of thing like navigation use, links, calls to action etc.

One strange behaviour patterm that has come to my attention though was actually one of my own!

I've noticed that when I see long web pages (e.g. with a scroll), it doesn't quite put me off, but I generally scroll down to the bottom straight away - to get a feel for how long the content is that I'm about to either enjoy or waste my time on.

Quite often, I'll then start reading back up the page in blocks/paragraphs; in a weird attempt to see if the rest of the article is worth reading. I guess it's a kind of 'read the last page of the book' type of syndrome.

Now I know many of you will think that I'm just plain stupid (and perhaps you're right), but I wonder how many other people out there have a similar behaviour pattern and indeed if the percentages are high enough to actually give this more thought when architecting a content page wireframe or design.

I'll put this to the test and report back anything new I find...

Transform your World with Toshiba and Persona

noreply@blogger.com (Hammad) — Mon, 06 Aug 2007 08:03:00 +0000

Notebooks in Disguise

When Toshiba told us they would be tying up with one of the big summer blockbusters, we we're hoping it would be Transformers!

So, when we got the call to attend a briefing at Toshiba HQ, the childhood dreams of the lads at Persona came well and truly to life.

We've produced an interactive campaign web site in Adobe Flash that highlights their featured notebooks and promotes the tie up between the two iconic brands.

Optimising a Prime time experience

Using the movie footage as inspiration, we've used choice cuts of film, stills and sound to produce an intro sequence that sets the mood for the site concept.

The site then features an interactive, 360 degree viewpoint of a Satellite notebook that users can 'Transform'. Browsing through the site, visitors can also take part in a competition to win a Helicopter flying lesson - a direct reference to the new movie Transformer 'Blackout'.

On a more technical level, the site uses ASP.NET to provide 'send to a friend' functionality and also process the competition entries.

Under the bonnet

The intro sequence was edited together and sound synced in Adobe Premiere, with Adobe After Effects used to add the atmospheric lighting. Finally, this was exported as Flash Video and added to the main site without needing any additional browser or plug-in software for visitors to view it.<.p>

For the competition, our ASP.NET code validates entries and posts them as XML to a remote web service on Toshiba's contact database; in a format that complies with their specifications. The web service then returns XML instructions that we use to re-direct visitors to the right page; either a message highlighting any problems or a confirmation that their entry has been successful.

To keep a smooth user experience, we've also used AJAX for the navigation, so the page isn't reloaded when moving between sections.

More than meets the eye

Toshiba and Transformers are both iconic brands in their own right; so how do you start to blend the two together in a partnership?

After being briefed by Toshiba, we worked with the Paramount Pictures footage, image library and usage guidelines to ensure both identities were given the right balance.

In our creative brainstorm, we came up with the concept that just like the Transformers robots, we needed to show that there can be more than meets the eye.

Other than highlight the more obvious brand synergy of Technology between the brands, we wanted to do something different.

For the site, everyday features such as USB connections and Keypads have been shot in an abstract style; suggesting they could be parts of a Transformer. By focusing on areas often taken for granted, we've created a mood that emphasises that the difference with a Toshiba notebook is that style and technology are equally important.

Using the All Spark

Using our in-house photography studio, we had full control of the lighting to create the right artistic style. We then put the shots through digital post production to add the Blue lighting - a common feature in footage from the movie.

Autobots, Roll out

Producing a site is only the first part of a campaign - the challenge is to get people to it. Toshiba have used a number of promotional channels to market the site, including:

Press Releases to the media
Banners on the main Toshiba Computers web site
Send to a friend email
Viral seeding and link building

With the campaign being time-critical (it's only being ran for the Summer), it is important that the PR activity focused on outlets of quick turnaround; specifically weekly publications and online media. Press releases have been sent to the design, IT and brand media to bring awareness of the campaign to the more effective audiences.

Toshiba have also agreed page sponsorships with Tiscali and have promotional material and signage in Dixons and Toshiba retail stores around the country.

The site features a send to a friend feature, that is branded as either Autobots or Decepticons depending on the users choice. The email sent is branded in the same style as the site, so recipients are enticed to visit the campaign to find out more.

Finally, the site has marketing analytics installed to track visitor levels, user journeys and conversion goals for the competition.

Avoiding Decepticons

Targeted traffic is being sourced and driven to the site using viral marketing. This was chosen over Pay Per Click advertising, so that the word-by-mouse effect would spread fast and search marketing budgets could be reduced - giving more creative freedom to the production side of the project.