แจกของฟรี

หากท่านใดยังไม่รู้จักคำว่า User Experience สามารถแวะไปอ่านบทความ User Experience คืออะไร ก่อนได้ครับ
บทความนี้เรียบเรียงมาจากเว็บไซต์ UXMovement ครับ แล้วผมก็เพิ่ม Code Example เองเพื่อให้ผู้อ่านนำไปทำตามได้ง่ายขึ้น ท่านใดถนัดอ่านเวอร์ชั่นอังกฤษมากกว่าสามารถแวะเข้าไปอ่านได้เลยครับผม
 1. การทำสีของ Link ให้เป็นสีที่แตกต่าง สีของลิงค์ที่เข้าแล้ว กับสีของลิงค์ที่ยังไม่ได้เข้า
  อย่างที่เราทราบกันดีว่า Tag <a> นั้นเวลาที่แสดงในเนื้อหาควรจะเป็นสีที่แตกต่างให้ User ได้รับรู้ว่ามันสามารถคลิกไปที่อื่นได้นะ ไม่ใช่สีเดียวกับเนื้อหาเลยแล้วจะรู้ได้ไงว่าคลิกได้ไม่ได้ คลิกแล้วหรือยัง ?
หากคลิกแล้วควรจะมีอีกสีหนึ่งให้ User รับทราบไม่งั้น User จะจำไม่ได้หากว่าในเนื้อหามี Link เยอะแยะมากมายไปหมด ควรเลือกสีที่ดรอปลงจากสีที่เป็นสี Link ปกติ เช่น ก่อนคลิกเป็นสีฟ้า คลิกแล้วเป็นสีม่วง (อันนี้เป็น Default ของบราวเซอร์)
เราสามารถเขียน CSS เพื่อเปลี่ยนสีของลิงค์ที่ User กดเข้าไปแล้วได้ดังนี้ครับ
 

• a:visited { color: red; }

2. ปิดพวก Lightbox ด้วยการคลิกนอกกรอบก็ได้ ตัวอย่าง Popup จาก CSSDEE
  คุณคงจะเคยเจอแน่ๆพวกเว็บไซต์ที่เข้าเว็บปุ๊บมีกล่องอะไรไม่รู้ให้คลิก Like หน่อยจะปิดก็ลำบากต้องมาหาปุ่มปิดที่เป็นรูปตัว “X” ซึ่งแทนที่จะกดจากด้านนอกกล่องก็เข้าได้เหมือนกันว่ามันเป็นจะปิด อย่าให้ User ต้องกดปิดจากทางนั้นอย่างเดียว ซึ่งตัวอย่างนี้ผมเจอหลายเว็บมากครับ
ซึ่งวิธีการแก้ไขก็คือ ให้หา jQuery สคริปต์ Lightbox ตัวอื่น ๆ ที่รองรับการปิดด้วยการคลิกนอกกล่องมาใช้ครับ ถ้าเขียนเองน่าจะหนักอยู่เหมือนกัน
 3. ตั้งค่าให้ cursor ไปอยู่ที่ field สำหรับกรอกตัวแรกเมื่อ Form แสดง ช่อง name ควรจะถูก focus โดยอัตโนมัติ เพราะรู้ว่า User ต้องพิมพ์ช่องนี้ก่อนอยู่แล้ว
  เมื่อหน้าเพจนั้นมี Form สำหรับกรอกข้อมูล User จะรู้อยู่แล้วว่าจะต้องคลิกที่ Field ช่องแรกด้านบนสุดเพื่อเริ่มกรอกฟอร์ม แต่จะดีกว่าไหม ถ้าหากเราจะตั้งค่าให้คีย์บอร์ดพิมพ์ใส่ Field แรกสุดได้ทันที โดยที่ User ไม่ต้องไปเสียเวลาคลิกเลือก Field ก่อน
เราสามารถทำแบบนี้ได้โดยใช้ jQuery ตามบรรทัดด้านล่างเลยครับ
[javascript]
 $(‘.first-input’).focus();
 [/javascript]
 4. ตั้งค่าให้กดปุ่ม “Enter” แล้วเป็นการส่งค่า Form ต่อจากข้อ 3 คือ เมื่อ User กรอกข้อมูลครบหมดแล้วอย่าลืมตั้งค่าให้กดปุ่ม Enter แล้วส่งฟอร์มได้ด้วย ปกติแล้วถ้าหากเราใช้ปุ่มแบบโค้ดด้านล่างนี้
 

• <input type="submit" value="ส่งฟอร์ม" />

เราก็จะสามารถกด Enter เพื่อส่งฟอร์มได้โดยอัตโนมัติอยู่แล้ว แต่บางครั้งหากเราทำเป็นปุ่มปกติ เช่นใช้แท็ก <a> มาทำปุ่มส่งฟอร์ม ก็อาจจะต้องใส่โค้ด Javascript ตรวจเช็คเองครับ
การให้กดปุ่ม Enter สะดวกกว่าจะให้เอาเม้าส์ไปคลิกหลายเท่า และไม่สร้างความรำคาญให้แก่ User ด้วย ข้อนี้ผมก็เจอหลายเว็บไซต์ที่ดีไซน์มาพลาดเหมือนกันครับ
 5. อย่าลืมใส่ Tool tip บน icon เพื่ออธิบายว่ามันคืออะไร พวก icon ทั้งหลายนั้นโดดเด่นและอธิบายความหมายตัวมันเองอยู่แล้ว อย่างไรก็ตามไม่ใช่ทุกคนจะเข้าใจว่ามันคืออะไร มันสำคัญมากหากจะมีคำแนะนำ ( Tool tips ) ที่จะบอกว่า icon ที่เราจะทำการคลิกลงไปมันจะเกิดอะไรขึ้น เช่น icon รูปถังขยะก็อาจจะมีคำแนะนำโผล่ขึ้นมาว่า “ลบข้อความ”
โดยเราสามารถใส่แท็ก title=”ข้อความ” ครอบรูปไอคอนที่ต้องการแสดงเมื่อเม้าส์ชี้ออกมาได้ ลองเอาเม้าส์ชี้รูปด้านล่างนี้ดูครับ ชี้ทิ้งไว้สักพักจะมีข้อความในกรอบเหลือง ๆ ขึ้นมา สามารถดูโค้ดได้ด้านล่างเลย
 

• <a title="ทดสอบข้อความ" href="#"><img alt="" src="URL รูป" /></a>

6. ใส่ Link กลับมาที่ Home page ใน Blog page อ่านหัวข้ออาจจะงง ๆ สักเล็กน้อยนะครับ มีหลายเว็บไซต์ที่แยกส่วนของเว็บหลัก กับส่วนบลอคแยกกัน โดยเฉพาะเว็บพวก Web App ที่ส่วนเว็บหลักเป็นบริการให้ลูกค้าเข้ามาใช้ ส่วนบลอคจะเอาไว้ให้ลูกค้าเข้ามาอ่านอัพเดทต่าง ๆ ของทีมงานได้ ซึ่งเว็บพวกนี้บางครั้งเวลาเราเข้าส่วนบลอคไปแล้ว จะหาลิงค์กลับมาส่วนเว็บหลักไม่เจอ
ซึ่งถ้าลูกค้ากลับมาส่วนเว็บหลักไม่ได้ แล้วเค้าต้องพิมพ์ URL ใหม่เองเพื่อกลับไปเว็บหลัก จะสร้างความลำบากให้ลูกค้าจนอาจจะไม่กลับไปหน้าหลักแล้วก็ได้
 7. แสดงภาพใหญ่เมื่อ User คลิกที่รูป ตัวอย่างการคลิกบนรูปเล็กในบทความ เพื่อดูรูปใหญ่ที่อ่านได้ง่ายกว่า
  บางครั้งรูปในบทความ เช่น บน Designil.com เวลากดบนรูปเล็ก จะเปิดขึ้นมาเป็นรูปใหญ่อีกทีครับ ซึ่งบางเว็บทำออกมาไม่ดี ทำให้พอกดเข้าไปมีรูปใหญ่ขึ้นจริงครับ แต่ดันใช้รูปเล็กมาขยาย ทำให้กราฟฟิกแตกกระจาย ไม่ได้ช่วยให้ User เห็นได้ชัดขึ้นเท่าไรครับ
 8. อนุญาตให้ User แก้ไขสิ่งที่ User เป็นคน Post บางครั้ง Admin ก็พิมพ์ผิดครับ
  หลาย ๆ เว็บไซต์มีส่วน Comment ซึ่งทำให้ User ได้แลกเปลี่ยนความคิดเห็นกัน แต่กลับไม่มีที่ให้ User สามารถแก้ไขข้อความได้ ยอมรับเถอะครับไม่มีใคร Perfect หรอกต้องมีพิมพ์ผิดกันบ้างล่ะ อย่าลืมทำส่วนนี้ให้ User ได้แก้ไขด้วยล่ะครับ
 9. อย่าใช้ “Sign in” และ “Sign up” ด้วยกัน สองคำนี้เขียนคล้ายกัน แต่ความหมายไม่เหมือนกันนะครับ
  ซึ่งคำสองคำนี้มีคำว่า “sign” เหมือนกันอาจจะทำให้สับสนได้ หลายๆเว็บนั้นชอบใช้คำนี้เพราะอาจจะสะดวก อาจจะสั้นแต่ทำให้ User เกิดความสับสนได้และคลิกผิดอัน ทางที่ดีควรจะใช้คำที่อธิบายความหมายในตัวเช่น หากเป็นภาษาไทยก็เป็น “ลงทะเบียน | เข้าสู่ระบบ” ไปเลยหรือหากเป็นคำภาษาอังกฤษอาจใช้คำอื่น เช่น  “Create Account | Log in” อย่างนี้ก็ได้ครับ
ความน่าจดจำของ User อาจจะอยู่ในทุกสิ่งที่เราทำให้แก่ User ในเว็บไขต์ของเราครับ หลายๆเว็บนั้นได้ทำพลาดอย่างที่กล่าวมา หากเราใส่ใจรายละเอียดเล็กน้อยแน่นอนมันอาจจะไม่ได้ทำให้เว็บของเราประสบ ความสำเร็จยิ่งใหญ่ แต่ User ก็จะจำได้ว่าเว็บไหนมีอะไรที่สะดวกสำหรับเขาและความง่ายที่น่าจดจำครับ
Credit รูป Cover – Photo Credit: Samuel Mann


ที่มา: http://www.designil.com/user-experience-ux-design-ui-tips.html