You're reading from 101 UX Principles – 2nd edition - Second Edition
Use “Infinite Scroll” For Feed-Style Content Only
Infinite scroll—where the page just keeps scrolling, loading more items asynchronously as the user hits the bottom—is extremely handy for users.
Scrolling with a mouse wheel or a touchscreen is inherently quicker, and simpler, than clicking through pages, and, when the content is a newsfeed of Instagram photos or tweets, it’s perfect. Always give the user an indication that there is more content loading, or tell them if they’ve reached the end.
Figure 23.1: Loading the next few items. I hope
However, infinite scroll should be limited to only a few types of content. If applied to finite lists (messages, emails, to-do items, and so on), then the user has no way of determining a beginning, middle, and end to the content. When used with this kind of content, infinite scroll is confusing and slower to use, so save it for feeds.
Although feeds used to be predominantly chronological...
If Your Content Has a Beginning, Middle, and End, Use Pagination
Continuing from #23, Use “Infinite Scroll” For Feed–Style Content Only, a paginated, multi-page list may seem “old school” but it has a few major benefits:
- It’s goal-oriented, so the user is trying to find the item they need in a list and pagination feels intuitive, instead of having to search through an endless list
- It remembers the user’s position and displays the current page to them
- It conveys a beginning, middle, and end to the content
- Users can use the scroll bar to navigate the page and they can reach the footer if they need to
If the user sees that there are “9,999 pages,” then they can choose to use a search, sort, or filter control. They can’t make that choice if they have no idea how many pages there may be.
Figure 24.1: A great paginator
Help Users Understand Their Next Steps from “Empty States”
An empty state is a view that would normally show a lot of information to a user—a list of projects, albums, tasks, and so on—but because the user is new, they haven’t yet created anything.
The default behavior of many apps is to simply show an empty view where the content would be. For a new user, this is a pretty poor experience and a massive missed opportunity for you to give them some extra orientation and guidance.
An empty state should usually show some helpful text, hints, and maybe a friendly graphic or icon. Now, because these views can appear on a per-feature basis, it’s easy to be very task-oriented in the advice you give. If the user views the to-do list, you can advise on making the first to-do item.
On a profile, you can guide the user to include a bio or add an avatar picture.
Figure 26.1: The Basecamp to-do list before the user has created any items...
Make “Getting Started” Tips Easily Dismissable
An empty state (refer to #26, Help Users Understand Their Next Steps from “Empty States”) won’t show once the user adds some content or performs an initial task, which is ideal.
Too often, apps force users to view their “getting started” guide or “tips for beginners.” They are often good for new users, but if you’re coming back to an app you’ve used before then they’re incredibly frustrating.
An extra level of rage is induced when an app update “resets” these tips and existing users are forced to sit through the tutorial all over again just to use the app. To avoid this, tell users what will be covered in the tutorial and make tips optional and dismissible. You’ll get bonus points for letting users exit the entire “onboarding wizard” with one tap—at any point in the journey or at the very start:
...When a User Refreshes a Feed, Move Them to the Last Unread Item
Typically, a feed (or any list of items) will have links on each item to view them or perform actions on them. This means that users may well be navigating back and forth to these lists.
Imagine a list of news items; it’s likely that a user would read the list, then choose one or more news items to read, each time navigating back to the list view. Don’t simply reload the feed and put the user back to the start again, you monster!
As an example, Twitter shows the user how many tweets behind they are, allowing them to manually reload if they wish, but not altering the feed without their explicit action:
Figure 28.1: Twitter getting something right for a change
Of course, technically, the feed may well have changed in the time it took the user to read the story, but if it keeps updating, it’s disorienting and difficult to use. Yes, this means additionally keeping track of where your...