Improving my social reader experience on mobile

A key requirement for my social reader is for it to be usable on mobile. To accomplish this goal, I have added some progressive web application features to my reader, enabling its use as an app I can save to my home screen. I have also spent a lot of time thinking about how the social reader should look on mobile.

In the initial version of my social reader, I built a mobile-optimised experience based on the desktop layout. This worked quite well for a lot of features. Posts scaled down well to mobile so I did not need to redesign them. But, there were no special features for mobile devices which meant that the overall user experience at times felt subpar. Navigating around the feed reader was not as ideal as I would have liked. It took at least two taps to perform simple actions like searching for a post or navigating to my notifications and settings.

This got me thinking about how I could improve the mobile experience. I looked at Instagram and thought about how I like to use social media, which relates to the feed reader I am building. I noticed that Instagram and many other social applications have a footer that appears at the bottom of their applications. This footer allows for one-tap navigation to key parts of their apps. In addition, the footer is close to one's thumb so it is easier for me to access than it would be if the navigation was elsewhere in the application.

I created a simple sticky footer for my social reader that looks like this:

The footer has six navigation elements:

1. Take me to my main feed.
2. Search for something.
3. Create a post.
4. Check my notifications.
5. Follow someone.
6. View my settings.

This experience could be improved by removing one of these elements, creating more room for all of the others. I might move the follow button up to the top right hand side of the screen to make more room. I found an open-source icon set called Feather which took away the need for me to design my own icons. This was amazing because my digital design skills are not great. Go open source!

I also spent some time rearranging the navigation bar. In my previous social reader, I had a list of links in the top navigation bar. One link took me to my feed home but that wasn't clear because the link had the anchor text Cinnamon, which is the name of the reader. Also, the links didn't look that great to me.

I replaced the name of the feed reader with a big title that says what post list I am viewing. By default, this title is All Posts. "All" is the default channel in my reader where all of the posts published by authors to which I subscribe show up. If I go to another category, such as notifications, I will see the updated title.

I replaced the other links in my the navigation bar with a photo of myself. Currently, this photo is static. I hope to change this feature one day so that the feed reader retrieves an image based on one's h-card. This means that the image could change dynamically as the photo changes on my site.

Here is how my social reader home page looks:

The new navigation bar at the top of the page is much cleaner and easier for me to use than the old one. Also, the user interface doesn't have as many redundant or unnecessary links as the old version did. I like that the new design is cleaner, easier to understand, and makes navigation easier too. (Note: All images have appropriate alt text describing their actions. Although, as I write, I realise I need to add alt text to the profile icon image. It's amazing how writing helps you think in this way.)

The mobile experience on my social reader is not finished yet. There is an overflow issue which makes scrolling difficult on some pages. I have not yet been able to identify the cause of this issue. Overall, I am much happier with the user experience on my reader. It's easier for me to find the pages I use often. The page is more visual than it previously was. And the design looks more appealing to me than the previous one.

What do you think of the layout of my social reader? Do you see anything that you would improve or change? Let me know by sending me an email at readers@jamesg.blog.

Also posted on IndieNews.