UI_Wrost

15 ข้อผิดพลาดที่คนออกแบบ UI Website ต้องระวัง!!

เรามีมรดกตกทอดจากยุคสมัยดอทคอมเฟื่องฟูใหม่ๆเป็น UI จำนวนหนึ่ง ที่คนทำเว็บไซต์คุ้นเคยกันดี๊ดี… ใช้รูปแบบบางอย่างนี้จนชิน จนเชื่อว่ามันคือธรรมเนียมปฏิบัติที่ทุกคนเข้าใจ แต่หารู้ไม้ว่าเมื่อโลกกำลังเปลี่ยนไป เทคโนโลยีซัพพอร์ตก็เปลี่ยนตาม และที่เปลี่ยนมากสุดคือพฤติกรรมผู้ใช้งาน ทำให้วิธีการบางอย่างที่เราเคยทำต่อๆกันมามันไม่เวิร์คแล้ว บางอย่างก็เคยฮิตเมื่อไม่กี่ปีมานี้เอง ในบทความนี้จะพาไปดูว่ามีอะไรบ้างที่เราควรหยุดและหาวิธีการใหม่ๆเสียที เพื่อไม่ให้เว็บดีไซน์ของเราเชยหลุดโลกและผู้ใช้เบือนหน้าหนีไปจากเว็บอย่างรวดเร็ว

1. ปุ่ม Reset Button ใต้ฟอร์ม

เมื่อเราคิดจะกดปุ่ม Send แต่ด้วยความที่ปุ่มส่งกับปุ่มล้างค่าที่กรอกแล้วมันอยู่ข้างกัน โอกาสกดพลาดก็สูงมาก ฃอให้นึกภาพตอนคุณลงทะเบียนอะไรซักอย่างแบบโคตรละเอียดแล้วกดผิดจนข้อมูลทั้งหมดที่กรอกมาถูกลบไปสิครับ!

2. ปุ่ม Cancel วางใกล้ปุ่ม Back

ยังอยู่ในเรื่องฟอร์มนะครับ ในกรณีที่ฟอร์มที่คุณต้อกกรอกถูกแบ่งเป็นหลายๆหน้าแล้ว คุณอยากย้อนไปแก้ข้อมูลที่ได้กรอกไปแล้วคุณก็ควรมีปุ่ม “ย้อนกลับ” แต่ถ้ามันวางอยู่ใกล้ๆกับปุ่ม “ยกเลิก” ล่ะ กดผิดทีนึงนี่ถึงกับจี๊ดเลยนะครับ!!

3. ปุ่ม  X กากบาท

บางครั้งปุ่ม X ไม่ได้ถูกใช้เพื่อ “ปิด” อะไรซักอย่างเสียทีเดียว อีกนัยนึงมันก็ถูกใช้ในการ “พับ” Pop-up ก็ได้   “ปิด” หน้าต่าง Browser ก็ยังได้เลย บางทีมันก็ทำให้สื่อสารผิดพลาดได้เหมือนกัน แม้เราจะมีคำว่า Close กำกับอยู่ ( แล้วถ้ามีคำว่าClose แล้ว X ยังจำเป็นอยู่หรือไม่ )

4.หน้าต่าง Chat ที่เด้งทันทีเมื่อเข้าเว็บไซต์

คงจะน่ารำคาญไม่ใช่น้อยเลยนะครับ ถ้าเราเข้าไปในร้านค้าแล้วมีพนักงานมายืนขวางหน้าแล้วเซ้าซี้ให้เราพูดคุยกับเขาทุกๆครั้ง เก็บแถบแชทไปใว้มุมๆเล็กๆรอคนที่ค้องการจะคุยจริงๆเขาคลิกเข้าไปดูเองเถอะครับ

5. ************* ดอกจันในช่องพิมพ์พาสเวิร์ด

image

มันเป็นการแสดงเจตนารมณ์อย่างชัดเจนเลยว่า เว็บไซต์ที่คุณใข้งานอยู่จะมีคนแอบดูหน้าจออยู่ข้างหลังตลอดเวลา มันไม่ได้ปลอดภัยสำหรับอะไรที่จะโจมตีเราทางออนไลน์เลย ร้ายไปกว่านั้นมันยังทำให้เราพิมพ์ผิดไม่รู้ตัว แล้วที่ร้ายกว่าคือถ้ากลัวพิมพ์ผิด มีปุ่มให้กดเพื่อ show password ด้วยนะคร้าบ ย้อนแย้งดีไหมล่ะครับ

6. Automatic sideshow

ดูเผินๆมันก็ดีนะที่ Banner ดีๆของเรา 4-5 ชิ้นจะได้อวดโฉมทั้งหมด แต่อีกมุมนึงมันดูเหมือนเรากำลังกดดันให้ user รีบๆดูเนื้อหาของเราให้หมดๆซะนะแล้วก็ไปซะ ปล่อยทางเลือกต่างๆให้คนเข้เว็บได้ตัดสินใจเองบ้างเถอะครับ

7. Carousel

จำรูปแบบของการเลือกเพลงในโปแกม iTunes ได้ไหมครับ ที่ปกเพลงที่เรากำลังฟังจะอยู่ด้านหน้าสุด แล้วปกเพลงอื่นๆวางอยู่ด้านหลังขนาบซ้ายขวา เวลาสไลดเปลี่ยนภาพมันก็เหมือนหมุนวงล้อมาอยู่ด้านหน้า เราเห็นมันมานานหรือยังครับ ตั้งแต่ ipod วางขายเลยหรือเปล่า มันจึงเหมาะสมกับคำว่าเชยแล้วหละครับ

8. Drop-down Menu

image

จริงๆแล้วสำหรับเว็บไซต์ที่มีพื้นที่จำกัดมันก็ยังโอเคนะ แต่ drop down menu ประเภทที่ว่าใช้เลือกหัวข้อเนื้อหาที่ยาวๆ หรือ วันเดือนปี จำนวนไอเทมที่อยากให้แสดง มันจะดูยากไปไม้ ถ้าจะใช้ ใช้กับหัวข้อใหญ่เช่น category ดีกว่า

9. Floating Banner

มันคือ pop-up banner เล็กๆที่จะเกาะอยู่ตรงมุมใดมุมหนึง หรือบางทีก็มีซะทุกมุมเลย และมันจะวิ่งตามเพื่อมาแปะอยู่ตรงมุมเดิมไม่ว่าเราจะเลื่อนขึ้นลงไปลึกสุดใจแคไหน มันโคตรน่ารำคาญ และการต้องมาไล่ปิดมันยิ่งน่ารำคาญกว่า!!

10. โลโกที่คลิกแล้วไม่กลับไปหน้าแรก

อันนี้จริงๆเป็นเหมือนธรรมเนียมฏิบัติไปซะแล้ว ไม่ค่อยมีใครละเลยหรอก จงอย่าลืมใส่ลิงค์กลับไปที่หน้าแรกในโลโก้ทุกครั้งนะครับ

11. Navigation ขนาดใหญ่บน Desktop

image

บน Desktop

image

บน Tablet

จากตัวอย่างเราจะเห็นว่า navigation ที่ดูดีและกดง่ายๆ มันไม่ได้ง่ายเลยบนหน้าจอคอมพิวเตอร์ เพราะเมื่อคุณอยากปิดเมนูบนมือถือคุณแค่เหวี่ยงนิ้วไปหน่อยนึง แต่บนหน้าจอ LCD 24 นิ้ว ต้องเลื่อนทั้งมือเลยนะครับ เพื่อลากเมาส์ไปที่มุมนั้นหนะ

12. กดคีย์บอร์ดก็ได้ หรือใช้เมาส์เลื่อนก็ได้

ส่วนใหญ่เว็บ parallax จะทำแบบนี้เคยฮิตระเบิดอยู่ช่วงเวลาหนึ่ง แตทำไปทำมาผู้ใช้เว็บเริ่มคิดได้ว่าทำไมต้องมานังตัดสินจะว่าจะใช้เมาส์หรือคีย์บอร์ดเลื่อนดูคอนเท้นดี ถ้าผลลัพท์ของการใช้คีย์บอร์ดไปด้วยไม่ได้ดีกว่าแบบสุดยอด จะทำไปเพื่ออะไรหรือ?

13. สีสันแสบทรวง

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

14. ตัวหนังสือเล็กไป

ยังจำเว็บสมัยก่อนที่ถูกบังคับให้ต้องดีไซน์เนื้อหาทั้งหมดให้อยู่ในจอโดยไม่ต้อง scroll มั้ยครับ นั่นแหละต้นเหตุที่เราต้องทำให้ทุกอย่างคุ้มค่าและยัดมันลงไปให้เยอะที่สุด เป็นเหตุให้ตัวหนังสือที่เราใช้ต้องเล็กตาม
15. CAPTCHA

image

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

(Source: onextrapixel.com)

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s