Business, Technology

Rapid Prototyping for Designers

design prototyping

This curated column is authored by Product Strategy & Design Consultant, Kevin Bury

Imagine you are trying to describe an elaborate dance to someone and all you have available to you is a series of pictures. Sure you can add words to the pictures – “The dancer spins around moving her left arm in a wide arc while holding her partner by the right hand” – but you will never be able to communicate the rhythm of the dance, or the subtleties of the movement.

The same is true for interface design. Static mocks alone are not able to communicate a dynamic design. Many designers are comfortable coding HTML and CSS, but have stopped short of using JavaScript to make their designs interactive. Perhaps you have tried a JavaScript library like JQuery. These libraries are great, however, they were created for developers and offer much more power (and complexity) than what most designers really need.

Static mocks alone are not able to communicate a dynamic design.

The purpose of this article is to equip designers with a core set of skills that will allow them to demonstrate dynamic behaviour in their HTML prototypes. The information here is intended for the designer, not the front-end web developer. Our focus is on demonstrating high-fidelity designs, not developing production code.

What is Rapid Prototyping?

This question is probably best answered by an example. Let’s say you are designing a list interface and want an intuitive way for users to remove items from the list. You want the experience to be obvious, smooth, and maybe have a little bit of panache 🙂 So you come up with the design below. When the user positions the pointer over a row, the row highlights. When they click the X, the row fades and then animates closed.

mockup

This design is typical of the type of interaction common on the web today. A pretty simple interaction, but it would not be that easy to described in words. In fact, to get the details of this interaction correct, you really need to see it in action. How else are you going to know how to balance the speed of the fade and the close animations?

Popular Read:  7 Technology Trends for 2017 Globally

We call this “rapid prototyping” because our sole purpose is to demonstrate the design. Because we are not trying to deliver production-ready code, we can work very quickly. We need to be 100% accurate in the demonstration of the design. But once we’ve attained that, we’re done.

So how does one create a prototype to demonstrate an interaction like the one shown above? It’s not as difficult as you might think. Let’s start with some basic concepts.

The Document Object Model

The Document Object Model (or DOM) defines the logical structure of a web page, and the way the page is accessed and manipulated. Every web page has an inherent DOM structure. In addition, you can explicitly give names to objects on the page. Using JavaScript, you can manipulate these named objects. For example, you can hide and show objects, change their color, or move them to another position.

Our focus is on demonstrating high-fidelity designs, not developing production code.

In the list example above, each row has a name and a style. When the user positions the mouse pointer over a row, an event is triggered that causes the background colour to change. When the user clicks an X, another event is triggered. This event calls a JavaScript function that fades the row and then animates it closed.

CSS

Objects on your page have styles. Font size, font color, the width of input fields, are all style attributes that can be specified in Cascading Style Sheets (CSS). Classes are used to group style specifications together and give them a name. For example, you might have a class named “headerText” that specifies Gray 20 pixel Helvetica font. Styles and Classes are very powerful. You can use them to define the way objects appear on the page, you can also use them to move objects around and hide them. Classes and styles can be changed using JavaScript. This is huge.

Popular Read:  Three Reasons Why Product Managers Need to Understand Machine Learning and How to Get Started

Events

Events are things that occur on your web page that you can detect and take action on. In the example above two events are shown. A “hover” event triggers a style change that causes the row color to change when the user positions the mouse over the row. An “onClick” event is specified that causes a JavaScript function to be called when the user clicks on the X. The JavaScript function animates the removal of the row.

We see in the example above that JavaScript can be used to hide and show objects by changing their styles. This concept is incredibly powerful. Much of what you do in a prototype involves hiding and showing elements.

JavaScript

JavaScript is a high-level programming language. We use JavaScript to perform the logic we need to make our web page interactive. For example, if you wanted to have different dialogs display depending on which choice a user makes, you would use JavaScript to determine the correct dialog, display it, and to perform any subsequent actions the user requested. A key thing to remember is that you can begin to use JavaScript to do simple things, and slowly begin to do more complex things as your skill increases. You don’t need to become an expert all at once.

Summary

In summary, here are the core concepts to remember:

· Objects on a web page can be given ids.

· Actions the user takes can call JavaScript functions.

· Functions can manipulate objects on the page.

If you understand the concepts above you are well on your way to adding dynamic behaviour to your prototype.

Live Examples

To see live examples of the concepts discussed above, visit dreamstep.com

Disclaimer: This is a curated post. The statements, opinions and data contained in these publications are solely those of the individual authors and contributors and not of iamwire and the editor(s). The article was published by the author here.

Share your experiences, opinions or solutions: Submit a Post.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>