Interactive Comparisons in E-Learning #385: Challenge | Recap
Happy Challengeversary, E-Learning Heroes! This week marks our 10th year hosting the e-learning challenges. That's ten years of...
Published 3 years ago
Version 1.0
Blog Post
Hi Jonathan. I'm always intrigued by mobile-based projects and how folks attempt to mimic the swipe effect. Your project has inspired me to take a closer look at how I might approach this. I had some time this morning to try and recreate your interaction, while also looking at how certain elements like buttons and feedback layers could be altered slightly to have them stand out a little more:
project recreation:
https://storyline360projects.s3.us-east-2.amazonaws.com/recreate+Jonathan+Hill+project_contrast_feedback+-+Storyline+output/story.html
project recreation:
https://storyline360projects.s3.us-east-2.amazonaws.com/recreate+Jonathan+Hill+project_contrast_feedback+-+Storyline+output/story.html
Hey Daniel - I suspect you're not far off from what I did here! But perhaps you didn't use Javascript to track the position of the scrolling panel too?
Interested in your thoughts on the contrast of certain elements - as I used LinkedIn's own color scheme as the basis for this demo. I often mimic existing interfaces to learn what works and what doesn't. Imitation is the greatest form of flattery I suppose 😀
Interested in your thoughts on the contrast of certain elements - as I used LinkedIn's own color scheme as the basis for this demo. I often mimic existing interfaces to learn what works and what doesn't. Imitation is the greatest form of flattery I suppose 😀
- That's correct - no Js used in this project recreation (though I'm always keen on learning from experienced practitioners!).
Sure! I am using the term "contrast" loosely to refer to visual changes that occur when moving through the app. For example, currently, the "Start," "Post," and "Post a different comment" buttons all have a static look that could benefit from a Hover and Selected state, much like the one's you've employed for the four comment choices. Case in point, I applied a Hover state to the aforementioned buttons, while also giving the "Post" button a Disabled state to communicate to the user that a selection must be made before "posting." I also found the Feedback layer/slide itself could benefit from a "layer/slide title" and darker background to help distinguish itself from the other areas of the interaction.- Cool, it's subtle (again, based on LinkedIn's color scheme) but I did give the Post button a disabled state. But as LinkedIn don't employ hover states in this context, I didn't.
Interesting observations!- Understandable that you'd want to stick to the color scheme and app UI mechanics to maintain that sense of authenticity. 👍 Appreciate the mental exercise, Jon! Look forward to seeing more of your mobile-first designs