Elements of an interaction model

So an interaction model, when well-defined, describes how a system is intended to function over time. It is comprised of the following elements:

  • UX patterns: Repetitive structures and pathways that people will encounter and move through over and over again. Example: A news feed in Facebook would always scroll downward, containing endless objects that a user could act upon. This is important: A UX pattern describes where actions will take place, rarely a range of specific actions. That is reserved for…
  • Feature clusters: The specific functionality that a system contains. The features should be organized in a manner that makes logical sense to the people who use it, and have a dynamic relationship with the UX patterns. Example: When using my Facebook news feed, I am able to act upon an object by commenting on it, liking it, sharing it, etc.
  • System behaviour over time: The animation, transitions, and other ways that the system behaves in response to (or anticipating) user input. Example: I click on a field that says, “Write a comment…” in my news feed. It dynamically exposes a larger box with my photos, encouraging text input. If I click away, it snaps shut automatically.
  • UX principles: A set of guidelines tailored by the designer that governs the elements above. Violating the UX principles can causes all the other elements to suffer in both usability and desirability for end users. Example: I’d imagine that Facebook wants the minimum number of interactions or clicks possible from scrolling a news feed to interacting with content—one or two at most. Any new functionality must try to preserve this principle.

David Sherwin: The metaphor of the system, Part 2

Attracting attention (carefully)

  1. Decide which is the most important item or object on the page—perhaps a login, product, or announcement. Give it a visual treatment such as a different color (remember brightness!), size, or shape to make it pop out. Users’ attention will be drawn first to that item.
  2. Use pop out on only a few items per page; don’t overwhelm the attention resources of your users.
  3. Use gradations of a visual treatment (size, color) to create a hierarchy of objects that will lead a user through the information on a page.
  4. Use motion sparingly and only where the user’s attention is focused. Do not employ continuous motion in one part of the page when you would like users to focus on multiple areas of the page.
  5. Enable focused attention on a group of objects such as products by using the same salient visual treatment on all of them.


Intranet trends 2010

  • A wide spectrum of technology solutions: there’s no single way to build a great intranet.
  • Better-structured intranets based on task-centered IAs, often breaking up a legacy of information silos.
  • Reliance on user research methods — including user testing, personas, and card sorting — both for design decisions in general and IA decisions in particular.
  • News as a main homepage feature, but with increasing emphasis on the usefulness of news stories.
  • Better employee profile pages. In addition to offering information beyond plain contact listings, profiles were typically coupled with a more structured way of finding employees with specific expertise.
  • Blogs by both executives and regular employees.
  • Emphasis on search and on initiatives to improve search quality (which continues to suffer on many intranets).
  • The use of pre-designed page layouts and a CMS to establish and maintain content consistency.
  • Training for site managers and people in charge of individual areas, in recognition of that fact that UX quality derives from people and not just technology.
  • Content curators assigned to keep specific pages up-to-date.
  • Intranet branding, typically with somewhat functional names, such as BenNet, BrandPortal, the Hub, InnovCenter, kate2.0, My.Habitat, the Portal, and Wooby.

From Jacob Nielsen’s Alertbox

6 successful social features of Intranets

  • Knowledge sharing. Offering repositories for case studies, samples, and other existing information can help people with similar problems avoid having to start building their solutions from scratch. Examples range from Habitat for Humanity’s fundraising templates to Bennett Jones’ Share Your Work widget. Sometimes, knowledge sharing can be as simple as a Q&A tool to connect employees with questions to colleagues with answers.
  • Innovation management. Companies managed and encouraged innovation by offering users tools for taking ideas and improvements from conception to completion. Indeed, this is the sole purpose of Mota-Engil’s winning InnovCenter. Verizon offers a mobile version to capture ideas as they occur, which is often on outside jobs, far from any old-fashioned suggestion box.
  • Comments. The simplest way to inspire user-contributed intranet content is to let employees comment on existing information, ranging from news stories to knowledge bank resources. Commenting features reduce the fear of the blank screen; systems that force people to create content from scratch every time inhibit user participation.
  • Ratings. Giving a grade requires even less work than writing a comment, and thus rating systems can further broaden user participation. Sites that use ratings can list top-rated resources first in menus or give them added weight in search listings. Mota-Engil and Verizon offered an even simpler approach by noting how many users had previously accessed a resource (even if they had not rated it). Sometimes, bad content gets substantial use simply because it addressees a key need; on average, however, better stuff gets used more, so a usage count is a reasonable proxy for quality — and has the huge benefit of requiring no extra effort from users.
  • Participation rewards. We know from research on social features that user participation increases when contributors are visibly rewarded, such as by adding points or badges to their profiles. Many winning intranets did exactly that. Because there’s real business value to features like knowledge sharing and innovation management within an enterprise, some intranets went beyond the symbolic value of visible recognition and offered real prizes to employees who gathered sufficient participation points.
  • Customized collections. The default intranet information architecture (IA) must be based on the average employee’s tasks and usage patterns, but can never predict any individual user’s information needs with 100% accuracy. To contend with this fact, designers often allowed users to customize content collections.

From Jakob Nielsen’s Alertbox

Tab bar

‘As these examples illustrate, tab-bar navigation is ideal for letting the user choose among modes of operation tailored to specific features, information, or even states of mind (“I can’t think of a restaurant, pick one for me”). A tab bar summarizes what your app does; it’s a series of miniature advertisements for how the app can help. Tab bars make for efficient navigation, since they take people directly to specfic screens to perform specific actions, but they require careful planning by the designer. The tab bar should offer a set of options that match up neatly to specific and common missions your audience has in mind when they launch your app.’

Clark 2010, p.108

Slight confusion of tab bar and toolbar!

Organising content for iphone/ipad

1. Flat pages


  • Ideal for quick, focused content; suited for casual browsing of screens
  • Adapts to variable number of screens with customized content Easy to use; navigation relies on familiar swipe gesture
  • limited interface chrome; page control requires very little space, leaving lots of room for the content itself


  • Must swipe throuoh thr star l onr page at a time; can’t jump to any screen other than immediate neighbors
  • Doesn’t scale well to larqe number of screens; page indicator limited to 20 dots
  • Doesn’t handle scrolling well, not good for lengthy content
  • Users may overlook the small page indicator and miss app’s additional screens

Clark 2010, p.106

2. Tab Bar


  • One-tap access to all of the app’s main features
  • Clearly labeled menu advertises primary features, shows current location


  • Only five tabs can be displayed at once
  • Absorbs significant screen space on all (or most) screens of the app

Clark 2010, p.110

3. Tree structure


  • Scales well for large numbers of categories, features, and items
  • Familiar outline organization is easily understood
  • Direct interaction with content is intuitive and limits interface chrome
  • List-based display adapts well for user-customized categories


  • Primary features are listed only on top-level screen, unlike tab bar’s always-on display
  • Inefficient switching amonq main features or categories; you have to surface to top level before drilling down again

Clark 2010, p.114

iPhone tabZone and pointed design

‘For a comfortable ergonomic experience, you should place primary tap targets in this (side of the screen opposite thumb) thumb-thumping hot zone. (…) This tap zone gives you hints about how to organize the visual hierarchy of tap targets.’
Clark 2010 p.59

Pointed design

  • Place important info at the top and sink controls to the bottom
  • Design to a 44 pixels rhythm
  • Where appropriate, create at-a-glance displays that avoid scrolling
  • Whittle onscreen elements to the bare minimum
  • Push advanced tools and controls to the background

Clark 2010 p. 73