RSS feed for this section

Interaction Design

Free or low cost UX courses you can complete online

4 Oct

Online User Experience Courses

As with any topic in the field of interactive media, it’s tough to know where to start if you want to learn more about user experience (UX). Many of our clients find our newsletter and blog useful, they might read other blogs and read the occasional book but rarely get the time or budget to attend formal training (either with us or elsewhere). Many of the organisations and charities we work with are finding less training budget available each year and are struggling to find viable learning opportunities.

Read more

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

Telegraph redesign is more user centred

18 Jul

As a keen photographer I love looking at images. I have a variety of sources to feed my need for regular photography inspiration: Flickr, 500px, twitter, blogs and so on. One of my favourite sources of inspiration is seeing the amazing photojournalism shots that show what’s been happening around the world.

As with all experiences on the web, some websites make life easy for users and some make reaching their goal a little more difficult. Often we find that this will depend on how much they have prioritised their business goals in comparison to their user goals.

Read more

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

Google’s brilliantly simple changed password reminder

21 Jun

Right now there are hundreds of thousands of people cursing themselves for forgetting their password. 20 years ago we never had this problem. It’s a modern day frustration which is one of the down sides of the Internet.

Multiple online passwords

Many of us use several passwords on the web

If you want to do anything meaningful on a website in 2012, chances are you’ll have to create an account. In doing so you’ll have to create a username and password. As creatures of habit we like to use the same ones we’ve used on other sites, but in their wisdom many developers are unhappy with this idea of conformity and instead like to impose different rules to the rest. Some websites will only allow passwords with more than 6 characters, some more than 8, some force you to enter a numeric character, and others like to enforce the use of commas, apostrophe’s, and full stops in the password. My biggest bugbear is with sites that force you to use a password you’ve never used before.

All these password rules for different websites mean we have a whole string of different passwords for different websites. When we need to access a site we haven’t used for a while it can be an extremely painful process. Often by the time I gain access I’ve forgotten why I went there in the first place, but this could just be an age thing.

Of course online security is important, but us humans only have a limited capacity to remember all these passwords. I know quite a few people who’ve taken the unfortunately ironic step to write down all their passwords on a pad next to their computer.

Google has a simple idea to help us remember

Anyway, I digress. Rather than rant about remembering passwords I wanted to highlight a really nice idea I saw on Google today. In one of my more security conscious moments I decided to change passwords to a more secure one for some of the sites I rely on for business services. So earlier today I tried to access Google with my usual password and Google had remembered that it was an old password and reminded me I’d changed it. I thought this was such a nice simple solution that all sites should do the same.

Google's password changed reminder

What do you think? Have you any other nice examples of password recovery on the web?

 

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

A quick win to improve password entry

22 May

One of our clients is in the process of re-designing the registration process on their ecommerce website. She got in touch and asked our thoughts on whether she really needed to mask users’ input in the password field and display a repeat password field. This is a fairly common approach you’re probably already familiar with. Here’s an example of Skype’s registration using this approach:

 

Skype log in screenshot

Skype masks all passwords and asks users to re-enter the password to avoid user error

 

Her doubt arose after reading Jakob Nielsens’s Alertbox from June 2009 titled ‘Stop Password Masking’ which argues that usability suffers when users can only see a row of bullets in the password field and since there is “usually” nobody looking over their shoulder, security is not a good trade-off for poor usability .

Now, although we agree with Mr Nielsen that masking passwords can create usability issues (especially when entering long and complicated passwords), we feel that security is an important issue and with the massive growth of accessing websites on mobile devices in public places, it wasn’t something we could just dismiss.

So what’s the solution to password masking?

Users will always need an option to enter a password securely when there are other people nearby so we did some digging around and found Microsoft Windows 7 has a great solution to this problem. They found a good balance between security and usability.

The password input field is presented unmasked by default meaning users receive the visual feedback they require yet they have the control to enter the password more securely by selecting the checkbox to hide the characters.

Windows 7 password masking toggle

Windows 7 provides an unmasked field with the option to mask characters

 

