Design and Usability | 360innovate Blog

Archive for the ‘Design and Usability’ Category

Dojo drop down menus

Monday, August 1st, 2011

We’re happy to announce the release of BigMenu 1.1, an open source drop down menu system for Dojo.

BigMenu allows you to display a large amount of hierarchical information, without overwhelming the user.

BigMenu has the following features, among others:

Options available for animation time, easing, and delay on hide / show
Support for declarative or programmatic syntax
Keyboard and screen reader accessible – uses plain old semantic HTML

You can see the demo, or download the source from Github. As always,improvements, forks and pull requests are welcome!

(Created by @johnmcc and @todd_unctious)

Tags: Dojo, javascript, open-source

No Comments

At 360innovate, we speak to a wide variety of clients looking for developments of all sizes – big and small. If your organisation is looking for a highly functional web site, it is critically important to get the foundations right – to plan the project and put together appropriate documentation before a single line of code is written.

Building a complex web solution is a lot like building a house. Before the first brick is laid, one would consult with an architect to develop the plans for the building. The architect’s job is take the client’s vision, and transform it into something that is safe, complies with the relevant regulations, and meets the client’s needs.

If the client asks for something inappropriate (for reasons of safety, practicality or whatever), then a good architect would advise the client of this and come up with an alternative that would meet the client’s needs.

Quite often, we see non-technical customers essentially trying to do the architect’s job. In producing specifications without having an understanding of the development landscape, the foundations of a successful development are jeopardised.

The stakes might not be quite as high as in architecture – not life and death in any case – but the risks are broadly similar. Unless you are taking security, the user’s experience, and technical considerations into account, your brief will very likely not be as good as it should be. The developers who work on the project will not be given the start they need. This will be to the detriment of the project as a whole; poorly planned features lead to poorly executed features.

The answer to this is simple – speak to us as early in the project’s lifespan as possible. We will take into account technical considerations, the experience of the end user, and your needs too. We can produce a high-quality specification document that will lay the foundations for a successful project, no matter who your developers are.

(1) Comment

Usability Testing: What it is, what it isn’t

Wednesday, December 1st, 2010

Usability testing is an important part of the web development process, but it’s also one of the least-well understood. Very often we see misconceptions about what usability testing is, and what it isn’t.

This blog post will hopefully provide a primer on how you should be using usability testing.

One of the most important concepts in usability testing is that it should focus on how easily the user can complete a given task.

These tasks should be clearly defined from the outset of the project, and should be the key actions that you want your users to be able to perform. For example, this might be:

Filling in a contact form
Finding essential contact information
Completing a purchase

It’s essential that we know from the outset what the goals for your website will be; this allows us to create appropriate calls to action and a design that is consistent with these goals.

When testing how well users complete these goals, there are four criteria used to judge the success of the test:

Performance: How long did it take the user to complete the task? How many steps did it take?
Accuracy: Did the user make mistakes in the process? If they did, were they able to recover from them?
Recall: Could the user remember how to complete the task afterwards? Will they remember how to do it in the future?
Emotional response: How did the user feel on completing the task? Stressed? Relieved? Comfortable?

Depending on your budget, there are various methods for implementing usability testing.

Hallway Testing

The least expensive option is hallway testing, where people unconnected with the project are asked to complete tasks, as specified above. The advantage of this method is its cost. This method is also called “hallway intercept testing” – literally stopping people in the hallway and asking for their help!

The disadvantage of this method is that it doesn’t necessarily provide a good cross-section of the group that will be using the site. It’s an informal method, and the familiarity of the user and the person conducting the tests could influence the outcome of the tests.

Remote Testing

Remote testing involves the use of specially set up online surveys to test the usability of a site or application. One such service, Amazon’s Mechanical Turk, offers a cost-effective method of testing your site with a wide variety of users.

Although more expensive than hallway testing, this method offers a more formal testing structure, and encourages a goal-centred approach. With Mechanical Turk, you can also choose to reject submitted results if you feel the quality of feedback is not good enough.

Expert Review

The third, and (by far!) most expensive option is expert review. This involves working with a specialist usability testing company to provide in-depth analysis for the goals listed above. 360innovate work with a number of these companies, and can suggest one that is suitable for your needs.

Usability testing: what it’s not

The most common problem we see with usability testing is that it is performed without goals in mind, or that the goals are not clearly defined at the start of the project. In effect, test subjects are being asked “what do you think of this site”?

This is very definitely not usability testing. Unless you relate feedback to the original goals of the project, it’s very unlikely that you’ll get useful feedback on the success of the project. You might get some useful information for future development, but you won’t get useful feedback on the success of what you’ve built.

In short, you should know what the goals of the project are before the first the first line of code is written, and you should be testing how well each task relating to a goal has been implemented.

Why should I bother at all?

Usability testing is a vital tool to judge the success of a project. The internet is awash with stories emphasising the importance of usability testing, and the real question is “can you afford not to perform usability testing?”

Please get in touch if you’d like to talk about what usability testing can do for you.

Tags: testing, usability

No Comments

The Gap logo debacle: what have we learned?

Friday, October 22nd, 2010

Gap recently suffered a major social media backlash after launching their redesigned logo.

The old logo is both familiar and iconic, seen on high streets and at shopping centres around the world. And with their previous logo having been used for twenty years, there was always going to be a lot of scrutiny given to any rebranding effort.

But Gap could hardly have predicted the outcry that would follow. News articles were written, Facebook pages were set up, Twitter and the blogosphere went nuts. Many commentators went as far as to suggest that the rebranding was intentionally bad, designed to whip up publicity.

Indeed, at first glance, the new logo appears to lack imagination. Use of the Helvetica font could be judged to lack imagination, and the blue square could be deemed to be too simplistic, leading to an overall impression of cheapness.

I was one of the many who decried the logo, but looking back, I think my initial feelings were unjustified. It’s easy to take a logo on its own, out of context, and pull it to pieces. I wonder how many of the commentators considered how it would look within Gap’s other marketing materials. For example, Gap have used Helvetica for their in-store marketing for years, and with that in mind, it makes much more sense to tie the branding together with a common font.

In addition, criticising the logo without having an understanding of what the client was looking to achieve is moot; no-one has looked at design brief, or followed the process that was used to create the new mark.

We in the marketing industry are quick to defend ourselves when news articles appear criticising the cost of branding exercises, but blithely criticising a logo taken out of context seems to devalue the design process just as much, in my eyes.

Looking back, my initial reaction was hasty and unjustified, and I feel many others were too.

Gap’s reaction

Gap responded to the outrage by inviting designers to submit re-worked logos, but this again was met with derision amongst the design community. They quickly canned the idea, and Marka Hansen, president of Gap North America said:

“[We] missed the opportunity to engage with the online community. There may be a time to evolve our logo, but if and when that time comes, we’ll handle it in a different way”

It is encouraging to see a huge brand like Gap take social media seriously and learn from its mistakes, and the incident demonstrates once more that brands must do this to thrive in the digital age.

Tags: branding, gap, logo

No Comments

Our 10k app, Video Poker!

Tuesday, August 31st, 2010

As you might be aware, An Event Apart have been running a competition to find the best web app written in 10k or less. For the web-developmentally-challenged among you, (you lucky, lucky souls…), this isn’t a great deal of space to work with, so optimization is the name of the game!

You can see the gallery of apps here. There are some truly amazing examples of what can be achieved with a little creativity, and the standard of app on display is extremely high. (Although with some rock-star calibre developers entering the competition, this was almost to be expected!)

For our own entry, I recreated the game of Video Poker (with graphics from Allan).

If you want to take a look at the uncompressed source code, it’s available on github, under the MIT License.

Tags: competition, jQuery, web development

No Comments

Self-executing functions in JavaScript

Thursday, July 29th, 2010

In Ryan Florence’s excellent post comparing jQuery’s approach to Mootools’, he makes a number of interesting comparisons about each framework’s approach.

