Jun 6 2016

Haringey Council. Tottenham Regeneration website

tottenham-mockup-1

Haringey Council has ambitious regeneration plans for Tottenham, with schemes underway to address local people’s priorities for more job opportunities, better housing and improved transport links.

As the programme’s momentum grew, a separate website was needed, away from the main Haringey.gov.uk council site, with distinct sections of content for investors and developers, residents and local business audience groups.

The Haringey Council digital communications team had done a lot of thinking around the shape of the IA and the types of content they needed to fulfil their aims and provide a user centred experience. They had decided on the open-source Drupal CMS (with demanding security requirements) and had a well-considered creative brief prepared for our alignment sessions. A perfect start to the project!

Here’s how we designed and developed the council website

  • Evolved their initial Information Architecture (IA) and key user journeys
  • Developed a wireframe paper prototype
  • Created design routes – homepage and lower level pages with rapid prototyping to arrive at the final designs
  • Built accessible and adaptive page templates
  • Set up and configured the core Drupal CMS and implemented the site structure, glueing in the templates and developing the workflow for their publishing team
  • A news system was integrated and XML feeds to display events were set up
  • MailChimp newsletter functionality was embedded
  • Content was loaded and checked and our QA team tested the site ready for soft launch
  • One of our project managers and a Drupal developer spent a day with the Haringey team, training them to use their new Drupal website
  • The site was made live and the Haringey team have a 12-month support contract to help them with Drupal upgrades and site improvements

You can see Haringey Council’s Tottenham Regeneration website at http://tottenham.london/

tottenham-mockup-5

What makes Open Source systems such good value for local government websites?

  • Free – no licence costs for the CMS software
  • Agile and moveable – you are not tied into your web development agency
  • Vast (and fast moving) open-source development communities
  • Modular systems – thousands of 3rd party extensions to further keep costs down
  • Regular security updates by a highly active community
  • Proven functionality – tried and tested by the likes of No.10, The Whitehouse, Heinz…
  • Fully featured – whatever functionality you want on your site, the chances are that there’s already an extension for it

If you’d are considering an open source CMS for your organisation, take a look at our information on Drupal and Umbraco, or contact us for a friendly chat or email info@s8080.com.

tottenham-mockup-2

tottenham-mockup-3

May 24 2016

S8080 help Nottingham City Council with new Umbraco website

Nottingham city council Umbraco website homepage
When Nottingham City Council appointed us via G-Cloud, we were delighted to learn that they had chosen Umbraco, the open-source CMS, to develop their new online self-service platform.

As an agency, our public sector clients tend to request either Drupal or Umbraco. The Council had spent time during their discovery phase investigating the suitable platforms for a large, busy local government website and Umbraco matched their requirements exactly.

Channel shift is becoming increasingly important for local government as digital transformation strategies are being realised in order to improve customer access to council services. Umbraco (and Drupal) are both powerful and flexible enough for the most demanding council and open source means they don’t pay a single penny for the software. This frees up budgets for the important stuff: user experience (UX), engaging designing and robust, secure functionality.

Nottingham city council Umbraco website mobile

As well as the obvious cost benefits of digital self-service, modern local authority content management systems allow a mobile first approach. This means users can undertake online transactions like arranging waste collections or making planning applications using their phones or tablets as well as their laptops and computers, making life easier for users and the Council. From the outset, our brief was to create a “great looking”, user-friendly, customer centred experience that could stand up against the very best local government websites in the UK. Here’s how we designed and developed the Council website:

  • We co-designed a clear top-task focused homepage
  • We broke down the content into compartmentalised areas to simplify the information
  • The Council’s brand colours were used consistently for content hierarchy
  • We developed a user-friendly column based dropdown navigation
  • The site was designed to be extremely accessible and fast to use
  • The CMS platform was specifically designed to enable the Council to add their own micro-sites
  • The mobile first templates we developed and tested across multiple devices
  • Our Umbraco technical developers Implemented Nottingham City Council’s preferred search solution provided by Funnelback
  • We created a suite of content blocks in which to build the content pages
  • We made it super easy for the Council’s in-house team to further develop the site by componentising and templating the functionality so it can be updated separately
  • We set up the server architecture and deployed the website which  is hosted on Microsoft Azures’ scalable cloud hosting platform
  • We will be providing ongoing maintenance and support, but typically 3rd level technical Umbraco expertise, so the day to day support on the website will be handled by Nottingham City Councils IT team

