FEATURE: Implement usability guidelines

[jdittrich]

Story: As a UX designer, I want to make sure that features of Wikimedia Projects adhere to basic usability principles, like visibility, feedback, UI standards etc .

Possible solution: Provide a section on Usability for Wikimedia Projects. A classic example are the Macintosh UI guidelines, which have a section on general UI principles.

Current problems:

• There are many usability principles, but they don't give a sense of ownership in Wikimedia projects.

[jdittrich]

Naturally, there are a lot of resources out there on usability – so why write them here?

• having rules of usability easily accessible (and not behind a google search with a gazillion of hits)
• "The Styleguide" is a thing that people hopefully refer to in the future and which my become a source that designers, developers and product managers trust (with all its content). It may carry weight if one says: "The styleguide says, functions should have a visual representation [=visibility/affordance/signifiers]" (because it is in the styleguide). But if I say "Jacob Nielsen suggests…" that person is unknown to non-usability people and the will be "so what – some person says that?!"

[jdittrich]

@Volker-E @pauginer: I started to write at visual-style_usability.html
– and be happy about some early feedback.

[jdittrich]

I updated usability and would like to add some examples. I saw that currently, the assets are exported SVGs from sketch. Shall I add my examples as image or do you want to add them via export from sketch, too. If you prefer the latter, shall I send you what I suggest as examples? ( @Incabell)

[Volker-E]

As meta notice, do we believe that it needs to be a distinct section of the style guide or wouldn't it be better to have (as it's currently structured already with accessibility) the topics accessibility and usability inherent to the other sections? Our style guide – from our own rough planning – aim is to make those topics so clear and strongly indicated, that a usability section would be at best repeating contents found elsewhere in it.

[Volker-E]

@jdittrich To your last question, it would be best to provide images as SVGs and we would in a next PR put them into the Sketch file for further export in 1x and 2x PNGs and SVGs.

[jdittrich]

Our style guide – from our own rough planning – aim is to
make those topics so clear and strongly indicated…

It is hard to answer. In the current version of the styleguide I found it hard to integrate; The usability section focuses on behavior, so it did not fit at "visual" well, and the "design principles" were too high-level. In future versions, I can imagine this to change, but for the current one I found it difficult to achieve.

One thing we also should consider is that people might be able to point to an assertion or idea (as they now point to "it should be OOUI-style"; this may be difficult if principles are implicitly included.

[jdittrich]

it would be best to provide images as SVGs

Exactly this was my problem – I do not have the UI-elements as SVGs; nor would we have a way to easily create real looking examples from them (aka we don't use macs, thus sadly no Sketch).

[Volker-E]

@jdittrich From your latest commit following topics were added to the “usability” page proposal:

• Adhere to standards and be consistent
• Show how one [user] can interact with an widget ~ provide interaction assistance
• Prevent Errors and alliviate them
• Care for keyboard usage

How would those play together? While I do understand every single one, I'm not yet sure about the stringent connection between those underneath the umbrella term.
Keyboard usage falls also under accessibility, consistency is one of our stated design principles.
Preventing errors is a very specific interaction pattern.

Do you have examples from other guidelines that are reflecting “usability” very well? I couldn't refer to it from the Human Interface Guidelines, neither from macOS nor iOS…

[jdittrich]

I'm not yet sure about the stringent connection between those underneath the umbrella term.

With "stringent connection" do you mean “something which explains that is should be exactly these?”

In which case I need to say: There is none. It is what I find useful to consider – but there could be one, or some other ones… (The only case I know in which such a list was determined empirically, would be the Nielsen/Moelich heuristics)

consistency is one of our stated design principles.

It is, indeed, though in my usability suggestions as well as in the current form it needs some examples and explanations. Otherwise it is not useful to someone who does not know how "consistency" should be interpreted – is is by not self-evident what it means. Such explanations could be on a separate usability page (as in my suggestion) or on a sub-page for that principle.

Preventing errors is a very specific interaction pattern

It is one of the 10 Nielsen heuristics, so I think it is not that unusual. It might have been included in particular because I stumbled upon some problems (probably in Wikidata) where the system does tell the users after the fact that something is wrong, if at all. And since users are afraid to make mistakes (since they are often public, and it seems to be frowned upon the mess things up) it seems a good match for our use.

Do you have examples from other guidelines that are reflecting “usability” very well?

The classic '87 "Macintosh Human Interface Guidelines" would be my gold standard for usability focused guidelines. (one could also just build upon the Nielsen heuristics and show how they are applied in our context, if that helps)

The current generation of guidelines (e.g. elementary’s) seems to focus more on describing widgets, their use and typical combinations and use cases, which has the advantage that it is easier to apply in a template-y way. This, however, assumes a consistent environment, which might be the case for visual editor but not for any slow change done in other parts of the products where the context is very heterogeneous and [buttons] are sometimes made of brackets.

[Volker-E]

Codex, as design system for Wikimedia, has become the designated successor of the Design Style Guide and features various usability related guidelines. Therefore closing.