เว็บ 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 นี้ครับ ซึ่งแม้ว่าทุกวันนี้พวกเราเองจะกล้าพูดกันเต็มปากเต็มคำมากๆ ว่าเว็บไซต์ของพวกเราถือได้ว่าอยู่สูงกว่ามาตรฐานทั่วไปโดยเฉพาะอย่างยิ่งในประเทศไทยอยู่มาก แต่จริงๆ แล้วตอนนี้แม้แต่ผมเองก็ยังเห็นข้อเสียและจุดที่เราจะปรับปรุงแก้ไขต่อไปได้อีกมากทีเดียวครับ

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