Simulating tools and testing

Simulating tools are software or programs that allow you to build and then see how your website or app will function and look—almost exactly—without having to code first. The advantage to these kinds of tools is that it is much easier to get a nearly finished product and to test it before you commit to coding.

Most simulator tools include a high-fidelity, highly interactive interface. Generally, simulation software is not paired with design features; however, more prototype tools (which often include more visual elements) are beginning to include advanced levels of simulation. The simulation phase typically focuses on the following areas: 

• Dynamic interaction
• Usability
• Functionality
• Aesthetic finalization

In order to create a website that is functional, usable and beautiful, it is becoming more important to include visual designers in the beginning stages of website design. Many simulator tools integrate with tools designers are already using (Photoshop, Illustrator, InDesign) to build visual mockups and prototypes.

About mobile app simulating

Simulation tools are especially helpful when you’re building mobile sites or apps because you can test functionality such as swipe, scroll, zoom, and forms with easy drag and drop widgets. Generally, prototyping tools will not be able to provide this functionality.

Sample UserTesting tasks for simulations

Testing your simulation is just like testing your website. The only difference: you haven’t actually coded the site yet. The end result is that you don’t have to waste valuable time coding something you’ve already discovered you don’t need or won’t work. Get the usability right before you build your website.

Test your simulation the same way you would test your website, but since simulations can handle high fidelity, high interactivity, focus on questions that will help you test those elements. As you watch users' feedback, pay specific attention to how they’re using the interactivity on your site.

Here are some sample tasks to get you thinking about how to test your simulations:

• Test the [signup / registration] process. Explain any difficulties you encounter.
• Add any 3 items to your cart, and explore the shipping options available. How clear were the shipping options for this order?
• Click on ___________. Did it take you where you expected it would?
• Download and install [this app]. Explain any questions or concerns you have during the process.
• Watch the video on the homepage. Then explain the [product/service/company] as you would explain it to a friend.

Sample simulator tools

Simulator tools are not as common as wireframe and prototype tools, but they are becoming more popular.

Here are some of the most popular simulating programs to choose from

inVision

inVision is a pretty big deal. It allows you to build your designs in Photoshop, Illustrator, etc . . . and make them interactive.

www.invisionapp.com

Justinmind

Complete with iPad and mobile gestures: swipe, tap and hold, and rotate, Justinmind is the ultimate simulator.

www.justinmind.com

iRise Studio MX

iRise lies somewhere in the magical realm. Quickly create simulations of iPad and iPhone apps that look and act like the real thing without writing a line of code.

http://www.irise.com/products/irise_studio_mx

User Testing Your Simulations

Once your simulation is ready, post a link to it (find out how) on UserTesting where you can:

1. Customize the demographics of your test group.
2. Create specific test questions and tasks for each user to complete.
3. Assign specific written questions for each user to answer.

What do you get out of it?

1. A video of each user’s screen testing your simulation.
2. Audio of the user talking through how he completes the tasks.
3. Valuable feedback about how to improve your website.
4. A website that everyday people can use easily!

View our infographic on wireframing, protoyping, and simulating tools.