On the Roku website, the customer support chat window disappears if you go to another page on the site.
Recently, I found some mysterious charges on my Roku account, so I contacted their customer support on their website. The support agent asked me about which charges I was inquiring, and of course I did not know the exact gobbledygook names of the charges in question so I had to go back to my payment history page. When I did, though, the chat window disappeared. Even worse, when I returned to the chat window (having to answer for a second time all the same dumb questions they always ask as a speed bump to accessing their chat), I had to wait in line all over again.
This is what their customer support page looks like:
The chat window sits at the bottom of the screen per the Y-axis, but on top of all the other content per the Z-axis. This layout comes with a set of assumptions, the most important of which is that, because the chat window is higher up on the Z-axis than the rest of the site, the window will persist as you navigate around that site, at least if you do so using the site’s controls.
The cardinal rule of information architecture is the same as the cardinal rule of plumbing: shit flows downward. Sometimes downward means the Y-axis, in which case the rules of IA are straightforward. Stuff at the top of the screen controls stuff below it. Sometimes downward is more abstract, as with nested menus (including the above Apple Notes example).
Because the Z-axis is the least understood of the spatial dimensions of user interfaces, it is the most prone to design error. The higher up on the Z-axis an object is — that is, the closer it is to the viewer — the higher its rank in the information hierarchy, and the more independent it is of the rest of the interface. An object should usually not be affected by objects under it, whether it is on the Z or Y (or X if we consider text direction to be a form of gravity) axis.
SoundCloud gets this right. When you play a song on their website, the music player follows you around the site seamlessly, never interrupting the music so long as you use the site’s navigation tools; going to another location on the site via your browser navigation will override the player, which is a correct use of information hierarchy. There is no reason for any site not to do the same.
If for some unforeseen reason, you cannot manage this, then do not put the chat in a separate window at a different location on the Z-axis. Place the chat flush with the page itself, or even go to a separate, dedicated chat page. But whatever you do, don’t do what Roku did.
- Make your design error resistant.
- Make your design forgiving of error. For instance, do not make someone wait in line a second time due to user error, due in turn to your own incompetence.
- Respect information hierarchy.
- Commands flow downward.