Design September 25, 2018

World Interaction Design Day

Niels Boey

Product Designer

September 25th might seem like a regular day to most people, but for our product designers, it’s quite a special day: World Interaction Design Day. It’s presented in a partnership between Adobe and IxDA (Interaction Design Association), they support global activities for local design communities. The theme for this year’s IXDD is Diversity and Inclusion in Design.

To celebrate this particular day, we’d like to share our 5 principles that Product Designers should always refer to when starting new projects.

Don't skip wireframing

When starting every new project, try to divide your design work into 2 phases: interaction and visual. Visual design can improve your interaction design, but it should not be the base to start from. Create your wireframes first to focus on the interactions, it will help to look past visual style and improve the quality of your flows. Whether you want to work them out on paper or digitally is up to you, but don’t skip over the wireframe phase.

A great read on why you should focus on wireframing

Use existing patterns

Interaction design is not about continually reinventing existing default patterns. The reason why they exist is that they are proven to be clear and usable for users. During the first years of mobile design, various products experimented with different patterns like swipe to delete/snooze in Clear and Mailbox or pull-to-refresh in Tweetie. Those patterns are prevalent now, but at that time there were close to none default patterns for mobile interaction design. We are now facing the same problems with Mixed Reality where there are not a lot of clear default patterns, this is why you will see a lot of experiments in this space. However, if you think you can improve the usability of your app by introducing a new pattern, please do so, but keep in mind that it will always require a learning curve from your users.

Read more about the pull-to-refresh pattern.

View what the revolutionary Mailbox looked like.

Always create prototypes

Prototypes can vary a lot in high- or low-fidelity, you can have a simple 3-view wireframe clickable prototype to explore an interaction pattern or an entirely designed and animate prototype to show off the future vision of a product. Try to find out for yourself what prototype you should create at which point. Think of the goal you are trying to achieve: are you trying to find the easiest way to navigate your product or are you trying to convince a client of your design vision? Don’t waste days on building a prototype, because then you have lost the whole point of creating it in the first place. It should be fast, and you should have no hard feelings throwing it away because you will definitely build prototypes of flows that don’t work.

Our favourite tools for creating quick prototypes: Marvel & Principle

Make your design accessible

When people think of accessibility, they usually think of designing for users with disabilities. According to Apple, 1 in 7 people have a disability worldwide, this can go from blindness to hearing loss to dyslexia. However, you should see accessibility equal to usability since it impacts all users. Everyone will face vision or hearing loss when growing older so you might have perfect sight or hearing now, but you will also benefit from accessible interfaces in the future. Make use of high contrast colours, easily readable fonts, sound and haptic feedback in your interaction design.

Watch Apple’s great Design for Everyone talk.

Make use of animations and transitions

Animations and transitions can provide visual hierarchy to your interface. You can explain to a user how to navigate your design and give context without actually using any words. Make sure you logically use your transitions, so you don’t confuse your users. If an arrow points right, make the detail view transition from the right. Animations for loading states, progress bars or confirmation can help to explain to a user that something is happening and that your product isn’t freezing. Illustrated animations can be used to tell a story without using text. An offline state, for instance, can be explained with an (animated) illustration without the need of reading the description underneath the animation. Try to integrate animations in a useful way in your design, but don’t solely rely on them. Part of accessible design is allowing users to disable animation because it might bring discomfort to some users, so if your interaction design breaks without animations or transitions, rethink it and tweak your design.

A great read: Enhance your user experience with animated transitions

Join us!

Inspired? In The Pocket is looking for product designers and interns. Find out more here:

Check open positions
Check open positions