The latest articles on DEV Community by Rawiya Jumruanthong (@rawiyaju). https://dev.to/rawiyaju https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F436804%2F969d5455-142b-4ca6-8b79-fc6be722a120.jpg https://dev.to/rawiyaju en Rawiya Jumruanthong Thu, 07 Jan 2021 02:59:56 +0000 https://dev.to/tamemo/ux-ui-design-section-2-ux-design-2o4d https://dev.to/tamemo/ux-ui-design-section-2-ux-design-2o4d <p>จากใน Section ที่แล้ว เราได้รู้พื้นฐานต่างๆของ UX UI Design ไปแล้ว ใน Section นี้ เราจะมาเริ่มทำความเข้าใจ และเจาะลึกลงไปกับ UX Design ให้มากขึ้น</p> <h2> หัวข้อการเรียนรู้ UX Design </h2> <p>การออกแบบประสบการณ์ เป็นจุดเริ่มต้นความสำเร็จในการออกแบบ การรับรู้เป้าหมายและการเรียนรู้จากผู้ใช้งาน ทำให้เรากำหนดทิศทางของการออกแบบได้ ซึ่งจะทำให้ผู้ใช้งานเกิดการประทับใจ เกิดความสนใจ และเกิดการพอใจในการใช้งานได้ </p> <p>โดยจะเรียนรู้ทั้งหมดดังนี้</p> <ul> <li>กระบวนการ Design Thinking</li> <li>Empathize การเข้าอกเข้าใจผู้ใช้งาน</li> <li>Define การกำหนด การเลือกปัญหา ที่เราควรให้ความใส่ใจ</li> <li>Ideate การสร้างสรรค์ไอเดียและการคิดไอเดียเพื่อแก้ปัญหา</li> <li>วิธีการสร้างต้นแบบ และทดสอบต้นแบบ เพื่อนำไปสู่การสร้างผลิตภัณฑ์หรือบริการที่แท้จริง</li> </ul> <h2> UX Design มีอยู่ในทุกสิ่ง </h2> <p>การที่เราจะเกิด Experience หรือประสบการณ์ได้นั้น จะเกิดจากการรับรู้ และความรู้สึก ในการรับรู้อาจจะมาจากการสัมผัส การมองเห็น การได้ยิน หรือความรู้สึกที่เกิดขึ้นภายใน และต้องควบคู่ไปกับความรู้สึกด้วย เช่น รู้สึกชอบหรือไม่ชอบ รู้มีความสุขหรือไม่มี รู้สึกดีหรือไม่ดี</p> <p>โดยแบ่งเป็นกรณีศึกษาได้ 2 แบบ คือ</p> <ul> <li>การออกแบบบริการ</li> <li>การออกแบบผลิตภัณฑ์</li> </ul> <blockquote> <p>สรุปคือ Experience หรือประสบการณ์ มีความหลากหลาย มีความแตกต่างกัน การออกแบบประสบการณ์จึงต้องใส่ใจการรับรู้และความรู้สึกเป็นสิ่งสำคัญ</p> </blockquote> <h2> แนวคิดและกระบวนการ Design Thinking </h2> <p>เป็นเครื่องมือที่ได้รับความนิยมมากที่สุดในการออกแบบ UX โดย Design Thinking ถูกสร้างขึ้นโดยบริษัท IDEO เป็นกระบวนการการออกแบบผลิตภัณฑ์ ซึ่งได้รับการยอมรับจากทั่วโลก ได้รับความนิยมถึงขั้นบริษัทยักษ์ใหญ่อย่าง Google, Facebook, Apple ก็ได้นำกระบวนการนี้ไปใช้งานอย่างจริงจัง จนทำให้แนวคิดนี้แพร่หลายไปทั่วโลก</p> <p><em>Design Thinking เป็นกระบวนการที่เน้นความเข้าอกเข้าใจผู้ใช้งานเป็นสำคัญ</em></p> <p>ซึ่งประกอบไปด้วย 5 ขั้นตอนสำคัญ คือ</p> <ul> <li>Empathize : ความเข้าใจผู้ใช้งาน</li> <li>Define : การเลือกปัญหาที่เราสนใจ หรือปัญหาที่เราอยากเข้าไปแก้ไข</li> <li>Ideate : การคิดสร้างสรรค์เพื่อแก้ปัญหา</li> <li>Prototype : การสร้างต้นแบบ โดยไม่เน้นการสร้างผลิตภัณฑ์หรือบริการจริงๆ แต่จะเป็นการสร้างต้นแบบเพื่อใช้ทดลองก่อน</li> <li>การทดสอบ : คือการนำต้นแบบที่เราได้ไปทดสอบ </li> </ul> <p><em>และเมื่อจบขั้นตอนที่ 5 แล้ว ก็จะวนลูปกลับสู่ Empathize อีกครั้ง</em></p> <blockquote> <p><strong>ดังนั้นการทำ Design Thinking จะเป็นกระบวนการที่ทำซ้ำไปเรื่อยๆ</strong> และเมื่อจบการทำ Design Thinking เราจะยิ่งเข้าใจผู้ใช้งานมากยิ่งขึ้น เข้าใจถึงปัญหา และได้ไอเดียการแก้ปัญหานั้นๆมากขึ้น</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8kGI9Kf6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-EXB8GWZYSEg/X9spoTysvzI/AAAAAAAAAOc/eJp-M_bpsH0-ImtJx757awQ2OMMwbhkdwCLcBGAsYHQ/s1200/design-thinking.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8kGI9Kf6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-EXB8GWZYSEg/X9spoTysvzI/AAAAAAAAAOc/eJp-M_bpsH0-ImtJx757awQ2OMMwbhkdwCLcBGAsYHQ/s1200/design-thinking.jpg" alt="" width="880" height="660"></a></p> <h2> Empathize การเข้าอกเข้าใจผู้ใช้งาน </h2> <p>เริ่มจากการตั้งสมมติฐาน ปัญหา ข้อสงสัย หรือพฤติกรรมที่คุณสนใจ ซึ่งจะเป็นการ<br> นำไปสู่กลุ่มเป้าหมาย</p> <p>ซึ่งการทำความเข้าใจผู้ใช้งาน จะมี 4 ประเด็นหลักๆ</p> <ul> <li>สิ่งที่ผู้ใช้คิด</li> <li>สิ่งที่ผู้ใช้พูด</li> <li>สิ่งที่ผู้ใช้รู้สึก</li> <li>สิ่งที่ผู้ใช้ลงมือกระทำ</li> </ul> <blockquote> <p>โดยจะต้องเก็บข้อมูลโดยตรง ไม่ใช่แค่ทำแบบสอบถาม หรือเสิร์ชหาตาม Google ต้องเก็บรวบรวมข้อมูลจากผู้ใช้งานโดยตรง เช่น การสังเกต การสัมภาษณ์ หรือการให้ผู้ใช้งานได้ลงมือใช้จริง</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HtKlg2l4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-f8qbRFRhDOA/X9sriUcjonI/AAAAAAAAAO0/H7ZbCeT7i2gsaaGK9LwRnjolIjNM2wamQCLcBGAsYHQ/s2048/empathize.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HtKlg2l4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-f8qbRFRhDOA/X9sriUcjonI/AAAAAAAAAO0/H7ZbCeT7i2gsaaGK9LwRnjolIjNM2wamQCLcBGAsYHQ/s2048/empathize.jpg" alt="" width="880" height="482"></a></p> <h2> การสัมภาษณ์และวิธีการตั้งคำถาม </h2> <p>เป็นเครื่องมือที่ง่ายที่สุด ไม่ต้องลงทุนสูง แต่มีข้อจำกัด ในการจะได้ข้อมูลที่เป็นเท็จมีสูงมาก ดังนั้นจึงต้องมีเครื่องมืออื่นๆเข้ามาช่วยด้วย และต้องมุ่งเน้นเพื่อให้ได้คำตอบในเรื่องสิ่งที่ผู้ใช้พูด, สิ่งที่ผู้ใช้คิด, สิ่งที่ผู้ใช้รู้สึก และ สิ่งที่ผู้ใช้ลงมือกระทำ </p> <p>5 รูปแบบคำถามหลักๆที่จำเป็นจะต้องมี</p> <ul> <li><p><strong>Variable</strong> : เป็นคำถามที่ถามเรื่องพื้นฐานทั่วไป เช่น อายุ การศึกษา เพศ ความสนใจ เป็นคำถามพื้นฐานเพื่อยืนยันว่า ผู้ที่ให้สัมภาษณ์เป็นกลุ่มเป้าหมายของเราจริงๆ</p></li> <li><p><strong>Mental Model</strong> : ถามความคิด ว่าผู้ที่ให้สัมภาษณ์มีความคิดเห็นอย่างไร มีมุมมองอย่างไร เช่น คุณมีความคิดอย่างไรกับเรื่องนี้</p></li> <li><p><strong>Activity</strong> : ถามถึงสิ่งที่ผู้ที่ให้สัมภาษณ์ลงมือกระทำ ว่าผู้ที่ให้สัมภาษณ์กระทำอย่างไร อะไรคือสิ่งที่ผู้ที่ให้สัมภาษณ์กระทำอยู่เป็นประจำ เช่น ปกติเรียนหนังสืออย่างไร </p></li> <li><p><strong>Motivation</strong> : ถามเกี่ยวกับความรู้สึก ถามเกี่ยวกับเป้าหมายของผู้ที่ให้สัมภาษณ์ เช่น ความสุขในชีวิตคุณคืออะไร</p></li> <li><p><strong>Opportunity</strong> : ถามเกี่ยวกับโอกาส โดยจะมุ่งเน้นไปที่สิ่งที่ทำให้ผู้ที่ให้สัมภาษณ์เป็นปัญหา หรือสิ่งที่ผู้ที่ให้สัมภาษณ์จะลงมือทำเพื่อหลีกเลี่ยงปัญหาเหล่านั้น เช่น อะไรเป็นปัญหามากที่สุดในการเข้าห้องเรียนของคุณ และคุณมีวิธีหลีกเลี่ยงอย่างไร</p></li> </ul> <blockquote> <p>โดยขั้นตอนการสัมภาษณ์จะเริ่มต้นด้วยคำถามพื้นฐาน(Variabl)ก่อนเสมอ จากนั้นคำถามอีก 4 รูปแบบจะเรียงอย่างไรก็ได้ แต่ต้องปรับให้เหมาะสมกับผู้ที่ให้สัมภาษณ์ และสิ่งสำคัญคือต้องถามให้ครบทั้ง 5 รูปแบบ เพื่อที่จะได้รู้ในทุกๆด้านของผู้ที่ให้สัมภาษณ์</p> </blockquote> <h2> เทคนิคการสัมภาษณ์และการบันทึก </h2> <p>โดยพื้นฐานจะประกอบด้วยทีมงาน 3 คน ทำหน้าที่แตกต่างกัน</p> <ul> <li> <strong>Interview</strong> : ทำการสัมภาษณ์ ทำหน้าที่ตั้งคำถามและสื่อสารกับผู้ให้สัมภาษณ์</li> <li> <strong>Note</strong> : ทำหน้าที่จดบันทึก ไม่ต้องคิดหรือวิเคราะห์ แค่จดทุกอย่างที่เป็นข้อเท็จจริง ที่ผู้ถูกสัมภาษณ์พูดออกมา</li> <li> <strong>Observe</strong> : ทำหน้าที่สังเกต มองพฤติกรรมของผู้ถูกสัมภาษณ์ สังเกตการกระทำ และแยกให้ออกว่าข้อมูลไหนที่พูดออกมาแล้วเป็นเรื่องจริงหรือเป็นเท็จ</li> </ul> <p>&gt;หากมีผู้ให้สัมภาษณ์แค่ 2 คน คนที่ทำหน้าที่ Note ต้องคอยสังเกตพฤติกรรมด้วย และหากมีผู้สัมภาษณ์คนเดียว <strong>ให้มุ่งเน้นไปที่การสัมภาษณ์และการจดบันทึกเป็นหลัก</strong></p> <ol> <li><p>แรกเริ่มเราจะต้องแนะนำตัวเองและบอกถึงเป้าหมายที่จะสัมภาษณ์ก่อน เพื่อให้ผู้ถูกสัมภาษณ์ไม่เครียด และสบายใจ <em>โดยขั้นตอนนี้จะใช้เวลาประมาณ 3 นาที</em></p></li> <li><p>ให้ผู้ถูกสัมภาษณ์แนะนำตนเอง และเริ่มถามคำถาม โดยจะเป็นคำถามพื้นฐาน(Variable) <em>ขั้นตอนนี้จะใช้เวลาประมาณ 3 นาที</em></p></li> <li><p>เริ่มถามคำถามที่อยากถาม ประเด็นที่สนใจ เพื่อเก็บข้อมูล <em>ขั้นตอนนี้จะใช้เวลาประมาณ 15 นาที</em></p></li> <li><p>ขั้นตอนสุดท้าย หากมีบางสิ่งที่อยากให้ผู้ถูกสัมภาษณ์ลงมือปฏิบัติให้ดู หรือมีแบบสอบถาม <em>จะใช้เวลาประมาณ 5 นาที</em></p></li> </ol> <p><strong>ทั้ง 4 ขั้นตอนนี้ไม่ควรเกินระยะเวลา 1 ชั่วโมง</strong></p> <blockquote> <p>สรุปคือวิธีการสัมภาษณ์ เราจะต้องมุ่งความสนใจไปในเรื่องของสิ่งที่ผู้ใช้พูด, สิ่งที่ผู้ใช้คิด, สิ่งที่ผู้ใช้รู้สึก และ สิ่งที่ผู้ใช้ลงมือกระทำ โดยเตรียมคำถามให้พร้อมและครบทั้ง 5 รูปแบบ</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--N8WD40DI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-VuGrHaUCKg0/X9sql3EAZqI/AAAAAAAAAOo/rSz8STsUz2YYfNeU2tABp9iapOxlF7tAwCLcBGAsYHQ/s2048/shutterstock_678279070.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N8WD40DI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-VuGrHaUCKg0/X9sql3EAZqI/AAAAAAAAAOo/rSz8STsUz2YYfNeU2tABp9iapOxlF7tAwCLcBGAsYHQ/s2048/shutterstock_678279070.jpg" alt="" width="880" height="587"></a></p> <h2> การสังเกต </h2> <p>เป็นวิธีการที่มีประสิทธิภาพมาก จากการเก็บข้อมูลของผู้ใช้ วิธีการสังเกตมี 3 แบบ</p> <ol> <li><p>มองถึงรูปลักษณ์ภายนอก : สีหน้า ท่าทาง บุคลิกภาพ เป็นต้น</p></li> <li><p>มองพฤติกรรม : สิ่งที่ทำเป็นประจำ สิ่งที่ทำอย่างเคยชิน สิ่งที่ทำอย่างปกติ</p></li> <li><p>มองการกระทำ : โฟกัส หรือให้ความสำคัญกับพฤติกรรมบางอย่างที่เราสนใจ หรือเป็นพฤติกรรมที่เราอยากแก้ไขปัญหา</p></li> </ol> <p>นอกจากนี้การสังเกตจะมีอีก 2 วิธี คือ</p> <ol> <li><p>สังเกตห่างๆ หรือสังเกตจากระยะไกล : เป็นการมองพฤติกรรม หรือการกระทำจากระยะไกลๆ ดูสิ่งที่เขากระทำ หรือสิ่งที่เขาตัดสินใจ วิธีการคือเลือกบุคคลแค่บุคคลเดียว แล้วมองตลอด <em>อย่ามองแค่รวมๆ</em> ให้โฟกัสที่คน 1 คน ต่อการสังเกต หรือโฟกัสที่จุดที่เราสนใจไปเลย ตัวอย่างเช่น เราต้องการทำ Application เกี่ยวกับระบบจ่ายเงินในร้านสะดวกซื้อ ก็ให้โฟกัสแค่พฤติกรรมการจ่ายเงินของลูกค้าที่หน้าเคาท์เตอร์ไปเลย </p></li> <li><p>สังเกตแบบประชิดตัว : จำเป็นต้องอนุญาตจากผู้ที่เราจะสังเกตก่อน ระหว่างติดตามสามารถพูดคุยได้ เพราะนั่นจะยิ่งทำให้ได้ข้อมูลมากขึ้น</p></li> </ol> <blockquote> <p>สรุปคือการสังเกต เป็นวิธีที่ได้ผลและได้ประสิทธิภาพที่ค่อนข้างดี แต่ทำยาก และใช้สมาธิกับการใส่ใจสูงมาก ต้องสนใจทั้งภาพรวม และรายละเอียดเล็กๆน้อยๆไปพร้อมๆกัน</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KCYuvJmx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-jGYUDSbltw4/X9ssMR21PbI/AAAAAAAAAO8/iG9IwLLL3SEWyma4SlQnpViCupOqnR_wQCLcBGAsYHQ/s2048/shutterstock_1229695522.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KCYuvJmx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-jGYUDSbltw4/X9ssMR21PbI/AAAAAAAAAO8/iG9IwLLL3SEWyma4SlQnpViCupOqnR_wQCLcBGAsYHQ/s2048/shutterstock_1229695522.jpg" alt="" width="880" height="587"></a></p> <h2> การใช้งาน Empathy Map </h2> <p>คือวิธีการรวบรวม และวิเคราะห์ข้อมูล ประกอบด้วย 4 ส่วน คือ</p> <ul> <li> <strong>การพูด</strong> : จะบันทึกข้อมูลทุกอย่างที่ผู้พูดได้พูดไว้ และดูว่าคำพูดไหน หรือประโยคไหนที่น่าสนใจ หรือเป็นประโยคที่พูดซ้ำๆ บ่อยๆ</li> <li> <strong>การคิด</strong> : วิเคราะห์ว่าผู้ใช้มีกระบวนการคิดอย่างไร มีความคิดเห็นอย่างไร ซึ่งสามารถดูได้จากการกระทำด้วย เราจะรู้ได้ว่าเขามีการตัดสินใจอย่างไร</li> <li> <strong>ความรู้สึก</strong> : วิเคราะห์ว่าผู้ใช้รู้สึกอย่างไร พอใจหรือไม่พอใจอย่างไรบ้าง สังเกตได้จากสีหน้า น้ำเสียง และการกระทำที่แสดงออกถึงความรู้สึกของผู้ใช้ </li> <li> <strong>การลงมือทำ</strong> : บันทึกสิ่งที่ผู้ใช้จำเป็นต้องกระทำ หรือตั้งใจที่จะกระทำ โดยบันทึกและดูว่า พฤติกรรมไหนที่น่าสนใจ </li> </ul> <blockquote> <p>เมื่อรวบรวมและวิเคราะห์ตามนี้ได้เสร็จ จะทำให้เห็นภาพของผู้ใช้งานได้ชัดขึ้น และเป็นรูปธรรมมากขึ้น ยิ่งมีคนให้วิเคราะห์มาก ก็ยิ่งทำให้เห็นมุมมองกว้างมากขึ้น</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oxdHGskK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-hQ6PPethMUo/X9sssJr2bvI/AAAAAAAAAPE/lB2pmBBQLJ8MV1W_X0hJMUPcrOo6ykHcwCLcBGAsYHQ/s2048/shutterstock_1364311289.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oxdHGskK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-hQ6PPethMUo/X9sssJr2bvI/AAAAAAAAAPE/lB2pmBBQLJ8MV1W_X0hJMUPcrOo6ykHcwCLcBGAsYHQ/s2048/shutterstock_1364311289.jpg" alt="" width="880" height="587"></a></p> <h2> Define </h2> <p>คือการกำหนดเป้าหมาย หรือปัญหาที่เราสนใจ โดยข้อมูลจากตอนแรกที่ได้มาจากการสัมภาษณ์ หรือสังเกต โดยวิธีการที่เราจะเลือกปัยหามาอยู่ 3 แบบ คือ</p> <ul> <li>ปัญหาที่<strong>หนัก</strong> : ส่งผลกระทบต่อคน, สังคม และสิ่งแวดล้อม เป็นปัญหาที่เกิดผลจริง สร้างความเสียหายจริง เช่น ปัญหาที่จอดรถในห้าง ห้างจะยังไม่แก้ไขอะไร เพราะผู้คนที่มาใช้บริการยังไม่ลดลง การแก้ปัญหาในส่วนนี้จึงยังไม่จำเป็น แต่ถ้าเกิดมันทำให้ผู้ใช้บริการลดลง แสดงว่าปัญหานี้ส่งผล และควรได้รับการแก้ไขทันที </li> <li>ปัญหาที่<strong>ใหญ่</strong> : ส่งผลกระทบต่อผู้คนจำนวนมาก</li> <li>ปัญหาที่<strong>ส่งผลในระยะยาว</strong> : ส่งผลต่อเนื่อง และเป็นระยะเวลายาวนาน</li> </ul> <p>&gt;สรุปคือการ Define คือการที่เราเฟ้นหาประเด็นสำคัญที่ควรค่าแก่การแก้ไข เมื่อเราเลือกปัญหาได้แล้ว เราต้องเลือกผู้ใช้ว่า เป็นใคร และจะใช้ได้อย่างไร (Persona)</p> <h2> การสร้าง Persona </h2> <p>คือการสร้างหรือกำหนดตัวผู้ใช้ขึ้นมา โดยจะเป็นการสร้างตัวละครสมมติขึ้นมาเพื่อเป็นตัวแทนของกลุ่มเป้าหมาย</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XujUbZap--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-7eqHWdmSzsg/X0XVQNJANFI/AAAAAAAAAMk/yVyPEJF_kA8DCeQI-9yvc9PBdbffpoI3QCLcBGAsYHQ/s2000/Persona.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XujUbZap--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-7eqHWdmSzsg/X0XVQNJANFI/AAAAAAAAAMk/yVyPEJF_kA8DCeQI-9yvc9PBdbffpoI3QCLcBGAsYHQ/s2000/Persona.jpg" alt="" width="880" height="510"></a></p> <ul> <li><p><strong>Name</strong> : ระบุชื่อ หรือตั้งชื่อขึ้นมา โดยเป็นชื่อสมมติ</p></li> <li><p><strong>Photo</strong> : ใส่รูปของผู้ใช้ หารูปโดยให้บุคลิก ลักษณะท่าทาง อยู่ในกลุ่มเป้าหมาย</p></li> <li><p><strong>Sentence</strong> : บอกประโยคสั้นๆที่เป็นปัญหาของผู้ใช้</p></li> <li><p><strong>Biography</strong> : ระบุข้อมูลพื้นฐาน เช่น อายุ เพศ ส่วนสูง การศึกษา เป็นต้น</p></li> <li><p><strong>Behavior</strong> : ระบุพฤติกรรมของผู้ใช้ เช่น เป็นคนนอนตื่นสาย ชอบทานอาหารไทย ชอบเที่ยวต่างประเทศเดือนละครั้ง เป็นต้น</p></li> <li><p><strong>Pain</strong> : ระบุความทุกข์ หรือปัญหาที่ผู้ใช้เจอ ที่เราต้องการไปแก้ไข</p></li> <li><p><strong>Goal&amp;Motivation</strong> : ระบุเป้าหมายว่าคืออะไร ผู้ใช้อยากได้อะไร หรืออยากให้อะไรเกิดขึ้น และเมื่อแก้ไขปัญหาแล้วอยากให้ผลลัพธ์แบบไหนเกิดขึ้น ความคาดหวังคืออะไร </p></li> </ul> <blockquote> <p>ดังนั้นเมื่อเราสร้าง Persona เสร็จสิ้นแล้ว เราจะได้ตัวแทนของกลุ่มผู้ใช้จากที่ได้ทำมา เพื่อให้เห็นภาพชัดเจนยิ่งขึ้น และแจกจ่ายให้กับคนในทีม เพื่อให้เห็นภาพร่วมกัน เป็นไปในทิศทางเดียวกัน</p> </blockquote> <h2> Ideate </h2> <p>ในส่วนนี้่จะเน้นไปที่เรื่องของ<strong>ปริมาณ</strong> ไม่ใช่คุณภาพ สิ่งที่สำคัญในการคิด Idea คือ <strong>จะต้องสนุก</strong> มีความบ้า, มีความกล้า และมีความแปลกใหม่</p> <h2> เทคนิคการสร้างสรรค์ไอเดีย </h2> <p>ก่อนเราจะเริ่มสร้างไอเดีย ควรจำไว้ว่า <strong>ต้องไม่กลัวความล้มเหลว และต้องไม่กลัวข้อจำกัด</strong></p> <ul> <li><p><strong>เทคนิคที่ 1 คือ "การตั้งคำถาม"</strong> : ต้องตั้งคำถามให้ดี ให้แหวก แล้วเราจะได้คำตอบที่สร้างสรรค์</p></li> <li><p><strong>เทคนิคที่ 2 คือ "การเชื่อมประสาน"</strong> : คือการนำ 2 สิ่งที่ต่างกันมากๆ มาเชื่อมต่อกัน จะทำให้ได้สิ่งใหม่ที่สร้างสรรค์มากกว่าเดิมออกมา</p></li> <li><p><strong>เทคนิคที่ 3 คือ "ลองทำสิ่งแปลกใหม่"</strong> : เปลี่ยนสิ่งแวดล้อมใหม่ๆ จะช่วยสร้างไอเดียแปลกใหม่</p></li> </ul> <blockquote> <p>สรุปคือ การคิดสร้างสรรค์ คือการอกจากกรอบเดิมๆ ข้อจำกัดเดิมๆ และลองฝึกฝนด้วยการตั้งคำถาม, เชื่อมประสาน และทำสิ่งที่แปลกใหม่</p> </blockquote> <h2> Step Sketch </h2> <p>มีทั้งหมด 4 ขั้นตอน ดังนี้</p> <p><strong>ขั้นตอนที่ 1</strong> : รวบรวมข้อมูลที่ได้มาทั้งหมดที่มี ใช้เวลาประมาณ 20 นาที</p> <p><strong>ขั้นตอนที่ 2</strong> : คิดไอเดียออกมาเป็นข้อๆ โดยไม่จำกัด เน้นปริมาณมากๆ และเลือกมา 1 ไอเดีย ที่ชอบที่สุด ใช้เวลาประมาณ 20 นาที</p> <p><strong>ขั้นตอนที่ 3</strong> : นำ 1 ไอเดียที่ได้มา Sketch เพิ่มเป็น 8 ไอเดีย และเลือกมา 1 ไอเดียที่ชอบที่สุด ใช้เวลาประมาณ 8 นาที</p> <p><strong>ขั้นตอนที่ 4</strong> : นำไอเดียที่ได้มา Sketch ตั้งชื่อว่าอะไร มีขั้นตอนการทำงานอย่างไร (เริ่มอย่างไร/ทำงานอย่างไร/จบอย่างไร)</p> <h2> Prototype </h2> <p>วิธีการสร้างต้นแบบ เป็นต้นแบบในที่นี้ทำขึ้นเพื่อทดลอง และจะไม่นำไปใช้จริง โดยแนวคิดคือ หยาบ, เร็ว และถูก มีเป้าหมายเพื่อใช้ทดสอบการใช้งาน ให้รู้ว่าผู้ใช้รู้สึกอย่างไร, ใช้และจะเกิดอะไรขึ้น และตรงตามที่ออกแบบไว้หรือไม่</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HW_SaXBY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-Xh4TXhfrcx0/X9stqQsNE3I/AAAAAAAAAPQ/wy_2I3GnlyEkFTf7PcgY8iSex-l5tqPHQCLcBGAsYHQ/s2048/shutterstock_1114480664.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HW_SaXBY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-Xh4TXhfrcx0/X9stqQsNE3I/AAAAAAAAAPQ/wy_2I3GnlyEkFTf7PcgY8iSex-l5tqPHQCLcBGAsYHQ/s2048/shutterstock_1114480664.jpg" alt="" width="880" height="563"></a></p> <h2> เทคนิคการสร้าง Phototype </h2> <p><strong>1. Paper Prototype</strong> : เหมาะกับการทดสอบ Application หรือ Website เป็นต้นแบบที่ง่ายที่สุด โดยจะวาดลงไปบนกระดาษ</p> <p><strong>2. Desktop Prototype</strong> : เหมาะกับการออกแบบบริการ หรือพื้นที่ด้านใดด้านหนึ่ง สร้างโดยใช้ของเล่น, กระดาษ หรือดินน้ำมัน (คล้ายๆกับการสร้าง Model ของสถาปัตย์)</p> <p><strong>3. Role-Play</strong> : ใช้ตัวบุคคลมาสมมติเป็นตัวละคร ใช้เพื่อทดสอบการให้บริการ</p> <p><strong>4. Cardboard Prototype</strong> : เหมาะกับการออกแบบผลิตภัณฑ์ โดยใช้อุปกรณ์คือ กระดาษแข็งที่นำมาขึ้นรูปเป็นอุปกรณ์ต่างๆ เพื่อลองให้ผู้ใช้ ทดลองจับต้องกับผลิตภัณฑ์</p> <h2> การวาด Wireframe สำหรับ Paper Prototype </h2> <p>ซึ่ง Wireframe คือเทคนิคการร่างเส้นให้ออกมาเป็น Application หรือ Website โดยคงคอนเซ็ป "หยาบ/เร็ว/ง่าย"</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MSG3Avfq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-dZmxYnQ6lF4/X0X1Xca2EjI/AAAAAAAAAMw/ArjVM4uoYZ4sLL5mb4fv_HJ6NCBoqZigACLcBGAsYHQ/s2048/shutterstock_1080156374.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MSG3Avfq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-dZmxYnQ6lF4/X0X1Xca2EjI/AAAAAAAAAMw/ArjVM4uoYZ4sLL5mb4fv_HJ6NCBoqZigACLcBGAsYHQ/s2048/shutterstock_1080156374.jpg" alt="" width="880" height="565"></a></p> <p>เริ่มต้นการวาด Wireframe จากโจทย์หรือฟังก์ชั่นที่ต้องการทำ และต้องการทดสอบ โดยใช้ฟังก์ชั่นนั้นเป็นตัวตั้ง เริ่มต้นจากหน้าแรกก่อน ว่าโครงสร้างเป็นอย่างไร และตามด้วยปุ่มต่างๆกดแล้วไปไหน <em>ย้ำว่าวาดคร่าวๆ</em></p> <h2> Test (การทดสอบ) </h2> <p>หรือคือการทดลองว่าสิ่งที่เราคิด สิ่งที่เราคาดหวัง หรือไอเดียที่เราสร้างขึ้นมานั้น ตรงและให้ผลลัพธ์ตามที่เราคิดไว้หรือไม่</p> <p><strong>"เป้าหมายของการทดสอบ : การได้ Feedback"</strong></p> <p>เมื่อได้รับ Feedback จะทำให้เราเห็นผลลัพธ์ เห็นภาพชัดเจนมากขึ้น</p> <blockquote> <p>ดังนั้นการทดสอบจึงสำคัญที่สุด เพราะมันจะนำเราไปสู่ข้อเท็จจริง และจะทำให้เราได้เรียนรู้มากขึ้น เข้าใจมากขึ้น</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s---53mkLyk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-_QFwGpkxIFo/X9suK6k3nLI/AAAAAAAAAPY/hSgi-gHt7qAZpeg0Jvy1d6uhqiimOErAwCLcBGAsYHQ/s2048/shutterstock_714655705.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s---53mkLyk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-_QFwGpkxIFo/X9suK6k3nLI/AAAAAAAAAPY/hSgi-gHt7qAZpeg0Jvy1d6uhqiimOErAwCLcBGAsYHQ/s2048/shutterstock_714655705.jpg" alt="" width="880" height="495"></a></p> <h2> รูปแบบในการ Test </h2> <p>มี 2 รูปแบบ โดยขึ้นอยู่กับเป้าหมาย </p> <ul> <li><p><strong>การทดสอบแบบหยาบ</strong> : ไว้ใช้ทดสอบไอเดีย แนวคิด ความเป็นไปได้ของไอเดีย เช่นการใช้ Paper Prototype</p></li> <li><p><strong>การทดสอบแบบละเอียด</strong> : ไว้เรียนรู้ภาพย่อยๆที่มีอยู่ เช่น รายละเอียดในการออกแบบ Font, สี, ปุ่ม หรือเมื่อผู้ใช้ใช้แล้ว จะมีพฤติกรรมอย่างไร เป้าหมายเพื่ออะไร ดูว่าผู้ใช้เข้าใจการทำงานของ App, ปุ่ม, ข้อความหรือไม่ </p></li> </ul> <h2> เครื่องมือที่ต้องใช้ในการ Test </h2> <p>สิ่งที่ต้องเตรียม </p> <p><strong>1. สถานที่</strong> : ถ้า Test แบบหยาบ จะใช้สถานที่แบบไหน ตรงไหนก็ได้ แต่ถ้า Test แบบละเอียด จำเป็นต้องใช้สถานที่มิดชิด และส่วนตัว เพื่อให้มีสมาธิมากขึ้น</p> <p><strong>2. ทีมงาน</strong> : ประกอบไปด้วย</p> <ul> <li>Interview : ทำหน้าที่ทดสอบ และสัมภาษณ์</li> <li>Observer : ทำหน้าที่สังเกตการณ์ คอยมองรายละเอียด และอารมณ์</li> <li>Simulator : ทำหน้าที่จำลองการทดสอบ เช่นทำเสียง Effect</li> </ul> <blockquote> <p>แต่ถ้าไม่มีทีมงาน ให้สนใจแค่ข้อ 2 และ 3 ข้อ 1 ไม่จำเป็นเพราะเราอยากดูแค่พฤติกรรมของผู้ใช้</p> </blockquote> <p><strong>3. สิ่งที่ใช้ในการบันทึกการทดสอบ</strong> : ประกอบไปด้วย</p> <ul> <li>กล้อง : โฟกัสที่หน้าจอ App และใบหน้าของผู้ใช้งาน </li> <li>การจดบันทึก : เก็บรายละเอียดที่กล้องทำไม่ได้</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8Al9qm6M--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-yOC3JAYe02s/X9suvheMxqI/AAAAAAAAAPk/MMHpDAGIyH0agDEd0bVoF3ENdjoPMgVKACLcBGAsYHQ/s2048/shutterstock_1250079847.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8Al9qm6M--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-yOC3JAYe02s/X9suvheMxqI/AAAAAAAAAPk/MMHpDAGIyH0agDEd0bVoF3ENdjoPMgVKACLcBGAsYHQ/s2048/shutterstock_1250079847.jpg" alt="" width="880" height="587"></a></p> <h2> ขั้นตอนวิธีการ Test </h2> <p><strong>ขั้นตอนที่ 1</strong> : แนะนำตัว และบอกเป้าหมายของการทดสอบ ว่าทำไปเพื่ออะไร</p> <p><strong>ขั้นตอนที่ 2</strong> : สร้างบรรยากาศ เพื่อให้ผู้ใช้รู้สึกไม่กดดัน รู้สึกสบายๆ และบอกผู้ใช้ว่าไม่มีผลต่อเขา เป็นการทดลองผลิตภัณฑ์ หรือบริการ</p> <p><strong>ขั้นตอนที่ 3</strong> : ให้ผู้ใช้ ได้ลองใช้งานผลิตภัณฑ์ หรือบริการ จากนั้นลอบสังเกตพฤติกรรม และสีหน้า</p> <p><strong>ขั้นตอนที่ 4</strong> : ตั้งโจทย์ที่ผู้ผลิตอยากรู้ และให้ผู้ใช้ลองตอบ เช่น เข้าใจหรือไม่ หรืออาจจะลองกำหมดโจทย์ให้ผู้ใช้ทำ "ถ้าหากต้องการโพสรูป ต้องทำอย่างไร?" เป็นต้น</p> <p><strong>ขั้นตอนที่ 5</strong> : สอบถามความรู้สึก, ข้อคิดเห็น หรือ Feedback ของผู้ใช้</p> <blockquote> <p>คำถามสำคัญคือ คุณคิดว่า App นี้ เป็น App สำหรับอะไร?</p> </blockquote> <h2> จงทำซ้ำ </h2> <blockquote> <p>ทำซ้ำลูปไปเรื่อยๆ เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด และเข้าใจผู้ใช้มากขึ้น!!</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Vd8SL_LB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-wv37fXx77O8/X9c6mQmnE0I/AAAAAAAAAOM/4ezj23UcAxEW82QTjqiz03Rru1ZEwtfmwCLcBGAsYHQ/s3727/Blog_ux-ui-02_loop.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Vd8SL_LB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://1.bp.blogspot.com/-wv37fXx77O8/X9c6mQmnE0I/AAAAAAAAAOM/4ezj23UcAxEW82QTjqiz03Rru1ZEwtfmwCLcBGAsYHQ/s3727/Blog_ux-ui-02_loop.jpg" alt="" width="880" height="182"></a></p>