Feb 12 2015

How we do agile and lean development projects in our web agency

At S8080 we like to keep things lean and we like to get things done. How exactly do we like to get things done? By sticking to some key principals taken from Prince2 and Agile (why limit yourself to only one project management methodology!)

After the client alignment, UX and creative phase, we’ll have a big kick off session. This ensures that everyone on the team knows the end goal, how it can be achieved and their role in achieving that goal.

User stories and the agile wall

Once all is understood and all questions asked, the team will plan out the project by creating user stories, these are simply cards that contain a specific story, or goal. For example one story may be “As a student, I want to be able to view all books available”. Once all stories have been built up, the team as a whole will estimate how long each story will take to complete.

With all the stories created and work estimated, the team place the cards up onto the Agile wall. Think of the Agile wall as a huge ‘to-do’ list.

As the team work on a story they will pass through several stages from the ‘backlog’ to being ‘accepted / completed’. To ensure this process runs smoothly, the teams will have a quick 5-10 minute stand up in the morning, at these stand ups the team will work though any problems or ‘blockers’ that are stopping them from working.

Iterative approach and sprints

We keep our clients well informed by showcasing our work to date at the end of every iteration / sprint. This is a great opportunity to gather feedback early on in the development process, instead of the big reveal at the end. We couple these showcases with a weekly report, which contains contains a general status, dependencies, risks and any issues.

At the end of each sprint, we will perform a retrospective, this is the opportunity for the team as a whole to suggest how we can make improvements for the next iteration – and usually demolish a pack or two of Welsh cakes.

Because some customers require a fixed scope, time and budget we also provide a Gantt chart, this will contain a detailed list of the functional outputs along with any user testing, security testing, UAT and other dependencies. If there is any additional work to be added to the scope, this is simply dealt with via a change request.

Our key take away points are:

  • Encourage team communication through daily stand ups
  • Encourage team organisation through visible Agile boards
  • Encourage early feedback from the client by introducing end of iteration showcases
  • Encourage team performance with end of iteration retrospectives

Sometimes agencies can get too clogged up in ‘how to do Agile development’ to the letter instead of finding a method that works for them, after all, not all clients, teams and companies are the same.

May 22 2013

Information architecture – content audits and inventories – why we bother and some quick tips

This post is about content audits and inventories, tools we use as a key step in the reshaping of the information architecture and content strategy on any web design project. It has to be said they are an essential but often daunting first step of a big old redesign, restructure or migration…IMAGE of information architecture work shop

Why bother with content analysis, content audit’s and content inventories?

When we redesign or restructure websites the aim is to provide users with better information, user experience and to hit key organisation metrics. To do this we need to know what content there is on the current website, then with some user research we can provide recommendations for gaps, where content may need to be reworked and where we think content can be removed to de-clutter.

It has to be said it is not the task any UX professional looks forward to – but as we work through the site and create a content audit or inventory (typically hundreds or thousands of rows in a spread sheet), we get really under the skin of the website and the content – a crucial step in the UX design process.

The content audit – a sample of the website content not a full inventory

We use the content audit when sampling an existing site in order to inform the UX phase.

The content audit gives a really good feel and flavour for the content of the site, it doesn’t guarantee to have every piece of content logged in a spread sheet – that’s what a full content inventory is for. The content Audit does allow us to understand what is in the existing site so we can reorganise it along with user feedback and the organisation’s objectives.

All of the results are logged in a spread sheet along with annotated images – we typically start on the home page and follow the key links on the page – the key sections of the site. Then for sub sections of the website’s IA we do the same – follow the key links, and then we look at high traffic areas of the web site too.

When we are auditing the content we will be looking at qualitative attributes, like readability, relevance to audience, things that are going to require human or editorial input. We also give a description of the content and we categorise the content – allocating it to themes or genres.

The content inventory – a monster spread sheet

We create a content inventory when we are performing a migration and have to account for every item, the output is a huge spread sheet. The content inventory is a detailed page by page log of all the pages in the site, it helps us to keep track of all of the content and map it to a revised IA, and of course helps us to estimate the amount of effort needed for the migration.

