รูปสไลด์ (Carousel)

ด้วยรูปแบบและลักษณะในการนำเสนอที่ดูดีในตัวของมันเองอยู่แล้ว ทำให้รูปสได์ หรือ Carousel (อ่านว่า แครระเซิล',-เซล') เป็นลูกเล่นที่ได้รับความนิยมมาก เราสามารถนำรูปสไลด์ไปใช้งานได้หลากหลายเช่น ทำเป็น opening section นำเสนอรูปสวยๆ ของ product หรือ service หรือ promotion ส่วนใหญ่และระบบ Carousel จะสามารถกำหนดให้มันเลื่อนเองโดยอัตโนมัติได้ กำหนดจำนวน slide ที่จะโชว์ในหนึ่งแฟรมได้ รูปสไลด์จึงเป็นตัวเลือกอันดับต้นๆ ที่สามารถดึงดูดความสนใจของคนดูได้ไม่ยาก

ตัวอย่างลูกเล่นแบบรูปสไลด์ หรือ Carousel
โรงแรม The Naka Phuket ใช้รูปสไลด์โชว์บรรยากาศของโรงแรมในหน้าแรก

ข้อดี: ดูดี ลูกค้าหรือคนดูส่วนใหญ่ชอบ

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

อัลบั้ม รูปเด้ง (Photo Gallery)

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

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

ตัวอย่างลูกเล่นที่เป็น photo gallery หรือรูปเด้ง
อัลบั้มรูปของ คชา รีสอร์ทแอนด์สปา เกาะช้าง ใช้ลูกเล่น รูปเด้ง ในการโชว์บรรยากาศของรีสอร์ทแบบชัดๆ

ข้อดี: ดูดี implement ไม่ยาก

ข้อเสียและข้อควรระวัง: รูปที่จะให้เด้งขึ้นมาควรเป็นรูปใหญ่ที่ชัดเจนกว่ารูป thumbnail เจอบ่อยมากที่คลิ๊กรูปเล็กแล้วกะว่าจะได้ดูรูปใหญ่ชัดๆ แต่กลับเป็นรูปที่มีขนาดเล็กเท่าเดิม ลูกค้าและคนดูเสียอารมณ์เปล่าๆ

ไอคอนฟ้อนต์ (Icon Font)

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

ตัวอย่างของการใช้ Icon Font
Fitbit เป็นตัวอย่างที่ดีมากๆ ในใช้ Icon Font ได้อย่างมีประสิทธิภาพ

ข้อดี: ดูทันสมัย คนดูจดจำเนื้อหาที่เราต้องการจะบอกได้ง่าย

ข้อเสียและข้อควรระวัง: ต้องเลือกไอคอนที่มีความหมายใกล้เคียงกับสิ่งที่เราจะสื่อออกไป และถ้าเป็นไปได้ควรใช้ไอคอนที่เป็นไฟล์ SVG มากกว่าที่จะใช้ไลบรารี่เพราะจะช่วยลดปริมาณไฟล์ที่ต้อง dowload ไปที่เครื่องของคนดูได้มากเลยทีเดียว

พื้นหลังแบบพาราแลค (Parallax Background)

Parallax background เป็นเทคนิคที่ทำให้ดูเหมือนรูปพื้นหลังยังคงอยู่กับที่แต่ยังคงมองเห็นได้ ในขณะที่ตำแหน่งของพื้นที่ที่แสดงพื้นหลังเดิม มีการเปลี่ยนแปลงไปตามการเลื่อนขึ้นลงของ browser คนดู ส่วนตัวผมชอบลูกเล่นนี้มาก เพราะมันเพิ่มมิติให้กับหน้าเว็บของเราได้เป็นอย่างดี อย่างไรก็ตาม การใช้ลูกเล่นนี้ก็มีข้อที่ต้องพิจารณาเช่นกันนั่นคือ ขนาดของรูปภาพพื้นหลังที่จะนำมาใช้จะต้องมีขนาดใหญ่กว่าขนาดของพื้นที่ๆ เป็นพื้นหลังเดิมมาก ทำให้ขนาดไฟล์ที่จะต้อง download นั้นใหญ่ตามไปด้วย ในขณะที่การแสดงผลบนมือถือยังมีข้อจำกัด (เวลาเปิดด้วยมือถือจะไม่ปรากฏลูกเล่นที่เป็น parallax background ในตำแหน่งนั้น แต่จะแสดงเป็นรูปพื้นหลังธรรมดาแทน)

ตัวอย่างของการใช้ parallax background
เว็บ The spaces รูปสวยอยู่แล้วแต่พอใส่ Parallax background เข้าไป ก็ยิ่งทำให้ดูมีคลาสมากขึ้น

ข้อดี: ดูไฮโซ

ข้อเสียและข้อควรระวัง: มีความซับซ้อนในการ implement พอสมควร ต้องดูเรื่องขนาดของรูปไม่ให้ใหญ่จนเกินไป และการแสดงผลบนมือถือยังมีข้อจำกัด

CSS3 Animation

สำหรับลูกเล่นที่เป็น Animation พวกข้อความรูปภาพที่มีการเคลื่อนไหว หรือเปลี่ยนรูปร่างต่างๆ ขอจัดให้อยู่ในกลุ่มนี้คือ CSS3 Animation

CSS3 เป็นมาตรฐานใหม่เพื่อยกระดับและเพิ่มประสิทธิภาพในการแสดงผลบนหน้าเบราเซอร์ให้ดียิ่งขึ้นโดย ใช้ฟังก์ชั่นต่างๆ ที่มาพร้อมกับ CSS3 เช่น animation, transform3d, transition ตัวอย่างของลูกเล่นที่เราเห็นบ่อยๆ ได้แก่ รูปภาพหรือข้อความมีการเปลี่ยนแปลง (เช่น ค่อยๆ ปรากฎ, หมุน, วิ่งขึ้นมาจากด้านใดด้านหนึ่ง หรือค่อยๆจางหาย) เราสามารถนำ CSS3 Animation ไปประยุกต์ใช้กับ javascript เพื่อให้แสดง animation ในเงื่อนไขที่กำหนด เช่น ให้ข้อความและรูปภาพค่อยปรากฏ เมื่อคนดูเลื่อนหน้าจอลงไปดูเนื้อหาด้านล่าง เป็นต้น

ตัวอย่างของเว็บที่นำ CSS3 มาใช้้
UVE Rooms & Wine Bar เป็นเว็บที่นำ CSS3 มาประยุกต์ใช้ได้อย่างยอดเยี่ยม

ข้อดี: สามารถนนำไปใช้งานได้หลากหลาย มีผลกระทบกับขนาดของไฟล์ที่จะต้อง download น้อย

ข้อเสียและข้อควรระวัง: มีความซับซ้อนในการ implement สูง ต้องอาศัยทักษะของการ coding ด้วย

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

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