Using Sliders with E-Learning Characters #311: Challenge | Recap
Using characters in e-learning courses is one of the easiest ways designers can personalize the learning experience.
In a...
Published 4 years ago
Version 1.0
Blog Post
Avatar Slider/Dial Demo
Demo: https://bit.ly/367sLDQ
Download: https://bit.ly/2KIklLE
It took me all afternoon to make these avatars...but it's raining here so I have the time. This is an homage to the Dolly Parton challenge from a couple years ago. Use the slider to choose your avatar and the dial to choose a style (LinkedIn, Facebook, or Tinder. I provided a download to show how all the variables work--if someone has a more efficient solution I'd love to see it. Have a good week!
Demo: https://bit.ly/367sLDQ
Download: https://bit.ly/2KIklLE
It took me all afternoon to make these avatars...but it's raining here so I have the time. This is an homage to the Dolly Parton challenge from a couple years ago. Use the slider to choose your avatar and the dial to choose a style (LinkedIn, Facebook, or Tinder. I provided a download to show how all the variables work--if someone has a more efficient solution I'd love to see it. Have a good week!
- Neat work, Jodi. I remember that one. Haha. My demo also borrows from a challenge. No idea how they get started but they sure catch on.
- So clever, thanks for sharing as always. Curious, when it isn't raining, you are busier?
- Great work, Jodi. Love the different styles.
- Love it.
- You inspire me so much, Jodi!
- Lots going on here - easy to forget all the variables involved when it's presented so seamlessly.
- I quite enjoyed the interaction, particularly the dial one.
- Thank you everyone for the kind words on this demo. Does anyone have any advice on how to make the built in dials work better on mobile? I don't really like how this is working on my phone. The slider is a little fussy, but the dial is a disaster. Should I use a fatter dial?
- Hey Jodi. Have you tried combining it with hotspots and/or triggers attached to each label, that change the underlying value of the dial?
A bit like this method?
Slide Away
https://www.linkedin.com/pulse/slide-away-jonathan-hill-assoc-cipd
https://engagebraintrain.com/x-and-y-you-should-consider-sliders-instead-of-scroll-boxes/
TL;DR could you make the text boxes that contain the labels for your dial into 'buttons', which when clicked set the value of the dial variable to 1, 2, or 3. This will make the dial 'clickable', but the dial will also still move when the variable changes.- Thank you for the suggestions!
- Hi Jodi! The nested interaction of choosing an avatar and then a social media profile image is clever.
For your dial question, I think it's more about the user experience on a smartphone or tablet than trying to force it to work.
We don't typically drag our finger in a circular motion to interact with app screens - tap, swipe, or scroll are the common gestures. Even "dragging" a finger on a mobile device is a tricky design. You could try a larger, fatter dial but in the end, users on mobile devices are using their fingertips to manipulate the dial in a circular motion.
- Amazing design, Jodi! Love the clean colour scheme.
- This is awesome!! Love the three options within the avatar :) too fun
