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

The REAL iPad & App Test Verdict

May 11th, 2010
iPad customer review and ratings

iPad customer review and ratings

Do you want to know which iPad to buy now it’s been released in the UK, or find out which apps really are worth buying?

Well we have the answers to your questions and hopefully more, so read on, review and comment if you want to know more / disagree / have more information for our readers.

Firstly to qualify this article as the REAL deal and not just some recycled jurno junk, I have been using a iPad (64Gb wifi) for the past month, in anger as both a businessman and home user / dad of a 2 year old child and husband to a media junkie wife. I also have both UK and US itunes accounts so can access all apps around the world.

Should I get one or wait for something else?

That’s a great questions, especially as Intel have just released news of their new Atom chip that will be super fast, up to 1.9ghz, and super lean, hone batteris lasting up to 10 days. But anyone who bought an iphone competitor in great anticipation should just get on and by the iPad, it’s the real deal, you’ll not be disappointed.

I’ll update the blog as I go, so all findings are in chronological order (did you need to know that?)

Wifi or 3G?

This one is easy, if you’re likely to use your iPad out of the home or office environment, which is most of you over 16, go for the 3G. It drives me mad trying to log onto these rubbish public wifi networks and at £5 an hour on some, a PAYG or cheap O2 iPad tariff will be much cheaper. You can also cut your normal SIM card down apparently so get a Tesco mobie PAYG and you’re in.

Will it replace my laptop?

Office apps ♥♥

If, like me you spend a lot of time reading and replying to emails, showing presentations, reviewing RFPs or proposals then it’s better than a laptop. But if you want to edit those documents, then forget it, the tools are just too simplistic to do anything useful.

Yep, it’s true even the wonderfully designed Apple Pages, Numbers and Keynote fail to really compare to much more than Google Docs (which does not work on the iPad yet).

Other contenders such Office HD, et al have even bigger problems, save your money for now, be content with reading documents and not editing them. It will all come soon and it will be the online apps that win out.

Cloud computing ♥♥♥♥

I have also come to realise how important cloud services are, the iPad and other ultra-portable devices will cement this as the future, my favourites are Huddle and Dropbox. Huddle has a great UI and is easy to find docs, view online renderings and generally do what you need to do, other than download and edit document; see above as to why this is not such an issue.

Creativity ♥♥

Again it seems that the promise of great creativity on the iPad has been jaded by the early, quickly designed apps that feel a bit rubbish, in fact less useful than the iPhone versions. There are a couple that people like me will use a lot, iMockups and Omnigraffle both hold a lot of promise for interactive designers and Adobe Ideas, whilst basic, is great for freehand sketches on the fly.

Video & music ♥♥♥♥♥

In a previous blog I describe how the iPad came into it’s own during a power cut in a hotel recently and it’s brilliant. Anyone who has watched TV on an iphone or ipod will know that if the content is good, you soon forget the screen size. Well the iPad has great sound, an amazing screen and iTunes integrated rocks as always. You can stream UK Freeview TV using TVcatchUp.com/iphone and whilst the video is not HD, it’s pretty good for a free services.

Otherwise Spotify and Pandora (US only through VPN) are both great additions to your iPhone music library, infact I have sort of given up downloading from iTunes.

Battery life ♥♥♥♥♥

Is it a goer? Oh yes, it’s got more staying power than a student rugby team at a free bar. I have had at least 10 hours of continuos video play back and stand  by last for weeks even with regular use. In fact i have stopped carrying a charger at all, even over weekends, and the added bonus is you can use any iPhone charger with it.

iBook vs eBooks ♥♥♥

The Amazon Kindle and iPad book reading argument has been raging for longer than the iPad has been around, and whilst Kindle sales could do with a bit of Apple magic, the Kindle is a muh better ebook, mainly due to it’s e-ink and matt screen. As a long time Kindle owner I am impressed by Apple’s integrated book store within the eBook app, but less impressed by the weight of the iPad whilst reading anywhere that you need to hold it, and by the glare on the beach or in the garden.

However, the killer appeal to many will be the fact that the iPad is a multifunctional device, so it’s unlikely that the majority of interested consumers would buy both, only early adopters like me would bother. So there is a good chance that the iPad will become the defacto device for the casual consumer, but the Kindle will remain the leader as far as serious readers, most of whom will be big spenders, are concerned.

As a foot note to the book piece, there is an Alice in Wonderland app that is beautiful, interactive and worth every penny, my daughter loves it and I can see it becoming the DVD of the new millenium.

Will it save news and magazine publishing? ♥♥♥♥♥

