Prototyping Project

Brian Frey | frey1@umbc.edu

Julia Agro | juliaa1@umbc.edu

David Welsh | dwelsh2@umbc.edu

Kevin Bryant | kbryant3@umbc.edu

HCC 613 User Interface Prototyping and Development

Submitted On:

December 5, 2013

1 

Abstract

This paper describes the prototyping application, Balsamiq, and compares it with three other

prototyping applications: Axure RP, App Sketcher, and Antetype. The definition of prototyping is

displayed in order to give the reader a basis for which to become familiar with before the intricacies of

each individual application are discussed. There are many methods and processes that can be used

throughout prototyping and we describe the process of “think aloud” because we found it to be very

compatible to the application we chose, Balsamiq. The advantages and disadvantages are both

described and the different uses for each prototyping application are explained and compared with

Balsamiq. In the paper, we also delve into how all of these prototyping applications serve to assist in

user-centered design and user-centered experiences through the web pages that these applications

create. The prototyping method and the process “think aloud” both serve to help design much more

user-centered web pages and interfaces due to their allowance for extensive testing and iterative

processes. Our experiences using the prototyping applications to create a simple and quick mockup are

also described in order to exhibit the different qualities and features of each application to the reader in

a straightforward way. Prototyping is a very useful tool to aid designers in building something as close as

possible to what a user wants and our review of these applications will show why.

Introduction

With the costs of systems and programs only increasing, having a system that satisfies all types

of realistic users is the goal of any good developer. Failing to meet this goal leads to an unusable or

inefficient system that does not take into account the needs or capabilities of users and or the system

itself. One of the best ways to help plan for better usability is examined in this paper; through the use of

prototypes and user centered design. The use of the prototyping application Balsamiq is examined along

with and compared to Axure RP, App Sketcher, and Antetype. Since prototyping applications such as

these are designed to aid in the creation of visuals for users to experience, the advantages,

disadvantages, strengths and weaknesses for each application is examined. Each of these applications is

able to present examples of final systems, but not all are best suited for the prototyping approach

examined, think aloud. These differences will also be examined and compared to the main application

Balsamiq. By planning for better usability from the beginning, designers can help save time later on

during the development lifecycle.

Prototyping and protoyping application

A prototype is a basic working example of what the finished product will become. “Prototyping

is a useful tool for solving problems in addition to raising and answering questions” [1].

A prototyping application is an application that aids in the creation and basic visualization of

prototypes. They allow the user to easily work through their ideas within the application and share their

prototype with others for collaboration and feedback. The use of prototypes allows developers to do

this without spending a great deal of time or money, but still get their ideas across. Some of the main

advantages of prototyping are that project stakeholders will be able to see what the application might

2 

look like sooner. Since prototypes are intended to be fast and easy representations of a system, they

are able to provide feedback early on. Developers are not limited to one design, and ideas can be

presented and rearranged quickly, allowing them to brainstorm while they look at potential interfaces

for the project. Having these early on give more people an understanding of what is being developed,

and more time can be spent refining the good ideas, and avoiding bad designs or mistakes. Time and

money can be saved as requirements are checked and verified before going further into development

where reworks and changes cost more.

While prototypes are able to provide many benefits early in the development process; they also

have some drawbacks. Prototypes can be simple wireframes and mockups, they can look very basic and

unfinished; we call these low fidelity. Some stakeholders might not be able to see the progress when

they are looking at these early prototypes since visuals and colors tend to be lacking. Low fidelity

mockups are only useful to convey the initial idea. High fidelity prototypes are mockups that resemble

the final product but represent a larger investment of time and could easily be the result of multiple

changes from different versions, all of the previous iterations would be represented by something that

looked as if 5 minutes was spent throwing it together. The rapid development and changes might not

convey a level of development necessary for users to understand the system, or appreciate the design.

The jump from mockup to final design might not be capable for everyone using the prototype without

these fidelity changes. Of course each round of edits represents investment of time and resources.

User Centered Design Impact

User centered design is a departure from the tradition where the system is the main focus for

development; the needs of the user become the focus. As developers work one on one with the users,

not only requirements become apparent but how the user moves through the system easily and

efficiently. These use and feedback sessions, called prototyping, give the interface a more clear and

complete image. The use of prototypes allows changes to be made easier and examined in many

