Fewer clicks, better UX

Manual route updates demand a seamless workflow to keep things running smoothly.

Posted by

Route form

The Route Form

Route Form is the component used to add or edit routes in RouteBeta. Initially, the form featured five text fields, a date input, and a drop-down menu for route type. Filling out these fields — especially on mobile devices — required numerous clicks on the virtual keyboard.

Typically, when routes are updated, only one or two sections are changed at a time. Top rope sections usually include 3 routes, while bouldering sections have around 6 routes per section. Often, the same person is responsible for updating all the routes within a section.

The old form

Using the old route form, adding a new route takes over 20 clicks. The number of clicks varies based on factors such as the length of the route setter's name, the color label, and the route grade. Some route grades are especially cumbersome due to the need for frequent keyboard layout changes. For example, typing "6a+" requires 8 clicks—4 of which involve switching between layouts (123, ABC, #+=).

Old Route form

The new form

With the new form, the following changes were implemented.
  • Cache the previously used section and setter's name, since those will likely remain the same within a section.
  • Add a color picker to choose the color with a single click, while still maintaing the ability to type an arbitrary color.
  • Add 2 row inline button control to type the route grade with just a few clicks.
  • When opening the form, load 3 most recent route setters and place them as quick action buttons on top of the route setter text field.
  • Cache previously used date and provide it as a quick action button above the date input.
  • Cache previously used route type and set it automatically.
New Route form

62% click reduction

Let's say a new route is a Blue 6b set by "Allen" on section 02 today. With the old form, here is the click break-down:
  • Blue: 5
  • 6b: 5
  • Allen: 6
  • Section: 4
  • Create: 1
  • Total: 21 clicks
The same route on the new form:
  • Blue: 1
  • 6b: 2
  • Allen: 0 - 6
  • Section: 4
  • Create: 1
  • Total: 8-14
Assuming "Allen" is going to set 3 more routes for this section, the click count per section would remain constant with the old form. With the new form, most of the values would be cached leading to much less clicking. For example
  • Green: 1
  • 6a+: 3
  • Allen: 0
  • Section: 0
  • Create: 1
  • Total: 5
The old form 21 x 3 = 63 The new form 14 + 5 + 5 = 24 ~62% reduction. The impact will be even bigger when applied to more routes.

Takeway

When you keep using your product and performing the same actions, you naturally start looking for ways to streamline the flow. By making improvements — like reducing the number of clicks required to perform an action — you not only simplify the workflow but also save time and reduce effort. Ultimately, these enhancements make it easier for users to complete tasks consistently and efficiently.

More to come

I am actively building the RouteBeta app and would love to hear your feedback or feature requests. The easiest way to reach me is via email. Happy climbing and sending!