Left-to-Right UX
Tags: ux
Published: 2023-01-17 17:52:55

---
title: Left-to-Right UX
published: true
date: 2022-12-28 16:55:00 UTC
tags: UX
canonical_url: https://kevincox.ca/2022/12/28/left-to-right-ux/
---

<main style="--width:min(36em,100%);display:grid;grid-template-columns:1fr var(--width) 1fr;overflow:auto;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em"><audio src="https://kevincox.ca/a/left-to-right-ux-Dq6GYr.opus" controls style="box-sizing:border-box;margin:0;vertical-align:middle" preload="none"></audio>Listen to this post</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Google Fit is a pretty ok tool. However, its weight entry screen is awfully deigned. The worst part about it is that they tried to be clever, but in doing so just made it worse.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Here is a quick example. I’ve gone from 91.2 kg to 90.8! Watch me try to enter it into the app.</p>
<video controls autoplay muted loop src="https://kevincox.ca/a/google-fit-weight-vkVcf8.mp4" alt="Screen recording of Google Fit weight entry. It contains two dials. First the left dial representing whole kilograms is moved from 91 to 90. Then the right dial representing tenths of a kilogram is moved from 2 to 8, going via 0. When the tenths dial is moved from 9 to 0 the left dial jumps from 90 to 89." style="box-sizing:border-box;display:block;grid-column:2;margin:0 auto .8em;max-width:100%;min-width:40%"></video><p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Did you see that? When I was setting the tenths of a kilo it adjusted the kilo column “for me”. Now I have to go back and move 89 back to 90 (if I was perceptive enough to notice).</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">It seems clever, I could have just moved the tenths column up 4 to adjust my weight. It would have been easier! Most people’s weights don’t change rapidly, so most of the time that is all you need to do.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">But the problem is that as an English-speaker I read left-to-right. So naturally I start at the left and read out “ninety point eight” as I first set the kilos column to 90, then set the tenths column to 8. By the time I get to the tenths column the kilos are already correct, so the “helpful adjustment” is harmful.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">This is similar to address entry-forms that put “country” at the bottom, then reset the form and rename all the fields when you change it. If the other fields depend on the value of country it should come first, which for most locales is the top-left of the form.</p>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">So what is the best option here? We can’t swap the columns, that isn’t how we write numbers. I can think of a few options but none of them are excellent (and a few are fairly bad). Like all UX, the only reliable way to do a good job is to watch actual users try to use it.</p>
<h2 id="unlink" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2022/12/28/left-to-right-ux/#unlink" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Unlink</a></h2>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Just unlink the dials. The user can first set the left one then the right one.</p>
<h2 id="number-input" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2022/12/28/left-to-right-ux/#number-input" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Number Input</a></h2>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">We could switch to a regular keyboard number input. This is a good option for most numbers, but since the app knows your previous weight, and your weight usually doesn’t change a large amount, I think the dial interface is actually very convenient.</p>
<h2 id="join-the-dials" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2022/12/28/left-to-right-ux/#join-the-dials" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Join the Dials</a></h2>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Instead of having two separate dials just have one. Then the user will understand how they move. This could be annoying if you need to change the value far away from the initial input but for a weight tracker that is unlikely to be a common occurrence.</p>
<h2 id="interaction-tracking" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2022/12/28/left-to-right-ux/#interaction-tracking" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Interaction Tracking</a></h2>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">Don’t do the adjustment if the user has already touched the dial. This way if the user does move the right dial first they get the shortcut of only moving one dial, but we don’t mess up their input if they already set the left one. The downside is this may be confusing. It isn’t clear to a user why sometimes the right dial affects the left one, but other times it doesn’t.</p>
<h2 id="remove-wrap-around" style="box-sizing:border-box;grid-column:2;margin:.4em 1rem .8em"><a href="https://kevincox.ca/2022/12/28/left-to-right-ux/#remove-wrap-around" style="box-sizing:border-box;color:inherit!important;margin:0;text-decoration:inherit;text-decoration:underline;-webkit-text-decoration-color:gray;text-decoration-color:gray;text-shadow:inherit!important">Remove Wrap-around</a></h2>
<p style="box-sizing:border-box;grid-column:2;margin:0 1rem .8em">A core source of the problem is that the numbers wrap around. I can go from 9 to 0. If we want to keep every “notch” of the dial to make a 0.1 kg change then we need to move the other dial. If we remove this wrap-around then we don’t have that problem. The problem is that users probably expect the wrap around. Most dials in the real world (like combination locks) wrap, why shouldn’t this one?</p></main>