SlideShare a Scribd company logo

A basic of UX for beginner

•
•
Yaowaluck Promdee
Yaowaluck Promdee

หลักสูตรประกอบไปด้วยเนื้อหา พื้นฐานการออกแบบประสบการณ์ผู้ใช้ Introduction to User Experience(UX) การออกแบบให้สวยงาม (Visual Design) การวางแผนดีไซน์ (Strategy & Planning) การวิเคราะห์ลูกค้า (User Research, Customer Journey, Persona) การทำให้เหมาะสมกับผู้พิการ (Accessibly) การจัดเรียงข้อมูลให้เหมาะสม (Information Architecture) การเลือกใช้เนื้อหาที่เหมาะสม (Content Strategy, Copywriting) การทดสอบ (Usability Testing, Interview)

Related slideshows

ความหมายและความสำค ญของโครงงานคอมพ วเตอร_
ความหมายและความสำค ญของโครงงานคอมพ วเตอร_ความหมายและความสำค ญของโครงงานคอมพ วเตอร_
ความหมายและความสำค ญของโครงงานคอมพ วเตอร_
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร���
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
 
Chap1 updated
Chap1 updatedChap1 updated
Chap1 updated
 
1 of 23
Download to read offline
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

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.