we are: London

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)

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

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 ideas, inspiration, Internet, usability, user experience

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.

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.

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 Design, ideas, Internet, usability, user experience

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.

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

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

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 Design, future, innovation, Interactive TV, Internet, social networking

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!

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 Design, eye-tracking, ideas, innovation, inspiration

Working on projects with multiple deadlines, deliverables, meetings and workshops can always be an organisational challenge. Keeping a record of all the things you have to do, when they need to be done and how important they are can be a nightmare to keep on top of. To keep all my tasks under control I list out all my tasks. To keep all my deadlines, meetings and workshops in mind I enter them all into my calendar. I do however start to find myself with multiple lists on various pieces of paper and my calendar is not connected at all. If I leave my list in the office and go to work onsite I am left unorganised. This was of course until a colleague turned me on to a popular web application called Remember the Milk.

Users can easily view their tasks and navigate between lists

My problems answered

Remember the Milk is an online to do list application that lets me enter all my tasks, give them deadlines and days to be done/completed, organise them into priorities, keep several lists separating my work and private tasks and even more. It’s all kept online so is available from anywhere I have an internet connection. It even sync’s with a Remember the Milk application for my Android phone (iPhone version also available), and sends me daily reminders of my tasks due that day. It combines all the tasks both my calendar and paper lists achieve into one easily accessible place.

Remember the user?

So i like the concept and it solves a real world problem for me but what about the UI? I can remember the milk now but did they remember the user?

Using commands can turn the single task input field into a powerful tool

The interface is clean and simple with some nice touches. The right hand column floats to be always visible when users scroll down long lists. The tabbed layout allows for easy navigation between lists. The right hand column gives easy access to all the main task options allowing users to quickly edit due dates, estimated task time, notes and tags.

The key to the usability and experience of the application is the prominent task input field. This allows user not only just to add the name of a task but to use a series of commands to enter further details of the task in the single text box. Users can add due dates, priorities, tags, locations, repeat tasks and time estimates by adding commands such as hash symbols. This may involve a degree of learning but for an application that many users will use every day it turns a single text box into a extremely powerful piece of functionality.

Mobile, information architecture, interface design, usability design, user interface innovation, Internet, Mobile, Nexus One, usability, user experience

After reading an interesting article on the BBC I started thinking about search and the existing styles and methods that we use to find information. I have had the luxury to spend some time playing with Google Goggles and I have to say I’m impressed.

The Google Goggles app allows users to take images of many items inlcuding popular landmarks and find search results based on the image

Google Goggles is an application available on Google’s Android operating system that allows users to search the internet based on input from their phones camera. If I take a photograph of a book,  a computer keyboard or even a bottle of Heinz ketchup it will return related search results and images. It’s ability to do this is quite astonishing (apart from of course every time I try to show off to my friends).


Could search methods such as this be a first glimpse of many new search methods of the future. Google certainly have a good pedigree in the field and I am looking towards them for any glimpse into future trends and innovations. Google stripped search down to it’s bare bones with their simple and clean text search. Will they now break down the barriers associated with this search style to create more innovative and natural search methods?  Methods they are currently quite successfully developing on Android such as searching by voice, searching by handwriting recognition and the Google Goggles searching by visual input certainly point towards this.

Mobile, usability design, user interface Internet, Nexus One, Search

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