1️⃣ Pagination vs Infinite Scroll

Pagination is commonly employed to break down content into manageable chunks, usually represented by numbered pages or navigation controls.

Pagination component from Material UI

Infinite scroll is designed to seamlessly load and display content as users scroll down a webpage.

Have you ever wondered the rationale behind Google's implementation of a pagination pattern on their search engine, as opposed to adopting infinite scroll? The reasoning behind this choice lies in the fact that individuals utilizing Google typically employ a particular search term and are solely interested in results pertaining to that specific term. The use of infinite scroll has the potential to divert users' attention with an abundance of diverse content types, leading to a sense of disorientation and ultimately causing frustration and dissatisfaction.

On the other hand, pagination is not commonly found on social media platforms. Users on these platforms primarily engage in content exploration rather than targeted searches. Their objective is to effortlessly consume a vast amount of data without the inconvenience of navigating to subsequent pages. Infinite scrolling proves to be highly effective and suitable within this context.

✅ Use Pagination

👉 When searching for something specific

👉 Need better page performance

👉 To provide quick navigation in large datasets

✅ Use Infinite Scroll

👉 For content discovery and exploration

👉 To increase user engagement

👉 When the content type contains mostly visuals like images or videos

2️⃣ Hamburger menu vs Tabs

A hamburger menu is an icon used in user interfaces to hide a navigation menu, enhancing screen space and providing a clean design, particularly crucial for responsive web design.

Tabs organize content into distinct sections, often displayed as clickable icons at the bottom, facilitating intuitive access to different parts of an application with a single tap.

Tabs component from Material UI

Social media apps like Instagram employ Tab navigation as opposed to a hamburger menu as their primary means of navigation. This is because the designers at Instagram have a clear objective - to ensure that users can effortlessly access key features, like Reels, without the need for any additional clicks. Implementing a hamburger menu would only conceal these vital elements and reduce user engagement. 

On an e-commerce website, you will often encounter a multitude of subcategories nested within each main category. This is precisely where the hamburger menu truly shines, providing utmost convenience in navigating through the extensive array of options.

✅ Use Hamburger

👉 On apps with large number of navigation items

👉 For secondary navigation

👉 When page content is the primary focus

✅ Use Tabs

👉 On apps with fewer navigation items

👉 To provide quick access to content

👉 When navigation is the primary focus

3️⃣ Opening links in the same tab vs new tab

So, I was casually scrolling through a recipe website, trying to find something quick to whip up in the kitchen. I stumble upon this cool recipe that catches my eye, so I click on it. No surprises here, the link opens up in the same browser tab. This made total sense as the recipe page is the child of the main page.

As I'm reading through the recipe, I notice a bunch of other links within the page. There are links to specific ingredients, links to other related recipes, and even links to health research citations. I click on one of those research citations and, in this case, the link opens up in a new tab.

As noticed, everything directly related to the recipe opens in the same tab keeping things organized and easy to navigate. Any additional resources like citations, direct me to a new tab preventing any distractions from the main content.

✅ Open links in the same tab

👉 Linked content is closely related to the current page

👉 To maintain continuity of the current task

👉 On single page applications

✅ Open links in a new tab

👉 Linked content provides supplementary information or additional resources

👉 To maintain original context of the current task

💡UX tips for link redirects

• Providing clear visual cues, such as iconography or hover effects, to indicate whether a link will open in the same tab or a new tab helps users understand what to expect.
• Provide users control over how links open such as right-clicking to open links in a new tab or providing a preference setting for users to customize their browsing experience.

I hope these tips will help facilitate decision-making for your upcoming projects. Here are some additional resources for you explore:

Credits: Published on Conflux

Credits: Published on Hubspot

Credits: Published on UX Collective