SlideShare a Scribd company logo
A Basic of UX for Beginner
By Yaowaluck Promdee
Grit Education Consultancy Co., Ltd.
Yaowaluck Promdee (Fang)
Managing Director
Grit Education Consultancy Co., Ltd.
การศึกษา (Educations)
o วิทยาศาสตรบัณฑิต สาขา วิทยาการคอมพิวเตอร์
(B.Sc. Computer Science) คณะวิทยาศาสตร์
มหาวิทยาลัยขอนแก่น
o วิทยาศาสตรมหาบัณฑิต สาขา เทคโนโลยีสารสนเทศ
(M.IT. Information Technology) คณะวิทยาศาสตร์
มหาวิทยาลัยขอนแก่น
Manager of Grit Education
Consultancy (present)
Computer Graphic at
Latchmere Performance
Solution company, 2017.
Programmer At Damasac
Faculty of Public health, KKU
Consultant of Kith
Software Co., Ltd.
TA of Web design technology, Human
Computer Interaction, Software engineering
2011 2016 2017 Present2013
ประสบการณ์ (Experiences)
เกียรติบัตรและผลงาน (Certificates)
o Mobile Development Fundamentals : Microsoft
o MCPS: Microsoft Certified Professional
Certificate of Participation International
computer Science and engineering conference
MTA: Web and Software Development
o 2017 IEEE Membership
o Leadership & Team Development International
Business Management, IBMI Berlin, Germany
o Design Thinking in 3 Steps, Udemy
Introduction
o พื้นฐานการออกแบบประสบการณ์ผู้ใช้ Introduction to User Experience(UX)
o การออกแบบให้สวยงาม (Visual Design)
o การวางแผนดีไซน์ (Strategy & Planning)
o การวิเคราะห์ลูกค้า (User Research, Customer Journey, Persona)
o การทาให้เหมาะสมกับผู้พิการ (Accessibly)
o การจัดเรียงข้อมูลให้เหมาะสม (Information Architecture)
o การเลือกใช้เนื้อหาที่เหมาะสม (Content Strategy, Copywriting)
o การทดสอบ (Usability Testing, Interview)
UI UX CXUser Interface User Experience Customer Experience
การออกแบบหน้าตาเครื่องมือ รูปแบบ
ของหน้าจอเว็บไซต์ แอปพลิเคชัน หรือ
รูปลักษณ์ที่มองเห็นของวัตถุนั้น ๆ
ประสบการณ์ของผู้ใช้ กับเครื่องมือนั้น ๆ
ไม่ว่าจะเป็นแอปพลิเคชัน เว็บไซต์ แล้วมี
ความคุ้นเคย คุ้นชิน กับการใช้งาน หรือ
การตอบโต้ระหว่างผู้ใช้กับอุปกรณ์
ประสบการณ์ของผู้ใช้ กับเครื่องมือนั้น ๆ
ไม่ว่าจะเป็นแอปพลิเคชัน เว็บไซต์ แล้วมี
ความคุ้นเคย คุ้นชิน กับการใช้งาน หรือ
การตอบโต้ระหว่างผู้ใช้กับอุปกรณ์
รู้จักกับ UI / UX
• Technology
• Business
• Design
• Design
Image source : arpentechnologies.com/
พื้นฐานการออกแบบประสบการณ์ผู้ใช้
Introduction to User Experience
(UX)
UX
Usable Findable Credible Valuable Accessible Desirable Useful
UX มุ่งเน้นไปที่การออกแบบเพื่อการใช้งาน มุ่งเน้นการทางานและหน้าตาของผลิตภัณฑ์
ใช้งานได้จริง ค้นหาได้ น่าเชื่อถือ มีคุณค่า ที่สามารถเข้าถึงได้ เป็นที่น่าพอใจ มีประโยชน์
การออกแบบให้สวยงาม
Visual Design
1. Scale ขนาด สร้างความสาคัญกับสิ่งต่าง ๆ ด้วยขนาดต่าง ๆ กัน
2. Color สี การเลือกใช้สี มีกฎการใช้สีที่เหมาะสมของงาน สีบอกความอารมณ์ความรู้สึก การดึงดูดความสนใจของผลงาน
3. SPACE พื้นที่ เรื่องของการใช้พื้นที่ว่าง ในการออกแบบ
4. Balance ความสมดุล จัดวางองค์ประกอบต่าง ๆ ให้สมดุล ส่งเสริมกันและกัน
5. Hierarchy การเลือกการจัดวาง เรียงลาดับความสาคัญของเนื้อหา
6. Direction นาสายตา มีทิศทาง
www.pinterest.com
การวางแผน การออกแบบ
Strategy & Planning
ความต้องการ
ของลูกค้า
เทคโนโลยีคุณค่าด้าน
ผลิตภัณฑ์
เก็บความต้องการของลูกค้า Business Requirement
ข้อจากัดและสิ่งที่คาดหวังในการออกแบบ
ขั้นตอนการเก็บข้อมูลที่สาคัญ เพื่อการพัฒนา
ทดสอบการออกแบบ Persona
Usability testing
Lunch Project
UX
Strategy
การวิเคราะห์ลูกค้า
User Research,
Customer Journey,
Persona Persona
เป็นวิธีการสร้างบุคลิกลักษณะของกลุ่มเป้าหมายออกมาเพื่อเป็นตัวแทนกลุ่มเป้าหมายหรือลูกค้าในอุดมคติที่วางไว้จากการใช้ข้อมูลการวิจัยทาง
การตลาดและการเก็บข้อมูลออกมา ซึ่งการทา Persona ออกมานี้มีความสาคัญอย่างมากในการทากลยุทธ์ทางการตลาดต่าง ๆ เพราจะสามารถ
ให้ ภาพที่ชัดเจนได้
Focus Attend Summarize Translate
Objective Fieldwork Analysis Results
Stakeholder
UX Researcher
Persona Background:
Demographics:
Goals:
Hobbies & Interests:
Challenges:
Common Objections:
Biggest Fears:
Source :specialties.bayt.com
การทาให้เข้าถึงได้
Accessibly
การจัดบริการให้ทั่วถึง, การ
เข้าถึง, การบริการเข้าถึง
ประชาชน, ความเข้าถึง
การจัดเรียงข้อมูลให้เหมาะสม
Information
Architecture
โครงสร้างข้อมูลทุกอย่างที่อยู่ภายในแอปหรือเว็บไซต์ การเข้าถึงข้อมูลสินค้าหรือ
บริการที่ง่าย มักเกิดจากการวาง IA อย่างเป็นระบบ การจัดการกลุ่มข้อมูลที่
ยุ่งยากให้เป็น
การออกแบบ Information Architecture ที่ดีควรคานึงถึง 3 สิ่งหลัก
Ontology (ภววิทยา) — การนิยาม
Taxonomy (อนุกรมวิทยา) — การจัดหมวดหมู่และเรียงลาดับ
Choreography(รูปแบบการเข้าถึง) — การเข้าถึง
https://medium.com/skooldio/information-architecture-เรื่องที่-ux-designer-ไม่ควรมองข้าม-29f29832bb5c
การเลือกใช้เนื้อหาที่เหมาะสม
Content Strategy, Copywriting
การทดสอบ
Usability Testing,
Interview
http://www.rapidsofttechnologies.comhttps://www.lullabot.com https://www.startux.co.uk/ux-services/
Usability Testing, Interview
Interaction-design.org
UX/UI Career Salary
http://www.salaryexplorer.com/
Workshop
A basic of UX for beginner
Storyboard Map Design
Common things done with post-its in
the UX process:
• card sorting: useful for sorting all
the 'parts' (be it content, goals,
objectives, etc.) of a site into
meaningful categories.
• flow diagrams: mapping out the
content structure of a site
• paper prototyping: simple
wireframing on paper.
Summary

