24 Top UX Prototyping Tools with Downloadable Comparison Table

UX Prototyping Tools

The sheer amount of choice of UX prototyping tools can be pretty overwhelming, so here’s an overview of the top 24 tools, together with a FREE downloadable pdf table so that you can easily compare them.

Download my FREE 24 UX Tools Comparison Table >

Atomic

Atomic

Atomic
Description Powerful and scalable prototyping that lets you tackle complexity with confidence. Use simple interactions or advanced animation to bring your Sketch designs to life.
Verdict Create prototypes for web and mobile. The structure is similar to Sketch in that you create Pages and Artboards, which adds a level of familiarity to Sketch users.
App type Web app
Fidelity Lo to hi
Collaboration Feedback tool available
Link atomic.io

Axure RP

Axure

Axure
Description Create simple click-through diagrams or highly functional, rich prototypes with conditional logic, dynamic content, animations, math functions, and data-driven interactions without writing a single line of code.
Verdict Powerful tool that allowing detailed interaction to be prototyped for websites and apps. A fairly steep learning curve.
App type Installable app for Mac and Win
Fidelity Lo to hi
Collaboration Feedback tool available on live prototypes via the web
Link axure.com

Balsamiq

Balsamiq
Balsamic
Description Balsamiq Mockups is a rapid wireframing tool that helps you Work Faster & Smarter. It reproduces the experience of sketching on a whiteboard, but using a computer.
Verdict Quick to learn and put together wireframe designs with ease.
App type Installable app for Mac and Win and web app
Fidelity Lo to hi
Collaboration Feedback tool available on live prototypes via the web app only
Link balsamiq.com

Easee

Easee

Description Easee is a web animation tool for designers. Create smooth animations that can be exported as CSS so that you can import them into your own web project.
Verdict Short learning curve to bring your designs to life.
App type Wab app
Fidelity Hi
Collaboration Unknown ATM
Link easee.design

Flinto

Flinto
Flinto

Description Flinto lets designers quickly make interactive prototypes of their mobile, desktop, or web apps.
Verdict Comprehensive app, allowing you to create anything from simple tap-through prototypes to comprehensive prototypes with impress interactions. Sketch images can be imported and transitions and user behaviours can be easily added.
App type Mac app and web app (Flinto Lite)
Fidelity Lo to hi
Collaboration Feedback available in the tool and shared projects
Link flinto.com

Fluid

Fluid
Fluid

Description Easier web and mobile app prototyping for people who care about products
Verdict Powerful and easy to learn. Design or upload screens and add animated interactions
App type Web app
Fidelity Hi
Collaboration Invite collaborators and stakeholders to review and comment on your prototypes
Link fluidui.com

Form

Form
Form

Description Build and customize native prototypes directly on device. Prototype with the latest material design components, touch ripples, and more.
Verdict Prototype mobile apps. Fair decent learning curve
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link relativewave.com/form/

Framer

Framer
Framer

Description Design the impossible with Framer. Start with simple code to bring your design to life. Test it on any device, iterate as you go and share easily for feedback. Pioneer new interaction patterns or create groundbreaking animation. No limits, no constraints.
Verdict A great tool for prototyping complex interaction designs and animations for mobile
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link framer.com/

Hype

Hype
Hype

Description Create beautiful HTML5 web content. Interactive web content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.
Verdict Uses a keyframe-based animation system, however this comes with a high learning curve. It’s a good tool for websites prototyping.
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link tumult.com/hype

Invision

Invision
Invision

Description The world’s leading prototyping, collaboration & workflow platform. Upload your design files and add animations, gestures, and transitions to transform your static screens into clickable, interactive prototypes.
Verdict Low learning curve and it is well supported int he community
App type Web app
Fidelity Hi
Collaboration Feedback tool available with user testing
Link invisionapp.com

Justinmind

Justinmind
JustinMind

Description Justinmind provides the best solution to prototype web and mobile apps. You can define apps for Web, iOS, and Android in a few clicks, without writing a single line of code.
Verdict Can create sophisticated prototypes with great tools, however there is fairly decent learning curve. The Free version is very limiting.
App type Installable app for Mac and Win
Fidelity Lo to hi
Collaboration Present your prototype and invite stakeholders to give feedback
Link justinmind.com

Keynotopia

Keynotopia
Keynotopia

Description Keynotopia transforms Keynote and PowerPoint into the best rapid prototyping tools for creating mobile, web and desktop app mockups
Verdict Low learning curve
App type Requires Keynote, Powerpoint or OpenOffice
Fidelity Lo to hi
Collaboration No feedback tool provided
Link keynotopia.com

Marvel

Marvelapp
Marvel

Description Simple design, prototyping and collaboration. Create screens directly in Marvel or add your images from Sketch or Photoshop, then add gestures and transitions.
Verdict Create prototypes for the iPhone, iPad, Desktop, Apple TV, Apple Watch and Andrpoid
App type Web app
Fidelity Hi
Collaboration Clients and colleagues can comment directly on each screen or drop annotations
Link marvelapp.com

MockFlow

Mockflow
Mockflow

Description MockFlow is an online design suite providing collaborative web services for creative designers and usability engineers
Verdict A good tool for wireframing websites. A fair learning curve.
App type Web app
Fidelity Lo
Collaboration Feedback tool available
Link mockflow.com

Mockingbird

Mockingbird
Mockingbird

Description Mock up an application and show what’s important: the idea, the information, the interaction
Verdict A good tool for wireframing websites
App type Web app
Fidelity Lo
Collaboration Clients and teammates can edit wireframes with you in real time
Link gomockingbird.com

Mockplus

Mockplus
Mockplus

Description Fast interaction, fast design, fast previewing and fast learn. No code or technical expertise required. Prototype design is easier than ever.
Verdict Great for websites and mobile apps. Fair learning curve
App type Installable app for Mac and Win
Fidelity Lo to hi
Collaboration No feedback tool
Link mockplus.com

Origami

Origami
Origami

Description Explore, iterate, and test your ideas. A new tool for designing modern interfaces. Copy anything from Sketch and paste native layers into Origami Studio. Then quickly adjust, add behavior and animate any layer property without going back.
Verdict Perfect for creating sophisticated mobile prototypes with realistic animations and interactions
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link origami.design

Principle

Principle
Principle

Description Principle makes it easy to design animated and interactive user interfaces. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.
Verdict Quick to learn
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link principleformac.com

Proto.io

Proto.io
Proto.io

Description Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required.
Verdict Easy to make a quick mock-up using the extensive library of ui elements and nice transitions are available. Quite a high learning curve.
App type Web app with players for iOS and Android
Fidelity Lo to hi
Collaboration Reviewer accounts are available for clients to give feedback
Link proto.io

UXpin

UXpin
Unpin

Description Speedy wireframing. Seamless transition from wireframes to mockups & prototypes. Fully collaborative across the entire UX design process.
Verdict Great for websites and mobile apps. Supported by a large community and extensive libraries.
App type Web app
Fidelity Lo to hi
Collaboration Easily to share prototypes with stakeholders and gather feedback
Link uxpin.com

Vectr

Vectr
Vectr

Description Vectr is a free graphics software used to create vector graphics easily and intuitively. It’s a simple yet powerful web and desktop cross-platform tool to bring your designs into reality.
Verdict Prototypes can be designed on the web or desktop app for Win and Mac and are kept in sync. Not as feature rich as other apps atm, however this will change.
App type Installable app for Mac and Win
Fidelity Lo to hi
Collaboration Collaboration is on the roadmap
Link vectr.com

Webflow

Webflow
Webflow

Description Build dynamic, responsive websites without writing code. Launch with a click, and enjoy the fastest, most reliable hosting on the web. Or export clean, semantic code to hand off to your devs.
Verdict Webflow gives you the power to build websites your way — visually — while producing clean, standards-compliant HTML, CSS, and JavaScript that developers will love. The down side being a high learning curve.
App type Web app
Fidelity Hi
Collaboration Shared projects (Team version only), no feedback through tool
Link webflow.com

Xcode

Xcode
Xcode

Description Xcode 8 includes everything you need to create amazing apps for iPhone, iPad, Mac, Apple Watch, and Apple TV.
Verdict Perfect for cutting down on redundant work and misunderstandings when designing and developing mobile apps. Software engineers can immediately iterate the work of a designer. A pretty steep learning curve.
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link developer.apple.com/xcode/

XD

XD
XD

Description Go from idea to prototype faster with Experience Design CC, the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps.
Verdict Easy to use and powerful
App type Installable app for Mac and Win
Fidelity Hi
Collaboration Feedback tool available
Link adobe.com/uk/products/experience-design.html

Get your FREE UX Prototyping Tools Comparison Table

A handy comparison table of the top 24 UX Prototyping tools to help you make a choice.

Download my FREE 24 UX Tools Comparison Table >

UX Prototyping Tools Comparison Table

Need help prototyping?

Our in house team of UX Design and Research Experts have unrivalled experienced with mobile prototyping design and research – our experience goes right back to the first ever smartphone don’t you know 😉

Email us now for your complimentary initial consultation.

Inspiration: Mockplus

Get your FREE Mobile UX Checklist for World Usability Day

Happy World Usability Day!

We’re very excited today because it’s World Usability Day (and we are Keep It Usable after all). It’s a special day that aims to raise awareness of the importance of usability and educate people about what usability is. It brings together professionals and non-professionals throughout the world with one aim:

To ensure that technology helps people live to their full potential, and that the services and products important to life are easier to access and simpler to use in order to create a better world for all citizens everywhere

Usability unfortunately now gets overshadowed by it’s sexier cousin ‘UX’, however, we mustn’t forget that once upon a time (and not so long ago) the term UX didn’t exist at all, and in it’s place was good old ‘Usability’. Usability is still vitally critical to any design, so before we get on to your free mobile usability checklist, let’s have a quick look at usability…

What is usability and how’s it different from UX?

Usability is the ease of use and learnability of a human-made object such as a tool or device. In the digital context, usability is the degree to which a digital interface can be used by specified consumers to achieve objectives with effectiveness, efficiency, and satisfaction in a specific context of use.

Put simply, usability is how easy or difficult something is to use. Usability and UX are often used synonymously, but they are in fact different, so let’s have a quick look at how we can distinguish between the two… A simple way to think about it is to remember that user experience encompasses the whole experience a person (in this case referred to as a user) has with a brand’s digital components (it’s worth noting that the term Customer Experience is used to define offline touchpoints too). Usability is just one part that makes up this experience. Other aspects of UX could include things like the brand, marketing, customer service, live chat, content, pricing, visual design, etc. The User Experience honeycomb (Peter Morville) shown in the image below, illustrates usability as just one of seven parts of UX (read this post about what UX  is and the benefits).

So, nowadays, UX is used to describe the overarching process and interaction with the product, whilst usability is more about whether a task can be achieved in a satisfactory and timely manner. In fact, if we look at the international usability standard ISO 9241, it defines usability solely as efficiency, effectiveness and satisfaction. Norman and Nielsen take the definition a little further, saying that “usability is a quality attribute that assesses how easy user interfaces are to use”, and that it is defined by 5 components:

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
  • Efficiency: Once users have learned the design, how quickly can they perform tasks?
  • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can people recover from the errors?
  • Satisfaction: How pleasant is it to use?

Usability is crucial to your success

For most companies, checking their usability is a basic hygiene factor for survival. Users have no patience to put up with bad user interfaces or hard to use products, they no longer try to work it out themselves, they head off to your competitor who does what you do but they do it simpler, easier and quicker. If you don’t provide good usability you’re effectively sending your customers to your competitors. If those customers came to you through PPC, congratulations, you’ve also paid money to send those lost customers to your competition! A small investment in usability testing pays off massively in both the short and long term.

What are the benefits of usability testing?

Conducting usability testing will:

  • Increase sales and conversion: your user interfaces will be more effective at selling your products/service and therefore will increase your sales.
  • Improve credibility and trust in the brand: good UX is associated with increased brand appeal and positive brand associations.
  • Decrease bounce rates: people bounce for many reasons. During the UX design process, as many of those reasons as possible will be identified and designed out, keeping people on the site, taking them further down the funnel.
  • Avoid costly redesign: testing the product in the early stages of the design process and identifying usability issues at the earliest stage will avoid redesign costs later on and lost revenue.
  • Improve user satisfaction: a satisfying user experience is related to positive emotions due to the fulfilment of fundamental psychological human needs: self-esteem, autonomy, competence and relatedness (Self-determination Theory, Deci & Ryan). Moreover, the feeling of satisfaction gathered during a positive user experience, will create an emotional and affective bond between users and your brand, as well as a sense of engagement and motivation to use your brand in the future (for more about how to engage with your customers emotions, take a look at ‘How do you feel? Understanding emotions to craft satisfying experiences’).

So, how do you test usability?

Usability testing
Typically, usability is measured relative to users’ performance on a given set of test tasks. The most basic measures of usability are based on the following metrics:

  • Success rate (whether users can perform the task at all)
  • Task completion time
  • Error rate
  • Users’ subjective satisfaction

So, you’re basically measuring whether people can complete a task, how long it takes them, how many errors they make (and their classification), and how satisfied people feel after completing (or failing to complete) the task. It is crucial to recruit a representative sample of your target users in your usability test. The recruitment process should screen and select the people that could be your users/customers. There is no point testing the usability of, for instance, your ecommerce website with people that would never buy the products you sell. For this reason, it’s crucial to define personas that will lead the screening process to recruit the sample of users that fit your demographics (to read more about personas and how to create them, check out this post).

When to usability test…

