Reader small image

You're reading from  101 UX Principles – 2nd edition - Second Edition

Product typeBook
Published inMay 2022
PublisherPackt
ISBN-139781803234885
Edition2nd Edition
Right arrow
Author (1)
Will Grant
Will Grant
author image
Will Grant

Will Grant is a British UI/UX expert and a digital product designer. He is a web technology entrepreneur with over 25 years' experience, leading teams (and products) at the intersection of technology and usability. After his Computer Science degree, Will trained with Jakob Nielsen and Bruce Tognazzini at the Nielsen Norman Group – the world leaders in usable design. Since then, Will has overseen the user experience and interaction design of several large-scale web sites and apps, reaching over a billion users in the process. Will is a "design purist" and obsessed with building beautiful, compelling, and familiar products that customers intuitively know how to use.
Read more about Will Grant

Right arrow

Content

Not every application is focused around content, but the vast majority are—posting, reading, searching, sorting, and so on. This section explores the best practices for giving your users a seamless experience when dealing with content of all types.

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

Show the user the current page, some pages before...

Allow Users to Accept or Reject Cookies with One Click

The law (and resulting directives) around cookies is often misunderstood, leading to bizarre experiences where users are blocked from visiting sites or inundated with complex modal dialogs they must navigate through before they can view the site.

Like most laws, it began with the best intentions. Ten years ago, the web was a “wild west” of tracking and privacy-invading profiling of users across websites. The EU aimed to give people back some rights over their personal information and protect them from non-consensual harvesting by third parties.

The EU ePrivacy Directive states that:

No cookies and trackers must be placed before prior consent from the user, besides those strictly necessary for the basic function of a website.

Analytics cookies allow teams to understand detailed information about who visits the site and their on-site behavior, and these don’t count as “basic...

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...

lock icon
The rest of the chapter is locked
You have been reading a chapter from
101 UX Principles – 2nd edition - Second Edition
Published in: May 2022Publisher: PacktISBN-13: 9781803234885
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime

Author (1)

author image
Will Grant

Will Grant is a British UI/UX expert and a digital product designer. He is a web technology entrepreneur with over 25 years' experience, leading teams (and products) at the intersection of technology and usability. After his Computer Science degree, Will trained with Jakob Nielsen and Bruce Tognazzini at the Nielsen Norman Group – the world leaders in usable design. Since then, Will has overseen the user experience and interaction design of several large-scale web sites and apps, reaching over a billion users in the process. Will is a "design purist" and obsessed with building beautiful, compelling, and familiar products that customers intuitively know how to use.
Read more about Will Grant