Emma Doyle
Emma Doyle

Mirco-interactions reading: Rules, Feedback and Modes

Using a diagramming tool create three flowchart diagrams each describing the set of rules that guide the three micro-interactions that you identified last week. Consider the user input, the time components (delays, schedules, etc.), the data required, the processes involved and the final outcome(s).

PART 1:

iMessage tapbacks:

Triggers: Tap and hold iMessage
Rules: Allows either the sender or receiver to emphasize, like, love, laugh or question a message sent by either party. 
Feedback: It highlights the message, and pulls up a set of icons that allows the user to recognize the message without words or responding. Sends a notification to the recipient. 
Loops & Modes: The “tapback” remains unless a user removes it or changes it manually. There is no repetition or change in conditions. 
Review: This is an effective interaction and allows for users to communicate with a simple trigger. If users don't want to respond, or want to emphasize a message quickly, this is a delightful and effective interaction.

Snapchat loading:

Triggers: Pull down on window
Rules: Users see the ghost which represents loading, and then once the page loads the ghost flies up with a rainbow trail to signify that it’s done. 
Feedback: Users see a smiley ghost that’s loading before the ghost shoots beyond the screen with a rainbow trail signaling that the app is done loading. Users also feel a haptic when pulling down on the screen. 
Loops & Modes: The loading interaction disappears until a user pulls the screen down again to refresh or reload once again. There is no change in conditions. 
Review: This is an effective microinteraction that shows a playful branded example of a refreshing loop. Users can pull down on the window in order to check for new snaps from friends. Users see the ghost peep while it's loading, then shoot out of the window when it's completed, making it a delightful interaction.

Amie Horizontal Scroll Bar:

Triggers: Drag the timeline at the bottom to horizontally scroll the calendar. 
Rules: Users can use their tracker or drag the timeline at the bottom of the page to scroll the calendar horizontally, and explore the company’s background.
Feedback: The timeline scrolling right to left revealing new parts of the screen. 
Loops & Modes: The scrolling interaction resets upon refreshing the page. A user can change between modes by pressing the + or - sign in the pill shapes navigation bar to scroll between years, months, and days.
Review: This is an effective interaction in allowing users to scroll a calendar vertically without changing natural mouse patterns. By giving users both a timeline that can click and drag to scroll, or the mouse option, users can effectively navigate the webpage.

PART 2:

Find an example of a micro-interaction that switches modes - one of your previously selected ones or a new one. Could this mode be avoided and if so how?

An example of a microinteraction that switches modes could be light and dark mode on portorocha.com.

Send Emma Doyle a reply about this page
More from Emma Doyle
Back to profile