Only good journalism / content can truly do that but the apps I have seen go a long way. It seems the publishers are split into two camps, it’s a digital newspaper and looks like it or, it’s a new device with new ways of interacting let’s redesign it.

The winners so far in the new new media war are:

  • AP News: mmm lovely UI and exciting ways to filter
  • Thomson Reuters: A bit hectic but using the space and interaction nicely
  • Zinio: Amazing renders of the actual magazines in an interactive format
  • USA Today: Content is still as dull as ever but the cross over design between print and digital is lovely
  • NPR: Looks great but a little less usable than the rest
  • Marvel Comics: The best interaction of them all, it’s amazing, very lateral

And the losers are:

  • Yahoo!: Indeed an exclamation mark is needed, it’s a bad 3D sitting room for a menu, very 80’s
  • WSJ: Looks kinda 1930s, which is nice if that was the brief
  • NYT: Again the retor squad have been out, nothing challenging just a bit dull and detached navigation
  • BBC: Not what I was expecting at all to be honest, poorly designed and too many images
  • Maxim: Whilst not on my usual reading list, the app is a terrible, ham fisted affair. Get Zinio and pay for the glossy electronic version of the print, it works, simple as that.

First impressions

It feels solid, the screen is beautiful, it’s a breeze to set up and the interaction is everything you expected. As always with Apple the bits you want to work do work, from effortless touch screen interaction to fast loading apps, beautiful email and calendars and web browsing.

In fact it’s so good I forgot about the lack of camera, USB ports, coffee machine bolt on, finger print readers, etc. When you use it you know every single part has been thought out and, unlike the all singing all flash playing future competitors, it does everything you need, just not everything you want, but it does it perfectly.

It’s far better than I could have hopped and it has been well received by everyone who uses it, in fact 100% of people who have used mine say they want to buy one now!

Mobile, apple, iPad, interface design, user interface , , , , , ,

Androids are officially on twitter

May 4th, 2010

I couldn’t resist downloading the official Twitter app for Android as soon as I heard it was available. As an avid tweeter I was excited to see what it was like.

The homescreen

Users are presented with a homescreen when they start up the app

Users are displayed trending topics at the foot of the screen

When loading the app the user is taken to a homescreen where they can choose if they wish to read tweets, view their profile or view lists messages or replies. The layout is simple and easy to use with large target areas for fingers to press. The area at the foot of the screen is very interesting. This area is used to pop-up various trending topics allowing users to visit these searches directly from the homescreen.

Peoples tweets

Users are presented with a pop-up menu to carry out actions

Users are presented with a pop-up menu to carry out actions

While reading tweets the application keeps access to all functionality on one screen. The full tweet text is displayed with a small pop-up menu displayed at the touch of an icon. This allows users access to functions as such as retweeting, replies, favourites and sharing while not leaving the main screen, not dissimilar to the method applied by the latest Facebook design where the user has access to many functions from a single screen.

Your tweets

The "Create tweet" screen is clear and well laid out

The "Create tweet" screen is clear and well laid out

The “Create tweet” screen is clearly laid out and organised. The update and cancel buttons are placed above the keyboard, not hidden behind it as in so many Android apps. An iPhone style on/off slider is used to toggle the users location on or off, an interface element many people will be familiar with but may not be clear to all of Android’s user base. It is easy to add or upload photos and another function allows users to access their following list to add people as an @ reply into their tweet. This is a handy feature that turns your following list into a contacts list.

Tweetclusion

The official Twitter app is a welcome addition to my Nexus One. It has currently taken the title off Seesmic for my top tweeting tool. Its combination of neat features and smooth interface make it a good choice for anyone.

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

Honey, I forgot the Milk!

May 4th, 2010

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

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

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

I think therefore iPad

April 10th, 2010

I’ve spent the last three days loving my new iPad. Being bed ridden as I have been, slipped disk, I have been able to try everything out whilst reading reviews and tips and frankly a load of general rubbish about what the iPad lacks.

Well let me put the record straight, it’s brilliant! If you have ever wondered what might happen to the future of magazines, worry no more. In 24 hours I have spent £39 on everything from Wallpaper and Yachting monthly to Mac User and Cosmo, and I’ve even become a fan of USA Today, a usually dull free paper you get in your hotel in the states.

Families will love it for long journeys and rainy holidays, 20 episodes of Peppa Pig downloaded already. I love the films, even though we have access to loads through Bafta, the iPad is finally a device that you want to watch things on.

If you have a Bluetooth Mac keyboard you can link that up, whilst I am typing this on my lap unsung the on screen keyboard, ouch, but it works and it’s as fast as a normal keyboard.

