If your website is a responsive one, you might be wondering how Usabilla can collect feedback on your mobile website. In this guide we will explain how Usabilla for Websites works on mobile devices. We will discuss the implementation of Usabilla for Websites on a responsive website and follow with some best practices.
A mobile-friendly website
A Usabilla for Websites account
Basic knowledge about passive and active feedback
When implementing Usabilla for Websites, we always start with a feedback button. If your website is a responsive one, you will create two feedback buttons in your account; one for desktop and one for mobile devices. The feedback forms can be identical, or you can apply minor changes to your mobile feedback buttons.
Tip Use the "Copy form from" method to automatically copy your questions and your design from your desktop form to the mobile one.
Once you set up both of your buttons, it's time to reach out to your Customer Success Manager. They can provide you with a special Usabilla Combicode. When you use this Combicode, Usabilla will detect the user's device and automatically show the right button on the right device. Also, when using the Combicode, your active survey Campaigns will be segmented per device.
2. Feedback Buttons and Forms
Since mobile screens are significantly smaller, we recommend you to use a smaller feedback button design for your mobile button. The common size for a mobile button consists of a length of 75px and a width/height of 25 px. To avoid content being covered by the button on the sides, we recommend you to position your mobile button at the bottom of the screen. The screenshot below shows you the most common positioning and size of a mobile feedback button. Once you decided on a design for your feedback button, it's time to upload your feedback button to your account.
Feedback form design
Usabilla feedback forms are responsive and automatically scale according to the screen-size. This means that you can apply the same feedback form design for mobile and desktop devices. We do recommend you to use a font size of at least 16 px in your mobile form, to ensure that the mobile browser does not zoom in when a user selects an input field. Reach out to your Customer Success Manager in order to add a theme with the right font-size to your account.
Feedback form questions
When creating a feedback form for your mobile users, it's important to keep in mind that mobile users have smaller screens and they might find it harder to select specific elements on your website. In order to make leaving a feedback a pleasant experience, we recommend the following best practices:
- Limit the amount of questions in your form to the absolute minimum. A simple form with a mood rating question and an open comment field will do the trick.
- Don't ask your users to select specific elements on your page. Only collect the generic, full-page screenshot instead. Instructions for setting your feedback form to "only generic feedback" are available here.
3. Using the right Campaigns
While collecting passive feedback on mobile is very similar to active feedback, there are some things that need to be taken into account when using active campaigns on mobile. In this section we will run through the design and targeting of a mobile survey. If you are using Usabilla on a responsive website, you will need to use two surveys; one for desktop and one for mobile.
Mobile campaigns should always be run in a Full Survey format. Due to the limited space on mobile screens, slide-out surveys do not provide the same friendly experience as they do on desktop. This means that you will have to be a bit more careful about when and where you are going to show this Full Survey to your mobile users.
In general, mobile users are as - if not more - willing to answer a few questions during their visit. However, do keep in mind that mobile users operate on a smaller screen and that using their keyboard might not be as convenient for them. Therefore it's important to limit the amount of open questions to the ones that are absolutely necessary.
Instead of using open text questions, think of using checkboxes, drop downs or radio buttons. You can always add an "other" option which will allow the user to add extra input.
Mobile campaigns work with the same targeting options as desktop, with one exception. On mobile devices you will not be able to use the targeting option "potentially leaving the page after X seconds". This targeting option is based on a mouse-out movement, which is not available on mobile devices.
Once you followed these steps, you are ready to collect feedback from your mobile users. Any questions? Don't hesitate to reach out to our friendly support team.