admin, Author at BetterUXUI

UX Terminology: Mental models คืออะไร?

Mental Models คืออะไร? BRIEF: Mental models ป็นเครื่องมือใน UX research ที่ช่วยอธิบายว่า User รับรู้ หรือตีความหมายสิ่งต่าง ๆ บนโลกอย่างไร Mental models ต่อสิ่ง ๆ หนึ่งบนโลกของแต่ละบุคคลแตกต่างกัน ทั้งนี้ขึ้นอยู่กับประสบการณ์ ความรู้ วัฒนธรรม และสิ่งแวดล้อมของคน ๆ นั้น เราสามารถทำความเข้าใจ Mental models ของ User แล้วออกแบบให้สอดคล้องกับความเชื่อเหล่านั้นเพื่อลดการเกิด Mismatched mental models Mental models เป็นเครื่องมือใน UX research ที่ช่วยอธิบายว่า User รับรู้ หรือตีความหมายสิ่งต่าง ๆ บนโลกอย่างไร

10 หลักการออกแบบ User Interface (UI) ให้มี Usability ที่ดีโดย Jakob Nielsen – กูรูด้าน Usability

“10 Usability Heuristic” เป็นหลักการ 10 ข้อที่ Jakob Nielsen (กูรูด้าน Usability) คิดขึ้นมาเพื่อเป็น Guideline สำหรับการออกแบบ UI ให้มี Usability ที่ดี นักออกแบบ UX/UI Designer สามารถนำหลักการทั้ง 10 ข้อนี้เป็นเกณฑ์ตรวจสอบ UI คร่าว ๆ ว่า UI มีปัญหา Usability ด้านไหน (Effectiveness/ Efficiency/Satisfaction) โดยกระบวนการประเมิณผลโดยใช้หลักการนี้เรียกว่า “Usability Heuristic Evaluation” ในบทความนี้จะพูดถึงหลักการแต่ละข้อว่ามีแนวคิดยังไง และจะเอาไปปรับใช้กับ UI ได้ยังไง Usability คืออะไร? “Usability” เป็นตัวบ่งชี้คุณภาพที่บ่งบอกว่า Product ใช้งานได้ง่ายแค่ไหน “ความยากง่าย”

Usability

วิธีทดสอบว่า Web/App ใช้งานง่ายพอรึยัง (Usability) ด้วย System Usability Scale (SUS)

“Usability” เป็นองค์ประกอบหนึ่งของ UX ที่ UX Designer ควรให้ความสำคัญมาก ๆ ไม่มีใครอยากใช้ Product ที่ใช้งานยาก เราสามารถวัด Usability ของ Web/App ว่าใช้งานง่ายพอรึยังผ่านกระบวนการ Usability Testing โดยเอาซอฟต์แวร์ของเราไปให้ Representative User ลองใช้ ผลการทดสอบของ Usability Testing มีทั้งผลลัพธ์เชิงคุณภาพและปริมาณ System Usability Scale (SUS) เป็นหนึ่งการทดสอบที่ใช้วิธีวัดค่า Usability ให้ออกมาเป็นตัวเลขได้เลย การทดสอบวิธีนี้ทำได้ง่ายและรวดเร็ว ทำให้ UX Designer หลายคนเลือกใช้การทดสอบนี้ อ่านบทความ “Usability คืออะไร?” ย้อนหลังได้ที่นี่ System Usability Scale (SUS) คืออะไร? System Usability Scale

Usability คืออะไร?

