<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Stories by JibJib Saranya on Medium]]></title>
        <description><![CDATA[Stories by JibJib Saranya on Medium]]></description>
        <link>https://medium.com/@jibjibsaranya?source=rss-29ab180a3d1f------2</link>
        <image>
            <url>https://cdn-images-1.medium.com/fit/c/150/150/1*Lqvk3sCuvELiaCqiFnORKg.jpeg</url>
            <title>Stories by JibJib Saranya on Medium</title>
            <link>https://medium.com/@jibjibsaranya?source=rss-29ab180a3d1f------2</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Sat, 14 Nov 2026 16:39:01 GMT</lastBuildDate>
        <atom:link href="https://medium.com/@jibjibsaranya/feed" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com/" rel="hub"/>
        <item>
            <title><![CDATA[How to run think aloud? — บอกให้ User คิดดัง ๆ ทำยังไงดี]]></title>
            <link>https://medium.com/indiedish/how-to-run-think-aloud-%E0%B8%9A%E0%B8%AD%E0%B8%81%E0%B9%83%E0%B8%AB%E0%B9%89-user-%E0%B8%84%E0%B8%B4%E0%B8%94%E0%B8%94%E0%B8%B1%E0%B8%87-%E0%B9%86-%E0%B8%97%E0%B8%B3%E0%B8%A2%E0%B8%B1%E0%B8%87%E0%B9%84%E0%B8%87%E0%B8%94%E0%B8%B5-803db466a8c8?source=rss-29ab180a3d1f------2</link>
            <guid isPermaLink="false">https://medium.com/p/803db466a8c8</guid>
            <category><![CDATA[user-experience]]></category>
            <category><![CDATA[ux-research]]></category>
            <category><![CDATA[usability]]></category>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[usability-testing]]></category>
            <dc:creator><![CDATA[JibJib Saranya]]></dc:creator>
            <pubDate>Sun, 10 Nov 2019 10:35:40 GMT</pubDate>
            <atom:updated>2019-11-10T10:35:40.346Z</atom:updated>
            <content:encoded><![CDATA[<h3>How to run think aloud? — บอกให้ User คิดดัง ๆ ทำยังไงดี</h3><h4>จาก Jacob Greensphan, UX Coaching ระดับโลก!</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*DC6GLRWwJhkH5g69" /></figure><p>สวัสดีค่ะ จากตอนที่แล้ว <a href="https://medium.com/indiedish/4-%E0%B9%80%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87-ux-%E0%B8%97%E0%B8%B5%E0%B9%88-startup-%E0%B8%97%E0%B8%B1%E0%B9%88%E0%B8%A7%E0%B9%82%E0%B8%A5%E0%B8%81%E0%B8%A1%E0%B8%B1%E0%B8%81%E0%B8%9C%E0%B8%B4%E0%B8%94%E0%B8%9E%E0%B8%A5%E0%B8%B2%E0%B8%94-72ea58c49f4e">4 เรื่อง UX ที่ Startup ทั่วโลกมักผิดพลาด</a> Jacob บอกเราว่าควรเอา Product ของเราไปให้ User หรือผู้ใช้งาน ทดลองใช้งานจริง ๆ ด้วย เพื่อให้เราเรียนรู้ข้อผิดพลาดของเราจากการสังเกตเค้าตอนใช้งาน Product ซึ่งสิ่งหนึ่งที่ Jacob ยังเน้นย้ำมาก ๆ คือ อย่าลืมบอกให้เค้า <strong>“Think Aloud”</strong> คิดดัง ๆ ให้เราได้ยินด้วย หรือ การให้เค้าพูดสิ่งที่เค้าคิดออกมานั่นเอง แล้วเราจะทำยังไงให้เค้าพูดมันออกมา วันนี้เราจะมาขยายความวีธีการทำให้ User คิดดัง ๆ กัน…</p><h3>เริ่มต้นจากการสร้างความสบายใจ</h3><p>ก่อนอื่นเลยการจะทำให้ User ซึ่งเป็นคนที่แทบจะไม่รู้จักสนิทชิดเชื้อกับเรา สามารถบอกความในใจที่เค้าคิดออกมาได้นั้น เราต้องทำให้เค้ารู้สึกสบายใจมากที่สุดก่อน ซึ่งอาจทำได้ง่าย ๆ โดย…</p><ul><li><strong>จัดสภาพแวดล้อมให้เหมาะสม<br></strong>สภาพแวดล้อมค่อนข้างมีผลโดยตรงต่อพฤติกรรม ดังนั้น การตรวจสอบให้แน่ใจว่าสภาพแวดล้อม ห้องที่จะทำการสัมภาษณ์ หรือทำการทดสอบ User นั้น สะอาดและสะดวกสบายสำหรับ User อาจช่วยให้เค้ารู้สึกสบายใจ และพูดสิ่งที่เค้าคิดออกมากับเรามากขึ้นได้ (จริง ๆ หลายคนมองข้ามเรื่องนี้ แต่ Jacob ค่อนข้างให้ความสำคัญ สังเกตได้จากใน Workshop มีการส่งตัวแทนกลุ่มสลับกันทำ Usability Testing แล้วมีกลุ่มหนึ่ง เพื่อนเดินมายืนดู Product แล้วยืนคุยกันตรงนั้น Jacob ก็เดินมาบอกว่า หาเก้าอี้มาให้ User คุณนั่งสิ อย่าลืมทำให้เค้ารู้สึกสบายนะ)</li><li><strong>ต้อนรับอย่างเป็นมิตร<br></strong>สิ่งที่ง่ายที่สุดเลยของการเป็นมิตรกับคนที่เพิ่งเจอหน้ากันคือ การยิ้มอย่างจริงใจ สำหรับคนไทยแล้วเรื่องนี้ยิ่งทำได้อย่างง่ายดายมาก ๆ นอกจากการยิ้มตอนรับ แล้วเราอาจชวนเค้าคุยเรื่องทั่วไปเล็ก ๆ น้อย ๆ (Small Talk) เพื่อเป็นการเปิดบทสนทนาอย่างผ่อนคลาย เช่น ถามถึงเรื่องการเดินทางมายังสถานที่สัมภาษณ์ว่าเป็นอย่างไรบ้าง รถติดไหม เป็นต้น</li><li><strong>ย้ำว่าเราไม่ได้ทดสอบคุณ<br></strong>สิ่งสำคัญอีกหนึ่งอย่างก่อนเริ่มต้นการทดสอบ คือ เราควรชี้แจงให้ User เข้าใจว่า เราไม่ได้ทดสอบเค้านะ แต่เรากำลังทดสอบ Product, App หรือ Website ของเรา ดังนั้น หากระหว่างที่ทดสอบเค้ากดอะไรผิดพลาด ไม่เป็นอะไรเลย ไม่มีผลใด ๆ สบายใจได้ อีกหนึ่งอย่างที่ช่วยได้ คือ เราบอกเค้าว่า เราไม่ได้เป็นคนที่สร้างตัว Product นี้ขึ้นมา เราเป็นเพียงคนที่ช่วยสัมภาษณ์และทำทดสอบเท่านั้นก็ช่วยให้เค้าเปิดใจพูดกับเราได้มากขึ้น โดยที่เค้าไม่ต้องเกรงใจเรา (แม้ว่าจริง ๆ แล้วในบางครั้ง เราเป็นคนทำเองก็ตาม ฮ่า ๆ )</li></ul><h3>Think Aloud ไม่ได้มีวิธีเดียว</h3><p>จริง ๆ แล้ว ถ้าเราหาข้อมูลเกี่ยวกับการทำ Usability Test เราจะพบว่า หลาย ๆ สำนักมักบอกให้ User พูดสิ่งที่เค้าคิดออกมาระหว่างทำการทดสอบ อันที่จริงแล้ว Jacob บอกว่า เราสามารถทำ Think Aloud ได้ 2 วิธี คือ…</p><h4>1. Concurrent Think Aloud</h4><p>เป็นวิธีที่คนที่ทำ Usability Testing บ่อย ๆ จะคุ้นเคยกันนี้ วิธีนี้คือการบอกให้ User พูดสิ่งที่คิดในระหว่างที่ทำทดสอบ ไม่ว่าคิดอะไรอยู่ พูดออกมาในตอนนั้นได้หมดเลย</p><h4>2. Retrospective Think Aloud</h4><p>วิธีนี้ต่างจาก Concurrent Think Aloud ตรงที่ Concurrent จะให้ User พูดสิ่งที่คิดออกมาระหว่างทำเลย แต่ Retrospective จะปล่อยให้ User ทำ task ที่กำหนด หรือปล่อยเค้าลองเล่นลองกด Prototype จนเสร็จก่อน แล้วจึงถามประสบการณ์ในการทำสิ่ง task นั้น ของเค้า ว่าเป็นอย่างไรบ้าง ให้เค้าพูดออกมาในภายหลัง</p><p>ทั้ง 2 วิธีด้านบนจะทำให้เราได้เห็นข้อผิดพลาดของเราจากการทดสอบได้แตกต่างกัน แต่แตกต่างกันอย่างไรนั้น ขออนุญาตพาไปรู้จักความผิดพลาดที่จะเกิดขึ้นในการทำ Usability Testing กันก่อน…</p><h3>Slips &amp; Mistakes</h3><p>ในการทำ Usability Testing นั้นจะทำให้เรามองเห็นข้อผิดพลาดที่เกิดจากการที่ User ทดลองใช้งาน product ของเราได้ 2 แบบ…</p><ul><li><strong>Slips</strong> <br>คือ การที่ User มีความตั้งใจจะทำสิ่งหนึ่ง รู้ว่าตัวเองว่าต้องการจะทำอะไร แต่ไปกระทำอีกสิ่งหนึ่งโดยที่เค้าไม่ได้ตั้งใจ เช่น การพิมพ์คำผิด จาก ‘ขอบคุณครับ’ เป็น ‘ชอบคุณครับ’ เพราะมือไปโดนปุ่มตัวอักษร ‘ช’ ที่อยู่ใกล้กับ ‘ข’ โดยไม่ได้ตั้งใจ เป็นต้น</li><li><strong>Mistakes<br></strong>คือ การที่ User มีความตั้งใจที่ผิดตั้งแต่ต้น หรือ เรียกได้ว่า เข้าใจผิด เลยกระทำสิ่งนั้นด้วยวิธีการที่ผิด เช่น การตั้งใจพิมพ์คำว่า ‘นะค่ะ’ มีไม้เอก เพราะไม่รู้ว่าคำที่ถูกต้องคือ ‘นะคะ’ ไม่ต้องมีไม้เอก นั่นเอง (ใครอ่านบทความนี้แล้วยังเขียนผิด ตีมือ นะคะ 55555)</li></ul><h3>Concurrent vs. Retrospective Think Aloud</h3><p>ตามที่ได้กล่าวไปข้างต้น ว่าสองวิธีนี้ จะทำให้เราเห็นข้อผิดพลาดที่แตกต่างกันคือ….</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*b8TQnbAcfLoHo-dGAwcDXg.jpeg" /></figure><p>Concurrent think aloud จะทำให้เห็นข้อผิดพลาดที่เป็น Slips มากกว่า Mistakes และ feedback ที่เราได้จาก User ก็จะเป็นลำดับขั้นตอนตาม task และ flow ที่เรากำหนดมากกว่า ในขณะที่ Retrospective think aloud ทำให้เราเห็น Mistakes ที่จะเกิดขึ้นได้มากกว่า Slips และได้ feedback จาก User ที่เป็นภาพรวมของระบบ หรือ Flow มากกว่า</p><h3>แล้วเลือกใช้ทั้ง 2 วิธี ยังไงดี</h3><p>การเลือกใช้วิธี Think Aloud ทั้งสองแบบ ก็มีข้อดีข้อเสียต่างกัน ขึ้นอยู่กับว่า Usability Testing นั้น เราอยากจะรู้อะไร เลยขอสรุปเป็นข้อแนะนำในการใช้ Think Aloud ทั้ง 2 วิธีดังนี้…</p><h4>Concurrent Think Aloud</h4><p>เหมาะสำหรับการทดสอบที่ต้องการความเข้าใจการใช้งานของ User ในรายละเอียดแต่ละขั้นตอน แต่ละจุด หรือใน Usability Testing ที่เราอยากโฟกัสผลลัพธ์แบบ step-by-step</p><ul><li><strong>ข้อดี</strong> <br>การปล่อยให้ User พูดในสิ่งที่เค้าคิดในตอนนั้นเลย แล้วเราถามตอบสิ่งที่สงสัยเลย จะให้ผลลัพธ์และได้อารมณ์ความรู้สึกของ User ได้ตรงจุด ณ ขณะนั้นมากกว่า</li><li><strong>ข้อเสีย<br></strong>อย่าลืมว่าเวลาเค้าพูดความคิดเห็นออกมา แล้วบางครั้งเราจำเป็นต้องถามคำถามต่อเนื่อง ว่าทำไมเค้าถึงคิดเห็นเช่นนั้น เป็นการขัดจังหวะ flow ที่เค้ากำลังจะทำเช่นกัน</li></ul><h4>Retrospective Think Aloud</h4><p>เหมาะสำหรับการทดสอบที่ต้องการความเข้าใจในการใช้งานของ User แบบภาพรวมการใช้งาน หรือ ภาพรวมของ Flow นั้น ๆ</p><ul><li><strong>ข้อดี<br></strong>การปล่อยให้ User นั้นได้ลองผิดลองถูกด้วยตัวเองโดยไม่โดนขัดจังหวะ ทำให้เราเข้าใจระบบความคิด ความเข้าใจของเค้าที่มีต่อ Product และใกล้เคียงกับสิ่งที่จะเกิดขึ้นจริงเวลาที่ User ใช้ Product เราจริง ๆ ได้มากกว่า</li><li><strong>ข้อเสีย<br></strong>การให้เค้าพูดในสิ่งที่เค้าคิดและถามความคิดเห็นเค้าทีหลังจากจบ task หรือ flow อาจทำให้เค้าลืมสิ่งที่เค้าคิดหรือรู้สึกระหว่างที่ทำทดสอบได้เช่นกัน</li></ul><h3>Tips เพิ่มเติม</h3><ul><li>ระหว่างที่ทำ Usability Testing นั้น เราต้องระวังเป็นอย่างมากที่จะไม่ชี้นำ Guide User หรือช่วยเหลือเค้า ว่าเค้าต้องกดหรือทำอะไรต่อ เพราะถ้าเราช่วยเค้าเราจะไม่ได้ผลลัพธ์ที่แท้จริงจากเค้า</li><li>ถ้าหาก User เค้าเกิดติดขัดจริง ๆ ระหว่างการทดสอบ และไปไหนไม่ได้ ก็อย่าปล่อยเงียบจนเกิด Dead Air หรือ ทำให้เค้ารู้สึกอึดอัด หรือกลัว เราต้องทำให้เค้าสบายใจ ว่าไม่เป็นไรนะ อาจจะชวนเค้าคุย ว่าถ้าเหตุการณ์นี้เกิดขึ้นจริง และเค้าไปต่อไม่ได้จริง ๆ เค้าจะทำยังไงต่อ เพื่อให้เค้ารู้สึกว่าเค้าไม่ได้ผิดนะและเราอยากเข้าใจเค้าจริง ๆ ว่าเวลาแบบนี้เค้าจะใช้งานตัว Product ของเรายังไง</li><li>หากเจอคนที่สงสัยและถามเยอะมาก ๆ ดูแล้วว่าเค้าต้องการคำอธิบายตอนนั้นจริงๆ พยายามอย่าเพิ่งอธิบาย ณ ตอนนั้น เราอาจจะถามย้อนกลับว่า แล้วเค้าคิดว่ามันเป็นแบบไหน คิดว่ายังไง โดยบอกว่า ความคิดเห็นของเค้าไม่มีถูกไม่มีผิดสามารถบอกมาได้เลย เราอยากเข้าใจว่าเค้าคิดเห็นอย่างไร แล้วเราจะขอไปเฉลยในตอนหลังจบการทดสอบแทน</li></ul><p>จะเห็นว่าการ Think Aloud ทั้ง 2 วิธีก็มีข้อดีข้อเสียและให้ผลลัพธ์ที่แตกต่างกัน ดังนั้นเลือกใช้วิธีให้เหมาะสมกับสถานการณ์ และสิ่งที่เราต้องการอยากจะรู้ หรืออาจจะผสานทั้ง 2 วิธีก็สามารถใช้ได้เช่นกัน ไม่มีอะไรตายตัว แค่ใช้ให้ถูกสถานการณ์และจังหวะที่เหมาะสมเท่านั้น เพียงแค่นี้เราก็จะสามารถเรียนรู้ข้อผิดพลาดที่เกิดขึ้นและนำไปปรับปรุงแก้ไข Product ของเราให้ดียิ่งขึ้นต่อ ๆ ไป</p><p>Happy Designing : )</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=803db466a8c8" width="1" height="1" alt=""><hr><p><a href="https://medium.com/indiedish/how-to-run-think-aloud-%E0%B8%9A%E0%B8%AD%E0%B8%81%E0%B9%83%E0%B8%AB%E0%B9%89-user-%E0%B8%84%E0%B8%B4%E0%B8%94%E0%B8%94%E0%B8%B1%E0%B8%87-%E0%B9%86-%E0%B8%97%E0%B8%B3%E0%B8%A2%E0%B8%B1%E0%B8%87%E0%B9%84%E0%B8%87%E0%B8%94%E0%B8%B5-803db466a8c8">How to run think aloud? — บอกให้ User คิดดัง ๆ ทำยังไงดี</a> was originally published in <a href="https://medium.com/indiedish">Hato Hub</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[4 เรื่อง UX ที่ Startup ทั่วโลกมักผิดพลาด]]></title>
            <link>https://medium.com/indiedish/4-%E0%B9%80%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87-ux-%E0%B8%97%E0%B8%B5%E0%B9%88-startup-%E0%B8%97%E0%B8%B1%E0%B9%88%E0%B8%A7%E0%B9%82%E0%B8%A5%E0%B8%81%E0%B8%A1%E0%B8%B1%E0%B8%81%E0%B8%9C%E0%B8%B4%E0%B8%94%E0%B8%9E%E0%B8%A5%E0%B8%B2%E0%B8%94-72ea58c49f4e?source=rss-29ab180a3d1f------2</link>
            <guid isPermaLink="false">https://medium.com/p/72ea58c49f4e</guid>
            <category><![CDATA[ux-research]]></category>
            <category><![CDATA[ux-design]]></category>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[user-experience]]></category>
            <category><![CDATA[startup]]></category>
            <dc:creator><![CDATA[JibJib Saranya]]></dc:creator>
            <pubDate>Tue, 30 Jul 2019 04:20:50 GMT</pubDate>
            <atom:updated>2019-07-30T16:07:16.231Z</atom:updated>
            <content:encoded><![CDATA[<h4>จาก Jacob Greensphan, UX Coaching ระดับโลก!</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*VY4Uy2lGBuC2U33j" /></figure><p>เมื่อไม่นานมานี้พี่ <a href="https://medium.com/u/d3a1f8936b8">Darin Suthapong (Eng)</a> CEO ของเรามีโอกาสได้สัมภาษณ์คุณ Jacob Greensphan ผู้เชี่ยวชาญด้าน UX/UI และยังเป็นโค้ชให้กับ Startup ชื่อดังระดับโลกมาแล้วทั่วโลก! ซึ่ง Jacob ได้พูดถึง 4 เรื่อง ทางด้าน User Experience ที่ Startup ทั่วโลกมักจะทำผิดพลาดกันบ่อย ๆ จะมีอะไรบ้างนั้น ตามไปดูกันเลยยย (ยาวหน่อยนะคะ 😅)</p><h3>1<strong>. </strong>ไม่ไปทดสอบกับผู้ใช้งานจริง</h3><p>Startup ส่วนใหญ่ มักคิดเอาเองว่า user ของตัวเองเป็นใคร user ใช้งานยังไง โดยไม่ไปเจอ user จริง ๆ ซึ่ง Jacob บอกว่าอันนี้ผิดมากกกก ๆ เพราะสุดท้ายแล้วกลายเป็นว่าเราทำ Product ที่ดีแต่ดันเอาไปให้ผิดคน ผลก็คือ คนที่เราเอาไปให้เค้าใช้ เค้าไม่ชอบ(แหงสิ คนไม่ใช่ทำอะไรก็ผิด 😂) และที่แย่ที่สุดคือ สุดท้ายเขาก็ไม่ใช้ Product ของเรา</p><p>Jacob เลยแนะนำเลยว่า เราควรพูดคุยกับ user อย่างสม่ำเสมอ และควรออกไปเจอ user ด้วย เอา Product ของเราไปให้เค้าทดลองใช้งานจริง ๆ (Usability Testing) เพื่อให้เรามั่นใจได้ว่า Product ของเรามีคนใช้งานที่ถูกคนจริง ๆ และเพื่อให้เราเรียนรู้ข้อผิดพลาดของเราจากการสังเกตเค้าตอนใช้งานด้วย</p><p>นอกจากนี้ Jacob ได้เสริมเรื่องการทำ Usability Testing เพิ่มเติมให้อีกด้วย อย่างแรกเลยเราต้องเข้าใจก่อนว่าการทำ Usability Testing นั้น ไม่ใช่การทำวิจัยอย่างในมหาวิทยาลัยทั่วไป แต่เป็นการทำวิจัยที่เน้นการลงมือปฏิบัติจริง ๆ และใช้เวลาอย่างมากก็เพียงแค่ 1–2 วันเท่านั้น (ไม่มากเลยเห็นมั๊ย) ซึ่งเราสามารถค้นหา Guideline ได้มากมายจากเว็บไซต์ต่าง ๆ แต่ส่วนใหญ่แล้วหลักที่สำคัญก็มักจะมีดังต่อไปนี้…</p><p><strong>อันดับแรก เราต้องตั้งคำถามให้ได้ก่อนว่า “เราอยากรู้อะไร” </strong>ซึ่งคำถามที่เราอยากรู้เราสามารถตั้งคำถามได้หมดเลย ตั้งแต่ คำถามง่ายๆ อย่าง แอปพลิเคชันเราใช้สีอะไรดี ไปจนถึงคำถามที่เฉพาะเจาะจงมาก ๆ เช่น ทำไมเราถึงเสียลูกค้า ณ จุดนี้ไปเป็นจำนวนมาก เป็นต้น</p><p><strong>อันดับต่อมา ก็คือเราต้องเลือก task ที่เราอยากจะให้ user ทดสอบ</strong> โดย task ที่เราเลือกมานั้นก็ต้องครอบคลุมคำถามที่เราตั้งไว้ในตอนต้นด้วย</p><p><strong>หลังจากนั้น เราก็ต้องเตรียมตัวเราให้พร้อม </strong>โดยการเตรียมแนะนำตัว คำอธิบาย และเตรียมคำถามที่เราจะถาม user ให้พร้อม</p><p><strong>เมื่อพร้อมแล้วก็ออกไปเจอ user ที่น่ารักของเรา</strong> ซึ่งขั้นตอนนี้อาจใช้เวลา 2–3 ชั่วโมง ครึ่งวัน หรือทั้งวันก็ได้ ออกไปเจอเค้า แล้วอธิบายเค้าว่าเราคือใคร เราจะให้เค้าทำอะไร และต้องบอกเค้าด้วยว่าเราแอบจะสังเกตตอนเค้าใช้งานนะ ต้องทำให้เค้ารู้สึกสบายใจมากที่สุดและไม่กดดัน หลังจากนั้นก็ให้ user ทดลองใช้งานจริง ๆ ซึ่งเค้าก็มีสิทธิ์ที่จะหยุดทำและกลับได้ทุกเมื่อ</p><p>อีกหนึ่งอย่างที่สำคัญ อย่าลืมบอกให้เค้า <strong>“Think Aloud”</strong> ด้วย นั่นก็คือ ระหว่างที่เค้าใช้งานอยู่ หากเค้าคิดสิ่งใด หรือสงสัยสิ่งใดอยู่ในใจ ให้เค้าพูดออกมา อธิบายออกมา ให้เราได้ยินด้วย ซึ่งเราจะสามารถเรียนรู้จากสิ่งที่เค้าพูดออกมาได้เยอะทีเดียว ทั้งสิ่งที่เค้าเข้าใจและสิ่งที่เค้าไม่เข้าใจ เพื่อที่เราจะได้รู้ว่าว่าจุดไหนที่เราควรปรับปรุงในด้าน User Experience ต่อไป</p><p><strong>สุดท้าย อย่าลืมที่จะขอบคุณที่เค้าสละเวลามาให้เราด้วย</strong> แล้วก็ บ๊ายย บายย</p><p>อาจจะดูยาก แต่จริง ๆ แล้วไม่ยากเลย ถ้าเราทำอย่างถูกต้อง เราจะเรียนรู้อะไรได้มากเลยจากตรงนี้</p><h3>2. ไม่มี Mental Model ที่ชัดเจน</h3><p>Startup ส่วนใหญ่มักจะให้ความสนใจไปกับ Product ของตัวเองซะส่วนใหญ่ ผู้บริหารมักจะคิดว่าเค้ารู้จักและเข้าใจ Product ของตัวเองเป็นอย่างดี รู้ว่ามันทำงานยังไง รู้ดีว่า user ใช้งานยังไง ซึ่งจริง ๆ แล้ว user เค้าไม่รู้! 😵 แล้วมันไม่ได้เป็นอย่างที่เราคิด! ในทาง UX เราเรียกซึ่งนี้ว่า Mental Model ซึ่งก็คือ ความเข้าใจของ user เกี่ยวกับ Product ซึ่งโดยทั่วไปแล้ว Mental Model จะประกอบขึ้นมาจากความเข้าใจ 4 อย่าง คือ</p><ol><li>How it’s built?</li><li>Why it’s built this way?</li><li>How it works?</li><li>Why it works this way?</li></ol><p>หลังจากที่เราเข้าใจว่า user จะสร้าง Mental Model ขึ้นมา เราก็จะเข้าใจได้ทันที ว่า Mental Model ที่ user สร้างขึ้นมานั้น ตรงกับสิ่งที่เราคิดหรือไม่ เค้าเข้าใจตัว Product ของเรามากน้อยแค่ไหน หรือ ไม่เข้าใจเลย ซึ่งก็จะทำให้เราเข้าใจ Mental Model ของ user ด้วย</p><p>ดังนั้นการสร้าง Mental Model ที่ถูกต้องสำหรับ user เป็นสิ่งที่ดีมากกกกๆๆๆ แล้วเราจะสร้าง Mental Model ที่ดีได้อย่างไร​? Jacob ก็บอกว่า เมื่อเราเข้าใจ Mental Model ให้เราลองย้อนกลับไปดู Mental Model ของ Product เราดูว่าเป็นอย่างไร หรือลองให้ userใช้ app แล้วให้เค้าอธิบายกับเพื่อนหรือใครก็ได้ว่า Product นี้เกี่ยวกับอะไร ใน 40 วินาที หรือ 1 นาที การทำแบบนี้จะสะท้อนให้เราเห็นว่า user มี Mental Model เป็นอย่างไร ซึ่งถ้าเค้าสามารถอธิบายตัว Product ให้กับคนที่ไม่เคยใช้ ไม่เคยเห็น Product มาก่อนเลย ได้อย่างถูกต้องก็แสดงว่า Product ของเรามี Mental Model ที่ทำงานได้ดีใช้ได้เลยย</p><p>Jacob ยังยกตัวอย่าง Mental Model ให้เราเข้าใจได้ดียิ่งขึ้นด้วย เช่น <strong>Smartphone</strong> เราก็จะคิดว่า มันเป็นโทรศัพท์ที่ฉลาด (smart + phone ) ซึ่งจริงๆ แล้วมันแทบจะไม่ใช่โทรศัพท์แล้ว แต่ว่า Mental Model เรายังคิดว่ามันคือ smart + phone อยู่ คือ โทรศัพท์ที่ต่อกับอินเตอร์เน็ท แล้วเราก็สามารถใช้ App ได้ ทีนี้เรามาลองวิเคราะห์ Mental Model ของ smatphone กัน</p><ol><li>How it’s built?<br>มันสร้างมาจากโลหะซึ่งมีหน้าจอที่ฉลาดมาก และสัมผัสได้ (Touch Screen)</li><li>Why it’s built this way?<br>เพื่อให้เราใช้ App ได้ ผ่าน Internet และอื่น ๆ</li><li>How it works? <br>มันเป็นโทรศัพท์ที่ถูกพัฒนามาให้เชื่อมต่อข้อมูลกับสิ่งที่เรียกว่า Cloud ซึ่งข้อมูลจะไปและกลับจาก Cloud (เปรียบเทียบได้กับน้ำฝนที่ตกลงมาแล้วน้ำก็ระเหยขึ้นไปเป็นก้อนเมฆ เป็นท้องฟ้า)</li><li>Why it works this way?<br>เพื่อให้เราทำหลายๆ อย่าง บนโทรศัพท์มือถือได้</li></ol><p>แล้วมันเป็นโทรศัพท์อยู่มั๊ย?​ ทั้ง ๆ ที่ จริง ๆ แล้วส่วนใหญ่เราใช้มันไปทำอย่างอื่น เช่นใช้งาน Web และ App มากกว่าการใช้งานเป็นโทรศัพท์สำหรับการติดต่อสื่อสารด้วยซ้ำ (คือแทบจะเป็นคอมพิวเตอร์ได้แล้ว) แต่เราก็ยังเรียกมันว่าเป็นโทรศัพท์ smartphone อยู่ เพราะ Mental Model ของเราเข้าใจว่ามันคือ smart + phone และมันก็ยากที่จะเปลี่ยนแล้ว</p><p>โดยสรุปแล้ว Mental Model ก็คือการทำให้ user เข้าใจว่า Product เราคืออะไร และใช้งานยังไง ซึ่งถ้าเราเช้าใจมัน เราจะรู้ว่า Product หรือ Service เรามีคุณค่ายังไงกับ user บ้าง ถ้าเราไม่เข้าใจ เราก็ไม่รู้ว่าทำไมมันถึงดีสำหรับ user ของเรา แต่ถ้าเราเข้าใจมันอย่างชัดเจนมันจะมีประโยชน์มาก นั่นคือ เราก็จะเข้าใจว่ามันต้องใช้งานยังไงตาม Mental Model และเข้าใจว่าทำไมมันถึงดีสำหรับ user ของเราอีกด้วย เพราะฉะนั้นถ้า Mental Model ของเราตรงกันกับที่ user เขาใจ ก็จะได้ประโยชน์ทั้งสองฝ่าย</p><h3>3. ไม่ใช้ data ที่มี</h3><p>Startup ส่วนใหญ่ใช้ analytic tools ซึ่งมีอยู่มากมายอยู่แล้ว แต่มักจะไม่ค่อยดูมันอย่างจริงจัง มันหมายความว่าอะไร หมายความว่า พอเวลาเค้าคิดจะปรับปรุงตัวแอป ก็จะคิดเอาเองว่า pain point ของ user อยู่ที่จุดไหน สมมติคิดว่าอยู่จุด a, b และ c แต่ความจริงแล้ว พอเราไปดู data จริงๆ จะพบว่า user จะออกจากแอปไปที่จุด a และ f ซึ่งสำหรับ startup แล้วมันทำให้เราเสียทั้งเวลาและเงิน ตรงจุด b และ c ก็อาจจะมีปัญหาก็จริง แต่มันไม่ใช่ปัญหาหลัก ๆ ที่ควรจะแก้ไขก่อน Jacob เจอกรณีแบบนี้บ่อยมากเลย นั่นคือ pain point เหล่านี้ถูกมองข้ามไป เพียงเพราะไม่ได้ดู data ที่แท้จริง</p><p>จริงๆ แล้วหากย้อนกลับไปดู data ที่ว่า มันก็คือสิ่งที่เราเรียกว่า Funnel นั่นเอง สมมติว่าเราย้อนไปดู Funnel เราอาจจะพบว่า ในคน 100% ที่ดูเว็บของเรา จะมี 75–100% ที่ดาวน์โหลดแอป มี 50% ที่สมัครสมาชิก มี 23% กรอกข้อมูลบัตรเครดิต 22% สั่งสินค้าของเรา ซึ่งเราจะเห็นได้ชัดเลยว่าตรงจุดไหนที่จำนวน user ตกลงไปเยอะมาก และตรงไหนที่มีปัญหา ตรงไหนที่น่าจะเป็น pain point แต่ว่า startup ส่วนใหญ่ไม่ดู data ของตัวเองกัน ทั้งที่มันเป็นสิ่งที่มีอยู่แล้วและหาได้ง่ายมาก เพราะฉะนั้นอย่าลืมที่จะใช้มันซะ!</p><h3><strong>4. มองข้าม Emotion</strong></h3><p>อารมณ์มีผลต่อการตัดสินใจเป็นอย่างมาก แต่ใน startup ส่วนใหญ่มักจะไปโฟกัสกับเรื่องฟังก์ชันการทำงาน หรือ ไปโฟกัสกับการทำ MVP (Minimum Viable Product) มากกว่า ว่าฟีเจอร์ไหนควรทำก่อน หรือฟีเจอร์ไหนควรทำในเฟสถัดไป แต่แท้ที่จริงแล้วในปัจจุบันเกือบทุกประเทศ คนส่วนใหญ่ไม่ได้ซื้อของเพราะว่าฟังก์ชันการทำงานที่เค้าจำเป็นต้องใช้เสมอไป แต่กลับซื้อของที่เค้าต้องการมากกว่า นี่แหละคือการตัดสินใจโดยใช้อารมณ์ ดังนั้นเราจึงควรโฟกัสเรื่องอารมณ์ด้วย ซึ่งใน startup ส่วนใหญ่ ไม่ค่อยได้วิเคราะห์ในเรื่องของอารมณ์ ว่าอะไรคือสิ่งที่ user ต้องการในแต่ละขั้นตอน มันอาจจะดูใช้จิตวิทยาดูน่ากลัว แต่มันไม่ใช่แบบนั้นนะ คือเราใช้ประโยชน์จากเรื่องอารมณ์นี้ไปในทางที่ดี ด้วยการทำ UX/UI หรือ Interaction ต่าง ๆ ให้เหมาะสมกับอารมณ์ของผู้ใช้งานในขั้นตอนนั้น ๆ อย่าไปบังคับหรือพา user ไปเจอในสิ่งที่เค้าไม่ต้องการ หรือพาไปเจออะไรบางอย่างที่ไม่ดีสำหรับเค้า ให้รักษาศีลธรรมและอย่าโกหก user ด้วย</p><p>ในทางกลับกันมันก็มีความรู้สึกในเชิงลบด้วยเช่นกัน หรือที่เรียกว่า Negative Emotion ซึ่ง Nagative Emotion นี้ หากเกิดขึ้นแล้วจะถูกจดจำไปนานกว่า Positive Emotion ซะอีก เพราะฉะนั้นพยายามหลีกเลี่ยงอะไรที่จะทำให้เกิด Negative Emotion กับ user ด้วย</p><p>Jacob ยังแนะนำให้ลองดูเพิ่มเติมเกี่ยวกับ Emotional Map ด้วย แล้วลองวิเคราะห์อารมณ์ของ user เพราะแม้ว่าเราทำแอปที่มี UX/UI ดีมากกกก ๆ ซึ่งแน่นอนว่า user จะต้องรู้สึีกดีมากแน่ ๆ แต่ว่าอารมณ์ของมนุษย์นั้นมันซับซ้อนมากกว่าดีหรือไม่ดี บางอย่างเรารู้สึกรัก บางอย่างไม่ชอบ บางอย่างรู้สึกกลัว บางอย่างรู้สึกโกรธ เป็นต้น ดังนั้นสำหรับ Startup แล้ว Jacob แนะนำว่าควรวิเคราะห์เรื่องอารมณ์มาก ๆ และยังเน้นย้ำให้ดีไซน์ออกมาในทางที่ดี อย่าใช้ในทางที่ผิด</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1010/0*RJ0HVFkGy_nTC3N3.png" /><figcaption>ตัวอย่าง Emotional Map</figcaption></figure><h3>สรุปก็คือ…</h3><ol><li>เราควรเอา Product ไปให้ user ลองใช้งานจริง ๆ และสังเกตการใช้งานของเค้า</li><li>หา Mental Model ของ Product ให้เจอ และต้องแน่ใจว่า user เข้าใจ Mental Model ของเราเหมือนกัน</li><li>ใช้ data ที่มีอยู่ให้เกิดประโยชน์ เอามาดูให้แน่ใจว่า pain point ของ user อยู่จุดไหน ของ funnel อย่าเดาเอาเอง</li><li>อย่าลืมว่าอารมณ์มีผลต่อการตัดสินใจมาก ๆ ดังนั้นจงวิเคราะห์อารมณ์ของ user ตอนใช้งาน product เราให้ดี และใช้ไปในทางที่เหมาะสม</li></ol><p>จากคำแนะนำที่ Jacob กล่าวมาด้านบน ทั้ง 4 ข้อนั้น เป็นประโยชน์มาก ๆ สามารถนำไปใช้ได้จริง ไม่เพียงแต่ startup เท่านั้น บริษัททั่ว ๆ ไปก็สามารถนำไปประยุกต์ใช้ได้เช่นกัน ต้องขอบคุณ <a href="https://medium.com/u/d3a1f8936b8">Darin Suthapong (Eng)</a> อีกครั้งที่นำสาระดี ๆ จาก คนระดับโลกมาแบ่งปันให้ทุกคนได้ฟังค่ะ 😊</p><p>หากใครอยากติดตามเนื้อหาดี ๆ แบบนี้ สามารถไปติดตามฟังกันได้ที่ <a href="https://www.facebook.com/lifeboosterbyindydish/">Podcast: Life Booster</a> ได้เลยยย สามารถฟังได้หลายช่องทาง จิ้มเล้ยยย 😁👇</p><p><a href="https://soundcloud.com/lifebooster">Soundcloud</a> | <a href="https://open.spotify.com/show/1oE977hoErxThE73sHqIXU">Spotify</a> | <a href="https://podcasts.apple.com/th/podcast/life-booster/id1471890245">iTunes</a></p><p>Happy Designing :D</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=72ea58c49f4e" width="1" height="1" alt=""><hr><p><a href="https://medium.com/indiedish/4-%E0%B9%80%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87-ux-%E0%B8%97%E0%B8%B5%E0%B9%88-startup-%E0%B8%97%E0%B8%B1%E0%B9%88%E0%B8%A7%E0%B9%82%E0%B8%A5%E0%B8%81%E0%B8%A1%E0%B8%B1%E0%B8%81%E0%B8%9C%E0%B8%B4%E0%B8%94%E0%B8%9E%E0%B8%A5%E0%B8%B2%E0%B8%94-72ea58c49f4e">4 เรื่อง UX ที่ Startup ทั่วโลกมักผิดพลาด</a> was originally published in <a href="https://medium.com/indiedish">Hato Hub</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[คู่มือสร้าง User Persona ฉบับ ไม่มโน!]]></title>
            <link>https://medium.com/@jibjibsaranya/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87-user-persona-%E0%B8%89%E0%B8%9A%E0%B8%B1%E0%B8%9A-%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%A1%E0%B9%82%E0%B8%99-2bdf0f4d3281?source=rss-29ab180a3d1f------2</link>
            <guid isPermaLink="false">https://medium.com/p/2bdf0f4d3281</guid>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[personas]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[user-experience]]></category>
            <category><![CDATA[user-research]]></category>
            <dc:creator><![CDATA[JibJib Saranya]]></dc:creator>
            <pubDate>Mon, 08 Oct 2018 13:07:10 GMT</pubDate>
            <atom:updated>2020-07-02T16:43:46.854Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4d7i7ptgOpsqWoUkoImhwQ.jpeg" /></figure><p>ขอออกตัวก่อนว่า โดยส่วนตัวแล้วทำ Persona มาหลายครั้ง แต่ก็ยังรู้สึกว่าการสร้าง Persona ขึ้นมามันยังมีบางอย่างที่ไม่เคลียร์เท่าไหร่ เหมือนเรามโนลอย ๆ ขึ้นมาเองเฉย ๆ พอดีช่วงนี้มีโอกาสได้ทำ Persona ใหม่อีกครั้ง เลยขอจัดการเคลียร์ความรู้เรื่องการทำ Persona ในส่วนที่ภาพมันยังเบลอๆ ให้มันชัดเจนขึ้นสักหน่อย</p><p>มาเข้าเรื่องกันเลย…</p><h3>Persona คืออะไร</h3><p>หลายคนอาจจะเคยได้ยินคำว่า Persona มาบ้างแล้ว แต่สำหรับคนที่กำลังสงสัยอยู่ว่ามันคืออะไร ถ้าพูดให้เห็นภาพกันง่าย ๆ ก็คือ การที่เราไปหยิบใครคนใดคนหนึ่งออกมาจากกลุ่ม Target User หรือกลุ่มลูกค้าของเรา เอามาตั้งเป็นตัวแทนของกลุ่ม โดยทั่วไปแล้วใน หนึ่ง Product ไม่จำเป็นจะต้องมี Persona แค่คนเดียว อาจมีหลาย Persona ได้ ขึ้นกับว่า Target User ของเรามีพฤติกรรมและความต้องการต่างกันแค่ไหน ซึ่งการสร้าง Persona ขึ้นมาก็จะคล้ายกับตอนที่เราสร้างตัวละครในเกมส์ The Sims นอกจากตัวตนรูปร่างหน้าตาแล้ว เราก็ต้องใส่ลักษณะนิสัยและคุณลักษณะอื่น ๆ ให้กับตัวละครของเราด้วย จะช่วยทำให้ Persona ของเรามีความชัดเจนมากยิ่งขึ้น</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*n0lBSV3cXABc0RY78redeQ.jpeg" /></figure><h3>ทำไมเราต้องมี Persona</h3><p>ในยุคที่หลาย ๆ บริษัทเริ่มหันมาให้ความสำคัญกับ User Experience และแข่งขันกันด้วยประสบการณ์ของผู้ใช้งานกันมากขึ้น เราจะทำอย่างไรถึงจะทำให้ Product ของเรามี Experience ที่ดีที่สุดให้กับผู้ใช้งาน คำถามแรก ๆ ที่เราควรตอบให้ได้เลยคือ…</p><p><em>เราทำ Product หรือ Service นี้ เพื่อใคร?</em></p><p><em>เรารู้จักเขาดีแล้วหรือยัง เขาทำอะไร?</em></p><p><em>แล้วทำไมเขาถึงต้องมาใช้ Product ของเรา?</em></p><p>หากคุณยังตอบคำถามเหล่านี้ไม่ได้ Persona คือ คำตอบค่ะ :)</p><p>เจ้า Persona ที่ว่านี้ จะช่วยทำให้เราเข้าใจ Target User ของเรามากยิ่งขึ้น แน่นอนว่ายิ่งเราเข้าใจลูกค้าของเรามากเท่าไหร่ เราก็จะสามารถออกแบบ Product หรือ Experience ที่ตอบโจทย์ความต้องการของลูกค้าได้มากขึ้นเท่านั้น ซึ่งจะทำให้ Product ของเรามีโอกาสที่จะประสบความสำเร็จสูงและสามารถคงอยู่ในตลาดได้นาน</p><p>แต่ในบางครั้ง Persona อาจไม่ได้ถูกให้ความสำคัญเท่าที่ควร ทั้ง ๆ ที่ความเป็นจริงแล้วจะเห็นได้ชัดว่า Persona ไม่ได้เป็นเพียงตัวอ้างอิงในแง่มุมของการออกแบบ Experience ให้กับกลุ่มผู้ใช้งานเท่านั้น แต่ยังเป็นส่วนสำคัญสำหรับฝั่ง Business และทีม Developer ด้วย โดยเจ้า Persona นี้จะช่วยทำให้ทุกคนในทีมเห็นภาพได้ตรงกันและชัดเจนมากยิ่งขึ้น ว่าบุคคลที่เป็นผู้ใช้งาน Product หรือ Service ของเราคือใคร และมีพฤติกรรมอย่างไร เมื่อทุกคนเห็นภาพตรงกันก็จะทำให้ทั้งทีมเห็นทิศทางของ Product ที่ชัดเจนและ move ไปข้างหน้าได้เร็วขึ้น นอกจากนี้เราอาจใช้ Persona เป็นตัวช่วยในการตัดสินใจที่จะทำหรือไม่ทำฟีเจอร์บางอย่างได้ เช่น ฟีเจอร์ที่ไม่ได้ตอบโจทย์ของ Persona ที่เรากำลังโฟกัสอยู่ตอนนี้ เราก็อาจจะยังไม่ต้องรีบทำและข้ามไปก่อนได้ ซึ่งก็ช่วยให้ฝ่าย Develop ไม่ต้องลงแรงเหนื่อยอีกด้วย</p><h3>User Persona vs. Buyer Persona(Customer Persona)</h3><p>จริงๆ แล้ว Persona ไม่ได้มีแค่ User Persona สำหรับฝั่ง Design อย่างเดียวเท่านั้น แต่ยังมี Persona ที่ฝั่ง Business หรือ Marketing ใช้อีกด้วย ซึ่งอันนั้นเราจะเรียกว่า Buyer Persona หรือที่บางครั้งก็เรียกว่า Customer Persona หรือ Marketing Persona ซึ่งความแตกต่างระหว่าง User Persona และ Buyer Persona ก็ตรงตัวตามชื่อเลย…</p><h4>User Persona</h4><p>เป็น Persona ของผู้ <strong>“ใ<em>ช้ ”</em></strong> Product หรือ Service ซึ่งจะแบ่งตามพฤติกรรมการใช้งานเป็นส่วนใหญ่</p><h4>Buyer Persona</h4><p>เป็น Persona ของฝั่งผู้ <strong>“<em>ซื้อ”</em></strong> Product หรือ Service โดย Buyer Persona อาจจะแบ่งตาม Market Segment ของฝั่ง Business</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7jJ9g2YvkF31kEYfBJLKPA.png" /><figcaption>Image credit: <a href="https://www.youtube.com/watch?v=bRSs6AglLhk">SkyMall</a></figcaption></figure><p>ในบางครั้งคนที่ซื้อ Product ก็อาจจะไม่ใช่คนที่ใช้งานจริง ๆ เช่น คอร์สสอนเด็กเล่นดนตรีออนไลน์ คนที่ใช้งานจริง ๆ จะเป็นเด็ก แต่คนที่จ่ายเงินซื้อจะเป็นผู้ปกครองของเด็ก จะเห็นว่าทั้ง Persona ทั้งสองฝั่งค่อนข้างแตกต่างกัน ดังนั้นเวลาเราจะออกแบบ Product เราก็จะยึด User Persona เป็นหลัก แต่ในบาง Product เช่น ใน Product ที่ฝั่ง Business แบ่ง Market Segment ด้วยพฤติกรรมของ User ก็จะทำให้ทั้ง User Persona และ Buyer Persona ก็มีความใกล้เคียงกันหรือแทบจะเป็นกลุ่มเดียวกันได้ ระวังสับสนนะคะ หากสามารถแยก User Persona กับ Buyer Persona ออกจากกันได้ ขอแนะนำให้แยกกันจะดีกว่า เพราะว่าเวลานำไปใช้เราจะใช้โฟกัสต่างจุดกัน และเวลาใช้งานก็มองจากคนละมุมอีกด้วย</p><h3>Persona หน้าตาเป็นยังไง</h3><p>ก่อนจะสร้าง Persona มาลองดูก่อน ว่าสิ่งที่เราจะสร้างหน้าตามันเป็นยังไง หากเราลอง Search คำว่า “Persona” ใน Google เราจะพบว่า Persona มีหลากหลายรูปแบบมาก และหัวข้อต่าง ๆ ที่อยู่ใน Persona นั้นก็มีความแตกต่างกัน ซึ่งจริง ๆ แล้ว Persona ไม่มีรูปแบบตายตัว ขึ้นอยู่กับว่าเราอยาก Focus ตรงจุดไหน หัวข้อไหนที่เกี่ยวเนื่องกับ Product เราบ้าง แต่หลัก ๆ แล้ว Persona ควรมีข้อมูล 2 ส่วนที่สำคัญดังนี้</p><h4>Demographic</h4><p>เป็นข้อมูลส่วนตัวพื้นฐาน เช่น ชื่อ อายุ เพศ อาชีพ การศึกษา รายได้ สถานภาพสมรส เป็นต้น ซึ่งข้อมูลนี้อาจรวมไปถึงลักษณะนิสัย พฤติกรรม และรายละเอียดเกี่ยวกับสภาพแวดล้อมของซึ่งอาจจะส่งผลต่อพฤติกรรมที่เกี่ยวข้องกับตัว Product เราด้วย</p><h4>Psychographic</h4><p>เป็นเรื่องของรายละเอียดเชิงจิตวิทยาซึ่งมีผลต่อพฤติกรรมที่เกี่ยวข้องกับตัว Product เช่น attitude, needs , motivation, pains หรือ gains เป็นต้น</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/800/0*CHQAAOK_ilTCDU8N.jpg" /><figcaption><a href="https://dribbble.com/shots/4559103-User-Persona">ตัวอย่าง</a>ของ User Persona</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Q-eBImrNEfE0T7pD.png" /><figcaption><a href="https://dribbble.com/shots/2457624-Persona-Cards/attachments/479281">ตัวอย่าง</a>ของ User Persona</figcaption></figure><h3>แล้วจะเริ่มต้นสร้าง Persona จากตรงไหนดี</h3><p>เคยเป็นหนึ่งคนที่ไม่รู้จะเริ่มทำ Persona ยังไงเหมือนกัน เลยขอสรุปมาเป็นขั้นตอนที่น่าจะได้ผลลัพธ์ที่ถูกต้องและเข้าใจง่ายมา 5 ขั้นตอนดังนี้</p><h4>1. เก็บเกี่ยวข้อมูลที่เรามี</h4><p>เริ่มต้นง่าย ๆ จากข้อมูลที่เรามีก่อน ซึ่งในโลกของข้อมูลนั้น ข้อมูลของ User จะถูกแบ่งออกเป็น 2 ประเภท คือ</p><ul><li><strong>Quantitative Data</strong> เป็นข้อมูลเชิงปริมาณ ได้แก่ พวก จำนวน ตัวเลข เปอร์เซ็นต์ต่าง ๆ ซึ่งก็คือข้อมูลที่เป็น Demographic ทั่วไปและ Behavior ของ User โดยข้อมูลพวกนี้ เราสามารถหาได้จากระบบและการ Tracking Analytics ต่าง ๆ</li><li><strong>Qualitative Data</strong> เป็นข้อมูลเชิงคุณภาพ จะไม่สามารถบอกเป็นปริมาณตัวเลขได้ ส่วนมากจะเป็นข้อมูลที่เป็น Phychographic ซึ่งเราไม่สามารถดูได้จากระบบ อาจจะต้องทำ User Reseach เพิ่มเติมเพื่อหาข้อมูลตรงจุดนี้</li></ul><p>หาก Product ของคุณมีการเก็บข้อมูล Analytics หรือ Tracking ต่าง ๆในระบบอยู่แล้ว นับว่าโชคดี เพราะเราสามารถใช้ข้อมูลที่มีนี้ ไปต่อยอดได้เลย</p><p>แต่ถ้าหาก Product ของคุณนับว่ายังใหม่อยู่มาก ก็ไม่ต้องกังวลไป เราสามารถเก็บข้อมูลที่เราเรียกว่า <em>พอจะมี</em> ได้จากทุกคนในทีมนั่นเอง เช่น อาจจะทำ User Segment คร่าว ๆ ภายในทีม โดยให้ทุกคนในทีมช่วยเขียนข้อมูลของ User ที่เขาคิดไว้ ลง post-it หลังจากนั้นนำข้อมูลมาจัดกลุ่ม จากภาพ User ที่ตอนแรกเราเบลอ ๆ เราจะมองเห็นภาพได้ชัดขึ้นว่า User ในใจเรามีลักษณะอย่างไร แต่นั่นก็ยังไม่ใช่ข้อมูลที่ถูกต้อง 100% นะคะ เราต้องนำข้อมูลที่ได้นี้ ไปตรวจสอบกับ user จริงๆ อีกครั้ง</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/940/0*Ut0_mt8K1B17rl5I" /></figure><h4>2. เตรียมตัวให้พร้อม ตามหาข้อมูลที่เราไม่มี</h4><p>จะเห็นว่าข้อมูลที่เราได้มาเบื้องต้นนั้น ยังมีข้อมูลบางส่วนที่เรายังขาดอยู่ เราจึงต้องออกไปทำ User Research หรือการสัมภาษณ์ User เพิ่มเติมเพื่อเก็บ Insight จาก User ของเราจริง ๆ ซึ่งการทำ User Research นั้น ก็จะคล้ายกับการทดลอง เราตั้งสมมติฐานขึ้นมา มีตัวแปรต้น ตัวแปรตาม และตัวแปรควบคุม ในที่นี่เพื่อไม่ให้ผลการทดลองของเราแกว่งไปมา เราจึงต้องกำหนดตัวแปรควบคุมให้กับการทำ Reseach ของเราสักหน่อย ซึ่งก็คือ User Screener นั่นเอง</p><p>โดยปกติแล้ว เราจะกำหนดให้ข้อมูล Quantitative เป็น User Screener หลัก เพราะเป็นข้อมูลเดียวที่ได้จากระบบและเป็นข้อมูลถูกต้องที่สุดที่เรามี ณ ขณะนั้น ส่วนพวก behaviour ต่าง ๆ ซึ่งอาจจะได้มาตอนทำ User Segment จะนำมากำหนดให้เป็น Screener รอง โดยทุก behavior ที่เราเลือกมาเป็นตัว Screener นั้น ต้องเป็นสิ่งที่มีอิทธิพลต่อ User ในการตัดสินใจว่าจะใช้หรือไม่ใช้ Product ดังนั้นเราก็จะได้ User Screener มาคร่าว ๆ เช่น User Screener ของ Spotify อาจจะเป็น ผู้ชาย, อายุ 25 ปี, เงินเดือน xx,xxx, มีบัตรเครดิต และชอบฟังเพลง เป็นต้น</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/700/0*9_CGmjbADmYFPhNv.jpg" /><figcaption>Image credit: <a href="https://blinkux.com/our-services/user-research/">blinkux</a></figcaption></figure><p>เมื่อเราได้ User Screener มาแล้ว ขั้นตอนต่อไปคือ ใช้ User Screener นี้ไปคัดคนมาสัมภาษณ์ซึ่งจะทำให้เราได้คนที่เป็น Target User ของเราจริง ๆ นอกจากนี้ยังช่วยให้ผลลัพธ์ที่เราได้ถูกต้องและไม่กระจัดกระจายไปหลายทางอีกด้วย หลังจากที่ Screen แล้วก็สามารถสัมภาษณ์ User เพื่อหาข้อมูล insight ในส่วนที่เป็น Qualitative Data เช่น attitude, needs , motivation, pains หรือ gains ที่เรายังขาดอยู่ ได้เลย</p><p>การแบ่งข้อมูลเป็น 2 ส่วนที่ชัดเจน คือ ตัว User Screener และ ข้อมูล Qualitative Data ที่เราต้องการหา จะช่วยเช็คข้อมูลซึ่งกันและกัน ซึ่งจะทำให้จะรู้ว่า อะไรที่ยังขาดยังไม่ครบ หรือยังไม่แน่ใจ เช่น มี User 5 คนที่เราใช้ User Screener เป็นตัวเดียวกัน แต่ผลลัพธ์ออกมา มี Motivation ไม่เหมือนกัน แสดงว่า User Screener ของเราอาจจะยังไม่ละเอียดเพียงพอ ต้องแตกรายละเอียดข้อมูลของ Screener เพิ่มเติม เป็น Screener A และ Screener B หรืออาจหมายความว่าเราอาจยังสัมภาษณ์น้อยเกินไปหรือสัมภาษณ์แล้วได้ข้อมูลผิดก็เป็นได้ คือยังไม่เจอส่วนที่เหมือนกัน ๆ กัน นั่นเอง ก็อาจจะต้องสัมภาษณ์เพิ่มเติม</p><h4>3. วิเคราะห์รูปแบบของพฤติกรรมและสรุปเป็น Persona</h4><p>หลังจากที่ได้ผลลัพธ์มาแล้วทั้ง 2 ส่วน คือ ตัว User Screener และ ข้อมูล Qualitative Data ที่ได้มาจากการสัมภาษณ์ เราก็เอาทั้งสองส่วนมารวมกัน จะทำให้เรามองเห็นรูปแบบของพฤติกรรม หรือ Pattern อะไรบางอย่างของกลุ่มคน ที่มีความเหมือน ๆ กัน เช่น พบว่าคนที่มาจาก Screener A จะมี พฤติกรรม A ที่เหมือน ๆ กัน หรือ คนที่มาจาก Screener B จะมี Motivation B ที่เหมือน ๆ กัน เป็นต้น ซึ่งเราจะใช้ตัวนี้แหละ แบ่ง User ออกมาเป็น Persona ต่าง ๆ เมื่อหา Pattern เจอเรียบร้อยแล้วเราก็สรุปเป็นหน้าตา Persona ตามตัวอย่างด้านบนไว้ เพื่อนำไปใช้งานต่อไป</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oSap_l0veq_opkbyloSKkw.jpeg" /></figure><h4>4. จัดลำดับความสำคัญให้ Persona กันหน่อย</h4><p>ในหลาย ๆ Product นั้น Persona ไม่ได้มีแค่อันเดียวแต่มีหลาย Persona ซึ่งการจะนำ Persona ไปใช้ให้เกิดประโยชน์จริง ๆ นั้น เราควรจัดลำดับความสำคัญให้กับแต่ละ Persona เช่น นำมา Map กับ ตัว Technology Adoption Curve เพื่อดูว่าเราจะให้ Persona กลุ่มไหนเป็นพวก First mover กลุ่มไหนเป็น Follower หรือ กลุ่มไหนเป็นพวก Laggard การทำแบบนี้ จะช่วยทำให้ User ที่เราโฟกัสมีความชัดเจนมากขึ้น และทำให้ทั้งทีมมอง direction ไปที่คนกลุ่มนั้นโดยตรง</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*23F6-xKELPcTRJctUJtdxg.jpeg" /></figure><h4>5. นำ Persona ไปแชร์กับคนอื่น ๆ ทีม</h4><p>ขั้นตอนสุดท้ายง่ายมากค่ะ อย่างที่บอกไปแล้วอีกประโยชน์ที่สำคัญของ Persona คือทำให้ทุกคนในทีมเห็นภาพ User ที่ตรงกันค่ะ ดังนั้น หลังจากที่ได้ Persona มาแล้วจัด session เล็กๆ หรือใช้เวลาสั้น ๆ แชร์กับเพื่อนร่วมทีมสักนิด จะช่วยให้ทีมเห็นภาพ user ที่ชัดเจนขึ้นเยอะเลยค่ะ</p><h3>Persona เปลี่ยนได้ไหม</h3><p>คำถามนี้เจอบ่อยพอสมควร ส่วนใหญ่แล้วการทำ Persona ครั้งนึง เราจะใช้ Persona นั้นไปได้ในระยะเวลาค่อนข้างนานพอสมควร ซึ่ง Persona ของ Product ถามว่าเปลี่ยนได้ไหม คำตอบ คือ เปลี่ยนได้ค่ะ เราจะเปลี่ยนแปลงหรืออัพเดต Persona ของเราก็ต่อเมื่อเราพบว่า Target User ของเราเป็นกลุ่มที่เปลี่ยนไปจากเดิม หรือเมื่อเราพบว่าพฤติกรรมอะไรบางอย่างที่เราอาจจะ Track ได้จากระบบว่ามีการเปลี่ยนแปลง ซึ่งนั้นอาจหมายความว่ามีกลุ่มผู้ใช้งานใหม่ ๆ เข้ามาในระบบเราก็เป็นได้ หากเจอจุดนั้นก็อาจจะต้องดูข้อมูล กำหนด User Screener แล้วลองทำ persona อีกครั้งนึงดู ว่า พวก motivation pains gains needs เปลี่ยนไปหรือเปล่า ถ้าเปลี่ยนไปก็ยินดีด้วยค่ะ คุณได้ Persona ใหม่ :)</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*i-ba1MFORpbp1iFXgyyiZw.jpeg" /></figure><p>จะเห็นว่า Persona มีความสำคัญมากเลยทีเดียว แต่เราอาจจะต้องลงทุนลงแรงกับมันหน่อย เพื่อให้ได้ข้อมูลที่ถูกต้องจริง ๆ ซึ่งถามว่าคุ้มไหม บอกเลยว่าคุ้มมากค่ะ หลัก ๆ แล้ว เราเพียงแค่หา User Screener ที่เป็นข้อมูล Demographic ให้เจอ และไปสัมภาษณ์ข้อมูลพวก Psychographic ซึ่งก็คือ attitude, needs , motivation, pains หรือ gains ที่เหลือเพิ่มเติม จาก User จริง ๆ เพียงเท่านี้เราก็จะได้ Persona ที่ถูกต้อง ใช้ได้จริงและรับประกันว่าไม่มโนแน่นอนค่ะ</p><p>สุดท้ายนี้กราบขอบพระคุณกูรูทั้ง 2 ท่าน คือพี่ <a href="https://medium.com/u/f221995021f6">Thapanee Srisawat</a> และพี่ <a href="https://medium.com/u/26947a3bc5f4">Pondd Sugthana</a> ที่ช่วยให้คำแนะนำและให้ความรู้เพิ่มเติมค่ะ เลยได้นำความรู้ที่ได้รับมาแบ่งปันให้กับคนอื่น ๆ ตรงนี้ เพื่อเป็นการส่งต่อความรู้ต่อ ๆ ไปด้วยค่ะ หากมีโอกาสจะพยายามมาแชร์เรื่องอื่น ๆ อีกเรื่อย ๆ นะคะ แล้วเจอกันใหม่ค่ะ</p><p>Happy Designing :)</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=2bdf0f4d3281" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Jitta’s Design Language System | Part 2: Create a component]]></title>
            <link>https://medium.com/jitta-engineering/jittas-design-language-system-part-2-create-a-component-a8b5f6415d9a?source=rss-29ab180a3d1f------2</link>
            <guid isPermaLink="false">https://medium.com/p/a8b5f6415d9a</guid>
            <category><![CDATA[components]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[jitta]]></category>
            <category><![CDATA[design-language]]></category>
            <category><![CDATA[developer]]></category>
            <dc:creator><![CDATA[JibJib Saranya]]></dc:creator>
            <pubDate>Tue, 03 Oct 2017 05:13:40 GMT</pubDate>
            <atom:updated>2017-10-05T17:55:10.398Z</atom:updated>
            <content:encoded><![CDATA[<p>How we created design components from our base styles.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ttdfDBlo3k9qJIVb0zr-Ew.png" /></figure><p>This is our second part of the series. In <a href="https://medium.com/jitta-engineering/jittas-design-language-system-part-i-e9fad1508331">part one</a>, we have already built the smallest parts which are called “Base styles” like typography, colors, icons, spacing and etc. Now, let’s build the bigger part in a basic design component!</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kC8aR0V3j0bgRqKDfUe0zQ.png" /></figure><h3>What is a component?</h3><p>Imagine that you want to build a lego house, what you will do first? We start from preparing the lego bricks, think about how many brick types and colors that you may need for building the house, right?. Yes, that is our base styles. And then, what you will do next? Just assemble it! It is the same idea here. Put simply, a component is a bigger part that assembled from small parts like you’re playing with the bricks. It sounds like fun, isn’t it?</p><h3>Let’s start with a bird’s eye view</h3><p>Before you create a component, I suggest you think about your final design from a bird’s eye view. You will get what you really need in a big picture. For example, let’s say we build a timeline page. We start from thinking about how it could be, how many conditions or states for this design component. and sketch it down. You can do it quickly as we don’t need a lot of details here, just cover all components we should have.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*t2fVCu1i3VV3L9NthAkmuQ.png" /></figure><p>As you can see in the picture above, our timeline page has a list of timeline components which are almost the same components but there is a little thing that you should be careful of. Why?. Most of them are composed of icons and some typography styles but some of them have an arrow-right icon which tells the user that they can tap this row to navigate to another page and some are not. When you look at the big picture, you have to figure it out of how many components that you should create because sometimes we can reuse some component without creating a new one and that is helpful to the developers.</p><p>In this case, you can create two components. One has an arrow-right and exclude it from another one or just create one that can show or hide the arrow. But sometimes there are limitations in development which mean you should talk to your developers too.</p><h3>Break it down</h3><p>Now, look at your component and break it down. Think about what we can use from our base styles. In this example, you can see base styles that we used are as follows:</p><ul><li><strong>Timeline icon: </strong>from the icon base style, please noted that this icon can be changed.</li><li><strong>Date: </strong>represented by the Caption style in our defined typography.</li><li><strong>Title: </strong>from the Title style in our defined typography as well.</li><li><strong>Description: </strong>same here,<strong> </strong>we<strong> </strong>use the Body 2 style in our defined typography</li><li><strong>Arrow-right icon:</strong> Also noted that this icon can be hidden in the component that doesn’t need the navigation.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bLZ37hELopdI7BmDx0Wv_w.png" /></figure><h3>Component vs Sketch symbols</h3><p>If you are the ones who uses Sketch, I recommend creating a component as a Sketch’s symbol. As you can see, symbol can make it easier when you want to reuse icons or even change color.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2hwH9_55xSccPD5sedXoHA.gif" /><figcaption>Changing elements in the component</figcaption></figure><p>In case you want to hide the arrow-right icon, just select “<em>None</em>” for that symbol. This is the same idea when developers are coding, they just hide the element as well and that makes them can reuse the component by-case basis, again and again.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zMjw-PxfJnuPtIcPSsjuow.gif" /><figcaption>Hiding element in the component</figcaption></figure><p>For changing color in Sketch symbol, have you ever faced the problem that you want to change the symbol color but cannot do that? here is the solution. First of all, you have to create rectangles filled with color as a symbol. After that, just put the symbol color to our component symbol and change blending mode from <em>Normal</em> to <em>Screen</em>. This color will be blended with elements that have grayscale colors. So if you want it to be fully blended as a solid color, you should fill that element with black color before you blend it. As you see in this example, I want to make the change with an oval and the title text only. So I filled the oval and title text with black color and then just simply put the color symbol above them.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CvENS6yPlJWUDdGW9wqRAQ.gif" /><figcaption>Solution for changing color problem in Sketch</figcaption></figure><h3>Reuse base styles in component with coding</h3><p>In coding, we can make it much easier by defining all our base style elements in a javascript file and import that file to your component file when you want to use it. Finally, just call the base style that you defined and pick an element in your base style like a piece of cake.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/640/1*b_MSl53C8LbGUueekDtGCw.gif" /></figure><p>Now, we have already got a component design so let’s put it all together next time.</p><p>Happy designing. :)</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=a8b5f6415d9a" width="1" height="1" alt=""><hr><p><a href="https://medium.com/jitta-engineering/jittas-design-language-system-part-2-create-a-component-a8b5f6415d9a">Jitta’s Design Language System | Part 2: Create a component</a> was originally published in <a href="https://medium.com/jitta-engineering">Jitta Engineering</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Jitta’s Design Language System | Part I]]></title>
            <link>https://medium.com/jitta-engineering/jittas-design-language-system-part-i-e9fad1508331?source=rss-29ab180a3d1f------2</link>
            <guid isPermaLink="false">https://medium.com/p/e9fad1508331</guid>
            <category><![CDATA[design-systems]]></category>
            <category><![CDATA[design-language]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[jitta]]></category>
            <category><![CDATA[design-language-system]]></category>
            <dc:creator><![CDATA[JibJib Saranya]]></dc:creator>
            <pubDate>Tue, 08 Aug 2017 04:22:59 GMT</pubDate>
            <atom:updated>2017-08-08T04:22:59.390Z</atom:updated>
            <content:encoded><![CDATA[<p>How we use the design language system to drive our products.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FVW8PMK6sqJofMGNiUShKQ.png" /></figure><p>Nowadays, websites and apps are growing up rapidly. For developers and designers, we all need tools for developing sites or apps to deliver high-quality products to our customer as fast as possible as well as here, Jitta.</p><p>At Jitta, we build platforms that help investors create better return through simple investment methods which have both website and app. Therefore, as a design-driven company, we propose to build our new design language system for use across all our platforms since last year. And finally, we found that Airbnb is building their design language system as well which supports our idea. You can read their story <a href="https://medium.com/airbnb-design/building-a-visual-language-behind-the-scenes-of-our-airbnb-design-system-224748775e4e">here</a>.</p><h3>Why we need the design system?</h3><p>Jitta is a start up company. So we would like to ship products to our customers, learn and fix it as fast as possible. So we need to find a way that could make things happen to all platforms at once. And the answer is to make it universal by dividing things into sub sections or “components” that are small enough to have the same look on each platform. Of course, this is a response to use React as the front-end development for all platforms as well.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XiyYOxH-J2MY_7tbUO0Xcg.png" /></figure><h3>Let’s start with base styles</h3><p>From Airbnb’s story, they suggested laying the foundation first. Absolutely, we will do the same things here which are typography, colors, icons, and spacing. These base styles are really good guidelines to make all designers in your team working together in the same direction and style. Moreover, if you build and design components from these bases, it can also help decreasing redundant code in development too.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Nl_IaHtlYHzS3-D6nqwDAQ.png" /></figure><h3>It is not that easy!</h3><p>Yes, it is not. The difficult part is the typography. As Airbnb’s design has to support multi languages, we are on the same page. We have to design for supporting the Thai language too and most Thai fonts always have problems. For example, there is so much gap between Helvetica Neue and DB Helvethaica X that we use for Thai at the same font size. This can make a huge UI problem when you switch the languages on your site.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*35cNCiotbySDOvDC-k7X-g.png" /></figure><p>So what now? We have got our work around but it may not be the best solution. The solution is to scale the font size of Thai font as much as possible to make it closest to Helvetica Neue size by using <a href="https://www.fontsquirrel.com/tools/webfont-generator">web-font generator</a> to fix X-height of the font.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mGKurmzsm6hnQc6gWcNlmA.png" /></figure><p>In addition, you should be very careful about using font size across platforms. Some font sizes may be oversized in mobile phone or tablet. But that is not a big deal as you can multiply a factor to your base font size that should be work as well.</p><p>Now, we have already got our base styles so let’s build a component with this system next time.</p><p>Happy designing. :)</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=e9fad1508331" width="1" height="1" alt=""><hr><p><a href="https://medium.com/jitta-engineering/jittas-design-language-system-part-i-e9fad1508331">Jitta’s Design Language System | Part I</a> was originally published in <a href="https://medium.com/jitta-engineering">Jitta Engineering</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Learn UX Case Study from The Perfectly Toasted Bread!]]></title>
            <link>https://medium.com/jitta-engineering/learn-ux-case-study-from-the-perfectly-toasted-bread-8b1068e5fd73?source=rss-29ab180a3d1f------2</link>
            <guid isPermaLink="false">https://medium.com/p/8b1068e5fd73</guid>
            <category><![CDATA[user-experience]]></category>
            <category><![CDATA[case-study]]></category>
            <category><![CDATA[user-experience-design]]></category>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[users]]></category>
            <dc:creator><![CDATA[JibJib Saranya]]></dc:creator>
            <pubDate>Fri, 07 Jul 2017 12:38:48 GMT</pubDate>
            <atom:updated>2017-07-07T12:39:08.501Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oyD1QqPa4ZJH-7jPqH8weA.png" /></figure><p>Have you ever tried to make a perfectly toasted bread? Hope it would be like the one you ordered from a bakery shop but finally got a failed one? If yes, what if I told you that there is a toaster that could make a perfectly toasted bread at home. Yes, it really exists in this world, BALMUDA The Toaster.</p><p>In Japan, the land of creativity, mostly Japanese-companies emphasize on a key factor in designing a successful product which is having empathy for users — understanding what they think, do or feel as well as Balmuda, a creative technology company.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ENhFNZKVdYNs4QbWcUkAsw.png" /></figure><p>The idea of the toaster occurred in 2014 during a particularly rainy afternoon. Gen Terao, CEO, and his employees were warming bread on a grill and realizing that they have just produced the perfectly toasted bread! Terao taught that humidity could keep the toasted bread moist. And that brought them to sell the toaster which costs ¥24,000 ($212), or almost five times the price of a regular device in Japan, with a wait list of at least three months in stores.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/818/1*MFjvyhWlUnE5o9iM_fprBA.png" /></figure><h3>Why did they succeed?</h3><p>Terao said that he doesn’t design products but he’s designing <strong>“experiences”</strong>. Customers didn’t buy the toaster because they want a toaster, but they are after the moment they get to taste the delicious toast they made. So that is why every time that Balmuda design, they start from the user’s experience. And this is the idea of a company that didn’t just design the product but also empathizes with the customer by giving them the best experiences.</p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F4YaGKFIlFuM%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4YaGKFIlFuM&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F4YaGKFIlFuM%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0" scrolling="no"><a href="https://medium.com/media/819521c7b13fd87289ab07927bc3d18e/href">https://medium.com/media/819521c7b13fd87289ab07927bc3d18e/href</a></iframe><p>“Consumers are embracing gadgets that do one thing well,” said Hiromi Yamaguchi, Euromonitor analyst in Tokyo. “Larger appliance makers are selling products with too many functions, and not a lot of people use them.”</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/818/1*hLREBF6CSrwHNJeqHDikPw.png" /></figure><p>Now, if you go to Balmuda site, you will see pictures of food that could make you hungry and want to test that experiences right away. So if you want to succeed in designing your product, find the right customer experience!</p><p>Happy designing :)</p><h3>Worth reading?</h3><p>Please click the 💚️ below to help others find it, and leave a comment. Thanks for reading! 👍</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8b1068e5fd73" width="1" height="1" alt=""><hr><p><a href="https://medium.com/jitta-engineering/learn-ux-case-study-from-the-perfectly-toasted-bread-8b1068e5fd73">Learn UX Case Study from The Perfectly Toasted Bread!</a> was originally published in <a href="https://medium.com/jitta-engineering">Jitta Engineering</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[5 steps to deliver solutions your customer want with UXDD!]]></title>
            <link>https://medium.com/jitta-engineering/5-steps-to-deliver-solutions-your-customer-want-with-uxdd-7a492c55f76b?source=rss-29ab180a3d1f------2</link>
            <guid isPermaLink="false">https://medium.com/p/7a492c55f76b</guid>
            <category><![CDATA[prototype]]></category>
            <category><![CDATA[design]]></category>
            <category><![CDATA[uxdd]]></category>
            <category><![CDATA[ux]]></category>
            <category><![CDATA[users]]></category>
            <dc:creator><![CDATA[JibJib Saranya]]></dc:creator>
            <pubDate>Thu, 06 Jul 2017 08:14:15 GMT</pubDate>
            <atom:updated>2017-07-06T08:15:30.979Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*R6GXVnHyDk61t3W3m0VZhA.png" /></figure><p>What is design? The design is a work process which finds solutions to solve your customer’s problems. But how to find the best solution and deliver it to your customer?</p><p>Here are 5 steps to deliver solutions your customer want!</p><h3>1. Know your customers</h3><p>First of all, you have to understand your target users. You can learn more about your customers through various methods, such as setting a persona profile, take user interviews, create user journeys or make an affinity map. Don’t forget to focus on their normal experiences in daily life and find out what is their need or what is their pain point.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QvHL7NkRp1815GfATthvCg.png" /><figcaption><a href="https://dribbble.com/shots/2457624-Persona-Cards">Examples</a> of persona profile</figcaption></figure><h3>2. Discover your customer’s problem</h3><p>Now, you have already known what is your customer’s problems or their pain points. So pick the one that is the most important and the most valuable for your product and set a hypothesis. Don’t forget to make sure that you have set a clear hypothesis. This will be effected when you evaluate your design after launch the product to do the test.</p><h3><strong>3</strong>. Ideate</h3><p>After you’ve already got your hypothesis. The next step is to find solutions to evaluate that. In this step, you can do it with all your team members which can produce as many solutions as possible by brainstorming, do the mind mapping, sketching etc.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*MX675_dzVjKiNRCR7as3JA.png" /><figcaption>Read more about brainstorming <a href="https://publicpolicyinnovators.wordpress.com/portfolio/brainstorming-ideation/">here</a></figcaption></figure><h3>4. Design the prototype</h3><p>Actually, this is the design step but you can do it with your team as well. After you finalized your ideas, we will do the prototype to try out the possible solutions. The prototype should be something that users can experience e.g. paper prototyping or visual design prototyping. Now a day, there are a lot of prototyping tools for making and testing prototype with you target users. Such as InVision, UXPin, or Origami and etc.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oJVI58eeNV1tMm97ZRAojA.png" /><figcaption>An example prototype from InVision</figcaption></figure><h3>5. Do the test</h3><p>The last step is to test your design solution. Now it’s time to meet the users again and test it. You will learn more about the possible solutions and your customers’ experiences, what they like and what they don’t like. Again be focusing on their experiences too when you’re testing your prototype, notice and always ask for the reason why they click or tap on that button, why they don’t click or tap.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LorJV7LYwun72cGxVwq3aA.png" /><figcaption>Learn more about user test from Google Sprint <a href="https://www.youtube.com/watch?v=jQmBuKN10VY&amp;feature=youtu.be">here</a></figcaption></figure><p>After you have completed all these steps, all you need to do is just <strong>learn and adjust your prototype and test it again</strong> to find the real solution for your customers. The more you know what your customer need, the more you can make great experiences for them.</p><p>Happy designing :)</p><h3>Worth reading?</h3><p>Please click the 💚️ below to help others find it, and leave a comment. Thanks for reading! 👍</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=7a492c55f76b" width="1" height="1" alt=""><hr><p><a href="https://medium.com/jitta-engineering/5-steps-to-deliver-solutions-your-customer-want-with-uxdd-7a492c55f76b">5 steps to deliver solutions your customer want with UXDD!</a> was originally published in <a href="https://medium.com/jitta-engineering">Jitta Engineering</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
    </channel>
</rss>