Creating software requires using tools like clickable demos and wireframes to bring a vision to life. Likewise, these tools provide a canvas upon which to refine that vision. There are many ways to make the most of these tools. Thus, we will start with a definition and then move on to how to make them work for you as a developer or a customer.

Clickable Demos and Wireframes Defined

These two ways to build and demonstrate software are so common it feels almost unnecessary to define them. However, we must be clear on how these tools work so we can make the most of the efforts involved. Along with effort, time is invested in these approaches, and we want them to be used as efficiently as possible. First, a wireframe is a drawing of some form or page of an application. It gives a sense of look-and-feel as well as user experience. A series of wireframes can be used to walk through a user story, much like a child’s picture book.

Next, we have a clickable demo. This is sort of the next evolution of a wireframe. In this case, we have forms and pages that are “live” enough to click on buttons or links and navigate through to another page. The most significant difference is that wireframes tend to be more UX-focused, while the clickable demo is more about displaying flows and actions. Think of them as form (wireframes) and function (clickable demo).

Using Them For Better Communication

We start with the most critical outcome of these tools. They provide a way to communicate the application being built amongst technical and non-technical team members. We get to see what it will look like or at least closer to it than words on a page. Even drawn images will differ from how they look on a computer screen. These tools take us through the process of building the interface (and potentially navigation) and then provide a way to share it with others. Better yet, we end up with something people can refer to for edits and additions that are more concrete than a few sentences in a document. Those pictures are worth at least a thousand words.

Try Before You Buy

One effect of using clickable demos and wireframes is that users see the result in action. While it is imperfect because performance and similar issues can arise, it still shows details a vision does not. I am amazed at how often these tools lead to minor or even drastic changes to the user experience or features available. The users get a form of “try before you buy” in that they can see it working to some extent. In any case, a greater degree than a document shows.

User Error and Developer Assumptions

The testing portion of application development can also take a long time. There are user errors that were never conceived and developer assumptions that show up only once the solution is in use. Even regular product demonstrations can suffer from these afflictions as demos tend to be scripted and controlled. It is not the same as putting it in the hands of users. That is where a clickable demo can provide a ton of value. A user can be asked to “drive” a demo or be allowed to use it on their own time. I highly recommend this as part of any clickable demo strategy. Set it up so users can spend time with it and click around to assess it. You will be amazed by what they uncover and the feedback they provide.

Follow The Rabbit Trails

Happy path testing is the name for testing a system using pristine data and flawless navigation. This has its value but doesn’t do much to uncover bugs. The best testing comes when users try a different approach. Use this to your advantage while showing off a wireframe or clickable demo. You can ask several questions during the demo to chase down those details and potential bugs.

• Is there anything missing from this process?
• How quickly do you expect this action to respond?
• If this action fails, how would you expect to be notified?
• What are some ways you can see this action failing?
• Does this make sense, or would you prefer a different path to trigger the action?
• Is this an action someone in the room typically does? Or do we need to contact another person to serve as a subject matter expert?
• Look closely at the data on the screen. Does it provide what you need to perform your job?

Craft The Story

While there are many good ways to use these tools, the best is to make your user stories come alive. These present a solution far better than even the prettiest and most detailed user stories. There is nothing wrong with them. It is just that visual examples remove a lot of ambiguity while clarifying communication. Make them a part of validating user stories and designing them in partnership with customers and users. The user stories almost become the script you walk through using the wireframes and clickable demos. If they do not match up or users get confused, you know you have changes to make.

Next Steps

Feel free to schedule a time to discuss your next project with us. Every project we work on includes demos and similar discussions regularly. We build clickable demos and use wireframes as applicable to ensure the team has the best tools for discussing the solution and vision. Likewise, those include a release our customers can use to test the features further and get comfortable with the solution. We are happy to help you with investing in requirements and improving the overall success rate of software projects. 

Our experience has taught us a lot about the pitfalls and challenges of custom software. Likewise, we have an e-book that can help you explore all the steps in building software, including a few templates. However, we ask that you share an e-mail address so we can send you a copy. We will add you to our monthly newsletter, but you can unsubscribe anytime. Your data is not shared with anyone else. Learn more about our book here.