The content inventory is more quantitative than the audit and includes: page title, current URL, H1 tag etc. The content inventory will then evolve into a core part of the web editorial calendar and on-going content strategy by manually adding the content owner, person responsible for migrating and updating the page, review period, when it was published, date it was last edited, ROT status and new Location that we are migrating it to.

For inventories we’ll use crawlers alongside a manual inspection and audit of key pages.

What about content analysis on really large sites – 5,000 pages plus?

We are regularly asked to help on big websites with between 5,000 to 20,000 pages, sometimes XXL websites that exceed 50,000 pages in multiple languages. When we work on larger sites we will typically do an inventory including every page on the site using automatic tools and then layer on top a human audit of the top 2 or 3 levels, plus exceptions, and of course we look in detail at high traffic areas of the site.

Ok that stage of the UX phase was painful… but key

Now we really know what is on the website when layered into the user research (user surveys and card sorting) we can really provide solid recommendations to shape the information architecture – and work through the really fun parts of the user experience process!

If you would like to chat about how S8080 could help improve your web design and user experience, call 01792 485566 and ask for me, Matt Howard, or email, info@s8080.com.

Aug 18 2011

New Number10.gov.uk website designed in Wales

www.number10.gov.uk

S8080 are incredibly proud to announce that the new Number10 website was designed in Wales – by us!

The new site, which uses the WordPress platform, was launched a couple of weeks ago after an intensive UX, design and build phase.

More info soon.

Mar 18 2011

Design is how it works

Nov 17 2010

Children’s web sites, designing web sites for children

We’ve been working on designing number of children focused web sites and micro-sites recently, which is always a real treat. When working on the usability and IA aspects we undertook a lot of research and this recent piece of research form Jakob Nielsen was a real help:

http://www.useit.com/alertbox/children.html

In a nutshell Neilsen’s research found that the older kids age groups have moved on substantially in their web proficiency since their last studies, this is due to the early exposure of children to computers so generally children today are much more experienced in using computers and the internet.
It was also really interesting to read that kids from 7 years and older were showing ‘fairly advanced behaviors’, so now all but the youngest kids scroll down pages.
In the article there’s a great table which summarises the differences between children’s and adults user behaviors. Some of the key points and things to keep in mind for me were:
  • Kids love to explore, they will try and play with options and mine-sweep the screen
  • Kids find multiple / redundant navigation confusing
  • Real-life metaphors for example spatial navigation is really good for pre-reading kids
  • Font size: 14 point for your kids, 12 point for older kids
  • Typing is slow and poor mouse control is common so interactive elements need big distinct clickable areas
  • Animation and sound is liked (unlike adults who typically dislike these)
  • Kids tend to use bookmarks more than search, whereas the older kids and adults use search more

There’s some more information on our web site design specifically for Children here:  http://www.s8080.com/sectors/childrens-websites/

Mar 12 2010

Keeping you in the air

We recently launched a large content managed website for TES Aviation Group – a large international, but Wales based aircraft engine management company.

For Matt and myself, it was one of those dream jobs – a fascinating subject, a great group of people and a thoroughly professional and forward looking organisation. One of the highlights of our initial alignment workshops was the tour of their vast facility in Bridgend, south Wales and getting up close to some of the most powerful engines in the world. A schoolboy dream.

We worked through our UX (user experience) processes, spending considerable time talking with the various teams in the organisation, gathering valuable insight into a very complex industry and its own unique set of interactions between client and supplier.

These interviews, combined with alignment sessions with the sales and marketing director and his team, user journey design, process mapping, competitor review and content audit meant we could design the IA (Information Architecture) and wireframe prototype matching the user’s’ needs tightly to TES’s business objectives.

Then our creative and interactive teams were let loose on the look and feel, extending their existing brand into online. The design was then wrapped around our content management system enabling the TES teams to keep their content up to date from anywhere in the world at any time of day or night (these guys travel a lot!).

The site is attracting a lot of industry interest as the analytics are already proving.

