Cubic Blog

เมื่อวันสองวันมานี้เพิ่งมีโครง�ารใหม่ล่าสุดของคิวบิ�ครีเอทีฟเปิดตัวมาครับ นั่นคือ Cubic Photo Camp Extreme #1 (CPHCX1) หรือค่ายถ่ายรูปค่ายใหม่ของคิวบิ�ฯ ที่สนุ��บบเอ็�ซ์ตรีม ซึ่งรายละเอียด�็คงสามารถดูได้ในเว็บของโครง�ารที่ผมลิงค์ไว้ให้�ล้วนะครับ

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

#1 – à¸�ารใช้สี

อย่าง�ร�ที่หลายๆ คนคงสังเ�ตได้ นั่นคือความฉูดฉาดของเว็บที่ออ�จะมา��ว่าป�ติของคิวบิ�ฯ สั�หน่อย เพราะอย่างที่หลายๆ คนมั�จะคุ้น�ับภาพ�บรนด์ของคิวบิ�ที่เน้นเรียบง่าย หรูหรา ไม่ค่อยฉูดฉาดเล่นสีตัด�ันไปตัด�ันมาขนาดนี้ �ต่ครั้งนี้เหตุผลหลั�ๆ เป็นเพราะต้องสะท้อนภาพ�บรนด์ Extreme ออ�มามา��ว่าครับ เลยออ�มาเป็นภาพใหม่ที่ไม่คุ้นตาพอดู ซึ่งจริงๆ ถ้าพูดตรงๆ �ว่าจะออ��บบให้ได้ชุดสีที่�ำลังดี (ชุดสีที่ใช้คือฟ้า ส้ม เขียว ม่วง) �็ใช้เวลาอยู่นานพอดูครับ �ต่�็ถือว่าออ�มาดี�ว่าที่คิดเหมือน�ัน

#2 – ลดข้อความ เพิ่มภาพ

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

#3 – Usability

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

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

ซึ่งฟีเจอร์นี้จริงๆ �ล้วมีตั้ง�ต่เว็บไซต์ของ Cubic Creative Summer Supreme 2008 �ล้ว โดยที่ตัวเลขเหล่านี้จะถู�เขียนไว้เป็นตัวอั�ษรสีฟ้า �ละเมาส์จะเปลี่ยนเป็นรูปมือเมื่อลา�ผ่านไป สุดท้ายเมื่อเราคลิ��็จะมีตัวเลขนั้น�สดงผลขึ้นมาเป็นตัวให�่ให้ดูง่ายๆ �่อนที่จะหายไปเมื่อเราลา�เมาส์หนีออ�ไป (�บบเ�่า) หรือ�ดที่ไหน�็ตาม (�บบใหม่)

�บบเ�่า

�บบใหม่

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

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

ในเว็บà¹�บบใหม่นี้ เราจึงเลือà¸�ที่จะà¹�สดงผลในหน้าหลัà¸�ของวิธีà¸�ารสมัครเฉพาะภาพรวมเท่านั้น เช่น ในขั้นตอนà¹�รà¸�ของà¸�ารสมัครผ่านà¹�ฟà¸�ซ์ เราà¸�็บอà¸�à¹�ค่ว่า “ดาวน์โหลดà¹�ละพิมพ์ใบสมัคร หรือรับใบสมัครผ่านระบบà¹�ฟà¸�ซ์อัตโนมัติ” ซึ่งเป็นข้อมูลในภาพรวมที่มาà¸�พอสำหรับผู้อ่านที่จะตัดสินใจได้ว่า เราจะเลือà¸�วิธีไหนดีระหว่างดาวน์โหลดใบสมัคร หรือรับผ่านà¹�ฟà¸�ซ์ หรืออาจจะเปลี่ยนใจไปสมัครออนไลน์เลย โดยที่ยังไม่จำเป็นต้องจมเข้าไปในข้อมูลหมายเลขโทรศัพท์ ขั้นตอนà¸�ารà¸�ดระบบอัตโนมัติ ฯลฯ à¹�ละเมื่อผู้ใช้ตัดสินใจได้à¹�ล้ว à¸�็à¹�ค่คลิà¸�ในสิ่งที่เขาเลือà¸� รายละเอียดของขั้นตอนนั้นๆ à¸�็จึงค่อยปราà¸�à¸�ขึ้นมา

ตอนà¹�รà¸�บอà¸�à¹�ค่ว่า “รับใบสมัครผ่านà¹�ฟà¸�ซ์อัตโนมัติ”

คลิ��ล้วถึงมีข้อมูล�สดงขึ้นมา ทำเสร็จ�็ปิดไป

ดังนั้นจะสังเ�ตได้ว่า เว็บที่อธิบายวิธี�ารสมัครของค่าย CPHCX1 ถือได้ว่าชัดเจน�ละเข้าใจง่ายพร้อมๆ �ับที่ข้อมูลยังครบถ้วน�ว่าหน้าวิธี�ารสมัครของค่ายในช่วงภาคฤดูร้อนที่ผ่านมามา�มายนั�

#4 – Metadata

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

�ต่ metadata หนึ่งที่สำคั�ในช่วงหลังๆ �ละหน้าเว็บคิวบิ�ฯ ต่างๆ ตั้ง�ต่ช่วง�ลางปีนี้เป็นต้นมา (ได้��่เว็บครบรอบ 5 ปี, เว็บ Cubic Race 3 �ละเว็บ CPHCX1 เป็นเว็บล่าสุด) คือข้อมูลย่อที่ใช้�ปะตามเว็บเครือข่ายสังคม (social network) ต่างๆ ซึ่งถ้าใครลองเอา URL ของเว็บค่าย CPHCX1 (http://cubiccreative.org/photocampextreme) ไป�ปะลงบน Facebook ตรงๆ �็จะได้ข้อมูลที่�สดงผลได้รวดรัดสวยงาม�บบนี้

หรือ�ม้�ต่ถ้าเอาเว็บ RACE3 (http://cubiccreative.org/race3) ไป�ปะ �็จะ�ลายเป็นวีดีโอที่คลิ�ดูได้เลยด้วยซ้ำครับ ทั้งหมดนี้คือ�าร�ำหนด metadata ไว้ให้ตรงตามมาตร�านเพื่อให้เว็บอื่นๆ นำข้อมูลไปใช้ได้ทันทีครับ

#5 – Navigation Optimization

เรื่องสุดท้าย ถ้าใครบังเอิ�ได้เข้าเว็บ CPHCX1 �่อนหน้าเช้าวันนี้ (9 สิงหาคม) จะสังเ�ตได้ว่าหน้า�ร�ของเว็บเปลี่ยนไปอย่างมา� ซึ่งเป็น�ารเปลี่ยน�ปลงตามสถาน�ารณ์อย่างรวดเร็ว

เมื่อโครง�ารนี้เริ่มเปิดตัวในวันที่ 7 สิงหาคม ทางคิวบิ�ครีเอทีฟ�็ได้โฆษณาเว็บนี้ผ่านช่องทางต่างๆ ทั้งอีเมล์ให้�ับผู้ที่ลงชื่อไว้ รวมถึงโฆษณาบน Google �ละ Facebook

ต่อมาเมื่อผ่านไป 1 วัน เราพบว่า Bounce Rate (อัตราที่ผู้ใช้เข้าเว็บมา�ล้วไม่คลิ�อะไรต่อ�ล้วออ�ไปเลย) นั้นสูงถึง 80% ซึ่งเป็นสั��าณที่ระบุถึงคุณภาพของเว็บหน้า�ร� ที่ไม่สามารถดึงดูดให้ผู้ใช้คลิ�ต่อไปยังส่วนอื่นๆ ของค่ายได้ หลังจา�ที่ทีมงานได้มาช่วย�ันวิเคราะห์ถึงปั�หานี้�็สรุปได้ว่าหน้า�ร�เป็นอะไรที่เน้นข้อความมา� �ละไม่ดูดึงดูดเท่าหน้า�ิจ�รรมค่าย (ซึ่งเป็นหน้าที่สอง) นอ�จา�นี้�ล้วในหน้า�ร�ยังไม่มีลิงค์ที่เห็นได้ชัดที่จะให้คลิ�ต่อได้มา�เท่าที่ควร จา�ทั้งหมดทั้งมวลนี้จึงทำให้เ�ิดดีไซน์ใหม่อย่างที่เห็น นั่นคือ�ารพยายามดึงรายละเอียดของ�ิจ�รรม รวมถึงมิวสิ�วีดีโอค่ายเ�่าซึ่งถือได้ว่าเป็นข้อมูลที่มีความน่าสนใจในตัวมาอยู่ในหน้า�ร� �ละสามารถคลิ�ดูผ่านๆ ได้อย่างรวดเร็วโดยไม่ต้องขึ้นหน้าใหม่ เพื่อให้ผู้ใช้รู้สึ�ดีที่จะคลิ�มา��ว่า�ารขึ้นหน้าใหม่ที่ต้องเสียเวลาโหลดเพิ่มเติมอี� นั่นเอง

#6 – ถึงเวลาของà¸�าร…à¸�ำจัด IE6

เป็นที่รู้à¸�ันในวงà¸�ารเหล่านัà¸�พัฒนาเว็บไซต์ว่า Internet Explorer 6 นั้นถือว่าเป็นเบราว์เซอร์เà¸�่าที่มีปัà¸�หาในà¸�ารรองรับมาตรà¸�านเว็บใหม่ๆ หลายๆ ตัวมาà¸�มาย à¹�ต่เนื่องจาà¸�ว่าผู้ใช้ส่วนใหà¸�่จำนวนมาà¸�à¸�็ยังใช้ IE6 ไม่ว่าจะด้วยเหตุผลที่ไม่ได้อัปเà¸�รด หรือยังมีความจำเป็นที่จะต้องใช้บางเว็บที่เข้าได้เฉพาะ IE6 เท่านั้น (เช่นหน้าà¸�ารทำงานบางอย่างในองค์à¸�ร) จึงทำให้ IE6 ยังเหลือรอดอยู่เยอะพอสมควรทีเดียว ตามข้อมูลในรอบเดือนมิถุนายน – à¸�รà¸�ฎาคม 2552 ที่ผ่านมา มีผู้ใช้จำนวนประมาณ 40% จาà¸�ทั้งหมดที่เข้าเว็บคิวบิà¸�ครีเอทีฟด้วย IE6 ซึ่งถือว่าเป็นตัวเลขที่มาà¸�โขอยู่ทีเดียว

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

ตั้ง�ต่ประมาณ 1 เดือนที่�ล้ว ถ้าใครเข้าหน้า�ร�ของคิวบิ�ฯ จะพบข้อความเล็�ๆ ด้านบนเพื่อเตือนให้อัปเ�รด IE �ต่ปั�หาที่สำคั�คือ เราจะบอ�ให้ผู้ใช้ทราบถึงประโยชน์ของ�ารใช้ IE6 ในมุมผู้ใช้ได้อย่างไร? ล่าสุดในเว็บ CPHCX1 หา�ใครเข้าด้วย IE6 จะมีข้อความขึ้นตัวโตๆ ตอน�ร�ชัดๆ เพื่อเตือน �ละ�สดงภาพเปรียบเทียบเว็บ CPHCX1 ที่เข้าด้วย IE6 �ละเบราวเซอร์อื่นๆ ให้เห็น�ันจะๆ พร้อม�ับเพิ่มเมนูอัปเ�รด IE ที่ด้านบนให้เห็น�ันชัดๆ อี�ด้วย

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

ซึ่ง�็น่าตื่นเต้นไม่น้อยเลยนะครับ ว่าจะมีอะไรที่ดีขึ้นได้อี�ในเว็บไซต์ของเรา อย่างไร�็ตามถ้าใครมีไอเดียหรือข้อเสนอ�นะใดๆ พว�เรา�็ยินดีครับ