Create Navigable Site Mockups With ClickDummy

One of the most important aspects of website and app design is flow – how a user navigates and goes through the process that the site/app is built for. It’s very important to properly close the loops on all navigation and actions. For example, if you’re building an online store, there should be a simple path for a shopper to get from your homepage to the checkout completion page, without getting lost or confused along the way. And when you’re working in a team with clients to report to, it’s crucial that everyone knows where each step takes a user, how one can move back and forth in the site/app and how processes (like placing orders or filling out forms) start and end.

ClickDummy can help you with that. This app allows you to share screenshots of each page/step of your project and link them together as intended in its final form. So if you need to show your clients how their upcoming web store ordering process will work, or you need to demonstrate to a designer how you intend for people to go through your site, ClickDummy can help you put together a clickable demo in minutes.

Overview

Here’s how ClickDummy works: you upload screenshots of your project, link them together as you would real pages of a website, and allow your clients/team members to navigate through it, clicking on links, viewing pages and commenting on highlighted areas as they go. The app is dead-simple to use and does the one thing it advertises extremely well. It’s built by the master developers at Skookum Digital Works and is free to use. The interface is well-designed and very easy to get used to.

Getting started

ClickDummy implements a really short registration process which is not only nifty for you but great for when you want to invite collaborators (team members) and viewers (clients). Once you sign up, you can kick things off by creating a project and uploading all the mockups/screenshots of your project. While the app is great for creating mockups of your own projects, it’s also perfect for explaining and pointing out merits and demerits of process flows from other sites. To try it out, I uploaded screenshots of my existing website and blog and showed it to a couple of friends so they could give me feedback on the navigation and page layouts. It’s a good idea to name your screenshots descriptively so you know just by looking at the file names which page is which, so that linking pages becomes easy.

Using ClickDummy

Once you’ve named and uploaded your screenshots, set any one page as the homepage from the list and begin linking pages together, starting from the homepage. In my case, I uploaded screenshots of my photography portfolio, linked an image thumbnail to a lightbox view with the full-size image, and also linked to an image detail page, the About page, the blog homepage and a post within the blog. I also linked back to the home pages and other pages from each of the ones I linked to first. Linking is achieved by drawing a box around the clickable area (such as a button, link or image) on the screenshot and then selecting the page to link to. You can try navigating through my demo by clicking here to sign up as a viewer – feel free to try commenting as well.

Apart from linking pages, you can also add comments anywhere on the page by drawing a box around the area you want to bring to your audience’s attention and then typing in a comment. Once your project is ready to go, you can invite people to view it by sending out the private link ClickDummy generates for you, via email, social networks or IM. You can also invite collaborators (via email from the app itself), who can not only view your project but also edit and remove pages. Collaborators and viewers can comment on your pages and you can reply to them as well. You can disable sharing of your project and remove collaboration rights at any time from the control panel.

ClickDummy also allows you to view all the comments made by people on your project all in one place, from which you can head to view individual page that has received comments. There’s also an option to customize the background with a color or image that you upload. One thing to note here is that ClickDummy is fairly limited in its feature set – the only kind of feedback you can get is in the form of comments, and the same goes for your responses. You also can’t create sketches of pages or add smaller images (UI elements such as modal windows, tooltips, etc.) from within the app – you’ll have to have screenshots of every single step you want to show your audience. That being said, ClickDummy doesn’t really feel like it’s short on features – it’s just how this app works.

Conclusion

ClickDummy does one thing really well – create clickable mockups of your site/app quickly and easily. The interface is great and takes no time at all to learn. It’s also easy for clients and co-workers to use even if they haven’t ever used a similar app in the past. Plus it’s free. If you’re in the business of building websites and apps, this is definitely a great tool to have in your arsenal and will bring you one step closer towards clearer communication about how your projects are supposed to work. I highly recommend you try it and incorporate it into your workflow.