Usability plays a role in each stage of the design process. Testing the usability of your interface or your industrial design with your users should be an ongoing process, that starts from the early phases of concept ideation, through to final launch. It’s worth considering that people’s behaviour, attitudes, needs and expectations change over time and so should your product / service so it’s good practise to run regular usability tests to continuously implement and improve your designs.

  • Test your current design. If you have a design in place currently, test it first to identify what you should keep or emphasise, and the barriers and obstacles that give users problems.
  • Test your competitors to gather insights about their strengths, weaknesses and opportunities for you.
  • Conduct user testing on prototypes. You don’t need to spend too much time designing prototypes, they can be lo-fidelity because you will need to change them based on your usability test results.
  • Develop the most successful prototype idea, informing the design of the interface with the findings gathered from continuous testing throughout the design process to refine the design.
  • Test your final design before launch to capture any new issues that may have entered through the visual design process.
  • Keep testing. Keeping your interfaces updated requires design changes – these should be tested to ensure you’re not creating new problems.

Mobile usability: Your biggest opportunity awaits!

Smartphones are now the core of our daily lives and are in the pockets of 66% of UK adults. 90% of 16-24 year olds own one, but don’t discount the older generation! 55-64 year olds are also joining the smartphone revolution, with ownership in this age group more than doubling since 2012, from 19% to 50% (keep an eye out in the new year for our latest Baby Boomers mobile shopping experience research or email us to request a free copy when it launches). Ofcom’s 2015 Communications Market Report indicates that a third (33%) of internet users see their smartphone as the most important device for going online.

Mobile is where consumer growth is

The rise of mobile is a predicted and inevitable trend so it is crucial for your website or app to be easy to use from the smaller screen of a smartphone. Not only will mobile growth continue, but we’ll also see mobile usage increase too. It’s something we’re noticing in our own consumer research: Users feel more comfortable browsing and purchasing on mobile devices as time progresses and they become more and more used to smartphones. We’re seeing this in the older generation too – do not discount them!

Get your FREE 50 point Mobile UX Checklist!

FREE Mobile UX checklist
To celebrate World Usability Day and to encourage you to take advantage of the continued growth in mobile, we’re giving away copies of a 50 point mobile ux checklist! Download it and you will find a set of useful guidelines to check your mobile user experience.

Get my FREE Mobile UX Checklist >

Need help?

Our Usability Experts and UX researchers have unrivalled experienced with mobile usability testing – our experience goes right back to the first ever smartphone don’t you know 😉

Email us now for your complimentary initial consultation.

Understanding the user-centred approach to accessibility

Accessibility is defined as the matching of delivery of information and services with users’ individual needs and preferences in terms of intellectual and sensory engagement with resources containing that information or service, and their control of it. Accessibility is satisfied when there is a match regardless of culture, language or disabilities.

Why should you care about accessibility?

Since the online environment is an extension of the physical one, there is nothing more effective than a metaphor with the offline world to understand how crucial accessibility online can be for your business.
Imagine you are running a flower shop; the business is going pretty well, the shop is in a very good and central location, easily accessible from the main street. A lot of people visit it every day, attracted by the colourful window display with fresh flowers, the enticing aroma and your brilliant customer service. Inside the shop, flowers are tidily organised and labels with names and a clear description are provided. You tend to stay in the shop, ready to help your customers.

Now, think about the same flower shop, but imagine that in front of the main door there is a big step that prevents access for some of your customers. There’s no window to showcase your flowers and you turn off the light to save money. In the shop, no labels or descriptions are provided and flowers are randomly arranged. Moreover, you tend to stay in the back of the shop so your customers struggle to find you if they need help with something.

Poor Accessibility UX Design

That’s exactly what happens when your website is not accessible.

The context in the UK

48% of the UK population could potentially have problems accessing your website:
  • Disability affects 19% of working age people in the UK
  • 9% of the UK population have some form of colour blindness (1 in 12 men and 1 in 200 women)
  • 4% are visual impaired
  • 12 million are over 60 years old; that is the 21% of the entire population
Accessibility context in the UK
Disability on the internet includes things like:
  • Problems with sight
  • Problems using a mouse or keyboard
  • Problems with hearing
  • Problems with reading and understanding
But web accessibility also helps people who:
  • Have a slow internet connection
  • Have a small screen or unusual device
  • Can’t listen to sound at work
  • Use an old web browser or operating system

What are the benefits of having an accessible website?

Web accessibility protects your website against demographic changes and opens your business to everyone with an internet connection.

People with disabilities and special needs have spending power (disposable income of £50 billion per year) and the benefits of a website accessible to everybody are:
  • The website will be higher in the search engine: SEO and accessibility go hand-in-hand because websites that are inaccessible to users with disabilities are also inaccessible to search engines. One of the most powerful elements of SEO is creating machine-readable content. This is content that can be read by humans as well as assistive technologies, like screen readers.
  • You won’t incur legal fees: according to the DDA (Disability Discrimination Act) and Equality Act 2010 service providers must not discriminate against disabled people and an equal access to public or private services should be guaranteed
  • Increasing conversion: an accessible website will be more usable for all users not just for people with disabilities. Good usability and a positive user experience on your website will increase conversion.
  • Your brand will gain a positive image.

Which guidelines do you need to follow for developing an accessible website?

WCAG 2.0 (Web Content Accessibility Guidelines) defined in 2008 is an internationally adopted technical standard; the guidelines explain how to solve many of the problems that your users with disabilities face on the web. Although, WCAG 2.0 is not an all-inclusive list of issues that users with disabilities might face, they are internationally recognised standards.

WCAG 2.0 has 12 guidelines that are organised under 4 principles:

WCAG-2 Guidelines for Web Accessibility
Perceivable Perceivable
The principle of a website being perceivable is about the senses people use when browsing the web:
  • Provide text alternatives for non-text content
  • Provide captions and other alternatives for multimedia
  • Create content that can be presented in different ways, including by assistive technologies, without losing meaning
  • Make it easier for users to see and hear content
Operable
The actions people take when browsing:
  • Make all functionality available from a keyboard
  • Give users enough time to read and use content
  • Do not use content that causes seizures
  • Help users navigate and find content
Understandable
Your website must use clear terms, have simple instructions and explain complex issues:
  • Make text readable and understandable
  • Make content appear and operate in predictable ways
  • Help users avoid and correct mistakes
Robust
A robust website is one that third-party technology (like web browsers and screen readers) can rely on. This minimises the risk of your users relying on technology that cannot correctly process your website:
  • Maximise compatibility with current and future user tools

WCAG 2.0 are organised into three levels of conformance:

  • Level A – the most basic web accessibility features
  • Level AA – deals with the biggest and most common barriers for disabled users
  • Level AAA – the highest (and most complex) level of web accessibility

Starting with Level A is a great way to make progress and begin helping out your users. Level AA is the standard many governments are using as this level targets the most common and most problematic issues for web users.

How can you test if your website is accessible?

In the WCAG 2.0 a list of universal guidelines are presented, but what we clearly know is that it can be difficult to universally define the usability of a website. A website or an interface that is usable for one person, might not be for someone else.

Some websites were found to perform extremely well in usability evaluations with disabled people, yet did not meet certain WCAG lines.

A holistic approach to accessibility is necessary to develop an accessible website. Experts claim that ‘the key measure of a digital system is whether it fits it’s context of use: whether the people for whom it is designed can use it with acceptable levels of usability, for the tasks that they need to do, in the social setting in which these tasks take place, using the technologies they have available.’

User requirements can be grouped into several categories, including:

User characteristics User characteristics
The abilities (and disabilities) of the target users including perceptual, cognitive, motor, and linguistic abilities.

Domain requirements Domain requirements
The tasks that need to be supported, group, social and cultural dynamics, communication patterns, environmental factors, and so on.

Tech requirements Technological requirements
Such as availability of hardware and software and the availability of plug-ins.

Performance requirements Performance requirements
For example, task success rates, task-completion times, satisfaction ratings, and quality of task output (e.g. comprehension outcomes in an e-learning environment).

These requirements have a cultural context in which they have to be considered in order to be meaningful. The holistic approach to accessibility is based on social inclusion rather than on the principle of universal accessibility.

A user-centred accessibility approach will entail both evaluating your website with the WCAG 2.0 guidelines and testing the usability directly with disabled users. This approach emphasises the importance of the user and on satisfying his/her requirements.

In times of increasing complexity and reliance on technology, it is important to ensure that what is being gained is increased quality of life and that “by designing with the disabled in mind, we can create products that are better for everyone.” Inclusive Design

Need help or advice?

If you’re curious about any of the above and how ux can help you to create a more successful product, contact our experts for free, friendly, no-ties advice.

Other posts you may find interesting:

What is User Testing?
5 user tests every Product Manager should commission

References
Sloan, D., Heath, A., Hamilton, F., Kelly, B., Petrie, H., & Phipps, L. (2006, May). Contextual web accessibility-maximizing the benefit of accessibility guidelines. In Proceedings of the 2006 international cross-disciplinary workshop on Web accessibility (W4A): Building the mobile web: rediscovering accessibility? (pp. 121-131)
Ford M. & Nevile L, 2004, “Issues enabling support for Multi-locational Accessibility“, IDABC: Cross-border E-Government Services for Administrations, Businesses and Citizens Conference’, Brussels, February 2005.

