we are: London

Quick n’ dirty

Creating wireframes and prototypes on a daily basis I like keep an eye pealed for usefull tools to add to the kit. When creating wireframes I like to spend my time thinking. I don’t want ot spend my time wrestiling with an application. I need to translate the picture in my head onto the screen as quickly and easily as possible. Luckily there are some great tools out there for creating both static wirframes and interactive prototypes. One that I came across a while ago is Balsamiq Mockups.

Wireframes are quick to produce and post-it note style widgets can addded

Easy as 1-2-3

Balsamiq Mockups is currently a desktop application but with an online version in private beta. The tool allows users to quickly drag and drop interface elements much in the same style as other more commonly used tools such as Visio or Axure. Balsamiq Mockups would however sit much more within the initial stages of my development process. Its rapid development of ’sketchy’ looking wireframes makes it perfect for throwing together first thoughts. Its quick enough to be a viable option for producing the initial sketches in a clear and neat format that retain the skethcy feel that works so well with paper sketches.

iPhone widgets allow for quick iPhone mock-ups

Tasty features?

There are some tasty features in the Balsamiq Mockups interface.

• A library of 75 interface features such as browser windows, radio buttons and iPhone interface elements.
• Nice snap features allowing users to quickly line up elements within minimal effort and time.
• Usefull post-it note style comments.
• Full screen presentation mode that allows users to present work to clients and collegues.
• Runs on both Mac and PC.

For more information on we are:london’s wireframing and interactive prototyping services please contact hello@WeAreLondon.

Uncategorized, information architecture, interface design, usability design, user centred design, user interface Internet, usability

Love him or hate him.

It all comes down to one single, tangible factor, which marks out the good from the bad; soul.

The reason for the Clarkson tribute on the left is this weeks Sunday Times Motoring article on an Aston Martin which sees Clarkson pitting it against design perfection in the shape of an Audi R8 V10.

And to save you the read, the Audi is just too perfect, where as the Aston has soul, something that can’t be created by following set rules, but comes from the heart of those involved and is a direct result of the creator’s passion.

All of which brings us nicely to the argument that has raged on since the start of website design; who is best placed to create the perfect site?

The Good, the bad and the ugly.

Let’s go back to basics and look at who the usual suspects are, in the red corner we have “visual designers” (brand and marketing) and in the blue corner we have “interaction designers” (user centred).

Whilst visual designers have a wealth of ability and passion, it is often focused to heavily on making something look good and the risk of making the same, beautiful creation completely unusable.

Now wheel in the interaction designers, who’s passions lie in the creation of the perfect experience, through usability testing, prototyping and more testing. However, there is a strong argument against all of this testing and refining as it can just blunt a sharp, creative idea, making the end result more function than form.

Experience is all, or read Experiential

For years I thought experiential was about experiencing a design, but it’s not it’s about experience, and this where soul comes from.

An experienced designer is passionate about the look and the effectiveness of a design and ensures their soul is applied to everything they do.

An excellent example of what not to do is a site we reviewed a while back that seemingly missed both design and ease of use steps during it’s development and almost certainly skipped public testing.

Help me help you

If you want to avoid the common pitfalls of digital procurement, ensuring your acgency has suol, then follow these easy steps:

• Check potential agencies have a proven user centred design methodology as well as a creative portfolio
• Ask for CVs of key staff and make sure they are guaranteed to be on the project
• Meet the team and chat to them about what they think is good and bad
• Don’t ever feel that it’s not your right to ask questions
• Ask for clarification on every point until it’s clear
• Remember you’re the client and paying the bills

If you would like to know more then give me a call or drop me a note and we’ll take you through our experiences and see how we can help.

global usability testing, information architecture, interface design, internet research, market research, usability design, user centred design, user interface Design, e-commerce, Internet, Mobile, research, usability

Ever since Jakob Nielsen wrote his alert box column about the virtues of mega drop-down menus there has been a buzz around the web. I have put together a collection of interesting examples.

Action envelope:

Some of the best examples of mega drop-downs can be found on the action envelope site. They utilise them to their full potential using them to section or chunk options, including graphics and also using them to contain functionality such as login forms.

The options given to the user are clearly divided with bold headings. The use of graphics helps to engage the users.

The use of large graphics provides engaging content for the user.

The mega drop-down menus allow users access to functionality such as the account sign-in form. This reduces clutter on the screen however it must be clear to the user that this functionality is located here.

Samsung

Samsung have a large quantity of information contained within their site. They have used mega drop-down menus to display all options to the user. Doing this allows them to link directly to the information they require without drilling down several layers of navigation.

Gateway

