Familiar UI elements

As designers, the details of every aspect of an interface are critical. Even the smallest change can affect how people use your product or website, so sweating the small stuff, as they say, takes on a whole new meaning in UI design. To illustrate this point, I’m going to discuss our thinking on where to place toggle arrows in the next version of Projecturf, which may, on the surface, appear to be a minor if not insignificant detail, but I would argue that it makes all the difference in the world.

In our initial design, we placed the toggle arrow on the inside (to the right) of the checkbox in the tasks section. The arrow allows you to expand and collapse the subtasks that are connected to the parent task, and if no subtasks exist, the arrow simply is not displayed. The mere presence of the arrow indicates that the task has additional items connected to it. The checkbox, in contrast, will exist on every single task on the screen, which allows you to mark the item complete. Given that the checkbox always exists, we initially thought it made sense to have it be the first item on the left. But after we started building the screen and testing it out, we realized this was a mistake that we had to fix.

Familiar UI elements toggle arrows

Something about its placement felt strange. This led to doing some research and we used a computer OS as the foundation of our decision. What we found was that both MAC and Windows placed the arrow to the outside of any additional elements, such as folders or icons. The arrow was always on the far left. When we flipped it’s position in our design, it naturally felt odd. This resulted in us moving the arrow to the outside of all elements, whether it’s a checkbox or an icon (as you’d find in Documents), and it now feels natural and easy. You no longer think about it; you just intuitively use it.

There is something to be said for familiarity when it comes to interface design. The simple fact that the user is already familiar with how toggling works because they use this functionality on computers already allows us to position our element in the same fashion; essentially eliminating confusion. If the user has to stop and think about something like a toggle arrow (either consciously or subconsciously), we’ve complicated the experience. Therefore, it’s extremely important to consider how a user will inherently perceive the elements in your UI as you are designing them. This is the level of detail of superior interfaces, and that we constantly strive to achieve.