At long last– real design guidelines! Covers useful topics such as typography, metrics/grids, design patterns, and pre-built components.
This is a great explanation of why mobile web apps shouldn’t simply try to emulate a native app:
Users of pretender apps get an experience that falls squarely in the uncanny valley — it looks like a native app, but something isn’t quite right. Perhaps it doesn’t respond as expected or it doesn’t quite follow the conventions of a native app. Often pretender apps have both of these problems and then some. They simply don’t feel “at home”.
Another problem which we’ve heard in usability: non-iPhone users are put-off when they encounter mobile websites that “look too much like an iPhone”. There are interaction problems: should the Android user tap the glossy button or the hard back button to move to the previous page? There are also visual design problems: when a page screams “designed for iPhone,” non-iPhone users feel like they’re being treated as second-class citizens. Not good, considering that many users consider their choice of phone to be a mode of self-expression.
Recommendation: Focus less on “I’ve fooled them all into thinking this is native!” and more on “This is a great user experience.” A few tips:
- Keep it clean & quick to load (consider your use of images, animations, etc.)
- Streamline key workflows: keep in mind that each time the user navigates to another page, they run the risk of encountering slow load times
- Optimize layout & visual elements to be appropriate for a small screen size (look to native apps for best practices about font size, line height, tap area, etc.)
- By default redirect users to the mobile-optimized version of your site, but include a link to the full version of the website
Useful recommendations include:
- Dimensions for common UI elements (such as tab bar) across devices
- When to customize or go with default UI components
- Things to watch out for when specifying rich visual design
- How to size & export button/icon assets
- Using draw9patch
- … and all sorts of other little hints & tricks for avoiding Android “design disasters”
Finally, someone has done a proper job of documenting Android design patterns! Patterns include navigation, notifications, personalization, and more. There are also clear explanations of when and how to use them, including examples of actual apps.
By understanding how people make decisions, we can design to influence their behavior. Check out this article by Smashing Magazine about designing with cognitive bias in mind. Also, make sure to read Dan Ariely’s fascinating (& fun) book Predictably Irrational if you haven’t already.
Persuasive design can certainly be a good thing. Since interaction design often helps users to make decisions that lead to accomplishing their goals, a persuasive nudge can be both helpful and welcome.
But as any design superhero knows, “with great power comes great responsibility.” What happens when you consciously choose to not do right by your users? To trick, mislead, or take advantage of them?
Harry Brignull gave a presentation about Dark Patterns, which are design patterns that take advantage of people in a less-than-positive way. See the Dark Patterns Wiki for a list of malicious design patterns. Unfortunately, they are far too familiar. A few examples: asking trick questions, creating friend spam, and (I love the name of this one) privacy Zuckering.
When you realize that psychology & design enable you to influence people, what will you choose to do with that power?