Hello Balsamiq friends! Today we asked Eileen and Max of Link Viewer to write up a blog post introducing their app for testing iOS Mockups. Enjoy!
Presenting your UX concept to your client is a crucial moment in product development. In this post I want to talk about how Balsamiq Mockups and our own Link Viewer App can help you make a great impression.
A lot hasbeenwritten on why wireframes and sketched interfaces are a good idea when communicating with your client. We use myBalsamiq on a day-to-day basis for user interface design @ Mondon Design for that matter. When Peldi asked us to talk about how we present them we were thrilled – to say the least.
First let me remind you of a common problem:
Users Break Prototypes
Giving a flawless mockup presentation on the real device is tricky, especially when we want to hand over our iPad to a client or to a test user. They tend to break the prototype. Viewer menus pop up, accidential swipes will switch pages, things don't work... you get the point.
Instead you need an app that will present the prototype and not stand between it and the user. The app should be as invisible ("chromeless") as possible and let users navigate via links inside the mockup.
Less Is More
To give a smooth mockup presentation, you want:
✘ no loading screens
✘ no menus or status bars
✘ no third party branding inside the app
✘ no funky transitions between slides
✘ no tap zones
✘ no zoom or rotation
✘ no scrolling or swiping
✘ no distractions
✘ no prototype editing
✔ navigation with linked elements only
We did not find an app that could fulfill these expectations so we made our own, Link Viewer.
It works with any hyperlinked PDFs, like the ones that Balsamiq exports.
The Mockups feel solid like a real app, nothing can go wrong while navigating them.
Presenting Without Distractions
One great thing about Balsamiq Mockups is that they just work. With Link Viewer this was our top priority, too. We made a short video to show how quickly you can get your bullet-proof presentation:
Step by Step from myBalsamiq to Link Viewer
If you use myBalsamiq, your can do everything right on your iOS device.
In iOS Safari, open your myBalsamiq 'All Projects' page.
Tap the project dropdown (cog icon), select 'Export to PDF...'
In the export dialog, select 'Optimize for viewing' and tap 'Export PDF'
Tap 'Open In…' and select 'Link Viewer'
Now your mockup is launched every time you tap on the Link Viewer app icon.
1. On iOS device find your project in myBalsamiq
2. Tap the project action menu and Export to PDF
3. Set PDF Export options
4. Open in Link Viewer
5. View your Mockups in Link Viewer
Offline Use with Balsamiq Mockups
There are several ways to get your mockup into Link Viewer. The important step is to create a PDF that has link functionality. Then connect your iOS device via USB and it will show up in iTunes (PC/Mac). In iTunes (PC/Mac), navigate to the Apps section of your device and scroll down until you see the Link Viewer icon. Click it and drag your PDF into the list area on the right.
It might be that you have no access to the target iPhone/iPad. A tester may be on the road or a client far away. Let them download Link Viewer. Create your mockup PDF and email it to them. Once they open the email on their device and click the PDF, they will be able to select "open in… Link Viewer". With the factory settings, Link Viewer will always display the last PDF that was imported.
If you keep the myBalsamiq tab open on your iPad you can generate new mockup PDFs for Link Viewer real quick. The same goes for offline use via USB cable: new PDFs can be uploaded very fast. With myBalsamiq and Link Viewer you have new presentations at hand in no time.
The factory settings make sure that Link Viewer will work right out of the box. However, if you need a file-list to select and delete files or use the resume-from-last-page feature, check out the Link Viewer settings in the iOS settings app.
Thanks to Balsamiq for their mockup tools. We couldn't work without them. Now Link Viewer is our little contribution to the happy UX landscape. If you have any questions or feature requests please email email@example.com
Testing prototypes and wireframes with unmoderated remote usability testing tools is not only cost-effective, but timesaving as well. These are very important considerations for any designer - especially if he/she is designing on an agile timeline.
In this article, we will show you how to test your myBalsamiq prototypes with UserZoom, an “all-in-one” solution for remote user experience research. Whether your prototype is “skin-and-bones” or high fidelity, testing with UserZoom is a breeze.
Most of the UserZoom remote unmoderated studies consist of the following: a welcome screen, an initial survey-like questionnaire, tasks with branching logic (the heart of the study), validation and final questionnaire. Let’s break this process into 5 easy steps. We’ll be using a Kayak prototype for the illustration purposes:
First, you have to create your mockup in myBalsamiq and link all the pages in order to create a clickable prototype. Then, click on the Launch Prototype arrow, which is just below the New Mockup button.
After launching the prototype, you will see the URL of your project in a new window. This is the URL that you need for creating a study in UserZoom.
2. Create a study in UserZoom
To get started, click on Create new project. Then, select a tracking type from the dropdown menu. There are a total of three tracking options:
no tracking needed
tracking with add-on (requires participants to download an Add-on)
tracking with JS code (requires tagging webpages with JS code)
Tracking enables UserZoom to capture behavioral data, such as clickstreams and heatmaps, from participants.
Give your project a name and you are all ready to move to your remote usability study setup.
3. Setup your study
Creating the study welcome screen
Creating the Initial Questionnaire
The initial questionnaire can be used to gather demographic information and other pre-task metrics. To add a question, click the Add Question button and then choose a question type from the drop down selector.
UserZoom allows you to create screenshot click testing and screenshot timeout tasks in your initial questionnaire as well. Here is an example of a click test question that we had for the Kayak prototype.
Please click once on the page where you would go to manage your itinerary.
Creating a Navigation Task
During a navigation task, participants are provided with a goal and sent to a starting webpage. Participants are allowed to navigate freely in an attempt to complete the goal. Navigation tasks can be designed with validation (by URL or by a question) to determine whether participants are successful.
The first step when creating a navigation task is to enter the starting URL. This is the
webpage that all participants will start from. This is were you want to enter the URL of your myBalsamiq prototype.
The task description is positioned right below the Starting URL field. It is the initial mandatory page for a navigation task and should contain a full description of the task that the participants are asked to perform.
The simplified task description is used as a persistent reminder message as participants navigate.
UserZoom supports multiple task configurations to accommodate a wide range of study designs. The most commonly utilized setup involves using validation and sending participants to specific questionnaires based on task performance. By utilizing branching logic, you can setup timeout, error, abandon and success questionnaires.
UserZoom offers a total of three possible validation settings: Self-reported, Validation by question, and Validation by URL.
Self-reported validation: With self-reported validation a participant is counted as successful when they click the Success button in the UserZoom browser bar.
Validation by Question: Validation questions are choice based questions that have specific “correct answers”. A participant is counted as successful upon choosing at least one correct answer.
Validation by URL: You can assign any number of “success” URLs. When a participant is navigating through a URL validated task and if they reach a “success” URL, they will be counted as successful.
The Final Questionnaire
The final questionnaire is the last questionnaire in the study and will be shown to all the participants by default. The final questionnaire is an opportunity to gather feedback on a participant’s overall experience. To create a question in the final questionnaire click on the Add question button and select a question type from the drop down menu.
4. Recruiting participants
There are three different ways to recruit participants for a UserZoom study:
Through a panel supplier: UserZoom includes a Recruiting quote link that will connect you directly with our recruiting partners. Alternatively you can choose to work with your own preferred panel vendor.
Through a study link: UserZoom includes two types of invitation links for participant recruitment: the email distribution link and the unique link. The Email Distribution Link is a single link that can be used unlimited number of times. The Unique Link is good for a single entry into a study.
Through an intercept invitation: The intercept layer is a method used for capturing real users of a website. UserZoom can generate customizable intercept layers to appear on one or more pages of a website.
5. Analyze the results
UserZoom gathers rich user experience data and allows researchers to perform advanced analysis. Some of the metrics that you can get include effectiveness & efficiency ratios, visual clickstream paths, click heatmaps, popular words (text clouds), satisfaction & perception indicators, cluster analysis & dendograms. In addition, UserZoom’s analytics dashboard allows you to do advanced data analysis and filter results by task, page, user, and time.
￼Figure 1. Task effectiveness and efficiency
￼ ￼ Figure 2. Clickstream
￼ ￼Figure 3. Heatmap
In summary, UserZoom allows you to get really valuable user data on your myBalsamiq prototypes. All you need is the URL to your prototype and a set of tasks that you would like to test.
The importance of user testing your prototypes cannot be overemphasized. This is the point in time when critical design decisions set the stage for all that will follow. With remote unmoderated usability testing, you can collect feedback quickly and cost-effectively, which is key in agile design.