อยากออกแบบ Product ให้ User-friendly อาจต้องเข้าใจความหมายของคำว่า Usability ก่อน แล้วเค้าเอาเกณฑ์ไหนมาวัดว่า Product ของเราตอนนี้ “ใช้ง่ายหรือยาก” – Usability เป็นอีกหนึ่งอภิธานศัพท์ (UX Terminology) ที่ UX/UI Designer ควรรู้ Usability คืออะไร? “Usability” เป็นตัวบ่งชี้คุณภาพ (quality attribute) ของ Product ว่าใช้งานได้ง่ายแค่ไหน “ความยากง่าย” ส่งผลโดยตรงกับความรู้สึกและการตัดสินใจของ User ว่าจะใช้งาน Product นี้ต่อไปหรือไม่ ISO 9241-11 ให้คำนิยามของ Usability อย่างเป็นทางการว่า: The official definition of usability is:

สรุปย่อหนังสือ Don’t make me think (by Steve Krug) – หนังสือที่ UX Designer ควรอ่าน

หนังสือ Don’t make me think เขียนโดย Steve Krug (ชื่อภาษาไทย “แค่ต้องคิดก็ผิดแล้ว ออกแบบเว็บไซต์ให้เข้าใจง่ายง่าย และไม่ต้องใช้สมอง”) เป็นหนังสือเกี่ยวกับ Usability ที่ขายดีที่สุดในโลกติดกัน 13 ปีซ้อน (2001 – 2013) และถูกแนะนำให้คนที่อยากศึกษาเรื่อง UX อ่านมากที่สุดเล่มหนึ่ง หนังสือเล่มนี้จึงถือได้ว่าเป็นหนังสือคลาสสิกขึ้นหิ้งอีกเล่มสำหรับ UX/UI Designer เนื้อหาในหนังสือจะเกี่ยวข้องกับ Web Usability โดยเฉพาะ ในหนังสือจะยกตัวอย่างให้เราเข้าใจถึงการออกแบบเว็บให้ “ใช้งานได้ดีขึ้น” ไม่ใช่การออกแบบให้ “สวยขึ้น” อย่างเดียว Key Learning Points Don’t Make Me (or Anyone) Think Making every page or screen

UI Tips

ควรใช้ Mega-menu ตอนไหน?

Mega-menu เป็น UI ที่ออกแบบมาเพื่อแก้ปัญหาให้เว็บไซต์ที่มีเมนูยาวเกินหน้าจอ ให้สามารถจัดเรียงเมนูทั้งหมดให้แสดงผลได้ภายในหน้าเดียว โดยการแบ่งเมนูออกเป็นกลุ่มและ Column การจัด Layout แบบนี้ทำให้ User สามารถเห็นภาพรวมของเมนูทั้งหมดในเว็บไซต์ แต่การแสดงเมนูทั้งหมดในคราวเดียว อาจทำให้ User ต้องรับข้อมูลทีละมาก ๆ และอาจมีปัญหาในการค้นหาเมนูที่ต้องการได้ แล้วเราควรออกแบบโครงสร้างของ Mega-menu อย่างไร? ตอนไหนที่เราควรใช้หรือหลีกเลี่ยงการใช้ Mega-menu จำนวนเมนูที่เหมาะสมในการออกแบบ UI คือเท่าไหร่ ? UX Myth: Magic Number (7±2) ตามทฤษฎีของ George Miller (1956) สมองของคนเรามีช่อง Slot สำหรับเก็บข้อมูลไว้ในความจำระยะสั้น โดยเฉลี่ย 7(±2) ช่อง เป็นเวลา 15-30 วินาที ซึ่งเราเรียกตัวเลขนี้ว่า “Magic

System Font ของแต่ละ OS คืออะไร? Custom Font เลือกใช้อย่างไร?

tools & kits

รวม Tool สำหรับทำ Diary Study

