วิธีทำปุ่มย้อนกลับบนหน้าเว็บ สร้างปุ่ม "ย้อนกลับ" กลับไปยังหน้าก่อนหน้า

ในบทความนี้ เราจะมาดูกันว่าคุณสามารถสร้างปุ่ม "ย้อนกลับ" ได้ทุกที่ที่คุณต้องการได้อย่างไร ฉันคิดว่าจากชื่อของปุ่มมันชัดเจนอยู่แล้วว่าจะเกิดอะไรขึ้นเมื่อคุณคลิกมัน ปุ่มดังกล่าวสามารถแทรกได้ทั้งในหมวดหมู่และในวัสดุนั้นเอง ทุกอย่างทำได้ค่อนข้างง่าย

มีหลายตัวเลือกสำหรับวิธีที่คุณสามารถเพิ่มปุ่มได้ แต่โดยส่วนตัวแล้วฉันใช้วิธีเดียวเท่านั้น กล่าวคือ ตัวเลือกที่สามจากสามตัวเลือกที่ฉันเสนอ อีกหน่อยฉันจะบอกคุณว่าทำไม

เรามีทางเลือกอะไรบ้าง:

ข้อดีของตัวเลือกที่สามคือ หากคุณต้องการแก้ไขข้อความบนปุ่มหรือเปลี่ยน/เพิ่มคลาสสไตล์ คุณจะต้องแก้ไขโมดูลเองเท่านั้น และไม่ต้องแก้ไขปุ่มในทุกตำแหน่งที่โมดูลนั้นอยู่

ดังนั้นในไซต์ใดไซต์หนึ่งของฉัน ฉันใช้ตัวเลือกที่สาม:

โมดูล “โค้ด HTML” ถูกสร้างขึ้นและโค้ดของปุ่มถูกแทรกไว้ที่นั่นโดยใช้ส่วนขยาย “Sourcerer” ซึ่งทำให้สามารถเพิ่มโค้ดใดๆ ลงในวัสดุได้

รหัสปุ่มทำงานของฉัน:

กลับไป

ข้อความได้รับการตกแต่งด้วยลูกศรเล็กน้อยโดยใช้ส่วนประกอบจาก Bootstrap 3 และตัวปุ่มนั้นได้รับการออกแบบผ่าน CSS

การศึกษาการใช้งานจำนวนมากแสดงให้เห็นว่าผู้ใช้ (ทั้งใหม่และมีประสบการณ์) มักใช้ปุ่ม "ย้อนกลับ" ในเบราว์เซอร์ น่าเสียดายที่นักออกแบบอินเทอร์เฟซและนักการตลาดไม่ค่อยพิจารณาว่าสิ่งนี้อาจมีผลกระทบต่อการใช้งานอย่างไร โมเดลที่ทันสมัยการออกแบบเว็บที่ใช้แอพพลิเคชั่น แอนิเมชั่น วิดีโอ ฯลฯ บ่อยครั้งที่โครงสร้างทางเทคนิคของเลย์เอาต์เหล่านี้ไม่ตอบสนองอย่างถูกต้องต่อฟังก์ชัน "ย้อนกลับ" ทำลายรูปแบบทางจิตของผู้ใช้ และทำให้ประสบการณ์ของผู้ใช้แย่ลง

ผลที่ตามมาอาจเลวร้าย: ในระหว่างการทดลอง การตอบสนองที่ไม่เพียงพอของไซต์ต่อการกดปุ่ม "ย้อนกลับ" เป็นสาเหตุที่ทำให้ผู้ใช้จำนวนมากออกไป โดยมีการละเมิดและบทวิจารณ์ที่ไม่ประจบสอพลอ ในกรณีส่วนใหญ่ แม้แต่ผู้มีผมหงอกผู้มีเกียรติก็อารมณ์เสียอย่างมาก

จากบทความนี้คุณจะได้เรียนรู้:

• สิ่งที่ผู้ใช้คาดหวังจากปุ่ม "ย้อนกลับ"
• 5 ข้อผิดพลาดที่พบบ่อยที่สุดคืออะไร
• วิธีแก้ปัญหาง่ายๆ เหล่านี้

วิธีแก้ปัญหานั้นง่ายมาก แต่มักจะถูกละเลยแม้แต่กับแบรนด์ที่ใหญ่ที่สุดก็ตาม เราจะแก้ไขข้อผิดพลาดนี้หรือไม่?

ความคาดหวังของผู้ใช้

กล่าวโดยย่อ: ผู้ใช้คาดหวังปุ่ม "ย้อนกลับ" เพื่อแสดงสิ่งที่พวกเขารับรู้เหมือนหน้าก่อนหน้า คำว่า “รับรู้” มีความสำคัญมาก เนื่องจากมีความแตกต่างอย่างมากระหว่างสิ่งที่ดูเหมือนเป็นหน้าก่อนๆ และในทางเทคนิค

