Drag and Put researches & UI Challenge [3]

 Drag and Put researches

Image Upload 



Retrieved from: https://dribbble.com/shots/8297994-ikas-Dashboard-Image-Upload-Animation

This is a UI interface with experiencing drag and put. In the beginning, users choose the image from elsewhere with hand-holding which means mouse clicking the image. Then, users need to drop their images to this place where there's an icon animation and the "Drop your image here or browse"  title as well. After users complete the drop image, it will show the uploading animation.

The overall design is smooth and clean. The color mood is blue and white. Background applied the drop shadow effect to create a pop-up feeling. Besides, an interesting interaction is applied when users drag the image to the drop place, which has some rotation on it. The place for drop image has applied hover effect on it. After completing the uploading, the line animation moves down its position until fully disappears. The box decreases its height as well.

Flowchart


Upload file

Retrieved from:https://dribbble.com/shots/4174256-Drag-and-Drop-to-upload

In the beginning, users drag a file into this website. The background appears to be darker when users drag their files into it. The title"Drop your file" appear with a pointed-up arrow icon animation and particles dropdown. In the process of uploading, the arrow animation goes up by diminishing its opacity in every step. A small box appears at the left bottom corner that showing the line and text animation.

A lot of interaction is applied to it. When users drag their file to the drop file icon. It appears the animation of small particles. The icon scales up a little after receiving the file,  the icon then goes up by diminishing opacity. On the other hand, the line animation is interesting. After successfully fill in, the line animation soon becomes a small tick that indicates uploaded completely. 

Flowchart



Delete files
Retrieved from: https://dribbble.com/shots/4613529-Drag-and-drop-to-delete

In the beginning, users select the unwanted files and drag them to the dustbin icon which appears at the bottom. Then, it will show the title of successfully move to trash.

This design has applied scale, opacity, and rotation. Users choose their files with blue outlines which indicate the files are selected. When users dragging the files, drop shadow is applied to all unwanted files. The dustbin is designed in red color which indicates an alert option. The dustbin showed up when drag is being applied to the files. The dustbin has some animation with all unwanted files scale down their sizes and gather into one. The title "move to trash" fly out from the bottom. 

Flowchart






UI Challenge [3]

Round 1

Drag And Put - What is your favorite pizza?


This is a UI interaction by selecting ingredients and place them in the pizza. In the beginning, Users need to choose ingredients around the pizza which are onion, mushroom, sausage, and tomato. These ingredients have a hover effect on them that indicates these ingredients are able to make interact. After users choose one of the ingredients, they can choose random dots on the pizza to place it. Users can choose to place different ingredients on dots and no ingredients for some dots as well. In some cases, users will need to remove ingredients from dots. They are able to place back the ingredient to the original position.

beginning state

hover state
Users use a fork to drag the ingredient to the dot. 


Inspiration
Retrieved from: https://www.behance.net/gallery/104039105/Editorial-Food-Illustration-01?tracking_source=search_projects_recommended%7Co%21my%20pizza

Retrieved from: https://www.behance.net/gallery/98845753/muka-cafe

Before start, I had some thought of creating a pizza and letting users choose ingredients for placing on the pizza. I then start to searches for references for pizza. I found out that these two references are strongly inspired me. 
 

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


I then decided to make four ingredients for the pizza which are onion, mushroom, sausage, and tomato.



The dot arrangement references and chosen font for this topic. I choose this font because of its flexibility and aesthetics.

Sketches


 The initial sketch for this topic.

Finishing outcome


I apply a texture image for the background. For text, I designed it with having the highlight effect so users can put more attention to the title before going through the interaction. For the custom cursor, I choose a fork.

In Unity

I create 4 scripts for this topic, one for the custom cursor, item drop and item drag, hand script.

Flowchart






Round 2


In the Round 2 section, I added mostly animation and changing the cursor. Besides, making some changes for the design background and scale down all the elements. I also applied the audio and sound effects to this drag and drop exercise.

The background design change


I added a pizza plate that suits the overall design. Besides, I applied animation to all typography in this interaction. For the title, "What is Your Favourite Pizza", I make the animation in After Effect and export it to Unity.


The video for my title animation.


For other typography, I just added some simple animation which is adjusting the position and rotation in Unity. 

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. 

Audio and sound effect

For the audio, I choose restaurant music for background music and I applied the sound effect to all the food cut-out pieces. Whenever users start to drag the ingredient pieces, the sound effect appears. 

Flowchart




Reflective Evaluation

In this drag and put exercise, I learned how to code well of the drag and drop script. Besides, I learned how to use the Event System and using mouse to select the item and drop it to the exact place. I also learn how to use raycastTarget for applied to the items which have the magnet effect. All in all, I learn a lot of useful UI interaction skills in this exercise.

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 keep track of thei
Read more

Hand Up Do good Project Proposal - Week 7

Image
  Project Category I choose the sixth category for the assignments which is optimizing: making daily activities more efficient. Project Background Our human brains can store a maximum amount of memory. Therefore, we rely on taking notes down in case we forgot. This task seems so simple for normal people to do, we normally send messages in our own chat on our phone or take notes in a digital notepad. Similarly, most blind people have the habit of taking notes too. They use audio recording as a result to keep track of these tasks and plans. However, they experience inconvenience from the phone recording because they will record the voice instructions if they use their phone at the same time. In addition, the audio files are arranged in an absolute mess without labels. Besides, there are more steps for them to click the recording they want. Because they need to go to work every day, they always bring their essentials —white canes, work bags, wallets, and keys— along with them. None o
Read more

Design Planning -Week 5

Image
  Design Planning  After secondary research and primary research, I have two design plans at this stage both of which address the same problem but in different directions. It is a special device that provides find things easily without taking time to find out. 
Read more