6 Best practices for designing Pagination (2026)

Updated on 13 Dec 2025

“Pagination is the process of dividing a document into discrete pages, either electronic pages or printed pages.” Wikipedia

Pagination are an important element in web designing. Especially in content heavy websites and applications pagination is used to divide content and present in limited & digestible manner. In this articles we are going to see some best practices for designing better pagination.

TL;DR

1. Pagination or lazy load? Choose wisely

Best practices for designing Pagination

1. Pagination or lazy load? Choose wisely

IT is the first question a designer need to answer “What will work best pagination or lazy load in the given context?” Both pagination and lazy load have different benefits for better usability and user experience.

2. Where to place it 

Placement of Pagination is really important from Usability point of view. Many a times we have long vertical page in web and user tries to scroll down –down and if pagination is placed at top then user might miss it out and if pagination is only present at bottom then for going to next pages user might have to scroll page completely. For longer pages (long tables) provide pagination at both places at top and at bottom. It makes two major benefits, first is chances of missing out pagination are less and second users get flexibility to go to other pages easily.

3. Visibility of System status

Visibility of system status is prime important heuristic principle applied in Pagination. Current selected state and actions (Next, Previous buttons etc.) should be clearly visible to users.

4. Show first and last page upfront

Showing the last page number in pagination upfront makes it easier to know the limit of pagination for an end user. Also it can reduce to action buttons from pagination element i.e. ‘first and last page’, resulting it makes pagination component less complex.

5. Have flexible and efficient ‘Go to page’

Many a times in content heavy web applications (like finance, sales, accounting applications etc.) where number of records in table are more than 100 to 1000s. For providing ‘Ease of use’ to potential users, we should include ‘Go to Page’ element in pagination where users can directly enter or select page number and go directly to that page for viewing records.

6. Provide control to user for selecting number of records per page

Decision for finalizing number of records in table or page should be taken by end user. Potential users have their own pattern to using the system and if we are providing the decision to them then it can bring more flexibility for them. This flexibility can result in more user satisfaction and better performance.

USE CASES in UX

Image by Gerd Altmann Pixabay

Updated on 4 Feb 2025 

An Introduction

A “Use case” is a term used widely in various contexts. In business, it is often used in reference to a business case, a process or a scenario that can be implemented as a product or part of that product. Referring to the context of User Experience (UX), a Use Case is a documentation highlighting the possible interactions between the users and the system.

Use Cases give us a precise idea about how the users should be able to make use of the product or application for the completion of the task. A Use Case depends on the “User Action” and the corresponding “System Response” to that particular action. It is a document that serves to highlight the set of actions that a user performs to achieve certain goals and the responses received from the system to the user’s action.

Use Cases in UX are an important tool for performing user research and user experience design. In a design-focused development environment, they serve to highlight the purpose and objectives of a system and its associated user roles by depicting a sequence of steps performed and the interactions towards a common, specific goal.

Importance of Use Cases

Use Cases are important because they provide information about how a system responds while it is used. They describe how the system helps the users achieve their goals. Contrary to a User Scenario, a Use Case is more orientated towards the behavior of the system rather than the user. In a Use Case, a comprehensive set of goals can be defined and an analysis can be performed as to how expensive and extensive it is vis-à-vis resource procurement, deployment and utilization to achieve the goals. In projects, Use Cases are helpful in analyzing which areas of the system need to be focused and developed and what setbacks could possibly occur while performing a task.

It is a user-centric approach: One has to state “what actions will be performed by the user” and “what result will be displayed by the system”.

It is not a system-centric approach: One does not have to specify “what inputs are fed to the system” and “what is its corresponding output”.

5 Experience Goals That UX Designers Should Set

User experience design plays an important role in product design process. But what is good user experience on earth? Is there any criterion? The following 5 user experience goals, listed in a logical order, may help you to find the right direction of user experience design ASAP and make you an excellent UX designer.

Goal 1: “I got what I need”

To give users what they need is the first goal of user experience design. Before using a product, people are mostly concerned about “whether it is useful?” “Will this product solve my problems?” So a product should meet the functional demands of users first (not only those existed demands, but also potential ones). Doing user research is a good way to find out users’ demands, but objectively, it’s hard to measure users’ needs precisely, even if it was huge company which has advanced user survey technologies.

For example, Facebook at the beginning didn’t take “making friends with strangers (say, a friend’s friend)” seriously as they believed that people only have curiosities on their surroundings; social network is essentially “a game among acquaintances”. However the data show that most of users like to expand their circles by adding strangers as their friends. Now social platform also contributes a lot to companies and brands who want more influence online. They put money and energy on operating an official page to promote their products. All of these are unexpected demands for the early designers. Thus, collecting users’ feedback constantly and make use of data or other materials to follow your users’ activities is also a key to meet users’ demands. If UX designers don’t give users what they want, the users will give a shit.

Goal 2: “Don’t make me think”

“Will I get what I want in a most simple, direct and quick way?” It would be better if you “Don’t make me think”.

The top-download games in app store are always those like “Don't Tap the White Tile”, which people can play without brains. This shows the laziness nature of human beings. But laziness is also an important drive of technology development. As a UX designer, we have no reason to go against it unless we want to make products that are “anti-human”.

How to design to give users what they want in the easiest way? First UX designers should be a mastery of the user stories & scenario of products. Which are important things that users pay much attention to? Which are secondary? How to simplify the operations by taking advantage of users’ habits? As to user interface, whether the flat design method should be adopted to enable users to get most information at the first sight. Besides, the usability of products also depends on the design tools you choose. A complicated-to-use prototype/wireframe tool is a bad design itself, so how can we make good UI or product prototype with it?

Goal 3: “I really enjoy using it”

Many products have similar functions, which can all meet the users’ needs to some extent. But only few of them are favored by users, why? As a music lover, I go to a concert at least once a month. Among these concerts of any scale, there are some which thrilled me from start to finish. It seems that the design of a music concert has nothing to do with product design, but as I have been immerging in design circle for many years I gradually found that an exciting concert is just like a product offering good user experience, both of them give you the right thing at the right time.

At an evening dinner, the starter is always delicate but of low volume. Gradually, under the influence of some spirits, the main course was served, at this moment the light is warmest and the atmosphere is the best. The ending part is usually made easy. This is a very good example to explain that “UX Designers should have a sense of rhythm (of product)”. When designing video player software, how many “ss” should the “black screen” last to draw the users’ attention, but never make them feel impatient? Why some social platforms only allow its users to access more functions after a period of time? Those are all questions that user experience designers should concern about.

 Goal 4: Habit is a second nature

“Whether the product is attractive enough for me to use it for a long term?”, and even “becomes part of my life” and “makes me addicted to it”.

In the article “UX/UI Designer Skills Valued by Facebook” I mentioned that one important reason that Facebook became a huge social platform with over 200 million users is that FB knows the mental & psychological needs of users: people win others’ attention on Facebook, which they didn’t get in real life. “Helping people to build a strong connection with external world; enabling them to follow and be followed, these are what a social platform was born for.” A functionally powerful product will no doubt be favored by people. But a product which forms a new habit has immeasurable potential. Electric light, mobile phones, new transportations; Wechat, Whatsapp, these are all among the latter.

 Goal 5: Make users your promoters

“Whether the product is good enough to motivate me to become one of its promoters?”

If a designer set the above 4 user experience goals when designing a product, he would be an excellent designer. The last goal, as far as I can see, is the inherent property of an excellent design: to mobilize its users. As we all know, users are the best spokesmen of your products. Companies may seek help from all kinds of resources to promote their products: KOL, famous blogger, web celebrities. However, none of them is as powerful as users. You may ask: why does product promotion has something to do with designers? If UX designers can build a relationship between the users and potential users, for example, put a “sharing on Twitter” button on the right place, there might be more people will join in (this is a method of most basic level). For another example, users need to cooperate with others when using the product (like game products). In short, to mobilize your users and make them your promoters is also an important user experience goals that good UX designers should set.


Promoted

Responsive Web Design Guidelines: What It Is and How to Use It

 Before getting into the details of responsive web design guidelines, let’s have a short background introduction. The responsive web design, firstly put forward by Ethan Marcotte, is not just about the adaptiveness of screen resolution or the auto-scaling of pictures. Instead, it’s more like a new way of thinking where designers need to consider many factors, such as the device performance, Dom node number and the screen size, etc. Following are several responsive web design techniques for your reference.

How about responsive product design? 

The responsive design is out of the product design, which requires the engagement of product managers, interaction designers as well as engineers. It’s of necessity for us to break the traditional way of thinking in the design, shifting from the web to mobile applications. The first step is to build a clear information architecture, then get the design started on the smallest display of mobile devices with the abandon of interference so as to ensure the best experience of the core function.

Meanwhile, the participation of interaction designers should deal with the responsive design problems and the issue of how to make the module much smaller and flexible. They also need to confirm the design style and framework. For the developing engineers, their responsibility is to make the test of coding and programming on the basis of the completed project, taking full advantage of individual device’s characteristics and building frame structure.

How does the interface design look like in the RWD? 

 Previously, most of the interface designs aim to the desktop products, and there will be one single size with fixed location of each module. But everything has changed in the responsive design. According to those responsive web design tutorials on the web, it proves that designers need to make multiple versions of design. A typical example is the module A which is shown in a black background in the width of 1024px is shown in a white background in the width of 768px.

Does the traditional media query breakpoints still go popular? 

From the perspective of traditional design, it’s possible to change the page layout through Media Query. For instance, we can change the layout in a fixed width (that’s what we call breakpoint). The usual way of thinking is to set breakpoints in accordance with some devices, such as desktop, tablet and mobile phone. As a matter of fact, the media query breakpoint is unreliable as the screen size will continue changing with the development of technology.

But the responsive design shouldn’t be targeted only at some devices with certain sizes, and there needs an interval value during the design process, rather than a resolution corresponding to a device. Henceforth, it’s necessary to make correspondent settings according to the content need. For designers, they need to find a critical point – that is the value when the visual effects start failing to meet the aesthetic of people or the acquisition of content.

 

What are the differences between interaction design and RWD?

In the responsive design, it requires a comprehensive consideration about the way of interaction, which is one of the responsive web design key features. An excellent interaction designer should not only consider the habits of desktop users, but also must take the portable devices of different sizes into account. For instance, we’re used to using the floating layer on PC, but it cannot be used on some devices of small sizes. Also, some links of a small responsive area are not easy-to-operate by fingers.

This requires designers to seek common ground while reserving differences. For example, they can decide whether to use floating layer, increase the operating area and keep unified or not, on the basis of screen size. To ease the process of design, we’d like to recommend a simple-yet-powerful prototyping tool – Mockplus. It enables rapid prototyping and highly-visualized interactions with the simple drag-and-drop option.

 

In Conclusion

Above are the responsive web design guidelines for product design, interface design, media query breakpoints and interaction process. Hopefully, you can find it helpful, and you can also learn about the difference between responsive and adaptive design.

What is Mobile First Design? Why It's Important & How To Make It?

On the Mobile World Congress in 2010, Eric Schmidt, the CEO of Google put forward that designers should follow the “mobile first” rule in product design. What does “mobile first design” mean? Why is it important? How to make it? I’ll answer these 3 questions in the following part.

What is Mobile First Design?

To understand the concept of mobile first design better, you should know the two phrases below first.

1. Responsive Web Design (RWD)

Responsive web design is a web design method that enable web to fit to the screens of different devices automatically, displaying the content in a way that people feel comfortable. This greatly reduces users’ operations like panning, zooming and scrolling when browsing the web.

Know more about responsive design

2 “Progressive Advancement” & “Graceful Degradation”

These two concepts were put forward before responsive web design. In order to make web or application interface display reasonably on different devices, designers provide customized versions of product for different ends.

Progressive Advancement means that when we design a product, first we build a version for relatively lower browser (like that on a mobile phone). This version includes the most basic functions & features. After that we tend to the advanced version for a tablet or PC, which is created by adding interactions, more complicated effects, etc. on the basic version for a better user experience.

“Graceful Degradation”, on the contrary, starts the product design from an advanced end like desktop and builds a version with well-rounded features at the beginning. Then designers make the product compatible to mobile ends by cutting some functions or contents.

Progressive Advancement has won the game for now as far as I can see. If UI/UX designers start a product design with its desktop version, they will inevitably want to make use of most of the advantages of the advanced end. For example, the hover effect which is supported by a cursor mouse; HD images & complex charts which can display normally only when there is a recent bandwidth. In this way the designers will make efforts to complete an amazing desktop version and only to find it can hardly be adopted on a mobile end unless they give up a lot of beautiful ideas. If so, the mobile end version will be more like an afterthought, an incomplete product which’s been watered down.

But if we take the mobile end product design as a starting point, under the restrictions like bandwidth, screen size and so on, designers will naturally seize the key points of a product, head for a lean & neat product with prioritized features. When the platform is expanded to a tablet or PC, designers are able to take advantages of the unique features of these advanced ends to strengthen the product step by step. This might be the main reason that progressive advancement strategy is widely used.

You may ask, why do you spend so much time on explaining the two concepts? The answer is that “mobile first” is exactly a rule of “progressive advancement”.

"Mobile first", as the name suggests, means that we start the product design from the mobile end which has more restrictions, then expand its features to create a tablet or desktop version.

Why "Mobile First" Principle Is So Important in Product Design?

Except for the victory of progressive advancement against graceful degradation as mentioned above, we have more tangible reasons to believe that mobile first principle is important in product design. That is, the exploding of mobile use.

1. Mobile internet usage has surpassed desktop usage in 2016.

2. People have spent more and more time on internet from mobile ends.

3. Early in 2012, smart phone sales have overtaken PC sales.

The exploding of mobile ends urges designers to pay attention to the mobile end and follow the “mobile first” rule in product design.

How to Practice “Mobile First” Rule in Product Design?

The key to mobile first principle is, in fact, a content-centered mind.

The following part will explain the advancement of a product from a mobile phone end to a PC end.

(The design tool used in the example below is Mockplus by Jongde software company. Mockplus is an easy-to-use PC/mobile application for fast wireframe & prototype building)

Download Mockplus Free Version >>

Let’s make an application about hotel booking. We first sort the content of the site by importance:

* Website name

* Hotel (Domestic Hotel, Foreign Hotel, Hour Room, Special Hotel)

* Time selector (check-in time, departure time)

* My Order

* Customer service

* Promotion & Advertising

Then we get a mobile end version like this:

Hotel Booking App

Domestic, foreign hotels and time selectors are the most important content. They are located on the most prominent part of the interface.

By adding more features on the mobile version and enlarging the promotion & advertising displaying area we get a desktop version like this:

In this way, designers are able to creating a product for multiple ends in a smooth and efficient way instead of ruthlessly removing those good features to get an afterthought.

In short, the "mobile first" principle has an important role in product design. On the one hand, it helps to save product design time and improve designers’ productivity. On the other hand, it forces designers to pay more attention on the content of a product, which helps them to created neat and practical designs. However, as smartphones become more and more powerful, the mobile end might no longer be considered as “lower ends" in the near future, so the "move first" may not be an everlasting topic. But for now, its place in product design cannot be ignored.

About Author

Yuting Liu

liuyuting994@gmail.com