we are: London

We are full of great ideas, insight and research into web, mobile, IPTV, youth, elderly online and offline interaction and want to share it all with you.

Search our site

Archive

Archive for the ‘user centred design’ Category

Sign-up and dive-in

September 3rd, 2010

I have been reading and thinking a lot about the sign-up processes involved in so many of the websites and apps we use. A website that surrounds a service such as Twitter, Facebook or Tweetdeck deals with the undecided user, the user who is unsure if he wants to use the service or app. However once a user has made the mental decision that he wants to get in on the action he is often faced with nothing more than a boring form. Not the ideal start to the engaging, fun and useful experience promised.

Being met with a sign-up form is not the most engaging way to begin your experience with a product (even if the product is as good as Remember the Milk)

Being met with a sign-up form is not the most engaging way to begin your experience with a product (even if the product is as good as Remember the Milk)

The barrier of the sign-up form

Ok so this twitter thing sounds really good, my friends are all on it so let’s give it a try. Now I know I want to use it but before I can I have to complete the sign-up process. This process can act like a giant barrier between the potential user and the actual user. How can we deal with this problem? Making the process simple and easy to use will greatly improve the completion rate but we can also look at doing more. Services such as Jumpcut (now closed as of June 2009 but outlined in an excellent article on A List Apart), a service for making online movies, used a really interesting approach. Users who arrive on the site can jump in straight away. They can use the service and make a movie and only need to sign-up if they wish to save or share their movie at the end of the process. This removes the initial barrier, getting users engaged from the outset and only asking them to commit to the sign-up process once they have tried to service. This greatly improves the first time user experience.

Twitter engages the customer through the sign-up process

Twitter engages the customer through the sign-up process

Onboarding and gradual engagement

Getting people signed up to your service is one thing but what about going the next step and getting people using it? This process is often referred to as onboarding. Taking a look at the way twitter handles their sign-up process presents us with an excellent example. If a user wants their own account (they can use twitter to search and read tweets without one) they must go through the sign-up process. During this process they can search suggestions based on interest, search for their friends using their email contacts and also use a free text search for users. Engaging users right from the sign-up process allows them to hit the ground running. They learn about the service and begin with their own customized account filled with tweets based on their own selected interests and people.

Welcome your users

Unfortunately a sign up process will be inevitable at some point for web apps and services but these outlined strategies aim to improve the first time user experience and use the sign-up process to the user’s advantage. If we can let a user experience the service before signing up we can remove the initial barrier. If we can use the sign-up process to engage and teach the user it turns the process into something not only more engaging for the user but of massively more value.

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

Wrapping up the web app

July 13th, 2010

There are some web based applications that I use every day. I use Spotify to listen to music, Remember the Milk to organise my life, Tweetdeck to force my opinions on unsuspecting followers and Evernote to record clippings of inspiration and ideas. While thinking about the design of web apps one thing has really stuck in my mind. In an article by Luke W he talked about thinking and designing web applications as products, if web app is a product, design considerations such as customer lifecycle and packaging should be considered.

It made me think if Spotify is the product then what is the packaging? It doesn’t come in a box? The packing of these applications is the website that promotes it. This is the chance that the company has to promote its product and looking towards the restraints and considerations of physical packaging design can help strengthen a design. It gives a narrative for a designer to follow when creating and designing the most effective solution.

The large image used on the tweetdeck homepage makes the product very visible, allowing users to see the product in context.

The large image used on the tweetdeck homepage makes the product very visible, allowing users to see the product in context.


What can we learn from packaging design?

Packaging has certain contextual and physical constraints.

  • Space is limited to the size of box or DVD sleeve so information must be delivered concisely and efficiently.
  • Exposure to a potential customer is brief. They may only be walking past or scanning a shelf in a shop.
  • Customers will want to see a product so packaging must find a way to make the product visible, either through large, high quality pictures or by making the product physically viewable such as meat wrapped in clear packaging in a supermarket.


The evernote homepage does a good job a quickly communicating the purpose of the product using a limited amount of space and requiring limtied reading time.

The evernote homepage does a good job a quickly communicating the purpose of the product using a limited amount of space and requiring limtied reading time.


Applying this to the web

These are interesting points but how do we apply them to the design of a web apps accompanying website.

  • The website should always attempt to get information to the user as easily, quickly and concisely as possible. Copy should be short and sweet, pages should be kept to a minimum, titles and actions should be obvious and users should be able to navigate to content quickly and easily.
  • Web users are famously impatient. They will not stick around of they do not get what they want quickly and easily. Just like physical customers time is limited. Benefits and key information must be delivered fast.
  • A web application is not a physical product so how can we make this visible to the user? Screenshots, descriptions, videos, tutorials, testimonials, are all ways to make the product visible. The important thing is to let the user learn about the product before they have to download it.

These are all things that most UX designers will already be thinking of but wrapping them up in this analogy or narrative helps to deliver a thought process or a checklist to design against. If you want to learn more about our approach to design feel free to give us a phone on 0207 1991 321 or send us a message.

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

