Interaction Is the New Black

 Intro

As technology evolves the standard for design changes. The days of static design, with nothing but hotspots and jpegs, is over. With every update of HTML, CSS, and jQuery our design toolset grows—and so do client expectations.

Clean Interaction

One variant of interactive design is a clean and simple interface that is still dazzling and feels fully evolved.

(http://bohemiancoding.com/sketch/)

Sketch uses a slight animation to remove the word before ‘designers’ to show the diversity of the target audience. This is an incredibly beautiful and efficient way of displaying information; the alternative would look something like this:

Sketch is made for designers like you, including:

  • UX designers
  • Product designers
  • Icon designers
  • Mobile designers
  • Web designers
  • UI designers

 

By adding such a simple animation to the page, Sketch has streamlined the amount of information on the page and made a more esthetically pleasing product.

 

‘Oh Snap!’ Interaction

In contrast, a second variant of interactive design allows for extremely robust and intense experiences. The intended reaction to these is less “Oh, that’s nice” and more “Oh snap, that’s awesome!” Bose does that perfectly in their special EU website:

 

(http://special.bose.eu/en/)

Throughout the entire site you find one clean, flowing interaction that makes the user feel in control. This experience is less like flipping through a catalog and more like walking through the store. It allows you to seamlessly browse through their products, customize your choices, and checkout without being distracted by clutter.

This natural feeling flow is sometimes called ‘evil design,’ which is defined as “…purposefully designed interfaces that make users emotionally involved in doing something that benefits the designer more than them” (Nodder, 2013). Bose has pulled off evil design at the highest level—users feel good and are emotionally engaged while they give Bose their money.

 

Middle Out Interaction

Squarely in the middle of the two formerly referenced conventions lies a middle ground that explores subtle effects as the crux of the design while still invoking that ‘wow factor.’ Apple has long been at the forefront of creating incredible experiences, and their new MacBook site is no exception. In the design below, they have animated their new MacBook as you scroll down the page which displays the device beautifully while keeping a clean and pleasant design.

(http://www.apple.com/macbook/)

In the same vein, Apple’s new Watch website adds a little more pizazz at the beginning by having the watches interact as the user scrolls down the screen. Once past the first three interactive scrolling areas, the design subsides into a light, tranquil space with very subtle interactions only on the title tags. In designing the site as such, Apple gets to show off how amazing and exciting their new product is, but the user isn’t overwhelmed by the experience.

(http://www.apple.com/watch/)

www.howtogeek.com states that, “It becomes clear that Apple’s reputation as the “hip, creative company” has been a combination of their smart marketing going back to the very early days of the company. While they have expanded their marketing to mass market products like the iPod or iPhone, their emphasis on aesthetics and simple, easy operation clearly stem from their roots as the platform for digital graphics and design. Whether they’ll remain as the go-to choice for artists and designers, or, as their market share increases, transition to something else entirely, still remains to be seen.” (Goodnight, “Macs Don’t Make You Creative! So Why Do Artists Really Love Apple?”).

After using an Apple product, or even shopping for one, it is apparently clear that their clean use of ‘Middle Out Interaction’ is exactly why they are the designer’s tool of choice.

 

Into Practice

As I researched and wrote this article, I was inspired to update my own personal site. I used an animate svg to ‘speak’ to the user as she enters the site. To achieve this, I used a combination of Max Wellito’s tool called vivus.js, to bring the svg to life, and Albaro Trigo’s jQuerry library, fullpage.js, to create the full page scroll. The result is a fun, playful site that captures me as a person and designer.

(http://osullivan.design)

Interaction design has a number of variations and approaches, each of which may be appropriate depending on the intended audience and effect. A professional designer takes great effort to understand the needs of his client and delivers a perfectly tailored solution—whether it is an ‘evil design,’ minimalist and simple, or something in between.

References

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply