A headshot of Gavin Henderson

Gavin Henderson

Delighting Users with Web Components

Reading Time: 4 minutes

May 27, 2019

This month I decided to throw myself into a project that would force me to explore a few areas I want to improve at. Previously I have had a kind of 'not my problem' attitude to UI/UX and that's something I want to address. I think this attitude came from University as UI/UX was pretty much always given no weight in the marking so I could still get good grades without thinking about it. Turns out University marking schemes are not a good place to derive value from. As I mature as a developer I am starting to release that the difficult part of being a dev is not writing a piece of functionality but rather deciding what functionality is needed.

Anyway, I wanted improve my skills by making a web app that users would genuinely enjoy using. The phrase I often see is 'delighting users' so I am going to steal that. What does it mean to 'delight' users? For me it means that I user will always be in the loop of what is going on, a user shouldn't have to try and figure out what is happening underneath. A user should also feel like the web app is working for them and not against them. This is deliberately quite vague and there is so many ways to deliver 'delight'.

I decided to make a web app that loaded in the top headlines of the day and displays them to the user, allowing them to click through to the full article. This was mainly chosen as News API is a really simple API that returns top articles, simplicity was important as I didn't want to spend time dealing with APIs, something I have had plenty of practice at.

The first thing I did was put together some designs in 'Sketch' which is something I have started doing more regularly now and for me there is a clear benefit to prototyping. My focus was mainly on the flow that will appear in front of the user as the data was being fetched. I really wanted to have a slick experience for the user as the page filled up with information. I came up with the designs below to for this experience, the flow was to fade the grey areas to reveal the titles once they are loaded.

Designs of news app

I also have been looking into 'web-components' for a long time now and I finally decided that it was time to stop reading and use them for myself and I thought this project would be a perfect place to try them. The idea of being able to write reusable components without having to ship a framework is amazing to me. Greatly reducing my bundle size so that it just includes my app logic will go a long way in leveling up the performance of this app.

I wrote two reusable components, one was the 'news-list' and the other was the 'news-article'. The news list was mostly a functional component, it fetches for the data from the API and puts all of the 'news-article' on the DOM. Once the fetch returns the data is loaded into the 'news-article' component.

Web-components allow you to react to the data being 'set' which is how the news-article works. The default news-article will render the design without any data and once an article is passed in the data is set and the animation happens. You can see what it looked like below.

Screenshot of news posts loading

I learnt a lot about how web-components in this project but I think the biggest thing I learnt is that I am only scratching the surface. I 'used' shadow DOM but I didn't take advantage of it at all. I really enjoyed the developer experience of creating web components so you can expect to see more of them.

It is worth noting that in this project I feel like I did a lot of things well but they came at the expense of certain things. The accessibility of the app is not anywhere near where I would like it to be, and this isn't because I think performance is more important. In my opinion if your app is amazing for people who don't rely on accessibility tools but has no consideration for people who do then those apps deliver no 'delight' to anyone. That being said, this isn't a production app which is why I am happy to push it out without being happy with the accessibility standards.

If you want to talk more about anything I've mentioned @ me on twitter (@gavinhenderson5) or message me on linkedin. You can see the source code at on GitHub or see the website in action here.