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

5 reasons to continuously conduct user research

Conducting user research is now something that most successful brands do to improve their user experience and ultimately their bottom line. However, there is still a lot more potential to increase revenue and profitability as many brands still don’t do enough user research. They are reactive and responsive to the demand for research as opposed to ingraining it within their process as an active continuous activity. In fact, recent research has shown that 58% of companies only conduct research on a quarterly or less frequent basis which is far from adequate if you want to be a leader in your market.
58% of companies only conduct research on a quarterly or less frequent basis

User research is not just about waiting until you have something to test. It should be a pro-active activity that provides regular insights into customer behaviour, psychology, process, interaction, expectations and keeps up with the fast changing pace of the digital world at the moment. The way customers shop is constantly adapting and you need to adapt too.

So why should i continuously carry out user research?

1 Understand your customers

Customer behaviour, attitudes and expectations adapt over time and with changes in technology. Conducting regular research enables you to keep informed of how customers perceive your brand and how they’re interacting and transacting with your business. Rather than waiting for changes to happen then reacting to them, you can identify early turning points and be the first to innovate to changes in your sector. This continuous learning enables you to keep all your user documentation such as user journeys and personas up to date so your team are not making decisions based on potentially out of date and no longer relevant insights.

2 Test hunches and hypotheses

Your team should always be coming up with hypotheses to explain data, current and future user behaviour. Some of these you’ll be testing through your split testing but for concept ideas you’ll need other ways to test these and gain user feedback. Assumptions should always be treated carefully – don’t base major decisions on hunches, make sure you have the evidence to back them up through user research. The type of user research you’ll need to conduct depends on what you want to find out – what’s your hypothesis? See 5 user tests every product manager should commission.

3 Benchmark KPIs against yourself and competitors

What do you use as your KPIs? For your online digital experiences you might be using metrics that include those found in the definition of usability ISO 9241-11.

These are:
Efficiency: How long does it take to complete the task? If you’re an online retailer who sells dresses online, how long does it take a representative customer to find and select a red dress for an evening out?

Effectiveness: How do they accomplish the task? Do they complete it using the most optimal path or do they go around the houses, getting a little lost along the way? This is your effectiveness rating and it’s an important indicator of how easy and intuitive your tasks are to complete.

Satisfaction: How satisfied does the user feel after completing (or maybe they didn’t complete) the task? This is a self rated measure.

You’ll find correlation amongst the above three measures. If one scores low it’s likely the other metrics will score low too and all the above correlates with NPS scores. If you regularly run research to benchmark your user experience against yourself (to check the changes you’re hopefully constantly implementing to improve your conversion) and against competitors you’ll always know how you compare and where your strongest opportunities are.

4 Avoid costly rework

There's nothing worse than leaving user research until just before launch, then finding out that your idea sucks!

Or maybe the idea works but the implementation of it isn’t quite right, it’s not testing well and now there’s not enough time to fix it before launch. If only you’d run some user research on an early prototype! The earlier you can catch problems the better as that’s when it’s much cheaper and quicker to fix them. Some people think user research will add time and cost to their project but it really doesn’t, it slots in easily and quickly, and will save you a heck of a lot of rework later on.

5 Be more successful

By continuously conducting user research in your process, the team are constantly seeing their work from the user’s perspective. They’ll begin to think more like your customers and imagine them as they’re working on their UX designs, when they’re in meetings and when they’re coming up with new ideas. Rather than speaking of their own opinions and experience, they’ll begin to talk about what Alice said last week and this gives them a much more solid basis for coming up with innovative ideas and solutions that are born from user insights. These ideas have a much greater chance of being successful for your business.

What to do next

Commit to a regular schedule of user research and see the changes it makes to:

  • Your team morale
  • The understanding of your customers
  • The quality of new ideas generated
  • The cost savings you’ll make through less rework
  • The improvement in all your customer experiences

…and the business will benefit hugely from the increase in revenue.

User research is a revenue generator and the key to your success

Need to rent a lab for your research?

Other posts you may find interesting:

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

Personas: Why is it important to understand your users?

Persona example 1

