Interaction Design & Animations

Modern Interaction Design Techniques :

1. Parallax.

2. Card Style Layout.

3. Video & Animation.

4. Design elements that requires physical actions such as "Swipes" or "Click".

5. Microinteraction => Action happen when eg: Deleting Email or Alarm Bell.

6. Push Notifications and Reminders.

7. Geolocalisation.

8. Quickly Show or Hide with clicks or swipes

9. Hover effects.

10. Transition.

IXD Techniques :

1. Transition.
  
  1. Animated & Transition.
  
  2. Revealling informations.
  
  3. Highlighting content.
  
  4. Collapsing Forms and Menus.
  
  5. Scrolling Effects.

2. Interactive Narrative ( Webgraphics more like Infographics ).

3. Microinteractions.

4. Layering effects eg: combining many effects.

Microinteractions :

is a memontary event that completes a single task eg: "Alarm on Iphone" or "Notifications" or "Liking content on a site like 
 
Facebook".

Type of Microinteractions :

1. Accomplish a task : eg: "logging in" or "update status".

2. Connecting Elements : Creates microinteraction between two devices when its connected , or simple bluetooth earbuds connected 

with your device.

3. Making an adjustment : Any changing like "Turning down the volume of music player" or "muting the volume".

4. Change a state : When you complete a small tasks , The state will changes.

5. Unique data interaction : Gathering data such as : "checking weather" or "traffic".

6. To learn more about Microinteractions Techniques follow : "Dan Saffer".

Uses of Animations in Web UI Design :

1. Galleries & Slideshows.

2. Form Fields & CTA ( Call To Action ) .

3. Navigations & Menus.

4. Page Motion.

5. Backgrounds.

6. Loading.

7. Scroll Animation.

8. Hover.