Improve and number design standards

This commit is contained in:
Guangcong Luo 2020-10-31 12:36:11 -07:00 committed by GitHub
parent 79f2c80173
commit 8149bb683a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -48,24 +48,28 @@ We strive to be maximally intuitive and accessible. "That's what they all say",
Some principles we try to design by:
- Less text is better
1. Less text is better
- The fewer words you use, the less likely someone is to gloss over it, and the easier it is to find the important information. Compare "1234 battles" with "There are currently 1234 active battles being played on this server" - more words are usually only clutter that makes it hard to find the information you want.
- Buttons should say what they do
2. Buttons should say what they do
- Buttons and links that say "Click here" or "Look at this" are bad for a number of reasons, but the most important one is probably because it violates the principle that you shouldn't need to read outside the button to know what the button does. The way people use interfaces is by looking for buttons that do what they want, not by reading every word from beginning to end.
- Remove unnecessary clicks
In addition, blind users in particular navigate by link text, so a blind user will have a much harder time figuring out where a link goes if it only says "click here".
3. Remove unnecessary clicks
- Whenever you give a user a button to click, always think "in what situations would a user want to click this? in what situations would a user not want to click this?" Dialogs like "Are you sure?" can often be replaced with just doing the thing with an "Undo" button. Buttons to show more details can often be replaced with simply showing more details by default.
- Remove unnecessary scrolling and mouse movement
4. Remove unnecessary scrolling and mouse movement
- Similar to unnecessary clicks - if a user has a large screen and you show them a lot of text in a tiny scrollable region, that's incredibly user-hostile. Either the user wants to read the text or they don't: the perfect use-case for a "read more" or expand/collapse button.
- Affordances are important
5. Affordances are important
- This is why we depart from flat design: Years of UX research have taught us that it's important for buttons look like buttons. Making clickable things "look 3D and pressable" or underlining them is good practice. We can't always do this (dropdown menus would look pretty ugly if every item was beveled and embossed) but we do what we can.
- Feedback is important
6. Feedback is important
- If a button doesn't react instantly, it should be replaced with a "Loading" screen or some other indication that it's doing something. If something's failed, it should come with an error message so the user knows what's wrong.
There's a famous story of a CEO of a company who clicked the "email everyone" button, but it didn't react, so he clicked it a few more times, accidentally spamming a bunch of users and getting their company marked as spam by a bunch of email services.
Commit standards
------------------------------------------------------------------------