To find out how your organisation can use an open-source content management system for customer centred digital transformation, take a look at Umbraco and Drupal – two extremely capable and extensible CMS’s.

 

Nottingham city council Umbraco website screens

 

nottscc-mockup-large-4

 

Jan 22 2013

Web design for CAMHS

Surrey Camhs website design by S8080

 

Over the past couple of years, we’ve worked on several web design projects for CAMHS organisations (child and adolescent mental health services). CAMHS websites bring there own special set of challenges due to the young audience and the sensitive nature of the subject matter.

Our first was the Surrey CAMHS website, which was seen as groundbreaking and showed what could be done when a user centred design approach was adopted. We then designed and built two websites for Coventry and Warwickshire NHS – the Moodleton site for younger children and a mobile app based web development for young adults.

Just before Christmas, we started work on another CAMHS web development for a third NHS Partnership trust (more information soon), with a series of alignment meetings with the comms team and the practitioners.

These meetings help us shape the personas, information architecture and web site wireframes and are a valuable forum for brainstorming ideas for engaging the young audiences from the actual people who work with them to overcome their problems.

Content management systems

All of the web sites use a content management system (Drupal, Umbraco, WordPress, even SharePoint in Coventry and Warwickshire’s case) to enable the comms teams to update the website without having to ask a web design agency.

Having a CMS website also means the practitioners can offer up to date advice and information to parents, carers and professionals as well as the young people quickly and efficiently.

The use of open source CMS software means that available budget can be used to develop interactive elements and even mobile website design rather than hefty software license fees.

camhs moodleton website design by S8080

Branding

As you can imagine, each NHS Partnership Trust has very strict brand guidelines, but it’s often the case that their brand agency aren’t digital experts, so it falls to us to extend their brand identity to work well online and for the young target audiences.

During our stakeholder meetings and requirements gathering, we often hear “we don’t want it to look like an NHS website – it puts the young people off”. This is where creative design, carefully balanced with adherence to the brand guidelines comes into play. You can see above how the NHS brand is placed, but the focus is on the creative, characters and the sub brand.

Coming to CAMHS

coming to camhs website design by S8080

Being referred to CAMHS is a difficult time for young people, their carers and families, and a little consideration of how they are actually feeling (and this is where the practitioner’s input into the web site design is so valuable) can help them understand why they feel the way they do, how they can be helped and who will help them.

If you would like to chat about how S8080 could help you design your CAMHS website, call 01792 485566 and ask for me, Chris Cowell, or email info@s8080.com.

Sep 24 2012

Engaging with audiences

redseal-engaging

We are currently working on several very large website design and build projects for NGO and public sector clients. Our User Experience (UX) team have been travelling the length and breadth of Britain undertaking stakeholder engagement workshops, focus groups and in-depth interview sessions.

These engagement exercises enable us to gather complex requirements to ensure the new websites are designed with the user experience at their heart.
During the design phase, lab based usability testing plays a very important role and allows us to hone the wireframes and creative treatment.

The unique and robust UX processes we have developed have been vital in offering publicly funded organisations real value for money – saving egg-on-face and costly re-dev’s due to websites not performing as well as they could.

And for smaller organisations…

We are now adapting our methods and tools, scaling them to enable us to offer this level of UX service to organisations and businesses of all sizes, so if you would like to take a user centered design approach on your next website project, please get in touch with Matt or myself.

Nov 10 2011

A new website for the National Assembly for Wales

Late last week, after many months of hard work, we launched the brand new website for the National Assembly for Wales.

Well, I say ‘new’…

Earlier this year, we won the contract to redesign and redevelop the NAfW website www.assemblywales.org, but instead of implementing a new content management system, we would be working into their legacy CMS system. This would give significant cost savings.

Usability

One of our tasks was to improve the usability of the website. We used many sophisticated techniques to ensure it would be easy to navigate. We started with a content audit of the existing site to help us determine the depth and breadth of the site and categorise the types of information that the Assembly needed to present (and the stuff they didn’t!)

Then we developed a suite of personas – based on real people who use the website – and scenarios of use and user journeys for each of these. This ensures that everything going forward is based firmly on a User Centred Design approach. We interviewed many types of users, including AMs, journalists, and members of the public to find our exactly what they needed and how they wanted to use the site.

Information architecture

Once these two stages were complete, we could then use the findings to redevelop the information architecture (site map) and create a set of wireframes that explain each key page in detail and the way the users will interact and travel through the site – making their journey as easy as possible. Wireframes really do help save time and money on all web projects as amendments can be made quickly and cheaply, before the ‘look and feel’ or coding is developed. It’s a very agile and cost effective approach.

Getting creative

Then we moved into the design phase. After consultation, we presented three distinct creative routes. The Assembly project team gathered thoughts and feedback and the final creative direction was decided upon. This design was then implemented into the CMS, and the resulting templates were accessibility tested to ensure everyone would be able to use and enjoy the content on the new site.

Then came the mighty task of applying the design to the content – thousands of pages of information.

After one more round of accessibility testing, the new site was launched without a hitch thanks to the hard work of many people from S8080, The National Assembly for Wales, and our project partners Method4. Thank you everyone, it was an immense task.

You can see the new website at www.assemblywales.org

We’re very grateful to S8080 for the hard work they’ve put into this project, and we’re immensely pleased with the final product. From the outset, they stood out head and shoulders above their competitors, with their down to earth attitude and excellent project management skills. They took the time to understand our needs as an organisation, and now the result is a clean and crisp design and a new site architecture that is helping visitors to our site find what they are looking for and enjoy the site experience.”

Iwan Williams, Media, Brand and e-Democracy Manager

National Assembly for Wales

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.

Sep 22 2009

Busy times ahead

It has been a crazy few weeks for us. Good crazy though.

We won two major (and fascinating) contracts at the end of August and we are off to London later this week for a kick-off meeting for another big win for a brand new client.

I can’t talk too much about it just yet, but it’s one of those career defining projects that our team will talk about for years to come.

We are incredibly pleased and proud to have won it and look forward to showing you later this year 🙂

Nice to be having some decent weather at last too.

Jul 22 2009

Do duplicate links on a page to the same destination page make it easier or harder for user to find information?

The other day in a IA work shop session one of our clients asked a really valid question:

…do too many links in a page to the same destination page make the page harder to use because visitors have to look through more content to find what they’re looking for? For example on the home page we have links to the same destination page in the navigation bar, the content area and the promotional area.”

Some argue that more than one link to the same destination page is just too many, and I agree that if there is more than one link to the same destination page then there needs to be a good, and well considered, reason for this.

However as with many usability and IA questions there is no definitive rule, and the answer depends on many variables…

More than one link is OK but don’t just duplicate your navigation bar

For real priority content and key user tasks we will often make sure that there is more than one link. So say a key business objective is ‘to get more users to sign up’ we may have a link in the navigation bar and a link or a big button in the content area to the sign up form.

The reason we take this approach, having more than one link to core content and key tasks, is that we’ve observed users in the same testing sessions navigate only using the navigation bar and others navigate only by scanning the content area for links and buttons (seeming almost blind to the navigation bars). Therefore the argument is very strong to add more than one link to key tasks on a page.

What we really don’t like to see is a web site where the whole of the navigation bar is repeated in the content area, and worse still some sites where key user goals and call to actions are in the navigation bar, cross promotional navigation area and content area!

That’s why user journeys and listing core tasks / goals is so important, with this understanding we can make sure that on relevant pages we have 2 or potentially 3 ways into that primary business function, on other pages where that specific task is not as important we will have fewer links.

Big buttons help prioritise key tasks and speed up user journeys

The other ‘trick’ we use is pushing key journeys with big buttons, we know big buttons are clicked more often and more quickly, so by making a link really big gives the user a very clear entry point to a key task. It screams to the user ‘this is really important’ and will often out perform a number of smaller links. Of course you can’t super size all your links – just your really core user task(s) on that page.

So on a page non core business functions / ‘non key tasks’ should not be duplicated – instead rely on good Information Architecture.

We find that using trigger words works really well on navigation pages, helping to ensure that the different audience groups understand the IA of the site, grouping and labelling of content.

