Adesiyan Report on GUI effectiveness

Running head: EVALUATING SMARTBUILDER 0

Evaluating the HCI Quality of SmartBuilder and the Effectiveness of Its Argument

Jelilat Adesiyan

University of Houston-Downtown

Abstract

This report evaluates SmartBuilder’s HCI quality as well as well as the effectiveness of its

argument. Using software design and HCI, the interface designers created a web WYSIWYG

(what you see is what you get) application in an attempt to persuade instructional designers and

project managers (the audience) to use the application above others. Should the argument be

successful? Below is the attempt to analyze the web application for its argument as well as the

quality of the HCI in order to answer that question. In order to evaluate the Quality of HCI I used

the following criteria; Visual/ Selective attention capability, Stimuli to response compatibility,

Help Indication/Information availability, Feedback Loop, Familiarity/ Appeal to convention,

Accessibility, Interactivity, Negative/Positive goal congruency, Input technology/Browser

compatibility, Attractiveness/ Unity of Graphics & Color, and Appeal to user’s knowledge. In

addition to the HCI quality criteria, I used the following criteria to evaluate the software’s

argument; credibility, learnability, repetition, intuitiveness and pricing.

EVALUATING SMARTBUILDER 1

Introduction

The application that will be analyzed today is the web software application SmartBuilder,

version 3.14. It has previously been used to create a lesson titled “how to create a multi-page

template”. Ultimately, the purpose of this report is to evaluate the software's argument and

whether it can be successful in persuading the audience to "purchase and/or use the software,

give good reviews about it to others, and in some cases contribute to its development or support"

(Bjork). Ultimately, in order to evaluate the success or failure of the software's argument from a

technical communicator’s perspective, in addition to other qualities, the quality of the HCI must

be evaluated. HCI software developers have a hand in every software application that is created

today. As Jacko (2012) writes “HCI software developers contributed innovative tools that

enabled programmers and nonprogrammers to create interfaces for widely varying applications

and diverse users. HCI professionals developed design principles, guidelines, and sometimes

standards dealing with consistency, informative feedback, error prevention, shortcuts for experts,

and user control” (p. xv). As technical communicators, the evaluation of the quality of HCI is

important overall to the success of a tool and how the user perceives it.

SmartBuilder is an e-learning authoring tool. According to SmartBuilder's marketing

blurb, it is "an e-learning tool that enables one to create custom e-learning without writing code"

(SmartBuilder.com, n.d.). Before the screencast assignment, I had never heard of, or interacted

with this tool before. However, after watching a few tutorials about the application, I gained a

better sense of the types of functions it could carry out. I had hoped it would help me in creating

interactive, and animated objects within documents. Ultimately, I learned how to create multi-

page templates and drag & drop items.

Before using the application on my laptop, I looked at the website to find more

information about the tool. The tool is divided into two main editions; the community edition and

the professional edition, which can be either hosted on the web or installed on a server. I was

able to get information on the audience of the tool and the types of things it was purported to do.

The website listed their key features and put up supporting documentation to show the types of

things that one would be able to do with their program. However, what most interested me at

first glance was the HTML 5 logo (figure 1).

Figure 1: New HTML 5 Feature


It was prominently displayed on the first page, and I dare say, put there to catch the eye of an

audience member like myself. Of course, this got me excited. When coupled with the types of

examples on the examples page (which was the first tab in a row of tabs), my expectations were

exceedingly high. The website was also purported to be highly interactive. On the home page, it

was written, “Move beyond page turners and canned interactivity” (home page). Strangely, it

seemed to me, the home page was mostly full of accolades and client names. These accolades

and client names, coupled with the user reviews that rotated on the left side of the screen made

my expectations soar even more.

I had signed up for the program with the intention of learning how to do things like the

examples on their website (figure 2).

Figure 2: Example from "Examples" page

Those examples were highly interactive. On the whole, I was not too surprised by the interface of

the application (see figure 3), but I had thought it might look a bit different because of the

HTML 5 addition.


Figure 3: SmartBuilder Interface

I had thought it would look more like Adobe Dreamweaver once the user somehow activated the

HTML 5 function. In truth, one of the advantages of the program that the website stated was that

you did not need to write code. However, I had thought that this “new” function would let

professionals write code. I was misunderstood. On a second look, I saw that the shiny new poster

actually said “publish to html5” (see figure 1). The design of the image made it so that the

HTML 5 words were the primary focus of the message.

I went in with those expectations and was slightly disappointed. However, I did learn

how to do several things. I learned how to add and configure objects, create basic interactivity,

create a Master Page, create a timeline, group objects using a display, use multiple display sets,

create a basic drag and drop, and add gaming elements to a drag and drop. I basically learned

how to insert and remove objects, create a timeline showing what will happen in a lesson, create

drag and drop quiz types and make them interactive by adding movements to them. I was able to

