interaction-design

The interactions we design can separate great experiences from mediocre ones.

What is interaction design? It’s the design that summarizes all the feedback mechanisms and elements, that give your website or app an emotion, achieved through interactions. In other words, it’s an emotional intelligence integrated into the user experience of your site.

Who is Chris Wright? He is an interaction designer from Sydney, Australia, creating great and memorable experiences for users.

He listed a series of interesting experiments with interaction design. The articles include a comprehensive description of each experiment and a practical guide on how to implement these design components. Let’s go through some of them:

Experiment 1 – Flexbox adventures

flexbox-adventures

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space. A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Here is a practical example of a flexbox, where you can add or remove items:

See the Pen ogzKpr by designhooks (@designhooks) on CodePen.

Experiment 2 – Transitional accordion

transitional-accordion

The main assumption driving the pattern was that people don’t scroll, and even though we had data to the contrary available to us – that assumption pushed the accordion pattern (and many other patterns like Carousels) forward. Also driving this pattern were popular javascript libraries like Mootools, Scriptaculous, and jQuery. Here is an example of a working transitional accordion:

See the Pen OPRKQR by designhooks (@designhooks) on CodePen.

Experiment 3 – Inertia and motion blur

motion-blur

Inspiration for this experiment came from a dribbble shot created with After Effects. Although we’ve come to a point where we can appropriately animate elements with the help of CSS animation and Javascript – we’re nowhere near the capabilities of what you can produce in After Effects. We’re restricted by a number of things that aren’t yet available to us in CSS, but it doesn’t mean we can’t try to emulate the effects.

Here it is reproduced, have a look:

See the Pen NPRQyj by designhooks (@designhooks) on CodePen.

We’ve contacted Chris, and addressed him some questions regarding these nice experiments. He was happy to provide us more info and share his feedback:

1. How did you come across these experiments?

I started doing the experiments because I wanted to give myself more excuse and more room to explore new things, and be able to explain how things work. Codepen was my initial inspiration to play around with things in a context where it wasn’t necessarily part of a project, but I could see there was a place for discoveries in those experiments that could affect real projects.

While portfolios are incredibly useful for most professionals, I always view them as an old museum that displays what you have already done and the work dates so fast, or at least mine did. Experiments give me a way to breathe new life into my website and always be looking forward.

2. What is the purpose of experiments?

The purpose of my experiments was actually to help me understand these concepts better, it was a way I could write down what I learnt, what I discovered, and how I could use these things so I could have a reference to go back to.

Like I said earlier, Codepen was an initial inspiration to me but at the time they didn’t have their blogs feature yet and I thought there was so much more than just the experiment itself, there was a whole backstory to each experiment. What inspired me to try that particular experiment? what did I learn along the way? what challenges did I face? If all I did was the experiment itself, then I’d probably encounter the same problems the next time I tried to use that feature. Documenting the journey is as important as the outcome.

3. What were your personal findings in the process of writing?

Finding the right voice for writing is really challenging.

The most difficult thing to deal with in writing about technical things is how much do you choose to simplify the concept? Do I write for someone who has no idea what the technology is? or do I write for someone who has heard of it but hasn’t tried it? or do I write to my peers who probably know more about it than I do? I know I don’t want to sound like a know-it-all, just a person trying a bunch of stuff. I decided to write it as a personal journal to myself.

Writing and teaching is a really great way of getting better at understanding the things you thought you already knew enough about, you’ll always learn or try something new; and if you get things wrong – don’t worry people will send you corrections, which is actually really helpful.

4. Will you post more tutorials on a regular basis?

I’m definitely planning on writing and experimenting more, finding the time is always the hardest thing. Paid client work always wins out in a battle of my time. Ideally, I’ll be doing a few of these each month and maybe writing a design observation/work observation.

5. Your regular working day starts with … ?

I begin my day with an hour long walk with my dog, it’s amazing how exercise can help you solve problems.

6. Anything more to add?

I encourage everyone to try and write about stuff even if you think no one will ever read it. Whether it’s design observations, experiments, or whatever works for you; writing will make you better, and help you communicate. If other people get something out of it, that’s a huge bonus.

Special thanks to Chris Wright. See the full list of interaction design experiments on Cris’s website and tell us which is your favorite one.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You may also like