ออกเว็บไซต์ของคุณให้น่าสนใจด้วย “Storytelling – การเล่าเรื่อง”

ออกเว็บไซต์ของคุณให้น่าสนใจด้วย “Storytelling – การเล่าเรื่อง”

หากคุณยังจำเรื่องราวก่อนหน้านี้เกี่ยวกับ “เรื่องราวของแบรนด์” ที่คุณควรให้ความสำคัญกับการเล่าเรื่องของแบรนด์ ด้วยการใช้ “Storytelling – การเล่าเรื่อง” เข้าร่วมกับการทำการตลาด เพื่อสร้างความแตกต่างให้กับแบรนด์ของคุณเป็นที่น่าจดจำ

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

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

“9 เช็คลิสต์ที่คุณควรรู้สำหรับสร้างผลลัพธ์ให้ธุรกิจผ่านเว็บไซต์” — และหลังจากนั้นเราจะมาใช้ Storytelling ร่วมกันกับการออกแบบเว็บไซต์ เพื่อเพิ่มความน่าสนใจให้กับเว็บไซต์ของคุณ

รู้จักรูปแบบโครงสร้างเว็บไซต์

ก่อนอื่นการออกแบบโครงสร้างเว็บไซต์นั้นเป็นจุดเริ่มต้นที่สำคัญ และสามารถทำได้หลายหลายรูปแบบ ขึ้นอยู่กับประเภทของเว็บไซต์ ความต้องการของเว็บไซต์ และกลุ่มเป้าหมายที่ต้องการจะนำเสนอ โดยรูปแบบโครงสร้างเว็บไซต์จะมีหลากหลายรูปแบบ แต่ทาง Google เองนั้นสรุป Site Structure ออกเป็น 3 รูปแบบด้วยกัน คือ Flat Site Stucture, Theme Pyramids และ Fluid Site Architecture *(1)

  1. Flat Site Structure
 รูปแบบการวางโครงสร้างเว็บไซต์ที่เป็นแบบเรียงลำดับ
รูปแบบการวางโครงสร้างเว็บไซต์ที่เป็นแบบเรียงลำดับ

 

Flat Site Structure คือ รูปแบบการวางโครงสร้างเว็บไซต์ที่เป็นแบบเรียงลำดับ ไม่มีการจัดแบ่งหมวดหมู่ โดยที่ทุกๆหน้าจะสามารถเข้าถึงได้จากการคลิกเพียงครั้งเดียว (1 Click) จากทางหน้าหลัก (Home Page) ซึ่งรูปแบบโครงสร้างเว็บไซต์แบบนี้ถูกใช้มาอย่างยาวนาน และเป็นที่แพร่หลายกันมาเกือบ 20 ปี ซึ่งการวางโครงสร้างแบบนี้จะเรียบง่าย เหมาะกับเว็บไซต์ที่มีเนื้อหาไม่ซับซ้อนมาก

  1. Theme Pyramids
การวางโครงสร้างเว็บไซต์แบบ Theme Pyramids
การวางโครงสร้างเว็บไซต์แบบ Theme Pyramids

 

Theme Pyramids หรือที่เรารู้จักกันในอีกชื่อหนึ่งว่า Conventional Site Architecture ซึ่งจะเป็นการวางโครงสร้างเว็บไซต์จากการกำหนดหัวข้อหลัก และแบ่งย่อยลงไปเป็นหัวข้อแบบเจาะจงมากขึ้นเรื่อยๆ โดยทั่วไปจะถูกนำมาใช้กับเว็บไซต์ E-Commerce เป็นส่วนมาก

โดยที่ยอดบนสุดของ Pyramid นั้นคือ หน้าหลัก (Home Page) ชั้นถัดมาจะเป็นหน้าเฉพาะมากยิ่งขึ้น (Sub Topic) ที่เชื่อมต่อมาจากหน้าหลัก และชั้นถัดๆไปของ Pyramid จะเป็นหน้าที่ประกอบไปด้วยหน้าที่มีเนื้อหาแบบเจาะจงมากยิ่งขึ้นไปเรื่อยๆ

ถ้าจะยกตัวอย่างเพื่อให้เห็นภาพได้ชัดเจนยิ่งขึ้น ให้ลองนึกถึงเวลาเราเข้าเว็บไซต์ E-Commerce ต่างๆ และเราจะเห็นหมวดหมู่สินค้าต่างๆ เช่น Accessories และเมื่อเราคลิกเข้าไป เราจะเจอหมวดหมู่ Belts หรือ Sunglasses และเมื่อเราคลิกเข้าไปอีก ถึงจะพบกับหน้าสินค้าต่างๆ

  1. Fluid Site Architecture

โครงสร้างเว็บไซต์แบบสุดท้ายนี้จะเป็นการผสมกันระหว่าง Flat Site Structure และ Theme Pyramids โดยการออกแบบโครงสร้างรูปแบบนี้มักจะถูกใช้เมื่อเราต้องการที่จะให้ Google นั้นมองข้ามหัวข้อ หรือ หมวดหมู่บางอย่างที่ไม่ได้มีความสำคัญ

ยกตัวอย่างเช่น โดยทั่วไปหากเราเขียน blog ขึ้นมา ตัว URL ของเรามักจะออกมาประมาณนี้ /blog/design-your-website-with-storytelling/ เราอาจจะใช้ตัวอักษร b เพื่อแทนหัวข้อ หรือหมวดหมู่ blog ดังนี้ /b/design-your-website-with-storytelling/ และด้วยวิธีนี้ Google จะมองข้าม /b/ ไป และจะให้ความสำคัญกับ URL ด้านหลังที่เหลือแทน ซึ่งจะทำให้รูปแบบนี้เสมือนกับการวางโครงสร้างแบบ Flat Site Structure นั้นเอง

Storytelling กับการออกแบบเว็บไซต์

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

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

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

ยกตัวอย่างเช่น เว็บไซต์ GoPro ที่ได้นำหลักการของ Storytelling ซึ่งใช้การเล่าเรื่องแบบ Features-Advantages-Benefits ที่เน้นการบอกเล่าถึงคุณสมบัติของกล้องที่จับภาพ และถ่ายวีดีโอได้อย่างดีเยี่ยม รวมถึงข้อดีในการแชร์รูปภาพ วีดีโอ และ GoPro ได้นำเรื่องราวเดียวกันนี้มาถ่ายถอดลงไปในเว็บไซต์เช่นเดียวกัน — ลองชมตัวอย่างกันได้ที่ GoPro | The world’s most versatile action cameras 

เว็บไซต์ Gopro ที่ใช้ storytelling ในการเล่าประโยชน์ของสินค้า
เว็บไซต์ GoPro ที่ใช้ storytelling ในการเล่าคุณสมบัติของสินค้า

ที่มา GoPro

อีกหนึ่งตัวอย่างที่เราอยากจะให้คุณได้ดูคือ TOMS แบรนด์รองเท้าที่ใช้ Storytelling ในการสร้างความประทับใจให้กับลูกค้าด้วยสโลแกนว่า “With every product you purchase,TOMS will help a person in need. One for One” (รองเท้าทุกคู่ที่คุณซื้อ TOMS จะนำไปช่วยเหลือคนที่ต้องการแบบชิ้นต่อชิ้น) และถึงแม้ว่าปัจจุบัน TOMS จะมีการเปลี่ยนแปลงวิธีการจากเดิมเป็น “For every $3 we make, we give $1 away” (รายได้ทุก $3 TOMS จะให้คืน $1) แต่ยังคงเอาไว้ซึ่งหลักการทำธุรกิจนี้อยู่ และตัวแบรนด์เองยังคงนำหลักการ Storytelling มาเล่าถึงการเปลี่ยนแปลงนี้ได้อย่างดีเยี่ยม — ดูตัวอย่างกันได้ที่ Your Impact | TOMS®

ตัวอย่างแบรนด์ TOMS ที่ใช้ Storytelling สร้างความประทับใจแก่ลูกค้า
ตัวอย่างแบรนด์ TOMS ที่ใช้ Storytelling สร้างความประทับใจแก่ลูกค้า

ที่มาTOMS

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

7 องค์ประกอบที่จะทำให้คุณสร้าง Storytelling ร่วมกับการออกแบบเว็บไซต์

 

  1. รูปภาพ (Images)

สิ่งแรกสุดที่จะทำให้คุณสามารถสื่อสารเรื่องราวต่างๆได้เป็นอย่างดี คือ รูปภาพ ถึงกับมีคำพูดว่า “A picture says more than a thoundsan words.” ที่แสดงให้เห็นว่ารูปภาพเพียงภาพเดียว นั้นสามารถแทนคำพูดได้มากเป็นพันๆคำเลยทีเดียว และแน่นอนว่าในปัจจุบันผู้คนชื่นชอบ รูปภาพ มากกว่า ตัวอักษร นั้นเป็นเพราะการจดจำรูปภาพนั้นง่ายมากกว่าการจดจำตัวอักษร หรือตัวเลขนั้นเอง

การใช้รูปภาพสื่อสารรูปแบบของสินค้า
การใช้รูปภาพสื่อสารรูปแบบของสินค้า

ที่มา Farfetch

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

  1. ภาพพื้นหลัง (Background Images)

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

ภาพพื้นหลังตรงส่วนนี้ยังสามารถนำมาประยุกต์เข้ากับการทำเป็นภาพ Banner หรือ สไลด์โชว์ ที่สามารถสร้างเรื่องราวต่างๆให้เห็นได้อย่างชัดเจนอีกด้วย

  1. ภาพกราฟฟิค (Illustrations)

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

การใช้ภาพกราฟฟิคเพื่ออธิบายคุณสมบัติสินค้า และ การทำงาน
การใช้ภาพกราฟฟิคเพื่ออธิบายรูปแบบการทำงาน

ที่มา Evernote

ตัวอย่างการใช้กราฟฟิคคู่กับภาพจริงเพื่อสื่อประสิทธิภาพการทำงาน
ตัวอย่างการใช้กราฟฟิคคู่กับภาพจริงเพื่อสื่อประสิทธิภาพการทำงาน

ทีมา GoPro

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

  1. Video

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

การใช้วิดีโอในการสร้าง storytelling
การใช้วิดีโอในการสร้าง storytelling

ที่มา GoPro

หากเราจะเปรียบเทียบว่าการใช้ “รูปภาพนั้นดีกว่าคำพูด” ในยุคสมัยนี้การใช้ “วีดีโอย่อมดีกว่ารูปภาพ” เช่นกัน ดังจะเห็นได้จากข้อมูล digital ปี 2019 ที่ว่า YouTube เป็นสื่อ Social Media ที่มีคนใช้งานมากเป็นอันดับที่ 2 และผู้ใช้งานอินเตอร์เน็ตที่ช่วงอายุ 16-64 ปี นิยมดูวีดีโอออนไลน์ (Online Video) มากถึง 90% เพราะฉะนั้นยุคนี้ “Video is a new king of content” ครับ

  1. คำพูด (Words)

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

ตัวอย่างการใช้คำพูดที่โดดเด่นตรงประเด็นในการเล่าประสิทธิภาพสินค้า
ตัวอย่างการใช้คำพูดที่โดดเด่นตรงประเด็นในการเล่าประสิทธิภาพสินค้า

ที่มา Apple

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

  1. มาสคอต (Mascot)

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

การใช้มาสคอตเพื่อเป็นตัวแทนในการเล่าเรื่อง
การใช้มาสคอตเพื่อเป็นตัวแทนในการเล่าเรื่อง

ตัวอย่างที่เห็นได้ชัดเจน คือ “แม่มณี” ที่เป็นมาสคอตของ SCB EASY app จากธนาคารไทยพาณิชย์ ที่ให้มาสคอตแม่มณีเป็นคนสื่อสาร โดยกำหนดให้แม่มณีเป็นเสมือนพ่อค้า-แม่ค้าที่ใช้งาน Mobile app อันนี้

  1. สื่อสังคมออนไลน์ (Social Media)

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

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

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

อ้างอิง :

  1. libertymarketing.co.uk: The best site structure for your website, according to Google
  2. usabilla.com: 10 Ways To Incorporate Storytelling In Web Design – The latest Voice of Customer and CX trends
Phatsarun-Sawatayanon

 

 

 

 

ผู้เขียน:     ภัทร์ศรัณย์ สวาทยานนท์
ตำแหน่ง : Managing Director of MIMO Project Co.,Ltd.
                UX/UI &  Website Experienced Developer  และ  Website Development Consultant
เรียบเรียง: STEPS Academy

 

Learning More

Interesting Topics

ห้ามพลาด ! 5 ปัจจัยชี้วัดความสำเร็จของธุรกิจคุณใน Instagram
5 เหตุผลทำไมธุรกิจของคุณถึงควรเริ่มต้นมี Weblog