Building Clickthrough Prototypes To Support Participatory Design

Advertisement

As UX professionals, we often lead design exercises with our stakeholders, including immediate team members and external clients. In these brainstorming sessions, participants identify opportunities to improve the design, thereby aligning everyone’s vision and expectations of the project.

During such activities, teams will generate concepts as paper or whiteboard sketches. While these artifacts give a ten thousand-foot view of the emerging design, I would argue that they fall short of presenting the pieces as a whole, because they limit participants from visualizing interactivity and the system’s flow. This is where clickthrough prototypes enter the picture.

This article will look at clickthrough prototyping on the iPhone with the Prototyping on Paper1 (or POP) app. I’ll also cover how prototyping fits into participatory design and why sketching is a prerequisite. My goal is to introduce the tool, share my prototyping experience and discuss competitors. To illustrate the app’s functionality, I’ve designed a simple mobile Web experience for a hypothetical news website (you can find the link at the end of this article). Let’s explore POP!

The Importance Of Prototyping

Wireframes are ineffective at capturing dynamic elements such as flow, interaction and animation, and participants are forced to digest tens, if not hundreds, of PDF pages. Todd Warfel mentions in Prototyping: A Practitioner’s Guide2 that prototyping adds collaboration to a project. I would add that prototyping breathes life into a design, giving it direction. Its iterative nature enables us to accelerate testing of multiple concepts, so that the best design survives the many rounds of brainstorming.

Prototyping can be done with a variety of techniques and tools, some purpose-built and others adopted out of necessity. In his book Sketching User Experiences: The Workbook433, Bill Buxton does a great job of explaining prototyping techniques in the context of sketching, both on paper and digitally. Prototyping also comes in different levels of interactive fidelity: sketching and paper mockups will evolve into clickthrough prototypes, which will graduate into high-fidelity prototypes with complex event models. For an in-depth classification of prototyping tools, consult Ritch Macefield’s article “Are You Still Using Earlier Generation Prototyping Tools?4

Prototyping tools5
A sample prototyping toolkit of a UX practitioner. Large View6.

High-Fidelity Prototypes Fall Short

Participatory design is fast, with many interruptions. Individuals present their ideas, opinions are flying high, and designs are constantly modified. So, it is safe to ask how prototyping can be used efficiently to capture the conceptual designs that are created. Are high-fidelity prototypes the answer?

High-fidelity prototypes require up-front planning, intimate knowledge of the software’s inner workings and expertise in best practices, which are obstacles for technologically unsavvy participants. The greater the complexity, the more time and money is required to implement structural changes. Updating a complicated prototype during a participatory design process can be a nightmare. Instead, by using simpler prototypes that rely on clickthrough experiences, we can with little effort stitch together the sketches generated from brainstorming sessions, helping to more clearly communicate the design concepts.

Clickthrough Prototypes Are The Answer

Many UX design applications support it, but what exactly is a clickthrough prototype? A clickthrough prototype links multiple screens via hotspots (a hotspot is a screen area that, once interacted with via a click or tap, redirects the user to the target screen). A screen may have hotspots to multiple other screens, allowing you to put together complicated flows without having to focus on interactivity.

There are two types of clickthrough prototypes. In the first (the focus of this article), photographs of whiteboards or paper templates are loaded into the prototyping software and then linked together. The second reproduces the same sketches using interactive software widgets, with built-in UI interactivity (for example, swipe detection, form customization, etc.). A good example of this is the Interface327 app by LessCode8 (available for iPhone and iPad).

Example of clickthrough prototype9
This example of the second type of clickthrough prototype illustrates hotspot linking. Large View10.

Sketch Ideas First

Before digitizing our prototypes with POP, we need to sketch first. Sketching is necessary for clickthrough prototyping because it helps to organize the prototype and provides linkable assets. In participatory design, sketches record site maps, UI screens, user journeys and other early artifacts that form the project. Sketching has no technical barrier to entry, and even the least experienced person can learn to communicate visually in this way. It also frees you from having to rework clickthrough prototypes in a few ways: first, by creating modifiable throwaway assets; secondly, by generating many ideas; and thirdly, by enabling participants to expand on each other’s ideas.

I have been exposed to three approaches to sketching, and each has a place in the UX arsenal:

  • whiteboard sketching as a team,
  • capturing ideas individually via paper templates,
  • brainstorming with a mobile application.