Are fashion brands losing their identities online? A research study by Keep It Usable

Have you noticed how similar websites look these days? Cover up the logo and can you really tell one from the other? How effective and identifiable is their brand once you cover up the logo? Is their identity getting lost online?

Walk down the high street and each brand has a clearly identifiable shop front. They each have their own unique style. So why is it that these very distinguishable brands have websites that all look very similar?

Of course this could just be our opinion so we decided to put 11 female fashion brands to the test to see if their target consumers (young females aged 18-24 in this case) could correctly identify online websites with their brand (logos removed and provided separately). We used a mix of well known and lesser known brands, high street and online brands. We also tested both desktop and mobile versions.

Try it for yourself…

Have a look at the following brands (notice how similar a lot of these look already?)

fashion brands

Which brand do you think the following website belongs to?

Desktop Brand

To make it a little easier, we’ll give you a clue, it’s either Topshop or River Island. Here’s a photo of their high street shop fronts to help you even more.

River Island / Top Shop

If you think the answer is River Island we can understand why. The website looks more consistent with the high street River Island shop front doesn’t it. However, the correct answer is actually Topshop.

Did you find that difficult? Well, unsurprisingly, so did the people we interviewed. The Topshop logo was correctly matched to the website just 21% of the time (so only 1 in 5 attempted matches were correct).

“I don’t know why I don’t recognise Topshop, I’m confused.”

Everyone found matching the brands to the websites much more difficult than they anticipated (they thought it was going to be really easy) and they struggled to match the brand with the correct website, even if they were a regular shopper and therefore very familiar with the brand.

And the winner is… Very

Very was the winner of our online brand identity research, closely followed by Asos and Zara. Look at their websites and you’ll see why. They each have a very distinct look and feel, their brand identity is carried through the whole user interface through the font, use of colour, imagery used, layout and style.

Very website

Findings

Those brands with the lowest scores included Forever 21, Missguided, Miss Selfridge and Glamorous. Interestingly, three of these brands scored higher on mobile than desktop which could be a sign of their younger audience being very mobile heavy consumers.

The research confirmed the initial hypothesis that brand identity is being diluted online and that as far as consumers are concerned, the brands are easy to confuse with one another and are relying too heavily on their logo as their sole differentiator against their competitors.

An interesting association that we discovered was that participants viewed websites with similar layouts as selling cheaper and poorer quality products. The layout affected their impression about the quality and the uniqueness of the product sold.

For the target consumers of brands tested in this research, quality is one of the most important factors for making the decision to buy an item online. A poor and cheaply perceived layout or bad usability of the website can affect the impression of the product’s quality and undermine the overall image of the brand.

Brands that scored the more correct matches tended to have a stronger identity on desktop than mobile. The market predictions for 2016 forecast that mobile will play a bigger and bigger role in the e-commerce market and fashion brands should be aware that the income of mobile traffic will have a strong impact on their business.

Moreover, the 2016 trend in retail will be the omnichannel approach to shopping; that is a continuous and smooth shopping journey through different channels, online and offline. It is crucial that high street brands create a strong brand identity on all their digital platforms to create a consistent customer experience across all touchpoints. The aim will be to provide costumers with a frictionless, continuous shopping experience.

Discover even more insights in the presentation below and if you need to improve or test your fashion website in order to increase your conversion, we can help! Contact us

View on Slideshare

Another award shortlist for Keep It Usable

WIBA Award Keep It Usable

We’re incredibly excited to announce that we’ve another award in our midst! This time it’s our founder, Lisa, who has been shortlisted for the North West Women in Business awards (WIBA) STEM category. STEM aims to recognise women who work in the traditionally male dominated areas of science, technology, engineering and mathematics.

Lisa says “I’m very proud to be representing women in the STEM category. There’s still an under representation of women in the digital and tech scene. Certain sectors I work in are highly male dominated and I would love to see more women with the belief that they can enter these sectors.”

Best of luck Lisa!

We’d also like to give recognition to the amazing work of Ladies That UX. A group set up by Lizzie Dyson and Georgie Bottomley to support women who work in the UX field. Thank you for your continued support!

The Biggest list of 35 FREE UX Books

We’ve pulled together the biggest list of free ux ebooks on the internet that will help you to design a better user experience / ux, conduct better user research and improve your usability. You won’t find a list this extensive anywhere else. Please share with your colleagues using the social links above and let us know on Twitter which books you liked the best.

1 UX Design for startups

2 Define app requirements within 20 minutes

3 Designing Interfaces by Jenifer Tidwell (patterns only)

4 Designing Mobile Interfaces by Steven Hoober and Eric Berkman

