Table of Contents Introduction Terms - Glossary Heuristic Review Information Color Coding used to...

Table of Contents

• Introduction• Terms - Glossary • Heuristic Review Information• Color Coding used to detect severity of

a bug• Part 1 Review - Human Factors Usabilit

y tests • All pages from 1 to 3, first impression of

the first time user• Review of 'Create App first time–Step 1'• Review of 'Create App first time–Step 2• Review of 'Create App first time-Step 3'.• The iPad download experience • The android download experience • Part 2 - review with Heuristics• Good examples of Menu design

• Review - Home Page sections after scroll down

• Login and Sign up pages/modules• App creator wizard heuristics• Error Messages corrections• Buttons Usability• After user logs in page review• Create App sample design example• Dashboard page for user review• Help Design Suggestion for app creator

wizard• Final Report Summary

Introduction - Review of site

• appstremely.com

Part 1

• Shows human factor testing and review done based upon a users experience.

Part 2• This document describes overall site

and its usability based upon its heuristic principles.

In addition - When reviewing a website in detail, we explored many layers, both on the surface and below, including the following

• Task orientation and website functionality

• Navigation and information architecture

• Forms• Trust and credibility• Quality of writing and content• Search and Booking• Help, feedback and error tolerance• Page layout and visual/aesthetic

design• Accessibility• Color and Design flow.

Terms (Glossary)

HeuristicA usability guideline for evaluating a user

interface, which can be used to identify design

problems. Usability heuristics often need to be

adjusted depending on the interface and the

technology used. There are lists of

heuristics that have been compiled by various

people and organizations that are commonly

used for this method.

Heuristic EvaluationA usability evaluation method in which one or

more reviewers, preferably experts, compare a

software, documentation, or hardware product to

a list of design principles (commonly referred to

as heuristics) and identify where the product

does not follow those principles.

Advantages of heuristic review

• It can provide some quick and relatively inexpensive feedback to designers.

• You can obtain feedback early in the design process.

• Assigning the correct heuristic can help suggest the best corrective measures to designers.

• You can use it together with other usability testing methodologies.

• You can conduct usability testing to further examine potential issues.

• We did usability testing in part 1 mentioned in the earlier slide.

http://www.usability.gov/how-to-and-tools/methods/usability-testing.html

Nielsen’s HeuristicsThough many groups have developed heuristics, one of the best-known sources is

the set developed by Nielsen’s in 1994.

• Visibility of system status: The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

• User control and freedom: Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

• Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

• Error prevention: Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

• Recognition rather than recall: Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

• Flexibility and efficiency of use: Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

• Aesthetic and minimalist design: Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

• Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Color coding used to denote severity

High

Medium

Low

PART 1 Reviewhuman factor testing and review done based upon a users

experience.

Action user took Review and suggestions (marked in blue)

User is on personal.appstremely.com/home/start

Even though most everyone knows what an App is, on arrival at the page specified above, there isn’t any indication of what the benefit is for creating an app for oneself.

Going back up a level the URL for homepersonal.appstremely.com/home

User sees, more of a description of items in the app, but no real

Information on the page saying what the benefit is, or even indicate

what type of person would be likely to benefit from having an app.

Even if there could say, something like 'create an app to share

with your friends' or any other info that explains why one

would want an app.

It lacks anything indicating why this would be useful as opposed to a

user who could just as easily post the same content (pics, videos,

etc.) on facebook and letting the friends see it on their smartphone

facebook app.

Page 1 of 3 First impression of the first time user

Continued on next slide…..

Action user suggestion Reviews and Suggestions(marked in blue)


There is a benefit to creating an app, but even after doing

the process myself.

Suggestion I don’t know what it would be – so I would suggest

spending maximum effort strategizing on how to get a benefit

message to come across through the website for the users.

The reason is: I predict some portion of users will find friction in the

process of creating the app, and I can easily imagine that if the

benefit to the user isn’t clearly known, any friction encountered

during the app creation process could lead to abandon of the

process of creating the app.


In other words, any friction experienced by the users during the

entire app creation process will be weighed subconsciously against

the benefit of creating the app, and if that benefit is not fully known

yet, or insufficient, then any friction encountered can lead to a

higher abandonment rate than you would want.

First impression of the first time user


Page 2 of 3


User is on home pagepersonal.appstremely.com/home

User trying to create an app for the first time.

More cognitive steps needed for the user

In my experience of the creation of an app through this site, I

encountered issues that require more cognitive steps than ordinarily

needed, which equates to friction in the app creation.

Checked the Look and feel of website - Additional aspects of the site such as colors, font, and the tone of the site.

Additional aspects of the site such as colors, font, and the tone of the

may contribute to the subconscious reactions to the site that users

will have.

Everyone’s reaction may vary, but the way the site comes across

presently (to an International Audience) is unprofessional based on

look and feel.

Note: This is first impression only.

Future sections explain different aspects that can be improved.

First impression of the first time user


Page 3 of 3


The initial view of the page

(Step 1, the starting point for creating the app, at

personal.appstremely.com/home/start

Lacks a friendly and professional look and feel for the following

reasons:Colors on the site are not well matched a large portion of the above the fold view is a very dark solid colorThe text 'Step1' is unprofessional looking

(should be 'Step 1')Main title of 'sign up' is not friendly (too abrupt / terse)Additionally, the text 'please provide the info below to sign up'

is not friendly and is redundant to ‘Sign up’ in the header


Suggestions to make the initial view friendlier include:

Use more friendly font choices

The big dark banner background at top should be made to be a

friendly color, not depressing/negative as a dark background

conveys.

The strong contrast due to the white on dark color scheme and

the large font in use for the words 'sign up' are contributing

factors to the unfriendliness

Create App first time – (Step 1)


Page 1 of 2


Scrolling Process in Step 1

It is a very good usability advantage that to start the process

only requires a few very easy details to be entered; however, on

a typical 1024x800 view, it requires scrolling down to see what

the limit of the information being asked is.

Suggestion: Because of the very small amount of information being

asked for, there most likely should not be a need to scroll downward

to fill in all of the fields and if scrolling down could be prevented, it

means that it becomes much more obvious that the starting process

is easy. The main point above is just that if the entire first page input

form can be made to always be above the fold and ensuring that the

next button is visible above the fold, possibly by reducing the

unnecessarily large header height, then users will be enticed to start

the process because they will see it as being very easy to begin by

virtue of such an easy first step.



Page 2 of 2

Step 2 review ahead


The initial view/reactions of the page (Step 2)

•Instructions are a bit terse sounding and not friendly, for example “1. We need your basic app info”. So what I would have expected in a site that is competing for the types of users being targeted would be mentioning something like: “First, •We need a friendly name for your app (such as sunny’s App)” •Also it would be appropriate that it would have a direction to the user telling user the next step, along the lines of: “Second, we need a short description of your app.”

A big issue : As a user who had just a minute or two of exposure to the

site and its offering, I found it unpleasant that the site was asking me to

come up with a description since I don’t have a good idea what the final

product would be like or what it would do for me.

Recommend strategizing about whether site visitors will know ahead of

time (at step 2) what the description would be. Furthermore, I would

recommend getting other testers’ opinions on this aspect. If they don’t

have sufficient information prior to step 2 to give a description, then

removing that portion (and putting it as a last step) will help remove any

friction in the process and thus make the process not require any more

thinking that would normally required.



Page 1 of 6



(Step 2)


The main goal should be to never require a user to go

through any extra cognitive steps than necessary, which is

what may be happening if you ask a user to describe

something in step 2 that they haven’t even seen yet.

(This is true even though the users know they are creating

an app, but everyone knows there are so many different

types of apps that exist that to describe one without seeing

it would be pointless.)



Page 2 of 6



(Step 1, the starting point for creating the app, at


Lacks a friendly and professional look and feel for the following

reasons:Colors on the site are not well matched a large portion of the above the fold view is a very dark solid colorThe text 'Step1' is unprofessional looking

(should be 'Step 1')Main title of 'sign up' is not friendly (too abrupt / terse)Additionally, the text 'please provide the info below to sign up'

is not friendly and is redundant to ‘Sign up’ in the header


Suggestions to make the initial view friendlier include:•Use more friendly font choices •The big dark banner background at top should be made to be a friendly color, not depressing/negative as a dark background conveys.•The strong contrast due to the white on dark color scheme and the large font in use for the words 'sign up' are contributing factors to the unfriendliness



Page 3 of 6


‘upload your own app icon’ (Step 2)

This aspect feels odd for several reasons:

Is this the same icon that will show on the user’s phone?

(I am assuming it is, but that would be nice to know for certain so as

to not have any ambiguity.)

Why is it 1024x1024? That’s bigger than my whole old Android

phone screen and my iphone screen.

Even just searching Google images for something to copy, this is

creating an unusual situation because most images that people may

want to use could easily be much smaller.

Suggestion – There is no known technical reason for this size

requirement and I suspect that even if you are trying to

accommodate retina displays with this type of image size, it

may be possible to require much more normal sized images.

Suggestion: Many people won’t really know what the 1024x1024

means Seeing1024*1024 is awkward, it should say 1024 x 1024,

or better, 1024 x 1024 pixels



Page 4 of 6



Suggestion

If it is indeed optional to upload an icon, my suggestion is to not

ask for it at this step, but leave it for the end so that people can

avoid any and all friction during the app creation process.

By including this in step 2, you cloud the process of actually

building up the app just slightly enough that some small

fraction of users may get tired and abandon later on.

The main goal should be to not risk wearing users out before

they get into the main effort of the process.

Unfortunately, after having done the full process, the main effort

comes in two waves, which are the content upload and the app

deployment.



Page 5 of 6



And click on + sign.

Suggestion about the app icon addition

With the app description, I suggest that the app icon be an

added bonus you can add for finishing touch at the end of the

process. This would allow anyone who has become too

mentally worn out by the process to choose to bypass these

aspects and continue to app deployment, instead of abandoning

due to being mentally tired. (And I agree that the process is not

mentally tiresome but there will very likely be a portion of users

who can’t make sense of it easily, based on general statistics

about human skill variations.)

The process of uploading the app icon is rather awkward still,

even with the friendly looking icon for the purpose of uploading.

Users will expect to see a browse button since the process

is calling for an upload at this time; I see the plus sign but it

takes an extra cognitive step to decide what plus sign is for.

Continuing the process, I clicked on the plus sign: it says 'drop

images to upload' but I think you mean 'drag an image here to

upload'. “Drop” is not what any other website would normal

say so it looks awkward and is not a standard.

Create App first time – (Step 2)Page 6 of 6

Step 3 review ahead


Now after clicking on the next button on step 2, arriving in step 3:

Now I see both step 2 and step 3 highlighted in orange so that

doesn’t make sense because step 1 is grey and I know I have

completed it.

Suggestion - Seems like orange should be the current step that I

am on and it isn't behaving that way. Please change that to

orange.


A grammar issue is present in the heading text line of “manage

your contents”.

Suggestion

It should say content, not contents (as is properly done in the

message at bottom).

Create App first time (Step 3)


Page 1 of 11



The line '*You are able to manage....' is not professional

sounding, and there is no asterisk further up the page referring

to this line, which you have marked as present by starting this

line with an asterisk.

Suggestion – Add asterisk.

With regard to managing content through the app, is does not seem

really necessary as user may get confused with this aspect or is the

main goal to say that the content can be changed later?

Suggestion

I think the user will have less information to take in and grasp, if

we just let them know that the content they choose now can be

changed later. Giving them the extra piece of info that says

they have to do it via the app (which is what is been said, i.e., it

can’t be changed on the web) and is more info that is being pushed

into the user’s mind yet, and actually does not add any

smoothness to the process. To add smoothness is just telling the

user that their current choices during app creation can be adjusted

later.



Page 2 of 11


Clicking ‘Add About’

Clicked on 'add about' (bottom right of the 4 choices) which gave

the light box saying 'add about’. This sounds awkward/terse/unfriendly.

Suggestion - Change the wording that would sound much more friendly

(and appear more professional) example: "Here is where you can enter

information about yourself“.

Clicking ‘Add puzzles’

Clicking on ‘add puzzles’ was confusing because it took me to an image

upload. User will feel a mental disconnect.

Suggestion - it would be worth having some friendly text on the lightbox

in this case with text saying for example: ‘upload an image here to turn it

into a tile game inside your app’ (or whatever it is most correctly

described as.) Also - drop images as with others should be drag image

here, not drop.

Clicking ‘Add Videos’

When I click on it, the lightbox popup only lets me add one video (not

multiple videos as in the text of the icon that I clicked on.)

Suggestion - So the icon should not be plural and it should say ‘Add

video’.



Page 3 of 11


Clicking ‘Add Videos”

Continued…

It is awkward and confusing that the lightbox is showing an existing video. It

makes it seem, as if this will be the default video is going into the app.

Input a Video url in the form.

When I input a youtube URL the video above doesn’t change, and I don’t

have anything I can click on to cause it to change. I can only confirm my entry

into the youtube url. As a result, I am left wondering if it took my URL or kept

the existing video that it was showing me. I consider this frustrating and

confusing to the user because it would be much better too not have any pre-

existing video showing in this case.

Suggestion

In other words, if you aren’t going to update it for me or if you aren’t

going to let me click a button to confirm my youtube URL and then let

me see, that you have the proper video still showing in the lightbox.

Please Note:- It is hard to handle the strange youtube URLs that can

sometimes be generated (youtube loves to put lots of strange query string

parameters in the URL after the video ID in various scenarios.)



Page 4 of 11


User has added a video and goes back to 'edit videos'

I see the preview of the video I uploaded. This is good.

Suggestion: So, I would just say that its best to not have a

preview video there from the beginning because it was just

causing confusion.

The icon I clicked said ‘edit videos’ (plural) but as before, I still

don’t see any way that it will let me add a second video - just

lets me change the one I currently have.

Suggestion : - So that’s another cognitive disconnect and

should be fixed either by offering more video URL form fields,

or changing the text from videos to video.

Looking at the right side phone view simulation on this page:

Not until after adding about & video did I realize that the phone

screen image was changing based on which of the 4 content types

my mouse was over. It makes sense that this is what it would do, but

by not knowing this at the start, I didn’t have an easy indication of

what a puzzle was going to look like.

Suggestion: user needs to know somehow that phone screen

image is changing with user input.



Page 5 of 11


Looking at the right side phone view simulation on this page:

Even after I have added content, the phone screen preview during

mouse over doesn’t match what I've uploaded, which I consider a big

problem. It is enticing to look at it, but it takes some effort to figure

out whether it does indeed match what was uploaded, and once it is

figured out that the phone preview doesn't match what was

uploaded, it looks either like the site isn't working right.

Suggestion: This is a high severity bug. It seems intuitively

obvious that if the phone screen content changes depending on

which type of content the mouse is over, then the content

should also be updating to whatever I have uploaded.

I consider this one of the biggest drawbacks of the site at

present because of how strongly it makes the site look

cluttered, aesthetically wrong and therefore as a result, the

preconception of how the app is going to turn out will be also

not good, meaning there will be more likelihood of a user

abandoning the process instead of completing the app creation.



Bug

Page 6 of 11


puzzle function previewed during mouse over event

I see the puzzle function previewed during mouse over, I still don’t

see it as being very helpful because it isn't the standard type of

jigsaw puzzle, instead it’s a movable tile style puzzle.

Suggestion - I think this should be thought about because when

people think puzzle, they might naturally think jigsaw and not

this type. App is injecting extra cognitive steps every time there

is any disconnect or any assumptions on the part of the user

that don’t turn out to be accurate. So for this one you might

look to see if there is any other term besides “add puzzles” that

would be more appropriate, such as “add tile puzzle”.

As with the videos - I see “add puzzles” (plural) but it only lets me

add one, and then after adding, it still uses the plural in the edit mode

but I only have one there and my only option is to remove it.

Suggestion : So it should not be plural.



Page 7 of 11


Next: after clicking on “build my app”:

Only step 4 circle is highligted orange now, so that’s good (unlike

step 3 which showed both steps 2 and 3 circles turned orange color)

Suggestion – correct the title text “step4” to “step 4”

"YOUR APP IS READY. THE DOWNLOAD LINKS ARE EMAILED

TO YOU." The page is made to look uninviting, unfriendly and

incorrect English, overall because in the header, the term

'download' is abnormally large and high contrast.

Suggestion –

Please reduce size and make user message friendly and correct

English.



Page 8 of 11


puzzle function previewed during mouseover

















Page 9 of 11



















Page 10 of 11



















Page 11 of 11

The iPad download experience

• A big concern: the QR code took me to download an app that has a name not relevant to my own app name that I gave. One more issue - I put in the effort to make my own app, but am not getting my own app, I'm getting someone else's app from the app store.

• Furthermore, it turns out that not only is the app name not the one I entered – it says appstreamly in the app store - then when I install and run it, it says Agmo. So now I am on a 3rd app name.

• It also lost and all of my user info. So effort thus far – inputting data, uploading photos, finding and copying/pasting the youtube URL looks futile and not very useful at first view. This is a high severity defect that needs to be fixed.

• I received an email also of course, with the download information. This email looks badly formatted and its wording is not friendly.

• Also, ‘your app is ready' is given in an unfriendly font that doesn’t normally get used anymore in emails.

Suggestion: Email text can say example: 'Congratulations! Your app is ready for installation onto your phone or tablet!'

• Grammatical mistake in the phrase “click here or QR code” in the email.

• In the email, it says click to download the appstremely admin app. This is a mistake – as it did it say my app is ready but then it is pointing me to a completely different app name. This again provides a big mental disconnect to the user as a result some users could find it too confusing to continue. (Clearly this email said my app is ready but then is telling me the opposite, i.e. that I need to download some other app.)

• At this point, I can easily imagine some users seeing too many disconnects from what they thought they were getting into, and then abandoning the process.

• It will be extremely crucial to measure everything possible with Google Analytics or similar, and rely heavily on event tracking code in the creation process as well as campaign parameters in the email links. With the right measurement code in place throughout the site and its emails, finding abandonment points will be much easier.

• The email isn't formatted nicely to look good prior to enabling picture download in the email. I would suggest making the email look much nicer when viewed without images since that’s how it’s going to be viewed by most people in programs like outlook.

Bug Page 1 of 3

Experience after deploying the i-Phone app

• Having to log in after seeing the Agmo app name is confusing; it is clear now that this is no longer an app I created but instead some other unknown app. Some people may even think About security risks and abandon because of that.

• Experience after login through the app:Colored bars at top of screen looks like a TV station with color bars indicating technical Difficulties the video preview didn't show up until I logged out and logged back in.

• The 'demo' wording during login and logout should be removed, they make it look worse by adding further confusion to the concept of creating an app that is not being created with success.

• I clicked play on the video and found it annoying that it wasn’t a real play button, it was a link to another 'screen' that allowed me to play the video outside of the screen I was in.

• I clicked on the menu icon at top left and found the photo albums option, clicked on that, and didn’t see any preview, just a grey image. This got changed to a thumbnail of the image in my album only after going to view the image and back out.

• I clicked on ‘puzzles’ and it worked fine.

• I clicked on contact me, wondered why it wasn’t accurate, so clicked on some fields and entered data. It seems to not accept valid emails that have ccTLD's like [email protected] or .cx (is it restricted to .com, .net, .org for example?)

• During app creation, the about me info tab 'resume' should be asked for.

Page 2 of 3

Experience after deploying the iPhone app

• Also user will feel helpless that it doesn’t tell me, how I can add a resume (since its blank, it ought to be self aware that its blank and offer me the link to go to for adding the resume)• I noticed that the share app option in the about me page only has the iTunes link, but what if I wanted to share to a friend who uses an android? (could be a lot of people)• I don't see where I can manage the app, which I was told I could do from the beginning of the app creation process.• I dont know what the “registration of interest” button is for which I saw after I exited/logged out This is a phrase that may only mean something to certain parts of the world.

Suggestion: There would be a more appropriate term used such as ‘Contact the app developer’

Page 3 of 3

The Android download experience

• Scanned QR code and was hard to read screen but could see 'click here to install' (the text above that was extremely small but pinch & zoom showed

it said 'welcome to <name>app download page').

Suggestion - This whole screen should have been much more friendly & readable if all it was trying to have me do was click to install an app.

• Got a security warning when clicked to install (that normally leads to some abandons)

• I clicked ok on the security warning, and then the 'click to install' button went away, but nothing else shows, seems that it caused a download but this wasn't obvious; downloads are a subtle icon at the top of my android screen that aren't always noticed.

Suggestion - The click to install button can change to 'downloading' or something so that user knows that there is some other process going on that relates to users ability to move forward.

• The download is not progressing at all, and the name of the downloading file is '<Untitled>'

• It clearly got the address to download from, but it says 'waiting for data connection' (which I already know to be working on my phone since I was able to scan the qr & get the download page to come up via my 3g data connection.)

• In case it helps, the download location it is trying to connect to is: mcms2storage.blob.core.windows.net

Part 2 Review

Heuristics and rest of Bugs found

Redesign pages included.

Heuristic: Visibility of System StatusImpact :Home page logo and tagline

Problem HIGHLogo is small and looks insignificant compared to the rest of the elements of the page.

Tag line or a company slogan is missing.

SolutionRedesign the LOGO and its size. Add same colors that are already used on website. Show the

company name and/or logo in a reasonable size and noticeable location. This identity area

doesn't need to be huge, but it should be larger and more prominent than the items around it so it gets

first attention when users enter the site.

Start the page with a tagline that summarizes what the site or company does. Tag lines should be brief,

simple and to the point.

Create Your personal brand by using an effective tag line.

– Tells others who your company is

– Differentiates you and lets others know what makes you unique

– tell users what they'll gain from visiting the site.

Page 1 of 7

http://www.nngroup.com/articles/tagline-blues-whats-the-site-about

Heuristic: Visibility of System Status Heuristic: Consistency and Standards

Impact :Home page, home pages after scrolling down as well.

Problem - High-Text in red color, size is too over emphasized.

- Facebook, twitter icons cover the red line.

- Bulleted points below it word “No” is redundant

and “Free!” is also same as saying “No credit

Card” required.

SolutionEmphasizing the highest priority tasks so

that users have a clear starting point is

good but here it needs proper justification

and formatting.

Give these tasks a prominent location,

such as the upper-middle of the page, and

don't give them a lot of visual competition.

Please take out redundancy and rephrase.

Page 2 of 7

Heuristic: Visibility of System Status

Heuristic: Consistency and Standards Impact :Home page

Problem – VERY HIGHHome page real estate is not used as per standards. User will not realize he has to scroll

down to see rest of the information. page real estate. Formatting is incorrect on a full

resolution screen. There are no visual cues that there is content below the fold.

Solution

The most critical page elements should be visible "above the fold" (in the first screen of

content, without scrolling) at the most prevalent window size (1024x768 as of 2009). If you

have critical content that appears "below the fold" (requiring that the user scroll down), add

visual clues so users know it is there.

This doesn’t mean you should cram everything in the upper area of

the page, just that you should make the best use of that area.

Crowding it with content will just make the content inaccessible;

Page 3 of 7

Heuristic: Visibility of System StatusImpact :Home page and home page continued after scrolling down below fold.

Problem - High“Start Now” button needs more

emphasis and a new placement on

the home page.

Solution

- Button needs to be placed more prominently on this website.

- If it absolutely necessary that user sees this button and that it attracts the users.

- Words in red ‘its easy to build a mobile app are way larger in scale than the ‘Start Now’ button.

Page 4 of 7

Heuristic Visibility of System Status Heuristic: Consistency and Standards

Impacts: Home Page and Entire Site labeling of buttons.

Problem

‘Start Now’ button text is vague, it does not

clearly guide the user what he should do besides

starting some process.

SolutionText of the ‘Start Now’ button can be clearly

changed as shown in the example picture.

“Start your APP here”

“Create App”

The label on actionable interface elements such as a

web button should always tie back to what it will do for

the user. These interface elements shouldn’t be

unclear, questionable, ambiguous. They should be as

obvious as possible.

Page 5 of 7


Impacts Home Page.

Problem

When FAQ is selected, it

changes color to color of HOME

option and they both mix up.

SolutionColors for both tabs should be

distinct and when selected they

should not mix up.

Page 6 of 7


Heuristic: Consistency and Standards Impact :Home page - Menu review on home page

Problem - High

Default state of home page menu bar is shown in the picture.Login and Home are already indicating as if they are selected. The rest of them look white not indicating to the user that menu is clickable.

Solution

Each menu option should have a distinct place As shown in second picture. All menu options have same color but separated by a white space.

Menu design examples shown….on next few slides

Page 7 of 7

Good example #1http://www.ipgbook.com/

The IPG website uses strong contrast to differentiate between the primary and secondary navigation

in the header. Each with five or fewer items, making it easy to scan. The general term “services” is

broken into up into two more descriptive labels “distribution services” and “digital services.”

Good example #2

www.clearleft.com

Good example #3http://dragoninteractive.com

•Dragon Interactive has a colorful jQuery-based menu with a great effect.

Home Page sections after scroll down are reviewed

• Home page has a different design than standards, user has no indication that he needs to scroll down to view all sections.

• Section ahead is a review of exact redesign and also how can we make this easy on the user and also direct the user to view all sections.

Home page total steps, scroll down to see step 2, 3 and 4

Screen 1 Screen 2

Screen 3 Screen 4

Page 1 of 8

Heuristic: Visibility of System StatusImpact :Home page (after scroll down)

Problem

This section is invisible to the user, user has no

indication that he has to scroll down to view it.

“Start Now” button is too small compared to rest

of the buttons shown.

Solution

This should be placed on home page in visible

area above the fold.

Make ‘Start Now’ button prominent and visible.

Page 2 of 8

Homepage redesign suggestion

Clickable tabs

Phone

Very Visible Focal point button

Page 3 of 8

Home Option is removed from main navigation upper menu, it is redundant.

Sub Menus for TAB 1

When clicked

Page 4 of 8

Sub Menu for TAB 2

When clicked

Page 5 of 8

Home page design suggestions

as per standards continued..

Main Navi-Menu: Easy To IdentifyRedesigned home page has a distinct colorful main menu for easy navigation and it meets usability

standards. Upper navigation menu pane of home page needs consistent links such as ‘About us”,

phone to call, Sign up, Account settings, login etc.

• This menu should be common to all pages of the application website.

• ‘Home’ option should be removed from navigation menu, it is redundant on home page.

Emphasize the highest priority tasks so that users have a clear starting

point on the homepage. Give these tasks a prominent location, such as the upper-middle of the page, and don't give them a lot of

visual competition. In other words, if you emphasize everything, nothing gets focus. Keep the number of

core tasks small (1–4) and the area around them clear.

The Tabs shown are horizontal now, but they can also be placed vertically on left hand side. This is

only a suggestion. When user clicks a TAB, content will be exploded to the user and they will be

automatically and intuitively guided to scroll down the panel to view all contents. Existing design is not

doing this, so that needs to be redesigned.

Page 6 of 8

Home page design suggestions

as per standards continued..

Make Tabs More Prominent (please refer to redesign home page suggestion slide, it has TABS)

If you are using tabs to show and hide content, make sure they are prominent and that each tab describes its content well. Tabs are a great space-saver and some say they allow for more creativity

in a design. But don’t risk the user overlooking potentially important content.

By making tabs prominent, you enable users to find more information easily should they need it. Also, being more descriptive in your labeling makes clear to the user what they should expect to see.

Page 7 of 8

Include a homepage link to an "About Us" section that gives users an overview about the company and links to any relevant details about your products,

services, company values, business proposition, management team, and so forth. The recommended

name for this link is "About <name of company>

Include a "Contact Us" link on the homepage that goes to a page with all contact

information for your company. If you want to encourage site visitors to contact your company directly,

instead of seeking information on the website first, include contact information such as the primary

address, phone number, and email directly on the homepage. Contact Info: Make It ClearIf you want visitors to get converted into customers, you need to give them a clear path of

contacting you. If a visitor couldn’t contact you with ease, he/she will surely switch to some

other relevant website.

Include a "Privacy Policy" link on the homepage, If your site gathers any customer

Information.

Home page design

suggestions as per standards continued..Page 8 of 8

Heuristics Consistency and Standards Heuristic User Control and FreedomImpacts : Login and Sign up pages/modules

Problem – HIGH Sign up looks independent, separated and disconnected from

rest of the site pages Sign Up page is a part of wizard and is a mandatory step 1. It

does not have any way for user to go back using Back button. Browsers page will take you back

to home page. User has no control. No Breadcrumbs. No Help for user or explanation about why sign up to create an

app. No Logo shown on this page. No agreement button box where user gets a chance to read

terms and agreement and sign it. Optional and mandatory fields are not clearly marked on input

form. Common navigation menu is not shown on the page. Lot of valuable white space has been wasted. Title SIGN UP overly sized.

Part 1 of 5

Heuristic Visibility of System Status

Heuristic User Control and Freedom Impact: Sign Up Step

Solution

Home page logo should be present on every page of the site so that user can go to home page from anywhere.

Include common navigation on the topmost pane of this page. Privacy policy should be shown when a user signs up first time. He should also ‘agree’

with the policy and check the box where he agrees. Already a user or Login link has to be given for a user who has already signed up and is not first

time user. This gives control to the user. Title of the app sign up step 1 page can be resized and made smaller. Input form can have a small border in purple color. Help link can also be shown.

Part 2 of 5

Redesign suggestion Sign up page

Part 3 of 5

Heuristics Consistency and Standards Heuristic User Control and Freedom

Heuristic: Visibility of System StatusImpacts: All input forms for sign on and login sections and app creator wizard

Required and Optional fields standards• There is no clear distinction between "required" and "optional" fields on forms.

Need a clear exit for the user.• Only way user can exit from step 2 or step 3 of these forms is by using browser BACK

button. Having this wizard where user has to click NEXT and not have a way to go back in the wizard is not making user feel safe.

Wizard Buttons standards• There is no tool tip help for the buttons and links. Please provide tool tips.

Provide Context sensitive Help and FAQ section

• No Help provided to the user or FAQ on app creator wizard, it should be provided.

Part 4 of 5

Heuristic User Control and FreedomImpacts : Login and Sign up pages/modules

Problem – very high severity

User who just wants to sign up without creating an app is not handled on the site.

Solution

User is now forced to create app along with the sign up and create an app and go thru all

4 steps.

Part 5 of 5

App creator wizard steps

• Complete heuristics of all steps on App creator wizard.


Impacts : Step 1 sign on panel

Problem - HIGHThere is a no clear distinction between "required" and

optional fields of the sign up input form.

Left hand side has a lot of white space wasted.

Submit button is too small in size and is not justified with

the form correctly.

Solution

Mark all required fields with a red asterisk symbol.

Add a value paragraph for the user telling me why he

should sign up and that it is just one time he would need

to do so. See example http://technology.blurgroup.com/submit-a-brief

Resize the button and left justify it correctly.

Part 1 of 5



Problem – HIGHThere is a no clear distinction between

"required"

and optional fields of the sign up input form.

‘Next’ button is too small in size. Graphic is far

away from input form.

SolutionMark all required fields with a red asterisk

symbol.

Move the dynamic cell phone picture graphic

slightly closer to the input form.

This will show user preview clearly of his

actions. Add a line that says “See your preview”

inside the graphic image. See example:-

See cell phone graphic on this pagehttp://www.appsgeyser.com/getwidget/

FeedbackFans.com%20Website%20Usability%20Testing/

Part 2 of 5

Heuristics Visibility of System Status Heuristic User Control and Freedom


Problem- When user selects any action on this page, the respective box is highlighted. Color used however is not high contrast. It is very light in comparison with element that is not selected.- No instruction given to the user that

he can click on “step 2 “ to go to step 2 and toggle between step 2 and step 3

SolutionWhen user selects an element, make it visible by changing it to a dark red or burgundy or any other high contrast, keep this consistent throughout the site.

Bring the cell phone graphic closer for easier preview of user actions.

User should be clearly helped with instructions that he can go back to step 2.

Part 3 of 5

Heuristics Visibility of System Status Heuristic User Control and Freedom

Impacts : Step 3 and Step 4 sign on panel

Problem:-No exit strategy for the user in the last step4. In step 3, when user clicks ‘Build my App’ button, user has no confirmation box that asks the user, if the user is sure he wants to create an app or if he has missed any

information and he can revert back. A progress bar called “Processing…” appears and step 4 page appears as shown in the picture.-Help says “Use your phone to scan the QR code to download the generated app!. An assumption is made that user knows how to do this action.

SolutionThere needs to be a way out of this panel and user should be given the control. A cancel button should always be there. A confirmatory message needs to be shown to the user before he submits the final step.The site supports novice and expert users by providing different levels of explanation (e.g. in help and error messages).

Part 4 of 5

App create wizard step 4 - When BACK button of the browser on step 4 is clicked, user is not taken to a step 3, instead a message is displayed that makes user to leave the page or stay on page. This is a bug. Back button should take user to step 3.

Bug Part 5 of 5

Error messages corrections

• The next few slides will point error messages that need to be grammatically corrected on the entire site.

Problem: Wrong EnglishSolution – Reword the error to say

The album includes 1 photo. Are you sure you want to delete the album?

Bug

Problem: Wrong EnglishSolution – Reword the error to say

Are you sure, you want to delete the photo?

Bug

Problem: In step 2 of app create wizard - Preview shown looks like bad formatting

Solution – Need a check of number of characters allowed in the input form and need

preview formatting.

Bug

Problem: Step 4 of app create wizard – General info page shows the following formatting

Solution – Need a check of number of characters allowed in the input form and need good formatting. This is not looking good.

Bug

Buttons usability

• Next few pages explain the usability of Buttons and standards to follow and should be followed on the entire site.

General standards for buttons

Wizard Buttons standards -Tool tip help for the buttons and links should be provided inside a wizard.

Calls-to-Action for the user on any page -The calls-to-action are above the fold, and they apply good messaging techniques. “Get

an Instant Quote” sets the expectation for the visitor and uses the correct action (rather

than, say, “submit” for a form, or “free trial” for software). Example: Order the brochure is

a call to action.

Consistency of button shape, color and design -Buttons that do actions, such as NEXT, SUBMIT etc should have same look and feel on

entire site. They all should have same color, shape and size.

Text on buttons –

Should be underlined, when mouse over event takes place text should change color.

Underline indicates to the user that button is clickable. This is especially useful when

button is done with a graphic as seen on this site.

Page 1 of 3

Heuristic: Visibility of System StatusHeuristic: Consistency and Standards Impacts: Button events and action standards

Please Note: This is applicable to all buttons and action icons on site.

Page 2 of 3

General guidelines for Links usabilityImpact: Entire site.

Links should look like links

Users should never have to guess if something is clickable or not. Traditionally, color and underlining have been used together to convey that a piece of text functions as a link. Used together, this combination continues to be the most recognizable form of linking in text.

Some things worth keeping in mind when creating links:

• Clickable items should stick out from everything else. Color alone doesn’t always do a link justice, because a website usually has colored elements that aren’t links. This is why the combination of color and underlining is a safe indication that something is clickable.

• Don’t make non-links appear clickable by using the color and underlining combination. This can confuse the user as to what is clickable.

• Try to use the same style for all links in a certain area and from page to page. Don’t use different colors for links, and don’t underline some links and not others.

• Links should have different states. When styling links, pay attention to their hover, active and visited states. This way, users will know when they’re hovering over a link, when they’ve pressed it and when they’ve visited that page before.

Page 3 of 3

After Login – existing user pages review

Heuristic: Visibility of System StatusHeuristic: Consistency and Standards

Impacts: Entire Site manage app pages, top menu bar and visited and unvisited links

Problem- The upper navigation pane is inconsistent with the design of the home page navigation. - ‘General Info’ and ‘manage’ are not easily detectable as clickable hyperlinks. -Color coding for visited links also is not meeting standards.-Page does not have a title that is relevant to General Info and something that describes the screen contents.

SolutionThe upper pane should look similar to the home page upper pane and color scheme also should be reflected on this page for Consistency. Logout button should be looking same as Login button on home page.User needs to know that he is on General Info page. It is not clearly shown to the user he is on that page for General info as it is not highlighted as being selected. Instead Logout is highlighted. Highlight General Info.Every Page should begin with a title or header that describes the screen contents.

Continued on next slide….

Page 1 of 5


Impacts: Entire Site manage app pages, general info page

ProblemGeneral info page sections are not visible below the fold. User has to know that he needs to scroll

down to continue with rest of the actions of the page.

SolutionThere has to be a clear direction to a user to scroll down and view rest of the page

below the fold.

Consider redesign of this page - A TAB design can also be included for various sections as shown on

redesign of HOME page. Please refer to that slide for home design example.

Page 2 of 5


Impacts: General info page

ProblemPublish Now action section is at the very bottom of the

‘General page.

Solution – needs redesignThis should be made very visible to the user as

mentioned in the earlier slide.

Some content help needs to be told to the user upfront

that ‘here is where you would publish your app” or

Write a small paragraph of what general section

entails.

Page 3 of 5

ProblemPage has no main header eg: Manage your App, telling user that this is manage page. It does show Albums. - The upper navigation pane is inconsistent with the design of the home page navigation.-When user selects the action icons called Videos, Puzzles, about me, color changes to a color that is inconsistent from what was shown on home page. ‘Contact me’ icon color change when

clicked is correct however. -In case of a mouse over action on a particular icon selection, no indication to the user that the icon is clickable.

SolutionThere should be main header on each new page. It helps to show breadcrumbs eg: manage->AlbumsUpper navigation should be consistent with home page upper pane design.

Icons when selected, the color change should match what is shown

under ‘in your app’ section of home page.

Underline PHOTOS, Videos, Puzzles to show that they are links even if they are embedded inside an icon graphic.



Page 4 of 5



ProblemAll action buttons are placed very far away from

the visible area of the screen, user has to

maximize browser size to see ‘Puzzles’ and ‘Add

Photo’.

Solution

Reduce the distance and reposition all

action buttons in center of the frame so

that they are highly visible.

Page 5 of 5

Example of one more app create wizard

Please see next few pages that show a design of an app create steps

walk thru.

Good example of a header and breadcrumbs inside an app wizardStep 1 a

*Notice the header below. And the cell phone preview screen on the

right.

Page 1 of 5

Good example of a header and breadcrumbs inside an app wizardStep 1 a with help pop ups

Page 2 of 5

Good example of a header and breadcrumbs inside an app wizardStep 1-a (scroll down) showing the lower part of the wizard with CREATE APP button

Page 3 of 5

Good example of a header and breadcrumbs inside an app wizardStep 2- showing check box to agree with the terms and service.

Redesign suggestion for create app wizard, have a agreement checkbox.

Page 4 of 5

Redesign suggestionSee marked below in red circles. Download button is very clearly placed. What next is telling user exactly what to do next. This is similar to ‘General info’ tab, here its called DASHBOARD. Use of TABS like EDIT,

STATISTICS help the data to stay above the fold and user does not need to scroll down.

Page 5 of 5

Appstremely General Info – user dashboard page

Heuristic Visibility of System StatusImpact: Dashboard page

Problem: Dashboard page has 4 sections and users have to scroll down to see each section, there is no

indicator that tells user to scroll down.

Solution : Design with horizontal TAB sections. Need a redesign of user dashboard page, see suggestion on previous slide (#52).

Page 1 of 3


Impact: Dashboard page and entire site

Problem:All the graphical analysis shown on this page should be explained to the user and

not just pictorially represented.

Users may wonder why and how these calculations show a particular number.

Solution

Have a “help” link or a ‘small paragraph” telling the user on each section of this page,

what it is about. Users will have questions come up about the numbers and values shown

on this page and to make those values better.

Or

Next slide shows an example of how to show help on a given wizard page.

Continued on next slide…

Page 2 of 3

Redesign - Help Design Suggestion for app creator wizard.Also see Arrow icon that asks the user to click for more options that are below the fold of the

screen so user will scroll down.

Breadcrumbs also add

Value.

Page 3 of 3

Final Overall Report

• The process does work but has enough things that don’t match up intuitively that there are extra cognitive steps required for users. Minimizing the number of cognitive steps in any process like this one where you are dealing with the full spectrum of human intelligence is crucial in order to statistically minimize abandons.

• I would suggest that the product offering is not fully ready for primetime and could use human-factor testing in order to solve some of the biggest issues, such as helping to convince people why they would want to have an app like this when Facebook is already an app that provides similar interactions, and what the advantages are over Facebook or similar social network apps.

• Having good content for users to entice them to create apps that are more personal to them and also can be quickly created, stating the time factor and money factor as well.

• In my overall opinion after doing the full process and trying it on both ipad and android, I find the effort invested in creating and downloading and logging in to be cumbersome and not worth the trouble after seeing the resulting app.

• Solving this issue would mean surveying as many other users as can be feasible at this time and identifying if this is a recurring experience and if so, then the business risk of this aspect should be evaluated and handled.

Date post:	25-Dec-2015
Category:	Documents
Upload:	lesley-benson
View:	220 times
Download:	0 times

Table of Contents Introduction Terms - Glossary Heuristic Review Information Color Coding used to...

Documents