Although I’m a big, big fan of YAGNI (You Ain’t Gonna Need It), lately I find myself discovering and appreciating more and more the value little details can bring to the table.
Gainslog has a filterable food list you can use to quickly find and add foods to your day. You just type in the name, click the add button and that’s it. No multi steps, no modals, no nothing.
I thought I nailed it until someone sent me this.
The browser’s autocomplete function goes over the filterable food list. While that can easily be ignored on desktop, since we type faster, have a bigger screen and we use the mouse to click the “add” button, on mobile things are a lot more painful.
Turning autocomplete off made a huge difference.
Focus and select inputs
Giving up on the traditional multi-step / “add food modal” approach used by most calorie tracking apps and going with the simpler “just add this food” approach has a cost. You don’t get to specify the quantity you want to add. The solution for that is either keep clicking the “add” button to add the same quantity again (eg. two eggs = two clicks on the add button), or to edit the quantity from the today’s food list. You do that by clicking the quantity number.
Focusing the quantity input on click saves us from having to click again to edit the input but it doesn’t save us from having to tap backspace a bunch of times to delete the number.
Adding a input.select() statement removes the “backspacing” part making our life that much easier.
YAGNI is a great practice to follow but focusing and insisting on the details of the thing you did decide you need, makes your app so much better.