Image credit: Xtensio

Personas are amazing! If you don’t have them or if you have them but don’t use them (what a waste!) then you’re missing out on a whole host of business benefits. Let’s have a quick look at these before we dive more into what personas are and how they fit into the design process…

Benefits of Personas

  • Company wide understanding of who your users are
  • Deep understanding of customer behaviour and needs
  • Stop everyone in your company from talking about themselves, their friends and family as the user(s)
  • More effective, focussed conversations and business meetings
  • Clearer and better decision making – focussed on user needs and goals
  • Greater empathy with the customer

Enables your design team and project managers to create much better products and services

Where did it all begin?

Personas were introduced in 1998 by Alan Cooper.

At the time he was working on the design of new software and he interviewed some colleagues (possible future users of the software), to collect some ideas to implement in his project. That day, without even realising it, Cooper started to engage himself in a dialogue, play-acting as a project manager, inspired by one of the colleagues he interviewed that day.

Cooper found this play-acting technique was tremendously effective for solving design questions around functionality and interaction, allowing him to understand what was necessary or unnecessary from a user-centred point of view.

Since then, he used this technique to design all of his products, bearing in mind the benefits of thinking from the users point of view. Hypothetical user archetypes allowed him and his clients to better understand the end user in their projects.

What is the personas method?

Using Cooper’s own words:
“You tend to canvas the user community, collect their requests for functions, and then provide them a product containing all of those functions. I call this the sum of all desired features.”

Personas are narrations, stories about imagined characters; they are imagined and described in interaction with the product that is going to be developed (website, device, app, software etc.). Personas are defined in the early stages of the design process and they guide the project team throughout the product development process.
Defining personas is also essential for any consumer research involving the product. To canvas the profile of future users helps in the recruitment of a representative sample of the population for an effective and realistic UX testing session.

Why are personas so important to the design process?

The most important goal of personas is to create understanding and empathy with the end user(s).

If you want to design a successful product for people, first of all you need to understand them. Designing for everyone results in an unfocused goal that will dehumanise the profile of future users. The personas method allows you to draw not just a profile about gender and age, but to dig into the psychology of the imagined character in their interaction with the product.

“Personas consolidate archetypical descriptions of user behaviour patterns into representative profiles, to humanise design focus, test scenarios, and aid design communication” (Cooper, A. (2004) The inmates are running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity)

The power of the narration that typified this method, allows us to create a story that introduces the product in the everyday life of the imagined character. The narration sets goals, creates visibility of problems and potential issues in the user-product relationship.

Personas are a crucial passage in the user-centred design process because they define expectations, concerns and motivations, helping design teams to understand how to design a product that will satisfy users needs and therefore be a success.

People are no longer passive users of a product or a service, but they are actively interacting with it; they are engaged in a ‘conversation’ in which both sides, user and product, are actively asking and responding. Defining personas during the design process helps your team to imagine that conversation.

Designing personas

The story

When designing personas, the story needs to cover the following:

  • Demographic presentation of the character (age, gender etc.)
  • General traits (occupation, interests, hobbies etc.)
  • Psychological traits (needs, motivations, aspirations etc.)

Collection of data when designing personas

The scenario

The scenario is very important for the effectiveness of personas.

Scenarios are imagined situations in which the character interacts with the product. Personas without scenarios have no value, so defining good scenarios is crucial.

The narration of an imagined scenario follows this structure:

  • Setting a problem, a situation
  • Describe the character’s reaction to the problem
  • Define the role of the product in this scenario (e.g. how does the character interact with the product in that situation? Why does the character use the product? With which aims? What are the character expectations of the product?)
  • Resolution of the situation

Personas design-process

Remember, if you want your product to be successful, you have to design it bearing in mind who will use it.Personas design process

1. Collection of data. In the first step, you collect as much information and knowledge about your users as possible. Data can come from many different sources, even from pre-existing knowledge in the organisation. A good starting point is user research to gather insight into your users.

2. Hypothesis. Based on the data collected in the first step, you create a general draft of the various kind of users, including in which ways users differ from one another.