This solution not only gives users the choice to decide on the level of security they require but also removes the need for a confirm password field so the risk of user errors is reduced. Our client is now redesigning the registration process with a single password field with a checkbox to toggle visibility of the characters.

 

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Oliver Gitsham

About Oliver Gitsham

Oli is a Senior User Experience Designer with 8 years experience of researching and designing digital user interfaces. Oli has just become a Dad for the first time so we're expecting some rants about buggy usability anytime now. Follow Oli on twitter @olivergitsham

How to create sketched wireframes in Axure

14 Mar

There is something about hand drawn paper wireframes that I have always liked. The sketchy lines and hand drawn icons always help me to see the wireframe as one possible idea rather than a final solution.

Sketched wireframes in Axure

Don’t get me wrong, I like presenting the slick high fidelity html prototypes to clients in the final stages of the UX project but early on when ideas are forming and the possibilities are endless, sketchy paper wireframes always add an element of excitement.

However, as much as I like hand drawn wireframes, for me sketching on a pad of paper is extremely difficult and time consuming. As much as I try, I struggle to create realistic looking wireframes and am constantly starting again and again until I give up in frustration.

Most wireframes look ‘final’ when they are still just concepts

On a recent project for a well-known charity, I needed to present a series of rough concept ideas to participants in focus groups to see which ideas they engage with. I wanted to get honest thoughts and feelings and I was worried that anything looking too ‘polished’ would make the work look finished, so I felt the only option was to present them with sketchy looking wireframes so they can see the work was still in progress.

How to create sketched style in Axure

Finding the sketch effects functionality in Axure 6.0 was a nice surprise and seemed to give me the possibility of the best of both worlds – sketchy hand drawn wireframes but with the ease and speed of using specialist software.

This functionality sits neatly at the bottom of the interface alongside ‘page notes’ and ‘page interactions’ and allows you to quickly alter clean straight-lined wireframes into the sketchy hand drawn look and feel that I was after.

Sketch options in Axure

The sketch options available in Axure

Although the functionality is still quite limited here (only 4 main controls), they still offer enough to make them work.

Sketchiness – Playing with this functionality shows you just how sketchy the wireframe can be. This ranges from the standard straight lines seen on usual wireframes to wavy lines that looked like they have been drawn by a child. I found that a sketchiness of 33 out of 100 seems to provide the most realistic to hand drawn wireframes.

Sketchy examples

The sketchiness slider at work

Colour – Selecting whether the wireframes should be colour or black and white is fairly straight forward. One nice feature here is that all images in the wireframe are converted to grey scale saving you having to edit the images first.

Font – The best font to use was probably the hardest challenge. Most standard fonts seem to clash with the sketchy lines and made the wireframe look too polished. After comparing many different styles I settled on a free font called ‘Writing Stuff’ (www.dafont.com/writing-stuff.font). I felt that it was the closest to natural handwriting, however, a point to remember is most computers do not have this font installed as standard so if presenting a prototype on another computer, you need to make sure that they have the fonts installed too. [Update - Axure got in touch to let us know that it is possible to convert text into images allowing anyone to see the font by following this path in the menus: Generate > Prototype > Advanced >Render Txt as Img]

Sketchy wireframes using arial font

Without a handwritten font the sketch effect doesn’t work

Line Width -  The line width allows you to change how wide all the lines are throughout the prototype. I didn’t really see the need for this functionality so kept it at +0.

To make the wireframes feel even more realistic and to get the concepts across better, I wanted to use hand drawn icons on each concept. There are many free sketchy style icons available but not all offered what I was looking for. To ensure all the icons were consistent in style on all concepts, I decided to pay for a full set icons from www.webiconset.com. For $25, you get 120 common web icons in the sketchy font at the usual sizes. This small investment was worthwhile as communicated the ideas better and greatly added to the rough look and feel of the wireframes that I was after.

Sketchy icons for wireframe

The hand drawn icons we used

 

Sketched wireframes get more honest user feedback

