Table of Contents Review - Home Page sections after scroll down

Table of Contents 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 Terms - Glossary Heuristic Review Information Color Coding used to detect severity of a bug Part 1 Review - Human Factors Usability 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

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.

Advantages of heuristic review
Terms (Glossary) 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. Heuristic A 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 Evaluation A 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.

Nielsen’s Heuristics Though 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 Review human factor testing and review done based upon a users experience.

Review and suggestions (marked in blue)
Page 1 of 3 First impression of the first time user 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 home personal.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. Continued on next slide…..

Action user suggestion Reviews and Suggestions(marked in blue)
Page 2 of 3 First impression of the first time user Action user suggestion Reviews and Suggestions(marked in blue) Going back up a level the URL for home personal.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. 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. Continued on next slide…..

Page 3 of 3 First impression of the first time user Action user took Review and suggestions (marked in blue) User is on home page personal.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. Continued on next slide…..

Page 1 of 2 Create App first time – (Step 1) 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 color The 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 Continued on next slide…..

Page 2 of 2 Create App first time – (Step 1) 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. Continued on next slide…..

Step 2 review ahead

Page 1 of 6 Create App first time – (Step 2) 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. Continued on next slide…..

Page 2 of 6 Create App first time – (Step 2) 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.) Continued on next slide…..

Page 3 of 6 Create App first time – (Step 2) 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 color The 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 Continued on next slide…..

Page 4 of 6 Create App first time – (Step 2) 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 Continued on next slide…..

Page 5 of 6 Create App first time – (Step 2) 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. Continued on next slide…..

Page 6 of 6 Create App first time – (Step 2) 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.

Step 3 review ahead

Page 1 of 11 Create App first time (Step 3) 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. 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). Continued on next slide…..

Page 2 of 11 Create App first time (Step 3) 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. Continued on next slide…..

Page 3 of 11 Create App first time (Step 3) 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’. Continued on next slide…..

Page 4 of 11 Create App first time (Step 3) 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.) Continued on next slide…..

Page 5 of 11 Create App first time (Step 3) 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. Continued on next slide…..

Page 6 of 11 Create App first time (Step 3) 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. Bug Continued on next slide…..

Page 7 of 11 Create App first time (Step 3) 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. Continued on next slide…..

Page 8 of 11 Create App first time (Step 3) 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 ED 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. Continued on next slide…..

Page 9 of 11 Create App first time (Step 3) 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. Continued on next slide…..

The iPad download experience
Bug The iPad download experience Page 1 of 3 Grammatical mistake in the phrase “click here or QR code” in the . In the , 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 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 links. With the right measurement code in place throughout the site and its s, finding abandonment points will be much easier. The isn't formatted nicely to look good prior to enabling picture download in the . I would suggest making the look much nicer when viewed without images since that’s how it’s going to be viewed by most people in programs like outlook. 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 also of course, with the download information. This 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 s. Suggestion: text can say example: 'Congratulations! Your app is ready for installation onto your phone or tablet!'

Experience after deploying the i-Phone app
Page 2 of 3 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 s that have ccTLD's like or .cx (is it restricted to .com, .net, .org for example?) During app creation, the about me info tab 'resume' should be asked for.

Experience after deploying the iPhone app
Page 3 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’

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

Heuristics and rest of Bugs found Redesign pages included.
Part 2 Review Heuristics and rest of Bugs found Redesign pages included.

Heuristic: Visibility of System Status Impact :Home page logo and tagline
Page 1 of 7 Problem HIGH Logo is small and looks insignificant compared to the rest of the elements of the page. Tag line or a company slogan is missing. Solution Redesign 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.

Heuristic: Visibility of System Status Heuristic: Consistency and Standards Impact :Home page, home pages after scrolling down as well. Page 2 of 7 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. Solution Emphasizing 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.

Heuristic: Visibility of System Status Heuristic: Consistency and Standards Impact :Home page
Page 3 of 7 Problem – VERY HIGH Home 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;

Heuristic: Visibility of System Status Impact :Home page and home page continued after scrolling down below fold. Page 4 of 7 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.

Heuristic Visibility of System Status Heuristic: Consistency and Standards Impacts: Home Page and Entire Site labeling of buttons. Page 5 of 7 Problem ‘Start Now’ button text is vague, it does not clearly guide the user what he should do besides starting some process. Solution Text 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.

Heuristic Visibility of System Status Heuristic: Consistency and Standards Impacts Home Page.
Page 6 of 7 Problem When FAQ is selected, it changes color to color of HOME option and they both mix up. Solution Colors for both tabs should be distinct and when selected they should not mix up.

Heuristic: Visibility of System Status Heuristic: Consistency and Standards Impact :Home page - Menu review on home page Page 7 of 7 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

Good example #1 http://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 #3 http://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
Page 1 of 8 Screen 1 Screen 2 Screen 4 Screen 3

Heuristic: Visibility of System Status Impact :Home page (after scroll down)
Page 2 of 8 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.

Homepage redesign suggestion
Page 3 of 8 Phone Clickable tabs Very Visible Focal point button Home Option is removed from main navigation upper menu, it is redundant.

Sub Menus for TAB 1 Page 4 of 8 When clicked

Sub Menu for TAB 2 Page 5 of 8 When clicked

Home page design suggestions as per standards continued..
Page 6 of 8 Main Navi-Menu: Easy To Identify Redesigned 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 7 of 8 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 8 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 directly on the homepage. Contact Info: Make It Clear If 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.

Heuristics Consistency and Standards Heuristic User Control and Freedom Impacts : Login and Sign up pages/modules Part 1 of 5 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.

Heuristic Visibility of System Status Heuristic User Control and Freedom Impact: Sign Up Step
Part 2 of 5 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.

Redesign suggestion Sign up page
Part 3 of 5

Heuristics Consistency and Standards Heuristic User Control and Freedom Heuristic: Visibility of System Status Impacts: All input forms for sign on and login sections and app creator wizard Part 4 of 5 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.

Heuristic User Control and Freedom Impacts : Login and Sign up pages/modules
Part 5 of 5 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.

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 Part 1 of 5 Problem - HIGH There 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 Resize the button and left justify it correctly.

Heuristics Consistency and Standards Heuristic User Control and Freedom Impacts : Step 2 sign on panel Part 2 of 5 Problem – HIGH There 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. Solution Mark 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 page

Heuristics Visibility of System Status Heuristic User Control and Freedom Impacts : Step 3 sign on panel Part 3 of 5 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 Solution When 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.

Heuristics Visibility of System Status Heuristic User Control and Freedom Impacts : Step 3 and Step 4 sign on panel Part 4 of 5 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. Solution There 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).

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. Part 5 of 5 Bug

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

Problem: Wrong English Solution – Reword the error to say The album includes 1 photo. Are you sure you want to delete the album? Bug

Problem: Wrong English Solution – 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
Page 1 of 3 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.

Heuristic: Visibility of System Status Heuristic: Consistency and Standards Impacts: Button events and action standards Page 2 of 3 Please Note: This is applicable to all buttons and action icons on site.

General guidelines for Links usability Impact: Entire site.
Page 3 of 3 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.

After Login – existing user pages review

Heuristic: Visibility of System Status Heuristic: Consistency and Standards Impacts: Entire Site manage app pages, top menu bar and visited and unvisited links Page 1 of 5 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. Solution The 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….

Heuristic: Visibility of System Status Heuristic: Consistency and Standards Impacts: Entire Site manage app pages, general info page Page 2 of 5 Problem General 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. Solution There 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.

Heuristic: Visibility of System Status Impacts: General info page
Page 3 of 5 Problem Publish Now action section is at the very bottom of the ‘General page. Solution – needs redesign This 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.

Heuristic: Visibility of System Status Heuristic: Consistency and Standards Impacts: Entire Site manage app pages, top menu bar and visited and unvisited links Page 4 of 5 Problem Page 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. Solution There should be main header on each new page. It helps to show breadcrumbs eg: manage->Albums Upper 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 Status Heuristic: Consistency and Standards Impacts: Entire Site manage app pages, top menu bar and visited and unvisited links Page 5 of 5 Problem All 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.

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 wizard Step 1 a
Page 1 of 5 *Notice the header below. And the cell phone preview screen on the right.

of 5 Good example of a header and breadcrumbs inside an app wizard Step 1 a with help pop ups

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

of 5 Good example of a header and breadcrumbs inside an app wizard Step 2- showing check box to agree with the terms and service. Redesign suggestion for create app wizard, have a agreement checkbox.

Redesign suggestion See marked below in red circles
Redesign suggestion See 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 Status Impact: Dashboard page
Page 1 of 3 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).

Heuristic Visibility of System Status Heuristic: Consistency and Standards Impact: Dashboard page and entire site Page 2 of 3 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…

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.

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.

Table of Contents Review - Home Page sections after scroll down

Similar presentations

Presentation on theme: "Table of Contents Review - Home Page sections after scroll down"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Table of Contents Review - Home Page sections after scroll down

Similar presentations

Presentation on theme: "Table of Contents Review - Home Page sections after scroll down"— Presentation transcript:

Similar presentations

About project

Feedback