Jump to content

Usability, Readability, Accessibility: The Reviews


Arceus
 Share

Recommended Posts

Hello, I'm Arceus, and I like pretty things that are also functional, and I married organisation when I turned sixteen. c: Rather than being a generalist reviewer, I'm better suited to reviewing things that I do best. This includes:

  • Navigation: Is it easy to find? Is it in a logical arrangement? Is it not too crowded?
  • Accessibility: Is the theme readable and responsive? How accommodating to blindness, partial blindness, colour blindness, visual processing issues, and visual sensitivity issues, is your site? How quickly does it load on slow internet connections?
  • Security: Are your scripts doing what they're supposed to be? Are there any deprecated scripts? Any issues with outbound links?

Your site can be already opened, or not, I don't really mind either way. I will not be looking at how "pretty" a site is, or reading lore or rules or anything, it's just a "here's how to make your site as accessible to as many people as we can get it easily."

 

Note: There are limitations with Jcink. Your site will never be fully anything-friendly. It's just a side-effect of the software you chose.

 

Note: I will always always always tell you your font is too small if you use a font size below 12px and I will mention it could use an up if it's below 14px. If you don't want to hear this, up your font size before asking for a review.

 

Note: I am epileptic. If your site has gifs on it and you give me a migraine, my review ends there. I'm not risking my well-being for your site.

 

Ready? Link me below!

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

I hope it's not too bad that the site is already opened and stuff. I don't really have members yet, though, so it's easy to change things.

https://soulowls.rpginit.com/

2055148134_EOHbanner.png.530f7a6856f7b2fd0b4861da17014318.png

Link to comment
Share on other sites

=)

@Gota

 

Navigation and Layout
- ... wow. Um. Lol
- If you're going to separate the top navigation into different sections, don't do the same to your information forums. It looks messy and like you're not really sure what's important.
- Spreading your lore out to such a huge extent is also very befuddling and a bit overwhelming, because it looks like there's more than there is, and getting to what they're looking for is rather kind of difficult. That can be a huge deterrent to potential players, even if they don't mind a good bit of lore. The only thing you should be spreading out like that is race information, because presumably each race has its own set of important things to know, so you'd need separate topics for each one.
-- I'd definitely have a look at your lore, and arrange it in a notepad or something grouped by related information. Most likely, your individual articles could be condensed into their sub-sections or such.
-- So many clicks to even get to an information page is really not good for you; when restructuring it, keep in mind you should have, at most, 1-2 clicks from the index to be reading a lore piece.
- I'd also really recommend deciding on how you want users to get to your information. You've got redirect forums, links in the top navigation, and a sidebar block on the forum index. It's kind of overkill. A bit.
- The top navigation, I'd highly recommend renaming the worldbuilding drop; it's just a bit unclear what it's supposed to be until you hover/tap on it. Something like setting or such would get it across a bit better, I think.

 

Some little specific tips:
- You really just need a starter section. Say, rules, plot, maybe if it's big enough, starter guide, how to do the thing type stuff, all that in one place. Don't make your guests or users click around a thousand times to read all this, that's bad. Bad bad. When you're an original fantasy, all that is *required*, mk, absolutely required, to read, is all that starter stuff. You want them starting there.
- Secondly, all your lore can have just one section. Barring maybe a race section if you have a lot of them (and you seem to have a lot of races with not a lot of info, so your one type can be grouped together and the second type grouped together, I think, as far as information relay goes).
- Finally, I'd really decide if you're using databases, or pages. Don't use both, it looks very un-uniform and waffly. There are few actual pages I think, so that's good, but it did really confuse me for a second to run into one after so many databases.

 

Theme
- Good colour choices. Mostly strong contrast. There are two places where there isn't enough: the first place is your news ticker header part. That blue could use to be darkened a few shades. The second is in the sidebar, where the topic reply counts are; that grey needs to be darkened and the font colour lightened, or something, because I completely lose it if I'm not squinting at it.
- I might recommend making the banner image blend in a little better, such as fading the edges of it to transparency a bit. It also doesn't really work entirely with the background image it's on, so from a strictly aesthetic standpoint, it kind of works against your overall design, not with it.
- The only other suggestion is, if you can, I'd get a light theme option that isn't mostly white.
- Mobile-responsiveness looks working and unbroken. (Yay!)
- Your HTTPS is broken, essentially, it is not actually secure as none of your button images are loaded over HTTPS. To fix this, I'd rehost them all.
- Your site is also loading a tad bit slowly; it's not fast enough to be interactive within ten seconds on 3G. If you can, I'd enable gzip compression and cache the blocks that don't change frequently. If a smaller image can be used in a give place, I'd use a smaller one. You can also change images to JPEG 2000 or JPEG XR to provide better compression.

 

Accessibility
- I also can't find any issues in regard to colour blindness, even those that can't see blue should be able to read your site fine. (Yay!)
- Those images and such that don't have alt text, I'd recommend giving it something, even if it's just alt="image" - screen-readers use these to tell the user what an element is, so it's better used as a descriptor of what the image depicts, but a simple "this is an image" gets the idea across, and doesn't end in the screen-reader saying something strange.
- A good number of your links only seem to contain FontAwesome elements. First, I'd recommend using span elements for these where possible, not i, as i has a specific usage in browser-linguistics. Secondly, these, particularly if the icon is linked and only the icon is linked, need a title of some form, so screen readers know what to read these elements as. With WAI-ARIA web standards, you can set these up with a simple aria-label attribute. You may also use the title attribute, if you're okay with regular users getting a mouseover pop-up. You can also set up aria-hidden="true" to hide the element/icon from assistive technology, like screen readers; they won't see it, won't mention it's there. This is useful for FontAwesome icons that are really just there to be pretty.
- I'd also recommend getting accustomed to inputting role="presentation" into any i tags that are just there for holding a FontAwesome icon.
-- I will be honest, I'm not familiar with how much of this is actually doable on IPS. IPS is not my jam lol but you can do this with all your affiliate buttons and such.

 

Security Related
- Outbound links would ideally have rel="noopener" - this prevents the browser from giving the new page access to the page that opened it. It's used a lot in varying phishing things. Some browsers don't support noopener, so you can also set noreferrer, which prevents the browser from sending the page address it came from to the new page. This is really just security junk, if you're not that concerned about it, you can ignore that.
- Again, there are several instances of http being pulled over onto your https site. Definitely fix that.

-  I'd also get the latest jQuery plugin. 2.2.4 does have some security vulnerabilities.

  • Great Idea 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

  • Admin

@Gota your conversation is being moved to the IPS Staff People Coterie as it's not appropriate to discuss in a review shop. These sorts of items belong in the appropriate help forums for assistance, not with the reviewer themselves.

 

The topic is here:

 

IPS Help from IPS Staff members can be found here:

 

And General help requests go here:

https://rpginitiative.com/forum/176-coding-help-requests/

IPS or not.

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

@jordan

Before we get started, I'm going to note up here that as your site is running on Jcink, there are some accessibility/security/code/etc things that you'll never be able to completely fix. Just kind of comes with the package of hosting with Jcink, and I'm not saying you're a terrible person and need to self-host now, I'm just saying there are some unfortunately innate sacrifices here. I'll try not to mention anything I know for sure you can't fix anyway, but I may touch a few not remembering you can't change them, and I pre-emptively apologise for that.

 

Navigation and Layout
- Good job with the links in the banner! These are pretty solid, standard links people will be looking for.
- I might recommend swapping one of them out for app, perhaps, because that seems like a thing a lot of people will be looking for, too. Adverts could be switched for that, don't cater to advertisers, they're not your target audience.
- I know this is really kind of a personal thing, but with species and groups, I might rename the latter to factions? Or something? To make it a little clearer what they are.
- Ahm, side note, after a quick cursory glance through the docs, there are several typos across them, so I'd double check that for clarity's sake c:

- The board layout is actually very good, everything was exactly where I expected it to be, and nothing is named anything weird. Good deal!

 

Theme
- Jcink itself's mobile version does work, isn't themed terribly, but you may want to see if you can add some kind of solid background to the content areas on it, it's kind of difficult to read. May be easier on an actually small screen, I didn't look at it on a legitimate phone.
- -Jcink is not completely mobile responsive, and trying to code your desktop version mobile responsive is not going to really work fully, but at least keeping the mobile version readable is something doable. I believe it pulls from your desktop theme, so most likely there are elements without a background setting that it's pulling content areas from. This may be difficult to balance between your main theme and your mobile mode.

- I like the background image, it's very nice, and doesn't cause any serious issues by not being fixed, good deal.
- Also appreciate dark themes, but I hope you do have a light one.
- Nice pretty theme layout, very nicely done. My only real gripe is the heavy usage of images in the board backgrounds. It took me several sweeps to even see them, so I really don't think they need to be there. They don't enhance the theme a whole lot, and also slow down page loading times on sluggish internet connections.
- Now. Gonna be blunt, its contrast is pretty bad. There are some lighter coloured links that are fairly easy to see, but then we get to the nitty gritty detail, and we lose all that visibility. I think your lowest contrast ratio is something like 1.14. For an idea, you want it around 4.4.
- Sometimes there is a mauve-red colour here and there, and it is awfully dark for how dark the theme itself is.
- Yoooou really need to do something with the font size on that navigation bar because no. It took me far too many seconds to find it, for one. Especially if your board doesn't have an index link connected to its header, that's how your users will get to your index. Don't make it hard to find or click.
- In the stats bit at the bottom of the index, the member list link kind of breaks out of its container a bit (I use Chrome).
- Wow I really just can't read a dang thing on this site, gonna be honest. Which brings me to...

 

Accessibility
- 10px Montserrat? I'm not judging, I know people like the look of small fonts, but I am the HUGEST opponent to small font. Please no. I can't read that. I literally cannot read any of that. Even the inputs and textareas. Basic rule of thumb is, 12px at the lowest for sans-serif, 14px at the lowest for serif. If my screen was 3400px wide, I'd - no way am I ever making sense of that. Small fonts are thought to cause trick-myopia (nearsightedness, this is the type of visual problem where close objects are clear, but far away ones are blurry) in younger peoples' eyes, and some countries have serious issues with vision problems re: younger people reading smaller fonts, as some schools of thought purport that trick-myopia eventually leads to actual myopia. Some of this is hotly debated. What I can say for absolute sure is, it does cause eye strain, and that in turn can cause: headaches; itchy, watery, or burning-sensations in your eyes; an overall tired feeling; sensitivity to light; blah blah it's kind of like a migraine in your eyes. It's not just an aesthetic choice, it can be legitimately painful.
- As your theme's contrast is not optimal, colour-blind and partial-blind individuals will find trouble seeing and reading on your site. Up that contrast. The good news is, it was a good choice not to rely too heavily on a colour that colour-blind people cannot commonly see; no heavy reds or anything, and this is good because it means once the contrast is upped, that's it, it should become perfectly visible to colour-blind people! (Yay!)
- Your site does load slowly. It takes about 24 seconds to become interactive on a 3G connection, that's not very good. Compress your images wherever possible. Don't use too many! We're not bordering on triggering visual-processing problems, so that is a good thing, but I'd recommend cutting out any images you don't necessarily need, resaving the theme images as JPEG 2000 or JPEG XR, they compress better, to make that speed go a bit faster. Whenever you can, don't use document.write() - dynamically injected code through this function can delay page loads by tens of seconds, and may be a good deal of why your site is loading so slowly.
- HTTPS is the future. Consider using it.
- Many of your img elements don't have alt attributes. Alt attributes tell screen-readers what to describe an image as, and don't need to be anything fancy, but you do want to make sure the alt element is there so that screen-readers don't say something strange here, and confuse the end-user.
- There are several elements that are font-based icons and have no name. Screen-readers will read off the title attribute or aria-label attribute. If you'd like these skipped by screen-readers, you can use aria-hidden="true" - best for icons that are just there to look nice. There are also a few font icons that are in i tags instead of span, I'd recommend changing them to span, or using role="presentation"
- For screen-readers to be able to make sense of inputs, you'll need them to have an associated label. As an example:

<label for="form_element">Name</label><input name="form_element">

You can hide this label with CSS later, it just needs to be there and visible for screen-readers to pick up and read from, so end-users that have screen-readers know what the element is for. c:
- #category-wrap should not be an ID. IDs should be unique to the element they are on, and never used again. It's like naming your kids; you wouldn't name them all #zack. Right? All other usages should be classes.
- Woah, ah. Your display for threads, it looks good, but there's some minor issue with text breaking out of the container box it's in, both in the top bar, and in the hover thing, and ahm. I might consider taking a few elements out, because there's a lot here, and I don't think all of this really has to be here. From a visual-sensitivity standpoint this is kind of a borderline train-wreck.

 

Security Related
- You may want to consider, where possible, adding rel="noopener noreferrer" to your outbound links. Not having these two can open a security vulnerability in the browser.
- You're running jQuery 1.7.2. I'm relatively sure this is due to this being the current automatic jQuery version that Jcink puts in. The problem is that this version has known security vulnerabilities, and updating to a new version can break certain things. You can try adding the latest jQuery plugin to your board wrappers, probably under the <% JAVASCRIPT %> bit, to see, but it may break some scripted drop-downs, like the default alerts drop. Not 100% sure on that one.
- We also seem to have undefined functions (customAlerts and getMessages). If these are defined with users, and not with guests, you'll likely want to remove the calls to them for guests.

  • Thank you 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

@ArceusThank you for doing the review. I will be looking over a few of these and see what I can correct to make things better 😄 Would it be alright if in a month or so (after I work through the list and see what I would like to change or add into the site and what have you) can you take another peek over some "changed" areas to see if it functions better?

  • Love 1

spacer.png

Link to comment
Share on other sites

@jordanI'd absolutely have another look, sure! =) Good luck spiffying it up!

  • Love 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

@StormyWays13

 

Navigation and Layout
- Ooo, I love navigational logic. I did have one tiny hangup but that's probably a me thing (I was expecting ooc stuff to be at the bottom lol).
- Really nifty use of articles, tbh.
- Also clever face claim thing!
- Neato footer, lookit that, that's shiny.
- Ykw I don't really have any complaints here. The only potential issue I can think of is the way the main menu is arranged causes most of it to collapse on mobile, which is kind of well yeah of course, but it sort of makes it take a second to find a thing on it on mobile. Which I don't think will be a real big deal, I'm just. Fishing for something to actually say here. xD
- Oooh wait wait I found an actual thing, I might recommend changing the name of the Who is Who thread if you're not going to track everyone on the site (it kinda looks like you won't and tbh don't blame), to like Hogwarts faculty or something, clarity and that.

- Wait wait, also, might consider popping a rules link in the main nav, just for ease of finding, because I think most people might look up there for it right off.

 

Theme
- Crap this'll be hard, too. Good deal with the light and dark theme options, muah ♥
- The two different colour forum rows on the light theme though, sometimes will mess with my epilepsy while scrolling on it. I might suggest bringing the backgrounds of them a little closer together in colour, so they're not so obviously different.
- There seems to be a repeated ID on dark theme, looks like the register button, but I think this is desktop vs mobile... ah wait no, that is the second register button in the header image box thing (very cool shot of Hogwarts btw). I believe that may have to stay for pop-up functionality, so c'est la vie.
- Otter than that, the dark theme is a really good theme, good choice, and the light's not terrible!
- Oh man this responsiveness... -plays with browser pulling it slimmer and wider... slimmer and wider...- ADD moment okay anyway -

 

Accessibility
- ... it's IPS. You know it's mobile responsive, I know it, meh. lol
- You're actually interactive in about 9 seconds on a 3G connection. Could be better, but this is pretty darn good! This does go up to about 10.1 seconds on the dark theme, but no big deal honestly (I imagine probably re: the lil guest message box with the Hogwarts background is what ups it). The only thing I can think to suggest is blah blah compression. Or static resource caching, not sure if IPS does that.
- Contrast is fantastic in threads, but I might suggest darkening the white text a tiny bit, so it's not straight FFF, to like maybe EEE, still visible, bit less harsh over a long period.
- Don't seem to have that issue with the light theme. I think the FCFCFC background colour could be darkened a bit without much trouble, but overall, readable, light, hey, it works.
- That said, the board index does have some contrast complexities on the dark theme. Not many though! The font colour on the main navigation bar, on the non-active links, as well as board descriptions and time stamps for mostly everything lol can use to be lightened a bit. Just a bit! They're very close, usually, contrast ratio is clocking around 3.8, so just a bitty up to maybe #959595, should put it at a comfortable 4.5 ratio. I believe this is ipsType_light, and the navigation should be #lkNav_subContainer nav > ul > li > a, that one's #878787, so that one's even closer. Tiny bump up and it should be just fine.
- Font-sizes aren't actually terrible! Yay!
- Some links with no aria-label or title name, iieeee... yanno I'm starting to wonder if this is just built-in IPS stuff. Lol
- As far as colour-blindness goes, we're looking okay! Shit, actually, somehow this manages to look really good even when the colours are wonky as hell. How. I don't. Even. That is fuggin trippin'.
- Ah... alskdjkdfk and I'm not sure what to say about it aside from the Slytherin green is a bit dark. Haven't seen the other ones, though adult colour (? I think that's what group that is lol the light blue) and your staff colour are good.

 

Security Junk
- jQuery 2.2.4. Sadpanda.
- Umm I think the FontAwesome CDN is not responding completely right now, but that's really kind of out of your hands.
- noopener noreferrer junk here.

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

Yay! Thank you, I'll take a look at those colorings and adjust as well the other changes. ❤❤

“There's a scream permanently lodged in my throat now.”
― Michelle McNamara

Link to comment
Share on other sites

  • 5 months later...
  • 3 weeks later...

@Dragon
sorry this took so gd long lol (I honestly should be doing something else but if I don't stop I'm going to throw my server out my window.)

 

Navigation and Layout
- Honestly, I don't have any real critique here. I found the shit. The shit could be read. The shit made sense. lol
- Neato usage of clubs tbh.

 

Theme
- Okay holy shit I can read it.
- That's honestly probably one of the best font sizes I've ever seen that wasn't mine, it works with the main font face very well.
- Yellow's not too bright either, good deal.
- I actually really love the forum layout and how the pictures are handled.
- I have basically nothing bad to say here. lol

 

Accessibility
- The font colour on the yellow buttons is hard to see, as are the link colours on the yellow part of the navigation bar. The uh, .ipsNavBar_secondary > li > a elements, these have a contrast ratio of 4.48, so could use to be darkened just a slight smidgen. Unfortunately, the yellow buttons' contrast is clocking 1.6, so that definitely needs adjusting.
- Oo, the pagination active link colour also needs to be darkened. I'd also recommend darkening the user mention links in topics and such.
- Theeee blue, of the FontAwesome icons in the record header bits, may want to lighten it a bit. Not a huge deal-breaker, they're small enough I don't think they'd be a huge issue, but, the contrast there is lacking a little.
- I would definitely lighten up the grey link colour in records a bit. That caught me a hair off-guard lol.
- There are a lot of very large images, I'd try to compress these any way you can. Currently on a 3G connection, it's taking 9 seconds to become interactive. The good news is, the first content starts to load in within 1.3 seconds, so at least they're not waiting for ever for something to show up at all.
- Some things missing the alt tag, but I think otherwise should be fairly kind with screen readers.
- Most things have really good contrast, so should be easily visible for colour-blind individuals. c:

 

Sometimes I have so little nitpicking to actually do, it's like am I even helpful at all?? lol

  • Love 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

  • Operations Mod

Nah, that's all hugely helpful! Some of it is stuff I've suspected could use some adjustment, other stuff just never would have caught my eye because I don't do this stuff much anymore. 

 

Thanks so much! ❤️ 

 

bannerlong.png

0_mainsignature (1).jpg

rpgida.png

Icon & Profile set by The Inquisitor of Dragon Age: Absolution

 

 

Link to comment
Share on other sites

  • 3 weeks later...

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.