---
title: Design UI แบบ Jakob Nielsen ช่วยเพิ่ม Usability ให้ดีขึ้น
description: Usability คำนี้ที่หลาย ๆ คนอาจไม่เคยคุ้นหู แต่สำหรับสายงานที่เกี่ยวกับการตลาดต้องเคยได้ยินและคุ้นหูอย่างแน่นอน แต่ก็ไม่ใช่เพียงสายงานการตลาดเท่านั้น
---

[Digital Blog - Ourgreenfish ](https://blog.ourgreenfish.com)

# [Design UI แบบ Jakob Nielsen ช่วยเพิ่ม Usability ให้ดีขึ้น](https://blog.ourgreenfish.com/design-ui-jakob-nielsen-usability)

 เขียนโดย [สุพัตรา อัมรานนท์](https://blog.ourgreenfish.com/author/สุพัตรา-อัมรานนท์) - 19 พ.ค. 2020, 3:00:00

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

## **Usability คืออะไร? ทำไมต้องคำนึงถึง**

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

- Effectiveness สามารถใช้งานได้ รู้ว่าควรใช้งานอย่างไร
- Efficiency ใช้งานง่าย ลื่นไหล รวดเร็วและไม่เสียพลังงาน
- Satisfication ความพึงพอใจในการใช้งาน

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

## **10 หลักการ ออกแบบ UI แบบฉบับ Jakob Nielsen**

**Visibility of system status  
**ข้อนี้เกี่ยวกับการสื่อสารระหว่างระบบกับผู้ใช้งาน โดยจะต้องสื่อสารให้มีประสิทธิภาพมากที่สุด ทำให้ผู้ใช้งานเกิดความเชื่อใจจนอยากใช้งานต่อ เพราะถ้าเกิดผู้ใช้งานเข้ามาในระบบแล้ว ไม่มีการตอบโต้หรือการสื่อสารระหว่างกัน ขาดความต่อเนื่องในการสื่อสาร อาจทำให้สูญเสียผู้ใช้งานคนนั้นไปได้ ดังนั้นจึงควรออกแบบให้หน้า UI ของคุณนั้นสามารถสื่อสารและตอบโต้ผู้ใช้งานได้ตลอดเวลา อย่างเช่น การเปลี่ยนสีของปุ่มเมื่อผู้ใช้งานคลิกที่ปุ่มนั้นหรือสีของสเตตัสการใช้งาน ออกแบบ Stage UI การอัปโหลด ดาวน์โหลด เป็นต้น

**Match between system and the real world  
**ผู้ใช้ทุกคนมีความคาดหวังในการใช้งานอยู่ในตัวทั้งนั้น แต่คุณจะจัดการกับความคาดหวังนั้นได้อย่างไรบ้าง ดังนั้นควรออกแบบ UI ให้ยึดสิ่งที่ผู้ใช้งานคุ้นเคยและเห็นเป็นประจำอยู่แล้ว ผู้ใช้ไม่จำเป็นต้องเรียนรู้ใหม่และสามารถทำความเข้าใจกับการทำงานได้ง่าย ๆ พยายามใช้ภาษาที่เป็นภาษาที่ใช้ในชีวิตประจำวันทั่วไป ไม่ใช่ภาษาที่แปลกหรือภาษาคอมพิวเตอร์ที่คนไม่เข้าใจ

**User control and freedom  
**หน้า UI ควรมีการออกแบบให้ผู้ใช้งานสามารถย้อนกลับหรือยกเลิก หากผู้ใช้งานทำอะไรผิดพลาดบนเว็บไซต์ และปุ่มเหล่านั้นควรโชว์ในหน้าการใช้งานทันที ไม่ควรซ่อนไว้เพราะจะทำให้ผู้ใช้งานใช้งานยาก เพราะต้องมาเสียเวลาในการหาปุ่ม ๆ นั้น 

**Consistency and Standards  
**UI ที่น่าสนใจคือ UI ที่ออกแบบไปในทางเดียวกัน ไม่ว่าจะเป็นสี ฟอนต์ รูปแบบของปุ่ม ไม่ควรออกแบบให้แตกต่างกัน ถ้าให้เซฟที่สุดคือควรออกแบบให้เป็นพื้นฐานของเว็บไซต์เลย ว่าเว็บไซต์ควรมาในแนวนี้นะ ถ้าวางเมนูไว้ทางด้านซ้าย ทั้งเว็บไซต์ก็ควรวางไว้ด้านซ้ายให้เหมือน ๆ กัน 

**Error Prevention  
**การออกแบบเพื่อดัก Error เป็นอีกวิธีที่ช่วยให้ตัวบ่งชี้คุณภาพนั้นดีขึ้น โดยเฉพาะเออเร่อที่กำลังจะเกิดขึ้นในอนาคตด้วยเช่นกัน ดังนั้นเราควรดักทางผู้ใช้งานให้ครบ ยกตัวอย่างเช่น 

- แบบฟอร์มที่ให้ผู้ใช้งานกรอกข้อมูล หากผู้ใช้งานกรอกข้อมูลไม่ครบ ให้แสดงเออเร่อหรือแจ้งเตือนสีแดงเพื่อให้ผู้ใช้งานกรอกข้อมูล
- มีป๊อบอัพแจ้งเตือน เพื่อถามคอนเฟิร์มผู้ใช้งานอีกครั้ง

**Recognition rather than recall  
**อย่าให้ผู้ใช้งานต้องใช้ความจำเยอะ พยายามนำเสนอในสิ่งที่เขาสนใจให้ได้มากที่สุด อย่างเช่น การแยกหมวดของสินค้าไว้ตามที่ต่าง ๆ ปุ่มที่จดจำว่าก่อนหน้านี้ลูกค้าได้เลือกชมสินค้าอะไรไปบ้าง หรือหน้าของการสรุรปรายการสินค้าทั้งหมดที่ผู้ใช้งานได้เลือกซื้อไป 

**Flexibility and Efficiency of use  
**การออกแบบการใช้งานให้เหมาะสมกับระดับผู้ใช้งานที่แตกต่างกัน ตั้งแต่ผู้ใช้งานที่พึ่งเริ่มต้นไปจนถึงผู้ใช้งานที่เป็นระดับโปร ถ้าหากเป็นแค่ผู้ใช้งานแบบเริ่มต้น อาจใช้งานได้แค่ในฟีเจอร์ปกติ แต่ถ้าเป็นผู้ใช้งานระดับโปร อาจได้รับบริการที่ดี มีประสิทธิภาพและใช้งานได้อย่างรวดเร็ว

**Aesthetic and minimalist design  
**ควรออกแบบให้เว็บไซต์ดูเรียบง่าย สบายตา ใช้โทนสีที่ง่ายไม่ทำให้ผู้พบเห็นรู้สึกรำคาญตา รำคาญใจ ซ่อน Secondary Function ไว้ช่องทางต่าง ๆ หลีกเลี่ยงการใช้ตัวหนังสือที่ไม่จำเป็นบนหน้าเว็บไซต์ เพื่อไม่ให้ดูรกจนเกินไป

**Help users recognize, diagnose, and recover from errors  
**หากผู้ใช้งานเจอเออเร่อที่แสดงบนหน้าเว็บไซต์ ให้ระบุหรือแจ้งให้ผู้ใช้งานรับทราบทันทีว่าเขาทำอะไรผิด แล้วต้องแก้ไขยังไงถึงจะให้เออเร่อนั้นหายไป อย่างเช่น เวลาอินเทอร์เน็ตมีปัญหา หากคุณใช้งาน Google Chrome อยู่ จะมีการแจ้งเตือนว่าอินเทอร์เน็ตใช้ไม่ได้ พร้อมวิธีแก้ไข 

**Help and documentation  
**ไม่ใช่ผู้ใช้งานทุกคนที่จะสามารถใช้งานเว็บไซต์ได้อย่างคล่องแคล่ว ดังนั้นหากเขาเห็นหน้าที่เป็นเกี่ยวกับ FAQ หรือ ความช่วยเหลือต่าง ๆ แชทบอทสำหรับถามตอบกับแอดมินเว็บไซต์ แต่อย่าแสดงความช่วยเหลือในเวลาที่ผู้ใช้งานไม่ต้องการนะ อาจจะสร้างความรำคาญได้ 

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

 

ที่มา : [[1](https://betteruxui.com/10-usability-heuristic-by-jakob-nielsen/?fbclid=IwAR1VpabNlYn_27icfgkGbEsu84qZ0ZmxRM-EsDB4e2Z1tSrtAgXrcfaMIxY)]

**Supattra Ammaranon x Ourgreenfish**

[ดูโพสต์ฉบับเต็ม](https://blog.ourgreenfish.com/design-ui-jakob-nielsen-usability)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "สุพัตรา อัมรานนท์"
  },
  "dateModified" : "2020-05-26T04:01:54.644Z",
  "datePublished" : "2020-05-19T03:00:00Z",
  "headline" : "Design UI แบบ Jakob Nielsen ช่วยเพิ่ม Usability ให้ดีขึ้น",
  "image" : {
    "@type" : "ImageObject",
    "height" : 800,
    "url" : "https://blog.ourgreenfish.com/hubfs/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1-OGF-May-2020-5.png",
    "width" : 1200
  },
  "mainEntityOfPage" : "https://blog.ourgreenfish.com/design-ui-jakob-nielsen-usability",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Digital Blog"
  }
}
```