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

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

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 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 Internet, Mobile, Nexus One, social networking

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

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

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, Internet, Mobile, Nexus One, usability

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

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

Thumbs up? Thumbs down?

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

Mobile Facebook, Internet, Mobile, social networking, Twitter, usability

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