Application Design II / Project 2
23/10/2024 - 11/11/2024 / Week 5 - Week 8
Iman binti Kamarudin / 0364014
Application Design II / Bachelors of Design (Hons) in Creative Media
Iman binti Kamarudin / 0364014
Application Design II / Bachelors of Design (Hons) in Creative Media
Project 2: Interaction Design Proposal and Planning
To quote Cardello, J "Micro-interactions work best when they’re designed
with intention. They should never take someone out of a user experience, but
rather feel natural and intuitive, blending in with the rest of a
design".
ACCOUNT PAGE
INSTRUCTIONS
TASK 2
Before diving into creating the animated prototypes and wireframes, we
need to know what types of micro and macro animations there are and what
they provide users.
RESEARCH
What is micro interaction?
Micro interaction is a visual way to communicate with the user that they
have successfully completed a task. Whenever the user presses a button or
input information in a text field, a small animation/transition plays to
let them know that the task is done. It increases the usability, feedback
and efficiency of the app.
Fig 1.1 - Interaction Example #1
Fig 1.2 - Interaction Example #2
What is macro interaction?
Macro interactions have a larger impact on user experience. It's
essentially a bigger animation or transition that brings a lot of visual
interest to the page and should be intuitive as well as give users a smooth, satisfying experience.
Fig 1.3 - Interaction Example #3
Fig 1.4 - Interaction Example #4
INTERACTIONS
ONBOARDING
For the onboarding pages, I want to make the progress circles above the
'next' buttons switch colors when users move to the next page and have a
bounce curve. I also want the text and images to slide in and out when users go to the
next page.
Fig 2.1 - Onboarding Interaction
LOGIN & LOADING
In the login experience, the 'login' button has a 'press' animation to
signal to the user that it has been clicked. I also added a loading page for more response in the app which has a
loading animation and the Wattpad logo drops down from the top.
Fig 2.2 - Login Button & Loading Screen Interaction
HOMEPAGE
In the homepage, I wanted the 'Continue Reading' section to slide in from
the right. The bottom browse section also should move into frame from the
bottom.
Fig 2.3 - Homepage Transition
When users select a book to view more info, the panel slides in and when
you click the 'Start Reading' button the background changes to a darker
color to signal that the user has pressed it and the next page slides in.
Fig 2.4 - 'Start Reading' Button Interaction
I also wanted to make the book on the leftmost of each carousell to get
bigger as user's scroll but it was proving to be way too difficult and
tedious for me to do on Figma so I'm hoping to do it on the actual app in
Javascript.
READING PAGE
When you go into a book and want to vote on a chapter, you can press the star button. The interaction I want for it will turn it from a black outline to a solid orange color. The same will go for the bookmark button as well.
Fig 2.5 - Like & Bookmark Interaction
NOTIFICATIONS & ACTIVITY FEED
I made the transition between the homepage and notifications more like a
panel is sliding in from the right. I also added the same button micro
interaction when you switch between the notification tab and the activity
feed tab for more response.
Fig 2.6 - Notification Button Interactions
COIN SHOP
I didn't want to make the page too busy and crowded with macro transitions so I just made the buttons in the coin shop change colors when you press on them.
Fig 2.7 - Coin Shop Interactions
SEARCH PAGE
The category buttons on the search page all have hover animations. For the
ones with graphics, it moves slightly and those with solid colors lighten
up and the text enlarges a bit. This helps users know which button they are interacting with and communicate more visual response.
Fig 2.8 - Search Page Button Interactions
LIBRARY
In the library, when users switch between the sub-sections through the
navigation bar at the top, the buttons darken when it's pressed so the
users know that they've interacted with it. I had to make 9 frames just
for 3 sections in this page.
Fig 2.9 - Library Button Interactions
I also wanted a parallax scrolling-like interaction in the library page
but it would unfortunately have made the flow way more complex and
confusing that it already is. Therefore, below is just an example
animation of what it'd look like.
Fig 2.10 - Parallax Scrolling Example / Source: Hemanth Kotla
WRITING PAGE
Since I don't have any actual working interactions in the writing page, I chose to add a transition animation when you first click into the page. The top section in the writing page will have a slide animation to bring
more visual interest to the page. The books in the middle section will pop
up with a slight delay for each book.
Fig 2.11 - Write Page Transition
ACCOUNT PAGE
The account page has a simple micro interaction when you switch between
the different subsections. The buttons change color when users press
on them.
Fig 2.12 - Account Button Interactions
FINAL
Fig 3.1 - Wattpad App Figma Prototype
REFLECTION
My experience with this task was....quite difficult. Figma was really finnicky to work with regarding including transitions as well as having it direct you to a different page. While it's probably because I'm not very experienced with using it yet, it definitely felt like manually coding it in HTML & CSS would've just been easier at times haha.
I found that you should really make your Figma file as organised and clean as you possibly can because the prototype flow lines can easily pile up and clog your view. I've also observed that having a separate section for your button, header and navigation elements is really helpful so you don't have to go scrounging around to find the specific button you need.
In the end, I've learned a lot more about creating animations in Figma but I know there is still so so much out there that I'm not aware of yet. I also feel pretty okay about the outcome for this task but it does feel like I haven't actually done much since I'm only making a few pages (~13) in the final project so there wasn't really a lot of interactions I could include without significantly increasing my workload.
.jpeg)
Comments
Post a Comment