Making it Work: Context
Today, we will be talking about the concept of context. Context, as defined by the wonderful Dictionary.com, is:
the set of circumstances or facts that surround a particular event, situation, etcetera, or the parts of a written or spoken statement that precede or follow a specific word or passage, usually influencing its meaning or effect.
Already, by this definition, we should be able to see the importance of context when designing interfaces. So, what exactly might this look like in an interface design? Let’s look at a few examples.
Developers of iPhone applications in particular have a responsibility to maintain continuity with context. The social network giant Facebook emulates the native iPhone OS interface by adding the different regular actions of Facebook as a grid of 9 application-like icons, as well as a second page for “favorites”. Both pages of icons are rearrangeable just like the native home page icons. Also, most applications that have notifications are usually placed in the “dock” on the iPhone; Facebook has also adopted this and has placed notifications at the bottom of the application. This is a perfect example of creating an interface in context.

But what else does context mean? Sure, it could mean adapting stylistically to the surrounding context, as in the previous example. But what about usability?
When designing an interface, sometimes there are multiple possible choices, but only one best choice.
Take, for example, the placement of the “Home” link on various sites. On Facebook, Twitter, and MySpace, the “Home” link is the first in the navigation, while Ebay doesn’t have a button labeled “Home” at all.





Why would Ebay make such an incredibly different interface decision? It all has to do with context. If you look at another e-commerce site, such as Amazon.com, there is also not a “Home” link in the nav. Rather, with both Ebay and Amazon, the interface gives the option to go to the personal account (”My Ebay” or “Your Amazon.com”). A “brick-and-mortar” store would never want to send you “home”; rather, they would want for you to know exactly what your favorite part of the store is. This approach is very much a contextual consideration.
Other contextual considerations might include tooltips. Tooltips are tips or instructions that appear on a mouse hover. The user may need further explanation on how to do certain actions within an interface, but you don’t want to bog down the interface with a lot of body copy. Tooltips are a great solution to this problem.
You as the designer are responsible for making it, the interface, work. Contextual decisions are made by users and designers on a daily basis. Make decisions such as allowing the user to press “return” to submit a form, but insert a line break by pressing “return” while using a larger text input box. Consider the full context of the user; everything from what kind of computer and what speed, to their demographics, to their cultural background, to their local context (what probably is happening at the time they use the interface), and to the internal context (their line of reasoning while using the interface).
Conclusion
So all of this is to say, interface designers must consider context to be a very important factor while designing interfaces. This could mean the simple placement of a “send” button, or the entire feel of the interface itself, or the decision to remove the “Home” link entirely from a webpage. Thinking and designing in context will improve both the usability and user experience of your particular interface.


Jonathan! Well done :) I was wondering are you going to do a follow up article? I’d love to know more about everything.
Thanks for the neat article!
I also think inlays, as discussed in ‘Designing Web Interfaces,’ is a great way to keep users in context while providing them more information. The authors define an inlay as inserting more information into a page, pushing other information over/aside (rather than an overlay, which covers up information)
Some neat examples: http://designingwebinterfaces.com/page-slide-other-examples-and-variations