Blog Post
JodiSansone
4 years agoCommunity Member
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!
- Samuel4 years agoCommunity MemberNeat 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.
- EricChamberl1864 years agoCommunity MemberSo clever, thanks for sharing as always. Curious, when it isn't raining, you are busier?
- Ron_Katz4 years agoCommunity MemberGreat work, Jodi. Love the different styles.
- GlenWild4 years agoCommunity MemberLove it.
- KatelinJordan4 years agoCommunity MemberYou inspire me so much, Jodi!
- Jonathan_Hill4 years agoSuper HeroLots going on here - easy to forget all the variables involved when it's presented so seamlessly.
- MrinalD4 years agoCommunity MemberI quite enjoyed the interaction, particularly the dial one.
- JodiSansone4 years agoCommunity MemberThank 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?
- Jonathan_Hill4 years agoSuper HeroHey 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.- JodiSansone4 years agoCommunity MemberThank you for the suggestions!
- KevinThorn4 years agoSuper HeroHi 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.
- KariVaz4 years agoCommunity MemberAmazing design, Jodi! Love the clean colour scheme.
- Kristy_Moede4 years agoCommunity MemberThis is awesome!! Love the three options within the avatar :) too fun