Thinking of making tweaks and changes?

Before we make fundamental changes we typically we like to get a detailed understanding so we’ll often use a mix of these to help build our knowledge:

  • Know where you want your users to go – review your audiences and their key user journeys, look at specific tasks and the IA
  • Check analytics to see which links are being clicked on
  • Split test if possible (A, B test – try removing duplicate links for a period of time and see what the impact is)
  • Do some quick and dirty user testing
  • Keep reviewing the site’s aims and business objectives

As you can see this was a really great question and deserved more than a one line answer!

Jul 11 2009

What would you buy on via your mobile?

An interesting article on mobile commerce by emarketer.com summarising recent polls in the US on what mobile users would buy via mobile commerce.

In a nutshell:

  • Only 7% of online retailers had an m-commerce site in late 2008 (source: Internet Retailer)
  • 71% of US adults would purchase via their mobile (source: Harris Interactive)
  • 59% were willing to buy pizza online via a phone, 58% movie or event tickets, 43% hotel rooms (source: Harris Interactive)
  • But PriceGrabber.com found most popular mobile purchases were digital content (ring tones and music)

See the full article with graphs: http://www.emarketer.com/Article.aspx?R=1007126

This all makes sense, our observations to date are that mobile users have different (and immediate) goals when using their mobiles on the move rather than when they have a desktop, laptop or net book handy.

Anyone for pizza?

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

Jun 5 2009

Verified by Visa: a hurdle in online check out process

Just read this nice article by Graham Charlton on Econsultancy.com on the impact of Verified by Visa and MasterCard SecureCode, and how the poor usability and poor customer communication of these schemes is resulting in higher drop out rates in online checkouts.

Amazon still will not add the Verified by Visa scheme.

For more information see Graham’s the full article here: http://econsultancy.com/blog/3887-verified-by-visa-a-conversion-rate-killer

May 11 2009

Usability tweaks that have saved money

Pick up any usability book and it will say (rightly so) that considered usability, information architecture and user experience work will save money and get your site performing better whether it’s a Charity Site, NGO information site, E-commerce store or FTSE 100 site. Here’s a couple of usability tweaks, not redesigns, which have had big impacts:

Jared Spool (www.uie.com), usability guru suggested a tweak on Amazon; this added an estimated $2.7 billion to Amazon’s revenue. Jared and the team found that products with more than 20 reviews had a much higher sales conversion rate, so by adding a question ‘was this review helpful to you’ and then tweaking the site to place the most relevant reviews at the top, meaning more conversions – a real big winner for Amazon.

See the full article here: http://www.uie.com/articles/magicbehindamazon

I’m sure you’re frustrated when you have to register to actually buy something on an online store which you probably won’t return to? Here’ another example by Jared Spool (www.uie.com) on a different e-commerce store where a minor tweak increased to site’s annual revenue of $300 million per year!

In a nutshell users would have to login and register after they had filled their shopping cart but before they could actually enter delivery and credit card information to pay for their goods – sound familiar?

Jared and his team found that first time shoppers didn’t want to register – they just wanted to pay for the goods quickly and leave, in fact the users tested really resisted registering. Jared and the team also found that repeat customers didn’t find the process helpful either – with 45% of all customers having multiple registrations. The solution was simple, and one that many sites are now taking, remove the register button before the actual check out but add a message:

You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.

And what about the money?

The results: The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.

See the full article here: http://www.uie.com/articles/three_hund_million_button/

Giving exact ROI figures is always going to be more difficult for non transactional sites, but with Google Analytics we can quickly benchmark and show improvements (using metrics such as reduced bounce rate, increased average time on site, increased page views, increased page visits and higher Google Adwords conversions if you are using them).

I’m always great to that sometimes a minor tweak to the user interface, labelling or say the process of filling in a form can make huge differences to the usability and performance of web sites.

Apr 21 2009

S8080 launch children’s website for London park

We have just launched a brand new kiddies website for Lee Valley Regional Park – the largest open space within the M25 stretching 26 miles from the East End to Hertfordshire.

The new site features a bunch of little guys called The LeeVs…

LeeVs love nothing better than playing in the wind, chasing each other, racing each other and generally running around having fun together. They enjoy floating down the river, paddling in puddles or cycling around their Regional Park.

