Design Choices for My Chrome Extension
Committed (available for free on Chrome Web Store) is a todo manager on your Chrome’s NewTab page. It does nothing spectacular other than modestly reminding you of your tasks in your browser, and I intend to keep it that way. It’s been a fun journey launching my first proper app. Now that it’s semi-presentable, I would like to explain to you the UI/UX choices I made and principles I followed when creating the extension.
Why another todo manager?
A todo manager as a mobile or desktop application is not as useful since users have to consciously open the app to check for todos (or set tons of alarms which gets annoying fast). As an app in your NewTab page, Committed reminds you of your unfinished todos just when you’re about to procrastinate and, let’s say, try to open a NewTab to go to YouTube.
What the extension does
To boil it down, Committed is an extension that allows users to keep track of the time and their todos in a clean interface. Features facilitating that goal include:
- Dragging-and-dropping to organize the list
- Editing a todo
- Setting a todo on repeat on certain days of the week
- Setting due-dates for todos
- Option to “show all todos”, “show only today’s todos” and “show only due-dates”
They are as basic as features get. Coding them only took half of the time. I spent the other half trying to make the app as visually appealing and user friendly as possible.
Making the app look nice and tidy
Layout
As a todo manager, the list of todos should be the one and only focus in the application. Therefore, I put the list in the center and left the rest of the screen relatively empty. I gave the list a constant width of 700px regardless of screen size because it yielded a comfortable and readable line length (~65 characters per line).
Buttons
One principle I followed closely was to keep the application as minimalist as possible. To achieve that, I took away many components.
For example, instead of having a “create todo” button, users have to press on the enter key after they type in a todo. Instead of having an “edit todo” button, users have to hover on the text, where the cursor changes to a “text cursor” and a pencil icon appears beside it. This indicates that the text is indeed clickable and editable. I took away buttons in places where it didn’t compromise user experience. I made the application more intuitive and easy to use by relying on user expectations (pressing enter key for submitting) and showing subtle interactions (change on hover).
In cases where buttons were necessary, I chose to hide repetitive ones from view. For example, the calendar button (for adding a due-date), the delete button and the days of the week are tucked away in the expandable menu. This resulted in an equally functional, but cleaner-looking application. Finally, for the buttons that are in plain sight, I gave them a light grey tone so that they stay humbly in the corners, awaiting their time to serve.
User interactions
While creating the extension, I realized first-hand how much work there is to making good UX. There were times when a feature that nobody would notice took me hours to work on.
For example, I originally had a close button for the calendar modal, but later decided I wanted the calendar to close when a user clicks on the area outside the calendar modal. That took hours. It was equally difficult when I was trying to animate the checkbox button and the delete button’s hover effect. However, these small effects made the application come alive and resulted in an overall better user experience.
Font
I used Lato, which is an awesome open source sans-serif font. It is sleek, classy and a pleasure to look at. “Male and female, serious but friendly. With the feeling of the Summer,” said Łukasz Dziedzic [1], the font’s designer. I love the font.
Color Scheme
I used a gray monotone color scheme, with an accent of salmon red. Normal texts are in off-black (#4B4B4B), completed todos are in light gray (#CCCCCC) while due-dates are in salmon (#FA8072). I thought it looked clean and appropriate for a simple utility app. I thought there was no need for fancy colors and images. I was wrong: people do want the ability to customize the look of the app and use photos of their puppies as the background. Options should always be available, regardless of whether people choose them or not. I’ll keep that in mind.
Conclusion
At the time of writing this article, the extension had been out for 2 months and had nearly 300 active users (edit: now over 1400 active users after 6 months!). Not impressive but not too shabby either.
I am now a more UX-aware person and I now look at websites and apps differently. I look at their color schemes, fonts, layouts, components, user interactions, and I start to really appreciate the work of UX designers. Fancy neural networks or computer vision projects make people go “wooahh, that’s so cool!”. Good UX makes people say “What??? You spent 30 hours on this???”. As they say, “good design is invisible”.
Check out Committed. Check out my site too.
Contribute to Committed
Committed is now open source! I didn’t want to share my code at first because it’s not the prettiest React code I’ve written. It’s a bit ugly, but I’m 100% willing to explain what’s going on to any interested contributors. Shoot me an email at devfox.contact@gmail.com.
