Unpack Design from Spotify Wrapped

Waraporn Homsalee
InsightEra
Published in
4 min readDec 30, 2019

ที่สุดของปี 2019 จาก Spotify กับงานออกแบบที่น่าสนใจ

รู้จักกับ Spotify Wrapped

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

ในปี 2019 มีผู้คนนับล้านทั่วโลกเข้ามาใช้บริการ spotify เพื่อฟังเพลงที่รัก พอดแคสต์ที่ชอบ ควบคู่ไปกับการค้นพบสิ่งใหม่ๆ

Spotify ให้บริการทั้งแบบ Free และ Premium ข้อแตกต่างก็คือแบบ Premium คุณสามารถฟังเพลงแบบออฟไลน์ได้และไม่มีโฆษณาคั่น ซึ่งเราก็เป็นหนึ่งในผู้ใช้ที่เลือกอัพเกรดเป็น Premium โดยส่วนตัวแล้วชอบการจัดเพลย์ลิสต์ ที่มีการนำเทคโนโลยีเข้ามาใช้เพื่อศึกษาแนวเพลงที่ฟัง ซึ่งถือเป็นจุดเด่นของ Spotify เลยทีเดียว และคิดว่าหลายๆ คนก็น่าจะชอบเหมือนกัน อีกฟีเจอร์ที่น่าสนใจในช่วงปลายปีของทุกๆ ปีนั่นก็คือ “Wrapped” ซึ่งในปี 2019 นี้ Spotify ได้สรุปสถิติการฟังเพลงของคุณตลอดทั้งปีมาให้แบบละเอียดขึ้น ทั้งหมด 15 หน้าด้วยกัน โดยบน Desktop Website จะแสดงแบบ scroll จากบนลงล่าง ส่วนบนแอพพลิเคชั่นจะแสดงแบบ Instagram Stories-like นอกจากนี้ผู้ใช้ยังสามารถแชร์ผลลัพธ์ผ่านทางโซเชียลมีเดีย ทั้ง Facebook, Instagram, Snapchat และ Twitter ได้อีกด้วย

ค้นหาที่สุดของคุณได้เลยที่เว็บไซต์ https://www.spotify.com/wrapped
หรือแอพพลิเคชั่น Spotify ทั้ง iOS และ Android

ด้วยสีที่สะดุดตา และการนำเสนอข้อมูลที่สวยงาม เข้าใจได้ง่าย บทความนี้จะมา Unpack ดูกันว่า Spotify ได้นำเทคนิคการดีไซน์ UI (User Interface) ไหนที่น่าสนใจมาใช้บ้าง

ทฤษฎีสี (Color Theory)

People decide whether or not they like a product in 90 seconds or less. 90% of that decision is based solely on color.

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

Spotify Logo

วงล้อสี (Color Wheel)

ทุกคนคงสะดุดตาไม่น้อยกับสีที่ Spotify นำมาใช้กับ Wrapped 2019 ซึ่งมีการนำสีเขียวมาเล่นเป็นสีเขียวเฉดที่สว่างขึ้นมาตัดกับสีชมพู โดยใช้เทคนิคการใช้สีคู่ตรงข้าม (Complementary Color) บนวงล้อสี

อ่านเพิ่มเติมเกี่ยวกับวงล้อสีได้ที่ :

จิตวิทยาของสี (The Psychology of Color)

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

  • สีเขียว Green Yellow เพิ่มความตื่นเต้นให้กับงานดีไซน์เข้ากับ “สีชมพู” ซึ่งเป็นคู่สีตรงข้ามได้เป็นอย่างดี
  • สีชมพู Deep Pink เป็นสีที่เต็มไปด้วยพลังงาน ความมีชีวิตชีวา และความตื่นเต้น

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

Color Palette of Spotify Wrapped 2019

อ่านเพิ่มเติมเกี่ยวกับความหมายของสีได้ที่ :

Golden Ratio (สัดส่วนทองคำ)

จากกฎ 6:3:1 หรือการแบ่งสัดส่วนเป็น 60% + 30% +10% = 100% เป็นสัดส่วนที่ดีที่สุดเพื่อให้เกิดความสมดุลของสี โดยต้องเลือกสีหลัก (เด่นที่สุด) เป็น 60% ของพื้นที่ทั้งหมด ตามมาด้วยสีรอง 30% และอีกสีในส่วน 10% ที่เหลือมาช่วยตัดสีหลักและสีรอง ซึ่ง Spotify ได้ใช้สีเขียวและสีชมพูสลับกันเป็นสีหลัก อีกสีเป็นสีรองตามลำดับ โดยนำมาใช้ในส่วนของพื้นหลังที่มีพื้นที่มากที่สุด และใช้สีดำกับเนื้อหาหรือตัวหนังสือที่ไม่ต้องการให้เด่นมาก

Spotify Wrapped 2019 Color Palette using 6:3:1 rule

Typography Hierarchy

อีกหนึ่งเทคนิคพื้นฐานสำคัญสำหรับการออกแบบ UI (User Interface) นั่นก็คือการเรียงลำดับความสำคัญของเนื้อหาที่ทำให้ผู้ใช้เข้าใจได้ง่ายขึ้นว่าส่วนไหนสำคัญที่สุด ส่วนไหนสำคัญรองลงมา โดย Wrapped 2019 นี้เอง Spotify ได้สรุป Top Artists, Songs และ Albums ซึ่งเป็นตัวอย่างการออกแบบที่ได้นำเทคนิคนี้มาใช้ในรูปแบบของรูปภาพควบคู่ไปกับตัวหนังสือ โดยมีองค์ประกอบดังนี้

  • Size (ขนาด) การใช้ขนาดของตัวหนังสือที่ต่างกัน โดยในส่วนของหัวข้อจะใช้ตัวหนังสือที่มีขนาดใหญ่ ส่วนเนื้อหาซึ่งมีความสำคัญน้อยลงมาก็ควรจะมีขนาดที่เล็กกว่า
  • Weight (น้ำหนัก) การใช้ตัวหนังสือแบบตัวหนากับหัวข้อและเนื้อหาสำคัญที่ต้องการให้ผู้ใช้กวาดสายตาแล้วเห็นก่อนเป็นลำดับแรก
  • Color (สี) การเลือกใช้สีตัวอักษรหลายๆ สี (ไม่เกิน 3 สี) มีสีเด่นเพื่อดึงความสนใจจากผู้ใช้ ตามมาด้วยสีรอง
  • Contrast (ความแตกต่าง) การเลือกใช้สีคู่ตรงข้ามจากวงล้อสี จัดวางอย่างลงตัว สร้างความโดดเด่นให้กันและกันอย่างชัดเจน ซึ่งเรียกได้ว่า แตกต่างอย่างลงตัว นั่นเอง
Example of Typography Hierarchy

อ่านเพิ่มเติมเกี่ยวกับ Typography Hierarchy ได้ที่ :

Data Visualization

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

  • แนวเพลง (Genre) ที่ชื่นชอบ โดยนำเสนอข้อมูลแบบ “Bar Chart (แผนภูมิแท่ง)” ในเชิงเปรียบเทียบ มีการใส่เงาแบบ 3 มิติ และใส่ animation เพิ่มลูกเล่นให้กับการนำเสนอแผนภูมิแท่งอีกด้วย
  • World Citizen การนำเสนอข้อมูลที่แตกต่างออกไปจากปีก่อนๆ โดยปี 2019 นี้ Spotify ได้นำเสนอแบบแผนที่โลกให้เห็นว่าผู้ใช้แต่ละคนฟังเพลงจากศิลปินประเทศไหนบ้างจากทั่วทุกมุมโลก (ลูกโลกหมุนได้ด้วยนะ)โดยปักหมุดและไฮไลท์พื้นที่แต่ละประเทศ ซึ่งทำออกมาได้อย่างมีลูกเล่นและสวยงามเลยทีเดียว
  • Quality Time Spent ยอดรวมนาทีที่สตรีมมิ่งทั้งหมดของทั้งปีเปรียบเทียบกับปีก่อนๆ โดยนำเสนอออกมาคล้ายๆ กับกราฟเส้นวิ่งเป็น animation เคลื่อนไหวได้บนครึ่งวงกลม แสดงจำนวนนาทีของแต่ละปี ตามภาพด้านล่าง

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

สุดท้ายนี้ต้องขอบคุณแคมเปญ “Wrapped” จาก Spotify สำหรับสถิติสุดพิเศษที่สร้างสรรค์มาเพื่อแต่ละคนโดยเฉพาะ และส่งท้ายปีได้อย่างยอดเยี่ยมเลยทีเดียว นอกจากนี้ยังทำให้เห็นได้ว่าการออกแบบ User Interface (UI) ที่ดี ไม่ใช่เพียงแค่ออกแบบให้สวยงามเท่านั้น แต่ต้องคำนึงถึงผู้ใช้ เพื่อให้เกิด User Experience (UX) ที่ดีตามมาด้วย ซึ่งเราเชื่อว่ากว่าจะออกมาเป็นสรุปที่สุดของปีให้พวกเราได้เห็นกันนั้น ต้องผ่านกระบวนการหลายขั้นตอน จากทีมงานคุณภาพ ไม่ว่าจะเป็น designers, UX writers, researchers, engineers และ data scientists จนออกมาเป็นชิ้นงานที่มาพร้อมกับการใช้งานที่ดีเสมอ

แล้วที่สุดแห่งปี 2019 ของแต่ละคนเป็นอย่างไรกันบ้างคะ? 😊

--

--