Recently at a focus knowledge share I talked to the team about Information Architecture and its role within the user centred design process. I also talked through best practice methods and techniques that could be used within a digital project. I like to think of Information Architecture or IA as the art of organising websites or software to support usability. IA can be used outside of digital projects but this is what I focused upon.
Information Architecture can identify the goals of your website and help you to create a digital blueprint or wireframe of your potential users' process through your website. It is an important part of the strategy and solution design process right at the start of a web project. You can use it to eventually group up and define the taxonomy of all of the website's contents, products and features in a user driven way.
IA is just one part of the user centred design process, analysing your users needs and assessing the journey they want to complete on your website. It is using key usability principles such as visibility, accessibility and consistency to create the basis for what will become your final deliverable. The user centred design process as a whole incorporates a lot of real world testing to ensure no assumptions are made during the design process. IA starts off this real world testing at a very early stage, ensuring first of all you know the correct audience to test! Designers and developers must be experts in our fields, however we do not know often the intricacies of the end user and need to form our opinions on a basis of research to then take back to the client.
There is always a different amount of research required with every project. The methodology, processes and opinions of IA I am talking about just refer to common approaches rather than quoting from an exact guide to IA.
At the very beginning of any size IA process it is important to ask yourselves, your users and your client questions. What are the short term goals of the website? Why would people come to the website? We need at this stage to establish an audience, this is going to be very important as we will base the majority of our research gathering from this audience. At this point we have to really think through what different elements that make up a website's audience and how they will use the website differently from each other. You can create scenarios of them coming to the website, what their goals are and what difficulties they might have. From here we can gauge our competitors and start to address gaps in functionality in the market for the audience. This is only the start of your UX and IA journey, next you can start to define core content and the functional requirements of your website, this will lead you down a path of wireframes and lo-fi designs until you have your perfect blueprint for the website of your user's dreams!
Some of the core methods and techniques of IA were the reason I enjoyed it so much in university. Card sorting and content discussions with your peers either as part of the user group or as a facilitator is always fascinating and insightful. It helps to outline potential issues and golden points to your website that you have not thought of yet.
Creating sitemaps, wireframes and discussing the user flow throughout a website will help your designers. When they open the graphics tool of their choice they are equipped not only with their expert knowledge of the web but a knowledge of what the user needs and what goals have to be achieved by their design. Personas can often really bring a website to life, when you are discussing how best Jimmy the iPhone fanatic will achieve his goals of buying your client's products you can start to feel the website being out in the real world before it is fully created.
A full user centred design process is not always what the client has in mind when they bring a project to you, it is often the case that there is not a budget to go out and spend weeks creating personas and testing how the website flow using paper based designs. However small bits of IA and the user centred design process will always fall into a web-creative's design process, we want to create the dream websites for our users and the only people who know exactly what the dream is, is the users themselves.
Created on Thursday February 07 2013 03:38 PM
As a web designer, I owe my career to the internet and it's popularity but if I don't keep up with the ever growing market it holds then there could be trouble. It's down to me to ensure I stay ahead of the game by continually updating and streamlining my work to keep it relevant.
To do this I have to consider how web design might change. What may be popular in the future? which novelties are fading out?
A lot has changed in terms of web design over the past few years and as we wave goodbye to January (yes, already!) and delve deeper in to 2013 this growth is almost certain to continue.
Reasons behind change are varied but it is safe to say that developments in technology are one of them. WIth this in mind, here are just a few things that I think may remain or become popular in this new year..
O.K, so that was an obvious one but it has been said that just after next year over 50% of web traffic will come from a mobile device. It is becoming as important to please your mobile visitors as it is to please traditional web browsers.
Clean and efficient design doesn't look set to be disappearing anytime soon. People can't seem to get enough of the clarity it brings.
Expect large buttons now that touch screen has pretty much taken over, well, for commercial users at least. I know I'm not the only one using my mobile device to catch up on social networking on the way to work!
Mobile devices are getting far better at loading big sites quickly so the web will no doubt see more and more large and high definition images. Also, resolutions continue to increase so smaller images simply don't look as good as they used to.
Social media and creating discussion are both becoming even more important. In order to keep up their profiles businesses are embracing various techniques across design, SEO, email marketing and social media.
I don't have a crystal ball but it's good to gather an idea on what lies ahead if we want to improve user experience. Just one year can bring a lot of change, especially in technology. So, it's important to us to always keep on top of it as it can shape the way we design, test and market our websites.
Created on Monday February 04 2013 09:30 AM
We've recently launched a new ticketing system for our friends at Barriers Direct (http://www.barriersdirect.co.uk), and it contains some interesting features, and some close integration with the rest of the back office systems, that I'll briefly outline here.
For those that don't know, a ticketing system is a little like a to-do list that can be shared amongst people, and records status as things change. For instance, if a client enquiry comes in, we can assign it to the most relevant person to deal with it. Perhaps they have to query something with accounts before responding to the client, so they can assign the query there. Accounts respond, and assign it back again -- and so on until the ticket is finally completed and marked as closed.
Every action is time stamped with who said what and when. Unlike email, the entire thread of activity is available to all relevant people at all times - it's not hidden away in people's Inboxes and Sent Items. For instance, there's no more thinking that you sent this task to Bob yesterday, but he's off today, and wondering if he did anything with it - you can check the ticket, and see that Bob forwarded it to accounts. Now, someone else can follow up in his absence.
As people do tend to check email very regularly, however, the ticketing system sends various emails to let them know there are things waiting for them - it emails people when tickets are assigned to them, and emails daily summaries of outstanding tickets, for instance.
The team at Barriers Direct use extensive reporting facilities within Quantum to keep track of their business, and tickets mean they can produce reports of how many requests come in, what the different types of requests are, and how long it takes to respond to them -- and how that all changes over time.
The ticket system is integrated right into Focus's Quantum website administration system, which manages the order system too, and that allows us some tight integration that wouldn't be possible with a 3rd party ticketing solution; lists of orders highlight those with tickets associated with them, for instance, and vice versa, from the ticket you can get to the full details of the order in just one click.
If you're interested in knowing more about a ticketing system, either for an existing or new website - please do give us a ring, or drop us an email and we'd be very happy to talk to you!
Photo copyright Andres Rueda, used under a Creative Commons Attribution license.
Created on Thursday January 31 2013 10:18 AM
Sometimes part of the 'Information Architecture' planning stage of a website project, Content Strategy is a fundamental part of the success of your site.
Most charities know exactly what they want to say and what their message is, but don't know how to say it - effectively - on the web. Good web content is powerful, short; easy to scan over and navigate through. You don't lose your audience in those first few critical seconds with over-long and hard to read content.
Charity sites need to speak to a wide audience (several different audiences, in fact), and tend to focus on emotive images and text, with core messaging about their causes and how they help. It's common to feature large images, video content or graphics. You can see examples of these on our friends at MSI's site - www.ms-society.ie
The more you can identify what your audiences are interested in - and respond to - the easier it is to produce content that is engaging and thought-provoking.
A key part of Information Architecture - 'Personas' - can be used as an approach for planning content. You could consider holding a content strategy workshop; using audience personas to help your staff empathise with each audience type and 'see the site through their eyes'. From this work, your web team can assess the information architecture (navigation and content structure) for the site, ensuring it's relevant to the 'Persona' findings.
Planning and developing your site content needs to begin at the start of the project, and follow the agreed milestones; not be a mad copy-paste scramble from old site to new in the final days before go-live...
Linked to your site content will inevitably be Social Media. It's a cost effective way to increase your communication-reach; and ideally has some strategy behind it to keep focus on what's trying to be achieved. Your web team can feed in posts and tweets automatically to the web site or other social media tools - without you having to repeatedly copy-paste!
Tips for Strong Content
Keep it short - use short, punchy content rather than lengthy, rambling articles. Attention spans are getting shorter, so consider using videos to explain issues in a quick, engaging way - Save the Children is producing short videos to tell stories much faster, www.wateraid.org.uk will tell you at first glance: 'Today, 4000 children will die because of dirty water and poor sanitation'. Those 12 words say it all.
Use images - Real, hands on photos of activities and events. No head-and-shoulders shots! Staff and volunteers can - and should - take photos all the time, and save them in a communal image bank. But do try to save budget for a professional photographer, for key marketing images on your home page, brochure covers, advertising etc.
Get organised - Staff and volunteers need to capture all the highs and lows they'll experience in their day - these real-life stories will provide relevant content that will engage readers. Encourage them to save their notes and articles in a story bank - or better still, publish an article on the site!
Talk to your audience - People are used to informal language. Be natural, conversational where appropriate, and use plain English - and try to say 'you' more than 'we' where you can. Use terms that make sense - 'stakeholders' means something to your corporate team, but not to Bob who just wants to know what you spend your donations on.
And crucially - using copy that 'normal' people enter in search engines, makes that article easier to find in search results.
Use Social Media - ideal for presenting your 'personality'. Instead of sharing links to recent blogs or articles, use tools like Twitter and Facebook to chat with your audience. Try to actually reply to/contact someone every few tweets. Monitor your streams and direct audiences to further content.
Have a purpose - whether it's to get new donors, supporters, sponsors or volunteers, there should be a call to action on every page. This could be contact or to find out more, or also see...
Use quotes - comments from staff, volunteers or service users makes content feel 'real' and current.
User testing - your volunteers may be pleased to help with user testing; set them tasks to find certain information, or perform a series of content-related tasks. Getting feedback and input form 'real' users will be invaluable, and can be fed into the site to keep it fresh and effective.
Top tip - Always think about the 'So What?' factor. Why does your audience need to know this information, do they understand it, and what's in it for them...
If you'd like to know more about Information Architecture, Content Strategy or any other topics from this blog, please give us a call or drop us an email - we'd be very happy to talk to you!
Created on Tuesday January 29 2013 01:56 PM
The internet is rapidly becoming available on a whole host of devices and platforms, so I do not think I need to sell anyone the importance of a mobile friendly website. In 2012, smartphone sales overtook PC sales, and it is estimated that in three years time tablet sales will do the same thing. 28% of all internet use is through a phone, so this leads some companies to now move towards a "mobile first" development style. However what do you do for sites that may have been created before mobile became such an important discussion in web development?
At Focus we set about the task of creating a mobile site for 1 Big Database. There were two options for us, either we change the website to be responsive or we create a mobile specific version. To decide between the two you really have to look at your users' needs while browsing the site on their mobile. If your website has a variety of content and functions all of which need to be usable from a mobile browser then it is probably a better idea to optimise your website in a responsive way. This will allow all of the content to be the same or very similar across all devices whilst still being usable and looking good.
1 Big Database is a comprehensive directory of organisations and events across the Bath & North East Somerset, Bristol and South Gloucestershire area. We had identified three key areas of functionality that would be needed for mobile users. This meant that we would want to focus the users into these three areas, hiding the rest of the content and functionality on the website whilst still optimising look and feel for smaller devices.
We decided to use the jQuery mobile framework for 1 Big Database. jQuery mobile is a lightweight cross platform mobile framework, designed to enhance the development of mobile applications. It includes an ajax navigation system and page transitions to give an 'app like' feel to your websites. It has a core set of UI widgets as well as being built on jQuery core meaning if you understand the jQuery syntax it will not seem alien to you.
This allowed us to create a mobile website that would be available across not only the main smartphones but a comprehensive list of older phones as well, jQuery mobile also supports a vast amount of tablets and e-reader platforms if that is needed for your project. The documentation for the list of supported devices is available here. Within the jQuery mobile framework common HTML elements such as links, unordered lists and form elements are extremely easy to use on a mobile device. The feedback when pressing buttons, or moving between screens keeps the user aware of where they are in the website and what options are available to them. It can often be frustrating when having to zoom in on sites to view and then click through a complicated path on a mobile website. The elements have a consistent feel throughout the 1 Big Database website, with the inclusion of some theme use we were also able to keep the website consistent with the desktop version of 1 Big Database. We wanted experienced users who were familiar with having orange for selected elements, green for action links and blue for headings not to be put off by changing this on our mobile site.
1 Big Database worked well with a customised theme within jQuery mobile, but if you were creating a mobile version of a website that had a different colour scheme there is also the ThemeRoller available. For instance we are going to create a jQuery mobile site for Rainbow Resource, (an online directory for families with disabled children in the Bath and North East Somerset area) - this website has a very clear colour scheme that is important to its identity. With ThemeRoller you can create a base of themes which can then be implemented in the same way as the default themes leaving you a lot of options for website identity.
We're very pleased with the way that jQuery mobile has worked on this site, although we have also discussed when we felt it would not be as appropriate for some projects. If you have a website that is going to be very content heavy, with a deep and extensive navigation system it might take a while for users to click through using the framework; it suits much more focused functionality and content. Consistency is an important part of web development and usability but there may be projects where there are a lot of unique and different designs throughout the site. You can see a list of very different jQuery mobile designs here but I think if you had a lot of different designs within one site it would take a longer time to create them all within jQuery mobile.
So in conclusion, we have very much enjoyed using jQuery mobile on one of our projects but we would be very interested to hear other people's experiences and if you have encountered anything different in one of your projects.
Created on Wednesday January 16 2013 05:21 PM
So, over the Christmas break I renewed my car insurance (dull); using comparethemeerkat.com again, as I really like their easy-to-use interface, plus the free meerkat toy, obvs. And it goes without saying that I think their marketing is brilliant, every email I've received about the policy itself has been spot on in terms of copy and communication, including the fun notifications about my application for a free meerkat toy!
And to the point of my blog - they've made the emails responsive.
This worked really well; like many others I check my emails on my iPhone most of the time - in fact, more email is read on mobile than on a desktop email client or via webmail. Stats say 43% of email is now opened on a mobile device!*
Anyway, when my meerkat email came in, it looked like this (click to view whole email): - easy to read, clear and well formatted; with those all-important social media share options visible at the top - nice touch. I clicked a link to 'track postkat's progress', it took me to a sensible looking webpage.
When I looked at the same email on my laptop - see below - it had the same content, still easy to read, but reformatted for desktop use. The click-though went to the same webpage, incidentally - which worked well on both devices, largely due to a simple call-to-action and large visual.
Now, possibly most people wouldn't really notice this (webbies tend to look for it!), but that's the point - you are shown a version of the email that suits your device - and that's the beauty of responsive - it's subtlely brilliant and clever, and gets you the information you need in the best format available.
Of course, clicking links in emails on a mobile, means you're linking through to a website - will that be responsive too? Or dedicated-mobile site? Or annoying desktop with tiny buttons that you-just-can't-seem-to-locate...
Responsive websites? A whole other subject - I'll leave that one for another day!
You can read more about Responsive emails in Simon's blog article.
*Litmus -"Email Analytics" (December 2012).
Created on Friday January 04 2013 01:37 PM
Experian Hitwise have released some eye watering statistics about eCommerce traffic in the UK for Boxing Day 2012, which broke all previous records - and by some distance.
The Christmas period just passed was the busiest for online retailers - with 84m visits to retail sites on Christmas Eve, 107m on Christmas Day itself and 113m on Boxing Day - increases of 86%, 71% and 17% respectively.
Also up was the share of people using mobile devices to do their shopping - more than 28% of clicks on retail ads came from smartphones and tablets, and overall traffic from these devices accounted for 30.7% of visits, up from 19.8% for the same period in 2011. Data from IBM shows 24.73% of consumers used their mobile device to make a purchase - up 15.93% from 2011. With the number of iPads and other tablets sold over Christmas, these stats are no surprise.
From a search engine viewpoint, interestingly one in every 125 keyword searches included the word 'sale' - with 'Next sale' leading all queries followed by 'Debenhams sale' and 'Marks and Spencer sale'.
Conclusions? Owners of online stores need to review the impact that mobile-based shopping is having on their sites and also need to invest in CRO - conversion rate optimisation - to ensure they take full advantage of the increasing numbers of people shopping online, and to ensure that once once shoppers arrive at their site, there's no barriers to purchase.
Created on Wednesday January 02 2013 03:03 PM
Ok, so, as promised, a solution to the Secret Santa puzzled that I previously outlined here.
There's any number of ways you could do this, but the one I was thinking of was nailed by Jim (in the comments) and Steve (in the office) - so Christmas Congratulations to you both.
It works like this:
- Shuffle the list of people into a random order.
- Make a list where everyone is buying for themselves: Alice -> Alice, Charlie -> Charlie, Bob -> Bob.
- Now move the person that everyone's buying for along one in the list, and bump the other to the far end: Alice -> Charlie, Charlie -> Bob, Bob -> Alice.
And that's it! The approach works fine no matter how many people are in the list, never involves giving up and starting again, and ensures no-one will ever be buying for themselves.
It's not absolutely perfect in the randomness stakes; if Alice knows she's buying for Charlie, she knows for sure that Charlie isn't buying for her. (Unless the list has only two people in it!) … but in practical terms, it's almost certainly good enough.
As a postscript, I used this routine a few times in the run up to Christmas, and several times a request came up - can I set it up so that partners don't buy for each other? For example, if the Secret Santa-athon involves 3 couples, you probably don't want to randomly assign it so that people are buying for their partners.
You could achieve that by splitting the lists in two, and running two smaller Secret Santas.
If, for example, Alice & Archie, Bob & Barb and Charlie & Cindy were in couples, you could make two lists [Alice, Bob, Charlie] and [Archie, Barb, Cindy] and run the above process twice. Anyone not in couples could be assigned randomly across the two lists; it wouldn't matter.
(You could even group men and women into two lists, if you think the genders will buy better gifts for their own genders - but I'm certainly not getting involved in that Christmas argument!)
Anyway, thanks for reading and here's wishing you all a Merry Christmas and a Happy New Year!
Created on Tuesday December 25 2012 09:53 PM
We know how to party here at Focus! (?)
Prior to our Christmas meal, we ran a competition: each of us drawing a team member's name at random, to make an appropriate sock puppet.
Efforts were... varied to say the least. Simon disqualified Steve for making his brother do all the work. Kyle used the most potent glue ever, it still stinks now. Paul used some excellent hair-making materials. Jordana (with a bit of sisterly help) got a highly commended due to decorative efforts. I had to make two! but one was me :-) And one no-show meant Steve is replaced in our gallery by a Pug in socks (obvs).
But, Neil was our winner, being the only one to make his 'Jordana' all by himself. Well done Neil - and you win... a pair of Christmas socks!
Can you guess who is who? No, don't expect you can....
Have a fab Christmas everyone!
(Bigger pic here)
Created on Friday December 21 2012 12:29 PM
[UPDATE] A solution post is now available to read right here.
It's always a nice feeling when someone comes to me with a technical issue that they perceive will be really difficult to solve, and I'm able to tell them the solution is really straightforward.
However, sometimes the opposite is true; something that sounds simple at first turns out to be a bit more complex when you consider it further.
Christmas is just around the corner, and in offices, that means it's nearly time for Secret Santa to put in an appearance. So, I'm asked, can I knock up a quick computer program to allocate a random person to each person in the list, and email them telling them who they have to buy a present for?
So let's think about how we'd do it in real life. Probably the first thing that comes to mind is "names in a hat". Each person pulls a name out of a hat. Can't get much more straightforward than that.
We can write a computer program to take this approach - simplifying things a little, it reads:
1) Make a list called "hat" containing [ "Alice", "Bob", "Charlie" ]
2) Loop around for each person in the hat:
2a) Remove a random name from the "hat" list
2b) Allocate it to the person we're currently looking at
So, you run this a few times, and notice a bit of an obvious error; sometimes Alice has to buy a present for Alice. That's not much fun. (Or is it? At least Alice will get what she wants!) But, assuming that's probably not desired behaviour, we should probably fix that.
Ok, so what would we do in real life? If Alice pulled her own name out of the hat, we'd probably say: "Oh, just put it back in, and choose another". If she happened to pick her name again (tsk!), we'd simply ask her to repeat the exercise as many times as necessary. Ok, let's code that up:
1) Make a list called "hat" containing [ "Alice", "Bob", "Charlie" ]
2) Loop around for each person in the hat:
2a) Remove a random name from the "hat" list
2b) If the random name is the person we're currently looking at, put it back into "hat" and pick again
2c) Run 2b as many times as necessary
2d) Allocate the random name to the person we're currently looking at
Ok, this looks better. We'll run it a few times, and the results look pretty good. However, every now and again, the program just runs for ever and doesn't finish. Why?
Let's say on the first run through the program, Alice got allocated Bob. Great, let's carry on. Next up is Bob, and he gets Alice. Great, no problem there.
Charlie picks the only remaining name, and it's of course Charlie. He therefore puts it back in, and picks again, to find he's picked Charlie, obviously! A computer program does exactly what we've told it to, so will keep dutifully putting the one remaining name back into the hat, and pulling it out again, most likely forever.
Certainly he won't be done in time for the Christmas party.
So what to do? In real life, we'd probably just tell everyone to return their names, and try the whole process again - and, indeed, we certainly can tell the computer to do that.
We could add in a step before 2a that says "If the person we're currently looking at is the only person left in the hat, just forget everything that's happened and start again from scratch".
However, this is a little inelegant, and if we're really unlucky with our random choosing, it could take a long time to run if we have to abandon everything and start over several times.
So, consider this a Christmas puzzle, then - can you think of a more elegant solution to this problem that never involves giving up and starting over?
Let us know in the comments - but whatever happens, I'll post an update at Christmas with a nicer solution in it!
[FOLLOW UP] It would, for obvious reasons, be ideal if your solution worked with any number of people!
[UPDATE] A solution post is now available to read right here.
(Image courtesy of Flickr user Bart Fields, used under Creative Commons Attribution-NoDerivs 2.0 Generic license.)
Created on Wednesday November 28 2012 10:12 AM
Bristol: 0117 949 8008