Closed designnerd closed 4 years ago
Hutchy68
commented
5 years ago I have no problem integrating this if everyone would like to see it. It was one of those "vanilla choices" as they could be overridden to a website's choice. I do think the cogs icon is better for actions as the other is more for editing and used for editing.
#p-cactions > a.button i::before {
margin-bottom: 0.8em;
content: "\f085"!important;
}
designnerd
commented
5 years ago Thanks, I don't suppose each menu could have it's own ID for easier targeting? Just thinking of my experience changing one icon and having them all change because the same unique id was used for all three items. I would have expected that from a class, didn't anticipate the ID being used in multiple places, so had to use advanced combinators to target them individually. Just thinking that a lot of users would not know enough css to target successfully this way? I don't know a lot about how mediawiki themes are made though, so if this is an unrealistic idea/request, please ignore.
My only thought about the gear icon is that it is widely used and associated with user setting or preferences. I would not think to click a gear to edit a page and the user doesn't really get page settings in that menu. I would expect to see view preferences or user settings upon click it. I can easily override them though now that I know how to target each individually, so that's fine. If the different menus don't get unique IDs then perhaps examples of how to target them using decendant selectors/advanced combinators and pseudo elements can added to the Pivot project example site?
Hutchy68
commented
5 years ago Ah, that id for left-aside should be menu-main on the span and menu-user on the right-aside.
Tasks is another choice as they are all tasks. I suppose I will need to look at what is available and perhaps update to Font Awesome 5. That tasks icon is nicer looking. Of course could just use the carat down or a variation.
Hutchy68
commented
4 years ago Closing, this can really be easily done to personalize a website by the website owners. Don't really want to force this on everyone.
Just add this to MediaWiki:Pivot.css page and hard reload the website to clear and refresh the CSS.
#p-cactions > a.button i::before {
margin-bottom: 0.8em;
content: "\f085"!important;
}Or use your choice...
#p-cactions > a.button i::before {
margin-bottom: 0.8em;
content: "\f044"!important;
}Hmm, okay that’s too bad. All the web software that I use doesn’t use identical menu icons for different menus with different intended uses and for a good reason... I’ll keep using my workaround but I hope in future it is changed to match usability guidlines. Also a massive thank you for making the theme compatible with MW 1.34 so quickly. We were half way through customizing Timeless to match our current setup but would much rather use Pivot (we love it ❤️).
https://www.nngroup.com/articles/icon-usability/ https://www.nngroup.com/articles/top-10-application-design-mistakes/
Hutchy68
commented
4 years ago Maybe I’m misunderstanding what you want. You think the person icon should always show? Logged in or not?
designnerd
commented
4 years ago Yes, the 3 menus (left primary nav, right user nav, page actions nav) should not have identical icons, usability issue, we had multiple complaints and looked up some guidelines on this. Also looking at the standard behavior on other wiki themes, social media sites and responsive platforms. This is not a personal want or personal customization it is a usability guideline to use it for primary nav only as it is becoming universally recognized for this.
On default skin config the primary-nav burger (three lines) icon:
To prevent user error, inconvenience, confusion and click-spend complaints we changed the user menu icon to a user icon, the actions menu icon to an edit icon.
Please see this screenshot with issue circled (top) and workaround to prevent errors (bottom): https://imgur.com/8E72A63
You don't have to implement the same icons (our choice of icons may not be best) but it is a good idea not to have all 3 menus using the burger icon by default, logged in or out (fine to be different logged out vs logged in so long as it's not the same as the primary nav). Adhering to expected behavior looking at major responsive sites and platforms already comporting to usability guidelines would be amazing. ❤
designnerd
commented
4 years ago Sorry I don't know why but I'm having trouble clearly explaining this, probably my fuzzy MS-brain (medically retired) but I used to do a significant amount of usability testing. This was a usability issue that cropped up that would be ranked a 2.5 depending on how many users had issues with it and which usability severity rating we looked at.
Judging by the number of comments we got it was a significant issue at first. Users had to open multiple menus to find what they wanted and then didn't realize they had to click again to close, so had both sidebars open at once. We received complaints and screenshots of both menus open and couldn't believe we had to explain how to close them again. Once we changed the icons to make what was located under each menu more obvious the complaints stopped.
Level 1: Prevents Task Completion Level 2: Creates significant delay and frustration Level 3: Problems have a minor effect on usability Level 4: Subtle and possible enhancements/suggestions
0 = I don't agree that this is a usability problem at all 1 = Cosmetic problem only: need not be fixed unless extra time is available on project 2 = Minor usability problem: fixing this should be given low priority 3 = Major usability problem: important to fix, so should be given high priority 4 = Usability catastrophe: imperative to fix this before product can be released
designnerd
commented
4 years ago I'm still trying to convince our wiki owner to rework our too-long and unwieldy side menu, mainpage and other issues that are difficult to apply usability principles to, given the organic nature of a wiki, but the interface being streamlined for usability in future updates would be a massive bonus ❤ Anyhow, regardless, many many thanks for the awesome theme!
We absolutely love this theme for accessibility across mobile and desktop! Thank you for creating a great responsive theme.
One thing that would increase UI usability would be to have different icons for each menu that help to visually indicate and communicate what is found under each menu without having to click on and explore each menu. This would particularly be helpful for new/novice users.
For example, the right menu is primarily used for user actions. Adding a user icon (font awesome f007) to the right menu would greatly help with way-finding and instant recognition of navigation. Also adding a different edit/actions icon to the Actions button (particularly for mobile where the word "Actions" is hidden) would help users to determine which menu to use for editing. It seems like users should know this, however inexperienced users often don't, and we intuitively look for cues in the UI to determine how to interact with the interface. As such, having 3 menus with the same icon is not ideal to help users distinguish between different features/actions/activities housed under each section. Our users have reported finding the 3 menus with the same icon to be confusing especially if they only visit or do edits periodically. Each menu also does not have a unique css style for easy targeting, the same style is used for all 3 which requires some inelegant targeting in order to override these items to make the interface clearer for users.
p-cactions > a.button i::before {
} .left-off-canvas-toggle #menu-user > i.fa::before { content: "\f0c9"!important; } .right-off-canvas-toggle #menu-user > i.fa::before { content: "\f007"!important; }
It would be amazing if unique icons could be implemented by default in newer versions of the theme to aid in intuitive interface wayfinding. We greatly appreciate your efforts!