Interaction Design Studio 2

Microinteractions - Chapters 4 & 5

Chapter responses to the book Designing Microinteractions by Dan Saffer.

Expertise

individual reading assignment

Platforms

ebook, google docs

Deliverables

Reading chapters 4 & 5, determine what the feedback is for our microinteractions

Project overview

Notion - Search

When I tap on the search icon to trigger the microinteraction the icon fades to 0% opacity and the search screen opens. When in the search screen, there is a flashing blue line indicating that I can start typing my search query. If I search something that does not exist I get a feedback message stating "no results, try different search terms". Also when it is searching the query, the search icon in the search bar at the top of the screen changes to a loading spinning wheel animation until the search is complete which when completed displays the search icon. I think the feedback used in Notion's search microinteraction is used correctly because they didn't overly use animations and they didn't use uncanny valley language when displaying an error message.

Apple Watch - Weather Dial

When I tap on the weather dial to view different types of weather data in my location the only information that changes are the data types. The hourly times and layout of the dial stays the same. The visual feedback when tapping on the dial is that the data quickly changes when triggered and fades in clockwise around the dial. There is also visual feedback in the center of the dial displaying the what the data represents either precipitation, temperature, or forecast. Before reading the feedback chapter in Designing Microinterations, I thought that this weather dial should have a blinking animation to indicate to the user that they can interact with it. However, I learned that animations should be used as little as possible since it is distracting to the user and should only be used for something that is critical to the microinteraction.

Google Calendar - Add to Calendar

When I tap on the plus icon there is a white overlay that covers the screen and 5 icons animate vertically up the screen. In terms of feedback, vertical animation of the 5 icons tells the user that there are 5 different types of options they can choose to add to their calendar. There is also text right next to the icons on the left side which help the user determine what type of information they would like to add in accordance to the options available. There is very limited feedback in this microinteraction, however if the user were to continue and select an option such as create an event then it brings up an event form modal with more areas of feedback to the user.

Apple Watch - Weather Dial Mode

For the Apple Watch Weather Dial microinteraction, there is a mode that allows the user to change their location. This mode brings the user to a new screen within the weather app to change location or add a new city. I don't believe this microinteraction could function without this mode because a user will want to change their location depending on a number of factors.

Let’s create something meaningful

Reach out to me if you want to work together