Slider Researches & UI Challenge[2]

Slider Researches

 Balloon Slider Control

Retrieved from: https://dribbble.com/shots/7515563-Balloon-Slider


This slider is a balloon slider that shows the numbers. Users are required to drag the slider for experiencing the interaction. In the beginning, users can choose the direction they prefer to go. The number starts counting from the left to right and changes the value in every drag point as well. Whenever users drag, the balloon will follow the drag holder with the number in it, at the same time, the balloon will change its size depends on the value.The smaller value, the smaller balloon whereas the bigger value, the bigger the balloon is. When users satisfy the drag point they want, the handle slide transforms to a smaller circle with different colors and the balloon gone. 

Smaller value, smaller balloon



Bigger value, bigger balloon


Holder slider change when users confirm the point.
 

The overall design is clean and smooth. Background slider using low opacity and the fill area using bright purple color to show the heavy contrast between them. The color contrast makes users easier to recognize the drag point they drag. Besides, the balloon has some animation with the combination of scale, position, and rotation.

Flowchart





Morphing Emoji Slider

Retrieved from: https://dribbble.com/shots/8583409-Morphing-Emoji-Slider

This is a morphing emoji slider in 3d animation. When users drag to a certain point, the emoji changes as well as the words and background color. This slider functions in revealing mood. There are 5 drag points in this slider, the left corner expresses the worst mood whereas the right corner is in the best mood. 


Awful mood



Bad mood



Okay mood

Good mood

Great mood

The overall design is nice. Emoji are using animation in transforming to the other state. Animation included scale, position, color, and opacity. Besides, the interaction is in a clear direction. Background color and text change to every single state. Background slider using low opacity white with different dots size in it. The handle slide is in full white color to create a high contrast. The background text appears from the bottom with smooth animation and create in gradient low opacity white.

Flowchart



Life Insurance Amount Slider

Retrieved from: https://dribbble.com/shots/10079556-Life-Insurance-amount-slider

This is a life insurance amount slider. This slider help users understand the amount they should have which means provide the information for users. When users drag the holder, the value on the holder change with a slight of information on the top right of the bar. Slider proceeds from the bottom to top. The smaller amount starts from the bottom whereas the larger amount stays at the top. 

The overall design is clear. There are highlighted life insurance amounts stated on the left side of the bar. The background slider uses gradient sky blue whereas the fill area is a green color with some different green value color shapes sticking to the top of the fill area. When users drag to a certain value, information appears. This slider using animation with the combination of count number value.

Flowchart



 

 UI Challenge [2]

Round 1


Slider






This is a plant illustration in image sequences when dragging the slider. When a user starts mouse click the hand holder slider(leaf), he or she will experience the mouse sizes become smaller, when he releases the mouse, the mouse retain to its original size. The slider is controlling the plant image sequences. In the beginning, there's only a vase exists. After the user starts to drag the slider, the plant begins to grow. At the same time, the background change from purple to yellow-white. In reverse, when the slider drags from top to bottom, the plant will remain the same as the beginning. 


In the beginning state.


 End State. 


                                                 

Inspiration
Retrieved from: https://www.behance.net/gallery/87835469/Microsoft-x-Surface

Retrieved from: https://www.behance.net/gallery/115658451/Bright-enchanted-illustrations

I was inspired by this kind of graphic style. I think these graphics look nice and interesting. After that, I decided to go for the creating plant in graphic style.

Sketches 


I sketch out some of the ideas that come out of my mind and refer to the ideas of references as well.



The finishing outcome. I create a plant that has fruit so it looks more interesting. Besides, I added some textures for the vase too. 

For the image sequences, I created 11 images.




 I choose a simple style for the slider looking with a fruit handle controller and sky blue color for the fill-in area. 

Color Scheme

The overall chosen color scheme

Coding

For the coding part, I created several items such as Slider, GameObject, Color, and Image.



I created 2 public void, one for changing the color and another one for slider controlling the image sequences.


Flowchart




Round 2



In the Round 2 section, I added more interaction animation which is when users start to drag the slider, a box with "before" text in it, and some rotation animation as well. After the users drag the slider to the end, will appear the box with "after" text in it.

The Before text appears on the left side. 

The After text appears on the left side. 

Cursor



For the cursor, I choose a watering flower pot with animation. When the user mouse press, the cursor will scale down whereas retaining its original size when the mouse is up. 

In the Round 2 section, I also try to improve the smooth interaction for the plant growing and applying the audio to this artwork.

Flowchart



 

Reflective Evaluation 

In this slider exercise, I learn the coding for slider particularly in setting up the slider. I had learned to adjust the min value and the max value. Besides, I also learn how to make image sequences for a slider. Although I not doing well with the plant animation in this slider. However, I learn the skill for applying it. All in all, the exercise is fun and interesting. 


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