Sudoku interface in Framer JS
Short introduction
5 weeks ago I finally decide to learn Framer JS and Coffeescript. The whole society around this tool shared some really inspiring examples that motivated me enough to try to add this skill to my design process. Basically every time I am trying to learn new software or technique I start with looking at tutorials.
After understanding the basics I throw myself into the deep end. I put the tutorials to the side and try to find a small project that will motivate me to learn even more. It also changes my role — from a passive watcher of tutorials to active student that looks for solutions by himself.
That’s why I choose to:
Reimagine Sudoku game on mobile
I looked at existing solutions and all of them involve two steps from the user: first; choosing an empty square, second; the right number. But what if the user could do that with only one gesture? What if it could be done with the marking menu pattern? I defined the goal for this micro interaction and started to brainstorming on that:
A big challenge was to find a solution that would be intuitive even the finger is covering a big part of the interface. As a starting point I chose ideas 1 and 2 (see picture above). I had the feeling that they fulfilled intuitive and simple goals and are creating the possibility that the interaction would be not only fun but engaging too.
Using an ellipse was a conscious decision because it gives a possibility to keep the even distance between the numbers and the finger and an ellipse cuts out visually from the grid layout of sudoku game.
Prototyping in Framer JS
Next step was to code those ideas into Framer:
The first prototype is based on idea 1. It was a good starting point because the idea was not so complex so I could manage to code it and thus learn a lot in the process. Unfortunately scaling the number is hidden under the finger and it doesn’t provide enough information about which number is selected.
I wanted to improve on this aspect with the second prototype. It has a number in the middle that keeps the same position during selection and after releasing the finger. As a result the user is more certain what square is actually changing and which number will be selected after releasing their finger.
The third prototype is based on idea 2B after I realised that idea 2A is too demanding. I started to looking for existing solutions that use rotation on an ellipse path. The solution that helped me a lot was founded in a prototype by Johannes Eckert. As he, I use support layer and pink dot reacts on x:change of support layer and take support layer’s x value as an angle.
Then I decide to combine second prototype and third one to fulfil my goals. Second one is more informative and intuitive and third is more engaging and fun. The dot animation was also improved. In the earlier prototype dot was moving freely on the ellipse’s path. In the final prototype the dot’s position is constrain to the position of the selected number.
Styling
Animation: I spent some time and play with different dynamics of animations. To achieve more playful expression, objects are animated with a little bouncy effect which is especially visible on the dot’s movement.
Visuals: I wanted to create graphics that will not distract user from the game and will enhance animation during interaction. That is why they are done in really minimalistic style with a lot of whitespace.
Here is a link to the interactive prototype. Unfortunately is not working as smoothly as in Framer. This is how the styled prototype looks like:
That’s it. This is definitely just the beginning of the road in regards to learning framer, however, I know it well enough to start integrating it into my prototyping process. The more I use it, the more I’ll learn how it should be done!
Let me know what you think. Cheers!
