Assignments_UI Challenge 2_Slider

Analysis

Analysis 1

Liquid Slider

Purpose: To adjust value by dragging up and down.

Function: Value selection (degree / °)

Coherent: The slider is designed as a graduated cylinder to let users know it’s a vertical slider. While the marked line on the graduated cylinder represents tick mark. One thing is users may be confused on where to drag (bubble or cylinder).

Visual: 
    1. Graphic Asset: Oval callout 
    2. Color: More rainbow gradient colors appear as the degree increases. 
    3. Text/Label: The degree is shown in the oval callout. 
    4. Animation: Wave effect on the water. 
    5. Position

Interactivity: 

Low degree, low water level, showing only the blue part of the rainbow gradient.

Water level rises following the degree, showing till middle colors of rainbow.

Almost a complete rainbow gradient shown when degree getting higher. 

Usability & Engagement: For me, overall is well designed. The colors are eye-pleasing, the percentage is labeled clearly and the tick mark helps users to adjust the value easier. May be a thumb added can help too.  

Analysis 2

Brightness Slider

Purpose: To adjust the brightness of lamp.

Function: Value selection (%)

Coherent: The word “brightness” is labeled clearly on the top left corner to let users understand the function of this slider. The thumb is big enough to let them know they can drag but the bar for me is somehow too light.

Visual:

    1. Opacity: Opacity changes around the midpoint. 

    2. Color: - Higher %: yellow background + black text - Lower %: blue background + white text 

    3. Text/Label: The percentage is shown beside the thumb. 

    4. Animation 

    5. Position

Interactivity:

Low% : blue background, white text, high opacity

Opacity decreases on transition

High% : yellow background, black text, high opacity

Usability & Engagement: The smoke effect is mesmerizing but it takes a bit longer time for users that wanna readjust, to wait for the smoke dissipate and see the thumb. It’s not necessary required, maybe can shorten and decrease the smoke blown (?)

Analysis 3

Emoji Chooser Slider

Purpose: To choose emoji.

Function: Visual selection (emoji)

Coherent: Users can easily understand its function by seeing the emoji. However, users might feel unsure about they need to drag or to tap jump for different choices, or both action are allowed.

Visual:
    1. Graphic Asset: Oval callout pops out above the chosen emoji. 
    2. Opacity: The emoji on either side of the selected emoji have less opacity. 
    3. Scale: The selected emoji has a larger scale. 
    4. Text/Label: The label is displayed in the oval callout. 
    5. Animation: The oval callout disappear with a firework effect while swiping away the option. 
    6. Position

Interactivity:

The emotion is labeled above users’ selection

Users click the discrete selection

The emojis slide towards the new selection, the previous label disappeared

New selection increases in scale, new label pops out

Usability & Engagement: It’s a creative idea to make emoji chooser in slider. But for me, it would be better if all the other emojis are displayed all the way instead of replaced them with circles and let users to guess.

UI Challenge 2

My idea for this challenge is to make a game setting that allow users to adjust screen brightness, music volume and to mute music. Sliders are made for brightness and volume adjustment, while a toggle button is made for users to mute or unmute the background music. 

References

Flowchart

Video Capture

Round 1

I tried to use directional light and materials to achieve the brightness idea at first but it didn't work for me. However, throughout this exploration and learning process, I realized that directional light and materials are usually used for 3D scene.

Round 2

For round 2, I fixed the brightness slider that didn't really work for round 1. I also fixed the error code for the mute toggle since the volume couldn't remain as before when unmuted.

Self Evaluation

I didn't do really well for this challenge because I was having trouble making a brightness slider.  My ability and skills can't support my previous idea as I found out that we usually have to save data for a setting function, but I did try my best in the process of doing so. Overall, this interactive could definitely be improved in the future, but I did gain a superficial understanding of lighting and saving data, it is a learning experience for me to do better next time.