Microinteraction: Contextual Help
This pattern was featured in the IBM Microinteractions Design Jam, a quarterly event where we explored new topics such as machine learning, data visualization, and of course microinteractions. I'm pretty sure I was the inspiration for this design jam because I had been reading a book called Microinteractions - Designing with Details by Dan Saffer, and I couldn't shut up about it around the stuido. Two weeks later we had a design jam on microinteractions. Hmm... coincidence?
The truth is, I'm only showing it here because I think it's a neat portfolio piece, and it shows off my skills in both interaction design and prototyping. I'm not actually sure that something like this would be a good idea to implement in real life. Showing this piece is a quick way to demonstrate that I have skills in interaction design, animation, and basic coding skills.
Faucet Fill Contextual Help Pattern
Here is the Microinteraction that I presented at the Design Jam. The concept was of one container pouring out and filling another container with information. The goal was to get people to engage more with contextual help within our products.
Tools Used: HTML, CSS, JavaScript, Illustrator
The end result of the Microinteractions Design Jam was to create a pattern libary to capture all of the patterns that had been created during the design jam and to expand on those as we went forward. My role was to build that pattern library in Wordpress and maintain it while the team would submit new microinteraction patterns as they came up.
Unfortunately I can't show it here for two reasons:
- It was IBM proprietery information and I'm sure they'd rather not have that posted in public.
- I don't have any screenshots of it.