Skip to content

Instantly share code, notes, and snippets.

@git2samus
Last active August 29, 2015 14:17
Show Gist options
  • Save git2samus/ae0ff853f919824406e8 to your computer and use it in GitHub Desktop.
Save git2samus/ae0ff853f919824406e8 to your computer and use it in GitHub Desktop.
UX Review - PaperRater

UX review - PaperRater.com

General Comments

These comments apply to the site as whole.

Load time

The page loads pretty fast and that's good, there's however many improvements that can be done such as caching of assets, etc.

Chrome has an "audit" function on the developer tools which provides good hints on this area.

Look'n'feel

I personally like the appearance of the site yet I get the feeling that it's from a different era.

I don't know if it's the grid-like layout or the type of buttons used but I get the impression that it hasn't been updated in a long time and that's not a good thing on today's web, people unconsciously choose sites that are pretty and look modern.

I don't want to criticize Dave's work and I'm not capable of doing anything better myself so I think the best here would be to look for a Web Designer or even a Graphics Designer, someone more in touch with the art than the code and have it provide us with the guidelines to implement on Rails.

Advertisement

It would be nice to configure the Google Ads to not show competitors' pages, as of this moment it's showing me a link to an external plagiarism checker (grammarly).

It even seems like part of our site since it's mixed with the services we offer, I guess you can have trouble with Google because they have a policy that says you're supposed to put the ads clearly separated from your content so your visitors don't click them without knowing it's an ad.

Mobile

While I understand that the site will be very hard to use on mobile I think some effort should be made to make it at least more accessible for these technologies.

Visitors will come from all different sources, if they like what they see they'll come back to use it but if they are on the phone and have trouble understanding what the site is about we'll lose them.

Homepage

I find the organization of the homepage a bit confusing, it looks as if there's several different features but none of them are linked, the only link there is goes to the paper grader and it's not even marked as such, it just says "use now free" which hints for a single-feature website.

Even the page linked as "features" doesn't have links so I keep wondering where all this advertised functionality can be found.

There's links to other stuff on the footer but in terms of usability that's non-existent, nobody ever looks at that; it's important because web crawlers use it but not the human visitors.

I suggest that we choose what features will be advertised on the homepage and link to each of them separately so there's a 1:1 connection between the message and the navigation.

Free Paper Grader

Flash messages

The first thing I notice is the "You are viewing a basic version of PaperRater" flash message at the top, it reminds me of the messages on StackOverflow which use a similar approach.

I get that the intention is to capture the user's attention and that is successfully accomplished, there's however an implicit convention that uses red as a hint for an error and that's not the case here so a different color might work better (or not, this is mostly subjective).

Another important aspect of this is the fact that you're telling the users they can upgrade to Premium but you're not telling them why, just by looking at that message I don't know what extra features the Premium offers so I'm not compelled to upgrade.

Title

There's an inconsistency between the URL, the title and the heading of the page which may be confusing for some people (think bookmarks).

If possible we should try to have those three elements convey the same message and be clear about what that specific page does, people should be able to tell if that's what they're looking for just by looking at any of the three.

Central banner

I think the large banner with the image of the monitor looks great on the homepage but it gets a bit in the way here.

The reason is that on the homepage people is figuring out the site's purpose, it's an introduction as well as a presentation but here the user is already engaged on an activity and it's ready to start working.

When land on this page the first thing I see is the banner not the tools I need to perform the action I came for, it even has a button saying "Get Started Below" so it's kinda bouncing me for no reason at all.

In the "action pages" would be best to focus on providing the tools as the central action and have everything else as a secondary focus of attention.

Report a problem

This block seems a little misplaced, I think it's too large for the content it has and it's also too far from the central focus of the page given its relevance.

In my opinion a decorated link or button that doesn't take too much space and is further up on the page would be best, something like the "feedback" tab that opens a popup for instance.

Actually it should be part of the feedback since it's the same action and users may naturally use that for both, perhaps expanding the current feedback control to show both would be best.

Input controls

The controls in general serve its purpose here but in terms of presentation the default browser decorations are the ugliest, it would go a long way to have these a bit more styled and in harmony with the rest of the page appearance.

Paper

I think a very obvious omission here is the ability to upload documents, we're talking about stuff that normally has several pages so copying and pasting is rather inconvenient.

There's also a need for rich-text inputs, our system may not need that to function but I'm sure the original documents won't be plain text and it may create some dissonance for the user to "see" something that is not what they're used to work with.

It also makes it harder for them to process the results since they'll be checking a "flattened" version of the rich document they have on their heads.

As an additional feature it'll be nice to have the ability to import documents directly from Google Drive and other sources.

Of course all this may be part of the premium package but in that case it's essential to advertise it here.

A good example of this approach is the way WolframAlpha motivates you to upgrade to Pro, they let use the site for free but there's plenty of limitations and whenever you hit one of those they suggest that you upgrade.

It's a little annoying but it's not intrusive since it doesn't get in your way until you attempt something not available on the free version, it's also very clear about when and why you should upgrade but more importantly it lets you know of all the available features before upgrading.

Works cited

Ideally this should be extracted from the paper itself so the user does not have to input the two separately, maybe a first attempt to identify that and have the option to manually adjust it in case the system missed it.

I'm assuming this has some special relevance which merits to have it as a specific input, if not it should be removed.

Education level

Something that seemed a bit odd at first was the fact that you have to select this, I understand that depending on the option selected here the score and strictness varies but I'm not sure if it is natural for the user.

Perhaps a different wording or control may help or maybe have the system determine the grade the paper fits into (if that goes along with the intention of the tool and doesn't hurt the feelings of the user) I don't know for sure, there's something strange but further research may be necessary.

Type of paper

This makes sense, a note explaining what effect it has on the results would help users decide whether they should enter this or not.

As a general rule every control that does something not immediately obvios could be accompanied with a

Originality / Dialect

These controls should be radio buttons or even checkboxes not dropdowns, besides the "Fastest / Slowest" wording might give too much of a negative impact, keep in mind that the same wording is used by free file hosters use to boost premium memberships.

I think just adding "Faster" on the negative option and nothing on the positive would be ok.

Terms of use

You may want to check it with a lawyer but I don't think it's necessary to have the ToS embedded on the page, the link will suffice.

Results page

I've hit the document length restriction and the site suggests me that I upgrade to premium, that's exactly what I meant before with the WolframAlpha example, good work!

The results page looks very good, the highlighting over the original text and the color association with the type of result is really great and makes total sense.

The list of results on the right could be improved a bit I think, the problem I see is that the messages do not have the right priority visually speaking, they say the right thing but they should help guide the eyes of the reader to process the information in the right order.

For that I would change the following:

  • Make the "Analysis complete" block much more prominent At this moment it kinda fades into the background but it should be the first thing the user sees when loading the page so it should have a background, a larger font and maybe an arrow pointing to the list of results which is the next block we want the user to focus on.
  • Change the format of the text in the list of results It currently looks like "Spelling (1)" but I believe it should be something like "1 Spelling issue" or similar, the problem is that when you put something inside a parenthesis you're lowering its importance but the number here is the most important thing since it's what indicates where you should click.
  • Use a different widget for the results I would prefer to use an accordion widget instead of a popup here for two reasons: it associates each result with the item it belongs to and it also prevents the user from bouncing its focus acorss the page, you're looking at the point where you're clicking so the new content should be right there.

Printable summary report

This looks pretty good!

Plagiarism Checker

I think most of the comments for the paper grader apply here as well since both pages are very similar, this one is easier to use because there's fewer options to choose from.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment