The LAB: Innovating Website Design with Attribute Dependency (August 2010)

by | Aug 30, 2010 | Uncategorized | 0 comments

Imagine a website that changes depending on the visitor. Researchers at M.I.T. describe such a website that learns a person’s thinking style based on preliminary clicks so it can present information in an optimal way. Purchase intentions increased 20%!

This is an example of the Attribute Dependency tool of the corporate innovation method, S.I.T.. It’s great for creating “smart” products and services –
those that adapt to user preferences or environmental
conditions. For this month’s LAB, let’s apply Attribute Dependency to other aspects of websites to create new, innovative designs or features.

To use Attribute Dependency, make two lists. The first is a list of internal attributes of a website. The second is a list of external attributes – those factors that are not under your control, but that vary in the context of how the product or service is used. Then create a matrix with the internal and external attributes on one axis, and the internal attributes only on the other axis. The matrix creates combinations of internal-to-internal and internal-to-external attributes that we will use to innovate. We take these virtual combinations and envision them in two ways. If no dependency exists between the attributes, we create one. If a dependency exists, we break it. Using Function Follows Form, we envision what the benefit or potential value might be from the new (or broken) dependency between the two attributes.

Here are the variables that I put into the matrix (which you can download here).


Web_design_overview

Internal Variables:

  1. color
  2. design
  3. graphics
  4. information
  5. link locations
  6. page loading speed
  7. contact information
  8. length of text

External Variables:

  1. number of visitors
  2. type of visitors
  3. location of visitor
  4. SEO page rank
  5. search requests
  6. type of browser
  7. type of computer

Here are three ideas developed by Andrew Nudelman, a graphic website designer for an industrial supply company in the Chicago area. He suggested the topic of this month’s LAB.

1. TYPE OF COMPUTER/CONTACT INFO: As type of computer (of the visitor) changes, the contact information changes. Perhaps the user’s webcam and microphone recognizes when a client says “I want to contact this company,” or “Geez! I’m only
looking for a phone number!” The website recognizes keywords as they are spoken and creates a five second lightbox which shows the contact information page and encourages the user to click on it.

2. TYPE OF VISITOR/INFORMATION: As type of visitor changes, the information changes. Most of the visitors ordering for the first time might have trouble navigating a website with thousands of products. What if the end user holds up a picture of the product or picture of the barcode associated with product, or the product itself to the webcam and says, “Do you carry this?” The website than searches its database for the closest matches to that product and gives a list of results to the end user.

3. LOCATION OF VISITOR/INFORMATION: As location of visitor changes, the information changes. If the visitor is in a warehouse or manufacturing site with an iPhone or other smart phone, the visitor takes a picture of the product to ask, “Do you have any of these in stock?” or “Do you carry anything similar to this?” The website searches its database and lists the results. This is especially useful for visitors who don’t know the name of products or have a serial number available. A more general use for the camera and microphone function would be for visitors who don’t know anything about products but they know what they want to achieve so they look into camera and say, “I want to cut 100 metal pipes.” The website could then open up a dialog, “What kind of
metal?” “What is the length of pipe that you will be working with?”

Here are three more ideas I came up with from the matrix:

1. NUMBER OF VISITORS/CONTENT: As visitors increase, the content changes. Many websites show how many visitors clicked into the site to demonstrate popularity (this blog, for example). More sites are connecting the way people click or link to parts of the site as a way show the “wisdom of crowds.” Perhaps the design aspect of a website changes as visitor counts increase to convey compliance. Perhaps some of your customers need to show that certain products or parts were adequately shopped as part of a bidding process or contract. The website is designed to close the feedback loop in how a customer fulfills its obligations to one of its customers.

2. SEARCH/GRAPHICS: As search parameters change, the graphics change. Perhaps the site knows the name of the company that has browsed into it. The site graphics change to include the logo of the customer, to show special categories that this particular company needs or uses, and to share information about ordering and pricing that is unique to it. In other words, the website becomes a virtual catalog that is customized to the specific company that surfs into it.

3. TIME/INFORMATION: As time of day (or time of year) changes, the website information changes. This one may seem too obvious, so the trick is to imagine reasons for this dependency that are non-obvious. Perhaps information changes as it relates to seasonal items (still too obvious); perhaps information becomes more detailed earlier in the week and less detailed later in the week. Maybe this is beneficial because our visitors later in the week have learned more so that less information needs to be presented. In other words, this is a website that changes depending on how much the visitor already knows (with the variable, Time, being the intervening proxy for determining that).