When I used to attend a coding boot camp, my cohort mates called me the “CSS master.” Though I truly wish that were true, I do love great designs. One day, I came across Claudio Guglieri’s redesign of Netflix. The talented designer could have gone with remakes that showoff sleek full page images of movie and show posters, but instead he took a reserved take. I found Guglieri’s design to be a throwback to the Block Buster days. At the same time, the stylized shelf he created gives you a virtual feeling–the design mixes the old and new to create a unique visual experience.
I designed my own take on Guglieri’s design by creating an interface for books. The purpose of this article will be to walk through some product design principles that I attempted to implement in my design. You can judge whether or not I succeeded.
First, I’ll give you an overall view of the front end tech stack.
- jQuery(for drag/drop)
Choosing React allowed me to give the user the ultimate feeling of control. Joshua Porter, a product designer and the author of the bokardo blog, listed keeping users in control as a major design principle. Moving forward, I will point out other principles of his like, “interfaces exist to enable interaction,” “keep users in control,” “direct manipulation is best,” “provide a natural next step.”
One of the most user-friendly UI elements you can create is a search bar. Using a search component, I was able to create a reactive search that populates a bookshelf with books in real time based on your query–no need to hit the search button. Why the search button, then? You’ll notice that throughout the app, I combine images with another visual element to provide accessible feedback.
A single page app lends itself to interactivity, so my main design goal was to pack as much of it as I could. With great interactivity, however, comes great responsibility on the part of the designer. I needed to create feedback system that could inform the user of the natural next step.
Here’s where one of the best features of this product comes into play. The user can drag and drop the books they want to save in their personal library. The feedback system I used to implement this feature was a drop box. Admittedly, the text could be a bit more clear: “Drop Your Book Here” may be more informative. Though, I added an icon to further identify the drop box.
TODO: I would also add a tool-tip to indicate that books are draggable in the first place.
As you can see, I created another feedback system informing users of the books they’ve already added to the library. For those who can’t see the highlighted books, I used check marks to drive home the message.
The library modal also provides visual feedback to users through the text at the upper left corner that indicates how many books you have in your library.
Finally, when you decide to click on a book, you get more information pertaining to that particular title. In order to continue to put control into the user’s hand, I’ve allowed users to scroll through the library represented to the right of the information modal. Users are informed of this possibility through the bottom slider and the text box above.
In the end, you can see the various ways I’ve attempted to keep users visually engaged with this mock product. Even down to the detail of the book flaps. “interfaces exist to enable interaction,” “keep users in control,” “direct manipulation is best,” and “provide a natural next step” are mottos that I believe this product imbibes.