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...
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