Stop making sites with endless scrollingǃ
3r33535. 3r3-31. 3r3403. 3r33511. 3r33535.
A brief history of scrolling
3r33511. 3r33535. To understand what scrolling is, look at the origin of the words . 3r33511. 3r33535. 3r33511. 3r33535. 3r33434. 3r33385. scroll [/b] (n.): c. 140? “roll of parchment or paper” 3r33448. 3r33511. 3r33535. 3r33511. 3r33535. Scrolls were originally used when the document became too long (for example, religious content). With so much content it became difficult to manage, it is difficult to read and rewrite. 3r33511. 3r33535. 3r33511. 3r33535. When computers came into our lives, we still needed a way to navigate large portions of content. 3r33511. 3r33535. 3r33511. 3r33535.The evolution of scrolls in computers 3r33510. 3r33511. 3r33535.
1. Rows (and columns)
3r33511. 3r33535. After the advent of the web, designers invented /explored many ways to paginate /scroll content. Before the Internet, we scrolled lines on the screen. 3r33511. 3r33535. 3r33511. 3r33535. Horizontal scrolling made the scrolling tool not only for reading the content, but also for navigating the screen. 3r33511. 3r33535. 3r33511. 3r33535. 2. Windows (not an operating system) 3r3383. 3r33511. 3r33535. Having a scroll pushed people to create a window interface. With the help of windows, you can simultaneously view several pieces of content. 3r33511. 3r33535. 3r33511. 3r33535.
In the Program Manager Windows 3.1 several “scrolls” 3r3447. 3r33448. 3r33511. 3r33535. 3r33511. 3r33535.
3. Web pages
3r33511. 3r33535. Scrolling decides the most the fundamental problem when browsing the web. However, it can cause many problems for users and can prevent them. Let's take a closer look. 3r33511. 3r33535. 3r33511. 3r33535.Options for navigating web pages 3r33510. 3r33511. 3r33535. I will try to determine how developers and designers created an interface for navigating web pages. 3r33511. 3r33535. 3r33511. 3r33535. Let's start with some server systems pagination. 3r33511. 3r33535. 3r33511. 3r33535.
Layout of pages based on the offset
3r33511. 3r33535. The most famous pagination system. In this technique, you first need to find how many elements need to be paginated:3r33535. 3r33511. 3r33535.
- All posts count
SELECT COUNT (*) AS total FROM posts
3r33511. 3r33535. After that you need to count the pages. Suppose we show 10
elements on the page:3r33535. 3r33511. 3r33535.
- First page items
SELECT * FROM posts LIMIT 10
3r33511. 3r33535. And if we want to go to page 3
then you need to skip the first 30
elements using the offset ( OFFSET
):3r33535. 3r33511. 3r33535.
- Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30
3r33511. 3r33535. Information is sent to the client as follows: 3r33511. 3r33535. 3r33511. 3r33535. {3r33523. pagination: {3r33523. "items_count": 10?
"current": ? 3r32323. "total_pages": 10
}, 3r32323. "items":[]3r33535.}
3r33511. 3r33535. Pros and cons of pagination based on bias:
3r33511. 3r33535.- 3r33535.
- Good : go to any page easily. 3r33535.
- Good : more free option for user 3r33535.
- Poor : performance issues with 3r33535.
- Poor : Duplicate elements may be displayed when changing data. 3r33535.
Pagination on the
pointer. 3r33511. 3r33535. Big data makes it difficult to calculate the tables, because the data is constantly arriving (think about Twitter). Thus, the developers came up with new methods for pagination: 3r33385. following signs [/b] (cursor). 3r33511. 3r33535. 3r33511. 3r33535. Each line is assigned a unique pointer. No need to cheat the entire table and know the exact number of pages: 3r3353511. 3r33535. 3r33511. 3r33535. - Get extra 1 item to get its cursor. 3r33535. SELECT * FROM posts ORDER BY id DESC LIMIT 11
3r33511. 3r33535. Suppose that each message has a unique pointer (the ID in this example) for pagination. The customer will receive the following information: 3r33511. 3r33535. 3r33511. 3r33535. {3r33523. pagination: {3r33523. "next": 1234 //extra item's ID (cursor), null if end of data. 3r33535.}, 3r32323. "items":[]3r33535.}
3r33511. 3r33535. And you can request the next page with the help of the pointer: 3r33511. 3r33535. 3r33511. 3r33535. - Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id> = 1234 ORDER BY id LIMIT 11
3r33511. 3r33535.Pros and cons of pagination on pointers:
3r33511. 3r33535.
3r33535.
Good
: more productive, there is no calculation of the table
3r33535.
Good
: displaying duplicate elements is not possible if someone inserts a row in the center of the table 3r-32r. 3r33535.
Poor
: it is impossible to go to any page
3r33535.
Poor
: restrictions for the client, the total number of pages and the current page number
are unknown. 3r33535.
3r33511. 3r33535. Consider some methods of navigation. 3r33511. 3r33535. 3r33511. 3r33535.Next and previous
3r33511. 3r33535. 3r33385. Action [/b] : based on clicks
3r33535. 3r33385. Technique [/b] : based on offset or following signs 3r33511. 3r33535. 3r33511. 3r33535. It is mainly used to navigate blogs. This is the oldest version of infinite scrolling. With this approach, the user may not know where the content ends. 3r33511. 3r33535. 3r33511. 3r33535.WordPress pagination
3r33448. 3r33511. 3r33535. 3r33511. 3r33535.Pagination
3r33511. 3r33535. 3r33385. Action [/b] : based on clicks
3r33535. 3r33385. Technique [/b] : based on the offset
3r33535. 3r33511. 3r33535. In my opinion, this is the most convenient type of navigation. It uses pagination based on the offset, which allows you to go to the desired page, and also with one click go to the end or the beginning. 3r33511. 3r33535. 3r33511. 3r33535.Examples of numbering
3r33448. 3r33511. 3r33535. 3r33511. 3r33535. Google uses this navigation in search results: 3r33511. 3r33535. 3r33511. 3r33535. 3r33337. 3r33511. 3r33535. 3r33511. 3r33535.Load
more. 3r33511. 3r33535. 3r33385. Action [/b] : trigger
3r33535. 3r33385. Technique [/b] : based on pointers, although it can be implemented on the basis of bias, but it will be inconvenient 3r33511. 3r33535. 3r33511. 3r33535. This is one of the newest pagination methods, it also uses the previous version of infinite scrolling. 3r33511. 3r33535. 3r33511. 3r33535. 3r33333. 3r33511. 3r33535. 3r33434.
Download More button
3r33448. 3r33511. 3r33535. 3r33511. 3r33535. In the example above, the user clicks the Load More button to see more content. 3r33511. 3r33535. 3r33511. 3r33535.Infinite scrolling
3r33511. 3r33535. 3r33385. Action [/b] : based on scrolling
3r33535. 3r33385. Technique [/b] : based on pointers, [i] although it can be implemented on the basis of bias, it will be VERY inconvenient 3r-3448. 3r33511. 3r33535. 3r33511. 3r33535. Infinite scrolling is the latest pagination technique based on pointers. 3r33511. 3r33535. 3r33511. 3r33535. 3r3013. Hugh Williams claims that 3r33398. invented endless scrolling in 2005 for Microsoft 3r3403. . 3r3404. 3r3013. 3r3402. Metafizzy
developed an open source tool to help developers realize endless scrolling. 3r3404. 3r33511. 3r33535. 3r3407. 3r33511. 3r33535. 3r33434.
Infinite scrolling allows you to scroll the page to infinity
3r33448. 3r33511. 3r33535. 3r33511. 3r33535.
Stop making sites with endless scrolling! 3r33510. 3r33511. 3r33535. So far we have been considering how to get here. Now let's talk about why it is so bad. 3r33511. 3r33535. 3r33511. 3r33535.Search footer
3r33511. 3r33535. The footer is the basic unit of the anatomy of a web page, just like the header. Sites provide details and links there: phone numbers, addresses, links to help and support topics. If users search for this information, they usually scroll the page down to the footer. 3r33511. 3r33535. 3r33511. 3r33535. With endless scrolling, users find it difficult to find a footer, because it’s impossible to see the end of the page. The inability to reach the footer can strain the user (which is not great). 3r33511. 3r33535. 3r33511. 3r33535. Sites with endless scrolling (for example, Twitter) solve the problem by placing the necessary information and links in the sidebar. The sidebar is a solution, but not a good one. Footer must remain footer. 3r33511. 3r33535. 3r33511. 3r33535. 3r3442. 3r33511. 3r33535. 3r33434.
Twitter footer on the right sidebar
3r33448. 3r33511. 3r33535. 3r33511. 3r33535.Do not use endless scrolling if you do not have a timeline or a
tape. 3r33511. 3r33535. Social networking applications work with the timeline. Users tend to navigate in time, work with the past. In this case, endless scrolling simplifies navigation. Here it is good for performance, especially in mobile devices. 3r33511. 3r33535. 3r33511. 3r33535. But if you have an e-commerce site, a newsletter, a magazine or a blog, then the desire of users to navigate through elements or articles, and then endless scrolling becomes a nightmare for them. In the timeline list, people generally don’t look for a date or a unique item. In lists based on items, the user wants to find the specific item. The endless scrolling makes it almost impossible. 3r33511. 3r33535. 3r33511. 3r33535.Give users more control of
3r33511. 3r33535. Users generally do not like a UI that they cannot control. 3r33511. 3r33535. 3r33511. 3r33535. The scrolling event does not explicitly lead to the intention to do something. People move around the page, and if they want to perform an action, they usually click or touch the screen (these are triggers). They inform the UI of their decision. But endless scrolling works without any solution. 3r33511. 3r33535. 3r33511. 3r33535. Infinite scrolling makes pages less manageable. Users may also encounter jumping glitches. 3r33511. 3r33535. 3r33511. 3r33535. Instead of scrolling endlessly, put the “Load More” button, which is a trigger. This will give the user control. (I would prefer the old style of page numbering, but we assume that we are now using pagination on pointers). 3r33511. 3r33535. 3r33511. 3r33535.Allow users to go where they want
3r33511. 3r33535. People move through the pages, save some to bookmarks, share with friends, etc. 3r33511. 3r33535. 3r33511. 3r33535. However, the endless scrolling cannot preserve state in its essence. Users cannot share the current status. It also means that you cannot track user activity with analytics tools. 3r33511. 3r33535. 3r33511. 3r33535. If your internal pagination method is pointer-based, it’s almost impossible for users to arbitrarily navigate. If you have an e-commerce site, then let your users navigate to the right products. 3r33511. 3r33535. 3r33511. 3r33535. In addition, if there is a “Sort by” function in the list, need to show the user the pagination. If the list is in alphabetical order, do not force people to scroll through the list to the letter K, otherwise they will go crazy. 3r33511. 3r33535. 3r33511. 3r33535. It is necessary to show the user where he is. When he refreshes the page with endless scrolling, he will be thrown back to the very beginning, and he will have to scroll down again to the place where he was before. 3r33511. 3r33535. 3r33511. 3r33535.
Conclusion 3r33510. 3r33511. 3r33535. Infinite scrolling is good in some cases, but as a rule, it creates more problems than it solves. Designers should not consider endless scrolling as a silver bullet that solves all problems with pagination. Stop making sites with endless scrolling! 3r? 3519. 3r33535. 3r33535. 3r? 3516. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r? 3517. 3r33535. 3r? 3519. 3r33535. 3r33535. 3r33535. 3r33535.
It may be interesting
This publication has no comments.
weber
Author24-10-2018, 20:11
Publication DateInterfaces / Designing and refactoring / Web design
Category- Comments: 0
- Views: 1 223
Comments
Global Dezigns is a Website Development Company in Karachi, Providing services of
website design in karachi
. We are delivering the best partnership across Pakistan. provides a complete range of web development services including web applications, website hosting and maintenance, domain registration, on-page search engine optimization, and website integration with social media platforms such as Facebook, Twitter, LinkedIn, Google Maps, and Google Local Directory. We believe we are well placed to take our knowledge and expertise to the logical next level with the latest web standards.
This blog is really great. The information here will surely be of some help to me. Thanks!.mastering physics
Coinyspace is the cryptocurrency community and trading forum where members can find any contributors of crypto ecosystem like currencies, exchanges & merchants. Check Out: Bitcoin Merchants
This is a great high resolution screen which you have shared for the users. Making a website is not an easy task but managing a good website is really a hard work. As far as this website is concerned, I am very happy.https://19216801.1
i'm satisfied to deem this make recognized Very beneficial for me, as it contains lot of advice. I usually favor to buttonhole The excellent and glad i found this count number in you assertion. thanks Subliminal Hypnosis