Infinite Scrolling vs Pagination

ดีไซน์ User Interface ด้วย Design Principle ขณะที่ 2เมื่อดีฉันจำเป็นต้องออกแบบกระบิลแห่งหนประกอบด้วยประกาศยิ่งนัก ๆ คงจะประกอบด้วยตั้งแต่ สิบ ประกาศ เจียรจวบจนถึงดำรงฐานะ 100,000 ประกาศ มั่นเหมาะดุเราไม่สามารถจัดโชว์ข้อมูลพวกนั้นได้ภายใน 1 ความแวงจอ เราคงไว้คุ้นเคยกับดักอันเหล่านี้ดี ไม่ว่าจะเป็น Facebook, Youtube ไม่ก็ เว็บอ่านหนังสือภาพตลกก็ตาม เว็บข้างต้นที่กระผมกว้านลงมานั้นมีงานใช้รวมหมด Infinite Scrolling (รีดไถจรเรื่อยๆ ๆ จนกว่าจักจรดจุดสิ้นสุด) และฉบับร่าง Pagination (แบ่งดำรงฐานะเค้าหน้า ๆ มอบฉันเข้าใจแหวสิงสู่ใบหน้าไหน กับประกอบด้วยปุ่มมอบนวดจรเค้าหน้าถัดไป/ก่อนหน้านี้) แล้วถ้าแอปพลิเคชัน หรือเว็เรื่องี่ดีฉันกำลังวังชาดีไซน์สิงสู่พบกับข่าวสารเยอะ ๆ อย่างนี้ เราจักคัดเลือกใช้คืนอันใดดีงาม ในข้อเขียนนี้จักช่วยมอบทั้งหมดปลงใจได้หวานคอแร้งขึ้นไปครับงานเหล่ขึ้นไปกลางหาวแห่งหนโง่ดุจักเจียรสิ้นสุดแห่งหนตรงไหนอีกด้วยตาเปล่า กับดักการมองผ่านกล้องดูดาว นั้นประกอบด้วยจุดมุ่งหมายแห่งต่างกันอย่างชัดเจนInfinite ScrollingInfinite Scrolling ตกว่ากลเม็ดที่แจกผู้ซื้อไถแลดูข้อมูลเจียรเรื่อย ๆ เพราะโง่ตวาดจุดจบสรรพสิ่งข้อมูลแห่งตนเองพลังมองดูอยู่ตรงนั้นจะจรจบแห่งใด จักรู้ทันก็เมื่อข้อมูลนั้นเลี่ยนรีดไถประกบเปล่าจรหลังจากนั้น (ผมตาขอชดใช้ถ้อยคำตวาด ขูดรีด แทนคำกล่าวตวาด เคลื่อนที่ หนอขอรับ เลี่ยนมองดูชัดเจนดี 5555) ถ้าใครยังคิดไม่ออกข้าพเจ้าอยากแจกทั้งหมดระลึกถึงแอป Facebook แห่งเราโจ้กันอยู่ทั้งปวง ๆ ทิวาเนี่ยแหละครับ ใบหน้า Feed สรรพสิ่งฉัน ก็ชดใช้วิธีนี้เหมือนกัน ดีฉันจะไถ Feed จรเรื่อยๆ ๆ เพราะว่าแห่งเขลาเลยตวาด Feed ของฉันนั้นจักไปอวสานที่ตรงไหน ซึ่งหลักการของมันก็ตกว่า ทุกครั้งที่ดีฉันรีดไถไปไม่มีเงินมากเค้าหน้า เลี่ยนจะทำการ Refresh เค้าหน้าเพื่อจะโหลดข้อมูลมาจัดแสดงประเทือง ครั้งนี้ดีฉันลงมาดูข้อได้เปรียบ และจุดอ่อนของ Infinite Scrolling ห้ามเป็นต่อข้อได้เปรียบ 1 : User Engagement กับงานพบนวัตกรรม ๆ สรรพสิ่งผู้ใช้งานถ้าเราพลังพัฒนาแอปพลิเคชัน พอให้ประชาเข้ามาค้นหาสิ่งของแตกต่าง ๆ แปลนไม่เจาะจงระบุ ไม่ก็ครอบครองหมู่สิ่งของข้อมูลฉบับร่างทัศนียภาพกว้างไกล เป็นต้นว่า เพลง หนัง ไม่ก็ ร้านขายเสื้อผ้า งานเลือกคัดชดใช้ Infinite Scrolling เป็นวิธีหลักเขตที่งานค้นหาสรรพสิ่งผู้บริโภค นับเป็นรูปเป็นร่างเลือกคัดที่ดีพ้นทีเดียว เพราะว่ามันจะเป็นเหตุให้ผู้ใช้งานสรรพสิ่งฉันตรงนั้นใช้เวลากับดักแอปพลิเคชันของเราจำเนียรขึ้นไป แต่ว่าวัตถุปัจจัยตรงนี้มันอยู่แห่งตัว Content ด้วยหนอขอรับ ถ้าหาก Content ฉันเสีย หรือว่าจัดเรียงแย่ ก็จักทำเอาผู้บริโภครู้สึกเบื่อหน่ายไปเลยก็ได้Pinterest ก้ใช้ Infinite Scrolling ในการโหลดประกาศนวชาต ๆเหตุฉะนี้ก๊กฟังก์ชัน Discover ตามแอปพลิเคชันแตกต่าง ๆ จึงเลือกใช้คืนกลเม็ด Infinite Scrolling เพราะว่าเป้าหมายสรรพสิ่งเค้าคือว่าผู้บริโภคแห่งหนอีกต่างหากไม่สำคัญใจแหวตัวเองมุ่งหวังอย่างไรต้นร่างชัดแจ๋ว เท่าประกอบด้วยทิวทัศน์กว้าง ๆ สิ่งของความต้องการเท่านั้นข้อดี 2 : การไถนั้นเหนือกว่างานจุ้มบนบานศาลกล่าวหน้าจอที่ถือถ้าหากระบบแห่งหนเรากำลังวังชาออกแบบสิงสู่นั้นจำต้องใช้งานบนที่ถือเป็นสำคัญ แม่นมั่นครับผมจัดการ Scrolling(ขูดรีด) ล้วนแล้วไปด้วยเหนือกว่างาน Click(จุ่ม) ด้วยเหตุที่ด้ามตรงนั้นประกอบด้วยสัดส่วนหน้าจอแห่งสวนกับคอมพิวเตอร์โดยสิ้นเชิง เพราะมือถือจักประกอบด้วยส่วนสัดของความสูงมากกว่าความกว้าง โน่นแปลความแหวบนด้าม ข่าวสารจะไม่ผิดกดดันมอบลีบยอมกับแถวขึ้นไป เป็นเหตุให้ผู้ซื้อต้องไถเติบโต เพื่อจะแลดูข่าวสารหมดด้วยกัน กับการ Scrolling ตรงนั้นก็เป็น Gesture หลักสรรพสิ่งที่ถืออยู่จากนั้นเช่นกัน นั่นอุดมประเทืองให้การ Scrolling ดำรงฐานะอันแห่งผู้ซื้อที่ถือคุ้นเคย กับหวานคอแร้งดามการใช้งาน จริง ๆ เลี่ยนหามิได้แค่ด้ามนะครับ ถ้าข้อมูลที่แสดงบนบานศาลกล่าวหน้าจอตรงนั้นมีความแถวมาก ๆ งาน Scrolling ผ่าน Touch Screen หรือว่า Mouse Wheel นั้น ล้วนแล้วไปด้วยสะดวกกว่าการ Click แม่นมั่น แต่ว่าก็ต้องประหวัดสัณฐานการใช้งานด้วยนะครับ หามิได้ตวาด Infinite Scorlling จักเหมาะกับด้ามจี่ลำพังเป็นนิจศีล Pagination ก็สมรรถดีไซน์มอบใช้งานบนบานด้ามคว้า แต่ต้องหวนเหตุลักษณะของข้อมูลเสริมด้วยAirbnb ก็เลือกคัดชดใช้ Pagination แจกเหมาะสำหรับการละครเอาท์พุตบนที่ถือจุดอ่อน 1 : สมรรถนะกับประกาศที่มากขึ้นDesigner แห่งหนอ่านลงมาจนกระทั่งณ เวลานี้ดำรงฉบับร่าง “เห้ย นี่มันหามิได้เหตุที่ดีฉันจำต้องกลุ้มใจนี่หว่า”…มันสมองมันสมองข้าพเจ้าจักบอกแหวมันไม่แน่ๆขอรับ แก Nick Babich นั้นแววบอกกับเราไว้ดุ “Page-loading speed is everything for good user experience” — Nick Babichซึ่งกระผมตระกูลจักตกลงกับดักอันตรงนี้ ไม่ว่าจะเป็นระบบไหนก็ตามอันนี้เป็นสิ่งแห่งประธานยิ่งนัก เต็มที่ทำเอาผู้ซื้อปลงใจได้เลยดุ จักชดใช้หรือเปล่าใช้ ระบบสิ่งของดีฉัน ถ้าเราชดใช้เทคนิค Infinite Scrolling ชิ้นหนึ่งแห่งหนจำเป็นต้องตื่นแจกบริสุทธ์ตกว่า Page Performance สูงสุดมีการโหลดประกาศยิ่งนักขึ้นเปรี่อย ๆ Page Performance ก็จักสูงสุดดรอคอยปล่อยวาง สมมติว่าใครคุ้นโจ้ Facebook บนบานศาลกล่าวที่ถือราคาย่อมเยา อาจจะชินพบโจทย์ไถ Feed จรเรื่อย ๆ แล้วรู้สึกดุมันไม่ทันเวลายอม หรือว่าบางคราวมันก็ดีดออกมาเอง นั่นครอบครองก็เพราะว่า Device Resource เปล่าเพียงพอ เหตุฉะนี้ถ้าหากเลือกคัดชดใช้ Infinite Scrolling ก็ต้องตื่นเรื่องงานเปลืองทรัพยากรสรรพสิ่ง Device อีกด้วยจุดอ่อน 2 : สถานะของสิ่งแห่งหนผู้ซื้อค้นหาข้าพเจ้าชินใช้ E-Commerce เจ้านายเอ็ดบนมือถือ เพื่อที่จะคัดเลือกจ่ายของ ซึ่งเจ้าตรงนี้แววก็ใช้ Infinite Scrolling กับงาน Discover ของซื้อของขายใน Keyword แห่งฉันค้นหา ใช่ครับเพลิดเพลินใจกับดักการควานสิ่งของจนกระทั่งคว้าพบเห็นสินค้าที่กระผมมุ่งหวัง จากนั้นก็ป้ำๆ เป๋อๆจากอ่อนปโดยไม่ได้ตั้งใจ ครั้นกระผมกลับมาเข้าไปหานวชาตอีกรอบ ข้าพเจ้าควานไม่ประสบแล้วครับ ทึ่มดุมันสิงสู่หน้าตาใด หรือว่าจำต้อง Scorll ไปกี่ทอผ้าหนจดจะประสบ นี่คือว่าอีกจุดอ่อนเอ็ดของ Infinite Scrolling สมมติว่าผู้ซื้อเค้าขูดรีดจนพบเห็นประกาศแห่งหนแววประสงค์หลังจากนั้น ลูกค้าจะไม่สามารถเซฟดวงตรงนั้นไว้คว้าพ้น สมมติว่าเป๋อดับ ไม่ก็กลับมาเข้ามาใหม่ ผู้ซื้อจักจำต้องเริ่มต้นใหม่ตั้งแต่แรก ซึ่งเลี่ยนจะก่อสร้างความหงุดหงิดมอบกับผู้บริโภคจัง แต่ว่ามันก็ประกอบด้วยวิธีไขปัญหาครับผม การทวี Bookmark ของซื้อของขายยอมไปใน Wishlist หรืองาน Pin ของ Pinterest ก็ครอบครองอีก Pattern หนึ่งที่ใช้ห้ามกับดัก Infinite Scrolling ถ้าหากต้องใช้คืนเทคนิคนี้จริงๆ ๆ ก็น่าสอดส่าย Pattern ลงมารองโจทย์นี้เช่นกันหนอขอรับPaginationpagination ก็ตรงๆติดตามชื่อเกินขอรับ ซึ่งมันเป็น UI Pattern ที่จะแยกสาระออกลูกเป็นเค้าหน้า ๆ เพราะว่าในแต่ละเค้าหน้าก็จะกำหนดวางชัดแจ๋วแหวประกอบด้วยข่าวสารแสดงสิงสู่เท่าไร ดีฉันโดยมากประสบ UI Pattern อย่างนี้กับดักก๊กข้อมูลแห่งหนเป็นตาราง ไม่ก็กระทั่ง Search Engine ราวกับ ๆ ชนิด Google เองก็ยังชดใช้ Pattern นี้ด้วยว่าการเสาะแสวงข้อมูลทั่วไป ฉันมาดูข้อดีข้อเสียกักคุมเป็นต่อข้อได้เปรียบ 1 : เหมาะกับงานค้นหาต้นร่างเจาะจงเวลาลูกค้าจำต้องแสวงกระไรสักประการฐานเป้าวางณจิตใจหลังจากนั้น งานคัดเลือกใช้คืน Pagination นั่นจะทำเอาลูกค้ารับทราบถึงลำดับสูง-ต่ำข่าวสาร และวรรณะคว้า ก็เพราะว่าผู้ซื้อจักไม่ได้อ่านกับหลั่งไหลจากไปติดสอยห้อยตามข่าวสาร ก๊กแววจะอ่านแทบทั้งปวงตัวหนังสือเพื่อจะสอดส่ายที่สิ่งสถานที่พวกเค้าหมายมั่น นั่นแล้วก็เป็นต้นเหตุดุไฉน Google จดเลือกเฟ้นชดใช้ Pagination แทนที่จะใช้คืน Infinite Scrollลูกค้ารู้ว่าตอนนี้อยู่แห่งใด กับหมวดสรรพสิ่งข้อมูลใหญ่สัดส่วนไรอาจมีคนโต้เถียงเกล้าผมดุ สำคัญา !! เราใช้ Google ฉบับร่างเที่ยวหาข้อมูลจรเรื่อย ๆ มิใช่หรอ ทำไมไม่ใช้ Infinite Scrolling ผลัดเปลี่ยนแหละ นั่นเป็นเพราะ Google หมายมั่นจักจัดโชว์ข้อมูลสถานที่สำคัญ และเกี่ยวข้องกับดัก Keyword แห่งเราค้นหา กับอีกต่างหากโหยจ่ายเข้าใจอีกตวาดข้อมูลที่อีฉันเที่ยวหานั้นสิงสู่สถานที่วรรณะไรสิ่งของเว็บไซต์ เพื่อให้ผู้เที่ยวหาสมรรถกลับสืบหาใหม่อีกครั้งคว้าคล่องขึ้น ด้วยกันการบ่งบอกจำนวนสรรพสิ่งเค้าหน้า ยังทำเอาผู้ที่สืบหานั้นแจ้งตวาดจะจำต้องกินเวลาเท่าไหร่ในงานสืบหา Result List ขนมจาก Keyword ที่ตัวเองจัดพิมพ์ลงไป ซึ่งนี้เองเป็นข้อดีที่ Pagination ประกอบด้วยแต่ Infinite Scrolling สร้างไม่ได้ข้อได้เปรียบ 2 : รู้สัดส่วนสรรพสิ่งหมวดข่าวสารงานคัดเลือกชดใช้ Pagination ตรงนั้นดุจงานแรมรอนแห่งแจ้งว่าเลี่ยนจักสิ้นสุดยอมสถานที่ตรงไหน จบเมื่อไหร่ การบ่งบอกจำนวนใบหน้าจักทำเอาผู้ใช้รู้ดุก๊กเค้ากำลังค้นหาในพวกข่าวสถานที่ใหญ่สัดส่วนไหน เป็นเหตุให้เหล่าเค้าปลงใจได้มาสะดวกขึ้นดุควรจะสร้างยังไงกับข่าวเหล่านี้ถัดไปครั้นสืบหา Nintendo Switch แห่ง Amazon เกล้าผมจักรู้เกินตวาดประการโหดร้ายสุดก็ต้องหาทั้งปวง 400 ใบหน้า โน่นอาจจะทำให้ข้าพเจ้าท้อถอย หรือคงมากขึ้น Keyword แห่งงานสืบหา เพื่อจะเป็นเหตุให้หมวดข้อมูลกระจิดริดยอม เมื่อฉันเข้าใจตวาดจุดสิ้นสุดอยู่ที่ไหน นั่นจักทำเอาฉันรู้ตวาดสมรรถจำกัดเลี่ยนคว้า — David Kierasนอกจากอีกทั้งมีการค้นคว้าแห่งบอกอีกดุ การแห่งผู้ซื้อปะทะขีดคั่นในความงานค้นหาข่าว แต่ข่าวเหล่านั้นมีราคากับดักผู้ใช้ จักทำให้ก๊กแววปลงใจคว้าสะดวกขึ้นไป เพราะว่าก๊กเค้าจักเข้าใจดุสิ่งแห่งพลังค้นหาเลี่ยนอยู่แห่งหมวดข่าวสารพวกนั้นหรือไม่ เอ่ยปากสะดวก ๆ ถือเอาว่าการขีดคั่นข่าวแยกออกเล็กมากยอมและยุ่งเกี่ยวกับงานสืบหา จะทำเอาลูกค้ารู้แฮปปี้งอกงามข้อด้อย 1 : จำนวนรวมสิ่งของข่าวสารที่แสดงแห่งแต่ละหน้าข้อด้อยเสา ๆ ของ Pagination แห่งเกล้าผมเผชิญลงมาน่าจะเป็นกรณีสรรพสิ่งจำนวนรวมสาระที่จัดโชว์แห่งแต่ละเค้าหน้า ก็เพราะว่า Action สรรพสิ่งผู้ใช้ถือเอาว่าจักต้องกดปุ่ม Next ครั้งใดก็ตามเปล่าเผชิญข่าวสารในเค้าหน้ายุคปัจจุบัน ซึ่ง Action Cost รุ่งเรืองกว่างาน Scroll ด้วยกันการกดปุ่ม Next บ่อย ๆ ก็จะส่งผลแย่ต่อ User Experience แน่นอน แต่ช่วงปัจจุบันก็ประกอบด้วยการเยียวยาข้อเสียตรงนี้อีกด้วยงานให้ลูกค้าสามารถจำกัด Page Size ได้ด้วยตัวเอง ซึ่งก็จะมี Preset ลงมาจ่ายสิงสู่หลังจากนั้นเป็นพื้นโคน เช่น 50, 100, 150 หมายกำหนดการ/ใบหน้า เป็นอาทิรวมความส่งท้ายโดยหลัก ๆ ต่อจากนั้นเกล้าผมหิวแยกออกทั้งหมดลองสำรวจก่อนขอรับว่า หน้าจอ หรือ Flow สถานที่อีฉันออกแบบตรงนั้นประกอบด้วยรูปพรรณสัณฐานการใช้งานฉบับร่างไหน ถ้าหากสำเร็จสืบหาฉบับร่าง Discover แห่งช่างจ่ายลูกค้าไหลจรกับข่าวสารแห่งโหลดเข้ามาเรื่อยๆ ๆ ก็ใช้คืน Infinite Scroll ครับผม แม้ว่าถ้าหากได้ผลสืบหาฉบับร่างตามลำดับ และุเฉพาะก็คัดเลือกใช้คืน Paginationอธิบายสรรพสิ่ง Google เพิ่มพูนประการแห่งบอกไปต่อจากนั้นตวาด Google คัดเลือกที่จะชดใช้ Pagination ด้วยการค้นหาธารณะ เพราะงานสืบหาจะดำรงฐานะที่เอกลักษณ์ระบุ และเน้นลำดับพอให้ผู้ใช้สามารถระลึก และเข้าถึงจุดสำคัญจิตรเลขา ก็เพราะว่าสัณฐานการค้นหาข่าวสารจะเสร็จภาพร่างสแกนแจ้น ๆ ยิ่งกว่าอย่างไรก่อนกำหนดจะใช้ก็พิสูจน์สำรวจมองดูห้ามนิดหน่อยหนอครับผมตวาดเราจัก Deliver ข่าวสารให้กับดักผู้ซื้อแห่งรูปพรรณสัณฐานไร ถ้าหากเปล่าสำคัญใจลองยกมาจรทดลองแลดูครับผม ก็จักช่วยได้เติบโตครับ เสริมเล็ก ๆ บางตา ๆถ้าหากเราพิสูจน์ตรวจุบริสุทธ์ ๆ หนอครับ เว็บไซต์ต่าง ๆ สถานที่ประกอบด้วยสัณฐานของข่าวดำรงฐานะ User Generated ส่วนมากจะใช้คืน Infinite Scrolling เป็นต้นว่า Twitter, Facebook, Youtube แม้ว่าเว็ตอนี่ครอบครองฉบับร่าง Goal-Orineted ส่วนมากจักใช้คืน Pagination เช่น Google Text Search, Mail กับเว็บก๊ก E-Commerce ดุจ ๆ โดยมากก็จักมีทั่ว Infinite Scroll กับ Pagination ขึ้นอยู่บริบทของการใช้งาน กับ E-Commerce บางอันอีกทั้งดำรงฐานะ User Generated Content อีกด้วยครับเชิงอรรถUX: Infinite Scrolling VS Pagination — Nick BabichWhy does Google use pagination instead of progressive loading ?ข่าวสารคนเขียน Arnon ChonrawutUX/UI Designer @ Billmeติดตามผลงานอื่นสรรพสิ่งคนเขียนแกนี้เหมาะ https://medium.com/@ArnonC