Web browsing rocks, battery life is amazing and as a thing to own it takes some beating, although there are a couple of shady people here in A+E that look like they may give me a beating for it.

Other tools that will amaze you both visually and usability wise are the email app and the calendar . Both bring things to life on a screen like this that even my mac air struggles to do.

All in, it’s as big an advance as the iPhone and whilst many will reject it initially for not having a web cam or 16 USB ports, or what ever unknown need they suddenly find they have, eventually it will shape the future of ultra-portable computing.

Mobile, interface design, user interface , , ,

A night at the Opera

March 21st, 2010

After hearing that Opera Mini 5 has been released on Android I jumped at the chance to try out a new browser on the Nexus One. I had heard good things about Opera Mini so how does it shape up?

First impressions

My initial first impressions were good. The interface looks slick and the browsing experience seems fast. Menus and features are intuitive and easy to navigate. A notable point is the use of an on-screen menu, giving it an iPhone feel rather than utilising the menu soft-key at the foot of the Nexus screen to bring up a hidden menu.

The tabbed browsing interface allows users to open, close and access tabs

The tabbed browsing interface allows users to open, close and switch between tabs

Tabbed browsing

The feature that really stands out for me in this browser is the tabbed browsing. By selecting an option from the on-screen menu a user can bring up a small panel allowing them to both easily open a new tab and to smoothly switch between tabs already open. The interaction and design of this feature is a massive plus. It translates the desktop browser ability into a usable mobile feature.

The speed dial page allows quick access to favourite wesbites

The speed dial page allows quick access to favourite wesbites

Speed dial

Another useful feature of the desktop browser translated across to mobile is speed dial. A feature useful for quick access to your commonly visited websites. This screen loads when you first start up the browser allowing you to navigate to your favourite site at the poke of a finger.

To draw my conclusions

The browsing experience is quick and feels smooth. Features such as speed dial, Opera link that allows syncing of bookmarks and speed dial between phone and computer, and especially tabbed browsing stand out and offer a great reason to switch to Opera. However it is misssing an important interaction that is offered by the default Andriod browser, pinch to zoom. The double tap utilized by Opera feels slightly awkward and saw me accidentally click buttons and links on more than one occasion. Overall I will still give it a thumbs up and it is great to see viable browser alternatives cropping up on Android.

interface design, user interface , , , ,

Google Nexus One - The Real Review

March 14th, 2010

iPhone 1, Nexus none

The overall product is thin and sleek.

The overall product is thin and sleek.

After 2 months of serious use I have finally given up on the HTC Google partnership that promised so much, but delivered very little.

Compare and contrast

In summary the Nexus is unresponsive, has a pointless set of hardware keys and is far to hobbyist for a serious business user.

I have an original 1st gen iPhone which is far more pleasurable to use than the far more powerful than the Nexus.

For fist time smart phone users, you’ll love the Nexus as it is the first real challenger to the iPhone, but for iPhone users you’ll spend the days wondering why you felt the need for a techno sabbatical.

Hot or not

  1.  Touch screen: iPhone perfect - Nexus sluggish
  2. Camera: Nexus splendid - iPhone adequate
  3. Apps: iPhone appy - Nexus garden shed developers
  4. Browsing: Neck and neck on speed and use
  5. Email: iPhone almost corporate - Nexus won’t do exchange calendars
  6. Speaker phone: iPhone hands free - Nexus 2 cans and a piece of string sound quality
  7. Buttons: iPhone one button one purpose - Nexus four always in the way
  8. Interface flow: iPhone one way works for all apps - Nexus lucky dip as to how you get back to where you started
  9. Multitasking: Nexus does - iPhone does not
  10. In summary: iPhone is easily the best

Now I am a fairly business focused user, but I also understand what makes something great, and for the iPhone it’s the quality control that is in place to make sure all apps work like they should.

The quality of both the native interface of the Nexus and the apps that are around are so poorly controlled that you soon find yourself giving up on new ones as all they do is crash your phone or drain your battery.

This “open” standard that so many knocked Apple for controlling will be the single reason that the iPhone app store will make millionaires out of developers and leave the Nexus looking like a niche product for those who want to be different or like to build their own PCs rather than buying a Dell.

It’s not all bad

However, volume often leads to success and I am sure that the rapid spread of Google’s OS will see a more polished version of an iPhone clone coming soon. And I am also sure that the apps will start to get better and those quality developers will be the ones that become know above the rest of the hobby crew.

Mobile, interface design, user interface , , , , ,

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