Learn more about user experience, web development and digital marketingView training courses

Webcredible Blog

Saturday 21st February was World IA Day 2015. IA standing for information architecture.

World Information Architecture Day is a one-day annual conference hosted by the Information Architecture Institute and held in different cities across the world. The aim is to bring professionals together and discuss a different theme every year. This year’s theme was ‘Architecting Happiness’.

What is Information Architecture?

The Information Architecture Institute defines IA as:

‘The art and science of organizing and labelling web sites, intranets, online communities and software to support usability and findability.’

Here at Webcredible we define IA as:

‘The design of a structure for interactive information and content. It maps relationships, hierarchies, labelling and navigation schemes based on users expectations and needs’.

In simple terms, information architecture is the way we structure and organise information and content in websites and digital products, to help users finding information and completing tasks easily and quickly. Users need to know where they are and where they need to go to find what they are looking for, what is around and what to expect.

To achieve this, we need to have a good understanding of:

  • Structure and layout: what each page or unit of content should contain, and in what order
  • Scheme: used to give meaning to the structure. How we categorize and structure information
  • Labelling: how we represent information – talking the user’s language and using a vocabulary that is consistent and easily understood
  • Navigation: how users browse and move through information, and find their way around the website
  • Search: how users look for information
  • Content: the data that makes up a digital product, including: text, images, videos, etc

Fitting it all together

To fit all of this together we can use the following techniques:

  • Tree testing: is a method to test the findability of different parts of a website. Participants are asked to try to ‘find’ items based on their categorisation and labelling only
  • Card sorting: This helps to organise content into a topic-based schema. Participants are given some cards with a piece of content written on each and are asked to sort them into groups that makes sense to them
  • Page Description Diagrams: PDD is a method for documenting the content required fora specific page without specifying an exact layout
  • Underpinning all of this is a thorough understanding of the audience, business and organisational goals, so we can deliver right information to the right user at the right time

These are only a few of many techniques used to ‘Architect Happiness’. If you want to learn more about Information Architecture, and other research methods, we have a training course that can help.

Why is Information Architecture important?

Usability is most definitely one of the critical success factors for websites and digital products. Good information architecture is essential for an information-based system that makes sense to the users. It helps users find necessary information, carry out tasks and achieve their goals.

Resources

  • World IA Day 2015
  • The Information Architecture Institute
  • Architecting happiness

Axure can be a little cumbersome to maintain, especially with lots of pages and widgets. Having worked on a number of Axure prototypes (some very complex) I’ve discovered a few tricks that help me make prototyping more manageable and efficient.

1. Copy and paste interactions

01 HomepageCopy and paste is an easily forgotten function when it comes to anything other than text, but it’s ideal for prototypes with large number of interactions. I once had a button that triggered 20 interactions across five conditions. There needed to be four of these that worked differently across the prototype and the prospect of recreating those wireframes was daunting.

Thankfully, the copy and paste interaction feature cut down the amount of tedious recreation I had to do to build them all. Simply right click on an interaction in the Widget Interaction and Notes panel to find the copy and paste function. Alternatively, the conventional control + C + V will do the trick!

TOP TIP: you can copy and paste an entire case or a particular interaction.

2. Label consistently

Consistent labeling of widgets, dynamic panels and variables makes it easier to create interactions thanks to the text search feature. TOP TIP: anything that will be affected by an interaction should be labelled.

For example I tend to label widgets as follows:

  • If it’s an input field I add IF (stands for input field) to the end of the label, so it will look like this “widget description IF”
  • If it’s text that will change due to an interaction I label as “Type of copy COPY”

This way, if I need to make an interaction involving an input field, I can filter the results by typing IF into the select widget option.

search 1

While you should choose your own labels, for team projects establish a consensus on how you will label your widgets, dynamic panels and variables. Trying to figure out interactions made by a team member can be time consuming.

3. Widget style editor

If you’re unfortunate enough to be applying different button styles after creating 30 of them scattered across a prototype, then you will appreciate the value of having the widget style editor.

You can use it to create custom styles that can be applied across your prototype. No more hunting and applying style changes individually. They also work for interaction styles so your mouse over or widget selected style can all be manipulated at once.

4. Scaling height and width

This is helpful for quick image or button scaling. Click on the height box and when it is highlighted, hold the shift key and use the up or down arrow key to change both the height and width of the widget. However, this does not work with the width box.

scale 1

 

 

 

If this is not enough for you and you’re hankering for more Axure tips, we have two brilliant classroom courses that’ll have you prototyping like a pro in no time: Axure, and advanced Axure.

If you have any tips of your own, feel free to share them in the comments!

My colleague, Nirish and I ran a workshop, ‘Where UX and Analytics Meet’ yesterday for the UXPA’s Winter Workshop Extravaganza. I have to say it was a challenge (but a fun one) to try and convert hardened sceptics among the 30-strong crowd to the value of analytics in the UX process.

