table of contents introduction terms - glossary heuristic review information color coding used to...
TRANSCRIPT
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.
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)
Going back up a level the URL for homepersonal.appstremely.com/home
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.
Going back up a level the URL for homepersonal.appstremely.com/home
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
Continued on next slide…..
Page 2 of 3
Action user took Review and suggestions (marked in blue)
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
Continued on next slide…..
Page 3 of 3
Action user took Review and suggestions (marked in blue)
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
Checked the Look and feel of website - Additional aspects of the site such as colors, font, and the tone of the site.
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)
Continued on next slide…..
Page 1 of 2
Action user took Review and suggestions (marked in blue)
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.
Create App first time – (Step 1)
Continued on next slide…..
Page 2 of 2
Step 2 review ahead
Action user took Review and suggestions (marked in blue)
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.
Create App first time – (Step 2)
Continued on next slide…..
Page 1 of 6
Action user took Review and suggestions (marked in blue)
The initial view of the page
(Step 2)
personal.appstremely.com/home/start
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.)
Create App first time – (Step 2)
Continued on next slide…..
Page 2 of 6
Action user took Review and suggestions (marked in blue)
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
Checked the Look and feel of website - Additional aspects of the site such as colors, font, and the tone of the site.
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 2)
Continued on next slide…..
Page 3 of 6
Action user took Review and suggestions (marked in blue)
‘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
Create App first time – (Step 2)
Continued on next slide…..
Page 4 of 6
Action user took Review and suggestions (marked in blue)
‘upload your own app icon’ (Step 2)
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.
Create App first time – (Step 2)
Continued on next slide…..
Page 5 of 6
Action user took Review and suggestions (marked in blue)
‘upload your own app icon’ (Step 2)
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
Action user took Review and suggestions (marked in blue)
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.
Now after clicking on the next button on step 2, arriving in step 3:
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)
Continued on next slide…..
Page 1 of 11
Action user took Review and suggestions (marked in blue)
Now after clicking on the next button on step 2, arriving in step 3:
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.
Create App first time (Step 3)
Continued on next slide…..
Page 2 of 11
Action user took Review and suggestions (marked in blue)
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’.
Create App first time (Step 3)
Continued on next slide…..
Page 3 of 11
Action user took Review and suggestions (marked in blue)
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.)
Create App first time (Step 3)
Continued on next slide…..
Page 4 of 11
Action user took Review and suggestions (marked in blue)
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.
Create App first time (Step 3)
Continued on next slide…..
Page 5 of 11
Action user took Review and suggestions (marked in blue)
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.
Create App first time (Step 3)
Continued on next slide…..
Bug
Page 6 of 11
Action user took Review and suggestions (marked in blue)
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.
Create App first time (Step 3)
Continued on next slide…..
Page 7 of 11
Action user took Review and suggestions (marked in blue)
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.
Create App first time (Step 3)
Continued on next slide…..
Page 8 of 11
Action user took Review and suggestions (marked in blue)
puzzle function previewed during mouseover
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.
Create App first time (Step 3)
Continued on next slide…..
Page 9 of 11
Action user took Review and suggestions (marked in blue)
puzzle function previewed during mouseover
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.
Create App first time (Step 3)
Continued on next slide…..
Page 10 of 11
Action user took Review and suggestions (marked in blue)
puzzle function previewed during mouseover
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.
Create App first time (Step 3)
Continued on next slide…..
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
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
Heuristic Visibility of System Status Heuristic: Consistency and Standards
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: Visibility of System Status
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.
Heuristics Consistency and Standards Heuristic User Control and Freedom
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
Heuristics Consistency and Standards Heuristic User Control and Freedom
Impacts : Step 2 sign on panel
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
Impacts : Step 3 sign on panel
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
Heuristic: Visibility of System StatusHeuristic: Consistency and Standards
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
Heuristic: Visibility of System Status
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.
Heuristic: Visibility of System StatusHeuristic: Consistency and Standards
Impacts: Entire Site manage app pages, top menu bar and visited and unvisited links
Page 4 of 5
Heuristic: Visibility of System StatusHeuristic: Consistency and Standards
Impacts: Entire Site manage app pages, top menu bar and visited and unvisited links
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
Heuristic Visibility of System Status Heuristic: Consistency and Standards
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.