we are: London

Moving onto the Nexus One has given me much more of an opportunity to explore mobile websites. One site in particular caught my eye, the iPhone version of the Mashable site.

A simple and clear page allows users to access a list of articles

The goal

The site is very focused and this focus helps to create a usable and enjoyable experience for the user. Upon entering the site the the user is presented with a list of of Mashable articles. A user can scan these easily and select the article they want to read. Keeping the users process as simple as possible by focusing on the single task of reading articles provides a simple and usable site.

Users can easily share articles through social media links at the foot of every article

Share and spread the word

Users are also provided with the option to share an article at every stage. Right from the landing page a user can hit a tweet button to share the story via Twitter. At the foot of every article the user is provided with options to share via other sources such as Digg and Facebook. Allowing users to share posts easily not only keeps users happy but benefits Mashable by spreading the word.

Loading equals yawn…

Loading times are always a problem when we are out and about. Mashable limit the number of posts loaded onto the landing page at one time. This limits the amount of time the page takes for it’s initial load. The user can then choose to load more posts if they desire.

To sum up

Mashable have kept their eyes on the goal and created a simple site with a single focus. This in turn gives the user an enjoyable and intuitive experience.

interface design, usability design, user interface Internet, iphone, Mobile, Twitter, usability

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

The Invoice Machine is a web application aimed a helping businesses produce professional looking invoices simply and easily. Hearing about them I took a trip to their website.

The homepage is clear and simple

The homepage

The homepage can be summed up very easily. Clear and simple. This is what struck me as I visited the site. A strong simple hero item with clear calls to action, then some slightly deeper information around ‘Why use it’ and ‘Who is it for’. The homepage not only provides a simple route into the information of the site it answers the questions most users will have when they first visit: ‘What makes this better than anything else?’ and ‘Will this suit my needs?’ Answering these questions upfront will not only help many users decide it is for them without the need to look further but it also gives the site an open and honest feel.

Clearly labelled navigation creates a more usable site

Navigation

Primary navgation is simple and easy to use. Clear calls to action at the foot of pages allow me easy access to the sign-up process.

The use of a table delivers the key information in a easy to interpret way

Content

The content of the site is kept very concise and easy to digest. The tour page contains only a well put together tour video. The pricing page contains simple table outlining the attributes of each price plan. Content is direct, the users are given what they need with no uneccesary information.

Keep it simple

The website as a whole is a good example of how simplicity can lead to a strong and usable website. Users visit a site to get information, a good website needs to identify the key information they are looking for and deliver it in a simple, clear and usable way.

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

I have recently been thinking a lot about homepage hero items and had an example brought to my attention. The hero item on Mozy.com brings together many of the ingredients that make a good hero.

• Communicates service benefits - the hero item clearly communicates the service benefits of the site. A bold headline stating the purpose of the service, a key marketing message highlighted and further explanation provided.

• Clear visual hierarchy - A very clear visual hierarchy is used. This allows users to identify the most important information and read only as much information as they require. Some users may not wish to read further than the headline then go straight to an action within the page, while some users may feel the require more information.

• Route into information - The hero item provides a route into information. A user can view the introductory video, They can learn more about the service offered or they can go for gold and sign-up straight away.

• Bold imagery - The imagery used is bold and striking but does not overpower the user or distract from the information presented within the hero item.

Uncategorized, information architecture, interface design, usability design, user interface Internet, navigation, 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

Would you buy one?

It’s been a mad year and next year is set to be even more crazy.

2009 has seen luxury good sales boom, e-commerce sites explode and the final mass adoption of digital video and e-ink.

Mobile internet has taken off thanks to Twitter, Facebook and the iPhone. Social has started to be more powerful than most could have hoped and TV has gone down hill so fast it’s breathtaking.

2009 retrospective

Early this year we predicted a few things that have happened, some clever and some obvious. BBC iPlayer has seen an amazing take up across the country and handled 70 million requests in October,  which is about 7 Petabytes of data or 12.5 Gigabytes per second.

Top 10 key changes in 2010

1. The end of free. Well at least as we know it owing to a drop in ad revenue and cold feet amongst media owners.
2. A new media monster. As the old guard struggle to reorganise, one or two new, media goliaths will take over, buying paid content from the old order and giving it out for free to meet the needs of us consumers.
3. Mobile web will overtake fixed line. For key content mobiles will become the only way to access key info, buy stuff and keep in touch.
4. Visualisation goes mainstream. With the increase in e-commerce traffic the only way to get your head around the numbers is to change your view. Being able to represent numbers in new, visual ways will be coming to a vendor near you soon.
5. The customer will become king. Crowds are causing even more trouble for corporates, as I type, Eurostar is suffering huge PR issues; surely it’s time to wake up to what your customers want?
6. Content strategy is the new usability. Too much emphasis has been placed on cool tech recently such as augmented reality, but these are just shiny bows on a box of rubbish. Clients and customers will wake up to the power of well organised content.
7. Data will kill UK networks. As the iPlayer shows, and to some extent the iPhone, when people get going, they really get going. Streaming video and large file transfers are going to carry on causing the biggest customer satisfaction issues as networks fail over the sheer volume of traffic.
8. No one will beat Apple. When it comes to technology that has completely changed the world, the iPhone is an amazing example, and no matter how hard people try (Palm) no one can get close.
9. e-ink will become the norm. We all love our Kindles, those who have them that is, and finally there is some competition, which means cheaper, better ebooks for all. Migrate newspapers from print to digital and you have a new outlet for old media. Shame about the latency of stories though.
10. Measure your customer’s empathy. Stats, conversion and marketing data standalone to offer a crutch, but only when you bring these together can you really measure how successful your business is. 2010 will see customer empathy ratings used as the standard metric for success.

We will have a review in the summer of 2010 and see what’s on, what’s not and what needs to be added.

customer insight, e-commerce, information architecture, market research, usability design future, Our news

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

The missing link in the connected home!

02 Joggler touch screen

Never to do things by half, we are the proud owners of two O2 Jogglers. Three days in and I am loving them and actually using them all the time! You can follow life in detail on Twitter.com/02JogglerAddict

Part of the new  O2 family pack, Joggler replaces post-it notes and calendars at home, or as O2 like to say, “it’s your new fridge door”; really?

Is it worth it?

Well, if a decent wifi digital picture frame costs £100+, and O2 will not be happy with the comparison I am sure, then £150 to get a device that organises your life, is a networked home media player and looks so good is a bargain. Add to this the 1Gb of internal memory, USB connection for external drives and a never ending line up of applications to download in the future, and you would be mad not to get one.

Set up

The box and presentation are very Apple, simple, no wrapping, just a shiny new Joggler sitting there ready for use.

• Plug in to power and it switches itself on, say hi, plays a cute tune, and then takes you through a simple set up process.
• You’ll need to know your wifi password, etc, or you can plug it straight in to your router.
• Once online, it will automatically download and install a software update, restart and you’re off.

Features

• The main selling point is the shared calendar that you can add lots of people to and sync with the online calendar on O2.
• The calendar will send SMS alerts to O2 phones if you set a reminder on an calendar entry.
• Screen wise this is better than my top of the range Sony digital picture frame and plays back movies and photos in loads of formats amazingly well.
• Audio playback is not bad, you can stream AV from your PC too over the network, and once the digital radio is switched on, you’ll have a great little home media player in your kitchen.
• There are neat little news, weather, sport and traffic feeds, although I am not sure what the traffic one is telling me.

Other nice features are coming such as the ability to send and receive text and picture messages, turning this, already amazing device, into an electronic post-it note.

What’s missing?

Key features missing are web browsing, YouTube playback, Twitter client, ability to basically edit photos such as rotate and crop and an app store.

I really think that this device could the piece of tech that finally connects the digital home.  Can you imagine how cool it would be to browse recipes on it whilst watching demo videos of how to cook and even being able to order your shopping by clicking on pictures and ordering direct.

Watch the O2 Family advert

interface design, usability design, user interface future, Mobile