The accessible site features extensive use of Flash for interactive games and character animation that really brings the LeeVs to life.

Lucy Hose, the Regional Park’s Marketing Manager, said “The new site has been designed to encourage children to learn through having fun and to find out more about the Regional Park and the environment. We’ll continue to update the pages and youngsters need to keep a look out for competitions which we’ll be running on the pages. My favourite game is Rob the Ranger!”

We pulled out all of the stops to get the site looking fantastic for the youngsters – our illustrators worked

very closely with our Flash team and created a whole virtual word for the LeeVs to inhabit. The site features lots of little surprises that delight youngsters.

For example, you’ll be reading about birthday parties in the park and all of a sudden, a little bright blue bug will wander around the screen, or a LeeV will ride his bike right past you and even pop a wheelie for you.

More kid’s sites in the pipeline

We are just about to launch another two sites for young people, a bit closer to home, but we can’t say too much about that yet.

Matt Howard, our Technical Director and Information Architecture guru said “There are a whole different set of usability rules to apply to sites for younger audiences. We have lots of experience designing for children of all ages for clients like Careers Wales, Welsh Assembly Government, DTI and the Mid and South Wales Safety Camera Partnership, so we have learnt a lot along the way”.

“Our illustration team have even been commissioned to design and produce a whole visual language for youngsters with special educational needs (SEN) and this has been so successful it looks like it will be rolled out across Wales and hopefully nationally”.

From a design perspective, designing for kids is just very good fun. Why just have a ‘help’ link when you can have an animated wriggly worm pointing the way!

Mar 27 2009

Mega Drop-Downs Work

Here’s some usability research on mega drop-downs which have been appearing on sites (particularly clothing sites and online shops) recently: http://www.useit.com/alertbox/mega-dropdown-menus.html undertaken by useit.com .

So What Are Mega Drop-Downs?

They are those big, chunky, typically 2 column drop-down panels which group navigation options, use typography, icons and tool tips to provide the user with links to content within a section of the site – meaning everything is visible at once with no scrolling.

Mega Drop-Downs vs. Regular Drop-Downs

The bottom line is that regular drop-down menus have many usability problems, but the mega drop-downs from usability studies have overcome the limitations.

Things to Think About When Considering Mega Drop-Downs

  • Speed of the mega drop-downs is critical
  • Grouping of related options
  • Using descriptive labels
  • Labels should be a medium level of granularity – and act as trigger words

Finally, it’s important to test the drop-downs, make sure they don’t obscure other key navigation devices (particularly search) and understand accessibility issues for assertive technologies and mobile devices.

Source: http://www.useit.com/alertbox/mega-dropdown-menus.html

Mar 6 2009

Readability Bookmarklet

I’ve previously mentioned Instapaper on this blog – a fantastic service that lets you easily mark web pages to read later. One great Instapaper feature is that it provides a ‘text-only’ view of any page you bookmark, removing any clutter surrounding the body of the article. I often find it difficult to read from a computer screen for long periods of time; any superfluous ‘debris’ is likely to distract me and I also find shorter lines of text much easier to read than long ones – so this feature is very welcome.

The guys at arc90 have taken this idea and produced a simple bookmarklet that sits in your bookmarks bar, with the aim of making almost any web page ‘readable’ with just one click. It doesn’t work with every website, as it has to try and work out where the main content of a page is, and some sites prove a bit too tricky. When it does work, it’s great for pages that I’m finding difficult to read, but don’t want to add to my Instapaper queue.

Readability – Read comfortably anytime, anywhere. from Arc90 on Vimeo.

You can get the bookmarklet here: http://lab.arc90.com/experiments/readability/ (you can also customize it to your needs), and read arc90’s blog entry about it here: http://lab.arc90.com/2009/03/.

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
Jan 20 2009

Say no to CAPS in navigation menus

If you are asked to use CAPS in navigation menus argue hard that you should be using mixed cases – even if it isn’t ‘on brand

The online guidelines are against using all caps in navigation menus, as this reduces legibility & readability by 10%. When mixing cases there is a more varied letterform which is easier to read than than the BOXY SHAPES OF ALL CAPS.