From 8149bb683a73e212410e5ec9150524b28a449c74 Mon Sep 17 00:00:00 2001 From: Guangcong Luo Date: Sat, 31 Oct 2020 12:36:11 -0700 Subject: [PATCH] Improve and number design standards --- CONTRIBUTING.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e6fb6f44d8..0dc3a6a846 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 ------------------------------------------------------------------------