Reading Experience Filters Concept
Typography can make or break the experience of using any applications, especially if we’re talking about news or book-reading apps.
People often look for excuses to stop reading, so our job as designers is to make the reading experience as effortless as possible.
Defining the Key Pain Points
Many reading applications allow the users to customize their reading experiences by changing font sizes, typefaces and background colors.
But changing these settings usually take several taps and also requires knowledge from the users how to pair certain typefaces with background colors depending on their environment and lighting conditions.
Also providing more than 20 different typefaces for users won’t help them improve their reading experiences without any prior knowledge about how to choose the right one for their needs.
The Challenge
Over the course of the last couple of weeks, I set myself a challenge to create a better alternative for customizing reading experiences with single tap and swipe gestures.
The goal was to create predefined pairings of specific typefaces and background colors so the users can choose from a set of options and quickly customize the reading experience for their needs.
Execution: Design
I started the design process by creating specific typeface and background color combinations for different use cases.
Using these reading experience filters are like using filters in photography when people don’t want to fine-tune the small details like exposure or contrast, they just want to apply a set of settings immediately.
Similarly for using filters in photo editing where users don’t have to know anything about white-balance or saturation, for using reading experience filters they don’t have to know anything about typography.
The four combinations/filters are:
- Classic (modern, sans-serif typeface with simple, white background)
- Traditional (serif typeface with off-white background)
- Night (sans-serif typeface with dark background)
- Typewriter (duospaced font with off-white background)
The classic filter is perfect for casual short and medium reading periods in bright environments.
The traditional filter is best for longer reading periods in the indoor environment, where the off-white background can help reducing eyestrain.
The night filter is best for reading in the dark, especially on OLED displays, where only the words would glow instead of the whole screen.
Typewriter filter is for the lovers of the classic typewriter reading style.
Besides creating these selected combinations I also wanted to provide an option for the users to completely fine-tune their reading experience if none of the above-mentioned filters fit their needs.
By tapping on the pill button displaying the name of the reading experience filter the user can access all the different typefaces, change the font sizes as well as the background color.
Execution: Prototyping
During the prototyping process, my goal was to create an interaction, which is quick, short and responsive, while also familiar at the same time.
This is why I choose an interaction similar to how we apply filters to photos in social apps like Instagram Stories or Snapchat.
The biggest advantage of using this type of interaction is that the user can instantly see the effects of the selected setting and also quickly compare the before and after state of applying a new filter.
I also created a dedicated button for toggling the dark mode for night reading. This option only changes the text and background colors, while keeping everything else the same.
As a bonus, I also experimented with a simplified interaction for saving articles for later, because I’m usually frustrated by the many steps & taps that are required to save an article for later.
Takeaways
This concept makes customizing the reading experience on our devices even easier, so we can enjoy reading more.
This challenge was super motivating for me to increase my awareness of small design problems we face from day to day when reading on our devices. I believe we shouldn’t be satisfied with the existing solutions without questioning them and trying to constantly improve them.
Thank you for reading! If you found this article useful let me know and I’ll write more in the future. :)
Follow me on Dribbble or Twitter to get notified when I publish something new. 🎉
