You Are Here
One of my favorite websites to catch up on pop culture and media is The AV Club. It features a lot of media reviews and long-form content. Recently they completely overhauled the website’s visual design, making it generally cleaner and bolder in its use of images. One really nice interaction they added to the website is a wayfinding mechanism in the navigation bar on their article pages. As you scroll down the page, a progress bar* fills corresponding to your position in the article.
This is a subtle, even passive interaction the user has with the page, but it targets a common annoying use pattern I’ve looped through many times and alleviates the issue. Whenever I read long-form content online, I scroll to the bottom of the page a few times to see how much is left. Now I’ve lost my place and I need to find it again. Eventually I do. And it isn’t always difficult to re-find where I left off. But this small animation in the navigation bar gets at the heart of good interaction design and HCI. It tackles a problem that the user probably didn’t realize they had. It goes beyond the thought that the user can always just scroll to the end of the article and back to their place if they want to know how much is left. Because why should they when the technology can accommodate them? The progress bar brings the computer to the user instead of forcing things the other way around. And that’s awesome.
*In the above gif, the navigation bar’s color has been changed to bright green to make it stand out. The actual color of the bar on The AV Club is a darker shade of grey, which makes sense.