We look forward to a long and interesting relationship with TES. It is worth a visit just to see the most amazing (and valuable) coffee table in Wales – made of scrapped titanium aircraft parts.

Jul 20 2009

Writing detail pages / information pages

The ‘inverted pyramid style’ of writing and structuring information pages for the web, where the first paragraph summarises the key point of the whole page, is tightly aligned with how users scan and gather information from the web.

In a previous post ‘What are navigation pages / pathway pages‘ I looked at rules of thumb for navigation pages, how to get users to the detailed information quickly.

Now your users have got to the information pages we’ll talk about what to put in them and how to structure them – the ‘inverted pyramid style’, this is relevant for both blog pages and deep content in a site.

What are the user goals on information pages?

  • Scan to check that they got where they thought they were going
  • Scan to see if what they are looking for is on the page
  • Scan to find the key point of the page
  • Possibly read more details to get background information

User research clearly shows users look at the page title, the headings and scan for key words in the text – primarily the first paragraph and then decide if they are going to read the whole page or note.

So how do I write information pages in the ‘inverted pyramid style’

  • Put the key message / main point first – users tend to be selective (and lazy) they will read a few words or a paragraph before deciding if the information is relevant.
  • Sum up the point of the page in a single summary paragraph at the top of the page
  • Then add supporting information, which is ordered relevant to users
  • Finally add history, background, additional links to find our more detail and detailed documents

Why a pyramid?

The pyramid represents the number of users who’ll read the different layers of the page, only a few get to the end – that’s why it’s so important to summarise the key point in the top paragraph of your page.

Who supports the inverted pyramid style?

Web usability gurus such as Jakob Nielson: http://www.useit.com/alertbox/9606.html

Finally you may find these posts useful:

Writing copy for the web:
http://www.s8080blog.com/2006/08/writing-website-copy/

How much do we read online:
http://www.s8080blog.com/2008/12/how-much-do-we-read-online/

F-shaped pattern for reading online:
http://www.s8080blog.com/2009/01/f-shaped-pattern-for-reading-online/

Jul 6 2009

What are navigation pages / pathway pages?

In this post I wanted to talk about the user’s needs and general rules of thumb for navigation or pathway pages…

So what’s a navigation page?

Navigation pages are the pages between the home page and the information pages. The aim of navigation pages is to get the user quickly to the information they are looking for.

Most site visitors are on a hunt – they have a goal or task and the navigation page is THE way to get them there quickly (by increasing the scent of information and giving clear links as next steps).

Above: Navigation pages – where they sit in the site hierarchy

From our observations, and other research, people don’t want to read a lot when they are ‘hunting / foraging’ for information. Only when the user has reached the page which screams ‘here’s the information you are looking for’ does the user suddenly turn from information hunting to gathering, they are now ready to feast, read – and devour information!

Some rules of thumb for navigation pages:

  • Navigation pages are really table of contents – they give a quick overview of what’s offered and show the user where to go next
  • Cut the text – most users won’t read even a paragraph of text on a navigation page, the page needs to tell them what to click on / do without reading
  • Links with a short one line of text which includes trigger words / keywords helps
  • Images can help too – make sure they add to the users understanding of what is behind the link and are not just ‘eye candy’
  • Bullet points work really well
  • Marketing messages and copy will be ignored – on navigation pages just make sure user can find the information they are hunting for quickly
  • Don’t panic about the “3 click rule” (or rather “3 click myth”), observing users has taught us they are happy to go beyond 3 clicks if these are quick clicks and the information scent is getting stronger
  • Don’t make people think on navigation pages – use simple language, bullet points, big obvious links to all speed up navigation

An example of a navigation page we designed for visitwales.co.uk – the aim for users to be able to move to the information they need VERY quickly

Directgov (www.direct.gov.uk) has lots of really good navigation pages, here’s one for Motoring:

Lots of quick links and bullet points making a highly scannable and therefore quick navigation page.

Of course on many bigger sites we have a couple of layers of navigation page, as long as the information scent gets stronger as the user clicks through these they are fast links and get the user to their destination really quickly.

