Designing the “feel”
Why motion is important in the design of an interface and how it can give it a personality.
Previously I have written about the importance of bringing an interface to life in ‘bring your work to life’. There I discussed the importance of shaping and creating interfaces using motion to reflect sites true behaviours. In this piece, I delve a little deeper into the subject and consider why it is important to utilise motion in any digital experience you create.
So, let’s start by going back to the definition of “Look and Feel”:
In software design, look and feel is a term used in respect of a graphical user interface and comprises aspects of its design, including elements such as colours, shapes, layout, and typefaces (the “look”), as well as the behaviour of dynamic elements such as buttons, boxes, and menus (the “feel”).
This draws distinction between how an interface presents itself and what it’s like to be interacted with. By harnessing both of these aspects we are able to define the brand digitally.
Bringing the experience to life
When we know the brand and are familiar with the product we are going to make, it then becomes the designer’s role to bring the experience to life digitally, using techniques that harness the power of movement to convey not only the brand/product “look” but also the “feel”. This tactile tangibility gives the experience an added dimension which can help harness the brand.
The way a brand “looks” and “feels” is now a key differentiator in the market. The feel defines the experience. And has the job of bringing the look of products and services to life, as this embodies the brand’s personality.
Brands have a core set of components to utilise that go beyond how they present themselves in traditional mediums such as print. We live in a world where brands need to understand and consider how they come to life beyond a flat, motionless, presentation.
IxD considerations help to drive the feel
As interaction designers, we create experiences that are mindful of the following to ensure that the user can understand and interact with the interface they are presented with.
Affordance: Control suggests how to use it
Feedback: Should be clear what happened/what is happening
Simplicity: As simple as possible and task focused
Orientation: Focuses on items in the foreground
Hints: Assist users to interact with a product’s interface
Structure: Content organised sensibly
Tolerance: Prevents errors and helps recovery
These IxD principles can help to create the most engaging yet usable interface. However, it’s the specific implementation of each of these considerations and beyond that helps to create the unique experience for the brand. Otherwise it will not connect or engage the target market and risk feeling like a generic interface.
The examples below encompass some of these IxD principles. Such examples as these and more can be found here.
The digital environment has also changed
Digital used to be a very static environment with fixed pixel widths, templated layouts and slow bandwidth. These limitations simply did not allow for motion to be utilised, or for sites to respond to screen size and user interaction.
We are now in a world where devices can harness gestures, have responsive screen sizes, with faster broadband speeds, modernised browsers and hardware. Collectively, these provide the platform for us to give digital channels more freedom to adapt, respond and react.
Documenting the feel
Google material design is a great example of designing the feel to ensure that all digital touch-points of the brand look and feel the same, see it here.
The interactions and behaviours of the digital brand is a critical space that should be just as clearly defined. It is equally important as tone of voice, brand colours, typography etc.
A great example
When I am asked to showcase an example of an experience that utilises motion to convey the “feel” of a product, my default example is Beagle — which is a tool for creating better proposals. Go look at this now!
It may be a few years old now, but it does a fantastic job at describing, showcasing and demonstrating the features, function and form of the product itself. It is a delight to behold and the Moleskine-esque final moment on the page still brings a big smile to my face.
The site acts as a canvas for actors to enter and leave the stage and this provides the narrative to how the product works, and the benefits of using such a tool. The user is guided through in an orderly fashion and is not overwhelmed by content due to the way it loads and how it is displayed on the page. All of this is delivered in the most appropriate way to convey each of the key messages.
This masterpiece was created by the guys over at the digital agency Spring/Summer. Head over here to where they talk in more depth about how they put together this beautiful site. Awesome work!
The feels
I hope you can see the value of spending as much time designing how the website should feel, as you do to how it looks.
This means that throughout the design process you will need to experiment with and demo the various micro-interactions and animations of the page to ensure they are conveying both how the interface works, as well as the personality of the brand you are interacting with. Products such as Principle allow us to play and finalise the timings, easing and physics to ensure we deliver the desired experience both in terms of how this could be envisaged, and ultimately built for real.
Designer James Brindley created these beautiful animated gifs to illustrate the IxD considerations listed in this article. They help bring the piece to life with motion — as is the take home message of this piece. You can check out James’s illustration portfolio here.
