UX UI Design เบื้องต้น Section 1 “พื้นฐาน UX UI”

Blog_ux-ui-02

จากที่เราได้รู้จักโลกของ UX UI ไปใน Section ที่แล้ว ใน Section นี้ เราจะมาเข้าใจให้ลึกขึ้นอีกนิด สำหรับ UX UI Design โดยมีคำกล่าวสั้นๆว่า

UX คือ นามธรรม
UI คือ รูปธรรม

และในพื้นฐานแรก ที่เราจะมาเริ่มเรียนรู้คือ UI Design


เคลียร์กันชัดๆ UI Design คืออะไร?

นิยามของ UI Design คือการออกแบบสิ่งที่เชื่อมประสานระหว่างผู้ใช้กับสิ่งใดสิ่งหนึ่ง

ตัวอย่าง :: หากมีไอศกรีมอยู่ 1 ถ้วย ตัวกลางระหว่างตัวคุณกับไอศกรีมคือช้อน ซึ่งในที่นี้ ช้อนเปรียบเสมือน UI ตรงที่ถ้าไอศกรีมถ้วยนี้เป็นทรงเตี้ยช้อนที่ถูกออกแบบมาจะต้องเป็นทรงสั้น หรือถ้าไอศกรีมถ้วยนี้เป็นแบบทรงสูงช้อนก็จะต้องถูกออกแบบมาให้เป็นทรงยาว ดังนี้ การออกแบบที่ดี คือจะต้องออกแบบช้อนให้สะดวกสบายต่อการตักไอศกรีมในถ้วยทรงต่างๆนั้น

ซึ่งในกรณีของ Mobile Application หรือ Website นี้ สิ่งที่เป็นตัวเชื่อมประสานระหว่างคุณกับ Content (เนื้อหาข้อความต่างๆ โดยจะรวมไปถึง ภาพ, วีดีโอ และอื่นๆ) ก็คือ หน้าWebsite / Application

ดังนั้น การออกแบบ UI Design ของ Website หรือ Mobile Application ก็คือการสร้างเส้นทางตัวเชื่อมประสานให้กับผู้ใช้งานเพื่อไปสู่เป้าหมายที่ตั้งไว้ได้สำเร็จ


เคลียร์กันชัดๆ UX Design คืออะไร?

UX Design เป็นสิ่งที่จับต้องไม่ได้ นิยามของ UX Design คือการออกแบบประสบการณ์ของผู้ใช้งาน ซึ่งประสบการณ์เป็นเรื่องของความรู้สึก การที่เราจะเกิดประสบการณ์ต้องเกิดจากการรับรู้ควบคู่ไปกับความรู้สึก

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

ดังนั้น ประสบการณ์ที่ได้กินไอศกรีมผ่านช้อน หรือความรู้สึกที่ได้ชมภาพยนต์ผ่าน Website ก็คือประสบการณ์ที่ถูกออกแบบขึ้นมา

การออกแบบ UX Design ของ Website และ Mobile Application จะสร้างประสบการณ์ การจดจำ ความรู้สึกที่ดี และนำพาให้ผู้ใช้งานกลับมาใช้งานอีกครั้ง ซึ่งสิ่งเหล่านี้คือ เป้าหมายที่แท้จริงของผู้ออกแบบ


องค์ประกอบที่ต้องเรียนรู้สำหรับการออกแบบ

ในด้านของ UX Design จะเรียนรู้กระบวนการหรือแนวคิดที่เป็นเครื่องมือต่างๆ

  • Design Thinking :: เป็นเครื่องมือหรือกระบวนการที่ให้ความสำคัญกับการทำความเข้าใจผู้ใช้

  • Service Design :: เป็นกระบวนการที่เน้นการออกแบบสำหรับบริการเป็นหลัก โดยมีคอนเซ็ปว่า Don't speak just doing

  • Design Sprint :: เป็นกระบวนการออกแบบที่ได้ถูกพัฒนาขึ้น จุดเด่นคือเน้นความเร็วเป็นสำคัญ โดยจะจบได้ใน 5 วัน แต่มีประเด็นที่สำคัญคือ Design Sprint นั้นจะใช้กับผลิตภัณฑ์หรือบริการที่ออกสู่ตลาดแล้วเท่านั้น

  • User Centered Design :: เป็นแนวคิดในการออกแบบที่มุ่งเน้นให้ความสำคัญกับผู้ใช้งานเป็นหลัก โดยการคิดแก้ปัญหาจะมุ่งเน้นไปที่ผู้ใช้งานเป็นสำคัญ

ในด้านของ UI Design จะเน้นโครงสร้างและองค์ประกอบของการออกแบบ

  • Information Design :: เป็นการออกแบบข้อมูล ที่เน้นการนำเสนอข้อมูลที่สร้างความน่าสนใจ สร้างความเข้าใจ และเกิดการเรียงลำดับของข้อมูลที่ถูกต้อง

  • Interaction Design :: เป็นกระบวนการการออกแบบที่เน้นการตอบโต้หรือการตอบสนองที่ถูกต้อง และนำทางผู้ใช้ไปยังเป้าหมายที่ต้องการ

  • Information Architect :: เป็นเรื่องของการจัดกลุ่มข้อมูล การเรียงลำดับข้อมูล การจัดโครงสร้างของข้อมูล ให้มีความถูกต้องและเข้าใจได้ง่ายเพื่อให้ผู้ใช้งานรู้ลำดับก่อน-หลังการเข้าถึงข้อมูลได้

  • Visual Design :: เป็นการออกแบบที่เน้นการนำเสนอภาพที่มีองค์ประกอบต่างๆ เช่น การจัดเลเอ้าท์, การใช้สี, การใช้ตัวอักษร, การใช้โครงสร้าง, การใช้รูปทรง และรวมไปถึงการใช้พื้นที่ว่างในการนำเสนอภาพให้ผู้ใช้งานได้เข้าใจ

  • Human Computer Interaction :: เป็นศาสตร์การออกแบบที่เฉพาะเจาะจงโดยพูดถึงความสัมพันธ์ระหว่างมนุษย์กับ Computer เมื่อสองสิ่งนี้ต้องมาทำงานร่วมกัน จะมีเอกลักษณ์เฉพาะบางอย่าง ทั้งในเรื่องของความยืดหยุ่น ความหลากหลายการปรับเปลี่ยน โดยปัจจุบันยังมีการพัฒนาอย่างไม่หยุดยั้ง


กรณีตัวอย่างการออกแบบ UX UI สำหรับ Mobile Application

การเรียนรู้ที่ดีที่สุด คือการเรียนรู้จากงานที่สำเร็จเสร็จสิ้นแล้ว

ปัจจุบันมีผู้ใช้งาน Mobile Application เยอะกว่า Website ผ่าน PC Computer มากขึ้น 5 เท่า!!

โดยองค์ประกอบของการออกแบบ Mobile App คือ

  • การออกแบบข้อมูล
  • การออกแบบการตอบสนองหรือการตอบโต้
  • การออกแบบรูปทรง สี และตัวอักษร
    ขึ้นอยู่กับเป้าหมายของผู้ใช้งานเป็นสำคัญ และเนื้อหาที่เราต้องการนำเสนอ

ตัวอย่างการออกแบบ UI ของ Mobile App

ตัวอย่างที่ 1 "Facebook Application" :: การออกแบบหน้าแรกของ Facebook เน้นการเล่าเรื่องราวต่างๆ โดยจะแบ่งออกเป็น 3 ส่วน ดังนี้

ตัวอย่างที่ 2 "NTC Application" :: ซึ่งเป็น App แนะนำวิธีการออกกำลังกายที่มีการออกแบบการจัดหมวดหมู่ที่ดี เพราะเป็น Application ที่มีข้อมูลเยอะมาก ทำให้ต้องแยกข้อมูลให้ง่ายและสะดวกต่อการเข้าถึงของผู้ใช้งาน ดังนี้

ตัวอย่างที่ 3 "TED Application" :: เป็น Application ที่นำเสนอข้อมูลเป็นคลิปวีดีโอต่างๆของงาน TED ที่มีคนหลากหลายอาชีพ มาเล่าประสบการณ์ต่างๆให้ฟัง

