ดึงดูดลูกค้าด้วยมุมมองทางอากาศ

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

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

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

เพิ่มการมีส่วนร่วม

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

การวางแนววิดีโอ

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

วิดีโอจากมุมมองทางอากาศจะมีให้ในแนวนอนและแนวตั้ง

ด้านล่างนี้คือตัวอย่างความแตกต่างในการใช้งานมุมมองทางอากาศในอุปกรณ์เคลื่อนที่ ตามการวางแนวที่แนะนำ และการวางแนวที่ไม่แนะนำ

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

โฮเวอร์การ์ดแบบฝัง

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

ตัวอย่างด้านล่างแสดงเครื่องหมายที่แสดงกลุ่มอาคาร Googleplex ใน Mountain View เมื่อคุณวางเมาส์เหนือเครื่องหมายนี้ โฮเวอร์การ์ดจะปรากฏขึ้นเพื่อแสดงวิดีโอ มุมมองทางอากาศของพร็อพเพอร์ตี้

GIF แบบเคลื่อนไหวที่แสดงแผนที่พร้อมโฮเวอร์การ์ดพร้อมกับวิดีโอมุมมองทางอากาศของอาคาร Googleplex โฮเวอร์การ์ดนี้จะปรากฏขึ้นเมื่อเคอร์เซอร์วางอยู่เหนือเครื่องหมายที่เกี่ยวข้อง

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

สร้างบรรยากาศที่เหมือนเรื่องเล่าสำหรับที่พักอาศัยของคุณ

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

GIF แบบเคลื่อนไหวที่มีตัวอย่างวิดีโอมุมมองทางอากาศซึ่งแสดงในรูปแบบภาพเหมือนเรื่องราวในโหมดแนวตั้ง วิดีโอมุมมองทางอากาศอยู่ในสไลด์ที่ 2 และปุ่มที่ด้านล่างจะระบุว่า "ดูอาคาร"

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

วิธีการมีดังนี้

  1. เลือกรูปภาพ เลือกรูปภาพต่างๆ ที่ไฮไลต์ลักษณะที่ดีที่สุดของที่พัก
  2. สร้างวิดีโอมุมมองทางอากาศ
  3. รวมรูปภาพและวิดีโอของคุณเข้าด้วยกันเป็นเรื่องราว
  4. แชร์เรื่องราวของคุณ แชร์เรื่องราวของคุณกับผู้มีโอกาสเป็นผู้ซื้อบนเว็บไซต์ของคุณ หรือส่งอีเมลแคมเปญการตลาดก็ได้

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

เริ่มต้นมุมมองทางอากาศเมื่อโหลดหน้าเว็บ

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

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

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

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

ตัวอย่างปุ่มที่สามารถใช้เข้าถึงมุมมองทางอากาศ ซึ่งวางอยู่ข้างปุ่มที่มีอยู่เพื่อเข้าถึงรูปภาพ

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

การออกแบบปุ่ม

หากเลือกใช้ปุ่มเพื่อเข้าถึงมุมมองทางอากาศ คุณควรคำนึงถึงสิ่งต่อไปนี้

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

ต่อไปนี้คือเคล็ดลับเพิ่มเติมสำหรับการออกแบบปุ่มมุมมองทางอากาศที่มีประสิทธิภาพ

  • ใช้ภาษาที่ชัดเจนและกระชับ ปุ่มควรติดป้ายกํากับชัดเจน เพื่อให้ผู้ใช้ทราบว่าใช้ทำอะไร
  • ใช้แบบอักษรขนาดใหญ่และอ่านออกได้ ปุ่มควรมีขนาดใหญ่พอที่จะให้ผู้ใช้เห็นและคลิกได้ง่าย
  • ใช้สีที่ตัดกัน ปุ่มควรมีสีที่แตกต่างจากข้อความโดยรอบและพื้นหลังเพื่อให้โดดเด่น
  • ใช้คำกระตุ้นให้ดำเนินการ (Call-To-Action) ปุ่มควรมีการเรียกร้องให้ดำเนินการที่ชัดเจน เช่น "ดูมุมมองทางอากาศ" หรือ "ดูวิดีโอ"

ข้อควรพิจารณาในการแสดง

กำลังโหลดวิดีโอ

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

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

การระบุแหล่งที่มาของโลโก้

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

บทสรุป

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

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

ขั้นตอนถัดไป

แนะนำให้อ่านเพิ่มเติม:

ผู้ร่วมให้ข้อมูล

Google เป็นผู้ดูแลบทความนี้ ผู้เขียนต่อไปนี้เป็นคนเขียน

ผู้เขียนหลัก:

Henrik Valve | วิศวกรโซลูชัน Google Maps Platform