3. Description of scenarios. You create scenarios that describe solutions; possible situations that could trigger the use of the product are described. Scenarios will be used to better imagine user interaction with the product. The story about how the character will use the product is the personas’ ultimate objective.

4. Description of personas. Preparation of a brief description of the typical user, paying attention to user needs, motivations, aspirations and values. It is very important that you add to the narration one of the scenarios created in the previous step. The ultimate aim at this stage is to generate a narration that creates an empathic bond between the imagined person and the reader.

5. Selection of 3-6 personas. The ideal number of personas is limited (too many and you’ll start to lose track of who’s who). At this stage, choose 3-6 descriptions that are the most representative of your typical users. Selecting a limited number of personas allows you to be more focused during the design of the product.

6. Dissemination of personas. It is important that personas defined during the process are shared with the whole project team to provide a shared understanding of your users / customers.

Example persona

Here’s an example of a completed persona:

Persona example 2

Image credit: Xtensio

Need help or advice?

If you’d like to know more about personas and how they can help you to create a more successful product, contact our UX experts for free, friendly, no-ties advice.

Other posts you may find interesting:

12 reasons to invest in UX
What is User Testing?

References
The origin of personas (Cooper) – http://www.cooper.com/journal/2008/05/the_origin_of_personas
Persona templates – http://fakecrow.com/free-persona-template/

Karen Millen’s Black Friday UX Faux-pas

It’s Black Friday, you wake up, grab your mobile by your bed and have a quick look at your favourite sites to see if there are any bargains to be had before christmas. Going round the shops is for losers, you’re going to be the first one to get the bargains and all in the comfort of your own bed before you’ve even started work. Win!

One of your favourite stores is Karen Millen and you’re excited to see they’ve joined in with Black Friday. It’s promoted on the Home page, however, you nearly missed it because it doesn’t have the usual Black Friday branding and looks just like a normal ad. But you spotted it and that’s what counts.

karen millen black friday

You eagerly click on the ‘Shop now’ text (you do this carefully because it’s very small on your mobile) and land on a page full of items. The large ‘25% off’ text on each item immediately grabs your attention. Fantastic! 25% off!

karen_millen_uxAt first you’re confused. It appears there are are only two jumpers in the Black Friday sale so you go to press the back button but you happen to catch the screen with your finger and the page scrolls slightly. You notice there are actually more items hiding further down the page!

You see a jumper you like so you look at the price and it says £75.00. You look back at the 25% off text and wonder if that means the price is already discounted or not…. There’s no other price on the item (you’re used to seeing a before and after price) and the price isn’t in a different colour so it looks like it might still be the full price. Is it really in the sale?

Hmm… you decide to click on it to have a closer look at the jumper and to see if there’s any sign of a sale price on the next screen. Maybe they just missed it off the previous page. But now it looks worse… the 25% off text has now gone completely and there’s just the one price of £75.00. It doesn’t look like it’s in the sale at all.

karen_millen_black_friday

You’re confused. You like the jumper but don’t know if it’s reduced or not. Is is reduced? Is the £75.00 the reduced price or the full price? You don’t want to risk it so you leave and go to River Island instead.

river_island_home_black_friday

Aha! That’s more like it! River Island screams the magic words 50% OFF as soon as you land on their home page. It doesn’t actually say if it’s a Black Friday sale but who cares, it’s a whopping 50% off and that’s good enough for you!

river_island_black_fridayYou eagerly press to see the items in the sale and land on a page full of cool stuff to wear. It’s really clear to you that these are all sale items because you can see the original prices which are crossed out and replaced with new prices that are also red so you know they’re in the sale. Whoop! Let’s get sales shopping!

Keep It Usable.

The privacy paradox and how you can use it to increase conversion

The privacy paradox and how you can use it to increase conversionIn the era of Web 2.0, privacy is not only one of the liveliest issues in the debate about consumers behaviour and individual rights, but also one of the most difficult one to solve. Companies want more customer data, customers say they dislike this, yet they freely provide personal data.

Nowadays, the border between private and public is becoming more and more blurred; people are used to sharing their pictures, videos, preferences, personal information, and everyday a huge amount of online data is collected, however, they still appear to be seriously concerned about their privacy and claim it to be an important factor in their online decision-making process. To make things even more complicated, concern about privacy doesn’t in fact match actual online behaviour.

The Privacy Paradox

The privacy paradox is the discrepancy between an individuals’ intentions to protect their privacy and how they actually behave in the online marketplace, it’s the relationship between individuals’ intentions to disclose personal information and their actual personal information disclosure behaviours, which are often very different.

According to several privacy-related studies, the online audience can be divided into three big categories:

1. Privacy fundamentalists: very privacy-oriented and concerned
2. Privacy unconcerned: not at all privacy-oriented
3. Privacy pragmatists: in-between the other two categories

In general, consumers appear to be much more sensitive about the use of their medical, financial, and family information than they are about their product, brand consumption or their media usage behaviour. Why is this? Because things like their medical, financial and family information, when disclosed, can cause potential embarrassment and security problems. People also fear loss of control of this type of information.

Conceptual Model of Disclosure

The conceptual model of disclosure is a theory that states the consumer’s behaviour is influenced by both their perceived risk of disclosing their information and the trust they have with the company.

Conceptual Model of Disclosure

Privacy Paradox Model

In reality, the consumer’s actual behaviour is more highly influenced by trust. This is why people disclose information even when they say they’re really concerned about their privacy.

Privacy Paradox Model

Figure 1 Norberg P., Horne D., and Horne D. 2007 The Privacy Paradox: Personal Information Disclosure Intentions versus Behaviors.

One of the problems is that people have a tendency to over-report their understanding of privacy issues and their willingness to act in order to protect them. There’s a disjoint between users attitudes and opinions and their actual behaviours and experiences online.

This was tested in an “e-commerce experiment” to understand how privacy indicators affect the users decision-making process.

Ecommerce test

Above: Screenshot from e-commerce experiment (Jensen C., Potts C., Jensen C. 2005 Privacy practices of Internet users: Self-report versus observed behavior).

They observed that consumers tend to disclose personal information more easily than they claim to do. What the research highlights is that users self-reported experiences don’t match with their actual online behaviour. What clearly emerged is the importance of “trust-marks” in the interaction between users and digital interfaces.
Trust-marks → factors which may not say anything about the site’s privacy practices, but which are interpreted as such by users.

Users appear to live a “double bind” relationship in dealing with privacy issues on digital interfaces, and this is affecting their decision-making process in purchasing online. The Double Bind theory (Bateson G. 1950) in psychology is defined as a conflicting communication dilemma in which the message doesn’t match with the observed behavior; that causes an emotionally distorted and frustrated reaction in the individual.

Tips to improve trust, acquire more data and lessen abandonment

Here follows some tips that could help interfaces designers in dealing with the paradox, avoiding frustration and consequent abandon in purchasing online.

Visible link to a privacy policy

It has a major effect on purchasing behavior, even though, according to the study, only a quarter of the policies were consulted. In most cases, users had more confidence in a site simply because it had a policy (the impact a policy has is of course more powerful when it is read, but it is not negligible when it is not). Policies are important, not just because of what they say, but because they are there.

Netflights Privacy Policy
• Credit card icons

Even if it does not in fact imply any promise of fraud prevention or privacy protection, consumers find these icons reassuring.

Netflights Credit Card Icons
• Show a contact phone number

Preference for phone information over mailing or email information. Consumers feel reassured to see a phone number to contact the company if any problems occur during the transaction.

Netflights Contact Info
• Development of policy simplifications and standardised indicators

Implement standardized, simple visual indicators for the risks users are exposed to.

It is interesting to note the strong effect policies have despite the fact that users rarely read them. Just having a link to a policy makes a difference. This indicates that in many cases it is the presence of a policy that has a positive effect on users, not its content. Users are looking for “trustworthiness”, not based only on fact but rather on appearance and first impression.

Keep It Usable app wins award and goes to 10 Downing Street

ClinTouch Mobile App

ClinTouch wins Outstanding Innovation award