From the motoring page on DirectGov site clicking on “registering a vehicle” takes the user to another navigation page which then goes to the full information page

What about users landing inside the site?

Many users will land directly in your site, maybe on a navigation page so that’s why its important that navigation pages include:

  • Site logo, name
  • Strapline (make the logo a link to the home page)
  • Global navigation device
  • Home link
  • Site search box if there is one on the site
  • Footer and utility navigation devices

Finally users aren’t perfect!

On navigation pages we see uses clicking / choosing the first option that looks like it fits the bill. Therefore when organising the navigation page make sure:

  • the ordering of lists and priorities on the page are carefully considered
  • the most important information and links are high up the page
  • if you want to persuade users to click one link over another put the priority link above the other one

Once you’ve built the navigation pages test them with users against tasks and goals.

For more information on writing for the web this book is great: ‘Letting go of the words – writing for the web’ by Janice (Ginny) Redish

May 7 2009

Really shout the purpose and message of your site

We’ve just got back from some detailed user testing and the importance of getting the home page to answer VERY LOUDLY the user’s immediate question’s “What is this site? What is the purpose of the site? Who is it for? What can I do here” is clearly still so important…

If the purpose of the site is not clear to the user within the first few seconds of landing on the home page then the user often makes up a site purpose in their mind. This distorts their whole experience of the site making it much harder for them to interpret the site, ultimately meaning they will misinterpret something, get frustrated and leave.

When users do “get it”, understand the purpose of the site, they are much much more likely to understand the rest of the site, follow the carefully crafted user journeys and information scents – achieve their goals and have a good experience…

Getting the purpose of the site across

Every element on the home page builds a users understanding of the purpose of the site and what they can do on the site.

That being said when testing with eye tracking we really saw users scan two areas of the page where they expect to find a concise and easy to understand statement of the purpose of the site, these were the ‘tag line / strap line’ – right next to the logo and the ‘welcome blurb’.

By tweaking the text in the tag line and welcome blurb we were able to ensure participants “got it”

  • The tag line

– right next to the Logo / Site ID is one of the most valuable bits of ‘real estate’, when users saw some text visually connected to the Logo / Site ID they knew it was meant to be a description summarising the whole site

  •  The welcome blurb

– this short description of the site, above the fold in an obvious position should be a terse description of the site, try and keep it to less than 30 words, we found this really reinforced the tag line if it echoed the tag line and expanded on it slightly.

 

see: www.wales.com(this wasn’t the site we were testing but is a good example of the principle)

Why have both a tag line and welcome blurb?

Not everyone will use both these elements; if someone is deep linked into the site then there will be no welcome message so the tag line but the tag line next to the logo should give the user a good summary of the purpose of the site. So have both on the home page and use the tag line throughout the site.

In a nutshell – getting the message across

  • Don’t be subtle… don’t take the approach “we don’t need to, it’s obvious”
  • Use a tag line right next to the site’s Logo – and make sure it is easy to understand
  • Use welcome blurb to reinforce the tag line
  • Good tag lines are clear and informative
  • Vague tag lines are bad

If you can test the site on someone who hasn’t been involved in the site’s design asking the question “What do you think the purpose of the site is”, if the participant can give you a credible answer you’ve cracked it – nice work…

….and it helps with search engine optimisation (SEO)

Twitter and Facebook do it

see: www.twitter.com

Of course some sites don’t need to follow these principles – because they are huge global brands: Apple, BBCetc.

See also:

For a really great no nonsense summary of usability read this book: Steve Krug: Don’t Make Me Think – a common sense approach to web usability.

Apr 15 2009

First 2 Words are critical for scanning lists and headings

Here’s the latest snippet of usability testing from useit.com who tested how well users understand the first 11 characters of web site links & headlines

In a nutshell:

Lists are great for scanning and web copy and therefore used all over web sites (search results, category pages, news lists, blog lists, twitter feeds, table of contents, site maps, bulleted and numbered lists in content etc etc).

The research finds users scan and typically see about 2 words for most list items, approximately 11 characters.