Gateway makes good use of graphics. By providing graphics in their menu it not only makes the content more engaging but helps users to identify their desired product. This also helps to visually group the elements. The links at the foot of the menu provide access to options that may be useful to users at that point in their journey.

EA

The EA site utilises their menu space very well. They provide two clear categories for users to navigate the games section by while also providing related links relevant to a user looking at this section. The featured game promotion uses a sectioned area and image to catch a users’ attention and drive traffic to information on a particular game.

Blog, information architecture, usability design, usability research, user centred design Internet, navigation

Only a week has passed since one of the most significant design faux pars of recent times launched.

In that time a wide range of press and interested parties have slated the website www.bethere.co.uk as an horrendous example of design gone bad.

In our usual pragmatic style we have decided to review it from a customer point of view rather than cast our critical design eye on it.

Q. So what do the general public think?

A. Not good, in fact with the odd exception the site has been universally criticised as being the worst redesign of the year.

Many a true word Twittered in haste.

Our favourite quote on Twitter is:

“If I didn’t know that the new website was for real I’d think it had been hacked to be honest!“

That’s pretty damming and more recent quotes are questioning Be’s ability to provide a good broadband service based on how poor their site is.

So how did the Be brand become such an anchor?

Only Be’s marketing team can answer that one and I guess the agency who created the site, which offers a number of very similar designs for other clients, only not quite so 80’s.

Pointless dynamic help

However all of these negative, and no doubt expensive, reactions and customer feedback could have been spotted, corrected and mitigated by simply asking their customers during the design phase.

Customer’s views count, get them before they get you!

As a user centred design champion, we are always looking for good and bad examples of sites that either choose to embrace or reject their customer’s views during the initial design phases.

Again I can not know if the site was tested prior to launch, but I have a hunch that it wasn’t otherwise it would not end up looking like this.

Brand and usability go hand in hand

Finally, an even bigger problem is that the site just does not work very well. There are prompts in forms that aren’t needed, readability is a strain thanks to over saturated colours and the accessibility is so bad I don’t know where to start.

The bottom line makes good reading for agencies like us, who are here to help businesses meet their customers needs, whilst working with big, brash design companies, creating brilliantly branded, usable and accessible websites, first time, every time.

If you want to Be better than your competition and avoid upsetting your customers then contact us to see how our research and user centred design services can work for you.

Be*en There Before, in the 80's

accessibility, information architecture, interface design, market research, usability design, user centred design, user interface Design, Internet, research, Twitter, usability

Another day another mission to make forms simple.

As if by magic I have uncovered a very good example of the type of recommendations we have been making for some recent clients when it comes to helping users fill in forms by improving basic usability design.

Simply easy

It’s the way you do it

Yahoo has a great little sign up form that mixes hand-holding and error messaging brilliantly. There are nice confirmation checks for each field, simple explanations for the more complex entries, which fade in and out unobtrusively, excellent error handling, all of which leaves you feeling satisfied and ready to start using Yahoo.

One major failure

However even the great and the good have an Achilles heal and Yahoo’s is it’s capture anti-bot thing. Most of us hate these stupid little form fields where you have to squint at a bunch of unreadable text and type it in to prove you are not a machine.

Yahoo’s is particularly hard to read, there is no audio version and quite frankly it lets down an otherwise brilliant form.

See for yourself

So rather than doing it yourself, we have created a short video of the form, and if you want to know more about form design best practice then drop us an email hello@WeAreLondon.com

New user registration

usability design, user centred design, user interface Design, Internet, usability

Alice.com is a shopping site with a difference. Not only does the site allow consumer packaged goods companies to sell products directly to the customer it provides a new shopping experience aimed at making the task of keeping up to date with your household good shopping a whole lot easier.

Users must create a free account to use the site

The site utilizes many features to create an experience that goes above and beyond other online and offline experiences. By creating a free online account users can keep track of their budget, utilize money saving coupons, set reminders to make sure they never run out of their household items and save their commonly used items to a personailised ’shelf’.

Users are provided with many options when adding items to their shelf

Your very own ’shelf’

By adding their favorite items to their ’shelf’ a user can purchase items simply by dragging and dropping what they need into their shopping basket. This metaphor creates an easy to understand mental map as users mimic the real life interaction.

The 'shelf' metaphor lets users easily purchase commonly bought items

Save with coupons

Coupons are integrated excellently into the experience of the site. No effort is needed on the users part to take advantage of the money saving offers. Coupons are automatically added when a user purchases an item, while the coupon offers are placed prominently when browsing available goods.

Coupon information is displayed clearly when users are searching for products

Never run out again

