Focus without fingers: 4 ways to express the focused state for non-touch screens

By Aaron Sung, UX Designer at KaiOS

Through the popularity of smartphones, touch interfaces have become the default method for operating our devices. There are, however, still many products around us that operate without a touch screen like TVs, computers, and many feature phones.

Designing non-touch interfaces requires a different approach than those devices that allow people to use their fingers for navigation. The focused state is one of the most important design tools we can wield to tell users where they are navigating.

The focused state

When you use your fingers to navigate an interface, you don’t need to visualize “where” you are on the screen because your finger serves as the cursor.

This isn’t the case with non-touch interfaces though, so instead we use the focused state — a virtual representation of where the user’s attention is located on the screen. Using the appropriate focused state creates a clear hierarchical architecture for the interface.

I’ve summarized four ways to express focused state for a non-touch interface and how they can be combined to create even more clarity and impact.

1. Border

Border is a common expression for focused state. It helps avoid visual interference for the focused item and is often used with an image object. Border is less suitable for text objects because it can easily result in a crowded visual appearance.

2. Highlight

Highlight is an ideal way to distinguish an object, especially for list items (see our post on Basic Navigation for Smart Feature Phones for more info on List Views). It’s also well-suited for text objects by using a highlighted background color while simultaneously reversing the text color to create an obvious hierarchical relationship. Highlight is not suitable for image objects, because it easily blends with the image object and reduces visibility.

3. Scale up

Scaling up is a dynamic and lively expression that is frequently used for image objects. It makes the screen clear and reduces interference, and it keeps users concentrated on the focused object. Scaling up is often accompanied by a Z-axis dimension to intensify the hierarchical relationships between objects and to create a distinct visual style.

4. Saturation

By changing the saturation of the image, we can create an interesting visual expression that allows the user to clearly understand his current focused state. Saturation can also seamlessly combine with the above methods to strengthen the effect of the focused state.

Great UX Despite a lack of touch

The above four methods show that we can bring clarity and visual richness even when designing for non-touch screen interfaces. Some of these tricks can also be applied in other UX design disciplines, for example web design. I hope you find them useful; please share any comments or questions below.

In the next installment of our UX series, I’ll be sharing my thoughts on designing for interfaces with two focused states, such as when selecting content within a tab on a KaiOS-powered smart feature phone. Stay tuned!

Want to get the latest updates of KaiOS? Don’t forget to follow our Twitter, Linkedin, and Facebook.