The best links had these characteristics:

  • Plain and simple language
  • Specific terminology was used
  • Follow conventions for naming common features
  • Action oriented
  • Show numbers as numerals in web text to catch the users eye and get more into the headline and links

The worst links had these characteristics:

  • Generic, bland words
  • Made up words or terms were used
  • Start with waffle

 

SEE the full article: http://www.useit.com/alertbox/nanocontent.html

Apr 6 2009

Cunning – how Google gets users to provide metadata / tags by making it fun

I must admit I thought this was a clever way to get images tagged, the Google Image Labellerturns the laborious task of tagging images into a game you play with another user online.

 

Feb 17 2009

Open a window or not

Here’s a neat article from Smashing magazinesummarising whether to open a new browser window or not:

http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/

A quick summary / rule of thumb is open links in a new window only if:

  • The link is to a non HTML document e.g. a PDF, XLS, MP3 etc, in this case use a popup window without browser control toolbar
  • The link provides help / assistance (so the user doesn’t have to navigate away fro the page they are currently on)
  • The link interrupts an ongoing process (e.g. filling in a form, checkout forms) so a user doesn’t lose information that they have already typed in
  • The link is to a large image which takes time to load (opening the image in a new window allows the user to read the content while the big image is loading)

Everything else should open in the same page unless explicitly stated that links are opened in a new window – and don’t open a new window unless there’s a really good reason.

Feb 12 2009

What is information scent?

Sometimes you see a link and you are dead sure you know what information you’ll see when you click on it – other links you just haven’t got a clue. When you are searching for information and have a specific goal the extent to which you can predict what you will find if you follow a certain path and links through a site is called the ‘Information Scent’.

‘Information scent’ is part of the information foraging theory which uses the analogy of animals hunting for food to ex plain how users interact with a web site.

In the same way that a hunting animal is sure that that following a stronger and stronger scent will mean that they find their prey at the end. Your visitor clicking through your site searching for specific information or with a specific goal will continue to do so if the information scent is getting stronger and they keep on finding links which take them closer to their goal.

This is why it’s important that the navigation is clearly defined, labels state what they will find, that the language is plain and easy to understand, and why its great to add trigger words as cues within your links – all to make that information scent particularly smelly!

Jan 30 2009

Usability: What is a heuristic evaluation?

The goal of heuristic evaluation is to find usability problems early in the design of a website so that improvements can be made as part of the iterative design process.

Heuristic evaluations are usually conducted by a small set (one to three) of evaluators. The evaluators independently examine a user interface and judge its compliance with a set of usability principles. The result of this analysis is a list of potential usability issues or problems. The usability principles, also referred to as usability heuristics, are taken from published lists. [1]

What is a heuristic?

An example of some high-level heuristics might be:

  • Help users recognize, diagnose, and recover from errors. [2]
  • Design to facilitate recognition rather than recall memory. [2]
  • Enable frequent users to use shortcuts. [3]

Lower-level heuristics may include:

  • Clearly and prominently communicate the purpose and value of the web site on the home page. [4]
  • Provide feedback to let users know where they are within a web site. [4]
  • Make the link text consistent with the title or headings on the destination (i.e. target) page. [4]

What are the advantages of a heuristic review?

The method can provide some quick and relatively inexpensive feedback to designers. Feedback can be obtained early in the design process. Assigning the correct heuristic can help suggest the best corrective measures to designers. [5]

How does it differ from an expert review?

In an expert review, the heuristics are assumed to have been previously learned and internalised by the evaluators. That is to say, evaluators do not use a clear-cut set of heuristics. As a result, the expert review tends to be less formal, and usually there is no requirement to assign a specific heuristic to each potential problem. [6]

Sources

  1. http:www.usability.gov/methods/heuristiceval.html#whatis
  2. Jakob Nielsen, Ten Usability Heuristics: http://www.useit.com/papers/heuristic/heuristic_list.html
  3. Shneiderman’s Rules for Design
  4. Usability.gov, Research-Based Web Design & Usability Guidelines
  5. http://usability.gov/methods/heuristiceval.html#advan
  6. http://usability.gov/methods/heuristiceval.html#how