คำถามเกิดขึ้น: ผู้ใช้ตีความว่าเป็นหน้าใหม่อย่างไร ในกรณีส่วนใหญ่ หากหน้าเว็บมีความแตกต่างกันอย่างมีนัยสำคัญทางสายตา แต่มีความเกี่ยวข้องกับไซต์ทางแนวคิด หน้านั้นก็จะถูกมองว่าเป็นหน้าใหม่ ดังนั้นจึงเป็นเรื่องสำคัญมากที่จะต้องตรวจสอบว่าไซต์ประมวลผลองค์ประกอบเชิงโต้ตอบต่างๆ อย่างไร: ไลท์บ็อกซ์ แบบฟอร์ม ตัวกรอง ฯลฯ

ผู้เยี่ยมชมส่วนใหญ่ไม่เข้าใจด้านเทคนิค แต่อาศัยเฉพาะแนวคิดที่เข้าใจง่ายเกี่ยวกับวิธีการทำงานของทรัพยากร ดังนั้นเมื่อพวกเขากดปุ่มย้อนกลับ พวกเขาคาดหวังว่าจะได้หน้าที่พวกเขาได้รับแล้ว ประสบการณ์ที่สำคัญแต่ได้รับหน้าเว็บที่มีอินเทอร์เฟซที่ได้รับการปรับเปลี่ยนเล็กน้อย

ด้านล่างนี้คือองค์ประกอบแบบโต้ตอบที่ได้รับความนิยมมากที่สุดและวิธีใช้งานเพื่อการปรับปรุงสูงสุด ประสบการณ์ผู้ใช้และการใช้งาน

วัตถุประสงค์ของการใช้การวางซ้อนและไลท์บ็อกซ์คือเพื่อแสดงให้ผู้ใช้เห็นองค์ประกอบที่ปรากฏที่ด้านบนของหน้า ดังนั้นผู้ใช้จึงรับรู้องค์ประกอบดังกล่าวเป็นหน้าใหม่และกดปุ่ม "ย้อนกลับ" เพื่อกลับไปยังตำแหน่งเดิม - แต่สุดท้ายพวกเขาก็ไปอยู่ในตำแหน่งที่แตกต่างไปจากที่คาดไว้อย่างสิ้นเชิง นี่เป็นเรื่องน่าเสียดายอย่างยิ่ง เนื่องจากการใช้ไลท์บ็อกซ์มีแต่จะเพิ่มการรับรู้เชิงลบของหน้าเว็บเท่านั้น ผู้ใช้ส่วนใหญ่ไม่ชอบองค์ประกอบเหล่านี้ในไซต์ช็อปปิ้งออนไลน์

การใช้ตัวกรองมักจะเปลี่ยนหน้าและทำให้บุคคลได้รับประสบการณ์ใหม่ ดังนั้น หลังจากการเรียงลำดับ หน้าจะถูกมองว่าเป็นหน้าใหม่ แม้ว่าจะไม่มีอะไรโหลดก็ตาม สิ่งนี้เกิดขึ้นเนื่องจากหลังจากที่ผู้เยี่ยมชมแต่ละคนโต้ตอบกับหน้าร้านค้าออนไลน์ ผลลัพธ์ใหม่จะถูกสร้างขึ้น

ตัวอย่างนี้เน้นย้ำว่าผู้คนไม่ได้คำนึงถึงด้านเทคนิคเมื่อพิจารณา หน้าใหม่แต่ใช้เพียงสัญชาตญาณและการรับรู้ที่เกิดขึ้นเท่านั้น

3. แบบฟอร์มลงทะเบียน/ชำระเงิน

หน้าการชำระเงินถูกมองว่าเป็นหน้าใหม่และที่แย่กว่านั้นคือเป็นกระบวนการที่มีหลายขั้นตอน ซึ่งแต่ละขั้นตอนสามารถยกเลิกได้ด้วยปุ่ม "ย้อนกลับ"

วิธีการนี้อาจทำให้เกิดปัญหาได้ ตัวอย่างง่ายๆ คือบุคคลต้องการย้อนกลับขั้นตอนการกรอกแบบฟอร์มเพื่อแก้ไขข้อมูลที่ป้อน การกดปุ่ม "ย้อนกลับ" จะกลับไปที่ถังขยะและลบข้อมูลที่ป้อนทั้งหมด (!) การระคายเคืองและการออกจากสถานที่นั้นเป็นผลตามธรรมชาติ

เทคโนโลยี AJAX อาจไม่เป็นไปตามความคาดหวังของผู้ใช้: ในทางเทคนิคแล้ว หน้า AJAX แต่ละหน้าอยู่ภายใต้ URL เดียวกัน แต่ปรากฏว่ามีการเปิดหน้าใหม่

ในบริบทของอีคอมเมิร์ซ ผู้ใช้มีการรับรู้ที่ชัดเจนว่าหน้าที่ 3 และหน้าที่ 4 แยกจากกัน และสามารถนำทางจากหน้าที่ 4 ไปยังหน้าที่ 3 ได้โดยใช้ปุ่มย้อนกลับ

ผู้ใช้ยังไม่พร้อมที่จะยอมแพ้ปุ่มย้อนกลับ

เมื่อพิจารณาว่าคุณลักษณะอินเทอร์เน็ตเบราว์เซอร์นี้ใช้กันอย่างแพร่หลายเพียงใด ปัญหาความไม่ตรงกันระหว่างความคาดหวังของผู้ใช้และวิสัยทัศน์ของนักพัฒนาจึงกลายเป็นเรื่องสำคัญและไม่ควรมองข้าม

ผู้ใช้ชอบปุ่ม "ย้อนกลับ" เป็นพิเศษ แอปพลิเคชันมือถือและเว็บไซต์ ตามที่การศึกษาแสดงให้เห็น รุ่นมือถือไซต์ ผู้ใช้ส่วนใหญ่ใช้ฟังก์ชันนี้กับทรัพยากรที่นำเสนอทั้งหมด ยิ่งกว่านั้นการใช้ปุ่มไม่ จำกัด เพียงการย้อนกลับหนึ่งหน้า - บางวิชากดปุ่มมากถึง 15 (!) ครั้งติดต่อกัน

ผู้ใช้พีซียังกดปุ่มบ่อยครั้ง – แต่ไม่มากเท่ากับเจ้าของโทรศัพท์มือถือ เนื่องจากผู้ใช้ คอมพิวเตอร์ตั้งโต๊ะมีการนำทางไซต์ที่สะดวก

สารละลาย

ข่าวดีก็คือ HTML5 มีวิธีแก้ไขปัญหาที่ค่อนข้างง่าย และเรียกว่า HTML5 History API กล่าวอย่างเจาะจงคือ ฟังก์ชัน history.pushState() ช่วยให้คุณเปลี่ยน URL ได้โดยไม่ต้องโหลดหน้าซ้ำ ดังนั้นไซต์จะทำงานตามความคาดหวังของผู้ใช้ที่คลิกปุ่ม "ย้อนกลับ"

สวัสดีตอนบ่าย ฉันมีคำถามเกี่ยวกับวิธีการย้ายปุ่มกลับและวางไว้ข้างปุ่มถัดไปเมื่อทำการสั่งซื้อ ลงก็หยุดทำงาน โค้ดรับผิดชอบ ..

มีวิธีแก้ไข

สวัสดี มีใครช่วยบอกวิธีทำปุ่มย้อนกลับ เช่น ในตะกร้าสินค้า ให้คนสามารถกลับไปยังหน้าก่อนหน้าได้ไหม

แทรกปุ่มทุกที่ที่คุณต้องการลงในเทมเพลต เช่น นี้

+1

เมื่อฉันกดปุ่มย้อนกลับบนเบราว์เซอร์ สไตล์ทั้งหมดดูเหมือนจะหายไปจนกว่าฉันจะรีเฟรชหน้า ธีมเริ่มต้นควรแสดงดังภาพหน้าจอด้านล่าง) บอกฉันว่าปัญหาคืออะไร

สวัสดี ฉันได้สร้างปุ่ม "ย้อนกลับ" ในรถเข็น ไม่ใช่แค่ปุ่ม แต่เป็นเพียงลิงก์ที่มีโค้ด ย้อนกลับตอนนี้เมื่อกลับขึ้นรถเข็นแล้ว...

มีวิธีแก้ไข

สวัสดีตอนบ่าย! ฉันพบปัญหาต่อไปนี้: เมื่อคุณเพิ่มสินค้าลงในรถเข็นและคลิกปุ่ม "ย้อนกลับ" ในเบราว์เซอร์ ข้อมูลเกี่ยวกับสินค้าในรถเข็น (ในบล็อกเพิ่มเติม) จะไม่ถูกบันทึกจนกว่าคุณจะรีเฟรชหน้า เหล่านั้น. ไปที่ไซต์ไป...

ไซต์ที่คุณระบุใช้ปลั๊กอินสำหรับรถเข็น คุณสามารถใช้การส่งสินค้าเพิ่มเติมไม่ใช่ไปที่?html=1 แต่ไปที่?html=1&items=1; รถเข็น

สวัสดีตอนบ่าย ในแต่ละขั้นตอนระหว่างการชำระเงิน จะมีการระบุปุ่ม "ถัดไป" ในหัวข้อ "Supreme" ฉันพบรหัสปุ่ม: