การออกแบบสำหรับเว็บไร้เบราว์เซอร์

เผยแพร่แล้ว: 2022-03-10
สรุปโดยย่อ ↬ ผู้ใช้ไม่ได้สนใจแม้แต่น้อยว่าเทคโนโลยีเป็นเทคโนโลยีดั้งเดิม เว็บแอปที่ติดตั้งหรือเว็บไซต์ สิ่งที่ทำให้ผู้ใช้มีส่วนร่วมและทำให้ผู้ซื้อเปลี่ยนใจคือประสบการณ์จริง ในบทความนี้ Mitch พิจารณา PWAs บนอุปกรณ์ Android อย่างละเอียดและอธิบายวิธีที่เราสามารถปูทางสู่ยุคใหม่ของการท่องเว็บแบบไร้เบราว์เซอร์

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

เพิ่มไปที่หน้าจอหลัก
ขั้นตอนการติดตั้ง "เพิ่มไปที่หน้าจอหลัก" ดังที่แสดงบนเว็บไซต์มือถือของนักพัฒนา Google Chrome (แหล่งที่มาของรูปภาพ) (ตัวอย่างขนาดใหญ่)

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

ในบทความนี้ เราจะกล่าวถึงเคล็ดลับและคำแนะนำสำหรับการออกแบบและพัฒนาแอปพลิเคชันเว็บแบบโปรเกรสซีฟ (PWA) โดยเฉพาะที่เพิ่มลงในหน้าจอหลักบนอุปกรณ์ Android แต่ก่อนอื่น เรามาดูตัวอย่างสองสามตัวอย่างและสร้างกรณีการประปาส่วนภูมิภาค

จากเว็บแอปไปจนถึงแอปเดสก์ท็อป

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

ข้ามไปยังบทความที่เกี่ยวข้อง ↬

การเพิ่มขึ้นของประสบการณ์การชอบแอป

พูดง่ายๆ ก็คือ PWAs คือเว็บไซต์ที่มีลักษณะและความรู้สึกเหมือนกับแอปพลิเคชันดั้งเดิม ในการพูดของเขาที่งานประชุมนักพัฒนา Google I/O Rahul Roy-Chowdhury รองประธานฝ่ายผลิตภัณฑ์ของ Google อธิบายว่าพวกเขาเป็น "ประสบการณ์เว็บที่ดีขึ้นอย่างมาก… ซึ่งผู้ใช้ชื่นชอบและมีส่วนร่วมมากขึ้น"

เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

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

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

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

“เพิ่มในหน้าจอหลัก” คืออะไร และคุ้มค่าไหม

“เพิ่มไปที่หน้าจอหลัก” เป็นคุณลักษณะที่ติดตั้ง PWA ลงในหน้าจอหลักของ Android ทำให้ PWA สามารถเข้าถึงได้ทันทีโดยที่ผู้ใช้ไม่จำเป็นต้องเปิดเบราว์เซอร์และพิมพ์ URL หรือใช้เครื่องมือค้นหา (หมายเหตุด้านข้าง: แม้ว่า iOS Safari จะมีคุณสมบัติที่คล้ายกันตั้งแต่ iPhone รุ่นแรกสุด แต่ผู้ใช้ไม่ได้เสนอให้จำลองพฤติกรรมของแอปมากนัก ด้วยเหตุนี้ เวอร์ชันของ Safari จึงไม่ได้เป็นส่วนหนึ่งของบทความนี้)

ตามที่ปรากฏในรายการตรวจสอบ Lighthouse ของ Google นั้น PWA ที่มีความสามารถนี้มีคะแนนสูงกว่า และด้วยเหตุนี้ จึงมีแนวโน้มที่จะมีอันดับที่ดีขึ้นในผลการค้นหา

Google Lighthouse
"เพิ่มในหน้าจอหลัก" เป็นส่วนหนึ่งของรายการตรวจสอบ Lighthouse ของ Google (แหล่งที่มาของรูปภาพ) (ตัวอย่างขนาดใหญ่)

ใช้ Twitter Lite ซึ่งเป็น กปภ. ตามเนื้อผ้า Twitter พบว่าเป็นการยากที่จะดึงดูดผู้ใช้นับล้านอีกครั้งบนเว็บบนมือถือ นับตั้งแต่เปิดตัวข้อความแจ้ง "เพิ่มลงในหน้าจอหลัก" ใน Twitter Lite PWA พบว่ามีผู้ใช้รายวันที่ไม่ซ้ำกัน 250,000 รายเปิดเว็บแอปจากหน้าจอหลักโดยเฉลี่ยสี่ครั้งต่อวัน

Twitter Lite
"เพิ่มไปที่หน้าจอหลัก" ของ Twitter Lite และ PWA ที่ตามมาเปิดตัวในโหมดเต็มหน้าจอ (ตัวอย่างขนาดใหญ่)

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

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

แอปพลิเคชั่นเว็บโปรเกรสซีฟเป็นเพียงเว็บไซต์ที่รวมเป็นแอพใช่หรือไม่

โดยพื้นฐานแล้วใช่และทำไมไม่? 90% ของนาทีบนอุปกรณ์เคลื่อนที่ถูกใช้ไปกับแอพ โดยมีอัตราการแปลงที่ดีขึ้น 120% ในภาคการค้าปลีก

ข้อมูล: รายงาน "The State of Mobile Commerce 2016" ของ Criteo (แหล่งรูปภาพ) (ตัวอย่างขนาดใหญ่)

สถิติเหล่านี้เป็นสถิติที่จะนำผู้ค้าปลีกทุกรายไปสู่เส้นทางการพัฒนาแอพเนทีฟ อย่างไรก็ตาม ด้วยค่าใช้จ่ายเฉลี่ยของแอพที่มาพร้อมเครื่องซึ่งอยู่ที่ประมาณ 270,000 ดอลลาร์ “เพิ่มไปที่หน้าจอหลัก” จึงเป็นอีกทางเลือกทางการเงินที่น่าสนใจ

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

  • โหลดเร็วมั้ย?
  • มันทำงานออฟไลน์หรือไม่
  • การนำทางเป็นแบบทันทีหรือไม่
  • มันรวมเข้ากับอุปกรณ์ได้อย่างลงตัวหรือไม่?

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

อะไรทำให้ประสบการณ์เหมือนแอป

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

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

  • การเปลี่ยนหน้าทันที
  • ประสิทธิภาพการรับรู้สูง
  • การเข้าถึงแบบออฟไลน์
  • การรวมอุปกรณ์เต็มรูปแบบ
  • การนำทางสไตล์แอพ
  • ปุ่มย้อนกลับ;
  • การแบ่งปันการกระทำ;
  • คัดลอก URL พิมพ์และไปข้างหน้า

พร้อมที่จะดำน้ำใน? มาดูทีละอย่างกัน

การเปลี่ยนหน้าทันที

ผู้ใช้คาดหวังว่าจะสามารถเข้าและใช้งานแอปได้อย่างรวดเร็ว โดยไม่ต้องรอให้โหลดเนื้อหาใหม่หลังจากการโต้ตอบแต่ละครั้ง

แก้ไขด้วย กปภ

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

PWA . สูตรบริสุทธิ์
การเปลี่ยนหน้าอย่างรวดเร็วใน PWA ของ Pure Formulas (ตัวอย่างขนาดใหญ่)

การรับรู้ประสิทธิภาพ

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

แก้ไขด้วย กปภ

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

Flipkart PWA
ตัวโหลดแอปในตัวช่วยให้เปลี่ยนเนื้อหาได้อย่างราบรื่น ดังที่เห็นใน PWA ของ Flipkart (ตัวอย่างขนาดใหญ่)

ทำงานแบบออฟไลน์

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

แก้ไขด้วย กปภ

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

น้ำยาเมอร์ลิน
เรียกดูแบบออฟไลน์ ตามที่แสดงบน Merlin's Potions (สาธิต PWA ของ Mobify) (ตัวอย่างขนาดใหญ่)

บูรณาการอุปกรณ์เต็มรูปแบบ

มีบางตำแหน่งในอุปกรณ์ที่ผู้ใช้คาดหวังว่าจะค้นหาและจัดการแอปของตนได้

กปภ

PWA ที่เพิ่มลงในหน้าจอหลักจะแสดงทุกที่ที่คุณคาดหวังว่าแอป Android จะปรากฏขึ้น ซึ่งรวมถึงตัวเปิดใช้แอป ตัวสลับงาน และการตั้งค่าระบบ สิ่งนี้ยังช่วยให้แน่ใจว่าแอพอื่นๆ ที่เชื่อมโยงไปยังเพจใน กปภ. เช่น การค้นหาโดย Google หรือลิงค์โซเชียลมีเดีย จะเปิดแอพนั้นขึ้นมา ไม่ใช่เบราว์เซอร์ การแจ้งเตือนแบบพุชยังปรากฏราวกับว่ามาจากแอปที่มาพร้อมเครื่อง

Trivago PWA
PWA ของ Trivago ดังที่แสดงในตัวเปิดใช้แอป การค้นหาอุปกรณ์ และการตั้งค่าระบบ (แหล่งที่มาของรูปภาพ) (ตัวอย่างขนาดใหญ่)

การนำทางสไตล์แอพ

แอพแบ่งปันแนวทางทั่วไปในการนำทาง โดยทั่วไป แถบส่วนหัวจะแสดงชื่อเรื่องของส่วนปัจจุบันที่กึ่งกลาง ปุ่มย้อนกลับอยู่ที่ด้านบนซ้าย และการดำเนินการตามบริบทใดๆ (การชอบ การแบ่งปัน ฯลฯ) อยู่ที่มุมขวาบน

ยังไม่มีวิธีแก้ไข กปภ

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

เว็บไซต์มือถือ Etsy
เว็บไซต์บนมือถือของ Etsy (ซ้าย) และแอป Android (ขวา) แสดงให้เห็นว่าส่วนหัวของแอปโดยทั่วไปแตกต่างกันอย่างไรในการออกแบบ — แบบหลังชอบการดำเนินการตามบริบท เช่น การแชร์ผ่านองค์ประกอบทั่วโลก เช่น โลโก้และลิงก์ลงชื่อเข้าใช้ (ตัวอย่างขนาดใหญ่)

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

ปุ่มย้อนกลับ

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

ปุ่มย้อนกลับ
ปุ่มย้อนกลับเป็นการโต้ตอบที่มีประโยชน์ทั้งใน Chrome iOS และ Opera สำหรับเว็บเบราว์เซอร์ของ Android (ตัวอย่างขนาดใหญ่)

สารละลาย

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

เมนูและตำแหน่งปุ่มย้อนกลับ
เมนูที่เสนอและการวางปุ่มย้อนกลับใน กปภ. เพิ่มไปยังหน้าจอหลัก (ตัวอย่างขนาดใหญ่)

การแบ่งปันการกระทำ

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

เบราว์เซอร์ Chrome และ samsung
อินเทอร์เน็ตเบราว์เซอร์ทั้ง Chrome และ Samsung มีการแบ่งปันที่อยู่เบื้องหลังการซ้อนทับเมนู (ตัวอย่างขนาดใหญ่)

สารละลาย

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

ไอคอน "เพิ่มเติม" เป็นรูปแบบ Android ที่ใช้เพื่อระบุตัวเลือกที่ล้น ลองเพิ่มการดำเนินการแชร์หลังเมนูแบบนี้ เป็นไปได้ที่จะทริกเกอร์กล่องโต้ตอบการแชร์ดั้งเดิมของ Android โดยใช้ Web Share API (ซึ่งในขณะที่เขียนเป็นคุณลักษณะเฉพาะสำหรับ Chrome และยังไม่ได้ติดตามมาตรฐาน)

นำเสนอเมนูซ้อนทับ
นำเสนอเมนูซ้อนทับพร้อมข้อความแจ้งการแชร์ทั่วโลก (ตัวอย่างขนาดใหญ่)

คัดลอก URL, พิมพ์, ไปข้างหน้า

การดำเนินการทั่วไปที่น้อยกว่า เช่น การคัดลอก URL และการพิมพ์ เป็นฟังก์ชันพื้นฐานของเบราว์เซอร์และไม่ควรมองข้าม

คัดลอก URL
การคัดลอก URL เป็นการโต้ตอบที่มีประโยชน์ในสถานการณ์ต่างๆ (ตัวอย่างขนาดใหญ่)

สารละลาย

วิธีง่ายๆ ในการนำเสนอฟังก์ชันคัดลอก URL และการพิมพ์คือการใช้ Web Share API (อีกครั้ง ณ เวลาที่เขียน รองรับเฉพาะใน Google Chrome) หรืออาจนำเสนอเป็นตัวเลือกที่แยกจากกันในเมนูรายการเพิ่มเติม จากนั้นเมนูนี้สามารถขยายเพื่อรวมการดำเนินการไปข้างหน้าหรือสิ่งอื่นที่จะได้รับประโยชน์จากตำแหน่งถาวรในแถบส่วนหัว (เช่น การเข้าสู่ระบบและออกจากระบบ)

ตัวเลือกการแบ่งปัน
คุณสามารถเข้าถึงการดำเนินการต่างๆ เช่น การคัดลอก URL และส่งไปยังเครื่องพิมพ์ได้ผ่านตัวเลือกการแชร์ ซึ่งแสดงให้เห็นที่นี่โดยใช้ Web Share API (ตัวอย่างขนาดใหญ่)

วิธีทำให้มันใช้งานได้จริงในโลกแห่งความจริง

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

ส่วนหัวติดหนึบ การกระทำต่อเนื่อง

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

ส่วนหัวติดหนึบ
PWAs สมัยใหม่ AliExpress, Flipkart และ Snapdeal มีความคล้ายคลึงกันในการออกแบบแถบส่วนหัว (ตัวอย่างขนาดใหญ่)

แจ้งอย่างชาญฉลาด

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

เพิ่มไปที่หน้าจอหลักใน Flipkart
ตัวอย่างข้อความแจ้ง "เพิ่มไปที่หน้าจอหลัก" ของ Flipkart ในหน้ายืนยันคำสั่งซื้อ (ตัวอย่างขนาดใหญ่)

ความเครียดและการทดสอบ

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

เพิ่มในการทดสอบที่บ้าน
ต้นแบบเชิงโต้ตอบนี้ใช้เพื่อทดสอบรูปแบบที่เสนอ (ตัวอย่างขนาดใหญ่)

รองรับ “Add To Homescreen” ที่ไหน?

Apple ได้ประกาศว่าจะสนับสนุนพนักงานบริการ แต่ก็ยังมุ่งมั่นที่จะทำให้ App Store เป็นสถานที่ที่น่าสนใจสำหรับนักพัฒนาแอพที่ใช้เวลาและเงิน นี่อาจเป็นสาเหตุที่เบราว์เซอร์ Safari ของ iOS ช้าในการปรับใช้ PWA และการท่องเว็บแบบไม่มีเบราว์เซอร์ แม้ว่าจะมีความก้าวหน้าจากคู่แข่งก็ตาม

อินเทอร์เน็ตเบราว์เซอร์ของ Samsung ได้พัฒนาพรอมต์ "เพิ่มในหน้าจอหลัก" แบบถาวรภายในแถบเบราว์เซอร์ เพื่อให้ผู้ใช้ทราบเสมอว่าจะค้นหาได้จากที่ใด

ซัมซุงพรอมต์
ตำแหน่งถาวรของ "เพิ่มในหน้าจอหลัก" ในอินเทอร์เน็ตเบราว์เซอร์ใหม่ของ Samsung (แหล่งที่มาของรูปภาพ) (ตัวอย่างขนาดใหญ่)

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

หน้าต่างจิ๊กสเปซ
PWA ของ Jig.space จะแสดงเป็นแอปเดสก์ท็อปที่ดาวน์โหลดได้ใน Windows Store (ที่มาของรูปภาพ) (ตัวอย่างขนาดใหญ่)

บทสรุป

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

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