Microinteraction

Deliverables: Microinteraction rules, Animation prototype Programs: Illustrator, After Effects

 

Objective

  • "The key is to define a super tight interaction."

 

Problem

  • Not going to remember the event unless it’s on my calendar

  • Desktop interaction to add an event to Google Calendar was way more difficult than on mobile

 

Prototype Animation

 

Process

Since I was comparing the experience on my desktop to the experience on my phone, I looked at that interaction for guidance. We were also given the book Microinteractions Designing with Details as supplement material, and discussed the structure of a microinteraction as described in the book; trigger, rules, feedback, and loops and modes. 

 

Microinteraction Structure

Trigger : Highlight and shortcut key

Rules :

  • Must be connected to Google Calendar account.

  • Will read highlighted text first, and then the rest of the page looking for the title of the event. 

  • Tells you if it interferes with an event already on your Calendar.

Feedback : Text notification that it has successfully been added to your Calendar. 

Loops and modes : "Invite" gives suggestions of people you would most likely send it to. 
Will let you know if there's a chance you will be late to the event. Using your most likely mode of transportation in that area, where you're going to be before and the start time of the new event. 
Learn your preferences about alarms or reminders.