Rapid Prototyping

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 dynamic designs. To truly convey a user experience you need to build a prototype.  Not only does a prototype communicate a design to the team, but it can be shown to potential users for feedback. The team can experiment quickly.  Problems can be discovered early and corrected before a huge investment is made in the wrong direction.

Designing for mobile presents a unique set of challenges. Mobile applications use gestural interactions and animations that were unimaginable even a few years ago. Fortunately, a number of tools are now available to help designers quickly prototype on mobile – Invision, Principle, Origami, Framerjs, Flinto, and Pixate - to name a few. Each tool has positives and negatives. The important thing for a mobile designer is to pick the tool they are most comfortable with, and then invest the time to learn it.

Regardless of the tool you choose, you should begin any design project by asking who you are designing for, and identifying the key use cases. If you are designing a news reader app targeted at Millenials who are grabbing a few minutes during their commute to catch up on the news, that is very different than designing for the insurance claims adjuster who spends the entire day using your application. You may have a great design, but if it is optimized for the wrong type of user and/or the wrong usage pattern, it will fail. Get your designs in front of potential users at every stage of the design process and iterate based on their input.

“You may have a great design, but if it is optimized for the wrong type of user and/or the wrong usage pattern, it will fail.”

All of the prototyping tools mentioned above have an editor. Screen designs can be loaded into the editor from Sketch, Photoshop, and other graphics applications. In the editor, the designer specifies how the screens will interact with one another. The finished prototype runs natively on the mobile device and so it looks and feels just like the real application.

You can easily try out different animation parameters such as Delay, Duration, and Easing Curve. You can fine tune the interaction and get it precisely the way you want it. You can share your design with your team, and show it to potential users of your app. Below are two example prototypes that will give you and idea of what is possible.











Prototyping Web Applications

There are also a number of tools available for prototyping Web Applications. The most direct way is by building your prototype in HTML. 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. Our purpose here is to equip designers with a core set of skills that will allow them to demonstrate dynamic behavior 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.

HTML Example 1

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. Go ahead and try it below.

San Francisco, California  x 
Boston, Massachusetts  x 
Billings, Montana  x 

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?

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 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.

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 color 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 Ariel font. Styles and Classes are very powerful, you can use them to define a 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.


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 demonstrated. 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. The 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.


The Dynamic Web

For a long time websites were limited to static pages. The user would view a page, perform an action (such as clicking a hyperlink or clicking a submit button) and a new page would load. Early attempts to make the web more dynamic failed miserably for two reasons. First, most users did not have the bandwidth necessary to download the JavaScript, and CSS necessary to make the page dynamic. The second (and more important) reason was browser incompatibility. Only a core subset of JavaScript and CSS would work the same across different browsers. To do anything interesting (such as show/hide, popup windows, or drag and drop) required the web application to detect the browser the user was using, and execute a different set of code depending on the result. This made it prohibitively expensive for designers and developers to deliver dynamic behavior. The web stagnated. It was a dark time :-)

Thanks to standards, the cost of development has dropped dramatically and the web has become much more dynamic. It is very common now to see web sites that take full advantage of technologies such as JavaScript, CSS, Webkit and AJAX to deliver a dynamic user experience.

Every medium has its own strengths and weaknesses. An artist working in oils can do things that one sketching in pencil cannot, and visa versa. If an artist tried to use pencil-sketching techniques while working in oil, chances are the results would not turn out very well. Just like an artist, the designer must understand the medium - i.e. the client technology that will be used in the product. The capabilities of Flash for example are very different from those of HTML. When a designer understands the client technology, they can exploit it. This is why it is important that prototypes be constructed using the same client technology as the product.



HTML Example 2

Here is a simple example that demonstrates some of the concepts discussed above.


Massachusetts
The Commonwealth of Massachusetts is a state in the New England region of the northeastern United States of America. It is bordered by Rhode Island and Connecticut to the south,

Clicking "Show more..." does two things. First, it displays additional information about Massachusetts. Second, it changes the link to "Show less...". Below is the code for this example. You can copy and paste this code into a code editor, save the file with an extension of .htm or .html, and it will run in any modern browser.




Study the code. Notice that there are two functions, "showMoreClick" and "showLessClick", and three divs. Divs are containers. Two of the divs have ids, "moreInfoContent", and "moreInfoLink". We didn't bother to give the third div an id because we don't plan to manipulate it with JavaScript. The first two have ids so that we can.

The "moreInfoContent" div has a style, display:none. This hides this div by default. When the user clicks the link "Show more...", the function "showMoreClick" is called. This function does two things. First it changes the style of "moreInfoContent" to display:block, which causes the div to be displayed. Second it changes the innerHTML of the "moreInfoLink" to "Show less..." and a different function call. The other function "showLessClick" does the reverse, making this a toggle.

This is a simple example but it demonstrates some very important concepts:

 · Objects on a web page can be given ids.

 · Actions the user takes can call JavaScript functions.

 · Functions can manipulate objects on a page.

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



PORTFOLIO | ABOUT