Habit Tracker — Part 1
Part of Project Traces, Season 1
previous part | home | next part
The goal for these past two days is to ramp up UI design and starting on API design. Working on UI design is pretty fun, I relearn about figma from a video, it taught me new techniques. I was truly thankful that this man told me about grid system in figma, because with it, make things symmetrical become an easy task.
But still, my acumen on design is still under human average. It was a fun process but I felt I just put random rectangles everywhere. Or random texts. Without any structured UI/UX guideline in my head. The only thing I remember from Human Computer Interaction class is that: “make user do what we want to do”. Every single design decision need to address the goal we put upon the user. To do that, I should’ve: set the goal, hypothesize the best design decision, and test. But no time for that (or more like, no energy).
So, I just use some inspiration. The first inspiration is for the habit streak. As I regularly played duolingo this past 102 days, this image is literally carved in my head.
Make it a little bit bigger, and add some description inside, and tralala:
A habit log will consist of, main note, and maximum 2 special note on which every note will live on a line. At the first iteration, I put the time stamp inside the box. But, I don’t need to see the time, I just want to see how did I do when I log a habit. So I put the timestamp below the box, as an additional information rather than the key information.
While writing this (100% real time) I got some idea:
- I think I need to put a big size date and clock too. Probably replacing the disappointed Kevin Mahomes picture.
- In the Add Log box, the special white log that show a habit hasn’t been done or passed, I need to put the weekly day name and how many days until the deadline.
I tried to search for the best practice on designing form. Then I found this, a really neat 15 points recommendation for form design. It said we need to use one column based form because it is easier for user’s eyes to scan them. And also start from easier field to harder field. The article references a lot of academic work henceforth showing real percentage of improvement when comparing it with another style of design. Definitely a worth reading article.
While experimenting with the typography properties. I find that different letter spacing gave different set of vibe.
When you tight it down, it felt more serious and luxurious. When you loose it up, it become more free and looks unserious. It is such a cool discovery for me.
