Handling text strings

When you have a long text string, such as a URL, HTML page title, or file name with path, you need to consider how you display the information if you have limited display space. Consider right-aligning the data. Here's an example:

OpenOffice file path displays without being able to see the name of the file Based on this information, I have no idea what file I'm working on. It's fine if I only have one file in this folder open ... but I frequently have 3 or 4. This drop-down list is essentially useless to me. However, if it were right-aligned, I and pretty much most other users could use this effectively.

Another situation in which this problem manifests is when using tabbed browsing. Firefox left-aligns page titles in tabs; Safari centers the titles (making it sometimes very confusing). However, many sites use their site name before the page name when designing the page title. This practice makes a lot of sense for the two most commons uses of the page title: display in the title bar and display in bookmarks. It's not the fault of the sites that their titles do not render well in the software, it's the fault of the software. So, browser companies: please at least allow me to right-align titles in tabs.

Of course the challenge of how to display long strings of text applies even more on mobile devices. I remember one site where I had to choose between 6 items, all starting with the same initial 12 characters. The reason for this problem was that the company's branding department wanted consistency with their brand labels. (We fixed the problem by showing the branding department what their precious brands would actually look like on the phone - boastful gibberish).

For mobile devices, we recommend first and foremost to edit the data if possible. In the example of a file name, you can safely remove the left-most characters as long as you leave the right-most 40 characters or so. This will work both for people with deep file structures and people with shallow file structures.

If editing is not possible, try right-aligning the data. If your platform does not allow right-aligning along with text-wrap (times-square scrolling), you may be in trouble. Fortunately, the new ECMAScript phones will get you out of that problem - but more about that when the phones are broadly available.

Comments are closed.