One last UI nitpick I’ve been meaning to write down for ages, and it goes like this:
- You’re viewing recent photos/posts on a website and you want to read more, so you click the button at the bottom to give you a few more older entries
- You view those photos/posts then scroll down to get more
- Your choices are labeled “Previous” and “Next” or “Back” and “Next”
- Which do you choose? Why?
The problem as I see it is mostly a vocabulary one in the English language used to describe date-ordered output. Since I’m viewing recent content and I’m wanting to request older stuff, I tend to think of “Previous” and “Back” as representing the idea of “Older”. But most often the Back or Previous refers to the previous page you were on, which had Newer photos/post that you already viewed, so the “Next” option is used to fetch older entries. See how that’s cognitively backwards?
I saw this just hit me on flickr mobile (screenshot of page 2 of my photostream is shown below) and I’ve seen it on countless other blogs and web applications. I get tripped up on this several times a week.
My proposed solution
Never use the phrases Previous/Next or Back/Next that cause confusion in the first place for date-based output in your web application. Instead, explicitly make your labels for pagination say Older and Newer to make it abundantly clear to users. Here are some screenshots from MetaFilter, where I use it exclusively (and I always make Older point to the left, and Newer point to the right, which I’d say is optional but pick a consistent direction for both and stick with it throughout your webapp).