In “It’s complicated – the social lives of networked teens”, Danah Boyd considers the four affordances of online networks (the first of which I’ve discussed here). An affordance is a term that originates from the field of design, and recently I’ve been reading “The Design of Everyday Things” by Donald Norman, where he starts by explaining 7 fundamental design ideas. Here I consider how each can be applied to online spaces.
i) Discoverability
Usually when the word discoverability is used about the Internet it refers to how easy content is to find – either due to SEO or the intrinsic properties of the site hosting the content. Discoverability when referring to design is something different – it’s whether it’s possible to figure out how to use an object by interacting with it.
Online, many of the sites that we interact with use at least some features in common that guide us in how to use them. These might include navigation bars in the top and/or the sidebar of pages, dropdown menus and possibly even hover text with additional explanatory information. However, as we all know from experience, some sites are better than others at indicating how exactly to move between desired pages, or where particular features are located. For example, Facebook has been criticised many times over the years for not making its privacy settings easier to find and apply.
ii) Affordances
The affordance of an object is the possible use for that object once a user interacts with it. The key to the definition is that interaction is needed – an affordance depends on the qualities of the object and the capabilities of the person using it. A website might use a specific type of video player, but if users with certain browsers or smartphones cannot view the videos then the affordance of watching video is not available to them.
In terms of content shared in online spaces, Boyd lists persistence, visibility, searchability and spreadability as the four key affordances. However, if we go by the definition above, others such as the ability to participate in a conversation via a comment thread might also be included.
Drinking coffee, reading a book – but not with coffee poured from the pot on the book cover! Image credit: author’s own.
iii) Signifiers
How do we discover what affordances are possible? Signifiers act as signs to indicate affordances. Online these could be a call-to-action button within an email, descriptive images in a carousel that invite you to read a particular news story, or a coloured section of a page indicating where you should look. They could also be a particular icon – such as the Facebook “thumbs-up” showing when you too can “like” a piece of content. Or they could be social sharing buttons, encouraging the reader to spread the content more widely.
Another good example is the “slide to unlock” text on the iPhone lock screen. Not only does it tell you what you need to do to operate the device, there is also an arrow indicating which direction you need to swipe in, and the text illuminates repeatedly letter by letter in that direction.
Signifiers don’t necessarily have to be deliberate to give away information about their environment. For example, as Norman points out, a bookmark doesn’t just indicate where in a book to resume reading; it also indicates how far through the book you are. Similarly, online, the number of likes or votes that an item of content has received may indicate how enjoyable the content is likely to be, but can also act as a signifier of how likely the content is to have been shared – and therefore how often it might have been seen.
iv) Mapping
Mapping is used to indicate the relationship between two sets of things – such as switches and the corresponding lights that they control. It’s often used when designing controls and displays.
Natural mapping is particularly useful in online design because it takes advantage of actions that we’re already familiar with – such as swiping through something to delete it and swiping down to refresh a smartphone page and pull more content into the window.
Another example of mapping is social network timelines, which typically show older content at the bottom and more recent activity at the top. One of the complaints about Facebook tweaking newsfeed settings is not just that it changes which content appears in your newsfeed, but that Facebook’s algorithm violates their instinctive mapping. The content no longer follows a strictly chronological sequence – older, more popular content may sit above an update made 5 minutes ago by a different friend.
v) Constraints
Providing constrains on what is possible with an object can help to clarify how to use it and what it’s for. For example, the handles on scissors constrain the user to only be able to fit one digit into the top hole, while she can fit all the remaining fingers into the larger, lower hole.
Tweets are an obvious example of an online constraint – only 140 characters are permitted for each tweet – and this is clearly signified by a counter that displays how many characters are still available to the user. A tweet therefore affords the user the ability to share small pieces or text including links to other media.
vi) Feedback
Feedback is important to help us understand how to interact with objects and what effect our actions have had on the object or system. Too much or too noisy feedback, however, can be distracting and impair the ability to use the item smoothly. Online feedback might be in the form of additional information appearing on a page. Or it could be a pop up window indicating that an action has successfully occurred or that there has been an error that the user needs to know about.
One of the challenges with feedback online is that it can also be used to encourage engagement and that can make for a frequently interrupted experience. For example, a popup window may not only be used to tell you about something that you did, it might also be used to point you towards content that may be of interest, such as a promotion, a survey, or even an online chat bot to help you with your purchase.
Another interesting issue about feedback is that new users typically need more than experienced ones do – and what is initially helpful can quickly become annoying as a user becomes more comfortable with a product. A human teacher will tailor their feedback to the needs of a learner, but we need to make sites sensitive to how much a user already knows.
vii) Conceptual model
A conceptual model is how the user understands a system to work and is important for giving the user a sense of control (think how frustrated you get when you can’t figure out how to setup the new TV!). With a clear conceptual model, discoverability is enhanced – the user can figure out how to do new things or try variations on existing things. She can also evaluate the results of the actions that she takes.
An example of a conceptual model online is the idea that content spreads on Twitter by being re-tweeted and that this provides a good mechanism of attracting new followers. This model may suggest to the user that she should experiment with what time of day to tweet, how often to tweet and what types of content to share in order to be retweeted more frequently.
Better by design
Next time you’re struggling to figure out the settings on your favourite social network, or enjoying an app or website, consider how each of the above principles has been applied (or not). I’d love to hear in the comments about any great or ghastly experiences you might have had!
Social in silico 