1. ExperienceFellow เป็นซอฟต์แวร์สำหรับทดสอบ Customer Experience โดยใช้ Mobile App (iOS App, Android App) มีฟังก์ชันสำหรับเก็บข้อมูลเพื่อนำมาสร้าง Customer Journey ค่าบริการ: €9-159/เดือน 2. dScout dSccout เป็น Platform ที่เปิดให้คนทั่วไปสมัครเป็นผู้เข้าร่วมทดสอบผ่านทาง Mobile App และระบบจะนำมา matching กับ Mission ที่เราอยากให้คนเข้าร่วมทดสอบ ในระบบเราสามารถสร้าง Mission รวมถึง Recruit participant เพื่อเก็บข้อมูลและวิเคราะห์ข้อมูลที่ได้จากประสบการณ์จริงของผู้เข้าร่วมทดสอบแต่ละคน 3. Further (Tandem) อีก platform ที่ช่วยเก็บข้อมูลกิจกรรมต่าง ๆ และความรู้สึกของผู้เข้าร่วมทดสอบในลักษณะของ timeline สามารถ export

UI Tips

25 สุดยอด Figma Plugin (update 2020)

1. Figma Walker ⚡️ By Kazushi Kawamura Figma Walker เป็น Launcher ที่ใช้ Keyword Search เรียก Action หรือ Component ในโปรเเกรม Figma ใครใช้ Plugin ตัวนี้ รับประกันว่าทำงานเร็วขึ้นแน่นอน 2. Figmotion By Liam Martens Plug-in ตัวนี้เหมาะสำหรับคนที่อยากทำ Micro Interaction หรือ High-fidelity prototype สามารถเอาไปใช้สร้าง Animation ของ Layer ต่าง ๆ ละเอียดระดับ Key Frame แบบจบในตัวโปรแกรม

Figma

วิธี Install Font จากเครื่องหรือจาก Adobe font ลง Figma

ปกติแล้วโปรเเกรม Figma จะมี Font จาก Google Font มาให้เราเลือกใช้อยู่แล้ว แต่ถ้าเราอยาก install Font ที่มาจากเครื่อง (local font) หรือจาก Adobe Font จะต้องทำยังไง ถ้าใช้ Figma Desktop app จะมี Font จากตัวเครื่องอยู่แล้ว แต่ถ้าใช้ Figma ผ่าน web browser จะต้องลง Figma Font Helper application ก่อนถึงจะ install font ได้ วิธี Intall Figma Font Helper เปิด Figma ใน Browser

UX Terminology: "Affordance" คืออะไร? – ออกแบบ UI ยังไงให้ Intuitive

“Good designs are intuitive” – งานออกแบบที่ดี คือ งานที่สามารถสื่อสารได้ด้วยตัวของมันเอง UI Design ก็เหมือนกับเรื่องตลก ถ้าต้องอธิบายว่ามันตลกยังไง นั่นก็แปลว่ามันไม่เวิร์กละ ปรากฎการณ์ที่คนเข้าใจ หรือไม่เข้าใจว่างานออกแบบของเราต้องการสื่ออะไร อธิบายได้ด้วย UX Terminology: “Affordance” Norman Door Don Norman (ศาสตราจารย์ Cognitive science) ผู้เขียนหนังสือ “The Design of Everyday Things” ได้อธิบายปรากฎการณ์ Affordance จากบานประตู “Norman Door” คือ ประตูธรรมดาที่คนเปิดผิดด้านบ่อย ๆ ไม่แน่ใจว่าตัวเองต้อง “ผลัก” หรือต้อง “ดึง” เพื่อเปิดกันแน่

UI Tips

เว็บไซต์จำเป็นต้องมีปุ่ม home มั๊ย?