Designed in collaboration with Keep It Usable, ClinTouch was recently the subject of a meeting hosted by David Cameron’s senior health policy advisor at 10 Downing Street, to consider the impact that digital technology could have in improving the nation’s health. ClinTouch is an easy to use app that provides an innovative new way of supporting people with psychosis, enabling early intervention and significant cost reductions for the NHS. This revolutionary digital intervention, developed by Manchester University empowers self-management for people with psychosis and reduces serious episodes occurring, improving the lives of individual patients and reducing NHS service costs, such as unplanned admissions and A&E presentations.

Significant cost savings for the NHS

Cost savings for the NHS are significant: Earlier intervention services in psychosis have the potential to save the NHS £119m over three years (Schizophrenia Commission Report). The ClinTouch mobile app is an end-to-end digital solution that improves communication and closes the information gap between patient and practitioner. This empowers service users to be more active in their care and recovery. This prevention is aided by utilising real-time data and alerting professionals of significant changes in their patient’s symptoms.

ClinTouch-Screens-Keep-It-Usable

Rich data and analytics

Through the app, users are prompted to record their symptoms and feelings. A unique and bespoke branch of questions then follows ensuring that each question asked is relevant with a graphical bank of user-friendly analytics immediately available for the patient to consider and review. This digital data-log can then be used to help identify any lifestyle or environmental triggers that prompt the onset of symptoms. ClinTouch has been built into an end-to-end system in two NHS mental health Trusts, with summary data accessible at clinical team desktops and streamed into e-healthcare records. If early warning signs for relapse occur, healthcare professionals can act to enable early intervention.

Manchester University, Manchester City Council, NHS, Manchester Mental Health

Call to Action Buttons: 5 Psychology tips to increase conversion 

call-to-actions

What are call to action buttons?

When designing an interface, one of the main goals of the designer, is to ensure that the end user is able to clearly understand what they should do next and where each click will lead them. Call to action buttons are essential to this dynamic, as these buttons are what guide the user through the interface.

The very name of the button, call to action, states there is a necessity for the person engaging with the interface to be stimulated to perform a task. In this case, the designer wants the user to press a button: to make it more enticing so that more visitors will convert. Therefore, your call-to-action buttons should be usable, but they also need to be actively persuasive to encourage more clicks and higher conversion.

Do they really make a difference?

Call to action buttons are the biggest A/B tests run by businesses (they make up around 30% of all tests). The difference between a poor and a great CTA can be anything from a few percent to a few hundred percent and more!

The internet is full of examples of how successful a good CTA can be. Take a look at Which Test Won for some great examples that you can interact with and test your own predictions of which CTA converted better.

So, let’s take a quick look at how we can make these buttons more enticing.

Psychology tips to increase conversion

1 Colour psychology

Colour plays a very important role in determining the pull of your button. The colour you choose can determine who clicks, how many times they click, and how quickly they click.

colour_psychology

For example:

– Females tend to prefer the colours purple, green and blue, while men tend to prefer blue green and black

– Blue is a colour considered to build trust while yellow tends to signify a warning.

These signifiers and others should be taken into account when designing CTA buttons to ensure the right audience is drawn to ‘click’. Not only is it important to choose the right colour, but to ensure that the entire page or interface is aesthetically pleasing. Consider the background colour of your template to ensure colours don’t clash and your button isn’t lost in the background.

2 Placement psychology 

You want your call to action button to stand out on the page, otherwise it will get lost amongst other elements and suffer from less clicks. If your button has an important message, ensure that it is positioned where it will stand out.

You also want your users to understand what happens when they click on your button. It can be a good idea to introduce your button with accompanying short text to support why the user should click it, what are the benefits for them?

Spotify

 

3 Visual psychology

The shape and overall design of the button is where one can get creative, but it is good to keep in mind particular ideas that could add to the ‘clickability’ of the button.

Take into consideration the following:

People like curves. It has been found that rounded corners draw attention to the inside of the button, whereas square edges draw attention away from the centre. Neuro-aesthetics researchers have found that people prefer rounded shapes and these shapes actually cause more activity in the visual cortex (Bar, M., & Neta, M. (2006). Humans prefer curved visual objects. Psychological Science, 17(8), 645-648).

Size = Importance. The size of the button should be determined by how important that particular action is to be carried out.

 

4 Wording psychology

The importance of the message plays a huge part in determining the design of the button. In an increasingly fast paced society, the concept of reading long text becomes less and less appealing. As a result, one wants to ensure that the call to action button is as specific as possible, and gets the message across in the shortest amount of time.

How do we do that?

Be specific. Consider what you want the user to do and use a command to describe the button. For example, buy, watch, download etc. However, take note that some of the bigger conversions come from using less generic and more specific phrases, such as the one below.

CTA-button-test-1

image source

Keep it simple. Professionalism doesn’t necessarily mean big words and difficult commands. Simple commands make it easy for the user to know what to do and what comes next and allows for a smooth transition through the interface.

Clarity. If necessary, include a simple message on the button to clarify any ambiguity that may be there from the command. Through simplicity is important, clarity is essential.

Speak the users language. The larger increases in conversion come from analyzing what your customers really need. In user research we recommend listening to the language they themselves use to explore their mental model and what resonates with them.

Free is one of the biggest persuaders to motivate action so if your service is free or has a free trial, make it obvious for the user to see.

 

5 Emotional psychology

It is important to keep in mind the emotions you want your end user to feel while scrolling through your interface. Whether it be a sense of urgency, pity or excitement, you want to give them a reason to click on your button. Think about what calls you to action and why. Why did you buy those shoes on the internet? Was it because they were on a one day sale, or because they were only available online? Our minds are triggered into action by emotions as well as a perceived sense of need to perform an action. With your button, you have the opportunity to develop a sense of need or create a sense of urgency or desire to take your users to the next step.

Twitter

As humans, we’re pre-programmed to respond to images. They draw us in emotionally. The images you use alongside your CTA can play a huge role in creating the right emotion to engage users and increase uplifts.

 

Example: Basecamp

Basecamp use several techniques to increase the psychological pull of their CTA.

basecamp

Concise explanation with benefits, written in the user’s language (note the informality which makes for a friendly tone of voice), ‘Basecamp helps you wrangle people with different roles, responsibilities and objectives toward a common goal: Finishing a project together’.

– Social Proof to further persuade visitors to sign up. Social proof is evidence of other people using the service, in this case, the ‘4,869 companies signed up to use Basecamp just last week’.

Free. Yes they utilise the power of the word ‘free’ within their CTA.

Specific wording. Note how they could have just used generic ‘Sign up’ wording but they chose to go with a much more personal feel ‘Use Basecamp free for 2 months – it’s on us’. Did you spot the reciprocity there too? The way they bring out the ‘it’s on us’ makes it feel like they’re doing you a favour, psychologically when someone does something for you, you’re much more likely to reciprocate.

 

The exciting part!

Now that we’ve taken you through a number of techniques and examples to show how you can increase your conversion using effective CTAs, there’s just one thing left for you to do, and that’s to try a few of these on your own designs.

We’d love to hear how you get on and if you need any advice or have any questions, we’re always happy to help.

8 Technology trends you need to know for 2015

2015 is looking to be a really exciting year for innovation.  We get excited by new technology and the challenges that brings, especially with regards to designing for challenging smaller screens – how you can engage users and showcase information without sacrificing the experience? Here are some technologies and trends we’d recommend keeping your eye on in 2015.

1. Wearables

Wearables are becoming big business and the growing trend will continue to thrive in 2015, particularly in fitness, fashion and health.  More affordable wearables are likely to hit the market and will bring wearables to the masses.

Keep-It-Usable-Wearable-Tech-Nike-Fuelband

2. Apple watch

A handful of companies such as Google, Samsung and Sony have launched wearables in the form of watches.  This year, will see the Apple watch hit the market which will disrupt and put smart watches on the map.  This will have huge implications for how we communicate, interact and consume information.  The potential is vast, particularly for connectivity and health.

Apple-Watch-sport

3. Digital health

