A lot of applying psychology to technology design, especially on the web, focuses on the what: What does this do? What information are we conveying, and what words are we using to do it?
Another important aspect of weaving technology and psychology together is the how: The visual and functional design of a product or site can also reinforce users’ basic needs and create a relationship with them.
Here are three ways a website or product can use design to enhance a user’s sense of relatedness and create long-term engagement:
1. Set expectations about what actions are possible and what the consequences of those actions will be.
The core functionality of your product should be communicated through your design in a way that users quickly understand. It’s frustrating to users to either think a product does something and later find out it doesn’t, or to discover late in the game that a product has useful functionality that wasn’t initially apparent.
The way you organize the visual elements within your product, the colors you choose, and the contrast between calls to action and other parts of the page can all help the user understand what they’re able to do. Take this example from my favorite language learning site, Duolingo, where I circled the main calls to action in red. See how they pop on the page?
2. Respond to user action in a predictable and desired way.
When people use a website, they have certain expectations for how it will work. Text that is underlined and appears in a different color from the other text is a hyperlink and will open a new destination when clicked. Text that doesn’t look like a hyperlink will not open a new website. Buttons are clickable.
Fulfilling user expectations by using consistent and recognizable design standards can support relatedness in users. More importantly, not fulfilling user expectations through design can violate a sense of relatedness. I consider the role of consistent design standards akin to one of Herzberg’s hygiene factors; they may not add a lot to the relationship, but if they weren’t there, you’d definitely lose a lot.
Consider this example of a page for the 2014 Digital Hollywood Conference (they have since dramatically improved their design). It’s very unclear which items are hyperlinks and which are not, what you can and can’t click, and so forth. Forcing users to puzzle through functionality disrupts the opportunity to forge a relationship with them.
3. Adapt to user behavior over time.
Design that adapts to how a user interacts with it supports relatedness by “getting to know” the user. Some examples of how this might be implemented include:
- Often-used functions float to the top of the menu
- Recommend activities based on past behaviors are highlighted
- User-specific information is displayed prominently
Despite my continued frustration with Facebook’s insistence on resetting my feed preferences, I think they do adapt some aspects of their site very well to my behavior over time. An example is how they prioritize my most frequently visited groups, including the Dana-Farber Marathon Challenge group. I get the sense that Facebook is trying to make it easier for me to do the things I’d do anyway. And that’s a nice way to build a relationship.
What are your best practices for using design to build a relationship with users?