Homepage เปรียบเสมือนหน้าบ้านของเว็บไซต์ที่ช่วยให้ User เข้าใจภาพรวมว่าเว็บทำอะไร และยังช่วย Navigate User ไปยังหน้าอื่น ๆ ของเว็บ ดีไซน์เทรนด์ของเว็บสมัยใหม่ต้องการให้เว็บดูโล่งขึ้น หลาย ๆ เว็บจึงเริ่มเอาเมนู Home ออกจากหน้าเว็บเพื่อให้เว็บดูคลีนขึ้น และเหลือไว้แต่โลโก้สำหรับคลิกกลับไปหน้า Home – ในเมื่อเรามีโลโก้ให้คลิกกลับไปหน้า Home แล้วเว็บจำเป็นต้องมีเมนู “Home” อีกมั๊ย? หน้า Home สำคัญแค่ไหน? หน้า Home เป็นหน้าที่ทีม Design ให้ความสำคัญมากเป็นพิเศษเพราะเป็นหน้าแรกที่คนเข้าเว็บเห็น และเป็นหน้าที่คาดว่าคนจะเห็นเยอะที่สุดในเว็บไซต์ แต่ในความเป็นจริงแล้ว Homepage ไม่ได้เป็นทางเข้าเพียงทางเดียวของเว็บไซต์ ผู้ใช้ส่วนใหญ่เข้าเว็บผ่านทาง Search Engine และไปที่หน้าอื่นก่อนที่จะได้เห็นหน้า Home ซะอีก ในเมื่อ Journey ของ

UI Tips

Context ไหนที่เหมาะกับการใช้ Carousel?

อ้างอิงจากบทความที่แล้ว “เหตุผลที่ไม่ควรใช้ Carousel ในเว็บไซต์” เว็บ eCommerce ใหญ่ ๆ อย่าง Amazon ทำไมยังใช้ Carousel อยู่ เป็นไปได้หรือที่เว็บ scale ขนาดนี้ยังใช้ UI ตัวนี้อยู่ถ้า UI มันแย่จริง ๆ รอบนี้มาดู Counter Research อีกตัวที่ใหม่กว่า มีการเก็บข้อมูล Interaction สมัยใหม่ใน mobile site ร่วมด้วย – หรือการใช้ Carousel มันไม่ได้แย่ขนาดนั้น ถึงขนาดห้ามใช้เลย ถ้าใช้ถูกวิธี อาจจะมีบาง context ที่ใช้แล้วเวิร์กเหมือนกัน งานวิจัย Carousel ของ Mobify Mobify

UI Tips

เหตุผลที่ไม่ควรใช้ Carousel ในเว็บไซต์

“Carousel” (หรือที่เราเรียกว่ากันทั่วไปว่า รูปเลื่อน ๆ หรือรูปหมุน ๆ) เป็น UI ตกแต่งยอดฮิตของเว็บสำเร็จรูป ความนิยมของ Carousel นั้นมาจากส่วนผสมของฟังก์ชั่นด้านดีไซน์และการใช้งาน รวมไปถึงความง่ายในการติดตั้งในเว็บไซต์ Carousel เป็น UI element มีลูกเล่นทำให้ใส่ตัวหนังสือ/กราฟฟิกได้หลายเซ็ต แต่ละ slide อาจจะมีปุ่ม CTA (Call-to-Action) ให้คลิกไปที่ส่วนสำคัญของหน้าเว็บ เช่น หน้าขายสินค้า – เป้าหมายของการใช้ Carousel คือ อยากให้คนอ่าน message และคลิกที่ปุ่ม CTA Carousel กับ Conversion Rate เจ้าของเว็บไซต์จะนับจำนวนครั้งที่คนคลิกปุ่ม CTA เพื่อคำนวณหา Conversion Rate และดูว่าปุ่มนี้มีผลดีต่อยอดขายของเว็บไซต์แค่ไหน – แล้วการใช้ Carousel ทำให้ Conversion Rate

Figma

รวมคีย์ลัด (Shortcut) โปรแกรม Figma

วิธีดู Shortcut ในโปรแกรม Figma กดคีย์ลัด ⌃ + ⇧ + ? หรือ เปิด Figma หาปุ่ม (?) มุมขวาล่าง เลือก “Keyboard shortcuts“ รวมคีย์ลัด (Shortcut) โปรแกรม Figma Tools Search ⌘ + / Move Tool V Frame Tool F Pen Tool P Pencil Tool ⇧ + P Text Tool T