On Shifting Interfaces

People and their contexts evolve. Ideally, interfaces should do the same across longer periods of time to cater to the user's mental processes.

This article on layervault touches on an interesting point: "Usability is a moving target. A user’s understanding of your application improves over time and your application’s interface should adapt to your user." Expanded, this would mean that a User Interface should be able to inherently take advantage of data gathered over time and roll in appropriate micro enhancements if possible.

As a framework, this could provide UI components with set paths of evolution configured to accept and respond to quantifiable data at set speeds. These components could behave independently or be codependent in regards to how they handle data. Libraries could be based off human factor requirements in addition to code dependencies. Things like color, size, positioning, proportions, typography, visual complexity, information architecture, and motion are all properties that can be tailored over time.

Value also extends past reduction. Showing users full text over "Universal Icons" could be used on a Semiotic level to reach out to and grandfather international users into a better understanding of a UI. While this doesn't seem viable for UI with persistant / radical changes like Facebook's, it would add an extra degree of flexibility for interfaces in less flux.

The notion of a shifting interface does not base critical features off of assumptions collected by sniffing device capabilities (WURFLES are gross). Instead, it captures behavior and strategically progressively enhances fitted UI to key users. It's not intended to be a one size fits all, or some transformer, it's just predicting ahead and saving trips to the tailor. If someone's weight will fluctuate, give them shorts with an elastic waistband.

###Doing It Responsibly

Layervault uses CSS classes to alter UI.

#TimelineSignpostButton {
  .TimelineButton {
    text-indent: 60px; // Allows label text to be hidden when button shrinks
  }
  .SignpostLevel1 &.TimelineButton {
    width: 116px; // Wide button with label
  }
  .SignpostLevel1 &.TimelineButton,
  .SignpostLevel2 &.TimelineButton {
    background: $official_white image-url('signpost-dark.svg');
    background-size: 24px 24px;
  }
  .SignpostLevel2 &.TimelineButton,
  .SignpostLevel3 &.TimelineButton {
    width: 60px; // Smaller button hides the label
  }
  .SignpostLevel3 &.TimelineButton {
    background: image-url('signpost-light.svg') no-repeat 8px 6px;
    background-size: 24px 24px;
  }
}

The downside to this of course, is the extra unused CSS that all users download.

CSS styling interface shifts could be modularized and atomized and then compiled statically before being shipped to users based off of authentication or some other distinguishing factor.

##Connections

The notion of designing control systems is not new. A similar
thing can be found in The Architectural Relevance of
Cybernetics
.

A detailed paper on interfaces collecting patterns on a strictly flexible UX related field can be found here.

Thoughts? Let me know @Aetherpoint