potential permutations. This uses more of the users time initially but uncovers interacts that should save

the user time later, or at least lessen frustration. One could easily say the focus of user centered design

is to create a system that satisfies the customer; prototyping is a method that developers can expand

feedback, widening the net of potential needs of the stakeholder. Alternately prototyping can focus a

discussion and increase the depth of understanding of user needs. We call the first horizontal

prototyping and the second vertical prototyping.

Process / method summary

One method of evaluating and testing a prototype is the think aloud approach; it is “a direct

observation method of user testing that involves asking users to think out loud as they are performing a

task” [2]. This method can be performed with paper prototypes, electronic prototypes, and even

finished products can be tested with the think aloud method. A think aloud usability test can be

conducted on a small scale with only five participants and provide valuable feedback from the

participants. It works well for projects that use agile development since the turnaround time on changes

being implemented is relatively fast. The think aloud method provides immediate knowledge on what

3 

the user expects to happen and provides information to where there is potential confusion within the

interface.

The easiest way to go about performing a think aloud usability test is to come up with a set of

tasks or scenarios for the participants to complete within the prototype that is being tested. Next, start

off the usability test with the facilitator instructing the participant to say his or her thoughts aloud while

working through the tasks or scenarios provided to them. It is also important to inform the participant

that it is not a test and the intent is to find usability issues and improve the overall usability of the

prototype being tested. While conducting the think aloud usability test, there will be times when the

participant stops taking and it is noticeable they are thinking. That is when the facilitator needs to ask the

participant what they are thinking or looking for. After conducting the think aloud usability testing on

three to five participants a pattern should appear of the users pointing out the same general issues.

Once the pattern is clear the think aloud usability testing should stop and the necessary changes to

improve the prototype should be made. After improvements have been made it is important to conduct

usability testing with the think aloud method on the new and improved prototype.

Think aloud is one of the best methods to know what your user is actually thinking when

conducting a usability test. It is also one of the easiest methods for usability testing and it is relatively

inexpensive. The think aloud method can be conducted during any stage of the product’s lifecycle from

early development in the prototyping stage to the latest redesigned aspect of that program. Visual

clues can indicate things the participant is not saying. For example if the participant is squinting or getting

closer to the screen it is an indication that the text is too small (or the user needs new glasses). Overall

think aloud is a great method for evaluating and collecting information directly from the participants.

There are some negative aspects of the think aloud method for evaluating prototypes. One of

the most obvious drawbacks is that people don’t normally talk to themselves and state every little thing

they are doing aloud and what they think about it. Responses from the participants can be filtered

because they don’t want to hurt peoples feelings. People also want to sound educated, so participants

will avoid saying anything that someone could potentially cast them in a different light. In general

participants can be selfconscious since someone is taking notes off what they are saying. Some

participants feel like it is a test and there are wrong answers so they will be hesitant when participating.

Other participants can feel if they struggle or have an issue completing a task in the usability test, they

are at fault and no other user would have the same issue they are having.

Application Discussion:

Balsamiq

Balsamiq's target focus and primary purpose is creating prototypes (more accurately referred to

as electronic wireframes) fast. No need for paper and tape when Balsamiq gives users the ability to

quickly make changes as the user creates the interaction of the application. The application allows users

to create fast wireframes without worrying about color choices or the visual appearance of the

interface. Balsamiq provides the user to link their page wireframe designs together to easily show how

4 

the application will function when certain actions are taken. The wireframes created in Balsamiq allow the

user have a clear focus on the placement and functionality of items with the ability to share their

creations with clients and developers.

One of Balsamiq’s capabilities is that it promotes collaboration. It allows for an easier way of

communicating function, interaction, and placement of items within the design. The user experience

designer or user of Balsamiq can quickly demonstrate what interaction is associated with a particular click

the client makes within the wireframe interface. For example the user can link wireframe pages together

so the client can click through the wireframes as if they were clicking through the final product. User

Experience Designers and users could collaborate with the wireframes created in Balsamiq for usability

testing; similarly to how paper prototyping works. The linking functionality allows the user to link buttons

to other wireframing pages. Users would be able to interact with the wireframes.

The application is very user friendly and lets user experience designers, developers, product

owners, and even project managers to easily use and collaborate within Balsamiq. Balsamiq has a very

general click, hold, and drag function for creating wireframes. The user must click, hold, and drag the

item the user wants onto the work area. If that item had text the application will let the user edit the text

after the item has been dragged to the work area. The user must double click the item to edit the text

within an object. The ease of use for all experience levels allows for easy collaboration

Balsamiq is good at providing the capability of aiding users in the rapid creation and adjustment

of wireframes. As seen at the top of figure 1, Balsamiq has a library of commonly used premade buttons,

tables, and items that users can use and alter to create wireframes faster. The premade buttons and

objects are all resizable with editable text. Moving an item from one position to another follows basic

functionality, the user just clicks, holds, and moves the item to where they want. Providing users with

more time to move items around or adjust the layout in a wireframe than they do when creating a high

fidelity mockup. Not only does this keep the file size down it allows complete focus on the layout,

position, and functions. Users can also create and save their own frequently used buttons and tables for

fast access. Allowing users to save their custom items for reuse saves valuable time allowing for

consistent items within the wireframes. Balsamiq wireframes have an intentional unfinished wireframe

look. Proving the affordance that changes can easily still be made at this stage of the development of

the application.

5 

(Figure 1)

Another capability Balsamiq offers its users is that unlike flat high fidelity hard copy mockups,

Balsamiq allows users to create clickable wireframes. A huge time saver from creating high fidelity

mockups and having to make a lot of changes in a graphics heavy mockup. The user is able to link their

designed wireframes together so if a client clicks on a button on the page page they are viewing the

wireframes can go right there if the user linked their design for that page. When clients have the ability

to click around and see the interaction is on their own it eliminates any miscommunications. It allow clients

to visually see what is going on and start the communication between the user experience designer and

the client. This makes it easier to make obvious major changes before the high fidelity mockups are

created.

Balsamiq fits into the think aloud prototyping process towards the end of the wireframing

process. Users of Balsamiq can output their wireframe creations to a pdf or shareable format to conduct

usability testing with their wireframes. The Balsamiq wireframes can be printed out or exported to a

clickable PDF file for using for usability testing as well as sharing with clients. This would allow user of

Balsamiq to conduct usability testing with the think aloud method. Participants of the usability test would

complete the task or scenario give to them by the facilitator and click on where they think they would

need to go in the wireframe application to complete the goal. During this time the participant would be

saying all their thoughts aloud, providing ultimate feedback to the user. After the information is analysed

and reviewed the user experience designer or user of Balsamiq can then make fast changes from the

feedback that was found in the usability testing before moving onto the high fidelity mockups.

6 

(Figure 2)

Balsamiq has a number of advantages to offer users. Balsamiq is safe and easy to learn. It is also

easy to remember how to use. The user does not need to have any previous knowledge of Balsamiq.

The application comes with premade buttons, containers, forms, and more. Balsamiq allows users the

ability to save their own custom buttons and other creations in the library to used later on. To use items

in the library users have to click on the item, drag, hold, and drop to the area they are working on. Users

can easily figure out the click, drag, hold, and drop method through exploring the interface. As users

explore more of the interface more options become available to them when they select a particular

item. Balsamiq also has a clean wireframe style option that converts the imperfect lines to perfectly

straight lines as seen in figure , creating an overall clean appearance of the wireframes for presentation.

Overall Balsamiq is an efficient and effective tool for wireframing.

Balsamiq has some disadvantages as well. It is limited to wireframes with no ability to produce

high fidelity mockups. The preloaded library that comes with Balsamiq is limited and may not contain all

the items a user maybe need. There is an initial setup time to create special reusable objects users

maybe want to use during the creation of wireframes for a given project. When using Balsamiq panels of

additional actions will popup and sometimes they cover part of the area the user is working on, making it

difficult to continue working without adjusting the layout of items on the screen. Another disadvantage

of Balsamiq would be the rough look of the wireframes. Rough looking wireframes can imply that the

creator of the wireframes did not spend much time or thought creating the wireframes.

Balsamiq has one main interface the user stays in during the creation of their wireframes. The

user interface of Balsamiq has a very simplistic look and feel. They have a limited color palette of grays

with one accent color of blue used to indicated selected items. The interface is similar to the layout of

some of the Adobe Creative Suite applications. The main options are at the top and the working area is

