W10 Assignment: Playing With Cards
1. List of actions possible for a card given
· Click an envelope to view the message
·
Click on the employee image (front) to display his/her
background information (back)
·
Click on the door to have the same door displayed in a different
color
·
Click an image to flip it to 45, 90, or 180 degrees like a clock
·
Click to have a street light
·
Hover a mouse on an image to zoom in and out
·
Bouncing ball inside a card (frame)
·
Images slideshow
·
Click a circle in order to display a colorful bar
·
Display a progress bar
·
Hover to have social media icons change from grey color to
colorful icons
·
Click a button to activate a Stopwatch
2. 2. Two actions are chosen to
be used as actual UI elements. Use cases given with explanations why you think
those actions would be appropriate for the user interactions you describe.
·
I will use the 2nd mentioned action on the website
contact’s page. This method will help me have the employees’ images on the
front and details such as name, email, telephone, and position about them on
the back. This technique will save some space on the page and give the end-user
the impression of interacting with live objects.
·
I have chosen
the last action on the list as well. A Stopwatch will be added to a promotional
advert that will be displayed on the website such as how many hours are left
before closing registration.
3. 3. Motions for the two
actions described.
My two actions will use the
following motions:
·
Transition: transform – which will allow some
elements to change from one state to another (over a given duration). My transforms will be done on mouse-hover.
·
Animation: will be used to draw my website’s
users’ attention to important areas. A keyframe will be used to add two stages
the clock hand’s rotation (from 0 to 360 degrees)
Comments
Post a Comment