More Related Content

PDF
การออกแบบ UX UI สำหรับโมบายแอพพลิเคชั่น (UI UX DESIGN FOR MOBILE APP)
PDF
PDF
Concept to creation story and storyboard
PDF
User experience design
PDF
User experience design
PDF
Digital Innovative Thinking and Coding
PPTX
UX Experience อย่าทำให้ฉันคิดเยอะ?
PPT
Instructional Design for e-Learning
การออกแบบ UX UI สำหรับโมบายแอพพลิเคชั่น (UI UX DESIGN FOR MOBILE APP)
Concept to creation story and storyboard
User experience design
User experience design
Digital Innovative Thinking and Coding
UX Experience อย่าทำให้ฉันคิดเยอะ?
Instructional Design for e-Learning

Similar to A basic of UX for beginner (20)

PDF
ประสบการณ์ผู้ใช้ / ส่วนต่อประสานงานกับผู้ใช้ / ปฏิสัมพันธ์ / การตอบสนอง (UX /...
PDF
เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...
PDF
9749740330264
PDF
DA393 Course Activity วิชาการออกแบบเพื่อสร้างแรงบันดาลใจ 3 อาจารย์ บัญญพนต์ พ...
PDF
Service design workbook by tcdc
PDF
Service design workbook “คู่มือการออกแบบบริการ” โดย TCDC
PDF
พัฒนาการคิดให้เลิศล้ำ ด้วยนวัตกรรมการศึกษา ตอนที่ ๒ (Innovation)
PDF
Mobile Interface
PPT
SA Chapter 9
PDF
คู่มือ Design thinking & transmedia storytelling
PDF
Chapter 4 empathize
PDF
เอกสารประกอบการเรียน ภาษา HTML เบื้องต้น
PDF
Chapter 5 define
PDF
ยุทธศาสตร์การออกแบบกับนวัตกรรม A fine line
PDF
การประเมินนวัตกรรมสื่อออนไลน์อาชีวศึกษา
ประสบการณ์ผู้ใช้ / ส่วนต่อประสานงานกับผู้ใช้ / ปฏิสัมพันธ์ / การตอบสนอง (UX /...
เทคนิคการสร้างสื่อเพื่อการปฏิบัติงานในยุคดิจิทัล (Creating Techniques Media f...
9749740330264
DA393 Course Activity วิชาการออกแบบเพื่อสร้างแรงบันดาลใจ 3 อาจารย์ บัญญพนต์ พ...
Service design workbook by tcdc
Service design workbook “คู่มือการออกแบบบริการ” โดย TCDC
พัฒนาการคิดให้เลิศล้ำ ด้วยนวัตกรรมการศึกษา ตอนที่ ๒ (Innovation)
Mobile Interface
SA Chapter 9
คู่มือ Design thinking & transmedia storytelling
Chapter 4 empathize
เอกสารประกอบการเรียน ภาษา HTML เบื้องต้น
Chapter 5 define
ยุทธศาสตร์การออกแบบกับนวัตกรรม A fine line
การประเมินนวัตกรรมสื่อออนไลน์อาชีวศึกษา
Ad

More from Yaowaluck Promdee (20)

PDF
Portfolio design
PPTX
Observation and interviewing
PPTX
Requirement gathering-and-lean-canvas
PDF
Good bad design
PPTX
Bootstrap Framework
PDF
Tables and forms with HTML, CSS
PDF
Navigation and Link
PDF
Graphic, Color and tools
PPTX
Page layouts flexible and fixed layout with CSS
PDF
CSS Boc model
PDF
CSS Font & Text style
PDF
Style and Selector Part2
PDF
Style and Selector
PPTX
Design sitemap
PPTX
Good/Bad Web Design
PPTX
Overview HTML, HTML5 and Validations
PPTX
Web Interface
PDF
Game design
PPTX
Powerpoint
Portfolio design
Observation and interviewing
Requirement gathering-and-lean-canvas
Good bad design
Bootstrap Framework
Tables and forms with HTML, CSS
Navigation and Link
Graphic, Color and tools
Page layouts flexible and fixed layout with CSS
CSS Boc model
CSS Font & Text style
Style and Selector Part2
Style and Selector
Design sitemap
Good/Bad Web Design
Overview HTML, HTML5 and Validations
Web Interface
Game design
Powerpoint
Ad

A basic of UX for beginner

  • 1. A Basic of UX for Beginner By Yaowaluck Promdee Grit Education Consultancy Co., Ltd.
  • 2. Yaowaluck Promdee (Fang) Managing Director Grit Education Consultancy Co., Ltd. การศึกษา (Educations) o วิทยาศาสตรบัณฑิต สาขา วิทยาการคอมพิวเตอร์ (B.Sc. Computer Science) คณะวิทยาศาสตร์ มหาวิทยาลัยขอนแก่น o วิทยาศาสตรมหาบัณฑิต สาขา เทคโนโลยีสารสนเทศ (M.IT. Information Technology) คณะวิทยาศาสตร์ มหาวิทยาลัยขอนแก่น Manager of Grit Education Consultancy (present) Computer Graphic at Latchmere Performance Solution company, 2017. Programmer At Damasac Faculty of Public health, KKU Consultant of Kith Software Co., Ltd. TA of Web design technology, Human Computer Interaction, Software engineering 2011 2016 2017 Present2013 ประสบการณ์ (Experiences) เกียรติบัตรและผลงาน (Certificates) o Mobile Development Fundamentals : Microsoft o MCPS: Microsoft Certified Professional Certificate of Participation International computer Science and engineering conference MTA: Web and Software Development o 2017 IEEE Membership o Leadership & Team Development International Business Management, IBMI Berlin, Germany o Design Thinking in 3 Steps, Udemy
  • 3. Introduction o พื้นฐานการออกแบบประสบการณ์ผู้ใช้ Introduction to User Experience(UX) o การออกแบบให้สวยงาม (Visual Design) o การวางแผนดีไซน์ (Strategy & Planning) o การวิเคราะห์ลูกค้า (User Research, Customer Journey, Persona) o การทาให้เหมาะสมกับผู้พิการ (Accessibly) o การจัดเรียงข้อมูลให้เหมาะสม (Information Architecture) o การเลือกใช้เนื้อหาที่เหมาะสม (Content Strategy, Copywriting) o การทดสอบ (Usability Testing, Interview)
  • 4. UI UX CXUser Interface User Experience Customer Experience การออกแบบหน้าตาเครื่องมือ รูปแบบ ของหน้าจอเว็บไซต์ แอปพลิเคชัน หรือ รูปลักษณ์ที่มองเห็นของวัตถุนั้น ๆ ประสบการณ์ของผู้ใช้ กับเครื่องมือนั้น ๆ ไม่ว่าจะเป็นแอปพลิเคชัน เว็บไซต์ แล้วมี ความคุ้นเคย คุ้นชิน กับการใช้งาน หรือ การตอบโต้ระหว่างผู้ใช้กับอุปกรณ์ ประสบการณ์ของผู้ใช้ กับเครื่องมือนั้น ๆ ไม่ว่าจะเป็นแอปพลิเคชัน เว็บไซต์ แล้วมี ความคุ้นเคย คุ้นชิน กับการใช้งาน หรือ การตอบโต้ระหว่างผู้ใช้กับอุปกรณ์ รู้จักกับ UI / UX
  • 5. • Technology • Business • Design • Design Image source : arpentechnologies.com/
  • 6. พื้นฐานการออกแบบประสบการณ์ผู้ใช้ Introduction to User Experience (UX) UX Usable Findable Credible Valuable Accessible Desirable Useful UX มุ่งเน้นไปที่การออกแบบเพื่อการใช้งาน มุ่งเน้นการทางานและหน้าตาของผลิตภัณฑ์ ใช้งานได้จริง ค้นหาได้ น่าเชื่อถือ มีคุณค่า ที่สามารถเข้าถึงได้ เป็นที่น่าพอใจ มีประโยชน์
  • 7. การออกแบบให้สวยงาม Visual Design 1. Scale ขนาด สร้างความสาคัญกับสิ่งต่าง ๆ ด้วยขนาดต่าง ๆ กัน 2. Color สี การเลือกใช้สี มีกฎการใช้สีที่เหมาะสมของงาน สีบอกความอารมณ์ความรู้สึก การดึงดูดความสนใจของผลงาน 3. SPACE พื้นที่ เรื่องของการใช้พื้นที่ว่าง ในการออกแบบ 4. Balance ความสมดุล จัดวางองค์ประกอบต่าง ๆ ให้สมดุล ส่งเสริมกันและกัน 5. Hierarchy การเลือกการจัดวาง เรียงลาดับความสาคัญของเนื้อหา 6. Direction นาสายตา มีทิศทาง www.pinterest.com
  • 8. การวางแผน การออกแบบ Strategy & Planning ความต้องการ ของลูกค้า เทคโนโลยีคุณค่าด้าน ผลิตภัณฑ์ เก็บความต้องการของลูกค้า Business Requirement ข้อจากัดและสิ่งที่คาดหวังในการออกแบบ ขั้นตอนการเก็บข้อมูลที่สาคัญ เพื่อการพัฒนา ทดสอบการออกแบบ Persona Usability testing Lunch Project UX Strategy
  • 9. การวิเคราะห์ลูกค้า User Research, Customer Journey, Persona Persona เป็นวิธีการสร้างบุคลิกลักษณะของกลุ่มเป้าหมายออกมาเพื่อเป็นตัวแทนกลุ่มเป้าหมายหรือลูกค้าในอุดมคติที่วางไว้จากการใช้ข้อมูลการวิจัยทาง การตลาดและการเก็บข้อมูลออกมา ซึ่งการทา Persona ออกมานี้มีความสาคัญอย่างมากในการทากลยุทธ์ทางการตลาดต่าง ๆ เพราจะสามารถ ให้ ภาพที่ชัดเจนได้ Focus Attend Summarize Translate Objective Fieldwork Analysis Results Stakeholder UX Researcher
  • 10. Persona Background: Demographics: Goals: Hobbies & Interests: Challenges: Common Objections: Biggest Fears:
  • 13. การจัดเรียงข้อมูลให้เหมาะสม Information Architecture โครงสร้างข้อมูลทุกอย่างที่อยู่ภายในแอปหรือเว็บไซต์ การเข้าถึงข้อมูลสินค้าหรือ บริการที่ง่าย มักเกิดจากการวาง IA อย่างเป็นระบบ การจัดการกลุ่มข้อมูลที่ ยุ่งยากให้เป็น การออกแบบ Information Architecture ที่ดีควรคานึงถึง 3 สิ่งหลัก Ontology (ภววิทยา) — การนิยาม Taxonomy (อนุกรมวิทยา) — การจัดหมวดหมู่และเรียงลาดับ Choreography(รูปแบบการเข้าถึง) — การเข้าถึง https://medium.com/skooldio/information-architecture-เรื่องที่-ux-designer-ไม่ควรมองข้าม-29f29832bb5c
  • 22. Common things done with post-its in the UX process: • card sorting: useful for sorting all the 'parts' (be it content, goals, objectives, etc.) of a site into meaningful categories. • flow diagrams: mapping out the content structure of a site • paper prototyping: simple wireframing on paper.