Applying Scrolling and Eliding Text in a Natural User Interface

We recently made a presentation at the Qt Developer Days conference in San Francisco, entitled Make Your Content Shine: Design Choices for a Qt Touch Kiosk. In the presentation we talked about numerous issues related to content display in our touchscreen kiosk product, ViewPoint and explained the best practices that we used to solve those issues. In this post, we are going to focus on a couple of issues with scrolling and eliding text. 

Text has a tendency to not always fit into the allotted space on the screen and mechanisms need to be implemented to deal with those instances. To solve this in ViewPoint we use the following techniques:

●Scrolling with fading effects 

●Eliding

●Creeping line

Scrolling with Fading Effects

In ViewPoint there are places where blocks of text can be displayed. The visible container for that text has a fixed height and width, even though the length of that text can vary from one sentence to several paragraphs. One might assume that setting the font size to be flexible so that the text fits into the visible text container is a logical solution to this issue, but that is almost always a bad idea.

This action will cause the font size to vary from one instance of text to another, to randomly accommodate the technology. The result can reduce readability and confuse readers because  there is no logic to why some text is large, some medium and some small. Fitting text into a fixed container size should only be used in rare instances when scrolling is impossible or very awkward for the user.

Text that is forced to fit into the visible text field

A much better solution would be  to use preset font styles with embedded meaning. For example,  large and bold text indicates a title, large text indicates a header, medium text indicates body text and small text indicates captions or notes. Along with this solution, the ability to scroll is also necessary. Since ViewPoint is optimized for touch interaction, we did not want to resort to typical Graphical User Interface (GUI) controls but instead looked to use Natural User Interface (NUI) solutions.

In order to indicate that there is more available text to scroll to, we use a fade-out technique on the bottom line and a half of text. The effect is both elegant and efficient. Once the user scrolls the text, we repeat the same fade-out technique on the top of the text, to indicate text scrolled out of view. We do not show a scroll bar until the user has begun to scroll, as is typical even for many modern GUIs.

Scrollable text with fade out effect

Eliding

Eliding text, in ViewPoint is also used in places where a short amount of text doesn’t fit and scrolling is not appropriate.This can be used only if there is an alternative way to read the text. (You don’t ever want to elide text and not have an alternative way to display the complete content.) Eliding is used in ViewPoint for titles that appear on top of our Grid Viewer tiles. In this example, wrapping title  text for more than two lines would begin to obscure the image too much. But the full title is visible once the user selects the tile.

Viewpoint Grid Viewer with elided text

Creeping Line

A creeping line effect is when one line of text is too long for the allotted container and animates left to right to show the complete line, with no user interaction. It is a useful technique when text is short and when explicit horizontal scrolling by user input is awkward. In ViewPoint, we have subtitles that do not need to be instantly readable at all times. Waiting for the text to scroll in a creeping line is a downside to using this technique. In the case of ViewPoint, the creeping line animation contributes to the movement already happening on certain screens to make the experience feel more active and interesting.

Creeping line effect in ViewPoint

Lack of readability of text in an interface increases the amount of cognitive effort a user has to invest in comprehending the content, which can degrade a user experience. These techniques seem simple but they can make a world of difference in increasing the readability of text in an interface.They may take some extra time for developers to implement but are well worth the effort. 

By Andrew Babkin and Dorothy Shamonsky