Approaches To Participatory Design Sketching

Whiteboarding

Smart whiteboards, such as eno11, facilitate collaboration between local team members and geographically distributed resources. Assets can be saved as digital images and redistributed after a meeting. Non-digital whiteboards are fairly affordable; dry-erase sheet tape by GOwrite12 turns any surface into a whiteboard. While the equipment is inexpensive, it requires considerable space and, thus, is best suited to group meetings.

Example of whiteboard sketches13
This eno smart whiteboard shows sketched mobile designs. Large view14.

Paper Templates

Individual paper templates are most appropriate when groupthink needs to be avoided during idea generation. Paper templates offer portability, which is helpful for organizing screens into flows and for prioritization activities. These paper designs are easily reproducible via a photocopy machine, which facilitates reusability and annotation. This approach comes with almost no cost because most templates are free PDF files (see the iPhone 5 sketching templates in the “Useful Resources” section at the end of this article) and the drawing supplies are inexpensive. Designs may be digitized via a camera or scanner, though, which is time-consuming.

15Example of paper sketches
Paper templates are available for every platform. Illustrated here is the iPhone 5 template by UI Stencils16. Large view17.

Sketching on Phone

The least common approach is to sketch directly on a phone. Human input is not ideal for digital drawing, given the large surface area of a fingertip. Therefore, to improve precision, a capacitative touch stylus, such as Jot Pro3318 ($30), is a must-have. Before you digitally sketch, consider a few things. How will the sketches be exported? Secondly, are you targeting a particular resolution? Thirdly, how much collaboration is required. No digitization is required, but it comes at a cost: All participants must have a smartphone and stylus. Additionally, an app such as SketchBook Pro3719 ($1) must be loaded onto the devices.

Example of stylus input20
A stylus works on clear cases, but for best results remove the protective cover. Large view21.

Sketching is low cost, quick to digitize and easily reproducible, making it the perfect way to create the building blocks of clickthrough prototypes on mobile devices and tablets. Let’s see how sketches can be used to build interactive flows on the iPhone using POP.

Sketch-Based Clickthrough Prototypes With POP

Let’s say that we’ve sketched some mobile Web designs in a group brainstorming session. Now, we want to link them together without having to fire up a complicated tool such as Axure. How do we do that? Using POP.

POP is an iOS and Android application that enables you to link together paper designs into an interactive clickthrough prototype. Currently, it is free, and users get between 5 and 20 projects at no charge. According to the application’s developer, Woomoo22, paid plans are coming, but no information is available yet.

POP plan information
Sharing POP with your social networks increases your chance of being able to create more projects.

To use POP, create an account with an email address. The account is required to store prototypes on Woomoo’s servers and to add other POP members to a project (more on that later).

Create A Project

Identify which paths of the experience to capture and which controls to enable for navigating these paths. Address these issues while sketching in the brainstorming session, which in turn will streamline the process of building the prototype in POP.

Creating a new project container is the first step. Click the “+” icon in the menu bar of the “Projects” screen to enter the project’s information. Creating the project’s container will update the number of existing projects in the menu bar. You can edit an existing project via the “Edit” button in the header; a project may be removed or its information may be modified by changing the project’s picture, adding members, etc. Additionally, you can control which type of projects to display. In my experience, this option comes in handy when searching for a particular project in a long list of entries. To do so, click on the “Projects” dropdown menu, which allows you to filter by “All Projects,” “Favorites” or “Shared Projects.”

POP project list
This screen shows a list of existing projects.

Enter information about the project, such as name and visibility status, on this screen. Private prototypes are viewable only by POP users who have been invited to the project, while public ones, as you would expect, are viewable by anyone.

POP project list
By default, new projects are set to “public.”

Load The Sketches

Once you’ve created the project’s container, add the visual assets that will be linked together. This is an iterative process. You can either snap a picture of a sketch using the camera icon (the first option in the menu bar) or load a sketch that already exists on the device using the landscape icon (the second option in the menu bar). If you opt to load pictures, do it in one sitting and in the order of the navigation flow, which will help later on with identifying assets for linking targets.

POP capturing an image
No sketches have been loaded in the project yet.

Once the image has been aligned in the frame, you can capture it with the red button. “B&W” toggles grayscale mode, in case you need to present the clickthrough prototype without much styling.

POP taking a new image
Use good lighting and steady your arm to get clear pictures.

Save the new photograph, or retake it to correct alignment or blurriness. Make sure your paper templates match the resolution of the target device, which will save you from having to extensively adjust the picture’s size. If the picture does not fit perfectly, that’s fine, as long as the main UI components have been captured.

POP capturing image
Resizing helps you to capture the navigation and other UI controls.

If you have already taken pictures of the sketches (say, via the default Camera application), you can load these images directly. Choose the relevant loading option to see existing image albums and the separate “Paper Screens” album for POP images.

POP loading an existing image
The top entry is always the device’s album, which contains all available pictures.

Add Hotspots

Next, add interactivity to link the screen images. Access each screen individually, and create hotspots over the relevant UI areas. Tap the “+” icon in the menu bar to create a red hotspot, which can then be removed or linked to a screen.

POP loading an existing image
The menu bar bubble icon enables you to enter notes and a title for the screen.

Tap the “Link to” option to select a target screen. Hotspots are not conditional: You cannot link the same hotspot to multiple screens based on events specified in the UI flow. POP currently offers no such feature. However, the application supports a list of built-in transitions, as seen in the menu bar of the “Link to” screen. These will help you to simulate the intended user experience. “None” is selected by default.

POP loading an existing image
Swipe the menu bar left and right the explore the list of available transitions.

Once a hotspot has been linked to a screen, it will change to green, indicating that it is active. You may freely move a hotspot by tapping and holding on the main area of the hotspot. Additionally, you can resize it in any direction using one of the four dot handles. This will help you to adjust the mask size for the necessary UI controls, giving you more flexibility.

Existing hotspots have a “Copy” option, which is useful for duplicating hotspots of similarly sized UI controls. There is no method for varying the depth of hotspots (on the z-axis). The most recently created hotspot will always be placed on top. As a best practice, avoid stacking hotspots, or else they will mask one another, which will require you to troubleshoot a lot to identify broken interactions!

Play The Prototype

POP loading an existing image
The “play” icon starts the demo of the prototype from the current screen.

Once all screen sketches have been linked with the appropriate hotspots, the prototype is ready for testing. Play the prototype before exporting to troubleshoot any problems (for example, hotspot links to incorrect screens, wrong hotspot sizes or positions, missing hotspots, etc.).

Play the prototype from either the main project screen or any individual screen. Either way, the “play” icon will be located in the menu bar. Tap the icon to launch the prototype in full screen. Tap the hotspots to load the linked screens using the specified transitions. If you tap on the screen away from any hotspot, then the application will briefly highlight all of the available hotspots on the screen.

POP playing prototype demo
Full-screen mode eliminates POP’s chrome, showing only the sketches.

POP does not include target information in the hotspots (such as screen names), so as a best practice, if you are demoing the prototype to others, become familiar enough with the flows to avoid presentation problems. At the moment, POP gives no instructions on how to quit playing the prototype. This information is hidden in the application’s FAQ section, under the “Help” menu item, which is cumbersome to locate. Let me save you the trouble of finding it: To exit playing mode, press the iPhone’s volume down key. Pressing the volume up key allows the viewer to add comments to the current screen.

POP adding a comment to a screen
If a project is shared with other members, they can add comments here.

Distribution Options

Once you’ve verified that the clickthrough prototype works correctly, you will be ready to distribute it. You have several options, which are accessible by tapping on the arrow icon on the project container screen (the last item in the menu bar).

Completed POP clickthrough prototype
If many images exist, you can scroll vertically to access additional entries.

The first option is to send an email. Selecting this option will create an email draft, with a link to the POP prototype on Woomoo’s servers. Because adding the recipients is your responsibility, try to add their information to your device’s contact app beforehand, or at least have the information on hand. Once they have received the email, the recipient may access the prototype either on a mobile device or a computer. If they’re accessing on a mobile device, such as an iPhone, then they can view the prototype in the browser or add a shortcut to it on the home screen. The email method works best if you are sharing the prototype with people outside of the participatory design session.

Exporting POP prototype via email
The email includes a link to POP’s website.

The next option is to share over a social network. POP offers Facebook and Twitter. You can publicly broadcast a message on a social network with a link to the prototype (POP must be granted access to the social network’s application). I have not found a good use for this option because most of my work is proprietary and has to stay in-house. Depending on your team’s culture and the project’s needs, this option might be worth exploring, but check with the project manager first!

