January 2020 - BetterUXUI

รวม 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

Interaction Design คืออะไร?

Interaction Design คืออะไร Interaction Design (IxD) คือ การออกแบบปฎิสัมพันธ์ระหว่างผู้ใช้งาน (user) กับวัตถุ (physical objects) หรือพื้นที่ (space) เพื่อให้ผู้ใช้งานบรรลุเป้าหมายการใช้งานอย่างราบรื่นที่สุด ขอบเขตของ IxD ค่อนข้างกว้าง ครอบคลุมหลาย ๆ ศาสตร์ ซึ่งในแต่ละศาสตร์ยังแตกแยกย่อยไปได้อีก โดยส่วนใหญ่แล้ว เมื่อพูดถึง IxD จะหมายถึง IxD ของเว็บไซต์หรือแอปพลิเคชัน ปฎิสัมพันธ์ (interact) เกิดจากประสาทสัมผัสทั้ง 5 ได้แก่ การมองเห็น การได้ยินเสียง การรับรส ได้กลิ่น การสัมผัส ยกตัวอย่าง เช่น เราใช้มือกด (touch) ปุ่มบนหน้าจอ เราสั่งปิดนาฬิกาปลุกด้วยเสียง ฯลฯ

Information Architecture (IA) คืออะไร?

Information Architecture (IA) คืออะไร? Information architecture is the practice of deciding how to arrange the parts of something to be understandable. The Information Architecture Institute Information Architecture (IA) หรือสถาปัตยกรรมข้อมูล คือ ศาสตร์หนึ่งใน Cognitive psychology เกี่ยวกับการจัดเรียงข้อมูลอย่างเป็นระบบ (logical) ให้ใช้งานง่ายและรวดเร็ว (User-friendly) ถ้าเปรียบเทียบกับห้องสมุด คนที่ทำหน้าที่ IA ก็คือบรรณารักษ์ การจัดเรียงข้อมูลถูกเอามาใช้เกือบทุกที่ ตั้งแต่เมนูอาหารยันรถไฟฟ้า ที่ไหนมีข้อมูลที่นั่นจำเป็นต้องทำ IA

ขนาดหน้าจอเว็บไซต์ (Screen Resolution) ที่ใช้บ่อยที่สุดในประเทศไทย (ปี 2018-2019)

ข้อมูลจาก: StatCounter Global Stats – Screen Resolution Market Share Desktop Resolution 1# 1920×1080 26.3% 2# 1366×768 24.72% 3# 1536×864 8.82% 4# 1600×900 8.44% 5# 1440×900 4.93% Tablet Resolution 1# 768×1024 51.43% 2# 834×1112 5.58% 3# 601×962 4.32% 4# 800×1280 2.54% 5# 1024×768 2.26% Mobile Resolution

ประวัติของ UX

UX คำศัพท์ที่นิยามขึ้นโดย Don Norman ในช่วงปี 1990 แต่ก่อนหน้านี้ศาสตร์ของ UX ถือกำเนิดมานานแล้วตั้งแต่ยุคอารยธรรมเมโสโปเตเมีย การทำความเข้าใจประวัติความเป็นมาของ UX จะช่วยให้เราเห็นภาพว่า UX ไม่ใช่เรื่องไกลตัวและมีความสำคัญมาตั้งแต่ในอดิตจนถึงปัจจุบัน

UX/UI คืออะไร?

BRIEF: “UX” ย่อมาจากคำว่า “User Experience” แปลว่า ประสบการณ์ของ “ผู้ใช้งาน (User)” เป็นศาสตร์แห่งการพยายามทำความเข้าใจความนึกคิดและพฤติกรรมของคน เพื่อนำข้อมูลมาแก้ปัญหาอย่างสร้างสรรค์ และทำให้ประสบการณ์การใช้งานดีขึ้น “UI” ย่อมาจากคำว่า “User Interface” เป็นศิลปศาสตร์ในการออกแบบส่วนเชื่อมต่อผู้ใช้งาน เช่น เว็บไซต์ แอปพลิเคชัน เป็นต้น UX คืออะไร? “UX” ย่อมาจากคำว่า “User Experience” เป็นคำนิยามที่ใช้กันอย่างแพร่หลายในวงการดิจิตัล ซอฟต์แวร์ ไอที เนื่องจากการพัฒนาอย่างก้าวกระโดดของระบบคอมพิวเตอร์ ทำให้คนให้ความสนใจเกี่ยวกับประสบการณ์ของผู้ใช้ที่ได้รับจากการใช้คอมพิวเตอร์มากขึ้นด้วย “User Experience” เกิดจากการรวมคำ 2 คำเข้าด้วยกัน คือ “U = User” หมายถึง ผู้ใช้งาน ในที่นี้จะหมายถึงคนที่ใช้งานสินค้าดิจิตัลต่าง ๆ