So you’ve got a great idea for a new app. You pull out some napkins or open a drawing app on your phone, and sketch out some rough ideas. Your next hit app is already taking shape, and in your mind’s eye, you can see it running in action. You can see yourself looking over people’s shoulders at coffee shops and smiling, knowing they’re using your app. But first, you’ve got to make sure you’re not the only one thinking your design makes sense. And shuffling through random pictures or napkin drawings isn’t the best way for people to get a feel for how an app will work.
What you need is a simple way to turn your images into a clickable demo that feels like using a real app, without you needing to write a single line of code. Solidify is a new private release app from ZURB that makes this as easy as uploading your images, adding clickable areas, and sharing a link. Now, even snapshots of your napkin-drawn app ideas could become live demos!
Creating Live Mockups Shouldn’t be Hard
There’s actually quite a few ways you can make a live mockup of your apps that let users click through them. There’s various hacks to use PowerPoint and Keynote to make clickable demos, but they can be cumbersome to put together, and it’s impossible to know how users clicked through the interface without sitting behind them or videoing their screen. What you need is a way to take your interface designs, turn the areas that should be clickable into links, connect those links to a design of the screen that should open, and get a record of how users clicked through your app idea.
That is exactly what Solidify does. It doesn’t let you create interface designs; you’ve likely already done that in Photoshop or on a napkin, or could quickly throw together an interface in any image editor (or even Keynote). What it does is lets you add those images, link them together, share the finished design with others, and automatically get a record of how they clicked through the interface. It’s focused and simple like ZURB’s other apps, letting you get the feedback you need so you can get to work making the actual app instead of a demo.
Solidify right now is in private release, but you can enter your email on their site to get an early invite. Once you’ve created an account, getting started creating a clickable interface demo is simple. Just upload the pictures you want to use, and they’ll be instantly uploaded right on that page where you can add names to each screen and save your initial design files to Solidify.
Upload and name your images directly
Now, all you’ll need to do is drag the images in the order you want, and add clickable areas to the buttons, links, and other usable parts of the interface. Just click on your image and drag to add a clickable area, then choose the other screen image that this button or link should go to. Once you’ve added all of the clickable areas to your first image, move on to the next ones in the bottom drawer, and keep adding the links you need. Simple design will only take minutes to link, while more complex ones might take longer. Either way, though, it’s much easier than linking pages by hand with code or in a presentation tool.
You can also select to have a clickable area be pinned to all pages; this way, you could, say, add a clickable Home button that goes back to the first screen of your design by just adding it to one image and then selecting Pin to All Pages. You could also make a hover area from the second option, which will jump to the next design whenever users hover over that part of the app design.
Add clickable areas and link them to your other screens quickly
Get the Exact Feedback You Want
Now, all you’ll have to do is choose what kind of feedback you want. Just like ZURB’s other apps designed for getting feedback, Solidify lets you get as much or as little feedback as you want. By default, Solidify will save a click flow showing exactly how people stepped through your app. You can also choose to let people add comments to each scene and at the end of the demo, or you could write your own instructions on each scene and let people comment as well. Then, you can choose to show the clickable areas, or hide them by default to see how users really click through the demo on their own. Finally, you can pick if you want your design and feedback to be public or private. Name and add a description to your design, and you’re all done.
Choose the exact feedback you want
Your Designs, in the Wild
All you need to do now is share the link of your design with your colleagues, friends, or anyone else you want. Your testers can quickly click through the interface, just like they were really using the app. Of course, it’s just the interface pictures you originally made, but with links to your other design screens, people can feel like they’re really going through the app and you can see if it’s easy enough to know how to use your app idea. Best of all, Solidify works great from touch-centric browsers as well, so you could use it to test our mobile app ideas and have you colleagues send feedback on the go.
Users can click through your interface design just like it's already a real app
Back in your own dashboard, your feedback will be accumulating to make it easy for you to know how good your design’s working. You can see average views and the screens most people clicked on from the summary, or can dive into the exact click flow from individual viewers from the Testers page. This makes it easy to go through and see how people found your interface, where they got confused, and if they could reasonably complete the tasks you’d expect within a reasonable amount of time. ZURB themselves used it to get feedback on designs for their Notable app, and was able to see exactly how many users figured it out and how long it took most people to get through the design. That’s valuable info to know, since every software developer should strive to help their users work as efficiently as possible.
See exactly how people went through your design
Conclusion
If you’ve needing a simple way to make clickable app prototypes from image designs you’ve sketched up, Solidify just might be the app you’ve been looking for. It might not be the best tool for making, say, a mockup of the entire Photoshop CS6 interface, as you’d have to keep all the interactions in your head as you’re adding links and there’s no way to layout interactions in the way you might in an animations program.
But you know what? That’s not what most of us need. We need focused feedback on simpler apps, or on specific tasks within a larger app, and Solidify is perfect for that. You could easily, say, mockup how to use Content Aware Fill in Photoshop with Solidify to see if people can figure it out, and then use that feedback to improve it and make it more obvious (that is, if you work on the Photoshop team in Adobe). Or you could use it to mockup how to add contacts in your new mail app. Or how to throw birds in your new game.
Solidify would make it easy to get that focused feedback, and once again, ZURB has proven that a focused feature set with less options makes a more useful tool. It’s still got some rough edges, as should be expected for a pre-release app, but overall, it’s a great example of how easy it should be to make a live clickable design. Suddenly, I want to go start designing interfaces!