ตัวอย่างที่ 4 "Unsplash Application" :: เป็น Application ที่นำเสนอในเรื่องของรูปภาพ ดังนั้นจึงใช้การนำเสนอที่เน้นรูปภาพเป็นหลัก มีการลดรายละเอียดที่เป็นส่วนของข้อความออกไป

ตัวอย่างที่ 5 "Line Man Application" :: นำเสนอด้วยข้อมูลจำนวนมาก เน้นข้อความและย่อรูปภาพให้เล็กลง เน้นการนำเสนอเนื้อหา และ Content เยอะๆ พร้อมๆกัน เพื่อให้ผู้ใช้เห็นบริการทั้งหมดที่มี โดยเราจะเห็นดีไซน์แบบนี้ได้ใน Application ที่เกี่ยวกับ E-Commerce


กรณีตัวอย่างการออกแบบ UX UI สำหรับ Website

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

ตัวอย่างการออกแบบ UI ของ Website

ตัวอย่างที่ 1 "Facebook" :: เน้นส่วนที่สำคัญตรงกลาง

ตัวอย่างที่ 2 "Netflix" :: นำเสนอด้วยภาพตัวอย่างภาพยนต์ขนาดเล็กจำนวนมากพร้อมๆกัน เพื่อให้ผู้ใช้เห็นข้อมูลได้เยอะ และเลือกดูได้ตามความสนใจ

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


กรณีตัวอย่างการเรียนรู้การออกแบบ UX UI จากความผิดพลาด

  • เกิดจากการที่เราให้ความสำคัญกับข้อมูลไม่ถูกต้อง
  • ไม่สามารถเรียงลำดับความสำคัญของข้อมูลได้
Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Recent Post

ปี2020, จริงๆ เราไม่ต้องใช้ jQuery แล้วก็ได้นะ

jQuery เป็นหนึ่งใน JavaScript Library ที่โด่งดังมาก (เมื่อ 10 ปีที่แล้ว) เรียกว่าในยุคนั้นแทบจะทุกเว็บจะต้องมีการติดตั้ง jQuery เอาไว้อย่างแน่นอน แต่เมื่อยุคสมัยเปลี่ยนไป เบราเซอร์ใหม่ๆ ไม่มีปัญหาการรัน JavaScript ตั้งแต่ ES6 ขึ้นไปแล้ว การใช้งาน jQuery จึงลดน้อยลงเรื่อยๆ แต่ก็มีบางโปรเจคเหมือนกัน ที่เราต้องเข้าไปแก้โค้ดเก่าๆ ซึ่งเขียนด้วย jQuery เอาไว้ ในบทความนี้จะมาเปรียบเทียบว่าทุกวันนี้เราสามารถแปลง jQuery ให้กลายเป็น Vanilla

Vue3 มีอะไรเปลี่ยนแปลงไปบ้าง

Vue 3 เพิ่งเปิดตัวมาเมื่อเดือนที่แล้ว ซึ่งมาพร้อมกับฟีเจอร์ใหม่ๆ และสิ่งที่เปลี่ยนแปลงไป เรามาดูกันดีกว่า เขียนใหม่ด้วย TypeScript ภาษา JavaScript นั้นไม่มี Type ของตัวแปรทำให้เวลาเขียนโปรแกรมมีโอกาสเกิดข้อผิลพลาดเยอะ ดังนั้นการเขียนงานโปรเจคใหญ่ๆ คนเลยนิยมเปลี่ยนไปใช้ TypeScript แทน (ถ้ายังไม่รู้จัก TypeScript อ่านต่อได้ที่นี่) สำหรับ Vue 3.0 นี้ก็เป็นการเขียนใหม่ด้วย TypeScript แทน แต่เวลาเราเอามาใช้งาน เราสามารถเลือกได้ว่าจะใช้แบบ JavaScript ตามปกติ

สอนใช้ TypeScript ในโปรเจค Node.js + Express

Node.js กับ TypeScript Node.js เป็นหนึ่งในเฟรมเวิร์คยอดนิยมสำหรับเขียนโปรแกรมฝั่ง Backend แต่เพราะมันสร้างมาตั้งแต่ปี 2009 ยุคที่ JavaScript ยังเป็นเวอร์ชัน ES5 อยู่เลย โดยดีฟอลต์แล้ว Node.js เลยไม่ซัพพอร์ท TypeScript เลย ไม่เหมือนกับ Deno ที่เพิ่งสร้างขึ้นมาโดยซัพพอร์ท TypeScript เป็นค่า default ตั้งแต่แรก เพื่อชีวิตที่ดีกว่า มาเซ็ตโปรเจค Node.js + Express

