Siam HTML Redesign — มีอะไรใหม่ในเวอร์ชันที่ 5
สำหรับแฟนๆ ของ Siam HTML คงจะทราบกันดีอยู่แล้วว่า Siam HTML มีการ Redesign บ่อยมาก และล่าสุดก็ได้พัฒนามาจนถึงเวอร์ชันที่ 5 แล้ว วันนี้เราจะมาดูกันว่าในเวอร์ชันนี้ มีอะไรใหม่บ้าง ?
ทำไมถึงต้อง Redesign บ่อยๆ ?
อย่างที่เราได้บอกไปแล้วในหลายๆ บทความว่า “Design” คือ “การแก้ปัญหา” การที่เรา redesign ค่อนข้างบ่อยนั้นเป็นเพราะว่าเรามองเห็นปัญหาที่ยังไม่ได้แก้ไขในเวอร์ชันก่อนๆ แค่เหตุผลนี้ก็เพียงพอแล้วที่เราจำเป็นจะต้อง redesign เพื่อที่จะมอบ experience ที่ดีที่สุดให้กับ users เท่าที่เว็บๆ หนึ่งจะพึงทำได้
แปลว่าเวอร์ชันที่ผ่านๆ มานั้นมีข้อผิดพลาด ?
ถูกต้องแล้วครับ ทุกครั้งที่เราได้แก้ปัญหาภายในเว็บ จะมีทั้งที่แก้ได้สำเร็จ และไม่สำเร็จ เราพยายามถาม users ถึงความรู้สึกเวลาที่เค้าเข้ามาใช้ Siam HTML ว่าเค้ารู้สึกอย่างไร ชอบตรงไหน ไม่ชอบตรงไหน อยากให้มีอะไรเพิ่มเติมบ้าง ? ในหลายๆ ครั้ง ข้อมูลที่เราได้มาจาก users นั้น ทำให้เราประหลาดใจ เพราะมันเป็นมุมมองที่เราไม่เคยมองมาก่อน นั่นยิ่งช่วยตอกย้ำว่าไม่มีใครในโลกที่จะสามารถคิดแทนคนอื่นๆ ได้ทั้งหมด
ปัญหาที่ต้องแก้มีอะไรบ้าง ?
Scan เนื้อหาลำบาก
การออกแบบหน้าเว็บควรออกแบบเพื่อการ Scan มากกว่าการ Read
เนื่องจากเวลาของ users มีค่า ดังนั้นพวกเค้าไม่ยอมเสียเวลามาอ่านข้อความยาวๆ โดยไม่จำเป็นอย่างแน่นอน การออกแบบหน้าเว็บโดยเฉพาะหน้าแรก จึงควรออกแบบเพื่อการ scan มากกว่าการ read คือทำอย่างไรก็ได้ให้ users หาของที่เค้าต้องการเจอโดยใช้เวลาน้อยที่สุด ความยากมันอยู่ตรงที่ หากเราทำให้บางสิ่งดูเด่นกว่าสิ่งอื่นๆ นั่นหมายความว่าเรากำลังทำให้หลายๆ สิ่งดูด้อยลงไปด้วย
ไม่เพียงแค่หน้าแรก ที่เราต้องออกแบบให้ users สามารถ scan ได้ง่าย แต่หน้าอ่านเนื้อหาก็สำคัญเช่นเดียวกัน หลายๆ บทความของ Siam HTML นั้นยาวมาก ซึ่งถ้าคนที่ไม่เคยเข้าเว็บนี้มาก่อน ส่วนใหญ่ก็คงไม่ทนอ่านจนจบอย่างแน่นอน แต่สำหรับคนที่เข้ามาอ่านเป็นประจำ อาจจะยอมอ่านจนจบ เพราะเชื่อว่าน่าจะมีประโยชน์กับเค้าแน่ๆ แล้วเราควรจะออกแบบหน้าอ่านเนื้อหาอย่างไร ให้คนยอมอ่านบทความยาวๆ กันล่ะ ?
Share เนื้อหาลำบาก
ใครๆ ก็อยากให้ผู้ที่เข้ามาอ่านแชร์เนื้อหาของตนเองทั้งนั้น แต่จากประสบการณ์ของเราแล้ว การที่ผู้อ่านจะแชร์เนื้อหานั้น มันไม่ใช่เรื่องง่ายๆ เลย ยิ่งใน mobile ยิ่งแล้วใหญ่ หากหนทางในการกดปุ่มแชร์เนื้อหานั้นยากลำบากเกินไป พวกเค้าไม่มีทางดิ้นรนเพื่อที่จะแชร์แน่ๆ
Form ใช้งานลำบาก
จากการสำรวจพบว่าการออกแบบ form ที่ดี สามารถช่วยเพิ่มโอกาสที่ users จะกรอก form ได้สำเร็จ นั่นหมายความว่ามันจะช่วยเพิ่มโอกาสให้กับธุรกิจของเราด้วย ความท้าทายของการออกแบบ form มันอยู่ตรงที่เราจะออกแบบอย่างไรให้ form ยังใช้งานง่ายอยู่ แม้ว่าจะดูด้วย mobile
แล้ว Siam HTML แก้ปัญหาอย่างไร ?
Homepage
เมื่อเรานำสถิติจาก Google Analytics มาวิเคราะห์ดู เราก็แปลกใจไม่น้อย เพราะเนื้อหาที่อยู่ส่วนบนของเว็บกลับมีคนกดเข้าไปดูน้อยกว่าที่เราคิด ทั้งๆ ที่มันน่าจะเป็นส่วนที่สะดุดตามากที่สุด ส่วนเนื้อหาในส่วนของ coding ที่มีลักษณะเป็น list ยาว 15 รายการติดต่อกันนั้นก็ไม่ค่อยมีคนสนใจเท่าไรนัก ทำไมถึงเป็นเช่นนี้ ?
หลังจากวิเคราะห์หาสาเหตุดู เราก็พอจะได้คำตอบในใจ จริงอยู่ที่การ scan ของคนเรานั้นจะเป็นรูปตัว F แต่หากสิ่งที่เค้า scan นั้นมีหลายคอลัมน์ การ scan นั้นจะไม่ได้เป็นรูปตัว F อีกต่อไป users จะเริ่ม scan คอลัมน์ทั้งหมดแบบคร่าวๆ ก่อน ว่ามันมีกี่คอลัมน์ และคอลัมน์ไหนน่าสนใจ เมื่อพบคอลัมน์ที่น่าสนใจแล้ว เค้าจึงค่อย scan เฉพาะคอลัมน์นั้นแบบละเอียดมากขึ้น ซึ่งหากคอลัมน์นั้นมีความกว้างไม่มากนัก เค้าก็จะ scan เป็นรูปตัว I(ไอ)
แต่เดิมนั้น ส่วนบนของหน้าแรกมีอยู่ 3 คอลัมน์ด้วยกัน การมีหลายคอลัมน์จะส่งผลดีตรงที่หาก users เลือกที่จะ scan เฉพาะคอลัมน์ใดคอลัมน์หนึ่งแล้ว เนื้อหาในคอลัมน์นั้นๆ จะไม่พลาดไปจากสายตาของ users ง่ายๆ แต่กลับมีข้อเสียตรงที่ มันจะไปทำให้ users ต้องใช้เวลา scan นานขึ้น เค้าจะต้องไล่ scan ไปทีละคอลัมน์ และถ้าเค้าเร่งรีบอยู่ เค้าอาจจะไม่ scan คอลัมน์ที่เหลือต่อทั้งคอลัมน์เลยก็ได้
แต่เนื่องจาก container ของ Siam HTML มีความกว้างมากถึง 1280px การที่จะลดจำนวนคอลัมน์ลงให้เหลือแค่ 2 คอลัมน์จะทำให้ความกว้างของคอลัมน์นั้นมากเกินไป เราจึงเลือกที่จะแก้ปัญหาโดยการเพิ่มขนาดของรูป thumbnail ให้ใหญ่ขึ้น ซึ่งจะทำให้เนื้อหาในหน้าจอแรกที่ users เห็น มีจำนวนน้อยลง และการใช้รูปที่ใหญ่ขึ้นก็จะทำให้เนื้อหาดูสะดุดตา ง่ายต่อการ scan มากขึ้น
ธรรมชาติของคนเรามักจะให้ความสำคัญกับสิ่งของชิ้นแรกและชิ้นสุดท้ายมากกว่าชิ้นที่อยู่ตรงกลาง
นอกจากการปรับส่วนบนของหน้าแรกแล้ว เรายังได้ปรับการเรียงเนื้อหาในแต่ละ section อีกด้วย จากการทดลอง Eye Tracking พบว่าหากมีสิ่งของวางเรียงต่อๆ กัน 10 ชิ้น ชิ้นที่คนดูมากๆ แน่นอนว่าต้องเป็นชิ้นแรกสุด ส่วนชิ้นที่ 2 หรือ 3 ก็จะมีคนดูรองลงมา แต่ที่น่าประหลาดใจก็คือชิ้นที่ 10 และ 9 ที่กลับมีคนดูมากกว่าชิ้นที่อยู่กลางๆ เสียอีก การทดลองนี้สะท้อนให้เห็นถึงธรรมชาติการ scan ของคนเราที่มักจะให้ความสำคัญกับสิ่งของชิ้นแรกและชิ้นสุดท้ายมากกว่าชิ้นที่อยู่ตรงกลางๆ นั่นหมายความว่าการวางเนื้อหาเรียงต่อๆ กันในแนวตั้งยาวต่อๆ ไปเรื่อยๆ ไม่เป็นผลดีกับการ scan เลย เราจึงแก้ปัญหาโดยการลดจำนวนเนื้อหาจาก 15 เนื้อหา ให้เหลือเพียงแค่ 4 เนื้อหา แล้วแบ่งออกเป็น 2 คอลัมน์ เพื่อให้ users สามารถเห็นภาพรวมของเนื้อหาได้ดียิ่งขึ้น จะได้ไม่มีเนื้อหาไหนที่คลาดสายตาไปได้
Customization
การออกแบบคือการแก้ปัญหาของ users แต่เนื่องจาก users นั้นมีความหลากหลาย แต่ละคนต่างก็มีความคิดเป็นของตัวเอง ด้วยเหตุนี้เอง Siam HTML จึงพยายามลดความแตกต่างตรงนี้ โดยการนำ customization เข้ามาช่วย เราเพิ่ม preferences เพื่อให้ users สามารถปรับขนาดของตัวอักษรได้ สามารถปรับ layout ได้ รวมไปถึงรูปแบบการวางเนื้อหาในหน้าอ่าน สิ่งเหล่านี้แต่ละคนชอบไม่เหมือนกัน การนำ customization เข้ามาใช้จึงเหมือนเป็นการเพิ่มทางเลือกให้กับ users เค้าสามารถปรับขนาดตัวอักษรให้เป็นแบบ S ใน pc แต่อาจปรับเป็น L ใน mobile หรือบางคนชอบอ่านเว็บแนวเรียบง่าย ก็อาจเปลี่ยน Mode ให้เป็นแบบ Lite ส่วนรูปแบบของเนื้อหาในหน้าอ่านนั้นก็สามารถปรับได้เช่นกัน โดย Magazine จะคล้ายกับการอ่านนิตยสารคือจะมีลูกเล่นมากกว่า ซึ่งจะเหมาะในการ scan ส่วน Book นั้น เนื้อหาจะวางคล้ายกับการอ่านหนังสือทั่วไป คือจะเน้นไปที่ความเรียบง่าย แต่จะ scan ได้ยากกว่า
Fixed Header
ตำแหน่งของปุ่มแชร์นั้นมีผลกับจำนวนแชร์ของเนื้อหาเป็นอย่างมาก
เนื่องจากมี users ไม่น้อยเลยที่เข้าใช้ Siam HTML ผ่าน mobile และจากบทความของเว็บไซต์ชื่อดังของไทยเว็บหนึ่งได้กล่าวไว้ว่าตำแหน่งของปุ่มแชร์นั้นมีผลกับจำนวนแชร์ของเนื้อหาเป็นอย่างมาก คำถามก็คือแล้วปุ่มแชร์ในหน้าอ่านของ mobile ควรจะอยู่ตรงไหน ?
สมมติเราวางปุ่มนี้ได้ด้านบน ใกล้ๆ กับ title ของเนื้อหา users จะรู้ได้ทันทีว่าเนื้อหานี้มีคนแชร์มากน้อยแค่ไหน หากมีคนแชร์เยอะมากๆ เค้าอาจจะยอมอ่านจนจบ เพราะคิดว่าเนื้อหาจะต้องมีอะไรน่าสนใจแน่ๆ แต่พอเค้าเลื่อนหน้าลงมาอ่านเรื่อยๆ จนจบ ปุ่มแชร์กับหลุดออกไปนอกจอ นั่นหมายความว่า users ต้องใช้ความพยายามในการเลื่อนหน้าจอกลับขึ้นไปเพียงเพื่อที่จะแชร์เนื้อหานี้ อย่าลืมว่าการแชร์นั้น users ไม่ได้อะไรเลย หากมันลำบากแล้วล่ะก็ เค้าก็คงไม่ดิ้นรนมากนัก
โจทย์ของปุ่มแชร์ใน Siam HTML ก็คือ เมื่อ users เข้ามาในหน้าอ่านจะต้องเห็นจำนวนแชร์ของเนื้อหานั้นในทันที และเมื่ออ่านเนื้อหาจบแล้ว users ยังสามารถกดแชร์ได้ง่ายอีกด้วย เราจึงเลือกใช้วิธีแสดงจำนวนแชร์ไว้ที่มุมซ้ายบน ซึ่งเป็นตำแหน่งที่สะดุดตามากที่สุด แล้วพอเลื่อนหน้าลงมา ก็ให้ย้ายปุ่มแชร์มาไว้ในส่วนของ header ซึ่งจะยึดติดอยู่ที่ด้านบนของเว็บตลอด กลไกนี้ไม่ได้ใช้แค่ใน mobile แต่จะนำไปใช้ในทุกๆ ขนาดของหน้าจอ เพราะ users จะได้รู้สึกคุ้นเคยและกดแชร์ได้สะดวก
จริงๆ แล้วเราไม่ค่อยอยากใช้ fixed header เท่าไรนัก เนื่องจากมันจะไปทำให้พื้นที่ด้านบนเสียไปเล็กน้อย โดยเฉพาะใน mobile ที่หน้าจอมีความสูงไม่มากนัก พื้นที่ความสูงขนาด 44px นั้นถือว่ามีความหมายพอสมควรเลยทีเดียว ซึ่งหน้าจอขนาดที่ได้รับผลกระทบมากที่สุดคงหนีไม่พ้น 320x480 หรือหน้าจอของ iPhone4/4s นั่นเอง
แต่เมื่อเราได้ดูสถิติแล้วจึงพบว่า mobile users ของ Siam HTML นั้นมีอยู่ประมาณ 16% ที่ยังใช้หน้าจอขนาดนี้อยู่ และยังมีแนวโน้มที่จะลดลงไปเรื่อยๆ อีกด้วย โดยหน้าจอขนาดที่เข้ามาชม Siam HTML มากที่สุดจะเป็น 320x568 หรือ iPhone5/5s นั่นเอง เมื่อลองชั่งน้ำหนักดูแล้ว เราตัดสินใจใช้ fixed header เพราะมองว่ามันมีข้อดีมากกว่าข้อเสีย และหลังจากที่ได้ลองใช้ใน iphone4 แล้ว ก็พบว่า header ที่ fixed เอาไว้นั้น ไม่ได้ทำให้หงุดหงิดอะไรมากนัก
Contact Form
โจทย์ของ Form ก็คือ จะต้องประหยัดพื้นที่ และไม่ทำให้ Users งงว่าเค้ากำลังกรอกข้อมูลอะไรอยู่
จะว่าไปแล้ว เรื่อง contact form นั้น ยังไม่เชิงเป็นปัญหาเท่าไรนัก เพราะ users ยังสามารถใช้งานได้ดีในระดับหนึ่งอยู่ แต่การปรับ contact form ในเวอร์ชันที่ 5 นี้ ถือเป็นการพัฒนาให้ดียิ่งขึ้น
การออกแบบ form นั้นดูเหมือนไม่มีอะไรมากนัก ทุกคนคงจะนึกถึงภาพที่มี label อยู่ด้านซ้าย และ input อยู่ด้านขวา ซึ่งเราเห็นได้ตามเว็บทั่วไปจนชินตา แต่ความท้าท้ายของมันอยู่ที่การออกแบบ form นั้น ให้ทำหน้าที่ได้ดีเหมือนเดิม แม้จะอยู่ใน mobile
หลายๆ คนบอกว่า “ไม่เห็นยากเลย เราก็แค่เปลี่ยนมาเรียง label กับ input ให้อยู่ในแนวตั้ง” หรืออาจบอกว่า “ใช้ placeholder สิ จะได้ไม่เปลืองเนื้อที่ หน้าจอ mobile มันเล็กมากนะ” จะเห็นว่าทั้ง 2 ไอเดียนั้นมีเหตุผล และเป็นไอเดียที่ดีทั้งคู่ แต่ไอเดียทั้งสองนั้นยังคงมีข้อบกพร่องเล็กๆ อยู่
label นั้นมีไว้บอกว่า input นี้มันคืออะไร ส่วน placeholder นั้นเป็นเหมือน hint ที่จะช่วยบอก users ว่า input นี้ควรกรอกข้อมูลอย่างไร เราจะเห็นว่าทั้ง 2 อย่างนี้ทำหน้าที่ต่างกัน ไอเดียแรกที่เสนอว่าให้เรียง label กับ input ต่อกันในแนวตั้งนั้นมีข้อเสียตรงที่ form จะยาวขึ้น เพราะจะเสียพื้นที่ไปเยอะ ส่วนไอเดียที่เสนอให้ใช้ placeholder ในการบอกว่า input นี้คืออะไรจะมีข้อดีตรงที่มันประหยัดพื้นที่ได้มาก แต่เมื่อไรที่ users ได้กรอกข้อมูลลงใน input เราจะพบว่า placeholder นั้นหายไป ซึ่งอาจทำให้ users ลืมไปว่าเค้ากำลังกรอกข้อมูลอะไรอยู่ นี่ถือเป็นข้อเสียที่เกิดจากการใช้ placeholder ทำหน้าที่แทน label
โจทย์ของ form ก็คือ จะต้องประหยัดพื้นที่ และไม่ทำให้ users งงว่าเค้ากำลังกรอกข้อมูลอะไรอยู่ วิธีของ Siam HTML ก็คือใช้ไอเดียที่ 2 หลัก แล้วแก้ปัญหาเรื่อง placeholder หายตอนกรอกข้อมูลโดยการให้ label แสดงขึ้นมาแทน จะเห็นว่าวิธีนี้ ทั้งประหยัดพื้นที่ และไม่ทำให้ users สับสน
ไม่มีอาชีพ UX Designer ในโลก
หลายๆ คน คงจะเคยได้ยินคำว่า “UX Designer” แต่สำหรับเราแล้ว อาชีพนี้ไม่มีอยู่จริง เพราะ UX หรือ User Experience นั้นมีคนเดียวที่สร้างได้ก็คือตัว user คนนั้นนั่นเอง designer อย่างเราทำได้เพียงแค่สร้าง “บางสิ่ง” ที่ “คาดหวัง” ว่ามันจะไปช่วยให้ users คนนั้นรู้สึกพึงพอใจ แม้แต่ UI ที่ดีที่สุด ก็ไม่แน่ว่า users ทุกคนที่ได้ลองใช้จะชอบทั้งหมด เช่นเดียวกับ Siam HTML ในเวอร์ชันนี้ ที่บางคนอาจจะยังไม่ชอบในบางจุด หรือหลายๆ จุด แต่เราจะยังคงพัฒนาต่อไป เราจะรับฟังความคิดเห็นจาก users ทุกคน แล้วนำมาปรับปรุงแก้ไข ไม่ว่าเค้าจะเป็นเด็ก เป็นคนแก่ หรือแม้แต่คนเมา เพราะว่าพวกเค้าได้ขึ้นชื่อว่าเป็น users ของเราไปแล้วนั่นเอง
Designer มีหน้าที่สร้าง “บางสิ่ง” ที่ “คาดหวัง” ว่ามันจะช่วยให้ Users รู้สึกพึงพอใจ