Analytics and user experience are typically viewed as being very different from one another. The traditional view is that analytics (data interpretation) is left brain, UX is right.

On the surface they seem very contradictory. However, I believe the truth is far from it, UX and analytics can and should work harmoniously together.

Persona based segments

Any UX’er worth their salt knows what a persona is, but have you tried using them to segment out your traffic in Google Analytics? It might seem like an unusual idea, but hear me out!

From your personas pick out defining features and use them to build a segment in Google Analytics. For example, you could build a segment  based on a persona of someone that…

  • Mostly uses their smartphone to browse the internet
  • Lives in London
  • Speaks French (or at least browses in that language)
  • Aged 25-30
  • Interested in technology

All of the above are stats that Google Analytics has, or can have, on your users (you might need to enable some reports to get all this data, like age demographic). While Google Analytics wont have this level of data for everyone that uses your website, it will for a significant enough proportion to make it a worthwhile exercise.

The real benefit of creating persona based segments is that it humanizes your data, making it much more digestible. It’s also practical, as it lets you match real website usage data to research based personas so you can better understand how different groups of users interact with you online.

The what and why of user behavior

Another instance where I find analytics can work harmoniously with user experience is in helping you understand what users are doing on your website, before exploring why they do it. For example, your online sales have been steadily dropping for months, but you don’t know where the problem lies. Using Google Analytics’ behaviour flows tool (image below) you can see user journeys through your site, and identify the problem pages. A problem page might be one where a large percentage of people are dropping off (leaving your website).

Google Analytics has removed the ambiguity of diagnosing the problem/area for improvement. It’s showed you quantitatively what users are doing on your website – in this case, people on the user journey of making a purchase and where they are dropping off. At this point you’ve narrowed the problem down to a page, form or whole user journey. Now UX comes into its own and tells you why there’s a problem, so you can work on designing a solution.

This is obviously over simplified, but hopefully illustrates how UX and analytics can work together as part of the same process.

Setting goals

One of the first steps in a project of any sort will be setting goals. A UX’er will work on developing user goals, one of which might be to enable a user to find a product or service quickly. An analytics goal might be to shorten the length of a user flow. Are they really so dissimilar? I don’t think so. The reason for the goal in both cases is to make life easier for the user.

I’d recommend that at the start of a project the UX and Analytics teams meet and discuss goals and success metrics together.

In the end I think we softened even the staunchest of analytics-haters, and helped the group leave with an understanding of how UX and analytics can compliment one another. Personally, I learned a lot about how we can integrate analytics into our own UX projects.

All-in-all it was a great evening (we even met some old friends), and we look forward to running another workshop with the UXPA. If you have stories of working with UX and analytics please share them in the comments. Alternatively if you want to learn more about interpreting analytics, I run a training course on the topic.

Point-of-sale user experience (or POSUX to combine the 2 acronyms) can be slightly different – and sometimes contrary – to best practice user experience for other digital products.

We’ve worked on creating interfaces for a number of POS systems so here are a few things we’ve learnt from the research and design that we’ve carried out.

pos image1. Complexity isn’t necessarily bad

Store workers often don’t mind additional complexity provided the system can be learnt and that the complexity ultimately increases speed/efficiency. For example, people are often willing to take the time to learn keyboard shortcuts or set up saved searches as this will save time in the long-term.

This is contrary to the design of almost any other system which should be simple, intuitive and easy-to-use out-of-the box.

Be careful though – users will only accept complexity if they’re sure that it’ll improve longer-term efficiency. General complexity or poor usability will – as is the case with most systems – lead to low levels of user acceptance.

2. Existing workflows mustn’t be forgotten

Any POS system absolutely must fit in to existing workflows. When designing a system for staff you’ve got to take the time to understand existing practices, processes and pain points. Spend time with system users, shadow them whilst performing their jobs and ask lots of questions.

Winning hearts and minds is key to the success of any system. If people feel they need to change how they work then a new SYSTEM can make them unhappy in the short-term.

3. Speed is crucial

Using a POS system tends to be the most boring part of store workers’ jobs so speed-of-use is absolutely key. Allow store workers to do what they do best – interact with customers – and have them spend as little time as possible with the POS system.

Thoroughly scrutinise every single interaction and data entry requirement – are all of these absolutely necessary? If so then be sure to explain why as store workers can get irritated by mandatory data entry when they don’t understand its purpose.

4. Touchscreen may be best

Interfaces controlled by keyboard/mouse are generally OK… But with the smartphone/tablet proliferation people are often expecting (and preferring) touchscreen interfaces. POS systems are an important part of store workers’ jobs so it’s important that the experience is as good as possible.

Touchscreen can also be quicker to use than other interfaces and indeed mobile POS systems are starting to become more commonplace.

5. Don’t forget the users!

