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

Author Archive

Getting smarter

March 2nd, 2010

I have been living with the Nexus One for about a week now after my jump from my poor old dumbphone. So what’s it like? How has a smartphone changed my life?

While not as big as the Apple App Store the Andriod market has some interesting and useful apps

While not as big as the Apple App Store the Andriod market has some interesting and useful apps

Techno geek

I may have only just jumped into the world of smartphones but when it comes to technology I’m a bit of geek. I love it and look for any opportunity to embrace it. The Nexus One has made some significant changes to my life over the past week. Firstly I never get lost. A quick search for a bar or restaurant and a quick check of Google maps always sets me on the right path when meeting friends. It has also helped me to embrace the use of social media far more than before. Being able to keep in touch with friends, share interesting usablity articles on twitter and also find alsorts of useful information while on the go mean the social connections become far more integrated within my life. The last big point is learning through experience and exposure. I believe the more interfaces and the more websites I experience and use the more I develop as an information architect. The Nexus one has not only exposed me to countless apps and mobile sites it also gives me the chance to explore interfaces even when I am out and about.

Having Google Maps everywhere I go is something I love about having the Nexus

Having Google Maps everywhere I go is something I love about having the Nexus

Thumbs up? Thumbs down?

The leap from dumbphone to the mighty Nexus definetely gets the thumbs up from me.

Mobile , , , , ,

Keep your eyes on the goal

February 27th, 2010

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

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

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

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 ,

Open, Charge, Play

February 21st, 2010

Having just been presented with a brand spanking new Google Nexus One I am beginning a series of blogs about all things Nexus One and Andriod.

Unboxing

As a great lover of Apple products I believe the experience starts with the packaging. So what was it like with the Nexus? The whole thing felt very Apple. A clean white box with just a hint of the Google brand colours. The packing felt like it belonged with a high end product and that is exactly what it contained. The only draw back of shipping a phone across for the US is the need to buy an extra charger for the UK sockets.

The Nexus One and it's simple packaging

The Nexus One and it's simple packaging

The device

The Nexus One is a sexy piece of kit. The phone feels solid and screams quality. I was impressed at how thin and streamlined the phone looked. The touchscreen is crisp, sharp and responsive. The interface runs smooth and fast. This is a definite iPhone rival.

The overall product is thin and sleek.

The overall product is thin and sleek.

The set-up

Setting up the device was painless. As you would expect it is integrates well with your google accounts and I had my email, twitter, facebook and various other accounts running in no time. Some nice interface touches such as the “See password” function (makes passwords visible not disguised) definetely help when setting up accounts on a touchscreen.

Watch this space

So keep your eyes on this space for more Nexusness and Andriod mania.

Mobile , ,

Keepin’ it real (simple)

February 7th, 2010

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

The primary navigation is clearly labelled

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

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

The homepage hero

January 18th, 2010

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.

Mozy.com homepage hero item

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

BBC Democracy Live

November 3rd, 2009

The site

The new site, Democracy Live, launched by the BBC primarily focuses on providing users with live and recorded footage of the UK and European parliaments. The site is comprehensive and easy to use allowing everyone from political experts to the politically baffled to find out what is happening in the parliamentary world.

BBC Democaracy Live Homepage

The hidden gem

The site however contains a hidden gem. Containing large amounts of video, search functionality is not an area where I expected the site to shine. The BBC however have proved me wrong. Speech to text software is used to make video content fully searchable.

search

When I search for the word labour I am not provided with a list of videos tagged labour or with labour in the title. A search provides me with a list of videos that contain a mention of labour within the speech of the video. I can access a list of every mention, containing a link directly to that point of time within the recording and a quote of what was said. This functionality is of course not available for live video but it brings a whole new dimension to search within the site.

The search results also present the user with other useful features. The user is presented with related political representatives, refinement options and related content. These are useful for not only finding specific information but also for exploring information related to your search term.

But what does it mean?

Proving such a search facility really adds to the site’s worth. As more footage is archived it will become a great research tool for anyone working in or interested in politics. By instantly searching the speech of video it removes the need for hours spent trawling through the footage. Users are provided with direct access to the information they want creating a much greater experience.

user interface , ,

We are: a winner in the Deloitte Fast 50

October 23rd, 2009

untitled1The Deloitte Technology Fast 50 celebrates the 50 fastest growing technology companies in the UK based onĀ  revenue growth. The awards began over a decade ago and this year we are:london are in a fantastic 18th place (7th in London)!

Our stable growth has set us apart from many companies during the economic downturn. We are constantly flourishing and proving ourselves as one of the most capable and competitive companies in the market.

Community

Greyhound UK

September 23rd, 2009

Raising the bar?

When first opened the new Greyhound UK site speaks of a slick simplicity. The clean, cool visual design of the site gives a classy feel not normally associated with budget travel. This good first impression also extends into the usability of the site. The booking process is quick and easy and within a few clicks I have chosen my desired journey. With the release of such a seemingly slick site is Greyhound UK raising the bar for competitors such as National Express and Megabus?

Greyhound UK homepage

Greyhound UK homepage

Visual design

While the visual design of Greyhound’s site seems far more carefully planned and thought out than the design of the Megabus site, there is far more to consider about the situation. Megabus has a developed brand and targets a specific audience. The garish blue and yellow may not be for everyone but it is instantly recognisable as Megabus, a pleasure Greyhound does not yet have in the UK. The audience Megabus targets want the cheap no frills travel that they provide. Their aim is to get from A to B for the lowest possible price, a slick website is not top priority.

Usability

The Greyhound booking process appears quick and easy but when you consider that they only busses from London to Southampton or Portsmouth and back you would expect this to be the case. A company such as National Express who cover almost all of the UK and parts of Europe has a far more complex booking system to create.

Back to the bar

The Greyhound UK site definitely brings a bit of cool competition to the budget travel site market. Users will remember the slick visual design and the ease of use and this may well drive visitors to the site. The questions is will the online experience of Greyhound UK be enough to users to switch from their well established rivals who are by no means performing poorly.

information architecture, interface 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 ,