Upload
vongoc
View
230
Download
1
Embed Size (px)
Citation preview
Prototyping Project
Brian Frey | [email protected]
Julia Agro | [email protected]
David Welsh | [email protected]
Kevin Bryant | [email protected]
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