UX UI Design เบื้องต้น Section 1 “พื้นฐาน UX UI”

จากที่เราได้รู้จักโลกของ UX UI ไปใน Section ที่แล้ว ใน Section นี้ เราจะมาเข้าใจให้ลึกขึ้นอีกนิด สำหรับ UX UI Design โดยมีคำกล่าวสั้นๆว่า UX คือ นามธรรม UI คือ รูปธรรม และในพื้นฐานแรก ที่เราจะมาเริ่มเรียนรู้คือ UI Design เคลียร์กันชัดๆ UI Design คืออะไร? นิยามของ

ทำยังไง? อยากให้ JavaScript เรียกฟังก์ชันในภาษา PHP เขียนโค้ดยังไงนะ

หนึ่งในคำถามที่เว็บโปรแกรมเมอร์มือใหม่ถามกันเยอะมากจนน่าจัดเก็บไว้เป็น FAQ เลยก็คือ "จะทำยังไงให้เราเรียกใช้ฟังก์ชันภาษา PHP จากสคริป JavaScript ได้" เช่นแบบนี้... <button onclick="<?php functionInPhp1(); ?>"> คลิกฉันสิ! </button> หรือแบบนี้... function functionInJs(){ let x = <?php functionInPhp2(); ?> } คำตอบคือ ด้วยการทำงานของเว็บที่ทำงานบนโปรโตคอล http นั้น...มันทำไม่ได้!! (แต่มีวิธีแก้

[How To] การติดตั้ง Google Maps for Flutter เบื้องต้น

วันนี้ผมจะมาแนะนำและวิธีการใช้งานเบื้องต้นของ plugin ที่น่าสนใจตัวหนึ่งที่มีชื่อว่า "Google Maps for Flutter" โดย plugin ตัวนี้จะให้ Google Maps ที่เป็น Widget มาให้เราได้เปิดใช้งานแผนที่ของกูเกิ้ล ขั้นตอนการติดตั้ง อันดับแรก เราต้องทำการขอ API Key ที่ลิ้งค์ https://cloud.google.com/maps-platform/ เมื่อเข้ามาหน้าเว็บไซต์แล้วให้เข้าไปที่ Console (ตรงขวามุมบนของหน้าจอ) สร้าง Project ของเราขึ้นมาก่อน เมื่อทำการสร้างเสร็จแล้วให้เปิดแท็บด้านขวามือ แล้วเลือกเมนูที่ชื่อว่า

UX UI Design เบื้องต้น Section 0 “โลกของ UX UI”

หากเปรียบเทียบการออกแบบ UX UI เป็นประตู ดังนั้น Designer คือผู้ที่ต้องแก้ไขปัญหา เพื่อให้ตอบโจทย์ผู้ใช้ ไม่ใช่คำนึงแค่ความสวยงามเท่านั้น โดยใน Sec.0 นี้ เราจะมองภาพง่ายๆแบบใกล้ตัว เช่น การออกแบบประตู ซึ่งการออกแบบ เราจะมีพื้นฐานด้วยกัน 4 อย่าง ดังนี้ พื้นฐานการออกแบบมี 4 อย่าง คือ การออกแบบหน้าตา (User Interface Design) :: หน้าตาของประตู

สอนวิธีเซ็ตโปรเจค TypeScript / มาใส่ไทป์ให้ JavaScript เพื่อลดความผิดพลาดในการเขียนโค้ดกันดีกว่า

ภาษา JavaScript นั้นเป็นภาษาที่เริ่มเขียนได้ไม่ยาก ยิ่งถ้าใครเขียนภาษาสาย Structure/OOP เช่น C/C++, C#, Java มาก่อน อาจจะชอบในความเป็น Dynamic Type เราสร้างตัวแปรแล้วเก็บค่าอะไรก็ได้ ทำให้มีความคล่องตัวในการเขียนมากๆ ก่อนที่พอเขียนไปเรื่อยๆ เราจะพบความแปลกของมัน ยิ่งเขียนไปนานๆ เราก็พบว่ามันเป็นภาษาที่ทำให้เกิดบั๊กได้ง่ายมาก และเป็นหนึ่งในภาษาที่น่าปวดหัวที่สุดที่คนโหวตๆ กันเลย ด้วยเหตุผลแรกคือการที่ตัวแปรไม่มี Type นั่นเอง (อีกเหตุผลหนึ่งคือส่วนใหญ่ของคนที่เปลี่ยนมาเขียน JavaScript เคยชินกับภาษาแนว OOP มาก่อน พอมาเขียนภาษาแนว

รู้จักกับ TypeScript – ประวัติของภาษาที่เติมไทป์ให้กับ JavaScript

ในบทความนี้จะเล่าถึงที่มาที่ไปของ TypeScript อย่างเดียวนะ ส่วนเรื่องสอนว่าใช้งานยังไงได้บ้าง จะเขียนอีกทีในบล็อกต่อๆ ไป สำหรับภาษาโปรแกรมทุกวันนี้ ถ้าแบ่งคร่าวๆ ด้วยชนิดของตัวแปร เราจะแบ่งได้ 2 อย่าง คือ Static Type: ต้องกำหนดชนิดตัวแปร เช่น int, string ตั้งแต่สร้างตัวแปร และ Dynamic Type ตัวแปรประเภทนี้ไม่ต้องบอกว่าเก็บค่าชนิดไหน เปลี่ยนไปได้เรื่อยๆ สำหรับภาษาแบบ Dynamic Type ที่ไม่ต้องกำหนดชนิดตัวแปรให้แน่นอน จะเซ็ตค่าเป็นอะไรก็ได้นั้นอาจจะทำให้เขียนง่าย

Async in Dart (5) รู้จักกับ FutureBuilder/StreamBuilder, ตัวช่วยสร้าง Async-Widget ใน Futter

เนื้อหาในบทนี้ เป็นคลาสเฉพาะที่มากับ Flutter Framework เท่านั้น .. ถ้าเขียน Dart ธรรมดาจะไม่มีให้ใช้นะ!! เอาจริงๆ 99% ของคนที่ศึกษาภาษา Dart ก็เพื่อเอาไปเขียนแอพ (หรือเว็บ/เด็กส์ท็อป) แบบ cross-platform ด้วยเฟรมเวิร์ก Flutter นั่นแหละ ตามความคิดของเรา จริงๆ Flutter น่าจะเลือกภาษา Kotlin มาใช้แทนมากกว่า แต่ก็มีเหตุผลหลายๆ อย่างนั่นแหละที่ทำให้ทำไม่ได้ สำหรับการเขียน Flutter

Dependency Injection กับ Service Locator ต่างกันยังไงนะ?

ในโลกของ OOP เรามักจะสร้างคลาสต่างๆ ที่มีการเรียกใช้กันต่อเป็นทอดๆ มากมาย เช่นโค้ดข้างล่างนี่ class Car { private Engine engine; public Car() { this.engine = new Engine(); } } Car car = new Car(); เราสร้างคลาส Car และ Engine

Async in Dart (4) ควบคุมข้อมูลในstreamอย่างเหนือชั้นด้วย StreamController

Async in Dart (4) ควบคุมข้อมูลในstreamอย่างเหนือชั้นด้วย StreamController ในบทที่แล้วเราสอนการสร้าง Stream แบบง่ายๆ ไปแล้ว แต่ในบางครั้งเราต้องการควบคุมข้อมูลใน Stream แบบคัสตอมมากๆ ซึ่งข้อมูลอาจจะเข้ามาจากหลายทางมากๆ การที่เรามีแค่ yield จากฟังก์ชันเดียวอาจจะไม่เพียงพอ ดังนั้นเลยเป็นที่มาของคลาสที่ชื่อว่า StreamController ซึ่งเป็นคลาสที่เอาไว้ควบคุม Stream อีกที StreamController การสร้าง Stream แบบธรรมดาก็จะเป็นประมาณนี้ Stream<int> getNumberStream() async* {