Interaction Design
Motion.
Desktop and Mobile Animations
E-commerce Phone App
It shows the usual payment flow when buying a course from a catalogue. For privacy and security reasons users are required to login to take the course and pay. The pay button could also animate from its initial state, to a loader, to a confirmation check mark to indicate that the payment has been processed.
Online Learning Flow
The landing page is a general catalogue with all types of content. When the user finds the course he/she want to take is required to login to pay.
Women's E-commerce Site
The user can select from 3 categories. The accessories available are watches, glasses and hats. The main design here is the behavior of the top navigation when scrolling up, down and sideways.
Chat Flow
1. Click 'Follow' to follow someone. 2. Select the 'Chat' icon. 3. Type the message on the 'Chat' drawer and enter to 'Send'.
Mobile App Calendar
It is easy to use, understand and the information is displayed in a fun and dynamic way.
Food Diary App
As a user, I can add everything I eat on a day and keep track of the calories I consume. I can see how healthy each meal and if I have gone over the calories I am supposed to eat in a day. This animation is for phones, tablets and watches.
Home Page Landing Layout
Options to organize and display information. Each app is different and the design varies depending on the end user. For example, a magazine requires a different layout than an e-commerce app.
Mobile Flows
From a landing screen to the product details, I included the top navigation behavior. Used a diagonal transition to enter and exit the app.
Data Viz and Dashboard Animations
Data visualization showing relationships between data / elements using color, size and position.
Multiple Ways to Display Information
Horizontal or vertical bar graphs, stacked bar graphs, tree-maps or line graphs are commonly used. The data used and the information displayed should be useful and relevant.
Organizing information by type and hierarchy.
VR Characters
Make sure VR menus are not intrusive and that they are accessible for the user as needed.
Design for interactions that go beyond the eyes, explore other inputs including, voice, gestures, gloves and other gadgets.
VR environments require the use of ambience cues
and including shadows reflections, shadows and lighting.
Design for 360 environments, engage the user as they
rotate their head [left, right, up, down] and body around.
