Posts tagged with: indiebookclub

I took a second pass at the indiebookclub UI I was working on. I kept getting stuck because I wanted to let people update the title/author/ISBN in case they were incorrect in Open Library, but I also thought that made the form feel too busy.

Eventually I realized that most of the time people will not need/want to update that information, so I can keep them read-only. This keeps the form minimal for the most common scenario. I can still include an edit link that will open the full form for people that want that level of control.

Since we already have the title from the search results, Read Status is the only other required field. I decided a minimal form would show that and the Tags field. The other fields can be tucked away under Advanced Options. I also tried shortening the Read Status field. I think that helps the visual flow. All of the dropdowns on this form have relatively short text anyway.

Next I updated the Published field. Previously, the field was always displayed and had an instruction to leave it blank if you wanted to publish the post right away. A better UX is if the default says “Now” and the datetime field only appears if you choose to change it.

The next thing I am working on is lining up the left side of the title/author/ISBN text with the form inputs below them.

I am quite pleased with how this is turning out. Let me know what you think!

I’m working on a new search feature in indiebookclub which uses Open Library and supports cover images. It has me tinkering with the UI of the posting form and I’m interested in feedback about this first pass.

My first thought was to display the selected book information in a more compact, read-only block at the top of the form so you only have to select the status (want to read, currently reading, finished reading), then optionally add tags and other choices if you are using Micropub.

However, I still want to give people the option to update the book information before they post, so I was considering a button that would change the book information into editable fields. I experimented with various options and did not come up with anything I loved. I am now leaning towards always showing the fields with the populated values. Keep it simple.

I did make the form more compact overall: less padding inside the form fields, less vertical space between them, and a horizontal layout on larger screens (using this WCAG technique). I also moved the timezone offset field out of a collapsed details element.

For comparison, below is a screenshot of the form as it exists. There are still a few parts of it that need to be put into my mockups, like choosing ISBN or DOI.

There will still be an option to use this form without searching Open Library, so if you are using a bookmarklet or prefer to type in all the fields, that will continue to work.

I look forward to any feedback or questions!