7 

located directly below that. Balsamiq provides a quick add search allowing users to just type in what they

are looking for vs. hunting for the object within the interface. The quick add search features allows new

users to waste no time and jump right into the Balsamiq application and start creating with no prior

knowledge of Balsamiq needed. All of the buttons and objects within Balsamiq have a consistent look

and feel. The application provides the user with constraints. Relevant options only become available

when the item is selected similar to how Microsoft Word works with their features. Balsamiq takes pride

in their hand drawn look of wireframes, their users create within their application. The imperfect lines of

the wireframes provides clients the affordance that the prototype is unfinished and in fact it is still in the

wireframing state.

Balsamiq fits into the prototyping process at the beginning stages of early development of an

application. It is easy to start and scrap ideas or make major adjustments rapidly. Balsamiq is the drawing

board for the initial ideas for layout, placement, and basic functionality. Users can try multiple layout and

menu options within minutes. It gives users ultimate freedom to produce their ideas and find the best

possible solution for their application. The imperfect lines of the user’s creations provides a clear

indication to the client that this is not a finished product and indicates that changes can still be made. The

ability for the users to share their creations with clients and developers is one of the main benefits of

Balsamiq. It helps to create clear communication up until the high fidelity mockup point in development.

This allows for a smooth transition from wireframes to polished high fidelity mockups.

App Sketcher

The wireframing and prototype tool App Sketcher focuses on the development of web

applications. Unlike most prototyping tools, App Sketcher gives its users the ability to create prototypes

with a greater level of functionality early on in the development process. This functionality comes from

App Sketcher’s use of HTML and JQuery components. These drag and drop functions and features do not

require programming, and introduces an extra level of detail early on in design, “especially for team

members who aren’t inclined or are unable to work in code” [Hanami].

While Balsamiq focuses on the creation of electronic pen and paper prototypes, App Sketcher

main strength is its ability to produce a working browser prototype on top of the tradition wireframe

prototype. Balsamiq’s strength comes from wireframes that “scream both This is not final! and I just

threw this together, eliciting honest feedback”[Balsamiq] but the level of professionalism that needs to

be shown to clients may not always fit the typical throw away standard. With App Sketcher, the option to

develop either high fidelity or low fidelity prototypes can be changed with the use of built in themes,

and since prototypes are not limited to low fidelity the level of professionalism can be easily changed.

Users are not stuck with a low fidelity interface to present, but they are able to build on to and develop

to better fit the project from the beginning or later on once and idea is developed enough.

The level of interactivity with App Sketcher comes from the ability to work with HTML and

JQuery components, but also its ability to incorporate external components directly onto the browser

design area. This takes the interactivity from simple linked buttons to fully built third party features such

8 

as Google Maps or embedded videos just as easily.

During an examination of the trial version of App Sketcher, it was run on both Macs and PC’s

through the use of Adobe Air. Once installation is complete, the user chooses from a sample project,

starting a new one or working on an existing file. The load screen gives basic instructions about how to

use the program; comparing the use of it to the drag and drop features of PowerPoint. Editing features,

undoing mistakes and launching the prototype into a browser are all simple actions; well explained and

positioned on the page. On the left side of the screen is a the component list, with the selected items

properties listed on the right. This separation of components makes it straight-forward to change either

high level details like the size of the prototype or component details fast and easily. While the work area

for prototyping has a grid of dots to help with placement; there are no easy snap features or active

alignment tools to help with alignment. The affordance is instead, selecting components individually or as

groups and hitting the alignment options (right align, center, left up etc). As actions are added to

components, it is indicated by a lightning bolt clearly defining what has been edited and what is left. Tool

tips options for each component and other functionality within the application. Overall App Sketcher is

very easy to jump into and start building prototypes, with a small learning curve needed for

implementing the actions. The higher level aspects are also well designed, simple export and run in

browser buttons make it easy to quickly test and zip projects.

(Figure 3)

With the demonstration prototype presented on the App Sketcher website, you can get a sense

of how different components and interactions can be incorporated into a prototype. This same

prototype is also the example when you download the trial, and is shown in both figure 1 and 2. With the

“Build Your Cool Car” and “FREE Dealer Price Quotes” page, Figure 1, the embedded components are

9 

highlighted in red. Adding the map and video directly to your prototype gives them an added level of

professionalism without much effort. The color selector highlighted in orange is another level of

interaction. As the color is chosen, a picture is used as a radio button, and the graphic of the car is

switched to the color selected. Linking between pages is easily done, as indicated by components

highlighted in purple on both Figure 3 and 4. When a component is selected, such as the request a quote

button on Figure 1, selecting action on the righthand side allows you to set different types of actions,

such as the opening the page “Quote” for this button.

Figure 1 shows how a YouTube has been embedded and then the specific video is selected. On the “FREE

Dealer Price Quotes” page, Figure 2, simple form components are highlighted in blue. It illustrates how

calendars can be added directly into the prototype in addition to other form components, widgets and

links, making it more dynamic.

(Figure 4)

One of the main advantages of using App Sketcher for a think-aloud process is, higher fidelity

works well with interaction. Prototypes can be easily zipped and sent to any computer and set up on a

browser. This can be on Macs or PC’s and set up as close to the final environment the system will be used

in as possible. Since the user will be talking as they work their way through the prototype, the interaction

App Sketcher is able to present a more complete prototype. If the prototype is built as a vertical or

scenario prototype, using the interaction App Sketcher allows can provide additional details and

10 

information. Thinking aloud as they navigate working features can also reduce any stumbling blocks

related to flow of process that could be encountered. Since the prototype works more like the finalized

system, problems brought up during the think aloud can have a more defined explanation or source.

Having a calendar actually pop up as opposed to just an icon can allow testers the opportunity to express

in greater detail or amount. Therefore, less of the prototype’s interactions will need to be explained.

However this level of interactivity does come at a cost since the prototypes App Sketcher

focuses on are browser based. Balsamiq with its wireframing is able to produce prototypes for any

platform since they do not have to use working code for any of the features. Interfaces for any device

can be created with Balsamiq, but with App Sketcher the focus is only on interactions within a browsers.

One problem a reviewer noticed was that in depth customization with all of the available drag and drop

features was missing, such as an “OmniGraffle type stencil option for jQuery UI components and custom

themes so users can load their own styles”[Hanami]. The App Sketcher files are able to be run on

browsers, and come pre zipped to increase the ease of collaboration. These files do not require App

Sketcher to be downloaded on each computer, something that is required with Balsamiq. Since testing

and exposure to end users is an important part of user interface development, App Sketcher is able to

do this easier and cheaper than Balsamiq.

Antetype

 Antetype seems to be designed to email a customer their prototype, which of course would

hamper any of the useful observation associated with a good think aloud evaluation. It has a learnable

and memorable two window interface, reminiscent of Adobe products. This is underscored by the “for

designers, from designers” theme in the projects marketing material. It’s effective use seems to best

gel with large projects, where it’s both expandable and configurable library of interactive widgets allow

uniformity across many wireframes. These interactive widgets can allow near functionality for the

customer of the user. However, buttons or tabs that change state with a click and display popup

windows or advance to other screens, run the small risk that the prototype might be better than the

11 

final code. The ability to change fleets of widgets can quickly become problematic with a few erroneous

clicks or keystrokes. To increase the safety, this the program offers four headings (used custom changed

hidden) to organize your widgets, with more than one setting applicable to a particular widget or group

of widgets. The product was tested with a week break in between, and getting back up to speed took

very little effort, making it reasonable memorable. With that said, the drag and drop, resizing, grouping

and exporting to a portable, browser readable format makes is very learnable, for the designer as it

uses familiar cross-platform interactions. While providing the end customer with a robust high-fidelity

wire frame, almost eliminates the concept of learnability, as a well designed prototype will function

similarly to a real website is something most people are familiar with. The file that would be interacted

with by the customer is even labeled index.html in accordance with good HTML practices. This in reaction

file offers the ability to switch between the look and feel of different environments with a toggle and

can provide up to six choices, including iOS, Android, Mac OS and ‘classic’ wire framing (figure 5). An

interesting feature is the ability to select a widget and with a right-click of the mouse, place the CSS for

that widget into the buffer to be pasted wherever you like. This could give a clue to what is running

under the hood and might leave the possibility of standing up a prototype and wiring it together a future

eventuality.

Antetype would work with think aloud method but it could possibly be too high fidelity. The note taker

duties could realistically be taken over by the proctor, as you can use the “interaction inspector” to set

every button, text boxes, etc to function and take you to the appropriate next step, even other screens.

12 

This is potentially a bad idea because the notetaker’s primary job is to observe the user. This second,

uncluttered perspective is vitally important to gleaning good functional, non-leading designs.

When compared with Balsamiq, Antetype has a more professional feel, but that may not be to

Antetype’s benefit as a near complete seeming artifact in a customer’s hands can cause confusion when

production is green lit because of the time to create the actual website. Balsamiq’s interface is

much more reminiscent of MSOffice products

when compared to Antetype, and has a hand drawn appearance. Objects are selected with a click, giving

manipulating of the object as a whole functionality or double clicked to change aspects inside the object,

such as text. Libraries can be customized but are saved off and the default setting is by project. It doesn’t

appear libraries can be joined or split but objects from different libraries can reside within the same

prototype, provided those objects are saved as site not project. Differences in environment are at the

object level, and switching between these to show “what does this look like on an iPhone” isn’t available

with a single toggle, but seems to require different layouts, ie the minimize button doesn’t automatically

move between it’s normal left in IOS and right in windows, the objects just change shape and color

(figures 6 and 7). Layouts can live ‘in the cloud’ because with the web interface, designing as well as

uploading completed projects is an option.

13 

Leaning heavily on cross cultural stereotypes of work style it is apparent Balsamiq is American and

Antetype is German. Balsamiq is more fast and loose, but with all the required functionality for the job, a

Mustang to Anteype’s Porsche. To extend the analogy, in a quick focused interaction with a client where

you are feeling out the potential usability from a non-expert’s point of view Balsamiq beats Antetype in

the quarter mile.

Axure RP

Axure RP is a very intricate application. Its main use is for designing HTML prototypes and

wireframes to aid in the implementation of web pages and user interfaces. Axure RP has a slew of

unique features to help with designing these prototypes. One of these features is the option to design

any widget in the prototype and adding actions or animations to these widgets. Another feature is the

collaboration feature, which allows for easy communication between team members and automatically

generates documentation so that the activity is logged and team members never get lost on the project.

These documents also help to describe the project for the testers to understand as well.

The designer not only can design their own widgets, but they can also choose from a plethora

widgets in the widget library. This widget library has a wide variety of default widgets along with

widgets that other users have created and uploaded to the widget library. This widget library can speed

up the process of designing a prototype by the designer simply choosing from pre designed widgets

without having to think about designing them himself. This way they can concentrate more so on the

overall design of the web page or user interface without having to worry about the small, insignificant

details.

In addition to the widget library, Axure RP has a very high-level of interaction that can be

achieved in designing a prototype. Therefore, this gives the designer the option of either creating

simple click-through mockups or highly functional, rich prototypes with conditional logic, dynamic

content, animations, drag and drop, and calculations. This way if the designer would like to have a much

richer prototype that is very close to the final product for user testing and showing off to the client, then

they can with this higher level of interaction. This allows the user to test out more than just the look of

the web page, but also the “feel” and the level of interactivity.

Another capability of this particular prototyping application is the fact that any inexperienced

person can use it. Regardless of amount of code experience that a particular user has, they can still use

this application effortlessly to create a prototype design. This application has a list of events and actions

to go along with it that the designers can choose from eliminating the need to code it themselves. This

allows for designers with little to no code experience to create prototypes without a huge learning

curve.

I have already mentioned all of the advantages of this particular application such as its ease of

use, its high-level of interactivity, and its in-depth collaboration feature. However, no application is

perfect and every application has its disadvantages. One disadvantage of Axure RP is that some of the

features mentioned above actually are only offered through the PRO version which is much more

expensive than the regular version at 589 dollars versus 289 dollars, respectively. Also since Axure RP is

a very in-depth prototyping application, it may be far more time-consuming to design a prototype with

this application as opposed to one such as Balsamiq, which is a much quicker and simpler mockup. Lastly,

since Axure RP is very polished and can allow for the prototype to be fully functional, the user or tester

14 

may be deceived into thinking that the prototype is the final version of the web page or user interface,

which can cause a high level of confusion.

For our particular prototype process, we chose “think aloud”. “Think aloud” is a method to

usability testing where the user says what he or she is thinking while running through the designer’s

prototype. The user explains what they are thinking and gives justification why they chose to click on a

certain widget at a particular time and location. The reason may be due to the color, shape, or size of the

widget and this is all pertinent information for the designer. The prototype application, Axure RP, is very

compatible with this process because there are so many options and details that can be added to a

prototype through this application that without “think aloud” the observer would never know all the

thoughts and decisions going through a user’s head unless he spoke them out loud. With Axure RP, the

designer can add events, actions, custom widgets, and even code; therefore, the designer or observer

during the usability testing would greatly appreciate any real time feedback from the tester during the

testing on any of these details.

One aspect of Axure RP that helps to display these options and details for creating a prototype

is the user interface of the application itself. Since Axure RP is a very in depth prototyping application, a

certain level of organization through the user interface is required in order to make the designing

experience as intuitive as possible. The main site map and widget choice are on the left side of the

screen in their own respective frames (figure 8).

15 

(figure 8)

The site map allows the user to navigate through the multiple web pages of their prototype and

the widget library makes it very simple to just drag and drop whatever widget they want on the page

they chose from the site map. In the center of the user interface is the main content, of course, where all

the designing happens. The main designing area even has a ruler both horizontally and vertically so that

everything can line up nice and neat. When a widget is dragged and moved in the main part of the

application there are even regulating lines generated to match up with other widgets already

implemented making it even easier to design a clean page. On the right side of the user interface, there

is a spot where one can add actions to their widgets. Also on the bottom there is a place where the

designer can write down any notes they want to display to other designers regarding the web page

prototype. When I was designing an example web page to test out Axure RP, I had never used this

application before or any prototyping application for that matter. However, the user interface made this

designing process very intuitive and I was able to design a simple mockup in no time.

Overall, Axure RP is a very useful tool in designing prototypes. It can be used for quick mockups

or lengthy, polished, fully functional prototypes depending on what level of detail the designer wants to

achieve. It also depends on what the designer wants the tester to test, whether it is just the look of the

web page or the actual “feel” of the web page. All of these different options allow for Axure RP to be

very flexible and allows for any designer to use it regardless of level of experience in coding.

Axure RP vs. Balsamiq

Overall, the prototyping applications Balsamiq and Axure RP are fairly similar. They both are tools

to aid in the creation of prototypes of webpages to display a designer’s unique vision. However, Axure

RP is a much more in depth application. Balsamiq is typically used for fast, and easy creation of a

prototype mockups. Axure RP has many more options to choose from when designing a webpage

prototype to allow for a much more in depth way to prototype.

Looking at the respective interfaces of each prototype application, one can see the difference in

depth immediately. Balsamiq has a very rough look to it to add to the idea that it is mainly used for quick

prototyping. All the text looks as if it was handwritten and the outlines of all the widgets look like they

were hand drawn. This emphasizes the idea to the designer that these Balsamiq prototypes are not

meant for final evaluations, but more for testing and changing the design early on using potential

end-users as testers. When one looks at the interface for Axure RP, the difference is very obvious. Axure

RP has an interface that is much more sleekly designed with clean-cut lines and very clear text and

widgets. The look of the Axure RP interface is much more professional since Axure RP is used more often

in collaborative design between other individuals within a project. This design allows for easier

readability between multiple design professionals so there is no room for misinterpretation. With

Balsamiq, the collaboration between multiple designers may be hindered because the rough look of the

interface may cause confusion between designers.

This collaboration between designers is just one of the many features of Axure RP. While

Balsamiq allows for collaboration between multiple designers, this feature is not as well developed as

the same collaboration feature seen in Axure RP. Axure RP has a history log as part of the collaboration

feature that shows what your teammate has been working on while you have been away. Axure RP’s

16 

collaboration feature also allows users to work on the same project at the same time from across the

world just like Google drive but for prototypes.

Another significant difference between Axure RP and Balsamiq is that Axure RP has much more

interactivity. This is intentional both for Axure RP and Balsamiq. Axure RP wants to create as much

interactivity as possible so the developer can get a very polished design and as close to the finished

product as possible. This works well for certain projects because some of them may be very complex

and need this extra layer of interactivity so the users can see what the end product will look like.

Balsamiq, on the other hand, is as simple and quick as it can be; therefore, this eliminates the necessity of

this interactivity option. Balsamiq’s idea behind eliminating the interactivity option is that “Too many

times we've seen people spend a lot of time putting a fully interactive prototype together, then

realizing that some features couldn't actually be built or noticing that the user experience wasn't so great

once they implemented the prototype” (Balsamiq.com). Balsamiq also notices that turning a prototype

into a very complex process by adding interactivity can cause problems by everyone not being able to

contribute their ideas equally. Since the prototype would be more complex, it would also be more

inflexible to change making the end product less flexible for the end-user.

The main difference between Balsamiq and Axure RP is the way in which they are used. This does

not mean that one is necessarily better than the other; it just means that each is used for a different type

of prototype creation. Balsamiq is more for quick and simple mockups with its lower level of interactivity

and cleanness and Axure RP is more for highly professional, highly interactive prototypes that take a lot

more time to develop. The designer only needs to decide which prototyping application is most

appropriate for their particular prototyping project and what they want their testers to concentrate on

mainly while testing in order to make their final web page the best it can be.

Conclusion

There are many prototyping applications for users to select from, such as Balsamiq, App

Sketcher, Anetype, and Axure RP. All of the prototyping applications have their advantages and

disadvantages. Balsamiq's main benefit for users prototyping their application is the ability to create

rough ideas fast and have them all in one spot for potential collaboration. App Sketcher gives its users

the ability to create prototypes with a greater level of functionality early on in the development process.

Antetype is made for designers. It has a similar look and feeling of an Adobe product. Aure RP is use for

designing HTML prototypes and wireframes to aid in the implementation of web pages and user

interfaces. Selecting the right prototyping application is all about balancing the abilities and limitations of

the prototyping application in order to meet the user's needs and the needs of their clients effectively.

17 

References:

1. Arnowitz, Jonathan; Arent, Michael; Berger, Nevin (2010). Effective Prototyping for Software Makers.

Retrieved from http://www.eblib.com

2. User Experience Professionals' Association. (2010). Think Aloud Testing. Retrieved from

http://www.usabilitybok.org/think-aloud-testing

3. Nielsen, J. (2012, January 16). Thinking Aloud: The #1 Usability Tool. Retrieved from

http://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/

4. Balsamiq Studios, LLC. (2013). Balsamiq. Rapid, effective and fun wireframing software. Retrieved

from http://balsamiq.com/

5. Greenberg, Saul and Dr. White, K. Design and Prototyping [PowerPoint slides]. Retrieved from Lecture

Notes Online Web site: http://blackboard.umbc.edu/

6. N/A. (2008-2013). Think Aloud. Retrieved from

https://pidoco.com/en/help/ux/think-aloud. Retrieved (Nov. 2013).

7. N/A. (2002-2013). Axure. Retrieved from

http://www.axure.com/. Retrieved (Nov 2013).

8. Klauck, T., & "Phil" (2010). How is Antetype better than Axure? What about iPhone specific

interactions?. Community-powered support for Antetype, . Retrieved from

https://getsatisfaction.com/antetype/topics/how_is_antetype_better_than_axure_what_about_iphone

_specific_interactions

9. N/A. (2013). Designing a Cookbook App with Antetype. Video Tutorials, Episodes 1-5. Retrieved from

http://www.antetype.com/learn.php

10. Stravarius , J. (2012, March 23). Create Stellar Prototypes with Antetype. AppStorm - Mac, .

Retrieved from http://mac.appstorm.net/reviews/graphics/create-stellar-prototypes-with-antetype/

11. Conor, J. (2013, April 1,). 10 Wireframing and Prototyping Tools for 2013. designmodo, . Retrieved

from http://designmodo.com/wireframing-prototyping-tools/

12. Hanamidesign (2011, July 25). Review: App Sketcher – HTML/jQuery Prototype Creation Tool. The

creative work of an anticipatory, experimental User Experience designer with a funny name, . Retrieved

from http://hanamidesign.com/blog/review-app-sketcher-html-jquery-prototype-creation-tool/

13. Balsamiq Studios, LLC (2013). Why Balsamiq Mockups for wireframing?. Balsamiq, . Retrieved from

http://balsamiq.com/products/mockups/

18