Axure sketchy wireframes are a much quicker and easier solution which still creates the illusion that wireframes are still in their infancy but allows you to create them quickly and easily, and the flexibility make changes and amends without starting each page again. These wireframes will never fully replace the creative hand drawn wireframes but during the focus groups, I felt participants were more inclined to critique the rough concepts more objectively than if I had just presented a standard straight-lined wireframe. This gave me a lot more positive and negative feedback I was after.  The only downside was that when I was using the sketchy font, I had problems when showing the wireframes to other people over the internet.

Axure Sketched Wireframe

An example of the end result

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Oliver Gitsham

About Oliver Gitsham

Oli is a Senior User Experience Designer with 8 years experience of researching and designing digital user interfaces. Oli has just become a Dad for the first time so we're expecting some rants about buggy usability anytime now. Follow Oli on twitter @olivergitsham

Playtesting – why you should user test designs early and often

26 Jan

This is a fantastic video from Penny-Arcade about the virtues of testing concepts and designs early and often with users. The video is aimed at games designers but applies to any designer and translates particularly well to web designers.

It’s not often that we share videos on our blog, but this one is too good not to shout about it. It delivers the message we tell our clients, but in a much better and more enjoyable medium. If you don’t mind sitting through the annoying advert at the beginning, you’ll find the reward is absolutely worth it. Enjoy!

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

A UX perspective on Horizontal scrolling

12 Dec

BBC horizontal navigation

I was talking to someone the other day about the new BBC homepage which employs a way to navigate through content from left to right. I thought it was well implemented, and knowing the BBC they would have user tested it thoroughly before making the call.

Anyway, the conversation swiftly moved on to horizontal scrolling and how as a ‘usability dude’ I must hate anything with a horizontal scroll bar. I tried to  explain that most of us ‘usability’ people are not against unconventional design, but we just like to see it implemented for the right reasons (because it fits with the user goal) and not for the wrong reasons (because the designer likes it and wants back slaps from peers).

 

Vertical scrolling, Yes. Horizontal scrolling, No.

In a talk, Jakob Nielsen once demonstrated his thoughts on horizontal scrolling by nodding his head up and down saying, "vertical scrolling, yes", then, shaking his head left and right saying, "horizontal scrolling, no".  A clever way to make a point, but digital design is never as simple as just following a rule or guideline from a so called ‘guru’. There are of course situations where a design works perfectly well going against conventions (which are typically outdated anyway). So we ask: When should you use horizontal scrolling?

Of course there’s no easy answer to that question. But when understanding the context of use and the goals users have when using the site it can become easier to decide whether to use horizontal scrolling or not.

 

When using horizontal scrolling can be beneficial to users

Although it’s not something we would always recommend, these examples may suit horizontal scrolling if you are keen on using it:

  • Displaying a variety of visual images i.e. a photography site or design portfolio
  • Displaying information in a large visual area that is not easy to see at a glance – i.e. think of a map or Google’s street map which employs horizontal scrolling to good effect
  • Displaying discreet sections or slides of information – Tablets and smartphone apps employ the notion of swiping and when this is used to move from one screen from left to right it can work really well and feel completely natural. Similarly applications such as Slideshare work well in the horizontal plane (although it is arguable that this constitutes scrolling)
  • Displaying a large catalogue of products or items where scrolling horizontally could display different product categories

 

Why you should be careful in using it

  • Most mice have a vertical scrolling wheel, few have an easy way to scroll horizontally. This means most users have to manually operate the scroll mechanism. This is slowly changing with smart mice like the Apple Magic Mouse but may still take some time before they’re mainstream. In fact if you consider physical ergonomics, it’s much easier to move a finger up and down, than it is left to right. Thumbs and hands on the other hand are much more adept at a horizontal scrolling motion, so this type of navigation is likely to depend on innovations in gesture interfaces
  • The experience of scrolling horizontally on some sites makes the screen judder and can have that headache inducing feel to the experience
  • Controlling the speed of the scroll can be problematic, with some content whizzing past and others taking forever. Giving users the right amount of control can be difficult to get right
  • We’re so used to reading left to right within the confines of a page where we make our way slowly downwards, introducing a horizontal scroll could break a fairly rigid western convention so should be used with care when reading is a core part of the user journey

 

Examples around the web