Exporting POP prototype to a social network
Share your project in either a Twitter or Facebook post.

Lastly, you can share the prototype with other POP members by adding them to your list of approved viewers. This is useful if you are working on a large team of designers who also use POP. Click the “+” icon to search for members in POP’s network. This approach is handy if many of the participants in the design process have POP already loaded on their mobile device. However, the burden is on them to create a POP account in order to view the prototype.

Exporting POP prototype to a social network
Search results include matches of first and last names.

While not a distribution method per se, one last method enables you to show a prototype to participants in a design session, by loading it in a Web page on a computer connected to a projector. Additionally, you can use Reflector23 (an app that uses the AirPlay protocol to stream data from an iOS device to a computer) to mirror your phone’s screen onto a desktop computer that is connected to a projector. For more information on using Reflector, visit the application’s website.

Related Solutions

POP is not the only tool that supports the creation of clickthrough prototypes from paper sketches. More applications are becoming available on the iPhone. Below are the two most robust competitors to POP.

Launch

Launch24 has a free single-project plan as well as paid monthly plans25 for both Android and iPhone. It shares many of POP’s features, including screen transitions, exporting and feedback capabilities. Additionally, the app enables designers to use Dropbox pictures, as well as to specify the target device. Launch is very new (released in February 2014), so it will be interesting to see how it performs against POP going forward.

Protosketch

UI Stencils offers Protosketch26 for iPhone ($4.99), which has comparable functionality. While a complete discussion of this tool is beyond this article’s scope, suffice it to say that POP currently has richer functionality. At the time of writing, Protosketch does not support transitions and has fewer distribution options. Despite these limitations, Protosketch is a great tool that can be used to build iOS experiences designed on the company’s paper templates.

Takeaways

Pros of POP

  • Short learning curve
  • Multi-platform support
  • Leverages the device’s camera to capture sketches
  • Offers rich transition and exporting options

Cons of POP

  • Event model is limited to a single tap
  • Complex prototypes are harder to maintain due to large number of images
  • Variations require separate images because dynamic states are not supported
  • A separate image of a common design element (such as top navigation) cannot be used in multiple screen sketches as a master module
  • Application is young and has room to grow feature-wise

Closing Thoughts

POP is best suited for capturing the flow and overall organization of a design concept, not for illustrating detailed interaction. Furthermore, the tool’s ease of use enables UX designers to deliver clickthrough prototypes quickly in participatory design sessions, making it a valuable addition to any design toolkit. I hope you find this little application to be useful. Give it a try, and happy prototyping!

Useful Resources

Example used in this article:

  • Test Project27, POP
    A cloud-based demo of a clickthrough prototype made with POP

iPhone 5 paper templates:

Apps discussed in this article:

Prototyping:

Sketching:

(al, ml)

↑ Back to topShare on Twitter

Svetlin Denkov is a UX Prototyper at GN ReSound in Chicago, where he builds highly interactive prototypes for mobile and tablet devices using different technologies. He has a Master’s Degree in HCI from DePaul University. Svetlin is also a leader at Chicago's chapter of IxDA which introduces technology events to the local UX community monthly. You can follow him on Twitter, where he posts on UX, Innovation, and Technology. You can also contact him via LinkedIn.

  1. 1

    Appreciate if you have numpties for clients, a set of clickable wireframes will help. And this is probably the case most of the time.

    But if everyone has digital acumen, knows the direction of a project and agrees on the approach, wireframes that follow best practice and lead you through an intuitive userflow don’t need to be clickable. It’s overkill. 30min stepping stakeholders through a set of frames is a significantly more cost-effective approach.

    1
    • 2

      Bill, thank you for your comment. I agree that the approach needed is dependent on the technological competency of our stakeholders. What I am proposing in my article is to use POP to visualize flows in early conceptual work where both designers and stakeholders come together to ideate and not for complete product designs. For the latter, a stack of wireframes may be adequate depending on the budget, timeline and company culture.

      However, I would argue that event the most tech savvy individuals will have trouble following detailed wireframes if they have little previous background on the projects. Then for detailed product designs there is value of using clickable prototypes (not necessarily POP but using higher-fidelity tools instead). These are capable of filling the gaps in background knowledge by using animation, which in my opinion is a powerful communication medium.

      0
    • 3

      “High-fidelity prototypes require up-front planning, intimate knowledge of the software’s inner workings and expertise in best practices, which are obstacles for technologically unsavvy participants. The greater the complexity, the more time and money is required to implement structural changes. Updating a complicated prototype during a participatory design process can be a nightmare. Instead, by using simpler prototypes that rely on clickthrough experiences, we can with little effort stitch together the sketches generated from brainstorming sessions, helping to more clearly communicate the design concepts.”

      Don’t agree in the slightest. In fact, I can prove you’re wrong when my post on this exact subject and why High-fidelity prototypes are right gets published.

      0
      • 4

        Thanks for your comment! Andy, maybe I should clarify that when I speak of fidelity, I am referring to interactive fidelity and not visual fidelity. Visual fidelity is a separate discussion on its own. Having said this, it is likely that you and I have different experiences when it comes to high fidelity prototypes. What I am suggesting in my article is that in design sessions where concepts are not yet locked down, to test the flow a paper-in-screen prototype with POP is more advantageous due to the ease and speed of updating the content.

        High fidelity prototypes themselves have varying degree of complexity, and ultimately any prototype that involves multiple screens, detailed flows, and various interactions does require some level of planning. This is not to say that high fidelity prototypes are out of the picture: on the contrary, in later project phases where the vision is more concrete and requirements are outlined high fidelity prototypes are essential communication tool.

        It conclusion, it is not about being right or wrong since UX designers are faced with different projects (goals, size, etc.) and different working environments which directly impact their worfklows and tool selection. I am stating one viewpoint, and leave the readers to decide how they can fit POP in their palette. Looking forward to reading your alternative perspective. Good luck with what appears to be an interesting article!

        0
  2. 5

    I love to sketch out ideas first. I actually launched Dotgrid.co (http://dotgrid.co) as there was a huge gap in the market for dot grid books and iPhone template books in Europe. Very occasionally (depending on the project length and my position in the project) I will wireframe my sketches and create a basic prototype before jumping into Photoshop and making everything look beautiful!

    0
    • 6

      Callum, thank you for sharing with the wider audience your process. Congratulations on launching Dotgrid.co. Looks like you have some cool products listed! Do you ship outside of the UK?

      0
  3. 8

    You could also try Evernote’s Penultimate app http://evernote.com/penultimate/, but for my own use I do like a simple sketch.

    0
    • 9

      Daniel, I have not come across this tool in the past. I will have to check it out. Thanks for adding this info!

      0
  4. 10

    Great article, thanks for putting it together. Any suggestions on desktop prototyping tools? Specifically with click through capabilities?

    0
    • 11

      Excellent!!

      0
    • 12

      Tom, there is a variety of tools capable of handling clickthrough prototypes. PowerPoint, OmniGraffle, Axure and InDesign are just a few that come to my mind. Each application has different capabilities when it comes to handling transitions and clickthroughs. Pick the ones that fit your worklfow the best. Some, like PowerPoint and InDesign, were never meant to be UX wireframing/prototyping tools, but I have seen them used to capture designs.

      0
  5. 13

    I use iMockUps on my iPad quite extensively. Similar to the tools above, and with loads of components to drop into screens, and hook up with click functionality.

    0
    • 14

      Hmm, I came across iMockUps a while back, but have not given it a try. Would you recommend it? I have been using Blueprint and have been exploring AppCooker on the iPad instead.

      0
  6. 15

    Thanks for your post. I’ve learned about some prototyping apps/tools as a result. However, I’m wondering why more UX professionals don’t use fully interactive prototypes. Frameworks like Twitter Bootstrap make it so easy if you know basic html and the UX simulation you can produce generally blows away other techniques. Plus, as an added bonus, you end up with code that can be used in the actual project with little revision. I really think it’s the direction to go.

    I’ve been doing this so much lately that I just recently authored and released a Information Architecture and UX prototyping plugin called permit.js. If you do HTML prototyping, check it out at https://github.com/technotarek/permit. It’s purpose to make prototypes good at simulating various states in an application (e.g,. online vs offline or free vs paid versions).

    0
    • 16

      I have to agree with you Tarek. For the past 12 months I have tried tens of UI/UX prototyping tools, methods and techniques. From paper sketches, POP, InVision, Axure, InDesign to name a few. And have found myself settling with HTML prototyping with Bootstrap my closest friend (at a client presentation/ user testing stage).

      The biggest problem I have encountered with sketch prototyping is that when presented to a client or target user, the “sketchiness” look and feel immediately confuses them, in many cases they just can’t see through that. Us creative types may be able to imagine how it might look, see through this greyscale sketch and concentrate on the flow, but not to many of the clients, users or testers, they think this is how you propose it’s going to look. I think sketch prototyping should be kept for internal design teams to iterate over concepts and ideas before producing feasible, presentable designs.

      I have spent a lot of time on Axure and found it a fantastic tool, but at times also frustrating when trying to explore and mimic a new interface beyond the basic interfaces. As it ultimately produces an HTML interface, I just found it easier to prototype in HTML. Bootstrap makes prototyping quick and easy, layers of interactivity can be applied later, evolving the design with each new presentable iteration. Publishing the site allows clients and users to access and play with a prototype in their own time, and with Bootstrap’s responsive features, you can be sure that no matter what device they use, it will work, which instills confidence in your clients too.

      There are so many positives for HTML prototyping, I could be writing this all day. The biggest draw back of course, is knowing HTML, CSS and JS. But every (web based) UX designer should know the possibilities and limitations of this platform anyway.

      I’ll be checking out your permit.js Tarek!

      Thanks for the article Svetlin, always good to see more UX posts on Smashing Magazine!

      0
    • 17

      Tarek, thanks for sharing your plugin. I think you are onto something. In the near future, I suspect UX Designers will pick up more development skills. This is already apparent by the integration of “APIs” (notice the quotes) within tools such as Axure (as per their 7.0 release). Personally I know of quite a few UXers who prototype in HTML/CSS/JS, and I don’t think this is just a trend. Our skillset seems to be evolving to better align with our project partners, the Developers.

      0
  7. 18

    You should also check out Marvel: marvelapp.com

    0
    • 19

      Thanks Max. Will look into it. Nowadays, there is a ton of prototyping tools emerging on the marketplace. I guess this is good for us, UX Designers :)

      0
    • 20

      2nd that, Marvel rocks. They have far more features than most, happily respond to queries, integrate with Dropbox which is a massive plus. Also they have a premium service with plenty to come the looks of it.

      0
  8. 21

    It’s fair to say that all teams have to use approaches that work for them regardless of the number of people involved. This could be any level of fidelity when it comes to wireframing – from a messy sketch on a whiteboard through to interactive wireframes. It rather depends on the team members and the expectation around what the client wants to sign off on before moving in to final design and development. If you can explain why a lean approach is best then you may not have to finalise wireframes before moving on to visual design in any case!

    However, my query over this post is the implication that participatory design is any quicker than design that does not involve the the users or external stakeholders. Participatory Design involves the *users* in the design process potentially through out – including design decisions made towards the end of the project. At this point it is unlikely you are still going to be spending time working up interactive prototypes for small design decisions.

    Perhaps the title of the post should be “Building Clickthrough Prototypes To Support Design Workshops”

    0
    • 22

      Hi Joe! I agree with your first paragraph: tool selection and activity strategy are selected based on context. My intent was not to communicate that participatory design is any quicker than doing it on your own. In many cases we are talking about multi-hour meetings. What I was getting at is that POP can expedite the initial concept generation. You do bring a good point about the users being involved throughout the process, and yes interactive prototypes for small decisions may make little sense if sketches can be used instead. Hence my recommendation to focus the use of POP to initially capture flow and visualize proposed concepts. I really like the alternative title. Thanks for sharing this thoughtful comment!

      0
  9. 23

    Check out Axure (www.axure.com). Personally, I think it is hands done the best prototyping software out there. It can even mimic hand drawn lines with its “sketchiness” feature.

    0
    • 24

      Kenton, I am very familiar with Axure and am heavily involved in the company’s forums: http://bit.ly/NALuNq

      It is currently my tool of choice for prototypes with complex interactivity. POP in my experience is most suitable for early concept brainstorming and visualizing flows. Each UX tool, in my opinion, fits a specific role in the overall design cycle.

      0
      • 25

        So funny, I was just on the Axure help pages and your picture looked very familiar … nice article, prototyping tools tend to be very personal and everyone has different preferences.

        0
        • 26

          Jay, I completely agree with you. Every UX Designer works within a different context and under different constraints, so we need to have a good palette of tools to choose from to match the situation, not unlike an artist :)

          0
  10. 27

    Very Nice. Thank You!

    0
  11. 29

    I use a combination of Balsamiq and Invision for this, works great for me!

    0
    • 30

      Santiago, I have played with InVision. It is a great tool. I especially like its collaborative features. Not so long ago I was testing Indigo Studio before version 2.0 and it becoming a paid software. It has nice clickthrough functionality for the desktop!

      0
  12. 31

    Shawn Scammahorn

    March 6, 2014 12:34 pm

    Another overlooked option is Pencil Project: http://pencil.evolus.vn/

    It’s cross-platform (can be run inside Firefox or as a separate program) and you can create multiple pages within a single document. I use this for multi-viewport views mostly (one page for each general viewport).

    But you can also create links to the other pages in a document. Just select an item(s), right-click, and select Link to… Pick the page you want to link to and export to an HTML file. The resulting HTML could be saved into a Dropbox or Google Drive folder and shared with others.

    It is desktop only, but still, a fantastic app that I don’t think a lot of people know about.

    0
    • 32

      Thanks Shawn! Never heard of this tool before. It is a shame that this is desktop only. Just last night I came across Marvel which has both desktop and mobile functionality. Thought I would share it with you!

      0
  13. 33

    Hey, great article! I was just wondering how long it would usually take to create a wireframe for an entire site? I mocked mine up in Photoshop and the site has about 50 individual pages. I was allotted a very short amount of time to complete the wireframe. It’s very time consuming and was just wondering, am I crazy or does this require quite a bit of time?

    0
    • 34

      Thanks Dorothy! If I understand you correctly, you are asking about wireframing in general. If that’s the case, the time spent wireframing a website has many dependencies: status of requirements, number of expected total screens, complexity per screen, available budget etc. etc.

      Estimation is a tricky business and there is no one formula that fits all. Personally, I try to identify the number of screens and assign some hour/screen value depending on complexity. Then multiply that total number times 1.5 or 2. The extra padding helps for revisions, unexpected design changes, and many other factors which you don’t have control over.

      Some resources that can point you in the right direction are the following Smashing Article and this book. And no, you are not crazy. Often time project plans do not include time for underlying research (not always true however), conversations between between project members, etc., thus leaving only an estimate of the actual work.

      0
  14. 35

    Here’s an alternative of POP: tapcaseapp.com.

    0
    • 36

      Thanks for sharing, Simon. I am really excited to see so many people responding with new prototyping tools. I hope many of the readers find them useful!

      0
  15. 37

    Why has no one mentioned Flinto?

    0
  16. 38

    Great article, Svetlin!
    I have to agree what Dave said on his comment as I have had very similar problems with the clients. Once I show them a prototype sketch, they often don’t have any feedback on it and that’s why I think it’s often better to keep the sketches within your team. The Twitter Bootstrap prototyping is a nice idea and there are also many other frameworks you can use for prototyping.

    I would also like to hear others opinions on effect (interactive) prototyping. I have used After Effects and Flash in the past to animate effects before the developers build them with Javascript/CSS. And recently I have found out that it’s easier for me to create the code in CSS3/Jquery, and then the developers can clean/adjust the code later. How’bout you, any other ideas or tools for this kind of prototyping?

    0
    • 39

      James, I’ve found exactly the same thing with prototyping effects and behaviour with a UI. Assuming you know a bit of CSS and jQuery, it’s easier to prototype these effects, and hand it over to a developer to clean up and optimise. The other benefit is that a html prototype will behave exactly as you would expect in a production code.
      I used Flash and ActionScript many years ago before I got to grips with HTML5, CSS3 and jQuery, and then never looked back. There’s a fantastic wealth of HTML, JS/ jQuery libraries and frameworks out there for building any interactive UI.

      Best of all, all you need is a text editor.

      0
      • 40

        Dave, yes, you’re right. For those who have the knowledge in HTML, CSS(3), Jquery… it’s definitely the most efficient way to build and prototype. Nowadays I see there are softwares like Adobe Edge, but they just aren’t that efficient and you easily end up spending too much time with the interface and fixing inaccurate renderings. Knowing some CSS and Jquery and using text editor is the best way to go.

        0
  17. 41

    Adam Beizsley-Pycroft

    March 10, 2014 5:03 am

    Interesting article Sveltin. I’m not sure if I agree that high-fidelity prototypes fall short. If you’ve got a designer and front end developer working with the UX architect on the project I think it can help to remove layers of abstraction if you’re going to put it in front of real users so that you can empirically test concepts. I think an important element of participatory design is carrying out user testing (even on a guerrilla basis) so that the participants in the design process can see the consequences of their decisions. Ultimately sharing videos of users interacting with everyone’s ideas (however they are expressed) gives all those involved in the process the knowledge they need to make an informed choice about how to proceed.

    If you’re looking to user test a prototype on the phone and can open it in the browser (either a clickable PDF exported from Balsamiq or a full blown HTML / Axure prototype) Capybara UX (http:www.capybaraux.com) is a worth a try. Alternatively Silverback (http://silverbackapp.com) is great for testing on desktop.

    (In the interest of full disclosure, Capybara UX is my company’s product.)

    0
  18. 42

    This looks really cool. Since we use Photoshop, we do the same thing with InVisionApp.com. Great article!

    0
  19. 43

    Nice article, tons of App now are available to do click-through prototyping :)

    0
  20. 44

    People actually pay people who can’t build their own prototypes in HTML/CSS/JS to test on their devices? Wow

    0
  21. 45

    Thanks Svetlin for sharing your processes and techniques. I’ve been drawing increasingly stronger boundaries between my wireframing conceptual stages and prototyping. They’re quite different stages for me, equally as important, and I’ve found the need to apply a range of techniques to support my product owner, user representatives, business logic authors and developers. Each party want to see different aspects of the same design, and as different features are progressing on their own timeline it really doesn’t make sense for me to maintain hi-fi prototypes at this stage. My current process starts with static wireframing: refine, iterate, present. Next, I wire-up a prototype. I found Balsamiq very laboured in this regard and not fit for sequence/interactive prototyping, but I love it as a fast wireframing tool. Naturally, the higher fidelity you work at, the longer it takes to iterate and I’ve found stakeholders who require hi-fi prototypes, while others with more logic based responsibilities prefer static wireframes. I’m interested if anyone has used Proto.io, I’m currently evaluating it after Balsamiq ran aground in the murky waters of prototyping. Yes, I am using HTML/CSS/JS, but only when I know that what I develop can be reused by my devs.

    0
  22. 46

    Just a quickie to say we are not all using Apple products out here. I work on contract on site for many large organisations and it’s always Windows. Apple make great products but for an article like this I would expect less bias :)

    Agree with the Bootstrap comments above. I moved from Axure 2 years ago. I can develop in HTML., CSS and JS and I find it better for larger, more complex projects, which I generally work on. Also code is reusable…

    1
  23. 47

    Thanks for the article Svetlin. You’re so right about using prototyping tools to help inform flow, interaction and animation, and it’s a great approach to use simple tap-through prototyping for the Mobile Web.

    Over at the agency @DeticaCreative we’ve found that when designing Native Mobile Apps it’s essential to use tools that go further helping to design rich interactive animations.

    Definitely suggest looking at the following tools – Two both from the design team over at Facebook:

    Framer – http://framerjs.com
    Origami – http://facebook.github.io/origami/ (Designed specifically to aid in the design creation of Facebook Paper App – More advanced and needs experience in Quartz Composer)
    Marvelapp – https://www.marvelapp.com/ (nice feature to sync all designs over Dropbox)

    Be great if anyone else on this thread has any experience or comments on the above or other interesting Mobile App Prototyping tools.

    I’m collating a list over on my Blog – http://www.griffininteractive.net/2012/07/prototyping_mobile_apps.html

    0
  24. 48

    This is a great article, and I agree that a clickable prototype can greatly enhance/improve the design of any website or application. I’ve always been at a loss, however as to the allure of sketching designs over using your drawing tool of choice. I can’t draw…at all. And using a drawing tool set up with my favorite templates and stencils make “sketching” so much faster. I can copy and paste screens, move elements around at will, print or save digital versions. I’ve worked collaboratively with colleagues and found it a fast and effective way to iterate. I think with the right set-up there’s no reason to think that it couldn’t would with end users/test subjects.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top