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.

Uploading pages (screenshots) to ClickDummy

Uploading pages (screenshots) to ClickDummy

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.

Page options on ClickDummy

Page options on ClickDummy

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.

ClickDummy's page editing mode

ClickDummy's page editing mode

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.

Commenting on a page

Commenting on a page

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.

Replying to a comment

Replying to a comment

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.


Summary

ClickDummy helps you create clickable mockups and get feedback fast.

10
  • http://juanvaamonde.com Juan

    Brilliant! I’ve been looking for a free, high-quality, clickable mockup app ever since Invision dropped their free plan. Shall definitely check it out.

  • http://skookum.com Jim Snodgrass

    Thanks for the great review! I’m the lead developer on the product at Skookum Digital Works and we are actually working on some great new features and some redesigned UI pieces right now. I love hearing great feedback, so feel free to send me an email with any suggestions or features you would like to see.

    I’ll also keep an eye on these comments for anything that gets brought up.

    Jim Snodgrass
    Skookum Digital Works

  • Rick Segal

    There are a whole host of issues here that should have been pointed out by the reviewer. First, the app is free if you want your project public. This is fun for the kids but not normal for any kind of commercial app development process. The notion of a private area with collaborators being invited is good but requires you to pay for the app. Again, pay is fine, people should know this.

    Second, the premise of doing one thing and one thing really really well is fine but by that metric, the app falls short.

    First, I’m on the new UI and it is poor, at best. Add a page and then decide to delete it. You’ll go a bit nuts until you realize that deleting it is actually the option of archiving it. Fine concept but poorly executed.

    Second. The notion of wanting to have two click options -say back and forth- next to each other. You can’t size the areas for the click. Poorly done since you can drag to highlight so why not let me have a custom size as you’ve gone this far.

    Third. The notion of linking this to Balsamic. To the untrained eye, looking at the Balsamic page, you can use ClickDummy with it’s format. You can’t. You need to save your Balsamic as a PNG. Here again, as a company (SDW) touting UI expertise, the simple fix is letting somebody import the Balsamic and tell them what to do. It’s a UI and “Dummy” thing with respect this notion of doing one thing really really well.

    Fourth. The “how it flows” mode and concept doesn’t exist. Most end users or non-geeks will use a Balsamic to get it out of their head. Heck, you can use PowerPoint and save images. Fine. But the value ClickDummy could have bought to the table was the view that the customer/end user or the developer sees. I want to stand up and walk through the whole site with the “this is how it flows” mentality and unless I missed it, I get all the pages loaded up on the right and I have to essentially pretend. I might have missed something obvious which somewhat points to the whole UI is not the best comment.

    I had high hopes, paid the 5 bucks to try it in private mode. I was disappointed that a consulting firm of this quality would release this as production ready.

  • Jack Sewell

    I had exactly the same experience. I paid 5 USD to use this program in private mode, and it was so counter intuitive that I cancelled my subscription within 10 mins of using the app.
    Awful.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow