Give Mockup presentations on your iPad/iPhone with Link Viewer

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 has been written 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.

Your project should be final at this point.

  • Download the Link Viewer App.
  • 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'
  • Enjoy!

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.

Remote Use

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.

Rapid Prototyping

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.

Advanced Features

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

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 hello@link-viewer.com

Eileen and Max
Link Viewer Team
http://link-viewer.maxmondon.de/

Comments (5)

  1. No scrolling? How do you do when you’ve go a large website prototype?

  2. @Miguel: Current Link Viewer works best with same-size-slides (like in most app mockups).

    We deactivate scrolling because it makes pages jiggle when touching the screen. Thats not nice.

    Right now we look at the slide measurements and detect orientation from it. Actually it’s quite difficult to detect pages that should be scolled VS. pages that shouldn’t be scrolled but fitted into the screen area. If we come up with a solution that works flawlessly we’ll let you know!

    Thanks for your input, it helps us to make LV better :-)

    Best,
    Max

  3. like http://www.invisionapp.com/ – works with scrolling!
    you only have to build the links again…but thats fine for me

  4. Do you have any similar solutions for Android?

  5. Hi Martha, if there is enough demand for an Android version of Link Viewer, we might consider a port. Like with all requests, we collect votes on our support page: http://linkviewer.uservoice.com/forums/211741-link-viewer-feature-requests/suggestions/4108549-create-an-android-version-of-link-viewer

    The more votes we get on this, the more likely it will become a reality.

    Thanks for your intrest! Best, Max

Leave a Comment

Your email is never published nor shared.