Following best practice design and user experience guidelines is a great start… but the most important things by far are the specific needs, goals, behaviours and requirements of end users.

Some questions to ask yourself might be:

  • What are store workers trying to achieve with the POS system?
  • How does it fit into their workflow and customer interactions?
  • What problems does – or should – the system solve?

Find answers to all these questions by carrying out research with POS system users, and then carry out user testing throughout the design process to ensure what you’re creating is indeed in line with user needs.

In conclusion…

POS interfaces and user journeys simply have to offer the best possible experience and ease-of-use for their users. The easier they are to use, the quicker store workers can complete tasks and the more sales can be made. It’s that simple. Invest in creating really effective POS system interfaces and you’ll likely see a return on investment very quickly.

If you’re interested in improving the user experience of your POS system, we can help! Check out our UX design services, or we can teach you how to get started yourself with our training courses.

Image credits: Jade Choi, Behance: https://www.behance.net/gallery/POS-App-Android-UI-design/4928543

In my time at Webcredible I’ve been involved in a lot of user testing for ecommerce clients. It always strikes me just how many things you need to consider and optimise to provide the best possible user experience.

The following UX tips should provide a starting point so you can improve conversion rates and make your website easier to use.

1. Photography

To state the obvious, people can’t touch, feel, or try on products when they buy online. Photography is extremely important as it is essentially what is selling your product. Make sure you:

  • Have a variety of shots – close ups, angles, any special details or aspects (NET-A-PORTER’s photography is a good example to follow). Also, make sure users can zoom into the images
  • Use models to showcase your products. This puts the product in context, gives a sense of scale and helps users imagine themselves using/wearing it
  • If you do use models, you might want to consider not showing their face. The model might steal the show and detract from the product you’re selling. An exception to this would be a product like make-up
  • Retina displays are increasingly common among mobile devices. This means you should use very high resolution imagery to make sure the pictures are crystal clear. However, don’t show this image on devices without retina displays. Most CMS’s will have an option to present different images depending on the users device

2. Gifters

Not everyone is buying for themselves. Depending on your products, a reasonable proportion of your users are buying gifts. To cater to this not inconsiderable audience, make sure you:

  • Include a guest checkout, as it is more popular among gifters
  • Gifters want to maintain secrecy, so think about packaging and delivery details
  • Include an option to filter by price range, as gifters are usually buying to a budget

3. Different devices

When shopping online people tend to browse on all devices (tablet, mobile, desktop). While I’ve found that most people are open to buying on mobile, there is still a preference (because of screen size mostly) to complete transactions on tablets and desktop. Here are some tips to encourage more mobile transactions:

  • Choose the relevant default keyboard for the field a user is filling out. i.e. When filling out an email field include the “@” and “.com” in the default keyboard
  • Most mobile browsing takes place on the move. For precision make sure your touch areas are big (9mm) and far enough apart (2mm)
  • Information in hover states wont work as desired on mobile devices (you have to double tap). I’d recommend that you simply don’t use them on mobile
  • Before launch, user test rigorously with a touch device. Don’t forget to use in different orientations as well!

4. Checkout

This is where you’ll get the most drop offs so it needs to be perfect. This is worthy of a blog of its own, but for now:

  • Don’t make customers self identify at the beginning of the process
  • Show detailed return and delivery information in the basket page. This is an important decision making criteria
  • You might not want to make the promo codes entry too obvious. In testing I’ve found that this will prompt users to search online for a code, and if they don’t find one they may drop off
  • Upsell in the basket, it’s a good place to do it!

5. Sizing

nord blog imgIt might seem straightforward, but it’s easy to go wrong here and end up confusing your users.

  • Don’t assume users know their current size, you should try to find clever/innovative ways to help them. For example:
    • Clothes Horse is a start up that offers an embeddable widget that helps shoppers pick the right clothing size
    • Nordstrom include fit information from customers in user reviews (image right)
  • Keep in mind that when users access your site they might not be in a position to measure themselves (using mobile while on the move)
  • Different countries often use different units of measurement
  • If you’re using models to showcase your wares, you could include detail on their dimensions and the size of the item they’re wearing. This is something that Nicole Miller does well

The user experience of e-commerce websites is an expansive topic, this blog could have easily been twice the length! Hopefully I’ve given you some food for thought, but if you take just one thing away from reading this, I’d like that to be… the importance of user testing. User testing helps you to identify what is or isn’t working  in your purchase journey and why. With so many different elements making up an ecommerce experience – don’t leave it to chance that you thought of them all. Luckily we can help you with that, so if you’re stuck – get in touch!

What are your top tips for designing for ecommerce? Please feel free to add suggestions or your favourite examples in the comments.

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

View training courses

About us

We're a user experience agency (UX agency) that creates people-centered, efficient and delightful digital experiences.

Get in touch on 020 7423 6320