หากคุณยังจำเรื่องราวก่อนหน้านี้เกี่ยวกับ “เรื่องราวของแบรนด์” ที่คุณควรให้ความสำคัญกับการเล่าเรื่องของแบรนด์ ด้วยการใช้ “Storytelling – การเล่าเรื่อง” เข้าร่วมกับการทำการตลาด เพื่อสร้างความแตกต่างให้กับแบรนด์ของคุณเป็นที่น่าจดจำ
ลองติดตามเรื่องราวของ 7 สูตรการเล่าเรื่อง Storytelling ให้แบรนด์ของคุณเป็นที่น่าจดจำ ได้ที่นี้ แล้วแบรนด์ของคุณจะเป็นที่น่าจดจำไปอีกนาน
คำถามคือ แล้วในวันที่แบรนด์ของเรานั้นจะต้องไปอยู่บนโลกออนไลน์ เราจะทำอย่างไรให้ผู้คนยังคงจดจำแบรนด์ของเราได้อยู่อย่างต่อเนื่องละ? แน่นอนครับวิธีที่ดีที่สุดคือการนำเอาหลักการของ Storytelling ที่เราได้ใช้ในการสื่อสารการตลาดต่างๆ มาใช้กับเว็บไซต์ของเรานั้นเอง และในวันนี้เราจะมาลองใช้หลักการของ “Storytelling – การเล่าเรื่อง” ประยุกต์ให้เข้ากับเว็บไซต์ของคุณ เพื่อสร้างความน่าสนใจ และทำให้เป็นที่จดจำกับผู้ใช้งาน (Users) กันครับ
“9 เช็คลิสต์ที่คุณควรรู้สำหรับสร้างผลลัพธ์ให้ธุรกิจผ่านเว็บไซต์” — และหลังจากนั้นเราจะมาใช้ Storytelling ร่วมกันกับการออกแบบเว็บไซต์ เพื่อเพิ่มความน่าสนใจให้กับเว็บไซต์ของคุณ
รู้จักรูปแบบโครงสร้างเว็บไซต์
ก่อนอื่นการออกแบบโครงสร้างเว็บไซต์นั้นเป็นจุดเริ่มต้นที่สำคัญ และสามารถทำได้หลายหลายรูปแบบ ขึ้นอยู่กับประเภทของเว็บไซต์ ความต้องการของเว็บไซต์ และกลุ่มเป้าหมายที่ต้องการจะนำเสนอ โดยรูปแบบโครงสร้างเว็บไซต์จะมีหลากหลายรูปแบบ แต่ทาง Google เองนั้นสรุป Site Structure ออกเป็น 3 รูปแบบด้วยกัน คือ Flat Site Stucture, Theme Pyramids และ Fluid Site Architecture *(1)
- Flat Site Structure
Flat Site Structure คือ รูปแบบการวางโครงสร้างเว็บไซต์ที่เป็นแบบเรียงลำดับ ไม่มีการจัดแบ่งหมวดหมู่ โดยที่ทุกๆหน้าจะสามารถเข้าถึงได้จากการคลิกเพียงครั้งเดียว (1 Click) จากทางหน้าหลัก (Home Page) ซึ่งรูปแบบโครงสร้างเว็บไซต์แบบนี้ถูกใช้มาอย่างยาวนาน และเป็นที่แพร่หลายกันมาเกือบ 20 ปี ซึ่งการวางโครงสร้างแบบนี้จะเรียบง่าย เหมาะกับเว็บไซต์ที่มีเนื้อหาไม่ซับซ้อนมาก
- Theme Pyramids
Theme Pyramids หรือที่เรารู้จักกันในอีกชื่อหนึ่งว่า Conventional Site Architecture ซึ่งจะเป็นการวางโครงสร้างเว็บไซต์จากการกำหนดหัวข้อหลัก และแบ่งย่อยลงไปเป็นหัวข้อแบบเจาะจงมากขึ้นเรื่อยๆ โดยทั่วไปจะถูกนำมาใช้กับเว็บไซต์ E-Commerce เป็นส่วนมาก
โดยที่ยอดบนสุดของ Pyramid นั้นคือ หน้าหลัก (Home Page) ชั้นถัดมาจะเป็นหน้าเฉพาะมากยิ่งขึ้น (Sub Topic) ที่เชื่อมต่อมาจากหน้าหลัก และชั้นถัดๆไปของ Pyramid จะเป็นหน้าที่ประกอบไปด้วยหน้าที่มีเนื้อหาแบบเจาะจงมากยิ่งขึ้นไปเรื่อยๆ
ถ้าจะยกตัวอย่างเพื่อให้เห็นภาพได้ชัดเจนยิ่งขึ้น ให้ลองนึกถึงเวลาเราเข้าเว็บไซต์ E-Commerce ต่างๆ และเราจะเห็นหมวดหมู่สินค้าต่างๆ เช่น Accessories และเมื่อเราคลิกเข้าไป เราจะเจอหมวดหมู่ Belts หรือ Sunglasses และเมื่อเราคลิกเข้าไปอีก ถึงจะพบกับหน้าสินค้าต่างๆ
- 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
อีกหนึ่งตัวอย่างที่เราอยากจะให้คุณได้ดูคือ 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 เข้ามาเกี่ยวข้องกับการออกแบบเว็บไซต์นั้น เราสามารถเลือกใช้เพียงส่วนใดส่วนหนึ่งของภาพรวม หรือจะใช้สำหรับทั้งเว็บไซต์ได้เลย ทั้งหมดนี้ขึ้นอยู่กับวัตถุประสงค์ในการสื่อสารนั้นๆ
7 องค์ประกอบที่จะทำให้คุณสร้าง Storytelling ร่วมกับการออกแบบเว็บไซต์
- รูปภาพ (Images)
สิ่งแรกสุดที่จะทำให้คุณสามารถสื่อสารเรื่องราวต่างๆได้เป็นอย่างดี คือ รูปภาพ ถึงกับมีคำพูดว่า “A picture says more than a thoundsan words.” ที่แสดงให้เห็นว่ารูปภาพเพียงภาพเดียว นั้นสามารถแทนคำพูดได้มากเป็นพันๆคำเลยทีเดียว และแน่นอนว่าในปัจจุบันผู้คนชื่นชอบ รูปภาพ มากกว่า ตัวอักษร นั้นเป็นเพราะการจดจำรูปภาพนั้นง่ายมากกว่าการจดจำตัวอักษร หรือตัวเลขนั้นเอง
ที่มา Farfetch
เพราะฉะนั้นหากคุณต้องการให้คนที่เข้ามาใช้งานเว็บไซต์รู้สึกชื่นชอบ และสะดวกสบาย การเลือกใช้รูปภาพในการสื่อสารแทนตัวอักษรนับเป็นอีกทางเลือกหนึ่งที่ยอดเยี่ยมเลยทีเดียว
- ภาพพื้นหลัง (Background Images)
เรียกได้ว่าองค์ประกอบนี้เป็นสิ่งที่ให้ผลต่อการสื่อสารได้เป็นอย่างดี และน่าจะเป็นอีกหนึ่งองค์ประกอบหลักที่ทุกคนเลือกใช้ในการออกแบบเว็บไซต์ ไมว่าจะเป็นการเลือกใช้สี โฟกัสของภาพ ที่สามารถสื่อให้เห็นเรื่องราวต่างๆได้เป็นอย่างดี
ภาพพื้นหลังตรงส่วนนี้ยังสามารถนำมาประยุกต์เข้ากับการทำเป็นภาพ Banner หรือ สไลด์โชว์ ที่สามารถสร้างเรื่องราวต่างๆให้เห็นได้อย่างชัดเจนอีกด้วย
- ภาพกราฟฟิค (Illustrations)
ประโยชน์ของการใช้ภาพกราฟฟิคนั้นเทียบเท่ากับการใช้รูปภาพจริง แต่ที่พิเศษมากกว่านั้นคือ ภาพกราฟฟิคนั้นสามารถสร้าง หรือตกแต่งเพื่อให้เข้าถึงสิ่งที่ต้องการจะสื่อสารได้อย่างชัดเจนมากยิ่งขึ้น เพราะบางอย่าง เราไม่สามารถถ่ายรูปภาพจริงออกมาได้
ที่มา Evernote
ทีมา GoPro
ซึ่งการใช้ภาพกราฟฟิคนั้นสามารถใช้งานร่วมกันกับรูปภาพจริงได้ หรือเราจะใช้ภาพกราฟฟิคทั้งหมดเลยได้เช่นกัน อันนี้ให้แล้วแต่ความเหมาะสมกับการสื่อสารได้เลยครับ
- Video
วีดีโอถือเป็นเครื่องมืออันทรงพลังสำหรับการสร้าง Storytelling ได้ดีมากๆ แต่ในช่วงแรก การใช้งานวีดีโอในเว็บไซต์ถือว่ามีความเสี่ยงที่จะทำให้เว็บไซต์นั้นโหลดได้ช้า จากข้อดีจะกลายเป็นข้อเสียแทน จึงทำให้หลายๆคนเลือกที่จะไม่ใช้วีดีโอในการออกแบบเว็บไซต์ แต่ในยุคนี้ที่อินเตอร์เน็ตมีความเร็วสูงถึง 5G แล้วการนำวีดีโอมาใช้งานนับว่าเป็นวิธีที่ดี และสามารถตอบโจทย์กับการสร้างแบรนด์ได้เป็นอย่างดี
ที่มา GoPro
หากเราจะเปรียบเทียบว่าการใช้ “รูปภาพนั้นดีกว่าคำพูด” ในยุคสมัยนี้การใช้ “วีดีโอย่อมดีกว่ารูปภาพ” เช่นกัน ดังจะเห็นได้จากข้อมูล digital ปี 2019 ที่ว่า YouTube เป็นสื่อ Social Media ที่มีคนใช้งานมากเป็นอันดับที่ 2 และผู้ใช้งานอินเตอร์เน็ตที่ช่วงอายุ 16-64 ปี นิยมดูวีดีโอออนไลน์ (Online Video) มากถึง 90% เพราะฉะนั้นยุคนี้ “Video is a new king of content” ครับ
- คำพูด (Words)
องค์ประกอบที่ผ่านมาทั้งหมด เราจะเน้นไปที่การทำให้ผู้ใช้งานสามารถจินตนาการเรื่องราวต่างๆที่เราต้องการจะสื่อสารได้ แต่เราต้องไม่ลืมองค์ประกอบที่สำคัญไม่แพ้กันเลยนั้นคือ “คำพูด” แน่นอนว่าเราปฏิเสธไม่ได้ได้ว่า “คำพูด” นั้นมีพลังไม่แพ้องค์ประกอบใดอย่างแน่นอน และการใช้คำพูดในเว็บไซต์ย่อมสามารถสื่อสารให้ทุกคนคล้อยตามได้เป็นอย่างดี
ที่มา Apple
ในการใช้คำพูดในที่นี้ เราไม่ได้จะหมายถึงการเขียนบทความ (Content) แต่เรากำลังจะหมายถึงการใช้ “หัวข้อ (Title)” หรือ “หัวข้อย่อย (Sub Title)” ที่มีความโดดเด่น และตรงประเด็น คำพูดในรูปแบบนี้จะสามารถทำให้คนดูเข้าใจประเด็น ว่าตอนนี้เราต้องการจะสื่อสารอะไร เพราะบางครั้งการที่เราให้ผู้ใช้งานจินตนาการเอาเอง อาจจะทำเข้าใจผิดประเด็นที่เราต้องการจะสื่อสารได้ คำพูดเหล่านี้จะเปรียบเสมือนไกด์ในการนำทางให้กับผู้ใช้งานได้เป็นอย่างดี
- มาสคอต (Mascot)
การใช้ Storytelling ในการสื่อสารเรามักจะมีตัวละครหลักเป็นตัวนำในการดำเนินเรื่อง ซึ่งโดยทั่วไปจะเป็นผู้ก่อตั้ง หรือผู้เล่าเรื่อง แต่สำหรับเว็บไซต์นั้นเราอาจจะใช้การสร้างมาสคอต (Mascot) ขึ้นมา เพื่อใช้เป็น character ในการเดินเรื่อง หรือเล่าเรื่องต่างๆแทนเราได้ และเราสามารถกำหนดลักษณะ หรือบุคลิกให้กับมาสคอตนี้ เพื่อจะให้เป็นเสมือนตัวแทนของเราในการเล่าเรื่อง (inside-out) หรือจะเป็นการกำหนดให้เสมือนลูกค้าที่เข้ามาพบเจอกับแบรนด์เรา (outside-in)
ตัวอย่างที่เห็นได้ชัดเจน คือ “แม่มณี” ที่เป็นมาสคอตของ SCB EASY app จากธนาคารไทยพาณิชย์ ที่ให้มาสคอตแม่มณีเป็นคนสื่อสาร โดยกำหนดให้แม่มณีเป็นเสมือนพ่อค้า-แม่ค้าที่ใช้งาน Mobile app อันนี้
- สื่อสังคมออนไลน์ (Social Media)
แน่นอนว่าองค์ประกอบที่เราจะขาดไปเสียมิได้ คือ Social Media นั้นเอง เพราะในปัจจุบันนี้เราได้ใช้ Social Media ในการติดต่อสื่อสารระหว่างแบรนด์ กับ ลูกค้า ของเรากันเป็นเรื่องปกติ ประโยชน์ของ Social Media นี้มีอยู่มากมาย และการที่เราจะนำ Social Media เข้ามาเป็นส่วนหนึ่งในเว็บไซต์ของเรา จะทำให้เว็บไซต์ของเรานั้นดูมีความจับต้องได้ และสามารถสื่อสารกับลูกค้าได้รวดเร็วมากยิ่งขึ้น
ท้ายที่สุดนี้ผมอยากให้ทุกคนลองกลับไปสังเกตุดูเว็บไซต์ตัวเอง ว่าได้มีการใช้ 7 องค์ประกอบนี้เพื่อการสร้าง Storytelling ให้กับเว็บไซต์คุณมากแค่ไหน ถ้าหากไม่มีผมถือว่าไม่ใช่เรื่องที่ผิดแต่อย่างใด เพราะการที่เราจะนำองค์ประกอบเหล่านี้มาสร้างเป็น Storytelling ได้ จำเป็นที่จะต้องเกิดจากการวางแผนการสื่อสารออกไปจากแบรนด์หลักเสียก่อน แต่นั้นไม่ใช่เรื่องยาก
หากคุณต้องการที่จะเริ่มการใช้ Storytelling ในเว็บไซต์แต่ไม่แน่ใจว่าควรจะเริ่มต้นจากตรงไหน ลองเริ่มจากส่วนที่พูดถึงแบรนด์เราโดยตรงอย่างเช่น หน้าเกี่ยวกับเรา อาจจะเป็นจุดเริ่มต้นที่ง่าย และค่อยๆพัฒนาต่อยอดไปสู่หน้าอื่นๆได้ในอนาคต และเราต้องอย่าลืมว่าผู้คนนั้นชื่นชอบที่จะได้ฟังเรื่องราวของเรา มากกว่าที่จะอยากรับรู้ข้อมูลความเป็นจริงที่อาจจะน่าเบื่อ
อ้างอิง :
- libertymarketing.co.uk: The best site structure for your website, according to Google
- usabilla.com: 10 Ways To Incorporate Storytelling In Web Design – The latest Voice of Customer and CX trends
ผู้เขียน: ภัทร์ศรัณย์ สวาทยานนท์
ตำแหน่ง : Managing Director of MIMO Project Co.,Ltd.
UX/UI & Website Experienced Developer และ Website Development Consultant
เรียบเรียง: STEPS Academy