2015 will be the year that healthcare finally wakes up to digital!  Wearables that can monitor everything from measuring steps in fitness to improving your hearing.  Rings, hearing aids, headphones and much more will hit the market.  Could we even see the first digital implant…?! There is already a digital pill.

Health-Wearables

4. Internet of things

From controlling lighting and heating, TVs, appliances and even connecting your body. We will use technology to increasingly monitor and intelligently improve our lives.  The promise of major connectivity and intelligence is exciting and we expect to see this technology grow rapidly in 2015.

Keep-It-Usable-Internet-Of-Things-Philips-Hue

5. Major growth in mobile e-commerce

Mobile will be huge in 2015 and will continue to disrupt e-commerce.  8 in 10 smartphone users use their phones at some point during the purchase process and with mobile screens increasing in size, their popularity is projected to grow enormously in 2015, meaning users will consume even more data on mobile.  Mobile growth is larger than tablet with 186% average growth in sales via mobile compared to 131% in tablet e-commerce.  Read our e-commerce insights for 2015 >

Keep-It-Usable-Mobile-Shopping

6. Mobile wallets

2015 will be the year that contactless payment methods like NFC (near-field communications) really start to take off.  Larger banks are likely to offer NFC payments via smartphone by the end of 2015 with 5% of NFC enabled mobiles being used to make contactless payments.

Apple-Pay

7. Omni-channel retail experience

The future of retail will be a seamless approach to the consumer experience through all available shopping channels, i.e. mobile devices, computers, physical stores, television, radio, mail, etc. Omni-channel retail represents an experiential change for the connected consumer as all touchpoints with a brand become one. Example: Customer browses products online then when they enter a physical store they get these products retargeted to them as ads or offers in-store. Read about how digital tools will change the in-store shopping experience >

Keep-It-Usable-Omni-Channel-Retail-Experience

8. Usability

With the rapidly changing technological landscape and continuing explosion of digital into more and more products, it has never been so important to focus on user needs, psychology and behaviour.  Great usability will no longer be a nice-to-have, it will be mandatory in order to create a successful product. There’s never been a more important time to Keep It Usable.

Keep-It-Usable-Mobile-UX

The future of e-commerce: Generation Z

generation_z_technology_devices

The next up and coming wave of consumers are called generation Z. Born between the mid 1990s and 2010, these young people have been brought up with the internet and social networks. They are ‘Digital Natives’ and as a marketer or product owner you will need to approach this generation of consumer very differently. So, let’s learn more about them…

Who are Generation Z?

Right now they are aged between 4 and 19 years old.
They currently make up more than a quarter of the US population and this is still growing.
They spend nearly every waking hour online. 46% are connected 10+ hours per day!
They influence household purchases. You can’t just advertise to parents – Gen Z are major influencers of their parents decision making.
Tech savvy and heavy users of mobile. They’ve grown up in a digital world.
Always connected, especially to social networking channels.
High online spenders.

Prefer to shop online

Gen Z have been brought up with the internet and they prefer to buy just about everything online as opposed to offline. 20% of girls aged 12 and under regularly visit online shopping sites. The ability to easily make purchases online and delivering the right product information at the right time will be key.

Despite having very low incomes (think pocket money) Gen Z spend much more of their share of income online compared to previous generations. When this germination grows older and their income increases, they will drive major e-commerce growth.

Born to share

Gen Z have the ability to impact your brand via social like no generation before. They’ve been born and raised in a world of social websites. If they don’t like your website or product, they won’t call you, they’ll put it online so their connected web of contacts can see. They’re more likely to communicate with brands via social media and will be more demanding, they’ll tell you exactly how they feel. 77% will vent frustration of poor service over social media and expect an immediate response and resolution.

Listening and fast response will be key to managing this generation online. And to encourage this generation of sharers to share your content, you’ll need to ensure the content you create will be something Gen Z will enjoy – a fun brand voice, engaging content and incentives for sharing.

Traditional advertising won’t be as effective

A Forbes study claims that 57% of Zs saying they would rather save money than spend it immediately: “After seeing their parents lose jobs and their older siblings move back home, this generation will avoid debt. They’ll find the best deals and will expect to test out products physically or virtually before they buy.”