Designing Persuasive, Engaging Intranets

June 25th, 2010

At best Intranet design is a challenging task for most, at worst it’s a thankless job that sits at the bottom of many companies priority lists.
Taking ownership can be a daunting prospect, especially as many intranets are unfocused, sprawling repositories of content and ideas, grown organically over a long period. But taking ownership is the first step in putting a tool in place that can quickly become a high priority on the business comms list.

Over the past couple of years, intranets have become a hot topic within large and small businesses, and within the world of digital design. New platforms, techniques and an ever blurring line between the Internet and company Intranets driven through the integration of social, UGC, multimedia and semantic technologies has led to more stakeholders, with more requests and usually less budget.

Persuasive design

One of our most common findings during user and stakeholder research is that reason an intranet is unused and unloved is due to the fact that it’s never worked and never been adopted by the business.

Every task users are asked to complete online should at least as easy as off-line methods, or easier, otherwise users will always fall back to the default of asking a colleague, phoning a department or worse not doing anything.

The reason behind this is that existing staff have learnt their way round the system over time, usually years and new joiners are forced to struggle through anyway they can. A recent client’s intranet is so bad that new joiners are given a guided tour as part of their induction and then offered a CD-Rom or online video tutorial. I doubt any owners of an Internet site would expect a tutorial on how to use the site as acceptable; just make it easy to use.

I’m ready to be engaged

Whilst your intranet is unlikely to become “the” destination for your staff and should not try to replace other sources of external information, it should be functional and engaging in equal measures.

Features that rank highly from a users perspective usually include:

  • Buy, sell, rent
  • Interest groups (sports, social, clubs)
  • Lunch menu

For business engagement, these features rank highly:

  • Ask the management (live Q&A)
  • Personnel contact finder
  • Collaboration tools (wikis and connectors)

It’s important to remember that many of the tasks that your staff use the intranet for can only be completed online, so usage should not be confused with satisfaction. Providing tools and services that help staff to become engaged with the business and each other will prove invaluable in driving uptake and long term use of the site.

“Don’t underestimate the power of the intranet for fostering a sense of culture & belonging - it may not be a core ‘money-earner’, but that doesn’t mean it’s not important.”

How to guide

A few points that may help you in planning and designing your intranet include:

  • Governance to avoid organic growth - The key to providing a consistent and usable experience is providing a strict governance model to ensure quality control. Intranets by nature are created and controlled by many people and departments and without solid governance grow organically into a combination of different style and experiences.
  • Ownership and stakeholder involvement - Many challenges are faced throughout the redesign of an intranet as there is often no clear owner. Different sections and content are owned by different departments and stakeholders. It is important to include all stakeholders to both understand content and to promote a feeling of inclusion and acceptance of the work within the various content owners. This can present many challenges within time and cost restraints.
  • Content - Large volumes of content can make it difficult for users to find what they need. Intranets can easily be into tens of thousands of pages. Content can generally be clearly split into two types. Content that is generated by a department specifically for employees of that department (IT generating content for IT employees) and content that is generated by a department for all employees (HR generating content aimed at all employees of the company). Splitting the information like this can dramatically improve the ease of finding content by isolating information only needed by a single department in a departmental section.
  • Can’t find what you are looking for? - If content is difficult to find many users will resort to other channels such as asking colleagues to find important information. Information should be easily available so that users do not need to resort to other methods.
  • Navigation - Navigation is key to providing a consistent experience and allowing users to find and move through content. In an environment where this may be defined by many different content creators it is important to ensure they follow a strict model, usually by service offered and not by business function.

Next steps

It’s important to have a plan when working on your intranet and it’s valid not matter what stage you are at, defining a new site or migrating to a new platform. Here are a few points to follow:

  1. Take ownership; whilst often a daunting task, your ability to lead the project will ultimately deliver a very successful site.
  2. Don’t under estimate the scale of the task in hand; updating, migrating or creating an intranet from scratch requires a lot of time, effort and support.
  3. Use external consultants; they will bring a wealth of experience, offer an objective view and can help to mediate difficult decisions.
  4. Don’t redesign standards; user staff are familiar with Google, eBay, Linked In and Facebook, use these interfaces rather than creating your own, bespoke ones.
  5. Start collaborating now; get a range of staff involved in the redesign, they’ll become your champions and power users down the line.
  6. Benchmark; creating some form of  measurement will help to justify the time and financial investments needed for short and long term success.
  7. Don’t let the software control you; the platform is important but the business requirements and user needs should lead the design process.
  8. Content strategy; know what you plan to do with the content and create a strategy for developing it long term.

If you have found this useful, then why not get in touch and see how we can help accelerate the success of your businesses intranet.

we are: here to help you succeed

Why not send us a message or call us on 0207 1991 321

Content strategy, Intranet, global usability testing, information architecture, usability research, user centred design, user interface , , , ,

Can TV really be getting social?

June 21st, 2010

A review in Revolution of online TV services by our MD Chris Averill brought out one factor that was really interesting to me, a lack of social media integration. A new beta version of the BBC iPlayer looks set to change that in a big way. Once users register for a BBC ID they connect with their Facebook and Twitter accounts and share favourite and recommended programs.

Suggestions from friends are displayed right from the homepage

The hero item displays featured and popular programmes along with personal recommendations

Hello Facebook friends! I’m watching Doctor Who

Facebook and Twitter are definitely the flavour of the moment and integrating with these services could be a very clever move for the BBC. After all I have both social media accounts linked to various things including my phone’s contact book. This integration allows users to automatically post updates to their Facebook wall. Users can also share their favourite programs with their friends and discover new shows through their friends’ recommendations. This brings a whole new dimension to watching TV that has not yet been exploited by other online TV sources.

Users can both recommend programmes and view those recommended by friends

Users can both recommend programmes and view those recommended by friends

LOL, check out this m8

A really nice feature that encourages the sharing of videos is the link to this feature. This allows users to easily access a link not only just to the video they are watching but an exact point in that videos timeline. Good riddance to scrolling through videos trying to find an exact time when someone cracks a really funny joke your friend just sent you a message about. Making it as easy as possible for users to share videos encourages word of mouth or ‘text of social media’ advertising.

Users can easily link directly to positions within a video

Users can easily link directly to positions within a video

What about the competition?

So how does the competition shape up? In Chris’ review both the ITV Player and 4od service did not offer any social integration and this has not changed. This major step forward by the iPlayer is leaving the competition behind at the starting gates and more features are also on the way from the BBC. They are hoping to integrate Windows Live Messenger into the beta in the coming weeks. This will provide an even deeper social media integration and encourage a more in depth social interaction between users.

usability design, user centred design, user interface , , , , ,

Try something new every day

May 4th, 2010

Be inspired

You are in the last decades of the 19th century and want to understand how people read through a page of text. There is no such thing as an eye tracker (yet!) so what do you do?

You invent one!

That’s how the first “eye tracker” was born in the late 1800s, by Edmund Burke Huey. Readers had to wear lenses with only a small opening, that had a pointer attached. This allowed Huey to observe where they were looking and study which words they paused on. In essence it’s not much different to modern eye-tracking applications and just goes to show that it does take a bit of a great mind (with a little bit of that creative craziness) to come up with something simple and effective to address a challenge.

Be bold

OK, so this is not a history lesson, so why this intro? Chris and I had a discussion the other day about innovation and risk and how we can drive innovation for our clients. Granted, some will be more open than others, but can we help our clients take a bolder approach to things? Try new and not-so-well-tested techniques?

Well, my favourite example is… Marmite (ok, stay with me here)!  I really like their playful, self-deprecating approach to advertising, which they’ve also introduced to social media, by inviting users to post ‘like’ or ‘hate’ videos on Facebook in exchange for… free Marmite cereal bars! Most recently they’ve launched a tongue-in-cheek campaign that pokes fun at all those parliamentary candidate interviews, giving promises about changing the world (one marmite bar at a time).

Love it or hate it!

Love it or hate it!

Allowing (and actually inviting) ‘uncontrolled’ negative content on your social media page would have been concidered mad some time ago, but it takes a bold few to create a new trend. As brands evolve towards being more open and honest with their customers I’m sure we’ll see more and more of this boldness (cue HSBC’s First Direct, O2 etc).

Be different

The question though remains: how can we best help our clients be innovative and stand out of the competition? The answer is by being different - in a positive sort of way! We are different from other agencies and each of our clients is a new and different challenge for us. Most of the briefs we get usually require ‘best practice’, tried and tested solutions that work well for the majority of users and are usualy safe and guaranteed to work. Now - don’t get me wrong - this is great and for some projects that’s all that is needed. But the truth is that it will rarely make a website (and, in turn a brand) unique, standing out from the competition. It surely helps towards a good user experience and happy customers - but in today’s competitive world (online and offline) that’s just not enough to grab everyone’s attention.

We are here to help you go that extra mile for your customers. We love creating unique experiences and with techniques like behavioural targeting and multivariate testing, you can ensure you always get the best results possible. Call Chris now on 0207 1991 321 to have a chat about how we can help you stand out from the competition.

 

eye-tracking, interface design, usability design, user centred design , , , ,

The Ceasar Salad of wireframing

February 21st, 2010

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

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

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 ,

Why Good Websites Are Like Good Cars

December 28th, 2009
Love him or hate him.

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 soul, 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 , , , , ,

Mega drop-down showcase

August 25th, 2009

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 provided to the users are clearly divided with bold headings. The use of graphics helps to engage the users.

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 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.

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.

Samsung mega drop down

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.

Gateway mega drop down

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.

EA mega drop down

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

When does your brand Be*come a barrier?

July 28th, 2009

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

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

Be*en There Before, in the 80's

accessibility, information architecture, interface design, market research, usability design, user centred design, user interface , , , ,

Form best practise in action

July 6th, 2009

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

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 , ,