When an item is added to a ’shelf’ or from the advanced planning page a user can select how often they need to purchase the item. An item such as toothpaste they may wish to purchase every two weeks. Alice.com will then remind them before they run out allowing the user to re-order the item.

Allowing users to drag products between boxes provides an engaging and intuitive interaction

To sum up

Alice.com creates some interesting interactions. Using the visual metaphor of a ’shelf’ and allowing users to physically drag and drop their required items not only makes the repeat ordering of items quick and easy it also brings elements of fun and satisfaction. The site combines many features that help the shopping process, good quality photographs, detailed descriptions, customer reviews, price comparison tables. All these things combine to create not only a usable online experience but a useful and very interesting service.

e-commerce, user centred design e-commerce, Internet, usability

There was some good news for our UI team this week when industry website, The Register, gave a nod of approval in the direction of the 02 joggler calling it “an excellent, all-round, on-line gadget and so much more…”

If you haven’t read our earlier post, we worked closely with the 02 in the development of some of the device’s key features – including the newly released messaging application.

Marketed at the busy modern family and billed as a replacement to the post-it notes on your fridge door and as The Register recognised, the device is more than just an online calendar – it offers everything from photos, music, videos, games, news, weather and traffic information. In the future you can expect some developments that will further cement its position as an essential bit of kit for the busy modern family.

Read the article for the full review and run down.

interface design, user centred design, user interface

02 Joggler touch screen

Touch-screen interactive interface developed by we are:london.

Coming soon to the UK market is the amazing 02 Joggler

Basically the Joggler allows a family or group of friends to share and sync their online calendars, keeping your mobile, web and Joggler dates synced.

Post-it notes are so 1980’s

The shared calendar function is aimed at replacing post-it notes on your fridge and paper calendars on your wall at home.

Now we all know when and where we will be; no more rushed baby sitter calls, missed dinners or forgotten school trips.

Great features and more coming soon

You can also receive text and picture messages, watch videos, view your holiday snaps and play music.

Up to date news, sports, weather and traffic info are available straight to the screen.

Future services could see digital radio, more games and an endless amount of applications that will automatically update.

What we did

Our role saw us working with 02 and their marketing agency to crate a set of interactive prototypes that were then turned into custom applications.

We utilised out very successful, rapid-prototype IA service and created a functional model that replicated the majority service features from calendar changes to credit updates.

usability design, user centred design, user interface Design, Mobile, usability

we are:london attended a Design Council event yesterday evening. Dr. Alex King, project leader at the government’s Horizon Scanning Centre gave a fascinating talk about supporting Governmental policy making through the use of scenarios. An ambition of the Horizon Scanning Centre was to consider what would happen to the effectiveness of policies should “assumptions about the future turn out to be false”. Policies are designed to work in specific conditions – Dr. King looked at what would happen if those conditions changed.

Four future scenarios were presented that represented possible societies following a major global economic disaster. Each varied along 2 axes; an open vs. closed society, and a society built around individuality vs. collectivism.

The scenarios described variations in societal characteristics such as job security, innovation, centralised and decentralised control, globalism etc. All were recognizable and plausible, some less desirable than others. Dr. King introduced the scenarios and then described how 5 real government policies stacked up against them. The result was revealing. Some polices would fail terribly should society veer towards an ‘individual-closed’ scenario. Policies faired better if a society veered towards ‘open-collective’ scenario.

A comment from the audience was insightful – we can’t predict the future, therefore the most effective approach to design is to build-in flexibility and adaptability. This didn’t make the scenarios redundant but highlighted their true value. In the context of policy-making they might not change the way we design but we’re thankful that someone has at least thought through possible variations in the context of use.

Scenarios are design tools – central to the User-Centred Design process. I call them ‘models of the things end-users want to do’ (to go with personas – models of the user and prototypes – models of the experience). Scenarios do something important – they ensure decisions are explicit rather than tacit. Informed design supports the creation of products that are better matched to end-user needs.

The future society scenarios presented yesterday were higher-level than those we use in our design projects but support the same goal – to encourage informed decision-making.

Blog, user centred design Design, future, scenarios

National Express Calendar

National Express launched their new portal nationalexpress.com on the 1st April along with a new lowest price fare finder.

Both were designed and tested by our usability and research teams here at we are:london and launched as part of our on-going work as National Express’ lead usability agency.

Kevin Milnes, Head of E commerce for National Express,  said:

“We set out to create a booking system with unrivalled simplicity and ease of use. The low fare finder delivers a wide range of £1 fares to the customer quickly and easily giving them the choice of when and where they want to travel within seconds.”

Read our case study or check out the National Express Group press release.

e-commerce, information architecture, interface design, market research, usability research, user centred design Design, e-commerce, Internet, Predictive, Travel, usability