Gen Z will research everything themselves, turning to online reviews, bloggers and product experts to learn about products. Do you have a brand advocacy strategy? You will need to. By harnessing people who love your brand, and encouraging or incentivizing them to share their opinions online, you’ll provide a source of authentic information that Gen Z is likelier to trust.

Multi-screening and multi-tasking are the norm

They multi-task across at least 5 screens daily. “They suffer from FOMO (fear of missing out) more than millenials, so being culturally connected is critical” researchers from Sparks and Honey wrote.

Mobile internet preferred

According to a survey by Ericsson, 58% of Gen Z prefer surfing the web on their mobile as opposed to watching TV.

High tech – Even the youngest age group (9-11 years) shows advanced technology adoption and mobile internet usage similar to their older brothers and sisters. 31% of US children aged 6-12 wanted an iPad over any other electronic device for christmas in 2010 (followed by a computer 29%, and iPod touch 29%) – gone are the days of wanting lego!

Respond more greatly to visual stimuli

A Wikia study shows that 54% visit YouTube multiple times a day. Visual sharing sites like Instagram and Snapchat are also huge avenues of communication for teens.

Marketers will need to start communicating visually to a diverse audience, across multiple screens.

Prefer simple, short, interactive content

Gen Z have the lowest attention span and they prefer media that is simple to use and interactive as opposed to passive TV. Getting and keeping their attention will be challenging though as they like to communicate in bite sizes. Easy to use and simpler platforms appeal to this generation.

Addicted to social networking

Many children now feel that social networking is more important than other aspects of their life, including their family. According to a study by the University of Maryland, 79% of children showed symptoms of distress when they were kept away from social networking devices.

Goodbye Facebook, hello Instagram

Every year, the amount of Gen Z leaving Facebook grows. 25% of 13-17 year olds left Facebook in 2014. They prefer visual platforms; the numbers joining Instagram grew from just 12% in 2012 to 23% in 2013. They also prefer incognito media platforms such as Snapchat, Secret and Whisper.

They want to change the world

60% of Gen Z want to have an impact on the world (compare this to 39% of Gen Y). 1 in 4 of those aged 16 or over currently volunteer. Globally, teens and their families, are changing their purchasing behaviour towards choosing environmentally responsible products and companies.

Not brand loyal

The products themselves and their quality are more important to Generation Z than brand names. Expect these consumers to switch to competitors much more quickly.

Obese

By 2027 most of the grown up Gen Zers will be obese (77.9% of males and 61.8% of females). 66% of kids aged 6-11 say online gaming is their main source of entertainment, so obesity comes as little surprise.

generation_z_interests

Some of the above slides are courtesy of Sparks and Honey. If you would like to read more about Generation Z we would recommend reading their full report: Sparks and Honey on Slideshare.

World Mental Health Day 2013

World Mental Health Day

Today is world mental health day and it is a crucial day to raise awareness of mental health and wellbeing issues that can effect anyone at anytime.

We’ve been heavily involved in mental health for the last few years. It’s an area where having a good, simple user experience designed by specialist ux psychology designers is absolutely crucial. When someone is distressed, frustrated, stressed, angry, confused, the last thing they need is an interface that worsens their current mental state.

Qwell

Qwell Counselling - Mental health software application for adults

Qwell is a software application that we designed for Xenzone. The engaging user centred has ease of use at the forefront.
Aimed at adults, Qwell provides a safe, reassuring online therapy environment run by fully trained counsellors.

Read the Qwell Case Study >

Kooth

Following a successful launch of Qwell, we were invited to redesign the hugely successful Kooth. Kooth is an award winning online counselling platform for young people. It is commissioned throughout the UK and has helped tens of thousands of young people.

At the start of the project, we held workshops and focus groups with young people in schools and it was clear that the design of Kooth wasn’t engaging with the target audience. They knew what they liked, what they needed, what was cool and so with their input we designed a much more youthful, fun, simple, engaging platform that met with both their requirements and the clients.

Excitedly, our redesign of Kooth will be launched later this month. We can’t wait to show it to you and tell you all about it, so be sure to check back soon!