UI interaction & UI Challenge [4]

 UI interaction 

Swipe Products


Retrieved from: https://dribbble.com/shots/15292175-Product-Carousel-Experience

This is a button interaction with animation. Two buttons at the right bottom for the user to slide through the pages with different products. Two buttons pointed to two different directions which are left and right. The left button swipes to the left page whereas the right button swipes to the right page. 

Animation is applied to the product, typography which is changing the opacity, scale, and position. The background of the product changes whenever swipes to the other product. There's a number counting on the right side of the page showing user the products numbers on this website. The buttons have some animation too which is the button background turn black when the user presses the button. 

The overall design is clean and smooth. All elements are aligned well.

Flowchart



       3d hover interaction

Retrieved from: https://dribbble.com/shots/11321655-3d-hover-interactions

This is a website with well-crafting elements. All interactive elements using hover interaction and 3d animation. There's a three title for users to click in which is CULTURE, BOOKS, and PODCASTS. Before users click in, there's an interaction in these three titles. Users hover each title and title turn to only showing the outlines with appearing the related items behind the title. Items behind using rotation animation. Besides, the background color changes when users hover different titles. 

This interaction is interesting with adding the 3d items.

Flowchart



  Safety-GDPR Settings 




Retrieved from: https://dribbble.com/shots/15635034-Saifty-GDPR-Settings

An interaction for users to set up their personal information before login in. In the beginning, users are required to type in their Gmail and password. After completed, users click the login button and will then pop up a box for users to confirm whether receiving content in the following ways. Three options are provided for users to choose which are Push, Email, and SMS. When users tap one of the icons, will appear the animation of filling up the color for the icon which using scale, opacity, and color. Some small circle shape appears behind the icons as well. Users can then click the Save settings button.

This interaction using button interaction and a combination of animation. The color contrast shows the accessibility and the prior elements.  

Flowchart




  UI Challenge [4]


UI Interaction- Painting





This is a combined UI interaction with drag and drop, a button, and a slider. An interaction of painting piece. Due to the file size, I can only record this in a few seconds for uploading here. First and foremost, users have the option to click the music button. The music button allows music on. Then, users need to drag the slider where located on the left side. Users can choose different colors and located them on the painting pieces. If users want to change the color, they can directly drop the other colors to replace the piece.

3 steps in this interaction


The first step, click this button for music.


In the second step, drag the slider and drag one of them to the painting pieces.

The last step, drag and drop the color to painting pieces.


Animation

I applied animation to the Home, frame, and button as well. For button animation, I make it in Unity.


Frame animation 


Home animation

Cursor


For the cursor, I change to the hand illustration style that suits the theme. When the user mouse press, the cursor will scale down whereas retaining its original size when the mouse is up. 


Inspiration


Retrieved from:https://www.pinterest.com/pin/601371356498327405/


                    Retrieved from:https://www.pinterest.com/pin/601371356498327418/


                   Retrieved from:https://www.pinterest.com/pin/601371356496801571/

I found some of these interesting illustration designs and concepts. After that, I started on express this design in my artwork. 


Sketches


I first started on the sketch and I wanted to do a scroller with different colors of ball drag into the empty painting. Besides, the two buttons are for redo and undo steps. I also decided to apply animation to my title.

Flowchart





                                                        Reflective Evaluation


In this exercise, I learn all the UI interactions combined. It is quite challenging for me to do this exercise especially the scroller and drag and drop script for dragging the color to the painting pieces. However, I enjoy the process of learning to code and obtain some new knowledge in Unity as well. 


 






Comments

Post a Comment

Popular posts from this blog

Final Submission - Week 18

Image
   Week 18 Final Submission This week, I refined my rationale video and arrange the files folders that need to be submitted. Presentation slide Here is the Google link Project Background Normal people take notes on their phone or digital notepad to remember things. Similarly, blind people use audio recording to keep track of tasks and plans. They carry essential items every day, which use up their memory. Problem statement However, phone recording is inconvenient for them as it may record voice instructions and the files are disorganized without labels. They have to go through more steps to find the recording they want. Device Overview   Function Record & Playback Main features  3 main Braille buttons Item Task Phone number Target Audience Blind workers Place Wearable device Rationale Our brains have a limited capacity for memory storage, so taking notes is a common way to remember important information. Similarly, blind people also rely on note-taking to...
Read more

Visit Blind Agencies and show them my product - Week 17

Image
  Week 17 Beta Test This week, I visited them and there are 5 blind workers participating in my user test. The reason for doing this is to know if am I doing the things that are needed for them and comments for continued improvement. This is the survey form and below are the user responses. Insights 100% of them believe the product assists blind workers in taking notes. 100% of them like the concept of the product. 100%of them know how to use the product. 100% of them can recognize the braille on the device and define them clearly. 100% of them think the device should be smaller and is able to with them everywhere they go. 100% of them claim that the volume is soft, and needs to increase the volume a bit higher. 40% of them think I should add in meeting note button because the blind worker will record the long session for the meeting. 60% of them think I should add in sound notification to indicate to users they can start recording. 40% of them think that I should add voice-over w...
Read more

Find Interviewer and Get their responses - Week 4

Image
Contact company service for the Blind Community After the project proposal was approved, I immediately create a survey form for the blind community. The survey form was created in English and Bahasa Melayu, in case I met someone who is more fluent in Malay.   To find the blind community, I try to email Malaysia Association for the Blind (MAB) for asking their permission to interview the blind community.  However, the company hasn't reply my message. So, I try to contact the service number provided on Facebook. Fortunately, the company picked up my phone. They said they had received my email and need take time for them to reply to my message. They promise me they will arrange an online meeting for me with the blind community. 
Read more