One area where jQuery provides an elegant solution is its use of anonymous functions to set DOM properties, as shown in the following snippet.

This is something that I certainly missed when working with Mootools, but fortunately there’s an easy, quick solution.

Ryan proposes the use of the setEach plugin to solve this issue, but to me, this doesn’t seem necessary. You can work around the issue by using a function that executes immediately, as follows.

The key here is the extra pair of parentheses after the function definition, which forces the function to execute straight away. Simple, quick, and it gives the same functionality as the jQuery equivalent without having to add the overhead of a plug in.

Tags: javascript, mootools, tip

No Comments

jQuery plugin to show and hide vertical menus

Tuesday, July 20th, 2010

It’s very common for us to show and hide vertical menus when developing sites. This idiom is particularly common on sites with a lot of submenus, such as e-commerce shopping carts.

Since it’s a technique we use so frequently, we decided to write a little jQuery plugin to make life easier for ourselves. This plugin takes nested unordered lists and turns them into expandable and contractable menus.

The plugin has the following features:

Dual licenced under GPL / MIT licences – do what you want with this code (as long as you leave the licence intact!)
Lightweight (~2Kb packed)
Keyboard accessible, basic WAI-ARIA support. Usable with JavaScript switched off.
Easy to use and deploy
Configurable through CSS, callback functions and numerous options

Please note that this plugin optionally uses of Klaus Hartl‘s excellent jquery.cookie.js plugin.

You can download the plugin here, and view the docs, and an example here.

Tags: hide, jQuery, menu, show

No Comments

Drum Central goes live

Friday, July 2nd, 2010

Drum Central is Scotland’s leading provider of drum kits, accessories and hardware in Scotland.

Selling their wide range of drumming products both offline and online Drum Central appointed 360innovate to redevelop their existing website with the intentions of making the brand image more current and the website easier to administer.

360innovate proposed an ecommerce shopping cart that allows shoppers to find their desired product with ease, purchase gift vouchers to spend instore, sign up for newsletters and connect with the brand via social media. The final result is a vibrant website that is sympathetic to the rock genre and information rich providing visitors to the website with a wide array of content to aid and enhance their shopping experience.

Visit the Drum Central website.

Like what you see then get in touch with 360innovate today.

Tags: design, ecommerce, shopping carts, web design, website

No Comments

Rubberseal website goes live

Tuesday, June 15th, 2010

Rubberseal are flat roofing specialists, providing roofing products and installation services to commercial companies, contractors and home owners.

The Rubberseal website was built on a content management system, making it easy for the client to update the web pages. The main areas of the website are separated into Installers, Commercial and Home Owner pages with clear navigation buttons on the main homepage making it very easy for visitors to the website source the information they are looking immediately.

Like what you see?

For further information about 360innovate’s web design services please contact us on 0141 241 6190.

Tags: construction website., development, industrial website, rubberseal, web design, website

No Comments

The Colour Limit

Friday, May 28th, 2010

Colour is a major factor in all aspects of design. It can create moods, styles and can evoke feelings and actions within people. Colour is a truly fascinating area, one which is constantly evolving and inspiring us to create new and refreshing designs.

Gone are the days where there were certain rules with colour such as never mix red with pink, now we can put any colours together and still achieve a well balanced and stimulating design. But what if we start to limit colour in design? Instead of splashing colour about without much thought, what if we refine colour back to the very basics and only use what is really necessary.

Limiting colour in designs can create a more coherent and consistent look, making them more defined and altogether stronger. Using a limited colour palette doesn’t mean restricting the design, rather it can create emphasis on content, branding and messaging. It can also make a design more creative and intuitive, focusing on typography, imagery and layout.

Black and white is commonly used to create this limited colour scheme, however any colours used in isolation can be manipulated for this type of style. For instance take our very own 360innovate website, where we employed the dark blue as the primary colour with only white included for text and purple and orange used very sparingly for some content headers. This gives the site an easily flowing design, pulling the information together giving it a clear sense of purpose.

Below are some examples of other websites employing the effectiveness of limiting colour: