Work-In-Progress Detailed feedback

[ExtraThicc]

I'm ignoring some things that I assume are issues with ZenForo and not easily customizable. I have some screenshots of issues and I'll see if I can add them later.

Metadata & SEO​

• No Open Graph title
• App manifest icon missing

Feature requests​

• Link to profiles from other places
  • Apps like Chaster and Edgr
    • Interactive status widgets widgets would be cool (assuming they have APIs or embeds)
  • Social sites besides FetLife

User experience​

General​

• Links lack underlines and buttons lack border, making them hard to discover, especially without coloring
• Active menu option is invisible
• Trending box should be left aligned for consistency and skimming
• Focus styles sometimes cut off the edges in navigation (fix z-index or use inner styles)
• Some elements like “Private conversations” and member list items blink inappropriately
• Footer wraps poorly and is unnecessarily tall on mobile

Accounts​

• Password managers can't fill new account form properly
  • It seems the email field is treated as a password field, and the password fields aren't
• Passkey creation should be recommended when creating an account or logging in for the first time
  • This is common practice, and without doing this it's not obvious you can log in with a passkey until you're already logged out

Forums​

• Breadcrumbs are inconsistent for top-level forum sections (except index)
• Vertical spacing is prioritized over horizontal spacing, making tabulated data difficult to read
• Prefixes multiselect options are confusing
• Staff list has a show more button that has nothing (perhaps there's a bug where it's still displayed when the 5 staff members are at the pagination limit)
• Differences in types of posts is unclear

Chat​

• Chat member list wraps inconsistently (widen or truncate)
• Non-visual alignment of chat messages is off (affects screenreadering, speech, copying, scraping, etc.)
  • Staff roles and online status
    • Vague accessibility tree (ARIA roles and hierarchy)
      • Staff roles are just words indistinguishable from the username
      • Online status
    • Not differentiated by ARIA roles and only visually differentiated by color (add patterns or differently shaped icons)
• General and private messaging badges appear to show unread count, but the former shows online members (same as navigation bar)
• Chat tabs are not keyboard accessible
  • The title is redundant as it's the same as the active tab
    • Prevents access to member list on mobile

Accessibility​

In general, I'd recommend looking into WCAG compliance (the ACA uses WCAG 2.0 Level AA internally, though you may want to use a more recent version or the A or AAA Levels of compliance), devtools, Lighthouse (or other audit tools), and possibly testing with screenreaders (free options include Narrator, NVDA, VoiceOver, TalkBack, ChromeVox, and TalkBack). If you have the budget but not time, you might want to hire an auditor.

• Low contrast colors
• Font size is a bit small (I'd try 16-20pt)
• Online status icons
• No headings in toolbar
• Inconsistent accessibility tree and screenreader support

Implementation​

Includes stability and non-functional requirements like security, privacy, and legal.

Analytics​

• XenForo seems to have basic analytics for forum usage only
• I'd also recommend a more modern and traditional analytics service (like Google Analytics 4) to collect better data and trends, and have more options for viewing it
  • Easy to install with a script or plugin

GDPR & CCPA compliance​

• Cookie consent footer seems to be appropriate
• Can't find information or user interface for deleting all user data

Passkeys​

• Add passkey button does not function (however the https://kinkywonderland.ca/account/passkey/add page does)
• Page doesn't mention that the passkey manager's name is used by default
  • I recommend either having it as 1FA or adding app 2FA, text and email are insecure
    • Clerk is a good service if you can't find good integrations and don't want to implement this yourself (requires expertise in secure programming and web services)
• User is not prompted to save backup codes, potentially resulting in permanent lockout

 

[Inkwarden]

@ExtraThicc Thank you so much for the detail notes. I'm going to work through them one at a time. Depending when you checked these things some might alright be fixed but I will comment for them anyways.

 

[Inkwarden]

Metadata & SEO​

• No Open Graph title
• App manifest icon missing

-Open graph title should be fixed now
-App Manifest icon should also be fixed

 

[Inkwarden]

Feature requests​

• Link to profiles from other places
  • Apps like Chaster and Edgr
    • Interactive status widgets widgets would be cool (assuming they have APIs or embeds)
  • Social sites besides FetLife

Links to profiles from other places.
-What do you mean by this?

App Integration
-Ill look into this but might be a far off goal.

Social Sites
-I can add any here Fetlife is just the one we had on the top of our head do you have any suggestions?
@ExtraThicc

​

 

[Inkwarden]

General​

• Links lack underlines and buttons lack border, making them hard to discover, especially without coloring
• Active menu option is invisible
• Trending box should be left aligned for consistency and skimming
• Focus styles sometimes cut off the edges in navigation (fix z-index or use inner styles)
• Some elements like “Private conversations” and member list items blink inappropriately
• Footer wraps poorly and is unnecessarily tall on mobile

Link
-I believe I fixed this too. If not can you provide an example so I see what you are referring to?

Active Menu options
-I believe I fixed this too. If not can you provide an example so I see what you are referring to?

Trending Box
-Fixed

Focus Styles
-Should be fixed now

Elements blinking
-This should be fixed although actively working on it. Had to rebuild the chat app earlier this should fix it. Still work in progress.

Footer wrap
-This should be fixed although I was having trouble reproducing it. I did add some code that should fix it for mobile.

 

[Inkwarden]

Accounts​

• Password managers can't fill new account form properly
  • It seems the email field is treated as a password field, and the password fields aren't
• Passkey creation should be recommended when creating an account or logging in for the first time
  • This is common practice, and without doing this it's not obvious you can log in with a passkey until you're already logged out

Password Manager
-Which one are you using @ExtraThicc ? Just want to confirm because I did test with with a couple big brand and it worked fine.

Passkeys creation
-ill look into adding a notification to the page for user registration.

 

[Inkwarden]

Forums​

• Breadcrumbs are inconsistent for top-level forum sections (except index)
• Vertical spacing is prioritized over horizontal spacing, making tabulated data difficult to read
• Prefixes multiselect options are confusing
• Staff list has a show more button that has nothing (perhaps there's a bug where it's still displayed when the 5 staff members are at the pagination limit)
• Differences in types of posts is unclear

Breadcrumbs
-Can you give me an example? Everything under forums seems to have Forum > ForumName breadcrumb properly.

Vertical spacing
-This should be fixed added some code

Prefixes
-Not sure I can fix this one

Staff list
-Yes this is designed so when there are more than 5 staff it will be able to show all of them. I see about having it be dynamic when less

Types of posts
-Ill add a write up for types of posts. - https://kinkywonderland.ca/threads/thread-thread-types-explained.115/

 

[Inkwarden]

Chat​

Everything related to the chat is a work in progress. I took an app someone had made and I'm rewriting it ill update this when I get it to a state I'm happy with.


-think I’m actually pretty happy with the app now. I’ll come back and address that part of list later though.

 

[Inkwarden]

Accessibility​

In general, I'd recommend looking into WCAG compliance (the ACA uses WCAG 2.0 Level AA internally, though you may want to use a more recent version or the A or AAA Levels of compliance), devtools, Lighthouse (or other audit tools), and possibly testing with screenreaders (free options include Narrator, NVDA, VoiceOver, TalkBack, ChromeVox, and TalkBack). If you have the budget but not time, you might want to hire an auditor.

• Low contrast colors
• Font size is a bit small (I'd try 16-20pt)
• Online status icons
• No headings in toolbar
• Inconsistent accessibility tree and screenreader support

-Ill add this section to the todo list.
-It wasn't a major concern since I got the site up and running in a couple days. Although we support Accessibility and I will look into improving and making the site totally accessible.

 

[Inkwarden]

Analytics​

G4A is active now

 

[Inkwarden]

GDPR & CCPA compliance​

• Cookie consent footer seems to be appropriate
• Can't find information or user interface for deleting all user data

Information on deleting.

It's required for compliance that users be able to: Users can easily find instructions on how to request deletion

This is in our https://kinkywonderland.ca/help/privacy-policy/ that is at the bottom of every page. So it is in compliance.

 

[Inkwarden]

Passkeys​

• Add passkey button does not function (however the https://kinkywonderland.ca/account/passkey/add page does)
• Page doesn't mention that the passkey manager's name is used by default
  • I recommend either having it as 1FA or adding app 2FA, text and email are insecure
    • Clerk is a good service if you can't find good integrations and don't want to implement this yourself (requires expertise in secure programming and web services)
• User is not prompted to save backup codes, potentially resulting in permanent lockout

2FA
-App is already implemented
-Although email is insecure I left it as an option because it's better than nothing
-On the password and security page there is an option at the top for passkey it's fixed to bring you to the correct page now. Which will also let you set a name.