รีวิวเว็บ รีวิวเว็บ Set.or.th By uiblogaziner June 20, 20154414 views ShareTweet 1 เนื่องในโอกาสครบรอบ 40 ปีกับตลาดหุ้นไทย ทางตลาดหลักทรัพย์จึงมีแนวคิดที่จะเปลี่ยนแปลงเว็บ Set.or.th ให้ทันกับดีไซน์สมัยใหม่ รูปโฉมของเว็บจึงเป็นแนว Flat Design และเป็น Responsive Web ที่ทำออกมาดูดีใช้ได้เลยครับ หน้าแสดงภาพโปรโมทก่อนเข้าหน้าเว็บหลัก หากเราเข้าเว็บไซต์ในช่วงนี้ (ตอนที่ผมเขียนคือ มิ.ย. 58) จะต้องผ่านหน้าโฆษณาเสียก่อน ถึงจะสามารถเข้าสู่หน้าเว็บไซต์หลักได้ รูปแบบวิธีการนี้ผมเห็นว่าล้าสมัยแล้วน่ะครับ ถ้าเราอยากจะโฆษณาอะไรก็ควรไปทำในหน้าหลักเลยดีกว่า เพราะมันเป็นการขัดขวางการใช้งานเว็บที่ไม่คุ้มกับเวลาและผลลัพธ์ที่ได้ครับ หน้าเว็บหลักของ Set.or.th หน้าหลักของเว็บทำออกมาดูดีมีสัดส่วนดีครับ สีสันและธีมก็แสดงออกถึงแบรนด์ของตัวองค์กรได้เป็นอย่างดี ด้วยการใช้โทนสีเหลือง, ดำ, และเทา เป็นกลุ่มสีหลัก แต่ถ้าดูในรายละเอียด ผมมองเห็นหลายจุดที่ควรปรับปรุง แม้จะไม่ใช่เรื่องใหญ่ถึงขนาดทำให้เว็บใช้งานไม่ได้ แต่ก็เป็นสิ่งไม่ควรมองข้ามในฐานะ UI/UX designer ครับ งั้นเรามาวิแคะ (เคราะห์) กันเป็นส่วนๆ เลยแล้วกัน 1. Slideshow Slideshow บนหน้าเว็บหลัก ลูกศรที่ใช้สำหรับเลื่อนภาพไปข้างหน้า/ไปข้างหลัง ผมมองว่ามันค่อนข้างกลืนกับภาพที่เป็นโทนสีอ่อน และระยะห่างจากขอบค่อนข้างมากไป ทำให้คนออกแบบแบนเนอร์อาจต้องระวังเรื่องการวางข้อความที่สำคัญในตำแหน่งเดียวกับลูกศร ซึ่งไม่ดีแน่ถ้าต้องมาคอยหลบทางให้กับลูกศรที่มีตำแหน่งแปลกๆ อย่างงี้ แล้วก็จุดบอกจำนวนสไลด์ก็เช่นกัน สีมันกลืนกับภาพโทนอ่อนและยังไปบดบังทัศนียภาพของแบนเนอร์อีก Wireframe ของ Slideshow ที่นำเสนอ ที่ควรทำก็อาจจะทำลูกศรวางไว้ด้านขอบซ้าย/ขวาของ slideshow เลย โดยมีพื้นหลังสีเข้มและโปร่งใสวางรับอยู่ด้านหลัง และเพิ่มเงื่อนไขเข้าไปว่า ให้แสดงลูกศรในครั้งแรกที่หน้านี้โหลดขึ้นมา และจะซ่อนก็ต่อเมื่อยูสเซอร์เลื่อนเมาส์ออกจากส่วนนี้ไป คือ เช็คว่ามีเมาส์เข้ามาวางบน slideshow ครั้งแรก หรือไม่? ถ้ามี พอเลื่อนเมาส์ออกจากส่วน slideshow ก็ให้ซ่อนลูกศร หลังจากนั้นถ้าเมาส์อยู่บน slideshow ให้แสดงลูกศรตลอด และเมื่อเมาส์ออกจาก slideshow ให้ซ่อนลูกศร ด้วยวิธีการนี้จะทำให้เราได้พื้นที่แสดงแบนเนอร์แบบเต็มตา โดยที่บอกให้ยูสเซอร์ทราบว่ามีลูกศรที่สามารถคลิกเลื่อนภาพได้นะ เพียงแต่ต้องเอาเมาส์มาวางบนภาพเสียก่อนถึงจะเห็นลูกศร 2. เมนูด้านบน เมนูและลิงค์ในหน้าหลัก ตรงบริเวณเลือกภาษา เราควรทำให้รู้ว่าตอนนี้กำลังเลือกภาษาใดอยู่ด้วยการทำลิงค์ให้สีต่างกับอันอื่น ฟังก์ชันที่ไม่จำเป็น เช่น พิมพ์หน้านี้ ก็สามารถเอาออกได้ เพราะถ้าเราไม่ได้เขียน HTML + CSS ให้รองรับฟังก์ชันนี้อย่างถูกต้องแล้ว มันก็จะเหมือนกับที่เราสั่งพิมพ์ด้วยเมนูของ Browser ไม่ต่างกัน แล้วก็พอผมเอาเมาส์ไปวางบนไอคอนค้นหา ตรงช่อง Search ไอคอนเปลี่ยนสี ซึ่งทำถูกต้องแล้ว แต่ทว่าในช่อง Get Quote กลับเป็นสีเทาเหมือนเดิม อันนี้ผิดหลักความสอดคล้องด้านดีไซน์ (Design Consistency) ครับ สิ่งที่ทำฟังก์ชันเหมือนกันก็ควรตอบสนองเหมือนกันใช่ไหมครับ? การแสดงผลเมื่อเลือกเปลี่ยนภาษา นอกจากนี้พอผมกดเลือกภาษาญ๊่ปุ่น เมนูเลือกภาษากลับหายไปเฉยเลย ข้อความบนเมนูก็ถูกแปลเป็นภาษาอังกฤษ ที่ถูกแปลเป็นภาษาญี่ปุ่นก็แค่ในส่วนเนื้อหาเท่านั้น 3. ข้อมูลหุ้น ทางลัดดูข้อมูลราคาหุ้นบนหน้าหลัก เมื่อเราอยู่ในหน้าแรกและใส่ชื่อย่อหุ้นตรงช่อง Get Quote เว็บจะแสดงผลลัพธ์ราคาหุ้นบนหน้านี้ให้เราเห็นเลย โดยแสดงให้เห็นทางด้านล่างของช่องใส่ชื่อย่อหุ้นเลื่อนขึ้นมาแทรกจากด้านล่าง ซึ่งผมชอบแนวคิดนี้มากๆ เพราะไม่ต้องเสียเวลาไปโหลดหน้าใหม่ คนเล่นหุ้นจะรู้ดี เพราะเวลาจะดูราคาหุ้นทีไร มักจะดูหลายๆ ตัว (ซื้อหลายตัว กระจายความเสี่ยงไง ^^!) ก็เลยต้องเสียเวลาโหลดหน้าใหม่อยู่หลายครั้ง การโชว์ส่วนราคาหุ้นโผล่มาด้านล่างในหน้าแรกนี้จึงเป็นสิ่งที่น่าชื่นชมจริงๆ แต่อย่างไรก็ตาม ตรงแท็บเมนูย่อยของหุ้นแต่ละตัว เมื่อเปรียบเทียบกับเวลาเราเปิดจากหน้าแรก (ตรงกรอบสีแดงของรูปด้านบน) และเมื่อพอไปเลือกแท็บเมนูอันใดอันหนึ่งซึ่งจะโหลดหน้าใหม่ แนวการเรียงตัวของแท็บเมนูย่อยกลับต่างกัน หน้าแสดงรายละเอียดหุ้น แนวการเรียงตัวของแท็บเมนูย่อยของหุ้นในหน้าแรกจะเป็นแนวตั้ง แต่พอผมคลิกเลือกแท็บเมนู ‘งบการเงิน/ผลประกอบการ’ ระบบจะโหลดหน้าใหม่ และเรียงตัวแท็บเมนูย่อยในแนวนอน อันนี้จะทำให้ยูสเซอร์งงๆ ได้นะครับ อยู่ดีๆ ก็เปลี่ยนที่เฉยเลย ถ้าเป็นไปได้ก็ควรเรียงในแนวนอนให้เหมือนกัน แต่ผมเข้าใจว่าด้วยเหตุผลด้านดีไซน์ มันจะเกิดพื้นที่ว่างเยอะในหน้าแรก หากเรียงเมนูในแนวนอน ดังนั้นเราอาจจะสามารถแก้ได้ด้วยการตีกรอบการแสดงผลหุ้นให้แคบลงที่คล้ายๆ popup ก็น่าจะเวิร์คนะครับ 4. ข้อความเตือนกลับ หน้าต่างแจ้งเตือนข้อผิดพลาด อันนี้คิดว่าผิดหลัก UI design อย่างแรงเลย ซึ่งผมเห็น popup แจ้งเตือนการกรอกข้อมูลผิดหลังจากที่กรอกอีเมลและรหัสผ่านผิดเพื่อเข้าสู่ระบบ (บางทีรอ 3-5 วินาทีกว่า popup จะแสดงผล) ตัวอย่างการออกแบบ UI ที่แจ้งเตือนข้อผิดพลาด จะดีกว่าหากสามารถแสดงข้อความตอบกลับ (Feedback) ตรงบริเวณใกล้กับที่เราให้ยูสเซอร์กรอกข้อมูลครับ มันเป็นเรื่องของสายตาที่กำลังจับจ้อง ณ จุดที่เสร็จสิ้นการกระทำและความสัมพันธ์ระหว่างวัตถุ ข้อความแจ้งเตือนที่อยู่ใกล้กับส่วนกรอกข้อมูลจะทำให้เราเห็นข้อความแจ้งกลับได้อย่างทันทีและรู้ว่าข้อความนั้นสัมพันธ์กับการกระทำอันล่าสุดของเราด้วยครับ หน้าต่างแจ้งเตือนข้อผิดพลาดของ browser ในหน้าลืมรหัสผ่านยิ่งไม่ดีใหญ่ครับ เพราะข้อความตอบกลับใช้ popup แจ้งเตือนของ browser ทำให้เราไม่ทราบแน่ชัดว่า ข้อผิดพลาดเกิดขึ้นเพราะการกระทำของเราหรือเป็นเพราะ browser กันแน่ ตัวอย่างแสดงตำแหน่งข้อความแจ้งเตือนที่เหมาะสม วิธีแก้ไขก็เหมือนเดิมครับ ให้เราแสดงข้อความผิดพลาด (Error message) บริเวณด้านบนของหน้า และบริเวณตรงช่องกรอกข้อมูลที่ไม่สมบูรณ์ก็ขึ้นข้อความว่าทำไมถึงผิด 5. Progress bar การเลือกใช้สีที่ไม่เข้ากับสถานะของ UI ในหน้าสมัครสมาชิก ด้านบนจะแสดงขั้นตอนต่างๆ ที่เราต้องผ่านและดำเนินการ แต่สีที่เลือกใช้สำหรับขั้นตอนที่ยังมาไม่ถึง ผมคิดว่ามันอ่อนเสียจนทำให้ยูสเซอร์อ่านลำบาก อันนี้ต้องแยกแยะให้ออกนะครับว่า กรณีนี้เราต้องการให้ยูสเซอร์สามารถอ่านข้อความได้ โดยที่บอกได้ว่าตนเองกำลังดำเนินการมาถึงขั้นตอนไหนแล้ว ความคิดที่อาจทำให้เข้าใจผิดก็คือ การเลือกสีที่แสดงถึงสถานะ disable (ไม่สามารถใช้งานได้) ซึ่งไม่ใช่สำหรับในกรณีนี้นะครับ เพราะขั้นตอนที่ยังมาไม่ถึงไม่ใช่มันใช้การไม่ได้ แต่เราเพียงแค่แยกมันออกจากขั้นตอนที่เรากำลังอยู่เท่านั้นเองครับ 6. ปุ่ม สไตล์ของปุ่มที่แตกต่างกันไปทั่วทั้งเว็บ การรักษาสไตล์ปุ่มและสถานะของปุ่มเมื่อเอาเมาส์ไปวาง (mouseover) ให้เหมือนกันทั้งเว็บ แม้จะดูเป็นเรื่องง่าย แต่เชื่อผมเถอะครับ มันกลับเป็นเรื่องยากอันดับต้นๆ ของการออกแบบเว็บเลยครับ หากไม่มีการทำ Stencil (ไฟล์หรือกลุ่มไฟล์ที่รวบรวมสไตล์ทั้งหมดสำหรับงานออกแบบหนึ่งๆ ไว้ในที่เดียว) ก็ยากที่แน่ใจได้ว่ามันจะเป็นไปในแนวทางเดียวกันทั้งเว็บ ยิ่งเป็นการออกแบบเว็บใหญ่ๆ หลายๆ ชั้นแล้ว ยิ่งต้องระวังเรื่องนี้เลยครับ เพราะไฟล์งานและรูปแบบจะมาจาก desinger หลายๆ คน การเลือกใช้สีที่ไม่ได้กระตุ้นการกดเมื่อเอาเมาส์วางบนปุ่ม และสีที่ใช้ตอนเมาส์วางบนปุ่ม สมัครเป็นสมาชิก กดที่นี่ ก็ไม่ควรใช้สีเทานะครับ เราต้องสีที่กระตุ้นหรือเพิ่มความมั่นใจให้กับยูสเซอร์ ไม่ใช่ไปลดหรือทำให้ยูสเซอร์เกิดความลังเล อย่างเช่น สีเทามันเหมือนกับทำให้ปุ่มนี้มัน disable หรือไม่พร้อมใช้งาน เป็นต้น 7. เมนูย่อย เมนูย่อยทางด้านซ้ายแสดงผลเกินหน้าจอ เมนูย่อยของเมนูหลักแสดงผลตกหน้าจอเนื่องจากมีรายการเยอะเกินไป เมนูส่วนย่อยควรดูแลไม่ให้ล้นตกจอไป แม้เราออกแบบเว็บบนหน้าจอที่ใหญ่ แต่ควรคำนึงถึงผู้ใช้ที่ส่วนใหญ่ยังคงดูเว็บผ่านโน้ตบุ๊คอีกเป็นจำนวนมากด้วยเช่นกัน 8. กราฟ การทำสไตล์เพื่อระบุกราฟที่กำลังเรียกดู ตรงส่วนแสดงกราฟเส้นก็ควรไฮไลท์หน่อยว่าตอนนี้เรากำลังดูกราฟของอะไรอยู่ อันทางขวาก็คือดีไซน์ที่ผมทำมาแนะนำ ซึ่งอันที่เรากำลังดูอยู่จะเป็นลิงค์ที่กดไม่ได้แล้ว และมีสไตล์ให้ต่างจากอันอื่นเพื่อบ่งบอกว่ากำลังดูกราฟไหนอยู่ 9. ช่องกรอกเมื่อลืมรหัส ฟอร์มกรอกข้อมูลเมื่อลืมรหัสผ่าน หน้าลืมรหัสผ่านดูเหมือนว่าจะไม่ได้ผ่านมือ designer เพราะดีไซน์ดูแปลก ไม่ค่อยได้สัดส่วนเท่าไรนัก ในหน้านี้เราสามารถลดภาระการเลือกของยูสเซอร์ได้ด้วยการรวมช่อง ‘ชื่อสมาชิก + หมายเลขบัตรประชาชน‘ ให้เป็นช่องเดียวกัน ช่องกรอกที่รวมเอาอีเมลและบัตรประชาชนเข้าไว้ด้วยกัน หลังจากนั้นก็เอาภาระนั้นมาไว้ในฝั่งของ developer เพื่อตรวจสอบว่าข้อมูลที่ยูสเซอร์ใส่เข้ามาเป็นข้อมูลรูปแบบใด (data validation) เราควรพยายามทำให้ยูสเซอร์เลือกน้อยๆ แม้จะทำให้ทางฝั่งผู้พัฒนาเสียเวลาและกำลัง แต่ก็คุ้มที่จะเสียนะครับ เพราะเรากำลังสื่อถึงความปรารถนาอันดีต่อยูสเซอร์ด้วยเบื้องหลังงานปิดทองหลังพระ 10. รายการ จุดด้านหน้ารายการและเส้นใต้ของลิงค์ที่ไม่จำเป็น รายการด้านขวา Related Info. ไม่ควรจะมีจุดไว้ด้านหน้าของแต่ละรายการ เพราะมีช่องว่าง (white space) เพียงพอที่จะแบ่งแยกแต่ละรายการแล้ว แนวของข้อความที่เป็นรายการควรจัดให้ตรงกัน รายการควรจัดให้อยู่ในแนวเดียวกัน แม้จะมีการขึ้นบรรทัดใหม่ก็ตาม 11. ลิงค์ย่อย การแสดงผลที่ต่างกันของลิงค์ย่อย สไตล์ของลิงค์ย่อยควรเก็บงานให้ละเอียด เช่นพอคลิกที่ลิงค์ ผลประกอบการสำคัญ (กราฟ) กลับมีขีดคั่นโผล่ขึ้นมาเฉยเลย สไตล์ที่แตกต่างกันของลิงค์ย่อย ยิ่งในหน้าเดียว สไตล์ลิงค์ย่อยกลับต่างกันอีก อาจสร้างความสับสนให้กับยูสเซอร์ในการพยายามทำความเข้าใจและเรียนรู้ UI ของเว็บ 12. การแสดงผลบนมือถือ ในหัวข้อนี้ผมจะขอกล่าวรวมๆ ในส่วนของตัวเว็บเมื่อแสดงบนมือถือนะครับ เพราะบางอย่างก็จะซ้ำกับหัวข้อด้านบน เพียงแต่อยากนำเสนอภาพของการรีวิวในทุกมุมมองและการใช้งานจริง การแสดงผลของ slideshow บนมือถือ อันดับแรก เรื่องตัวจุดบอกจำนวนสไลด์ ผมได้ชี้ให้เห็นแล้วว่า มันดูยากเมื่อวางไว้บนภาพ ซึ่งก็เห็นปัญหาชัดมากขึ้นเมื่อดูบนมือถือ ช่อง Get Quote ทีไม่กว้างเต็มพื้นที่ที่เหลือ ช่อง Get Quote ควรจะขยายให้สุดเต็มพื้นที่ไปเลย ยูสเซอร์จะได้คลิกกรอกได้ง่ายขึ้น การเลือกใช้คู่สีที่ผิดทำให้การอ่านมีความลำบาก สีพื้นหลังกับสีตัวหนังสือของเมนูย่อยเลือกใช้ไม่ถูกโทน ควรใช้สีที่ตัดกันมากกว่านี้ เพื่อให้อ่านได้ง่ายขึ้น ความแตกต่างกันของสไตล์เมื่อคลิกที่ไอคอนค้นหากับเมนู สไตล์ของเมนูตอนคลิกเลือกควรทำให้เหมือนกันตลอดทั่วทั้งเว็บ รายการเมนูที่แสดงด้านบนเมื่อเลือก ภาษา การแสดงผลควรเป็นไปในทางที่คาดการณ์ได้ (predictable UI) เช่น คลิกเลือก ภาษา เมนูจะแสดงให้เห็นด้านบน ฟอร์มด้านล่างเมื่อเลือก ลงชื่อเข้าใช้ และพอคลิกที่ ลงชื่อเข้าใช้ ฟอร์มก็ควรปรากฏด้านบนเหมือนกัน (แทนที่เมนูของภาษา) แต่นี่กลับโผล่มาด้านล่าง การแสดงผลเมื่อคลิกที่ปุ่ม TAP ปุ่มแท็ป (TAP) เพื่อเปิดเมนูลัด ดูเหมือนจะดี แต่ผมมองว่ามันบดบังส่วนแสดงข้อมูลในทุกๆ หน้าเลย ทางที่ดีควรเอาไปอยู๋ในไอคอนเมนู แล้วทำไฮไลท์ให้เด่นกว่าเมนูย่อยอื่นๆ และวางไว้อันแรกเลย หรือจะใช้เป็น UI แบบ off-canvas (เลือนเปิดหน้าแง้มๆ) ก็ดูดีเหมือนกัน แนวการจัดระเบียบ UI โดยการเปลี่ยนจากTab เป็น Combo box หน้าแสดงรายละเอียดหุ้นซึ่งมีหลายแท็บ เราอาจเปลี่ยนเป็น UI combo box ซึ่งช่วยลดการใช้พื้นที่และทำให้ UI เป็นระเบียบด้วย สรุปคะแนน ความสวยงาม: 8/10 (แนว Flat design, เลือกธีมสีได้ลงตัว, จัดวาง layout ได้ดี) ความถูกต้องตามหลัก UI: 5/10 (ยังขาดเรื่องรายละเอียดตามที่ได้อธิบายไปด้านบน) การแสดงผลบนมือถือ: 6/10 (ขาดความสอดคล้องของสไตล์ และข้อมูลยังจัดเรียงสะเปะสะปะอยู่) ความคิดสร้างสรรค์: 8/10 (มีการนำเอาฟังก์ชันการแสดงราคาหุ้นมาไว้หน้าแรกเลย, ใช้ปุ่ม TAP ในหน้ามือถือสำหรับเมนูลัด แม้ว่าจะช้าในการโหลดเมนูและบดบังข้อมูลหน้าหลัก) ความตอบสนองต่อเป้าหมายของธุรกิจ/องค์กร: 9/10 (เสริมสร้างภาพลักษณ์ขององค์กรได้เป็นอย่างดี, ให้ข้อมุลข่าวสารครบถ้วน) รวม: 7.2 คะแนน, พอใช้