5 Designing for the web by Five Simple Steps

6 UX Storytellers

7 The Guide to UX Design Process & Documentation. A master collection of frameworks, examples, and expert opinions at every stage

8 The Guide to Minimum Viable Products. A Master Collection of Frameworks, Expert Opinions, and Examples

9 The Guide to Wireframing – For Designers, PMs, Engineers and Anyone Who Touches Product

10 The User Experience Guide Book For Product Managers 

11 Tips on how to recruit participants for usability studies by Nielsen

12 Bright ideas for user experience researchers by userfocus

13 Bright ideas for user experience designers by userfocus

14 Head First HTML with CSS & XHTML by Elisabeth Freeman, Eric Freeman

15 Getting Real by 37 Signals

16 Knock Knock by Seth Godin

17 CSS Cookbook

18 The Fable of the User-Centered Designer by David Travis

19 Converting The Believers by usereffect

20 Usability Guidelines by Michael Leavitt

21 The Guide to Mockups Mockup types, methods and best practices

22 Six circles – An experience design framework

23 Elements of psychology by Henry N. Day.

24 Learning, Remembering, Believing: Enhancing Human Performance by Daniel Druckman and Robert A. Bjork

25 Psychology and Industrial Efficiency by Hugo Münsterberg

26 Mental Models in Human-Computer Interaction: Research Issues About What the User of Software Knows by John M. Carroll and Judith Reitman Olson

27 The Elements of Typographic Style Applied to the Web by Richard Rutter (updated 2014)
TheElementsOfTypographicStyle

28 Search User Interfaces by Marti A. Hearst

29 Web Style Guide by Patrick J. Lynch and Sarah Horton

30 Just Ask: Integrating Accessibility Throughout Design by Shawn Henry

31 Building accessible websites by Joe Clark

32 Time Management for Creative People by Mark McGuinness

33 Taking your talent to the web by Jeffrey Zeldman

34 Introduction to good usability by Peter Conradie

35 Task-Centred User Interface Design by Clayton Lewis

Have we missed any? Help us to keep this list updated for the ux community by letting us know if you find a good free ux book that we should add to the list.

Next:

If you found this list useful, please share it using the social buttons below, and if you liked any of the books, let us know on Twitter, we’d love to hear from you.

Guest Interview: On The Beach Head of Design

Keep It Usable On The Beach interview
This months Keep It Usable guest interview is with our friend Fritz Von Runte.
Fritz is the Head of design for our client On The Beach and we had the great pleasure of working with the team on a recent project.
Fritz Von Runte“I would go to the lab with Keep It Usable in the morning, and in the afternoon I’d be writing tickets to change things – in the best Agile practice.”

Could you tell our readers a bit about your background and your role at On The Beach?

I started my career in Art Direction almost 20 years ago, working for the advertising industry. I was always interested in “New Media” and eventually I decided to shift my career, to focus on web. Then, 7 years ago I made my masters in User Interface Design and specialised in UX.
At On The Beach I wear a couple of hats. I’m the head of a design team of four professionals. We try to maintain a certain design language throughout the company, with consistence and on brand. It’s a tough job because it’s a big company, with many colleagues, many requests, and many design problems, all in need of our solutions. Plus, it’s one of the most successful online travel agencies in the UK market. It’s a massive responsibility. I am also responsible for designing the experiences our users will have, not only in the web but also offline, via our flight and hotel vouchers, and customer documentation, for example.

What does your typical day involve?

I have a very busy schedule, but there’s a certain framework that I try my best to fit it. We’re Agile, so every morning we have the Design stand-up where we communicate what every member of the team is doing at the moment and discuss the flow of tickets. We also have Agile stand-ups for all other projects, most of these involving the Design Shop (as we call our team), so one of us must be there to update the other teams. I try to schedule all my meetings in the morning so I can use the afternoon for research and design.

How important is UX at On The Beach and why is it valued?

On The Beach has been around for almost 8 years and it grew very rapidly. A couple of years ago they began to understand the need to pay more attention to the experiences and the usability. I was brought on board as the first designer focusing on the UX, we had a good six months changing the culture to accept and understand a bit more about this need. But, to be honest, this change was painless and smooth, as the directors were (and are) open to new solutions that could improve the website and our client’s experience. We have a lot of room to develop, to research, and to propose new ideas. It’s a wonderful place to work and it’s a thrill to be doing UX design at this moment in time at a company like On The Beach.

You work to an agile development process. Why and how does UX fit into this process?

I guess that is the biggest challenge. Agile is awesome but historically it tends to treat design and the experience as something frivolous or secondary. One of my goals is to raise awareness of how better it is to deal with usage challenges from the start instead of doing it rapidly and then having to re-do it. On the otherhand, when we are testing and prototyping, we use Agile principles and it works really well to prove (or disprove) assumptions from a very early stage, without having to spend much time in development for example.

What tools do you work with?

Primarily with paper and pencil – it’s how everything starts!. Then I move to a PC. I find it easier to talk to the network and to other technologies with a PC. But, we have all sorts of platforms in our team; Windows, iOS, Ubuntu, Android…
When it comes to software I use many different ones. The whole Adobe suite of course – and I mean the whole suite! I’ve used Visio in the distant past, then I moved to Axure and Balsamiq, but because of the dynamics here at On The Beach I now mainly use Illustrator for my low-fi wireframes as I’ve accumulated an extensive library of symbols and actions… 🙂 Plus a lot of on-the-fly coding on the console and notepad, and also other online tools like UXPin, Litmus, JSFiddle, etc.

Mobile app vs responsive web design vs mobile web – what are your thoughts at On The Beach?

Responsive is a terminology that I don’t really subscribe to. There are two ways to see this issue. Firstly, like we all used to test our websites, years ago on different browsers and systems, and get charts of usage of monitor sizes and resolutions, we now should make sure this product performs well in all possible environments – the mobile, the tablet, the internet tv, the laptop, etc, in all browsers and all systems. Nothing has changed – the game is just a bit harder now.

Secondly, different products have different needs and different platforms have different needs. The very first version of Tetris I’ve ever played was called Nyet. Tetris is a classic game that existed in any possible platform, even portable ones like Gameboy. Have you tried to play Tetris on the mobile? It changed the whole dynamic and usability of the game. So having a webapp whose functionality is the same on different platforms, but with some adjustments to the grid depending on the screen size, is not something I take for granted.

I always challenge the concept of mobile apps, for different reasons. I don’t think it’s always the best way to serve your product to a client. I have a parallel career as a DJ and record producer, and the music market is flooded with Mobile Apps. I don’t see it as a great tool to serve content. I see it mainly as a badge on your mobile screen, saying to the world and yourself that you’re are a big fan of artist or band xyz. I think mobile apps – the ones you download, and that updates itself when you’re connected to the wifi – are more interesting when your product is a tool and that you think the user will use it enough times to justify its download and space on screen and internal memory.

With On The Beach there are two main factors that made us not to choose this route. Firstly we are so dynamic when it comes to software development, making at least two deploys per week, that an app from us would be constantly updating, and that wouldn’t be the best experience for the user – think Acrobat Reader, when was the last time it didn’t tell you it needs updating? 🙂 The second reason is accessibility. Although we have a significant number of customers choosing us as their online travel agent more than once a year, plus all the people that come back from their holidays and come to us to book their next ones – and that would justify an On The Beach app as a tool – we wanted to use our efforts and energy on something that would serve everybody. For example, users coming from Google or Bing, a link on Facebook, a suggestion of a friend or a specialist site like Trip Advisor (that sends us hundreds of users every day). Instead, we made an entirely new website, just for the mobile, that you don’t need to download or upkeep. It’s there for anyone with a connection and it works really well.

On The Beach Tablet and Mobile websites

Describe an example of the work involved from design through to implementation?

I think the design process is the same on every branch of design. From designing a chair to a party flyer, from a shopping cart experience to a car. We have an idea, then some high level analysis, then research, concept, testing and finally wireframing. Then back to the research.

How important is research to OTB?  How did the Keep It Usable research feed into the agile development process and how did the feedback help to shape the software?

Research is fundamental to my work and to the company. We are constantly analysing data and testing the best way to do everything. When it comes to our mobile website we did extensive research, and Keep It Usable was a major part of it. We had instant feedback on certain features that are paramount to the mobile experience. I would go to the lab with Keep It Usable in the morning, and in the afternoon I’d be writing tickets to change things – in the best Agile practice.

What are your favourite UX-related resources?

I have way too many bookmarks, rss and twitter feeds, but I think the benefits from other people or companies experiences come from knowing the whole case. This is why I love to go to meetings and talks, I’m very active at #NUX, and I try to go to all UX conventions I can. It’s a good way to get to know people in the industry, but mainly I do it to hear the cases straight from the horses mouth. A button being small or big, positioned left or right, its colours… it doesn’t mean anything without data, without knowing the purposes and goals that were briefed.

Fritz on Twitter: @fritzvonrunte

Would you like to work with us?

Keep It Usable help many different kinds of companies to understand their users. We conduct research with real people and design interfaces using an evidence-based approach; every element has reasoning.

contactusbutton
If you’re not investing in UX, your competitor will be!