Interestingly Abercrombie, Hollister, and Superdry have made the decision to move away from horizontal scrolling to vertical. Shopstyle on the other hand have employed horizontal scrolling well on their site.

Like all new functionality, it should be thought through carefully and of course tested with users before taking the plunge.

Here’s some examples from around the web that we’ve found using horizontal scrolling in some way:

What do you think? Do you have any good examples to share?

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

Santa Centred Design

8 Dec

Santa's been working too hard

Santa’s job gets more difficult every year. Less and less kids write to him making the elve’s lives more difficult to keep up with the latest toy trends, the population grows more each year making Santa work harder, and more and more houses are opting for wood burners or no chimneys at all.

This year Mrs Claus contacted us to make Santa’s life a little easier when he’s on deliveries. Of course we were more than happy to help in the hope we would make the Nice list this year.

 

Mrs Claus was worried about Santa

Mrs Claus was our client, but Santa was our user so we first had to establish the aims for the project and the client’s requirements. In our meetings with Mrs Claus it became clear why she wanted our help:

  • Every year she’s up all night worrying about Santa and whether he’s safe – she wanted a way to keep track of his whereabouts without calling him all the time
  • She’s worried about Santa’s growing waistline so she wanted a way to remind Santa not to eat so many mince pies on his rounds
  • She was also worried that Santa should be careful not to take too many sips of sherry on his visits
  • Her primary concern was that the route the elves draw up for Santa was getting more and more complex each year and she was worried Santa would get lost and miss deliveries

 

Santa’s requirements

Before coming up with a solution we wanted to talk with the user of anything we designed, so we had a chat with Santa to understand more about the context of use. It quickly became clear that he had a different list of requirements:

  •  He wanted to keep his sightings to a minimum. With the growth of Facebook and Twitter in recent years, he was worried that he was becoming increasingly vulnerable to people being able to track him
  • Rather than a route planner or sat nav, Santa would prefer a pre-defined chimney stops so he could go from chimney to chimney with the route already planned out
  • Santa has been struggling to remember the sleeping places for the scary dogs, which houses had difficult roofs to land on, which chimneys were too narrow and so on. He wanted a simple way to receive all that information as he left one chimney on the way to the next
  • Santa sometimes gets bored with listening to the Reindeer bickering so wanted a way to set up and manage his playlists
  • Santa need a way to track his time and see how he was progressing with his delivery plan to make sure he remained on track
  • Santa needed some clearly marked stops where he and the Reindeer could have a ‘comfort break’

 

In coming up with our solution we had to take into account the context of use:

  • It would be cold so anything he used would have to be easily operated outdoors with gloves on – i.e. large buttons
  • Santa would need a sleigh mounted device as well as a mobile device to update and consult whilst down a chimney

 

Wireframes for Santa’s interfaces

We took away all these requirements and wireframed a solution using a tablet device mounted to the sleigh console as well as a smart phone device which synched to it when Santa was on the ground. In phase 2 we will look at a separate monitoring interface for Mrs Claus and the elves to track Santa.

 

Santa’s Sleigh Mounted Tablet Interface

  • Sightings alert  which monitors Facebook, Twitter and SMS chatter
  • Next chimney stop with suggested landing places and up-to-date house intelligence
  • Playlist controls
  • Local time and delivery progress monitor
Santa's sleigh mounted wireframe

Sleigh mounted interface - click for fullscreen

 

Santa’s Smartphone Interface

  • Checklist to tick off deliveries as he goes
  • Ability to post updates to house intelligence including chimney dimensions, dog sleeping places…
  • Mince pie and sherry sips update reminder – with an external breathalyser (we felt this was less priority so have planned this for phase 2)
Santa's smartphone interface

Santa's smartphone interface - click for fullscreen view

 

Next steps – Prototype testing with Santa

We’re having to move fast on this project as you can imagine. We’ve only got a couple of weeks left! So now we’ve created the wireframes we need to test them in a prototype with Santa on a few test runs out in the sleigh with his gloves on. We’re looking at stitching finger and thumb pads into the tips of his gloves first. After some user tests we’ll refine our prototype and then start work on the visual design. We’ll keep you posted on how we get on. Wish us luck!

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees