23Feb, 2024
Language blog :
Thai
Share blog : 
23 February, 2024
Thai

The Basics of User Interface Design in Software Development

By

8 mins read
The Basics of User Interface Design in Software Development

Golden rules of User Interface Design ในหนังสือของ Ben Shneiderman ได้อธิบายกฎที่สำคัญสำหรับการออกแบบ UI เอาไว้ 8 ข้อ เรามาเริ่มดูรายละเอียดกันเลยดีกว่า

 

1. การทำให้ User Interfaces มีความสอดคล้องกันในทุกหน้า

Mike Gilfillan, Technical Lead Developer จากบริษัท Edge of the Web กล่าวเอาไว้ว่า “Consistency (ความสม่ำเสมอ) คือกุญแจสำคัญข้อแรกในการออกแบบ พวกสี หรือฟอนต์ที่หลากหลาย เราควรใช้ในปริมาณที่พอเหมาะและใช้ทุกที่ให้เหมือนๆ กันไม่ให้มีความหลากหลายเกิดขึ้นมากเกินไป

UI ที่มี Consistency (ความสม่ำเสมอ) หมายถึงการใช้ลักษณะการออกแบบที่คล้ายคลึงกัน Text Typography Spacing ที่เหมือนกัน เมนูและหน้าจอที่ดูเป็นไปในทิศทางเดียวกัน รวมถึงคำสั่งปุ่มต่าง ๆ ที่สอดคล้องกันทั่วทั้งเว็บไซต์หรือแอปพลิเคชัน



 

Image: ui-design-principles-image-1-consistency. Credit: maze.co



 

Image: ui-design-principles-image-1-consistency. Credit: maze.co

 

2. ทำให้ User หาสิ่งที่ต้องการได้ง่าย โดยการใช้ Shortcuts

Expert users หรือ User ที่คุ้นเคยกับผลิตภัณฑ์มาก ๆ เราจำเป็นต้องให้ User ประเภทนี้เข้าถึงเครื่องมือที่ช่วยให้เขาทำงานได้รวดเร็วขึ้น และบรรลุเป้าหมายที่เขาต้องการได้โดยเร็วจาก UI ของเรา

ยกตัวอย่างเช่น การที่ Windows มีปุ่มคีย์ลัด Ctrl+C เพื่อคัดลอกข้อความ และ Ctrl+V เพื่อวางข้อความ คุณจำเป็นต้องทำให้เครื่องมือบน UI ของคุณใช้งานได้ง่ายและรวดเร็วที่สุดสำหรับ User ที่มีความคุ้นเคยกับผลิตภัณฑ์ของคุณอยู่แล้ว

 

3. การให้ข้อมูลหรือ Feedback กลับไปที่ User

ออกแบบ Feedback บนหน้า UI เมื่อ User มีการกระทำบางอย่างบน UI ของเรา Ben Shneiderman อธิบายไว้ว่า “การกระทำที่เกิดขึ้นบ่อยครั้งหรือเกิดขึ้นบ้าง Feedback ประเภทนี้อาจอยู่ในระดับการ Feedback แบบปานกลาง ในขณะที่การกระทำที่เกิดขึ้นไม่บ่อยหรือเป็นการกระทำที่สำคัญมาก Feedback ประเภทนี้ควรมีสาระสำคัญอย่างมาก”

ยกตัวอย่าง เมื่อ User ต้องการสร้างรหัสผ่าน UI ของคุณควรแนะนำว่า User ควรจะตั้งรหัสผ่านแบบไหน ให้มีความปลอดภัยสูง เราควรมีสัญลักษณ์หรือความคืบหน้าบางอย่างที่ทำให้ User รับรู้ได้ว่าความปลอดภัยของรหัสผ่านอยู่ในระดับไหน

ตัวอย่างที่ดีอีกอันนึงก็คือ DropBox’s ซึ่งฟอร์มที่ใช้สมัครเป็นสมาชิก จะแสดงสีให้เราเห็นเลยว่าตอนนี้รหัสผ่านของ User อยู่ในระดับความปลอดภัยระดับไหนแล้ว แต่ถ้ายังไม่ปลอดภัย User จะต้องเติมอะไรลงไปเพื่อให้รหัสผ่านของเขาปลอดภัยที่สุด

 

Image: ui-design-principles-image-1-informative feedback. Credit: maze.co

 

รูปถัดไปเมื่อ User สร้างรหัสผ่านที่ยากขึ้นด้วยการเติมตัวเลขและสัญลักษณ์หลายตัว

 

Image: ui-design-principles-image-2-informative feedback. Credit: maze.co

 

4. การออกแบบ Journey ให้ User สามารถเข้าถึงขั้นตอนสุดท้ายให้ได้

สิ่งที่ Shneiderman กล่าวไว้ “การเรียงลำดับของ Journey ควรจัดเป็นกลุ่ม ๆ โดยมีจุดเริ่มต้นให้ User เริ่มทำอะไร ต่อด้วยขั้นตอนตรงกลางไปเรื่อย ๆ จนถึงจุดสิ้นสุด เมื่อ User ดำเนินการเสร็จสิ้นแล้ว ควรช่วยให้ User ได้รับความพึงพอใจใน Journey ที่เพิ่งทำสำเร็จมา ช่วยให้เขารู้สึกโล่งใจ สบายใจ ช่วยให้ User หายความจากความอึดอัด ลำบากใจ และพร้อมสำหรับ Journey ถัดไป”

ตัวอย่างที่ดีของการกระทำคือ หน้า Thank You ที่จะสรุปข้อมูลรายละเอียดทั้งหมดของรายการที่เราได้ทำไว้ก่อนหน้านั้นเพื่อยืนยันว่าสิ่งที่ User ได้กระทำลงไปมีอะไรบ้างถูกต้องมากน้อยแค่ไหนและเป็นการยืนยันอีกทีในขั้นตอนสุดท้าย

 

5. การป้องกัน UI ให้มีข้อผิดพลาดน้อยที่สุด

ในฐานะนักออกแบบ คุณต้องมั่นใจในทุก Flow การใช้งานของ User ว่าทุกการใช้งานเป็นการใช้งานที่เข้าใจง่ายและซับซ้อนน้อยที่สุด โดยสามารถทำการ Usability test กับ User ก่อนเปิดตัว Product การทำ Usability test ไม่เพียงแต่ช่วยทดสอบฟังก์ชันการใช้งาน Product แล้ว แต่ยังช่วยให้คุณเข้าใจความต้องการของ User หรือกลุ่มเป้าหมายได้ดีขึ้นอีกด้วย

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

 

6. อนุญาตให้ User ย้อนกลับในสิ่งที่เขาได้ทำผิดพลาดไป

Shneiderman อธิบายว่า “ฟีเจอร์นี้ช่วยลดความกังวล เนื่องจาก User รู้ว่าข้อผิดพลาดสามารถยกเลิกหรือย้อนกลับได้ ทำให้ User ไม่กังวลที่จะสำรวจฟีเจอร์อื่น ๆ ที่ไม่คุ้นเคยในเว็บไซต์หรือแอปพลิเคชัน”

สมมติว่ามี User ใส่ข้อมูลที่ไม่ถูกต้องลงในแบบฟอร์มหลายหน้าโดยไม่ได้ตั้งใจ ปล่อยให้พวกเขากลับไปที่หน้านั้นและแก้ไขข้อผิดพลาดได้อย่างง่ายดายโดยไม่ต้องเริ่มต้นใหม่ทั้งหมด

 

7. ทำให้ User รับรู้ได้ถึงความสบายใจจากการใช้งานที่คุ้นเคย

“User เดิมที่เคยใช้ Product เดิม ๆ ต้องการความรู้สึกว่าพวกเขาสามารถใช้งานฟังก์ชันต่าง ๆ ได้โดยไม่ต้องเรียนรู้ใหม่ พวกเขาไม่ต้องการความแปลกประหลาดหรือการเปลี่ยนแปลงในการใช้งานที่คุ้นเคยอยู่แล้ว และพวกเขาจะรำคาญด้วยหากพบความยากลำบากในการใช้งาน” Shneiderman กล่าว

การเปลี่ยนแปลง UI บางอย่าง ช่วยทำให้เว็บไซต์และแอปพลิเคชันมีการพัฒนาที่ดีขึ้น แต่เราต้องเข้าใจ User ด้วยว่าการเปลี่ยนแปลงระดับ Major จะทำให้ User ใช้พลังงานในการเรียนรู้ที่สูงเกินไป เพราะฉะนั้นเราควรค่อย ๆ ปรับปรุงสิ่งที่พัฒนามาใหม่ทีละเล็กน้อยจะช่วยให้ User ค่อย ๆ เรียนรู้ใหม่ไปพร้อมกับเรา

 

8. ลดภาระการใช้ความคิดของ User ให้น้อยที่สุด

กฎสำคัญในการทำให้ UI ใช้งานง่ายคือ การลดภาระการรับรู้หรือสิ่งที่ทำให้ User ใช้ความคิดในการทำความเข้าใจเยอะจนเกินไป ดังนั้นจึงจำเป็นอย่างยิ่งที่ระบบจะทำการจดจำข้อมูลต่าง ๆ ของ User จากการใช้งานในอดีตไว้ให้มากที่สุด

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

ขณะออกแบบให้เลือกการจดจำข้อมูลไว้มากกว่าการเรียกหาข้อมูลจาก User ตลอดเวลา เพื่อให้ User สามารถทำงานให้เสร็จได้อย่างรวดเร็วและไม่ยุ่งยาก

 

References:

Written by
Snooker
Snooker

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

13
July, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
13 July, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
13
July, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
13 July, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
13
July, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
13 July, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.