learn these functions using the SmartBuilder tutorial. SmartBuilder was good enough to include a

tutorial pop-up (figure 4).


Figure 4: Tutorial Popup

It helped me reactivate my old habits from using InDesign, which was useful here. The tutorials

were very interactive. For example, when I was learning how to do something, I was able to

actually practice. It was not just videos. Although there is a video page where one can watch

videos detailing such processes, I only had to go through the tutorial once to learn how to use

most of the features.

The tutorial I created for the screencast assignment fulfilled a need that was not

specifically addressed until the user came across the problem. For the tutorial, I taught the

audience how to create multi-page templates. After attempting to save one of the lessons I

created as a template, I realized that SmartBuilder only allows the user to create one page

templates. I was able to solve this problem by advising users to simple copy a lesson using the

“save as a copy” feature, and then change the name of this new lesson. This allowed them to

leave the original lesson unchanged, and therefore available for use as a template of sorts.

The Rhetorical Situation

Audience. In assessing the marketing materials for this application, from the home pages and the

examples page (first contact with the application), my first thought was that it was for a teacher.

This was because the page title, "E-learning authoring tools and services". My previous

interaction with the term "e-learning" had come from articles that had to do with e-learning with

tools like Blackboard. After much more contact with their website, I realized that it was geared


towards project managers and instructional designers who want to create interactive pages for

teaching a lesson (figure 5).

Figure 5: Product Page

I consider myself to be a member of their audience because even though their tool is obviously

geared towards project managers and instructional designers, as seen in figure 5, it is clear from

the simplicity of their message that other technical writers in different sub-genres are welcome as

well.

Despite the amount of reviews on the website that stated the simplicity of the tool, I was

still uncertain as to its level of complexity. The latest feature of the tool, the HTML 5 feature,

indicated that the audience of the tool was shifting direction to a bigger audience with HTML 5

knowledge (See figure 1). I forged on to the tool itself, hoping that my previous knowledge of

HTML 5 would prove useful to me.

Interface designers – Rhetor. The interface of the web application looked simple and

familiar due to my previous knowledge of Adobe InDesign (See figure 6 & 7). The placement of

navigational buttons as well as the whiteness of the screen when one attempts to create a

document is similar. The first look at the design created an impression that it was designed to be

simple and not complex.


Figure 6: Adobe InDesign Interface - Retrieved from http://me.westfull.org

Figure 7: SmartBuilder Interface


Purpose. Using software design and HCI, the interface designers created a web

WYSIWYG (what you see is what you get) application in an attempt to persuade instructional

designers and project managers (the audience) to use the application above others. Should the

argument be successful? Below is the attempt to analyze the web application for its argument as

well as the quality of the HCI in order to answer that question.

Method

Quality of HCI

Below are the criteria with which I will evaluate the quality of the HCI;

Visual/selective attention capability (Jacko, 2012, p. 8): The ability of the interface design

of a software tool to keep your attention on what is relevant, as opposed to the whole page is

useful. Attention in the selection and execution of action is a good criterion to check for

because the ability of a user to complete their task might dictate whether or not they come

back to use the software tool. As Welsh et al. (2012) write, “attention and action processes

are so tightly linked that the dedication of attention to a particular stimulus automatically

initiates response-producing processes that are designed to interact with that stimulus” (p. 7).

If the page is cluttered or filled with excessive features at a time when the user does not need

them, the user can get lost in doing things other than their primary task. If the user cannot

accomplish their primary task, they might resort to other tools that help them concentrate

better. These tasks might have to do with their jobs, and so the more they complete those

tasks, the better for their lives.

Stimuli to response compatibility : In discussing stimuli to response compatibility, a look at

the stimuli and their response should be evaluated. Does a stimuli produce an expected

response, and is the response indicated somehow? For example, does an icon that is green

mean go in some form or another? A response (go) that the color green (stimuli) usually

creates an expectation of. As Proctor and Vu (2012) write, “If one stimulus has the meaning

“left” and the other “right,” performance is better if the left stimulus is mapped to the left

response and the right stimulus to the right response, for all stimulus and response modes” (p.

29). Do the stimuli respond as it is supposed to? Does an icon that has a video reel as its icon

produce the desired effect? Here, we might speak a little about convention, particularly

online conventions and what is expected by users who frequently use the web.

Help Indication/ information availability: Does the design include some kind of help

indicator that can assist the user when they are stuck? So, is this indicator placed in a manner

and place where the user can view it whenever it is needed without working too hard? Is it

placed in a manner that is too distracting for the user while they are completing their tasks?

In addition, does it respond in a manner that is not obstructive? Does the software come with

help documents, whether FAQ forums, tutorials or a blog that can help the user get

information when they come across a problem or a feature they cannot use for some reason

or another? As Jameson and Gajos (2012) write, “presentation of results via means like pop-


up windows risks being obtrusive […] but if the presentation is too subtle, users will often

ignore the information that is offered and derive little or no benefit from the system” (p. 441).

Therefore, it is important that not only is some form of help available, but that it is placed

and responds in a suitable manner. Additionally, we might ask, does the software come with

help documents, whether FAQ forums, tutorials or a blog that can help the user get

information when they come across a problem or a feature they cannot use for some reason

or another?

Feedback Loop: Is there a way for the user to participate in some type of feedback to the

designer? Feedback is important to making an application more user friendly. If there is a

way for user to review the product or bring up issues with the product, the product will be

more user friendly. Furthermore, this avenue for feedback also provides other users with

potential solutions until the system has been updated. So, is there a community of some kind

for issues and solutions that is easily accessible to users? As Cao (2015) iterates, “Feedback

— what it says, when it comes, how it looks — is your part in the human-computer

interaction” (thenextweb.com). The users have to be able to participate in the process in some

ways so that their needs are viewed as paramount.

Familiarity/ Appeal to convention: How familiar is the graphical interface? Does the

software do what others in its same category do? For example, if it is categorized as a

spreadsheet maker, does it at least make a spreadsheet? That is, does the application behave

in a similar manner to others in its category? And if it does not, does this new change

improve its ease of use? The more familiar the interface is, the faster it is for the user to

comprehend. As Sutcliffe (2012) adds, “we understand the world by making sense of it with

our existing long-term memory. Consequently, if multimedia content is unfamiliar, we

cannot make sense of it” (p. 389). The more unfamiliar the interface, the more negative

emotions it may inspire in the user.

Accessibility: Technology is pervasive and affects the lives of everyone. As such, everyone

should be considered when designing an interface. Hanson (2012) supports this view when

she writes that “the ability of everyone to participate in our increasingly technological society

is crucial. “(p. 940). So, it is crucial to evaluate whether an application is accessible to older

adults, those with low literacy skills and those with disabilities. According to Gribbons

(2012) “there are an estimated 876 million illiterate adults in the world, which represents

nearly a quarter of the world’s population” (p. 915), and according to the National Institute

on Deafness and Other Communication Disorders (NIDCD), “about 28 million people in the

United States have some degree of hearing” (As cited in Hanson, 2012, p. 933). Older adults

are a big number of both populations, and since this is a technological age, it is important to

make technology accessible to them as well. Czaja and Lee (2012) iterate the importance of

including older adults in the HCI domain when they write that “given that older people

represent an increasing large proportion of the population and will need to be active users of

technology, issues surrounding aging and information technologies are of critical importance

within the domain of human– computer interaction (HCI)” (p. 757). Ultimately, those with


disabilities, older adults and those with low literacy skills need to be considered in the HCI

domain as well.

Interactivity: The more interactive an interface is, the more the user can create habits that

can then be repeated to make their experience more pleasant. According to Sutcliffe (2012),

“Interaction design is essentially a set of choices along a dimension from simple controls

such as menus and buttons where the user is aware of the interface” (p. 399). Anything that

makes the user aware of the interface would then be considered interactive. Interactivity

stimulates the memory, an important part of habit forming, so that the user can remember

what processes to carry out to complete their task without having to learn the process again.

As Sutcliffe (2012) states, “More vivid experience that forms better memories […] memory

is an active process. Interaction increases arousal and this make the user’s experience more

vivid, exciting, and memorable” (p. 390 - 391). The more vivid and arousing an interface is,

the more pleasant a painful task might be.

Negative/ positive emotional goal congruency: Individuals have negative and positive

emotions based on the progress of their intended tasks. When a goal (task) is not progressing

as expected, it creates negative emotions of stress. Are there any interruptions to the use of

the software that can create stress and other negative emotions? Does the software allow the

user to have more positive emotions than negative ones? As Szalma, Hancock & Hancock

(2102) write, “when individuals appraise events relative to their desired outcomes (goals),

negative, “goal-incongruent” emotions and stress can be produced if such events are

appraised as hindering progress. Conversely, promotion of well-being and pleasure occurs

when events are appraised as facilitating progress toward a goal (i.e., goal-congruent

emotions). Promotion of pleasure and happiness […], therefore, requires the design of

environments and tasks themselves that afford goal-congruent emotions” (p. 58). The more a

task is viewed as progressing, the more positive the emotions of the user get. The software

should be created in such a way that it facilitates more positive than negative emotions. In

addition, does the cognitive workload that the application present appear to be neither too

low nor too high? As Szalma, Hancock & Hancock (2102) write, “[…] computer-based tasks

that impose either too much or too little demand will likely be appraised as stressful. In the

latter case, the underload stress will be interpreted as boredom (61). If the cognitive workload

imposed upon the user too high, there will be more negative emotions of stress than positive,

and if it is too low, feelings of boredom that can lead to distractions can defer the completion

of a task.

Input technologies/ Browser Compatibility: Does the application require a special input

technology, modality or interaction technique that is not well suited to the type of software

category? (Hinckley & Wigdor, 2012, p. 97). Furthermore, does the application work with at

least three of the popular web browsers? Does it require special intermediary devices (other

than a keyboard and a mouse) to make it work? That is, do you have to download a program

or buy a special type of device to make it work? Consider a software application that allows

people to paint digitally, further enhanced by a stylus that allow people to perform the same


functions they could with just their hand. An average user might create a better painting

using a stylus than their hands. If the interface designer considered the differences (based on

data) that arose from an average user using either their hand or a stylus, and (for example)

saw that an average user could create a much better painting with a stylus, considering that

idea while designing would be reasonable. If the designer then went one step ahead and

created a special stylus as opposed to one that their audience member could get from any

retailer, that might curtail the size of their users, especially if the designer went even further

and added special tasks that could only be completed by that special stylus. If the user had

actually decided on that particular software based on a task that only the special stylus could

do, and they did not know beforehand that they had to have the special stylus, this would

hinder their task and create negative feelings towards that application. As Hinckley and

Wigdor (2012) reiterate, “A designer who understands input technologies and the task

requirements of users has a better chance of designing interaction techniques that match a

user’s natural workflow and that take appropriate advantage of a user’s innate abilities” (p.

100). Understanding the task requirement of a user and the type of input technology that

might be useful in making their tasks much more pleasant is a good skill for a designer to

have. A user who draws on their tablet with their fingers will realize that the task might be

much more pleasant with a stylus. However, if they had to have a special stylus, they might

not want to use that application and might in fact opt for another instead.

Attractiveness/ Unity of Graphics & Color: Is the application attractive to look at? Are the

color themes constant throughout the tool or website? It is important to evaluate the

attractiveness of a website. Sutcliffe (2012) supports this notion when he writes that, “the

attractiveness of multimedia is now a key factor especially for websites” (p. 388). In

addition, he writes that “attractiveness is often influenced more by content than the choice of

media or presentation format (p. 395). So, does the application stimulate and engage users

due to the attractiveness of its interface? That is, is the content that which will be attractive to

a potential audience member? The more attractive the interface is, the more stimulating it is

for the user, and the more pleasant their task will be for them.

Appeal to user’s knowledge: Does the visual content presented on the page appeal to the

user’s knowledge? Are the expected icons present? Does it appeal to the diverse user? That

is, does it contain information that the novice and professionals will both find useful? The

information presented will not mean the same to each user. A novice user might ignore

something that a professional user of that application category might find extremely useful.

Sutcliffe (2012) supports this notion when he writes that “the information people assimilate

from an image also depends on their internal motivation, what they want to find, and how

well they know the domain” (p. 389).

Software's Argument

Below are the criteria with which I will evaluate the software's argument;


Visual/selective attention capability: For the same reason listed above.

Stimuli to response compatibility : For the same reason listed above.

Familiarity/Appeal to Convention: For the same reason listed above.

Credibility: The credibility of a website affects how the user perceives the website. The

more credible the user finds the site, the more interested they might be in purchasing its

product. Does the application create feelings of trust for the user in any discernible way? If it

does, how does it do it?

Help indication/ information availability: For the same reason listed above.

Learnability: The ease of learning affects how the user views a product. Is the tool easy to

learn or at least presents itself as easy to learn? Are the terms used to refer to objects written

in simple English or a simple form of whatever language it is written in? Does it do what it

advertises it can do? Do goals have to be modified to a lesser or higher degree after seeing

that what the software was advertised to do requires much more effort than was advertised?

The higher the degree of goal modification, the higher the level of learnability. That is, if the

tool encourages the new user to increase the complexity of their work, they (the user) then

must perceive the tool as easily learnable.

Accessibility: For the same reason listed above.

Interactivity: For the same reason listed above.

Attractiveness/ Unity of graphics & color: For the same reason listed above.

Repetition: Are there repetitions of the same features? And, are there a number of ways to

do one thing? Repetition causes the user to form habits that can change their outlook on the

easiness of the tool. The more repeated the features, the easier it seems to use.

Intuitiveness: Is the software intuitive? Can a user perform basic functions without any

previous tutorials? The intuitiveness of a tool can affect whether a user recommends the tool

to an audience member like themselves.

Input technology/ Browser Compatibility: For the same reason listed above.

Pricing: Is the application free to use? The price of an application is sometimes a

determining factor, especially since there are others in its category that are free.

Table 1: Evaluation Criteria Comparison

Criteria HCI Software’s Argument

Visual/selective attention

capability

Stimuli to response

compatibility

Help Indication/Information

availability

Feedback Loop

Familiarity/ Appeal to

convention


Accessibility

Interactivity

Negative/ positive emotional

goal congruency

Input technologies/ Browser

Compatibility

Attractiveness/ Unity of

graphics & color

Appeal to user’s knowledge

Credibility

Learnability

Repetition

