การเล่าเรื่องเชิงโต้ตอบและการประยุกต์ใช้ในอุตสาหกรรมการออกแบบเว็บ

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

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

ทำไมต้องเล่าเรื่อง?

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

วิธีสร้างเรื่องราวเชิงโต้ตอบ

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

มันทำงานอย่างไร

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

ขายสินค้าใหญ่ด้วยเรื่องสั้น

บริษัทที่ขายรถยนต์มีหลายสิ่งที่ต้องกรอกก่อนที่จะทำยอดขายผ่านแพลตฟอร์มออนไลน์ได้ การซื้อรถยนต์ออนไลน์ทำให้ลูกค้าต้องกังวลอย่างมาก เนื่องจากต้องจ่ายเงินก้อนใหญ่ หากเว็บไซต์ไม่สามารถเข้าตาลูกค้าได้ ก็ไม่มีอะไรนอกจากขยะที่ลอยอยู่บนอินเทอร์เน็ต การขายรถยนต์ รถบรรทุก หรือเครื่องจักรกลหนักทางออนไลน์ในบางมุมการตลาดเพื่อแสดง USP (จุดขายที่ไม่เหมือนใคร) ของผลิตภัณฑ์ ฉันรู้จักเว็บไซต์รถยนต์ที่ใช้เทคนิคการเล่าเรื่องที่สมบูรณ์แบบเพื่อแสดงพิซซ่าบนหน้าจอของลูกค้า

ตัวอย่าง :

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

ภาษาภาพ

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

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

ตัวอย่าง :

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

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

ออกแบบเรื่องราว

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

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

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

ตัวอย่าง :

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

การใช้แอนิเมชั่นเรื่องให้เป็นประโยชน์

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

ตัวอย่าง :

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

การแปลข้อความการออกแบบ

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

ตัวอย่าง :

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

การใช้องค์ประกอบมืด

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

ตัวอย่าง :

โดยใช้หลักการและโครงสร้างเดียวกัน เรื่องสั้น 'The Boat' ที่ได้รับการยกย่องของ Nam Le ได้ถูกดัดแปลงเป็นนวนิยายกราฟิคเชิงโต้ตอบโดยการสร้างโลกแห่งพายุทำลายล้างมหาสมุทรที่บังคับให้เรือจากความน่าสะพรึงกลัวของสงครามเวียดนาม สิ่งที่ดีที่สุดที่ทุกคนสามารถทำได้ในเทศกาลเล่าเรื่องคือเพิ่มเสียงให้กับการออกแบบ นี่คือสุดยอดของการเล่าเรื่องแบบแอนิเมชั่นเพื่อให้ได้มาซึ่ง UX ดูได้ที่นี่.

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

การรวมกันของการเลื่อนผ่าน

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

ตัวอย่าง :

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

บทสรุป

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