เอกสารนี้อธิบายรูปแบบและแนวคิดการออกแบบต่างๆ เพื่อช่วยคุณเริ่มต้นเส้นทางภาพมุมสูง คุณต้องพิจารณาอย่างรอบคอบเกี่ยวกับวิธีนำเสนอภาพมุมสูงต่อลูกค้าเพื่อให้ผลิตภัณฑ์ได้รับการมีส่วนร่วมในระดับที่ดีและลูกค้าเห็นคุณค่าของผลิตภัณฑ์
มุมมองทางอากาศจะเพิ่มองค์ประกอบที่น่าสนใจให้กับเว็บไซต์ของคุณ โดยแสดงภาพพร็อพเพอร์ตี้และสภาพแวดล้อมจากมุมสูง
เมื่อผู้ใช้เห็นที่พักในแบบ 3 มิติ ก็จะเข้าใจถึงตำแหน่งที่ตั้งและขนาดของที่พักได้ดีขึ้น นอกจากนี้ยังช่วยเน้นองค์ประกอบต่างๆ ของที่พัก เช่น สระว่ายน้ำ อาคารภายนอก หรือลานขนาดใหญ่ นอกเหนือจากองค์ประกอบที่อยู่ใกล้เคียง เช่น ถนน แหล่งน้ำ ภูเขา หรือสวนสาธารณะ
การเพิ่มการมีส่วนร่วม
ภาพมุมสูงจะเป็นปัจจัยที่ทำให้ลูกค้าประทับใจ และเพื่อให้ได้รับประโยชน์อย่างเต็มที่ เนื้อหาต้องค้นพบได้ง่ายที่สุด ในส่วนนี้เราจะพูดถึงรูปแบบการออกแบบการติดตั้งใช้งานบางอย่างสําหรับภาพมุมสูงเพื่อให้บรรลุเป้าหมายนี้
การวางแนววิดีโอ
คุณควรพิจารณาการวางแนวหน้าจอของอุปกรณ์ที่โหลดวิดีโอภาพมุมสูง การแสดงวิดีโอแนวนอนในอุปกรณ์เคลื่อนที่อาจทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี โดยเฉพาะอย่างยิ่งเมื่อดูแบบเต็มหน้าจอ การแสดงวิดีโอโดยใช้สัดส่วนที่ไม่ถูกต้องสำหรับอุปกรณ์จะทำให้คุณสูญเสียพื้นที่จำนวนมากบนหน้าจอ
วิดีโอภาพมุมสูงมีการวางแนวภาพแนวนอนและแนวตั้ง
ด้านล่างนี้เป็นตัวอย่างความแตกต่างระหว่างการเรียกใช้มุมมองทางอากาศบนอุปกรณ์เคลื่อนที่ ตามการวางแนวที่แนะนำ และแนวที่ไม่แนะนำ
นามบัตรลอยที่ฝัง
เมื่อแสดงที่พักหลายแห่งในมุมมองการค้นหาที่พัก คุณควรเพิ่มโฮเวอร์การ์ดที่ฝังไว้เพื่อแสดงวิดีโอภาพมุมสูงพร้อมข้อมูลเพิ่มเติมเกี่ยวกับที่พัก เช่น ที่อยู่และราคาที่วางซ้อนอยู่ด้านบน วิธีนี้ช่วยให้ผู้ใช้เห็นภาพที่พักได้อย่างรวดเร็วและง่ายดายโดยไม่ต้องคลิกไปยังหน้ารายละเอียดที่พัก
ตัวอย่างด้านล่างแสดงเครื่องหมายที่แสดงถึงอาคาร Googleplex ในเมาน์เทนวิว เมื่อคุณวางเมาส์เหนือเครื่องหมายนี้ โฮเวอร์การ์ดจะปรากฏ โดยแสดงวิดีโอมุมมองทางอากาศของพร็อพเพอร์ตี้
คุณเพิ่มเหตุการณ์ onClick ลงในทั้งตัวทำเครื่องหมายและโฮเวอร์การ์ดที่ฝังได้เพื่อนำผู้ใช้ไปยังหน้ารายละเอียดพร็อพเพอร์ตี้ วิธีนี้ช่วยให้ผู้ใช้ดูข้อมูลเพิ่มเติมเกี่ยวกับที่พักและตัดสินใจได้ว่าที่พักเหมาะกับตนหรือไม่
สร้างประสบการณ์การใช้งานที่เหมือนอ่านเรื่องราวสำหรับพร็อพเพอร์ตี้
หากต้องการสร้างประสบการณ์ที่สมจริงสำหรับผู้มีโอกาสเป็นลูกค้า คุณสามารถแสดงที่พักด้วยประสบการณ์ที่เหมือนการอ่านเรื่องราวซึ่งรวมรูปภาพและวิดีโอภาพมุมสูงเข้าด้วยกัน วิดีโอนี้สร้างได้โดยใช้ HTML, CSS และ JavaScript ผสมกัน ซึ่งคล้ายกับภาพสไลด์
ในตัวอย่างด้านบน เราได้ใส่วิดีโอภาพมุมสูงไว้ในภาพสไลด์ 1 ภาพ โดยมีลิงก์ที่ด้านล่างเพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับที่พัก ปุ่มนี้ควรนำผู้ใช้ไปยังหน้ารายละเอียดที่พัก
วิธีการมีดังนี้
- เลือกรูปภาพ เลือกรูปภาพต่างๆ ที่ไฮไลต์คุณลักษณะที่ดีที่สุดของที่พัก
- สร้างวิดีโอภาพมุมสูง
- รวมรูปภาพและวิดีโอเข้าด้วยกันเป็นเรื่องราว
- แชร์เรื่องราวของคุณ แชร์เรื่องราวกับผู้มีโอกาสเป็นผู้ซื้อในเว็บไซต์ หรือแคมเปญการตลาดทางอีเมล
การสร้างประสบการณ์ที่เหมือนกับเรื่องราวให้กับพร็อพเพอร์ตี้ Showcase จะช่วยให้คุณดึงดูดความสนใจของผู้มีโอกาสเป็นผู้ซื้อได้
การเริ่มใช้ภาพมุมสูงเมื่อโหลดหน้าเว็บ
จากการศึกษา UX ของ Google เราพบว่าการมีส่วนร่วมของผู้ใช้สูงสุดเกิดขึ้นเมื่อระบบโหลดมุมมอง 3 มิติโดยค่าเริ่มต้น เนื่องจากนี่เป็นรูปแบบใหม่ที่น่าตื่นเต้น เราจึงต้องการโหลดทันทีที่ลูกค้าต้องการดูรายละเอียดของที่พัก ในส่วนของค่าใช้จ่าย หากคุณดึงข้อมูลวิดีโอภาพมุมสูงจาก API ระบบจะเรียกเก็บเงินจากคุณ เมื่อมีการขอวิดีโอ ให้พิจารณาเล่นอัตโนมัติเพื่อให้ผู้ใช้เห็นประโยชน์
รูปแบบที่ไม่แนะนำ: การซ่อนภาพมุมสูงไว้หลังปุ่มถือเป็นรูปแบบที่ไม่แนะนำเนื่องจากบังคับให้ผู้ใช้ต้องดำเนินการอีกขั้นเพื่อดูภาพ 3 มิติ ซึ่งอาจทำให้ผู้ใช้ไม่พอใจและพลาดโอกาสที่จะได้ใช้ประโยชน์จากมุมมอง 3 มิติ หรืออาจเข้าใจผิดว่าภาพมุมสูงเป็นเนื้อหาแบบคงที่
เราขอแนะนำให้คุณโหลดภาพมุมสูงโดยค่าเริ่มต้นเมื่อลูกค้าต้องการดูรายละเอียดของที่พัก วิธีนี้จะช่วยให้ผู้ใช้ได้รับประสบการณ์ที่ยอดเยี่ยม และมีข้อมูลในการตัดสินใจเกี่ยวกับที่พัก เมื่อออกแบบประสบการณ์การเล่นอัตโนมัติ โปรดทราบว่าวิดีโอภาพมุมสูงมีขนาดมากกว่า 30 MB และอาจโหลดช้าสำหรับผู้ใช้บางราย
หากมีภาพสไลด์เป็นส่วนหนึ่งของหน้าเว็บ คุณสามารถรวมวิดีโอภาพมุมสูงไว้เป็นรายการแรกได้ ซึ่งจะช่วยให้คุณผสานรวมประสบการณ์ 3 มิติเข้ากับการออกแบบเว็บไซต์ที่มีอยู่ได้อย่างง่ายดาย
การวางปุ่มเพื่อโหลดมุมมอง 3 มิตินั้นใช้งานง่าย แต่อาจทำให้การมีส่วนร่วมลดลง Google Maps จะโหลดมุมมอง 3 มิติโดยค่าเริ่มต้น เช่น เมื่อค้นหาตึกเอ็มไพร์สเตต ระบบจะโหลดมุมมอง 3 มิติโดยอัตโนมัติ และคุณจะเห็นภาพบางส่วนขณะที่ยังคงอยู่ในมุมมอง 3 มิติ วิธีนี้เป็นวิธีที่ยอดเยี่ยมในการมอบประสบการณ์ที่สมจริงและน่าสนใจให้แก่ผู้ใช้
การออกแบบปุ่ม
หากเลือกใช้ปุ่มเพื่อเข้าถึงภาพมุมสูง คุณควรพิจารณาสิ่งต่อไปนี้
- สถานที่ตั้ง: ควรจัดกลุ่มปุ่มไว้กับปุ่มอื่นๆ ที่เกี่ยวข้องกับการแมป เพื่อให้ผู้ใช้ทราบว่าปุ่มดังกล่าวเกี่ยวข้องกับสถานที่ตั้งของที่พัก
- การเปลี่ยนภาพ: การเปลี่ยนภาพไปยังวิดีโอควรเป็นไปอย่างราบรื่น หากหน้าเว็บมีส่วนที่แสดงรูปภาพ แผนที่ และ Street View อยู่แล้ว วิดีโอภาพมุมสูงควรแสดงในส่วนเดียวกัน
- การไฮไลต์: เนื่องจากนี่เป็นการเพิ่มสิ่งใหม่ๆ ในหน้าเว็บ การไฮไลต์ปุ่มด้วยแท็ก "ฟีเจอร์ใหม่" หรือภาพขนาดย่อที่เป็นภาพนิ่งของวิดีโอก็จะช่วยได้
- Emphasis: ควรออกแบบปุ่มให้เน้นระดับปานกลางหรือสูงเนื่องจากการกดปุ่มจะทําให้เกิดการดำเนินการที่โดดเด่น Google Material Design มีคำแนะนำบางประการเกี่ยวกับวิธีออกแบบปุ่มโดยมีการเน้นย้ำระดับต่างๆ
เคล็ดลับเพิ่มเติมในการออกแบบปุ่มภาพมุมสูงที่มีประสิทธิภาพมีดังนี้
- ใช้ภาษาที่ชัดเจนและกระชับ ปุ่มควรมีป้ายกำกับอย่างชัดเจนเพื่อให้ผู้ใช้ทราบว่าปุ่มนั้นทําอะไร
- ใช้แบบอักษรขนาดใหญ่ที่อ่านได้ชัดเจน ปุ่มควรมีขนาดใหญ่พอที่ผู้ใช้จะเห็นและคลิกได้อย่างง่ายดาย
- ใช้สีที่ตัดกัน ปุ่มควรมีสีต่างจากข้อความและพื้นหลัง ที่ล้อมรอบปุ่มเพื่อให้โดดเด่น
- ใช้คำกระตุ้นให้ดำเนินการ ปุ่มนี้ควรมีคำกระตุ้นการตัดสินใจที่ชัดเจน เช่น "ดูมุมมองทางอากาศ" หรือ "ดูวิดีโอ"
ข้อควรพิจารณาในการแสดงผล
กำลังโหลดวิดีโอ
คุณอาจต้องคำนึงถึงการเชื่อมต่อที่ช้าลงด้วยการแสดงตัวอย่างภาพนิ่งของวิดีโอ และโหลดประสบการณ์การใช้งานแบบเต็มเมื่อผู้ใช้โต้ตอบ เช่น คลิก นอกจากวิดีโอภาพมุมสูงแล้ว คุณยังมีสิทธิ์เข้าถึงภาพปกที่สามารถใช้เพื่อแสดงวิดีโอดังกล่าวได้ด้วย
นอกจากนี้ คุณยังเข้าถึงวิดีโอที่มีความละเอียดต่างกันได้ด้วย เพื่อใช้กลยุทธ์ในการลดเวลาที่ผู้ใช้ต้องรอให้ประสบการณ์โหลดในการเชื่อมต่อความเร็วต่างๆ
การระบุแหล่งที่มาของโลโก้
เมื่อใช้ภาพมุมสูง คุณต้องปฏิบัติตามข้อกำหนดทั้งหมด รวมถึงการระบุแหล่งที่มาของโลโก้ ดูรายละเอียดในหน้านี้
บทสรุป
เราหวังว่าบทความนี้จะให้แรงบันดาลใจแก่คุณในการคิดหาวิธีนำ Aerial View ไปใช้กับเว็บไซต์ ซึ่งมีการมีส่วนร่วมของผู้ใช้สูง
คุณควรคำนึงถึงวิธีที่จะค้นพบเนื้อหาของผู้ใช้ และในรูปแบบที่เหมาะสมที่สุดสำหรับการแสดงเนื้อหา นอกจากนี้ คุณยังควรพิจารณาประเภทอุปกรณ์ที่จะเล่นวิดีโอ โดยเฉพาะการวางแนวหน้าจอและความเร็วในการเชื่อมต่อของผู้ใช้
ขั้นตอนถัดไป
แหล่งข้อมูลอื่นๆ ที่แนะนํา
- ปรับปรุงความแม่นยำของข้อมูลที่ป้อนที่อยู่ในมุมมองจากทางอากาศ
- เอกสารประกอบเกี่ยวกับผลิตภัณฑ์ Aerial View
ผู้ร่วมให้ข้อมูล
Google เป็นผู้ดูแลบทความนี้ ผู้เขียนเนื้อหาต้นฉบับมีดังนี้
ผู้เขียนหลัก:
Henrik Valve | Google Maps Platform วิศวกรโซลูชัน