Intuitiveness

Pricing

Findings

It should be noted that my findings are mostly relevant to users who have the same

reactions as I do. As an audience member, I am able to use my experiences with the tool to

evaluate it. Every user is different and as such might have different reactions than I do to certain

stimuli. As Szalma, Hancock & Hancock (2012) write, “one person’s threat is another’s

challenge (p.57). As such, my findings will need to be replicated among a larger sample in order

to provide even more useful information. In evaluating the HCI quality, I focused mainly on the

interface, while with the software’s argument, I focused on both the website and the software

interface. I focused on the website because it was the part that “sold” the message. Furthermore,

it was the true starting point for a potential user. I found that the interface met most of the HCI

criteria and that it’s software argument is potentially persuasive to the audience.

The website and application graphical interface were stable and did not require the user to

keep shifting their attention to features that might hinder whatever task they were working on at

the moment. In evaluating the visual/selective attention capability, I was looking for any abrupt

change to the interface that required exogenous attention. According to Jacko (2012),

“Exogenous shifts of attention are typically caused by a dynamic change in the environment such

as the sudden, abrupt appearance (onset) or disappearance (offset) of a stimulus […], a change in

the luminance or color of a stimulus […], or the abrupt onset of object motion” (p. 8). To

evaluate that criteria, I simply created a new lesson and carried out the simple function of

creating a multi-page template. I thought this action was a good choice to use because it was the

lesson I had created a tutorial for, and as such, it was familiar to me. I worked on the template for

a few minutes, and in that time, there was no dynamic change in the environment. There were no

popups of any kind, nor did any image suddenly take a shift of color, thereby prompting my

attention. In fact, the interface seems to have been built so that a user can decide to focus only on


certain aspects of a page or all of it. This function is assisted by the separation of the layers panel

and other features panels from the whiteboard. The white board is right in the middle of the page

and the only thing that is a part of it, from the onset, is the page number icon (see figure 3). The

segments (panels and whiteboard) of the interface allow for good attention interaction. You can

even make your whiteboard bigger, thereby taking even more prominence on the page, and

somewhat exclude other items on the page (see figure 18). In addition, the icons are very small in

comparison to the whiteboard, and so it is quite clear what your attention should focus on. In

terms of the website, each page has a testimonial that changes when the page is refreshed, and

also after a set time.

Figure 8: Testimonial Example

The testimonials all have the same style and format and so the change is not jarring, and did not

require a shift of attention from me. The website, although colorful, did not exhibit any

unexpected, colorful movements that might require exogenous shifts of attention on all pages.

The response to stimuli capability of the graphical interface & website were suitable. In

evaluating the stimuli to response compatibility, I looked at whether a stimuli produced an

expected response. To test this, I decided to use icons because they produce an immediate

response when pressed. To do this, I tested the first few icons. I restricted my choice to the first

few actions because they were basic functions while some of the others required for something to

be on the board first (figure 9).

Figure 9: First Few Icons


The first icon I tested was the video icon. I was able to tell that it was the video icon because the

icon image was that of a video reel, and the icon had a caption that said video once I hovered

over it. Next, I clicked on it. As I expected, based on the familiar convention of image/function

congruency, I got the response I expected. A video placeholder popped on the whiteboard. My

experience with the video icon rang true for the other icons as well. The website also responded

as it was supposed to. The navigational tabs were aptly named and did not surprise me with an

unexpected category of information.

The website and interface both have help indicators that allows the user to have access to

help information. Before creating a lesson through the application, the user has two avenues for

reaching help. First, once the user is logged in, there is a popup that provides an option to see

video tutorials and other help information (see figure 4). If the user closes that popup, there is

also the option of “Learning resources” on the main page (figure 10).

Figure 10: Learning Resources

When creating a lesson, a user has access to three help indications; live support, forum and help

links are available for the user. They are placed at the top right hand corner of the page which is

typical. It does not look too distracting but I had to look for it just a little bit longer. It was out of


bounds of the icons that affect the whiteboard (figure 11).

Figure 11: Help Indicator

When I clicked on all three help links, it responded quickly by opening new windows, which was

a suitable response. The website also had a Support page that had these options as well (Figure

12).

Figure 12: Website Support Page


The website also has a Blog page that users can access. Users also have the opportunity to “Ask

a chat question” on the website via the “Live support chat” link in the software interface. In

addition, users can “request a live demo”, “sign up for free training sessions”, and access the

FAQ page via the website (Training section) and application.

The software and website both have avenues for feedback and there is evidence that there

is a feedback loop. In evaluating the feedback loop process, I looked at both the website and

software interface. The live support, forum and help links were all manners in which a user could

send feedback to the interface designers. The website also has a support page with all three

features and an additional feature, “the SmartBuilder group” (see figure 11). According to

SmartBuilder.com, “the purpose of the User Group is to support SmartBuilder users by

facilitating discussion around elearning design, elearning authoring, graphic design and

SmartBuilder usage” (n.p.). It was also evident that they had used the feedback somehow

because this was version 3.14 of the software (figure 13).

Figure 13: Version 3.14 Indicator

The notation attached to the announcement of the new version is located on the home page, so it

is immediately visible to the user. In addition, it advises users to see the forum for new

enhancements and bug fixes, further encouraging the user to communicate with them.


The graphical interface is similar to other types of application in its software category. In

evaluating familiarity and appeal to convention, I looked at the interface and website. As I stated

earlier, the interface is familiar to me, as it should be to those who use Adobe InDesign (see

figure 6 & 7). Adobe InDesign is a very popular and trustworthy tool. The similarity of

SmartBuilder to Adobe InDesign also contributes to its credibility. The website, although

transient in its content, did not differ all that much in organization and style, in comparison to

other websites of that category. The only notable difference, as I stated earlier, was that the home

page was full of accolades and major client names (figure 14).

Figure 14: Home Page

This was a little off-putting to me at first, and I kept having to double check the URL to make

sure it was on the home page.


The website was not completely accessible while the interface seemed, overall,

accessible. To check if the website was accessible, I ran it through 508checker.com and

PowerMapper. I got the website (508checker) through the w3 (world wide web consortium)

website, a reliable website. The 508checker website checks for website compliance. The 508 law

is a good standard for evaluating all websites for accessibility even though it is only enforced in

federal agency websites. According to 508Checker, the SmartBuilder website was not 508

compliant (figure 15).

Figure 15: 508checker complaint result


According to 508checker, it contained errors that would affect people with vision loss (low

contrast), people with hearing loss (missing form label and everything in the yellow area), and

other common errors that might affect everyone.

I also used PowerMapper which I found on Google to perform accessibility standard

testing. I have never used it before, and that’s why I also used 508 checker which I got from a

more credible source. PowerMapper checks WCAG 1.0 & 2.0 and Section 508 compliance. For

checking WCAG 2.0 standards, it uses “117 tests covering A, AA and AAA guidelines”

(powemapper.com, n.p.). For checking WCAG 1.0 standards, it uses “89 tests covering A, AA

and AAA guidelines”, and for checking Section 508 standards, it uses “56 tests covering 15

guidelines” (powemapper.com, n.p.). It also checks HTML, CSS, JavaScript, PDF, GIF, and

Flash formats. According to PowerMapper, the SmartBuilder website was 63% complaint (figure

16).

Figure 16: Overall Results

PowerMapper also checks for readability and usability (see Figure 17) which affects low literacy

readers. SmartBuilder did pass the readability test (Figure 17).

Figure 17: Readability Result via PowerMapper


The report was long and detailed. Due to the length of the report, I have attached a link to the

report. The interface, I considered accessible to people with visual problems because it had

alternate text popups that whatever device they were using to read could see. In addition, as I

stated earlier, the user can make the whiteboard bigger (figure 18).

Figure 18: Zoom Feature

The website and interface are interactive. Anything that makes the user aware of the

interface is interactive. In terms of the website, the color combination and the cartoon on the

pages made my experience more vivid (figure 19).

Figure 19: Cartoon Theme

This is an

image of an

enlarged

whiteboard.

Notice the zoom icon.

http://try.powermapper.com/Reports/a0667729-c930-49b7-879a-a6529211b08f/report/map.htm


The cartoon was a consistent theme on each page, although every image was different. The

examples page of the website also had examples that were interactive (see figure 2). The

examples varied and one could actually see what a lesson could look like. Once you clicked on

the examples, it would take you through a lesson, and all the lessons required your participation

and attention. These features all piqued my interest in the application. The application itself also

had a WYSWYG (what you see is what you get) feature that gave me the ability to see my

changes, via the preview lesson icon. This helped me as a user to be more engaged in what I was

doing.

The software created mix feelings of negative and positive emotions. To test

negative/positive emotional goal congruence, I chose to use the task I used for my tutorial

because it was stressful for me. However, most tasks were straight forward, and as I have stated

earlier, response to stimuli compatibility was suitable in terms of overall tasks. However,

particularly with my tutorial task (creating a multi-page template), I had to go and look for a way

to accomplish that task. Although there was a template feature, it only allowed the user to save

one page templates. I was not aware of this till I tried to access my template and saw that it only

had one page. I tried again and again thinking I had messed something up, and finally had to go

and look for a solution. I was able to find a solution from SmartBuilder itself online, but I could

not quite grasp it. I tried to do what they said, but I was so stressed by then that I could not

comprehend what they wanted me to do. So, I came up with my own solution. However, before

I came up with my solution, I had tried several times to create multi-page templates and this

created negative emotions of stress for me. It was so stressful that when I finally saw their

solution, after expecting a straightforward solution, I did not even understand it. It was only after

a few days and after I created my solution that I was able to then comprehend what they were

saying. But by then, it was too late.

The application does not require anything more than a computer that has a browser. The

application works with at least three of the popular web browsers; Internet Explorer, Google

Chrome and Safari. However, as I stated earlier, the professional version can be installed on a

server. SmartBuilder does not require any special intermediary devices, nor do you have to

download a program to use it.

The website and graphical interface are attractive to look at. There is a unity of graphics and

color. The colors are compatible (green and burnished yellow). This color theme is prevalent in

both the website and the graphical interface.

Some of the features of the software appeals to varying user’s level of knowledge. The

interface, as I have stated earlier, is quite similar in looks to Adobe InDesign. It is more than

similar in looks, it also has many of the same features, such as graphic, video and audio

placeholders. These are familiar features than even a novice user would expect, yet there are also

professional features that someone who uses authoring tools frequently would expect to see. For

example, the “publish to HTML 5” feature might not mean much to a novice audience member,


but it might mean a lot more to someone with much more professional knowledge. This appeal to

the user’s knowledge was also present in the webpage via the Publish to HTML 5 poster (figure

1).

The application creates feelings of trust for the user. The website home page has a list of awards

and accolades. It also has a list of big name, popular clients that users might recognize (see

figure 14). The pricing page also has a rotating list of real user reviews (testimonials) (see figure

8). The similarity to Adobe InDesign also contributes to its familiarity, which then contributes to

its credibility.

The tool presents itself as easy to learn. The icons and other written words are written in

simple English. Does it do what it advertises it can do? In some ways yes. I certainly learned to

do new things, such as to create interactive drop and drag items. In addition, the tutorials make

things seem easy to learn. The pervasive presence of learning resources on both the website and

via the application interface does not hurt either. My goals did have to be modified in a lower

capacity after using the tool itself. I think that if a novice user of authoring tools had a goal like

the ones in the examples, it would require them to spend more time than I have spent on the tool.

A professional might have more luck creating examples like those that SmartBuilder presented.

Overall, I believe that more preparation and a plan could make the tool much easier to use. If the

user has a goal, then I think they could achieve it using the tutorial lessons.

There are repetitions of the same features in terms of colors and image types. As I stated

earlier, the cartoons are a consistent theme on the website. In the software application, there are

several ways of performing the same action. For example, you can open a lesson via the home

page or via the lesson folder (figure 20).

Figure 20: Accessing the Lesson


The software is intuitive. For example, the icon images are indicative of the

corresponding feature. In another case, the system also helps you keep track of the changes youre

making. For example, if a user attempts to exit a page when they haven’t saved their changes, the

system will prompt the use to save it (figure 21).

Figure 21: Intuitive save prompt

The system also autosaves changes so that if something changes accidentally, the user can

recover their original documents (figure 22).

Figure 22: Autosave Popup

I was able to perform basic functions without a tutorial. For example, I was able to start creating

a new lesson right away (figure 23).


Figure 23: Create a New Lesson

The application is free to sign up, but not completely free to use. The website advertises the application as free to sign up, which is technically true. However, that idea can be misleading

because there are other versions that a user can purchase that would provide more features. As I stated earlier, the tool is divided into main two editions, the community edition and the professional edition, which can be either hosted on a server or installed (Figure 24).

Figure 24: Pricing


The community edition is free while the professional edition is not. There are only a few notable

differences between both editions, however, many of the tools unavailable on the community

edition will be very useful for the workplace (Table 2).

Table 2: Notable differences between both editions

Features Community Edition Professional Edition

PowerPoint Import – Download Content – Translation Tool – Review Tool – Collaborate with team

members

–

The download content feature can be useful for downloading a lesson for packaging purposes.

The translation tool can be useful for translating the lesson to other languages. Collaboration is

also useful in cases where the user is part of a team. The Support page which does not say

anything about pricing, also has a sign that says “Next step: Sign up for free” which can be

misleading to users who did not do enough research (see figure 12).

Recommendations

Overall, the website is well designed and the HCI quality is high. However, I have some

recommendations. They are as follows; create more visibility for help indicators, work on

accessibility, create a more straightforward way to create multipage templates, and work some

more on the in-house tutorials..

The Help indications blended in although it was placed at the conventional place. My

recommendation would be to make it a color (maybe white) that does not blend in too much, and

yet does not divert the user’s attention constantly. Another option can be to create an icon next to

the help indicators, maybe one in green and white or yellow to match the color theme of the

organization. This should help draw the attention of the user only when they need it because they

are already used to that color theme, and would not be easily distracted by it. In fact, it might

make it easier for their eye to snag it when they need it. The user should not mistake the icon for

a link especially since the actual links are underlined and therefore denote themselves as links, as

is conventional.

There should be more research into the accessibility of the website and application interface,

even though SmartBuilder is not a federal agency. One of the ways in which this can happen is

for the organization to sign up for PowerMapper since it checks for other types of compliance as

well. Another option is to hire an in-house team that can keep the application and website up to

date as changes are made to accessibility laws. The website needs to fix the HTML coding in


order to repair some alternate text information, a redundant link, create heading levels and

generally fix other coding errors. 508 checker also caught the low contrast problem between the

background and foreground. This might require a rebranding or a slight darkening of either the

foreground or background color.

The multi-template issue should also be corrected. SmartBuilder can fix the multi-page

template issue by creating a feature for it or simply change the current template commands. Due

to finances, another option could be to make the multi-page template a part of the FAQ. It is not

part of the FAQ questions at the moment.

The examples on the examples page seem complex once a novice user starts working

with the application. One of the ways in which this can be repaired is for the website to create

tutorials that can guide the user in creating that exact example. This can create a feeling of trust

on the user’s part. Although there is a live free demo, it often seems like a complicated step to

take because users usually have not downloaded the application once they see that a demo can be

requested. Furthermore, demos like that often inspire distrust in users. From personal experience,

I view demos as a marketing tool that usually requires me to hand out information about myself,

which usually leads to me receiving sales pitches. Having a demo that can be accessed in a few

steps and without any handout of information from the user can be helpful in persuading the user

to download even the professional version, especially if some features from the examples can

only be accessed via the paid version.

If these recommendations are considered, the website and application will be more user

friendly and perceived as such by users.

Conclusion

Overall, the software is making a convincing argument, and the quality of HCI is high. The

presence of a free community edition is persuasive to the audience. This can lead the audience to

at least try out the application. The application does not need to be downloaded, which makes it

different from some other types of authoring tool in its category. The home page was full of

accolades and major client names which is an appeal to ethos that can be very convincing to

users. Users will more likely trust a tool that has other trustworthy users. The color theme and

cartoon images were vivid and dynamic, which made the tool memorable. The interactivity level

of the examples of lessons also piqued my interest in the website and seemed like something

even I could do.

Ultimately, this website would be successful in convincing a potential user to try it out.

The software is also user friendly and promotes human-computer interaction.


References

508Checker. (n.d.). Retrieved from http://www.508checker.com/check

Cao, J. (2015). How to change user habits with interaction design. Retrieved from

http://thenextweb.com/dd/2015/03/11/how-to-change-user-habits-with- interaction-

design/

Czaja, A. & Lee, K. (2012). Older Adults and Information Technology. In J. A. Jacko (Ed.), The

human-computer interaction handbook: Fundamentals, evolving technologies, and

emerging applications (3rd ed., pp. i-1405). Florida: CRC Press.

Gribbons, W. (2012). Universal Accessibility and Low-Literacy Populations. In J. A. Jacko

(Ed.), The human-computer interaction handbook: Fundamentals, evolving

technologies, and emerging applications (3rd ed., pp. i-1405). Florida: CRC Press.

Hanson, V. (2012). Computing Technologies for Deaf and Hard of Hearing Users. In J. A. Jacko

(Ed.), The human-computer interaction handbook: Fundamentals, evolving


Hinckley, K. & Wigdor, D. (2012). Input Technologies and Techniques. In J. A. Jacko (Ed.), The



Jacko, J. A. (2012). The human-computer interaction handbook: Fundamentals, evolving

technologies, and emerging applications (3rd ed.). Retrieved March 27, 2016, from

http://site.ebrary.com/lib/uhdowntown/detail.action?docID=10558361

Jameson, A. & Gajos, K. (2012). Systems that Adapt to their Users. In J. A. Jacko (Ed.), The



Proctor, R. W. & Vu, K. L. (2012). Human Information Processing. In J. A. Jacko (Ed.), The

http://www.508checker.com/check




SmartBuilder. (n.d.). Retrieved from http://www.SmartBuilder.com/

Sutcliffe, A. (2012). Multimedia User Interface. In J. A. Jacko (Ed.), The human-computer

interaction handbook: Fundamentals, evolving technologies, and emerging applications

(3rd ed., pp. i-1405). Florida: CRC Press.

Szalma, J. L., Hancock G. M., & Hancock, P. A., (2012). Task Loading and Stress in Human–

Computer Interaction. In J. A. Jacko (Ed.), The human-computer interaction handbook:

Fundamentals, evolving technologies, and emerging applications (3rd ed., pp. i-1405).

Florida: CRC Press.

Welsh, T. N., Chandrasekharan, S., Ray, M., Neyedli, H., Chua, R., & Weeks, D. J. (2012).

Perceptual-Motor Interaction Some Implications for Human– Computer Interaction. In J.

A. Jacko (Ed.), The human-computer interaction handbook: Fundamentals, evolving


W3. (n.d.). Retrieved from http://www.w3.org/WAI/ER/tools/

http://www.smartbuilder.com/

http://www.w3.org/WAI/ER/tools/

Documents

Adesiyan Report on GUI effectiveness