Southpaw Responsive

by Tylor

Today we wanted to share a novel experiment that takes into account the handedness of a person browsing your website. While this is a subtle design affordance and might only matter for 10% of your visitors, it could help tailor your content to be responsive to the situation that someone is using your site. This is especially interesting on mobile, where people often switch which hand they are using with their phone depending on what they’re doing. Here’s how it works:

Using Southpaw left or right handed

Give it a try here

It’s really quite simple: detect which side of the screen someone is swiping or scrolling from and then flip the content so that it’s more visible. That way you can keep content from being obscured by the thumb or make important actions easier to reach.

One important tweak is to keep content that has been seen in the same place, so that if you scroll back up the site doesn’t unexpectantly change. Also on iOS we buffer the changes by a screen length since Javascript events don’t fire until the elastic scrolling stops. This way you don’t see content swapping after the browser finishes scrolling.

Getting closer to how people are using your site is exciting. The article that inspired this discusses using the left and right portion of the screen carefully as it can influence trust of your content. The article also hypothesizes that this could vary from left to right handed individuals, so tailoring the position could be quite important. Let’s keep designing for people and humanizing what we build.