The little details matter most

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.

Turn off autocomplete if you already mimic that

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.

Autocomplete goes over an already filterable list

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.

Autocomplete is set to off

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.

Focus input on click to save the user from having to click again to edit the 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.

Focus and select input

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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.