This case study discusses the process I went through when creating a simple microinteraction and eventually a complex one for my microinteraction class. I was introduced to microinteractions and their structure, and had to apply what I already knew how to do in code to create my own microinteraction and build on it throughout the course. I talk about the design choices I made and the steps I took to successfully code what I had planned to do for my microinteractions. For the final project, I was able to code my own complex microinteraction using HTML, CSS, JavaScript.
This was a project I worked on for my IDM 241 Microinteractions class during the Fall 2022 term. In this class, I learned about what microinteractions are, why they are important, and it’s structure: triggers, rules, feedback, and loops and modes. We learned how to identify each of the component of its structure and then developed our own microinteractions using HTML, CSS, and Javascript
I started off by researching some complex microinteractions that already exist that could be improved, like a save button, navigation bar, ect. To ensure I was not over budgeting my time, I planned out the interactions I wanted to implement into my project in the earlier stages. I started with a simple microinteraction and added to it throughout the term, to end with a complex microinteraction for my final project.
This project was assigned to challenge me to build on my HTML, CSS, and Javascript skills to successfully create a complex microinteraction. This project required me to apply and create connections between the content I already knew and what I just learned in the beginning of the class. From the class, I learned that Microinteractions are an essential piece to how a user understands what they are doing on an interface.
Planning a simple microinteraction was the first step part of my project. The hardest part for me during this assignment was coming up with an interaction that is simple enough to build on. I spent my time during this process searching for inspiration and brainstorming ideas for this microinteraction. After brainstorming, I decided that my next would be to explain these interactions and create wireframes to visually understand and navigate through developing it.
View my Alpha Description to see my wireframes and microinteraction structure.
After planning and wireframing my microinteraction, it was finally time to develop it with code. I searched for working examples and tried to understand the existing code, in order to implement the example into my microinteraction. Through this phase, I was heavily reliant on Visual Studio Code, Codepen, and W3School. I had used CSS to create my animation for when the user hovers over the image. During this stage in my project, I struggled most to make sure that the text and image on the overlay were responsive. Also, I was worried that my plan to create a slideshow as my final product would become an issue with this overlay with content based on the image. For this reason, I coded a slideshow using some JavaScript to ensure everything I built moving forward would function properly with this new element.
View my Alpha Build.
After coding my Alpha, I already knew what I wanted to do next. I need to learn how to create and implement a pre-loading animation. While brainstorming, I realized that the best way to implement this was to have the pre-loader animation spin while the learn more page is loading. Using an animation like this was very new to me. So before finalizing this idea, I spent more time brainstorming and came to the conclusion that this would be the best method for my project and I would get the opportunity to learn something new. In class, we were taught the different types of loading animation, but were not taught how to code it. At this stage, I feared that I would not be able to create and code a pre-loader that made sense my design and overall layout.
View my Beta Description to see my wireframes and microinteraction structure.
After planning out my Beta, I started off by looking for working examples of a pre-loader what looked and acted similarly to my planned preloaded. After attempting to understand the working examples, I quickly realized that I would need a bit more time that I had originally thought to develop a pre-loader. Once, I found an animation that I thought would work with my design, I started off by playing with the example code to understand why the developer wrote his/her code in this method. Then, I worked hard to make my own version of the pre-loader in Codepen. After getting this microinteraction working, the next step was to actually implement it into my Beta Build. After doing so, there were a lot of challenges as at this point. In order for this loader to slide in on the overlay and also connect to the different link based on the image, I had to reformat and code a lot more in JavaScript that I initially thought. After adding this element to my build, there were some stylistic and responsiveness issue due to the added element. With the help of music and a lot of research, I was able to resolve these issues before the deadline.
View my Beta Build.
After the Beta Build, it was time to make the microinteraction more complex by making sure that the overlay’s content changed with the images in the slide. I was glad I built out my slideshow earlier, that way at this stage I could focus more on the overall functionality instead of attempting to apply my microinteractions into a slideshow layout. Due to my proactiveness, I was all to focus more on the finer details in my project. My plan for my final build was to focus on the appearance, timing and the transition of the slideshow itself.
View my Final Description to see my wireframes and microinteraction structure.
Finally, it was time to code what I had planned in my final description. Somethings I focused on were the appearance of the dot indicators, the transition of a new slide coming in, and the timing of the slides themselves. Overall, I think my decision to code the slide itself out earlier was very wise. It really helped me focus on improving the smaller details, as its users allows pay attention to the fine details. After I coded the transitions and improved the appearance of dot indicators, I has some time to have peer test it to make sure nothing in the interaction malfunctioned. I wanted to make sure that after all the time and effort I poured into this project, there weren’t any minor issues I overlooked. Some people expressed that the time of the overlay was slow and others said it was too fast, so I reached out to my professors for advice and did some research on my own. After this, I made any other minor adjusts that I found from my testing.
View my Final Build.
Looking back to the beginning of this process, I had no idea I was capable of creating something like this. I am very proud of the final results and amazed by how fast this process of making a simple microinteraction into a complex interaction was. I was able to successfully design and code a complex interaction with at least 6 microinteractions applied to it. I coded this interaction that I can apply to future projects, that has no breaks or errors using HTML, CSS, and JavaScript. Throughout this project, I gained confidence in my coding skills and learned about new resources that helped me a lot.
From creating my own microinteraction, I now have the ability to spot and understand the purpose of the various microinterations used on sites. Before this class, I understood the purpose but didn’t see the value in microinteractions as I do now. Lastly, I honestly enjoyed and gained confidence in my coding skills from overcoming the challenges that came with creating my microinteraction. The experience taught me that I can code anything I envision as long as I keep trying.