Learn about Moqups, a browser-based prototyping tool for UX that can be used for both low-fidelity and high-fidelity prototyping. In this tutorial, Diane Cronenwett demonstrates how to use Moqups for creating the UX for low-fidelity clickable prototypes.
- [Instructor] One of the tools that's great for prototyping is a tool called Moqups. Moqups is browser-based, so you don't have to use a tool to create the design. You can quickly create your prototype directly in the tool. The default style of mock up lends itself to a low-fidelity visual appearance, which helps reinforce that you're creating quick ideas. Before we begin, here's an example of a low-fidelity prototype that I created using Moqups, and some of the minimal interactions that we can add by using this tool.
I can click on an item, and link this to another page, and I can also click on a link on the top part of the page, and it jumps down to that section of the page. Let's go back to Moqups and build out this prototype. When you first open Moqups, you'll notice that the panel on the left has stencils of common UI elements to help you start off with creating a layout. In addition to the common controls, there are shapes, navigation items, as well as iOS, material design, and bootstrap components.
Let's walk through building a low-fidelity prototype using Moqups. To keep my prototype low-fidelity I'm going to use the common elements because they don't use any color or any real style by default, and I want to keep this as simple as possible. I now have a blank page. From the Workspaces menu on the top, I'm selecting Page Settings and modifying the height of the canvas to 1,200, and apply that change. Next I'm going to select the Stencils tab on the top left and look for a browser window.
I'm going to select it and drag it into the empty canvas. In the inspector on the right, I'm going to change the dimensions from the current size to 1,000 width and 1,200 height. I want to create an eCommerce-type site that sells clothing and accessories. To create the header area, let's include a logo, a sign-in, and a search. Using the stencils, I'll drag a rectangle into the browser window, and drag a label onto the canvas.
Double-clicking on the text will allow you to edit, and I'll just type in logo. I'll drag in a link and put on the top right, with the text of Sign In. I want to add a cart icon, so in the Icons tab on the left, I'm going to change the drop-down to Font Awesome and find a cart icon.
Select the cart icon and drag it onto my screen. If you're building out your designs in Bootstrap you can use the Font Awesome library, and if you're using Material Design, you can use those icons from Material Design as well. My design is fairly generic so I'll stick with Font Awesome. While the cart icon is selected I'm going to change the fill to a gray color.
As part of this design, I want to include a search box, so from the Stencils menu, I'm going to find a search box and drag it in. Using the common UI stencils, I'm going to select the horizontal menu from the Navigation stencils and drag it into the canvas to create the global navigation.
Using the common UI stencils, I'm going to select the horizontal menu from the navigation stencils and drag it onto the canvas to create the global navigation. Double-clicking on this navigation menu will allow you to change the labels, which I will do now. Let's add elements to this page. Drag a Heading component to the canvas and let's rename this to New Arrivals, with the number.
Let's find an image placehold stencil and drag it onto the canvas, and resize that to 175 width and 200 height. Let's drag another label into the canvas and rename that to Item Name to indicate that this is a placeholder text for the item name, and place it under the placeholder image.
We will need a price, so let's drag in another label and change that label to a price. Star ratings are a standard element on eCommerce sites, and there's a star rating stencil, so let's drag that over to the canvas and place it below the price. I want to create a row of these product images so I'm going to select the placeholder image, the text, and the star rating, and use Command + C to copy the group and Command + V to paste.
I'm going to do that four more times and just space them out so they all fit in one row. Part of what I want to learn from this prototype is whether or not the star rating is useful. I'm going to change a few of these star ratings so that they don't all have the same rating. I'm going to select this last rating on the top row and double-click on it. It will show three out of five in numbers, and I'm going to change that three to a five.
I'm going to select another rating and change that to a one. And then I'm going to update a few of these prices so that it doesn't look like it's all the same. I'm going to select the browser window and I'm going to right-click and Lock Selection, and I want to do that to make sure that this doesn't move up and down. I'm now going to select this entire row, and make two more copies.
And now we have a total of three rolls. One of the goals of this prototype is to find out how users want to navigate to see details of an item. In order to do that, we need to build out another page. I'm going to duplicate this page by selecting the page in the left Pages panel and right-click to open a menu, and select Duplicate. I'm going to delete everything below the heading and change the heading to say Item Detail.
Next I'm going to drag an image placeholder onto the canvas and change the dimensions to be 500 wide and 335 in height. In this view I want to show some more views of the product on the left, so I'm going to drag in the placeholder stencil, put it on the left, and copy and paste it two more times below it. I'm going to select the image placeholder and move it over to the left a bit.
On the right I want to add in the item name, price, and rating details. We can grab some of these details from the first page and copy and paste it to the right of the image placeholder. Normally there's a short description of the product so I'll add some paragraph text below the price details.
Going back to the Stencils tab, I'll grab the Paragraph stencil and drag it onto the canvas. I'm going to change the width of this text to 300 by 50. And delete some of the text so it's not very long.
I'm going to drag in a Combo Box and change the text to say Select a Size and drag in a button, and change the text to say Add to Cart. Okay, now I'm going to go back to the other page and I'm going to select an image placeholder and on the top right menu you'll see an Interactions button.
I'm now going to select the last image on the top row, and on the top right menu I'm going to select the Interactions button. When you select Interactions you'll have a few options to add interactivity. In the Hotspots area I'm going to select the Hotspots drop-down and select the option to Create Hotspot for the selection. This option will make your image placeholder a hotspot so you can add some interactivity to it.
In the Add Interaction section above click or tap is the default action, and I can select the drop-down below it and define the action when someone clicks on that hotspot. For this prototype, I want to keep it simple, so I'm just going to select Go to Next Page, and select Done. You can preview the prototype by clicking on the Preview button on the top right. I'll preview the prototype and you can see that when I click on the image placeholder I'm navigated to the item detail page.
I'm also going to add a link, and place that next to the star rating, and change that link to say two. I'm now going to add an area below that gives similar products that people have purchased and a reviews area below that. I'm going to drag a placeholder stencil to the canvas, and copy and paste that four more times.
I'm going to select all of them and increase them in size. And I'm going to add a heading below, and change the size to 20. I'm going to change this to say Similar items others have purchased.
I'm now going to add the label for product reviews and star ratings, so I'm going to drag this label into the canvas and change this to product reviews. And drag in a star rating below that. And I'm going to change this star rating to five. I'm now going to drag in some paragraph text, and change the size of it.
And delete some of the text, and I'm just going to add a label above the paragraph text for the title of this review. And I'm going to take this review and I'm going to copy it, and place another review below.
In the next page of the prototype, I want to link this number two to the reviews section to simulate an anchor link on the page. I'm going to select the number two link and in the Interactions section, select the action to scroll to object in the Select Action menu. When you select on this target icon on the right you have the option to select the area you want to link to. I'm going to link this to the product reviews header.
By just selecting the Product Reviews header. We can preview the prototype by clicking on the Preview button on the top right. I'll preview the prototype and you can see that when I click on that image placeholder on the first page, I'm navigated to the Item Detail page. Clicking on the number two drops me to the bottom of the page so I can see the product reviews.
Everything works as expected. Selecting Edit Project from the top right, I will be navigated back to the original prototype. I can then share this prototype with others by selecting the Sharing drop-down on the top menu, and you'll have a unique URL for the prototype. This is an example of a basic click through prototype, but you can get a lot of feedback around what kinds of information the user might want to see, if this navigation is effective, and if there is other types of interactions to explore.
Moqups has a lot of options to add interactivity, so as your design gets more defined you can refine the interactions and the fidelity using Moqups. Another tool worth looking at if you're interested in keeping this low-fidelity look is Balsamiq. Balsamiq has a sketch-like interface and reinforces that low-fidelity look and feel but also has the ability to simulate flows and interactions. Check it out and see if it meets your low-fidelity prototyping needs.
Explore the benefits, techniques, and tools of prototyping in this introductory course with designer Diane Cronenwett. Diane covers the basics of building effective prototypes with the right "fidelity," and getting more valuable feedback from your design testing. Learn how to build simple, satisfying prototypes on paper, and use digital prototyping tools like Moqups, InVision, and Axure to add interactivity and animation.
- What is a prototype?
- How prototyping helps user experience
- Defining prototype goals
- Sketching ideas
- Creating paper prototypes
- Building low-fidelity and high-fidelity prototypes
- Creating HTML prototypes
- Testing and evaluating prototypes
- Choosing the right prototyping tool