Today’s goal was to create a micro interaction based around the input fields. After inputting correct text, a golf hole and flag will pop up telling the user they have successfully finished an input field. This little golf icon really brought the input field to life in a fun and engaging way by simulating the user playing golf during sign up and login.

The flag started with the same orange color that was experimented with for the buttons, but knew that it would most likely need to change to green to represent a success checkmark. With that said, I’m still brainstorming ideas for a negative result animation. It could be a red or orange flag with an X on it, or a golf hole with no flag and an X on it. Maybe a golf ball not quite making it into the hole. The possibilities are endless. But the goal is clear, to make sure the user understands what they type was correct or incorrect in a fun and engaging way.

For this initial animation, the hole expands followed by the flag popping up and shaking to show importance. It would be fun to test the phone vibration feature with the flag shake to give the user added feedback on their successful input. Looking at the animation now, I would like to try and make it so the hole appears by a layer of the input field visibly sinking into space, as opposed to expanding from thin air. I think it may make the interface feel like it has more depth than just a flat screen. I also want to try to add a shadow to the flag to help it to stand out from the background.

This challenge is really starting to come together. Next steps include exploring illustrative elements, branding, and how this translates to desktop screens. After the initial designs are put together, I will continue to see how I can translate the animations into Adobe XD for a fully interactive experience. From there I would love to be able to do user testing to see how the overall concept fairs.

Login Screen Challenge Part 4