Jump to content

Usability, Readability, Accessibility: The Reviews


Arceus
 Share

Recommended Posts

@cw1991 'ere you go love. c: Hope it helps!

(For anyone that does not know, YMMV stands for your mileage may vary.)

 

Navigation and Layout
- I'd recommend rethinking how you handle navigational quicklinks. It took me a ridiculously long time to find them and they're all so small and depending on hovers like that is so unfriendly.
- Do you actually need all of those, either? Because I'm thinking not really.
- The site information board seems... somehow sparse, and I'm not sure why. I think I was expecting canons and faculty and whatnot in there too.
- Almost everything in the claims board could be moved to site information. Likewise, several of these things should rather be in the app? Idk. Maybe it's just me. YMMV.

 

Theme
- There are some notes in the accessibility section about it.
- Nice shade of orange. I'm not feeling the background, though, it's really just overly distracting noise that doesn't add anything of note to the overall design.
- As cute as the category title fades are, they're actually ... the longer the category name is, the harder it is to read all of it. It's also unnecessarily distracting. So either kill the fade or keep the names really short.
- The posting template: no. The contrast is bad. The font-size is too small.
- The colours for code and potentially quote blocks need to be flipped to be dark, they're very jarring with the sudden brightness in all the dark.
- Consider.................. a second light theme. Different people see easier on different colour schemes, and the only way to make everyone happy is to offer both choices. c:

- I'd also really recommend keeping image aspect ratios the same when resizing and such, because it's really jarring to have images appear so squished for no apparent reason.

 

Accessibility
- The main font, Poppins, is a nice readable font, at a size that isn't 10px. I needed it at 14px before I could really read it (I wear glasses due to myopia, and I have a 1080p monitor, so you may actually want to make the size larger).
- The yellow in the background of the cbox form is very bright. I'd consider changing that.
- The scrollbar is also ridiculously small and would be very difficult to find with a mouse on larger monitors than mine.
- Jcink is not easily going to be 100% mobile-friendly. There are too many elements that are not made mobile-friendly with ease. It's kind of life. The best thing to do is make sure your mobile mode is not terrible. I can't read yours. There are even some areas that have text where the text just disappears. Not good.
-- Your standard, desktop version can be made *sort of* mobile-friendly, if you try. I don't think you did, so I'm going to skip any critique there and assume you don't want your desktop version mobile-friendly. I don't blame. It's hard even for me.
- There are some images that don't have an alt tag and some links that are seen as being empty with no name.
- HTTPS is the future. Use it.
- Speaking of however, your placehold.it images are not served over HTTPS and there's no reason why they aren't. placehold.it does serve over HTTPS.

- Chrome also wants a title attribute in the iframe for the cbox but YMMV on how useful that is.

nusignature.png nusignature.png

I am the darkness, always watching, always listening, ALWAYS THERE.
(If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.)

Link to comment
Share on other sites

  • 1 month later...

@Mischief, here you go, hope it helps.

 

Navigation and Layout

- Getting to everything was easy enough. I like the set up of the lore pages, that's very nice looking and easy to find things in.

- Personally myself, I would move all the character-creation-related forums together in the same category, because with them spread out this way, it's odd and disjointed to me. Your mileage may vary.

- I guess people might be getting used to the navigation being at the top of a site, but I still take way too long to find it. The contrast of that minty jade colour in the navigation links is decent, so that one's a good colour.

 

Theme

- There are three different icon fonts, and over 40 regular fonts (including their variants, as variants load a new font set), that are loaded into this theme. And as far as I can tell, it uses two, Montserrat and Lato, that aren't even loaded in the header, so I'm not sure where they're at (if they're in the CSS, move them, @ import is not a very efficient way of loading them). This is probably the most severe impact to your load times (your site takes 12.6 seconds to become interactive on a 3G connection). Load only the fonts and maybe the italic variant for fonts you're actually using, and decide on a single icon font.

- We have another case of 7px Calibri and 10px Montserrat. Please raise these font size numbers. It's nice that the post areas have a legible font size, but when I'm greeted by text I can't read on the front page, I'm unlikely to dig further. I just assume, usually correctly, that the entire site is like that. You need to make your site globally legible. I also don't understand why your post area font size is 14px, but your lore documentations have a smaller size? You'd want people to read that, too.

- The contrast for font colour is mostly okay, but there are some darker greys that need to be lightened, and the red colour is way too dark for the dark colours it exists around.

- I do really like this particular layout arrangement for the boards. That's nice and sleek.

- Every colour used in the topic layout is illegible to me. I have no idea what the contrast ratio is on that but I'm gonna take a wild stab at it's likely around 2 or 3. You want it at 5 or above.

 

Accessibility

- The first thing I noticed is that your site has a lot of images, and for no real reason, save perhaps using textures and patterns to break up content areas. 12.6 seconds to interactive tells me you should likely rethink the decision to use this many images.

-- You might also be able to better compress the theme images so they aren't so large in size.

- You did not give me the HTTPS link, but I do recommend starting to use it and making your site fully HTTPS functional. There are a number of things that aren't HTTPS-enabled on the site, and I don't see why not, I believe they all can be.

- There's a missing image, has a 404 error, something on nickpic. (k.nickpic.host/rr77L6.png)

- It is very likely, with poor contrast values and significant dependency on reds, anyone with a colour blindness, maybe not even just a red-lacking one, will see your site as a giant blended blob. Nothing will stand out.

- I do have to appreciate that the hover in topics isn't anything majorly important. These are notoriously difficult on touch devices. That said, if you have any information in there you want users to be able to see regardless of what device they're on, move it outside the hover.

nusignature.png nusignature.png

I am the darkness, always watching, always listening, ALWAYS THERE.
(If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.)

Link to comment
Share on other sites

@FizzyElf, one review coming right up.

 

Navigation
- You don't seem to have any quick links anywhere. I don't think this is a good idea, considering how much lore this site seems like it has. Pick out a few must-read topics and link them on the index somewhere. The rules and the quick start guide, for somewhere to start are a good foundation, maybe claims and the application code and such.
- This quick start guide could also really benefit from having a run-down of what is NECESSARY to read to get started. Like if I was just going to make the most boring, generic guy on this site, what do I need to know? Answer that in this guide, because the sheer amount of lore this site has is ridiculous and gave me anxiety and I'm not even trying to join this thing.

 

Random aside: I don't normally look at rules and such when doing these and your case is precisely why. I'd really recommend going through your rules set and deciding what you actually need, because my guess is, like a fifth of these are actually necessary, and a lot of them are probably unnecessarily long-winded.
- As another aside, there is apparently at least one instance in the rules where you curse and the writing becomes aggressively toned. Don't do that. Those of us that are older and capable of thinking for ourselves decently well don't appreciate it and you're for sure losing people over it. I can almost guarantee you a nice handful saw that and turned right back around and walked away.

 

Accessibility
- The theme looks decent, but the top box there with the gold text and the beige marble background, I can't read that until I hover over it. If it's important, it should be legible. If it's not important, it shouldn't be there.
- I'm really not sure how I feel about the tabs, but I suppose they're useful for keeping scroll times short. Also kind of nice on mobile. Probably a preference thing.
- Personally, the background's a bit bright. It doesn't hurt but it does make me squint.
- I might recommend making the pattern in the marble texture a bit softer and less obvious. It's really kind of busy, same with the background texture pattern.
- Several image elements don't have the alt tag. These are important so that screen readers don't say something weird when they come across an image.
- Nice attempt at mobile responsiveness. Actually looks pretty decent, so kudos there!

 

Security idk why I got rid of it the first time around... I think I felt like it was redundant...
- There are 5 insecure requests breaking your HTTPS: custombanners/33134.jpg, custombanners/43927.jpg, two images from TinyPic (which shut down, by the way, so you will want to rehost anything on TinyPic anyway), and the toprpsites.com voting button. Rehost these if you need to.
- Many of your external links do not have rel="noopener" or rel="noreferrer", you can also put external in a rel for links, these prevent security issues.
- There's a script using Element.createShadowRoot and it needs to be using Element.attachShadow, as createShadowRoot() is deprecated and will be removed from browsers soon.

nusignature.png nusignature.png

I am the darkness, always watching, always listening, ALWAYS THERE.
(If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.)

Link to comment
Share on other sites

Thank you! (and yeah, I already know I need to edit the rules... or find someone to. Unfortunately being on the spectrum means it's really hard for me to figure out what other people are going to assume or not if things aren't super spelled out is hard for me. Do you know if there's anyone here who likes helping with that kind of thing?)

Link to comment
Share on other sites

Honestly, @FizzyElf, my best advice is to read some similar sites' rules and see what they have and how they word things, and then throw ALL your rules out, and then examine each rule you have and decide if you need it. Your site looks around a year old, so just think about how relevant a rule's been in the time the site's been open.

 

And remember, you don't need rules to be able to tell someone to bugger off/stop doing something. It's your site. If you see behaviour you don't like, you're allowed to correct it. I feel like you're a huge case of trying to stop everything early. The name of the rules game isn't "guess every possible way something can go wrong and preemptively stop it in the rules." It's more, "this is very standard information to know about how this site operates." A short and sweet bit on activity, any image size restrictions, maybe how you handle characters that have a huge role, what kind of face claims are used, any word count requirements and such, and maybe a how-to-register-accounts guide. We don't make every rule under the sun because maybe someday someone might break it. It really does sound like you expect your potential and existing members to be rule-breakers right out the gate.

 

I'm spectrum, too. I know, it takes a long time to get comfortable with that, it took me around five years, but I promise, you'll feel better once you get comfortable with it. It's okay to tell people "no, I don't like that, stop doing it."

  • Agree 1

nusignature.png nusignature.png

I am the darkness, always watching, always listening, ALWAYS THERE.
(If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.)

Link to comment
Share on other sites

2 hours ago, Arceus said:

Your site looks around a year old, so just think about how relevant a rule's been in the time the site's been open.

 

We haven't had any problems yet on this site... but on my last site, and the site I was on before that, oh boyo. I no longer want to join a site that does not have a clearly-stated anti-harassment/anti-discrimination policy (and am still skeptical of those that  do until I actually get to know the admins).

 

I do get what you're saying - it's just difficult, because there's definitely such a thing as too little, as well. Ah well, if I wanted things to be easy I wouldn't be trying to run something.

Link to comment
Share on other sites

That's not an issue of lacking rules, though. That's an admin with no spine. I've met plenty of admin that can enforce a no-harassment/anti-discrimination policy even when it's not been said in the site rules at all. So, like I said, it's really just a matter of deciding what needs to be stated because constantly telling people what FCs they can use and what avatar sizes are set at and whatever else becomes tedious. The rules are just there to make your life a bit easier and help the members understand some very basic things. That's it. I'd go so far as to say "rules" is a misnomer, because it's really not a rule set at all.

nusignature.png nusignature.png

I am the darkness, always watching, always listening, ALWAYS THERE.
(If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.)

Link to comment
Share on other sites

  • Admin
8 minutes ago, FizzyElf said:

We haven't had any problems yet on this site... but on my last site, and the site I was on before that, oh boyo. I no longer want to join a site that does not have a clearly-stated anti-harassment/anti-discrimination policy (and am still skeptical of those that  do until I actually get to know the admins).

 

I do get what you're saying - it's just difficult, because there's definitely such a thing as too little, as well. Ah well, if I wanted things to be easy I wouldn't be trying to run something.

 

There is the lawyers version of rules and the respectable players version of rules. We here on the Initiative have what we feel is the acceptable amount to explain expected behavior without explicitly lawyering out every single rule and what is expected.

 

As an admin I think what @Arceus is trying to express is that you can reduce without reducing what you crack down on. I have personally had no issues to warn or ban a user based on their overall conduct or behavior on a site just because its not explicitly in the rules. Just because I say "no harassment" doesn't mean that "racism" is allowed by default. Harassment is harassment is harassment. I definitely recommend that you also take reports as a grain of salt because emotional/angry people are going to report differently than someone that is rational. Overall, all I'm saying is maybe take into account that bannable offenses aren't always in rules just like loopholes are always in Terms of Service. Just because there is a loophole doesn't mean you have to allow it.

  • Preach it! 1

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

@Jaxx, here you go, happy opening day!

 

Navigation
- Nice quick links. I do feel like the Discord embed takes up a bit too much space.
- The Behind the Scenes board is confusingly named IMO, and should be called like Information or something. It kind of sounds like an OOC board at the moment, so it took me a few seconds to figure out where to click.
- All in all, it's relatively easy to find things!

 

Aside: This is a pretty random mention but to be compatible with HTML5 protocol, and make it easier for keyboard users to navigate, you may want to consider defining header, nav, main, and footer element tags in the board wrappers. (Just a simple <header></header> for instance around your header elements.)
This also helps screen reader users, if I remember right.

 

Accessibility
- The font colour for posts is somewhat dark, and should be lightened a bit. I don't have anything bad to say about the templates for info threads, except that you might want to consider slightly darkening the greys, it's somewhat bright on a medium-dark skin like this one, but only somewhat, it's not a game-breaker.
- What is with everyone and the tiny freaking navigation strip... I don't approve of these. They're hard to spot. Make them bigger. Yours is the only place on your site where the font size sucks.
- Speaking of font size, yours is decent. Good job! It could still use a tiny bump up if you're feeling nice. I find 14px sans-serif more comfortable to read. (I have myopia and wear glasses.)
- Since you do have a cbox, I recommend having the Discord embed start collapsed, and if you can, defer it. This way, it doesn't load the Discord embed until the user clicks on it, meaning that the site loading won't hang waiting on the Discord. Currently takes about 6.4s to become interactive on 3G, that's not terrible, but when WidgetBot is hanging, I know it can cause site load to take a sudden astronomical amount of time.
- There seem to be IDs that are used multiple times across the site. If you have an ID that you intend to use more than once, you need to make it a class, not an ID. IDs should be unique to the element they belong to.
- There are some form elements that don't have an associated label.
- There are a bunch of links that have no title.
-- Both of the above are related to screen readers; without a label or title, the reader may skip these, or it may say something very confusing.
- In your wrapper <html> tag, you'll want to add lang="en" or similar to mark your site as an English site, so that assistive technology knows which language to use.

- Your wrappers also apparently do not specify a doctype, this can cause browsers to behave weirdly with your site... ah, I see. No, <!DOCTYPE> needs to go at the very top of your wrappers, nothing above it. Your font embeds and such need to go down around the <% CSS %> tag.
- Speaking of font embeds, why do you have so many? You don't need that many, and it slows the site down. Why do people literally have 50 fonts loading on their site, like seriously you guys? You only need one or two. Chances are you're actually only using one or two, maybe three, if your site doesn't look like a typeface hurricane. Calm down.
- You may want to put in a meta description for your site in the wrappers. These are sometimes used by search engines to describe your site.

 

Security
- The font MagnoliaSky has files that are loaded over an insecure connection. It's breaking your SSL.

nusignature.png nusignature.png

I am the darkness, always watching, always listening, ALWAYS THERE.
(If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.)

Link to comment
Share on other sites

Thank you!

  • You're Welcome 1
Link to comment
Share on other sites

  • 4 weeks later...

@Prophetess, here we go! Sorry about the delay, hope it helps!

 

Navigation
- I can't really get behind hover banners. They're really just unfriendly, but you do you.
- The quick links look about right. Ahhmmm... what I don't know about here is the fact there are two different quick link sections, and they both have different things in them, and that's strange to me? It's a bit disorganised and can be somewhat befuddling as to which one's more important.
-- If you do need more space for links, you can just create CSS drop-down menus. They're pretty easy to do and you can ask for help with it here if you need. Just to keep all the navigation in one place, because we don't really need it scattered around like that.
- Judging by your banner, you're a supernatural site set in San Fran. ... oh look, I was right, good deal. Very nice choice of banner images.
- Information topics look good. I don't understand why the races need to be so expansive, you may want to take a look at it and see if you can compress your race information a little, because tbh that's a LOT. Especially for a modern supernatural site where we mostly get the gist of the races you'll find in one of these.

 

Accessibility
- You may really want to consider compressing your images better, because wow.
- By the way, this is loading at 12.5 seconds to interactive, and it is ridiculous. You'd have to do a much deeper look at it to figure out why it's loading so slowly because after my cursory look, I don't really know.
- There are some images missing the alt tag. Without it, screen readers may say some weird things when they come across images with no alt. It can be blank to make them not say anything at all.
- There's a form on here with no label associations. This is also related to screen readers, as it'll tell the user what a field is for.
- Looks like none of your affiliate links have names. Just use either title, or aria-label. This'll prevent screen readers from saying something weird when it gets to them.
- Your <html> element doesn't have a lang attribute. Just add lang="en" - this tells screen readers what language the site is in, otherwise it automatically defaults to whatever the user's language is. Chinese machines trying to read English is hilarious but unhelpful.
- Congratulations for being the first person in this thread I don't have to yell at about font sizes. Sheesh.
- There are no meta descriptions being used. I'd recommend looking into them because they are still used by search engines and it's worth it to continue using them. The worst that happens is, it's not helpful. Just be careful with keywords because those can be damaging.
- Really nice contrast on this theme, any of the *blind users should have no trouble seeing things. Some of the group colours are hard to see, like that blue and the purple colour, though. Um, looks like those're admin, mod, and ooc colours. Vampire could also probably use to be lightened a bit.

- Oh my goosh your mobile mode is probably one of the best ones I've ever seen on a Jcink. It's completely usable. That's fantastic.

 

Security
- SSL is enabled on Jcink. Just change the HTTP to HTTPS, and I'd recommend doing it because some browsers are starting to really hate sites that aren't SSL-enabled and some people just don't understand the browser warnings.
- There are a number of insecure requests on-site so I would fix those where possible to enable your SSL to remain unbroken. It's work, seems dumb, I know, but it's worth it not to have browsers falsely telling your users that your site is dangerous.
-- (Yep, that is absolutely what they say. There's a reason I don't use Chrome anymore, though it's calmed down a little on its doomsday messages.)
- None of your outbound links have rel="noopener" or rel="noreferrer" - I'd recommend adding these, they help protect your users from potential security problems and it's really just kind of best practice.

nusignature.png nusignature.png

I am the darkness, always watching, always listening, ALWAYS THERE.
(If you're interested in Plain of Ice, message me, it's private. Bleach site, non-canon.)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.