I’m about to go to sleep, but I just want to drop a few of my favorite rules of thumb. (I love UX and constantly bitch about bad interfaces, FWIW.)
- Visual hierarchies. Color theory. Understand both of these, and use them.
- Don’t use the words “me” or “my” in your interfaces (with rare exceptions like “✓ remember me”, which is de-facto standardized)
- Native controls/widgets give users lots of free platform-specific and accessibility functionality that they expect. Don’t implement your own text box / dropdown / scrollbars without a damn good reason.
- Use color sparingly, to convey meaning and/or draw attention.
- What is the purpose of each and every design element? Can it be removed, or does it have no purpose? Then remove it. (Maybe keeping one exception to the rule gives your site a touch of personality / a brand).
- Reading the OS X HIG is eye-opening. Don’t try to follow it online, though!
- Can stuff line up? It probably should.
- When should you show a throbber or “Loading…” message? The answer is not “whenever something is loading”. It’s “whenever the user must wait for something to load, or whenever an update or change of view as a result of a direct user action is not immediately visible.” And this should be minimized.
- Don’t half-ass buttons. If they hover or have an active (depressed) state, then the hover (“over”) state should look like a slightly lighter or darker version of the normal (“up”) state; the depressed (“down”) state should look physically depressed, if applicable; invert the gradient, swap the borders, or whatever.
It looks like I’m starting to list pet peeves instead of the big ones, so good night!
- Always show a useful fallback for empty views. Preferably visually distinct and "subordinate" to actual content (e.g. centered gray text instead of left aligned black text).
- Try to minimize the impact of destructive actions and try to offer the possibility to rollback potentially dangerous actions. Make dangerous actions look dangerous (e.g. make delete buttons red).
- Think about visual distance and distraction, especially in flowing text. Columns look good, but forces the eye to scan for the start of the next column when reaching the end of the previous. Don't place two equally important things right next to each other, etc...
- Visual hierarchies. Color theory. Understand both of these, and use them.
- Don’t use the words “me” or “my” in your interfaces (with rare exceptions like “✓ remember me”, which is de-facto standardized)
- Native controls/widgets give users lots of free platform-specific and accessibility functionality that they expect. Don’t implement your own text box / dropdown / scrollbars without a damn good reason.
- Use color sparingly, to convey meaning and/or draw attention.
- What is the purpose of each and every design element? Can it be removed, or does it have no purpose? Then remove it. (Maybe keeping one exception to the rule gives your site a touch of personality / a brand).
- Reading the OS X HIG is eye-opening. Don’t try to follow it online, though!
- Can stuff line up? It probably should.
- When should you show a throbber or “Loading…” message? The answer is not “whenever something is loading”. It’s “whenever the user must wait for something to load, or whenever an update or change of view as a result of a direct user action is not immediately visible.” And this should be minimized.
- Don’t half-ass buttons. If they hover or have an active (depressed) state, then the hover (“over”) state should look like a slightly lighter or darker version of the normal (“up”) state; the depressed (“down”) state should look physically depressed, if applicable; invert the gradient, swap the borders, or whatever.
It looks like I’m starting to list pet peeves instead of the big ones, so good night!