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

siamhtml-customization 

Customization ใน Siam HTML เวอร์ชัน 5
การออกแบบคือการแก้ปัญหาของ 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 ไม่ได้อะไรเลย หากมันลำบากแล้วล่ะก็ เค้าก็คงไม่ดิ้นรนมากนัก

siamhtml-fixed-header 

Fixed Header ใน Siam HTML เวอร์ชัน 5

โจทย์ของปุ่มแชร์ใน Siam HTML ก็คือ เมื่อ users เข้ามาในหน้าอ่านจะต้องเห็นจำนวนแชร์ของเนื้อหานั้นในทันที และเมื่ออ่านเนื้อหาจบแล้ว users ยังสามารถกดแชร์ได้ง่ายอีกด้วย เราจึงเลือกใช้วิธีแสดงจำนวนแชร์ไว้ที่มุมซ้ายบน ซึ่งเป็นตำแหน่งที่สะดุดตามากที่สุด แล้วพอเลื่อนหน้าลงมา ก็ให้ย้ายปุ่มแชร์มาไว้ในส่วนของ header ซึ่งจะยึดติดอยู่ที่ด้านบนของเว็บตลอด กลไกนี้ไม่ได้ใช้แค่ใน mobile แต่จะนำไปใช้ในทุกๆ ขนาดของหน้าจอ เพราะ users จะได้รู้สึกคุ้นเคยและกดแชร์ได้สะดวก

จริงๆ แล้วเราไม่ค่อยอยากใช้ fixed header เท่าไรนัก เนื่องจากมันจะไปทำให้พื้นที่ด้านบนเสียไปเล็กน้อย โดยเฉพาะใน mobile ที่หน้าจอมีความสูงไม่มากนัก พื้นที่ความสูงขนาด 44px นั้นถือว่ามีความหมายพอสมควรเลยทีเดียว ซึ่งหน้าจอขนาดที่ได้รับผลกระทบมากที่สุดคงหนีไม่พ้น 320×480 หรือหน้าจอของ iPhone4/4s นั่นเอง

แต่เมื่อเราได้ดูสถิติแล้วจึงพบว่า mobile users ของ Siam HTML นั้นมีอยู่ประมาณ 16% ที่ยังใช้หน้าจอขนาดนี้อยู่ และยังมีแนวโน้มที่จะลดลงไปเรื่อยๆ อีกด้วย โดยหน้าจอขนาดที่เข้ามาชม Siam HTML มากที่สุดจะเป็น 320×568 หรือ 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 ไอเดียนั้นมีเหตุผล และเป็นไอเดียที่ดีทั้งคู่ แต่ไอเดียทั้งสองนั้นยังคงมีข้อบกพร่องเล็กๆ อยู่

siamhtml-contact-form 

Contact Form ใน Siam HTML เวอร์ชัน 5

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 รู้สึกพึงพอใจ

(Visited 2,337 times, 1 visits today)

9 Responses to “Siam HTML Redesign – มีอะไรใหม่ในเวอร์ชันที่ 5”

  1. Manesz says:

    เยี่ยมมากคัฟ

  2. Somporn Puntong says:

    ผมชอบ idea ของ contact form นะ
    แจ่มมากมากเลยครับ (*__*)
    ได้พื้นที่เพิ่มและ caption ยังอยู่ครบ
    พอจะบอกวิธีการทำได้ไหมครับ
    ว่ามีขั้นตอนการทำยังไงมั้งครับ

  3. fox says:

    ปุ่มแชร์ใช้วิธีเช็คตำแหน่งของ scroll เอาใช่ไหมครับ
    หรือใช้ plugin เลย

    • Siam HTML says:

      เราเขียน js ดัก scroll เอาครับ
      พวก plugin อย่าง jQuery Waypoints เหมือนมันจะมี bug เวลารีเฟรชหน้าแล้วมันจะเพี้ยนๆ น่ะครับ

  4. ขอแนะนำเพิ่มนิดนึงครับ คือส่วน fixed header พอสกรอลลงแล้วจะหาทางกลับหน้าแรกไม่เจอเลยครับ (ที่ footer ก็ไม่มีลิงค์ไปยัง home ด้วย) ทีนี้พอสกรอลกลับขึ้นไปข้างบน ไตเติลบนความมันก็กลายร่างเป็นโลโก้ SiamHTML ซึ่งผมว่ามันไม่ค่อย make sense ว่าจะคลิกกลับหน้าแรกได้ครับ

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

    • Siam HTML says:

      ขอบคุณสำหรับคำแนะนำมากๆ ครับ เป็นอย่างที่คุณ Jirayu ว่าจริงๆ ครับ
      จริงๆ แล้ว mechanic ของ Siam HTML ในการ Go to Top จะเป็นการเลื่อน mouse ไปที่ด้านซ้ายสุดของหน้าจอนะครับ ซึ่งผมตั้งใจไม่ออกแบบ feature นี้ให้ visible จึงทำให้มีผู้ใช้ที่งานที่รู้จัก feature นี้ค่อนข้างน้อยครับ
      แต่เราเห็นด้วยครับว่าควรปรับให้ใช้งานได้ง่ายขึ้น ระหว่างนี้จึงขอแนะนำให้ใช้วิธีดังกล่าวไปก่อนนะครับ
      ขอขอบคุณอีกครั้งนะครับ สำหรับคำแนะนำดีๆ ^_^

Leave a Reply