Tag Archives: design

21 things we like about the new M&S website

21 Feb

We noticed yesterday that the new Marks & Spencer website redesign went live. Here’s a quick summary of the changes we felt were most interesting. More research would be needed for us to give a thorough UX opinion but our first thoughts are that it’s a positive redesign.

M&S website redesign

In this article, we highlight the 21 UX improvements made to the new Marks & Spencer website and why we like them.
Read more

 

 

Liked this article?

Stay up to date with our latest UX insights

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

You may also like...

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

14 leading insurance providers’ quote processes and what you can learn from them

24 Jan

According to Insurance Business Online, last year 69% of insurance policies* were acquired online, yet we see many users struggling with the usability of quotation processes in usability testing. Insurance companies still neglect the quotation and application process on their websites and present poorly designed, unintuitive and confusing forms to their prospective customers which in turn could see them missing out on conversions.

14 leading insurance providers' quote process and what you can learn from them

We reviewed the usability of these sites to see which one offers the best life quotation experience

 
In this post, we analyse the life insurance quote process of 14 leading insurance companies and comparison websites to see which sites offer the overall best usability and user experience.  We also provide explanation as to what makes a good quote form and how insurance companies can consider implementing changes on their website.
Read more

 

 

Liked this article?

Stay up to date with our latest UX insights

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

You may also like...

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

4 tips to increase conversions by improving your navigation and drop down menus

12 Dec

Choosing the right navigation can be a minefield. Before you know it you’ve accidentally stuffed every single option into one gigantic menu, overwhelmed your visitors and deterred them from purchasing from your site. A mega drop down menu has become the popular navigation choice for online retailers, such as House of Fraser, however as with any type of navigation it does have its drawbacks. Despite this, if designed properly these restraints can be overcome and can help to increase conversions and drive online sales.

4 tips to increase conversions by improving your navigation and drop down menus
Here are 4 top tips on how you can improve your mega drop down menus and start seeing results right away:
Read more

 

 

Liked this article?

Stay up to date with our latest UX insights

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

You may also like...

Jenny Coford

About Jenny Coford

Jenny is a Graphic Design graduate with a passion for communication, who joined our team in November 2013. She has been busy immersing herself in the world of UX, creating Axure prototypes and researching the latest digital trends to share with you. She has a real obsession with organisation, so can usually be found writing the next office to-do list. Follow Jenny on twitter @jennycoford

5 Essential UX Questions to Ask at a Project Kick-off Meeting

6 Nov

5 Essential UX Questions to Ask at a Project Kick-off

Focusing on users at the very beginning of a project sets a solid user-centred foundation for a project. It can be difficult to remain focused on users when technical reasons, business aims, project objectives all combine to kick off a new project. To help you remain focused on users here’s five core questions we use when we first get involved in a project.
The questions we’ve used here are for a website redesign project, however, they are just as relevant for any digital product or service, whether it is being re-designed or developed from scratch.

Read more

 

 

Liked this article?

Stay up to date with our latest UX insights

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

You may also like...

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

How to stimulate passionate design

31 Aug

We have a fairly simple theory here at Experience Solutions; if a design doesn’t work, it’s usually because the designer’s motivation and passion was lacking. We use the term ‘designer’ fairly loosely here. It may be an individual designer working on a website, a small team of architects working on a building, or a whole project team working on a completely new product or service for a company.

One person with passion is better than forty people merely interested

Read more

 

 

Liked this article?

Stay up to date with our latest UX insights

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

You may also like...

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

3 useful UX lessons you can learn from getaheadofthegames.com

27 Jul

Olympic lane

If you live in the UK, you’ll be hard pressed to avoid The Olympics at the moment. One of the main talking points, certainly for Londoners is the traffic nightmare expected to jam the roads, underground, buses and trains. In anticipation, the powers that be have set up a website which is advertised to help people avoid traffic chaos: www.getaheadofthegames.com.

Read more

 

 

Liked this article?

Stay up to date with our latest UX insights

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

You may also like...

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?

Stay up to date with our latest UX insights

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

You may also like...

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?

Stay up to date with our latest UX insights

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

You may also like...

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

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?

Stay up to date with our latest UX insights

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

You may also like...

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

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?

Stay up to date with our latest UX insights

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

You may also like...

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?

Stay up to date with our latest UX insights

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

You may also like...

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

The difference between marketing profiles and user profiles

16 Sep

Personas Image

At University we always designed for the ‘target audience’, broadly meaning; the people who would use the product/website etc. Sounds simple and straightforward enough, and yet I always struggled with it, but never understood why.

 

So, what does a ‘target audience’ include?

The first thing we were told was to simply think about; who do you think will use the product? What job do they have? Where do they live? What activities will they do? How much money will they earn? Down to what clothes would they wear?

At university the ‘target audience’ was always something I personally struggled with. Trying to cater to an invisible audience that I had to define before the product idea had been fully developed stumped me every time. I just couldn’t get a grip on generalising (as I saw it) to that scale, trying to come up with minute details for these peoples’ lives so that I could design specifically for all of them. Now that left me feeling a bit stupid, but I was never told exactly what I was looking for in a target audience, how to work that out and how it should influence my concept and design. Needless to say I was never taught user profiling.

It wasn’t until I started my role here at ES that it finally clicked, and I understood why I had had so much trouble with the ‘target audience’ aspect at university. What I learned from the guys here is that there are two types of profiling that happen within the sphere of a target audience; a marketing profile, and a user profile. They appear to be the same thing, and it took some patience on their part in order to communicate to me what the specific differences were between the profiles we make, compared to the profiles that are generally thought to represent that of the customer.

 

Marketing Profiles – a look at where they work, what car they drive…

Marketing profiles, generally speaking, are what companies use to determine how they can sell products and services to their prospective customers; what paper do they read, where do they live, what car do they drive, what their household income is, etc. They need to know this sort of personal information so they can target, design for, respond to, and basically pander to the customer’s interests and habits.

This information helps them to speak in the right language, at the right level. It helps them to advertise in specific publications. It knows what TV programs they are most likely to watch, and therefore where to place their ads. This of course is all relevant when trying to publicise the company. For example, your marketing profile might look like this:

“Mary, a 35 year old mother of two, household income of £60k, drives a VW Golf, reads the    Daily Mail, uses the internet mainly for emails and shopping, lives in the South East”

But how does this help to prioritise the content and functionality on a website?

 

User Profiles – focusing on the individuals goal

On the other hand, a user profile focuses on the goals of people who will use the service. When creating a user profile there are a different set of questions which must be thought about, for example; what is the user’s goal? Why do they need to achieve this? How quickly do they need to achieve this? And what steps do they need to go through to reach their goal?

If we take an online balloon retailer who needs their site redesigned, a user profile for that site would look something like this:

“Mary, her daughter’s birthday party is in two weeks, she needs 20 balloons that will ideally have    her daughter’s name (Louise) on and be pink in colour”

Of course these questions will be affected by such things as who the individual is and what kind of job they may do, however it is not dependant on all, or sometimes any of those factors at one time. It doesn’t matter if I am a mum, sister, or friend planning a birthday party for someone, I will still need to buy 20 balloons. That is my end goal which I want to be as simple, easy, and stress free as possible.

 

So what did I learn?

Although I still feel mildly ignorant for not having figured this out by myself, I now see where I went wrong at Uni. A user profile, and decent understanding of the goals your end-user will want to achieve, should be the main force driving the design of a products core structure. A marketing profile can then be used to help decide on the visuals and aesthetic appeal to appeal to the use once the site is built in a user-friendly way.

What do your profiles look like, and how do you use them?

 

 

Liked this article?

Stay up to date with our latest UX insights

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

You may also like...

Samantha Harvey

About Samantha Harvey

Sam recently graduated from Visual Communication. She joined our team in April 2011 and has been conducting user research and has been making sure our user interfaces follow good design principles. She's keen to point out our poor selection of fonts... er I mean typography (sorry Sam). Follow Samantha on twitter @samharvey_ux