Comments (10)
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?!"
from wikimediaui-style-guide.
@Volker-E @pauginer: I started to write at visual-style_usability.html
– and be happy about some early feedback.
from wikimediaui-style-guide.
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)
from wikimediaui-style-guide.
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.
from wikimediaui-style-guide.
@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.
from wikimediaui-style-guide.
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.
from wikimediaui-style-guide.
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).
from wikimediaui-style-guide.
@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…
from wikimediaui-style-guide.
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.
from wikimediaui-style-guide.
Codex, as design system for Wikimedia, has become the designated successor of the Design Style Guide and features various usability related guidelines. Therefore closing.
from wikimediaui-style-guide.
Related Issues (20)
- Typography - specimen svg image does not display as expected
- SVG image for tpography-readability is missing spaces around links HOT 1
- [Typography] - what is the preferred treatment for system messages/alerts/dialogs? HOT 1
- Move resources to a different folder and use submodules HOT 13
- Move icons into its own repo HOT 4
- Load Resource 404 Error HOT 10
- [CSS] Use partials for modular CSS architecture? HOT 4
- Alerts in Components HOT 7
- Specify "common meaning" for utility colors HOT 4
- Add a link to the design team blog HOT 4
- Buttons look wrong in Firefox HOT 14
- Menu icon in mobile view off alignment HOT 4
- Increasing the width of color blocks HOT 6
- Text flowing off the page HOT 1
- Add more component design guidelines HOT 12
- Add "scroll to top" button in web page HOT 11
- Add "dark mode" button in the website HOT 21
- ADD follow section in footer! HOT 3
- Transform build scripts from Grunt to npm based scripts HOT 9
- Consider dropping Squoosh HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wikimediaui-style-guide.