workshop : user experience (ux) and user interface(ui) · workshop : user experience (ux) and user...

โครงการตอกลาใหเตบใหญ

การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2

ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557

1

Workshop : User Experience (UX) and User Interface(UI)

วนจนทร ท� 5 พฤษภาคม 2557 เวลา 9.30 น. – 16.30 น.

ณ หองประชม Conference ABC ศนยฝกอบรมธนาคารไทยพาณชย หาดตะวนรอน จ.ชลบร

วทยากร คณอภรกษ ปนาทกล

UX Specialist at TrueMoney / Instrator at UX academy

ชองทางตดตาม facebook.com/apirak

ประวตการทางาน

เคยทางานท� NECTEC กบ อ.รอยล ทาแผนท�เพ�อพยากรณน �าใน กทม.ตอนวกฤตน �าทวมป 2554

เขยนโปรแกรมดกชนนารสาหรบระบบปฎบตการ Mac

เขยนซอฟตแวร โปรเจคมเดย เขยนแอปพลเคช�น ของเวบไซต ทา UX UI

จดเวรคชอปการทาเวบไซตท�ทาใหคนตาบอด หหนวกเขาถงได

กจกรรมท� 1 เลอกท�น� ง : ใหผ เขารวมจดโตะเลอกตาแหนงท�ดท�สดในการน�ง

(ชวตจรงตองหาตาแหนงวาเราจะอยตรงไหน สาคญมาก อนน �เปน challenge แรก)




2

กจกรรมท� 2 กจกรรม Check in : แนะนาตว - ฉนคอใคร / คาดหวงอะไร / มความตองการเรยนรเร�องอะไรบาง

คาตอบของผ เขารวม

แบงค อยากไดความรมาพฒนาตวเองตอ เพ�อจะรวา user ตองการอะไร

มารค อยากรวาเทคโนโลยไปถงไหนกนแลว

วาน อยากรวางานดานน �เปนส�งท�เราชอบจรงหรอไมจะไดตดสนใจเรยนตอได

พชร อยากเรยนรความตองการของผใช

ม �ง อยากมาเรยนรอะไรใหมๆ UI / UX คออะไร

เจแปน เรยนรวาจะออกแบบหนาตาส�ออยางไรใหผใชอยากใช

คาดหวงวาเราจะพยากรณพฤตกรรมผใชอยางไร

บอย อยากใหแอปพลเคช�นเพ�อผ พการทางสายตานาไปใชไดจรง

ภา ทาแอปพลเคช�นเพ�อผ พการทางสายตา ตองการรวาเขาตองการอะไร เอาไปใชอยางไร

เกน ทาเกมทาอาหาร วาดหวงวาทาอยางไรใหเกมเอาไปใชไดจรง คนใชมความสข

ปารค ไมไดเปนโปรแกรมเมอร อยากไดความรใหมๆ มาชวยเพ�อนๆในกลม

ว อยากไดความรใหมๆ

ปาลม ตรวจจบโรคในนาขาว เคยอานหนงสอท�วทยากรเขยน เลยอยากเจอตวจรง เปนคนท�ไมเคยชนกบการ

ใชพวกน �เลยจะทาอยางไรใหผใชเอาไปใชได

บนน� ระบบตรวจจบในนาขาว UI ยงไมมการออกแบบ ทายงไงใหผใชใชไดงาย

แพตต � ลองมาอบรมเพ�อไปปรบใชในโครงงาน ยอมเสนไหมดวยเคม

เมฆ มาเรยนเพราะวาอยากรวาทาอยางไรใหผใชอยากใช

ทาอยางไรผใชใชงาย ใชไดเรว

ตองการเรยนรวธการออกแบบ UI ใหมนนาเลน

โบท ทาอยางไรใหผใชอยากใชงาน ใชงานไดงายข �น

ซน คาดหวง ศกษา UX / UI ไปใชกบโครงงาน

หยก แอปพลเคช�น Scan to Buy ทาสองสวน สวนลกคากบเจาของกจการ ทาบญช หวงวาอยากใหเขาไป

ใชไดจรงตรงตามความตองการ

แอปพลเคช�น Scan to Buy อยากจะออกแบบหนาตาโปรแกรมใหใชงานไดงาย

กาย เปนคนทาเวบไซต คาดหวง ทาอยางไรใหเหนแลว วาว! นาใชมาก

นท ทาส�อการสอนเก�ยวกบหวใจ UI / UX คออะไร

กลมองครกพทกษหวใจ อยากปรบใชทาโปรแกรมใหผใชเขาใจงาย

เอก มาเพ�อจะไดเอา UI ไปปรบใชใหเหมาะ

เมฆ คาดหวงวาจะเขาใจเร�องท�วทยากรจะมาพด




3

UX คออะไร

User experience – experience of user ประสบการณท�ผใชรสกตอระบบ

ตวอยาง เปรยบเทยบประสบการณกบตลาดอาหาร

ความรสกเม�อมองรป - พอครวไมมฝมอ / อาหารแชแขง / ไมมคณคาทางอาหาร/ รสชาตเทยม /

อนน �คอตวอยางซอฟตแวรท�ไมด อาหารท�เหนอาจจะไมไดเปนแบบน �แตภาพท�นาเสนอทาใหรสกวาเปนอาหารท�ไมด

เปรยบเทยบ กบภาพท�สองซ�งไมรวาเปนอาหารท�ดหรอไมแตมภาพลกษณท�ด

ความรสกจากการมองรป - อาหารสด / พอครวฝมอด – โภชนาการ – รสชาตด – ดสาหรบเรา




4

ไมใชวาอาหาร fast food ไมด แตถาเราจะทากตองใหดดเหมอนรปตอไปน �

เปรยบเทยบประสบการณอาหารกบการใชระบบปฎบตการบนมอถอ

iOS – Apple หรหรา จดเปนคอรส ตองใชงานไปตามท�มกาหนดมาให




5

Android – เหมอน fast food มความเปน mass แตกยงดด สรางมาเพ�อใหผ ใชแกไขได ไมชอบอะไรกเอาออก

Window Phone – ประสบการณเหมอน food court มปายบอกทกรานนาทางไปท�ๆ ตองการไดอยางรวดเรว

ได concept มาจากประสบการณในรถไฟใตดน ปายมพ �นสเดยวและมตวอกษรท�ชดเจน




6

USER

รจกและเขาใจ user

ส�งแรกท�ตองทาคอเดาเขาใหได แตเราตองจาไววา เราเดา user ไมได การน�งคดอยกบโตะเอาเองเปนการเอา

ตวเราเปนศนยกลาง

ตวอยาง

ผหญงจะชอบหองสชมพ แตเรากแนใจไมไดวากลมเปาหมายเราชอบแบบน �จรงหรอไม

เรารไดแคคราวๆ แลวตองไปทดสอบกบ user

บคคลในภาพเปนผหญงเหมอนกน แตมความชอบและวถชวตท�แตกตางกน

ท �งๆ ท�อาจเปนไปไดวาท �งสามคนอาจมรายไดท�ใกลเคยงกน




7

เราพอจะคาดเดาไดวาสาวออฟฟศนาจะมรสนยมอาหารแบบ fast food

สาวมอายท�แตงตวดกนาจะชอบอาหารช �นดมากกวา

ความผดพลาดเกดข �น คอเรามกจะนยามกลม user งายๆ เชน ประเมนจากรายได แต “ความ

ตองการ” ของคนแตละกลมไมเหมอนกน เราควรเดาใหนอยท� สด สารวจความตองการของ user กอนแลวให

user ทดลองใชเปนระยะๆ (เชน iPhone กอนท�จะผลต มการทาตวอยางออกมากอนวาผใชชอบรปทรงและน �าหนกแบบ

ไหน)

Idea workshop

คาถาม : โครงการ / แอปพลเคช�น ของเราอยในหมวดใด?

จรงจง / สนกสนาน - เคร�องเลน / เคร�องมอ (ของใชงาน) / ผ ชวย




8

คดทบทวนเพ�อตรวจสอบวา เราทาเพ�อใคร เพ�อความเขาใจของตวเราเอง และผใชจะไดรวาผลตภณฑน �น

ตอบสนองความตองการเขาไดหรอไม ถาไมใชเขาจะไดไปหาส�งอ�น

Positioning of Idea

จรงจง – เคร�องมอ ใสลกเลนใหนอยท�สด เปดเพ�อทางานใหเสรจดวยความรวดเรวแลวปด ทาใหเขาใจงาย

ไมตองทาใหสวย การใสลกเลนทาใหโปรแกรมโหลดชา ตวช �วด คอ ถาเขาอยนานแสดงวา แอปพลเคช�นหวย

ตวอยางเชน calendar, email

เคร�องมอ – สนกสนาน เพ�อแกปญหาแตไมตองซเรยสมาก เชน to do list หรอ daily cost จดบนทก

คาใชจาย - เนนสวยงาม ใชสนก ไมเนนการทางานเรว ไมเนนการส�อสารมาก ตอบสนองชวตท�ไมไดเก�ยวกบการ

ทางาน ตวอยางเชน แอปพลเคช�น ขายของ (กลม Scan to Buy)

เคร�องเลน – สนกสนาน ทามาเพ�อความสนกสนาน ไมตองทาใหเสรจ แอปพลเคช�นเพ�อการศกษาบางอนกอย

หมวดน � ไมไดตองการใหรเยอะ ใหซมๆ เขาไป

เคร�องเลน – จรงจง โปรแกรมเลนวดโอ เขาถงส�อ ดรปภาพ เขาไมไดจรงจงกบแอปพลเคช�น แตเพ�อเขาถง

เน �อหา ตวช �วด คอเขาอยกบแอปพลเคช�นนอยมากแตเขาถงเน �อหาเรวท�สด เชน Youtube

ผชวย – แอปพลเคช�นท�ไมไดแกปญหาเอง แตเปนเคร�องมอท�ชวยให user นาไปแกปญหา เชน เขมทศ อณหภม

แอปพลเคช�นสาหรบคนตาบอดซ�งเปนแคเคร�องชวย ใชแลวเหมอนไมไดใชแอปพลเคช�น

จรงจง ไมตองเนนสวยงามใชในการทางาน

สนกสนาน ใชแลวเบกบาน – ใชเวลาพกเท�ยง เวลาวาง

กจกรรมท� 3 ปรกษากบสมาชกในกลมวาผลงานของตวเองจดอยในประเภทใด ตาม Positioning of Idea เลอกเพยง

หน�งประเภทเทาน �น

ชวนคด เกมสอนภาษาองกฤษ ตองคดใหชดวาเอาไวสาหรบคนท�จะสอบโทเฟลหรอใชเลนๆ ตอนปดเทอม อาจจะตอง

ตดใจวาจะทาแอปพลเคช�นน �ใหใคร ไมเชนน �นอาจไมมคนเอาไปใชเลย

ชวงเวลาถามตอบ

(กลม ZombiO นายซอมบ �กบเคมท� รก ซอฟตแวรเพ�อการเรยนรเร�อง สารชวโมเลกล)

ถาม : ไมแนใจวาแอปพลเคช�นของกลมตวเองจดอยในกลมใด เปนส�อการเรยนรวชาเคม สารชวโมเลกล ไมรวาจะอย

จรงจงหรอเขามาเลนแบบสนกสนาน

วทยากรถามผเขารวมในหอง : เปดไปคดวาจะเจออะไร?

ผเขารวมตอบ : เจอความรกอน อยากยดอะไรกยด ยดพ �นฐาน

วทยากรถาม : มนตองเกดความรสกอะไรกบเรา เราถงจะยอมไปดาวนโหลดมาใช




9

ผเขารวมตอบ : กาลงเรยนเร�องน �อยแลวสนใจ อยากเรยนดวยตนเอง อยากเรยนรเน �อหาเพ�อใหเราเขาใจมากข �น

วทยากรถาม : ลองเลาประสบการณคร �งสดทายในการดาวนโหลดแอปพลเคช�นการเรยนร

ผเขารวมตอบ : เรยนแลวเหนมนสวยเปนสามมต เลยอยากจะโหลดมาสไลดๆด

วทยากรถาม : พอถามกจะเหนวาส�งท�เขาคดและส�งท�เขาทามนไมเหมอนกน เราตองถามด

ถาอกสองปตองสอบจะดาวนโหลดแอปพลเคช�นน �ไหม? ตองเปนอยางไรถงจะยอมดาวนโหลด?

ผเขารวมตอบ : ถาจะเรยนกตองเรยนไปเลย หรอถาจะเลนกเลนไปเลย

วทยากรถาม : เรากจะเหนวากลมเปาหมายของเรามลกษณะแบบน � แอปพลเคช�นท�เขาคดดๆ เขาจะถายรปเลยวา

คนแบบไหนท�เปนกลมเปาหาหมาย

หวขอการเรยนร 1. Planning

2. Great first impression 3. The fundamental

4. Design for platform 5. Kaizen

1. Planning – ทาไปเพ�ออะไร

1.1.1 จงจาไววาฉนไมใช User (you are not the user)

เราตองไมเขาใจเอาเองไปวาส�งท�เราตองการเปนความตองการของ user

1.1.2 เขาใจวา User คอใคร (understand who they are)

ชวนคด Counter Strike VS. Cookie Run ผ เลนเปนกลมเดยวกนหรอไม? เขาเปนใคร? ทาไมถงยอมซ �อเกมน �

มาเลน?

(ลกษณะของเกม Counter Strike เปนเกม First Person Shooter มมมองของผ เลนจะเหนเหมอนตวเองกาลงยง

คนอ�น) รบบทจาลองเปนฝายตารวจหรอผกอการราย ตอสกนโดยกาจดฝายตรงขามใหหมดหรอทาภารกจใหสาเรจ เชน

วางระเบด อาจเลนเปนทมหรอคนเดยวกได สวนแตมจะนบจบเม�อเลนครบแผนท� ในแผนทหน�งๆจะมหลายดาน สวนเกม

คกก �รน เปนเกมว�งผานดานเกบคะแนน ภาพ �D แขงขนในระบบไลน โดยในแตละรอบจะสรปผลคะแนนเลย)

Counter Strike คนมเวลาวางนานๆ ซ�งกคอนกเรยน นดกนไปเลนหลงเลกเรยน

คนเลน Cookie Run คอคนท�มเวลาไมมาก เปดเลนเปนพกๆ เชน พนกงานเปดโทรศพทมอถอมาเลนเวลา

พกเท�ยงหรอระหวางโดยสารรถไฟฟา

“ถามองไมออก วเคราะหเรามองไมเหน user ของเรา ถาคดไมชดจะขายไมได”




10

กจกรรมท� 4 วเคราะห User ของแตละกลม

ผลกจกรรม

Monster Land เกม RPG เดกผานการดชองเกาการตน เลนเกมประเภทน �อยแลว มประสบการณ

การตนแฟนตาซตอยอดประสบการณเดม

Scan to Buy เปนคร นกเรยนภายในโรงเรยน คนท�ไมคอยมเวลาซ �อของตามหาง

องครกษพทกษหวใจ นกเรยน ม.ปลาย ตองเรยนเก�ยวกบโรค ระบบหวใจ ใชตอนวาง (ใครจะมาใช

แอปพลเคช�นโรคหวใจตอนวาง ? นกเรยนจะเรยนไปสอบ / คณยายเปนโรคหวใจ / คนท�สงสยวาเปน

โรคหวใจ? )

1.1.3 ไปหามาวาเปาหมายในการเขามาหาคอนเทนทของเขา มาจากความตองการอะไร (understand their

need and goal)

เขาใจวา ส� งท� ผใชตองการ มรปแบบ หรอ หนาตาเปนอยางไร และนาไปเพ�อใชประโยชนหรอ

แกปญหาอะไร ถาเราเขาใจเชนน�นกจะทาใหสามารถออกแบบผลงานไดเพ�อนาไปใชตอบสนองความตองการ

ไดอยางแทจรง เชน สมมตวาคณยายตองการสะพานขาม จะตองการสะพานแบบไหนท�เหมาะสมกบผใช




11

ผดาเนนการกอสรางอาจจะเสนอสะพานหลายๆ แบบใหคณยาย แตไมมอนไหนท�เหมาะกบความตองการ

สดทายแลวไดสะพานหวยๆ มาหน�งอนดวยเหตผลท�วา มการเปล�ยนแบบจนไมมเงนจะทาแลว เปรยบเสมอนคนทาชอบ

โทษ User วาเปล�ยนแลวไมสวย ถาเลอกอนแรกกสวยต �งแตแรกแลว แตเราไมเคยถามไปวาเขาตองการอะไร ในความเปน

จรงเขาอาจจะไมตองทาสะพานกได เพราะมสะพานอยแลวใกลๆ ท�ใชได หรออาจจะแกปญหาไดโดยไมตองใชสะพาน

“อยาแนใจวาเราเดาถก แตตองไปถามความตองการท�แทจรงของเขา”

1.1.4 เขามความสามารถในการอดทนอยกบแอปพลเคช�นของเรามากแคไหน (understand their ability)

ผใชแตละกลมมความสามารถในการใช software ไมเหมอนกน เชน กลมท�ตองการใชเพ�อประกอบอาชพ ขอให

สามารถนาไปใชงานไดอยางท�ตองการ ไมวาจะตองไปเรยนหรอศกษาวธใชจากคมอกสามารถลงทนลงแรงทาได แตกลมท�

ตองการใชเพ�อเปนงานอดเรก อาจตองการแคไดใชโปรแกรมท�ใชไดงาย ไมยงยาก ไมตองเรยนรมากนก

ตวอยาง โปรแกรมแตงภาพบน iOS

Less sophisticate

iPhoto เปน home use ใชนอกเวลา ป มนอย




12

More sophisticate

Aperture เปนโปรแกรมจรงจง ใชสาหรบมออาชพ กลมน �ยนดเรยน เปาหมายคอทางานไดเรว

“UX ไมไดแปลวาทา software ใหงาย แตใหเหมาะกบการใชงาน”

กจกรรมท� 5 วเคราะห ability ของ user โดยใหเวลา 3 นาท

1. user ของเราตองการอะไร

2. ม ability (ความอดทนการเรยนรส�งใหม ทกษะมอยในการใชงานระบบ) มมากนอยแคไหน

ชวงเวลาถามตอบ (ก ลมอง ค รก ษพท ก ษห ว ใจ – ซอฟตแว ร เพ� อการเ รยน รการท า งานของห ว ใจและโรคห ว ใจ )

ถาม : เกมของเราตองใชขอมลเยอะ ในการศกษาทาอยางไร

ตอบ : การผลต Software มปญหาน �เยอะ ทางแกคอ ของเราคลายๆ กบเกมอะไร กทาใหมนคลายๆ กน กจะใชไดงาย

ข �น ทาใหเหมอนของท�เขาเคยเลน ทาแหลงการวาง item ป มกดแบบเดยวกน

ถาม : กลมเรามผใชเปนอาจารยและนกเรยน ตองเจาะจง user เดยวหรอไม?

ตอบ : อาจจะมหนา interface ท�แยกกน / เวบไซตน �เปนเวบไซตสอน จะตอง define วาเปนแอปพลเคช�นท�ใหนกเรยน

เรยนดวยตนเอง หรออาจารยเอาไปใชประกอบการสอน และตองเลอกวาเปนนกเรยนหรออาจารยประเภทไหนท�

เอาไปใช เชน มแอปพลเคช�นท�ไดมการผลตข �นแลว เปนแอปพลเคช�นท�เอาไวดรายละเอยดของกระดกและ

กลามเน �อ โดยมการออกแบบมาเพ�อใหใชคนเดยว แตถาเขาจะเอาไปสอนกไมตองแครมาก




13

ถาม : ถาเราทาใหใชงายใกลเคยงโปรแกรมอ�น แลวแตเขาเลอกจะไมด แตจ �มไปม�วๆ เปนเพราะอะไร?

ตอบ : เปนธรรมดาท�เขาจะใชวธการท�เขาเรยนรจากแอปพลเคช�นอ�นแลวมาใชกบแอปพลเคช�นเรา เชน เม�อตองการ

เซฟ ผใชจะมองหารปแผนดสก ท �งๆ ท�ปจจบนไมมใครใชแผนดสกเหมอนรปในไอคอนแลว แตถาเขาไมเคยใชเขา

กจะไมร เชน ถาผใชเคยใช Microsoft Word หรอ Excel เขากจะจามาแบบน �น อยางป มกากบาท เรารวาเปนการ

กดออกจากโปรแกรม แตคณปาท�ไมเคยใชอาจจะเขาใจวาหามกดป มน � เราอาจจะตองออกแบบเปนรปประต

เคยเอา iPad ไปใหคณปาใช ใหเขาคลกเพ�อเปดรปเขาทาไมได แตซมกบสไลด เขาทาไดเลย เขาดใจมากขนาดท�

เขาพรอมท�จะซ �อเลย ไมใชวาเขาไมมกาลงซ �อแตเขาไมแนใจวาจะใชได

----------พกเบรก 15 นาท----------

กจกรรมท� 6 ชมวดโอ โฆษณาของผลตภณฑ Dove - Dove Real Beauty Sketches

เน �อหาเปนการวาดรปผหญงโดยมนกสเกตภาพมออาชพน�งอยในหองและจะวาดภาพตามคาอธบายโดยไมเหน

หนาตนแบบ มการจดใหผหญงเขามาในหอง น�งลง แลวบอกวาตวเองหนาตาเปนอยางไร นกสเกตภาพจะวาดตาม แลว

ใหคนท�สองท�เดนสวนเขามาในหอง บอกวามองเหนคนแรกหนาตาเปนอยางไร ผลปรากฏวาภาพท�วาดออกมาโดยคาบอก

เลาของคนอ�นจะสวยกวาท�เจาตวอธบายลกษณะของตวเอง

ถาม : คดวาคนทาโฆษณาอยากบอกวาอะไร

ตอบ : คณคดวาคณสวยกวาท�คณคด

วทยากร ผมเขาใจวาเขาตองการสะทอนวาจรงๆ แลวคนมกจะมองขอเสยของตวเอง แทนท�จะมองดานท�ตวเองมด ในเชง UX โฆษณาน �สะทอนใหเหนวา user หลอกเราเสมอ เขาไมบอกเราตรงๆ เพราะเขาไมรวาเขาอยากไดอะไร เขาจะบอกส�งท� ฝงอยในใจ ส�งท� นาจะเปน แตเขาไมรวาเขาอยากจะไดอะไร วธการจรงๆ ท�จะรไดคอการทดสอบ ไมใชการถาม การท�จะรวาเขาตองการความซบซอนมากหรอนอย เราตองลองทาแลวไปทดสอบวาเขาตองการแบบน�นจรงๆ หรอไม




14

1.2 เขาใจแอปพลเคช�น หรอผลตภณฑท�ตวเองจะทา

1.2.1 Core Value

เม�อเราเหนแลววา กลมเปาหมายเรามความตองการท�หลากหลาย การตดสนใจสดทายตองใชตวเราเอง เราเลอก

วาเราจะทาใหใครใช โฟกสท�คณคาหลกและจดแขงของเรา เราเลอกส�งท�เราทาไดดมากกวาโฟกสไปท�ความตองการของ

ผใช เราเช�ยวชาญอะไรกเปนแบบน �น ถาเราไมไดตอบสนองความตองการของ user เขากจะไปหาแอปพลเคช�นอ�น เชน ถา

เราผลตเน �อหาเคมเบ �องตน เม�อเขาตองการแบบ advance เรากตองปลอยเขาไป

กจกรรมท� 7 คด Core Value ของผลตภณฑของกลมตนเองวาคออะไร ? อยในระดบเทาไร (level)

อะไรเปนขอโดดเดนมากท�สด

เราตองร Core Value ของเรา เพราะเม�อเราม Request มาจาก User เราจะหลดไปจากส�งท�เราเช�ยวชาญไดงาย

เม�อเราเขาใจ value ของเรา เม�อเราทาแอปพลเคช�นของเรา เราสงมอบการแกปญหาใหลกคา ไมใชการให

feature เชน เม�อมบรษทมาจางใหทาแอปพลเคช�น น�เปนส�งท�สาคญมาก เราตองคดเลยวา ผใชตองการอะไร ดกอนวาผใช

มปญหาอะไร แลวจะแกปญหาใหไดอยางไร ไมใชเร�มดวยการคดวาควรมอะไร เชน แอปพลเคช�นเคม ทาเพ�อตอบโจทย

ปญหาวา ทาอยางไรใหสอบผานวชาเคม อยาเพ�งไปคดวาตองมอะไรบาง แตใหคดวาเขามปญหาอะไร บางคร �งปญหา

ของเขาคอเบ�อมาก เขาจงมาใชแอปพลเคช�นแกเบ�อ




15

1.2.2 กฎ 80 : 20

เพลโตบอกวาในเมองของเขาเงนมาจากคน 20 % แนวคดแบบน �เอามาประยกตใชในธรกจ

ม feature อย 20% ท�เปนจดขายหรอทาใหคนมาใช เปนสวนท�ผใช 80% อยากได

แตจะมผใชอก 20% ท�อยากได feature 80% ท�เหลอ

ถา 20% ทาเสรจแลวเวลาท�เหลอทาอะไร?

ทา 80% เพ�อคน 20% ท�จะไมทาใหเกดการเพ�มยอดขาย? หรอทา 20% ใหดข �น และดข �นเร�อยๆ ตวอยางเชน ถา

เราทาเกมวางแผน เราอาจจะทมเทกบการคดวาทาอยางไรใหเกมมความซบซอน นาสนใจ มากกวาพฒนาเร�องกราฟฟค

เพราะส�งท�เปนหลกสาคญของเกมวางแผนคอ เร�องการคดวเคราะหมากกวาความสวยงามของภาพ

บรษทสวนใหญหลงกล เพราะคน 20% คอคนท�มกจะตดตอเขามาวาตองการใหเพ�มส�งตางๆ เม�อ 20% น �เสยง

ดง เราตองระวงวาเราทางานใหคนกลมใหญหรอคนกลมเลก หรอเราทาส�งท�หลดไปจาก core value ของเรา เชน เม�อเรา

ทาแอปพลเคช�นใหนกเรยนใช อาจารยมกเปนคนท�เสยงดงและรเยอะ กจะมาบอกวาควรตองเพ�มเน �อหา ตองดใหดกวาเขา

คอ คนใน 20% หรอ 80%

ตวอยางท� � : แอปพลเคช�นการเงน

ตวอยางท�ไมด - Your Money Pro แอปพลเคช�นน �ทมเวลากบการทากราฟ เพ�อใหดเหมอนมออาชพท �งๆ ท�เปน

แอปพลเคช�นสาหรบคนท�วไป

ตวอยางท�ด - Daily Cost รวาแอปพลเคช�นของเขาไมไดใหมออาชพใช จงทมเวลาในการทาใหนาใชโดยทาใหด

สวยงาม




16

ตวอยางท� 2

Microsoft Word ทมเทเวลากบการเปล�ยนสเพ�อคน 20% แตคนท�วไปไมเหนการเปล�ยนแปลง เวอรช�นตอมาม

การเปล�ยนแปลงชดเจน เพราะเขารวาตองเพ�อคน 80% เขาจงพรเซนตมนออกมา เปล�ยนเมนเปนรปภาพ คนกเร�มใชงาน

ฟงกช�นท�ซอนไว

การทมเทเวลาไปกบการทา feature ท�ไมจาเปนทาใหเกดปญหา...

1) มโอกาสเกดขอผดพลาด (bug)ไดมากข �น

2) ใชทรพยากรมากข �น

3) ยงยากตอการเขยนโปรแกรม

4) ส �นเปลองเวลาในการพฒนาโปรแกรม

5) เสยโอกาสในการพฒนาสวนท�จาเปน

Your Money Pro




17

�.� เขาใจ Market’s Needs

กจกรรมท� � วเคราะหความตองการของตลาดในหมวดการใชงานท�แตกตางกน

Column ดานซาย คอ ลกษณะของ Feature

High performance ประสทธภาพการใชงาน

Response ความไวตอการตอบสนองท�เกดข �น

Elegant ความสวยงาม

Attractive เหนหนาน �ชวนใหทาตอ

Easy to use เหนแลวใชเปน

Adaptive มความสามารถในการใชงานไดหลากหลาย (ตวอยางเชน Excel ใชไดทกงานต �งแตทาบญช

เอกสาร หรอแมกระท�งวาดรป)

Compatible เวลาทางานเสรจแลวสงไปใหคนอ�นดแลวหนาตาเหมอนกน แอปพลเคช�นการเงนจะมปญหา

กบแอปพลเคช�นปกตคอการปดเศษทศนยมไมเหมอนกน

Mobile เอาไปใชตามท�ตางๆได

Accessible เขาถงได คนหหนวกตาบอดใชได




18

ความตองการของตลาด

ตารางน �นาจะไมเปนความจรงเพราะสรางมาหลายปแลว ถาส�งท�เราเราคดเหมอนกนกบตารางแสดงวาเราเชย

อนท�ไมนาจะจรงแลวคอ เร�อง high performance สาหรบเกม เพราะเม�อกอนคอมพวเตอรชา เด�ยวน �ทกเกมทางานไดเรว

หมด สวน Attractive, easy to use, response นาจะยงเหมอนกน

ส�งท�ตองโฟกสเก�ยวของชดเจนกบคาแรกเตอรของกลมเปาหมาย ภาคธรกจเนนความจรงจง การใชงานมอ

อาชพไมสนใจวาใชงานงายแตขอใหทางานไดด แอปพลเคช�นสาหรบการทางานไมคอยจาเปนตองดดหรหรา แตถาเปน

แอปพลเคช�นท�ใชในเวลาสวนตวกตองการความสวยงาม




19

1.4 Market’s needs

กจกรรมท� 9 ลาดบความสาคญของความตองการของตลาดโดยใสหมายเลข 1-3 ลงไปในแตละหมวดกลมผใชงาน

ตามลาดบความสาคญของ feature

ลาดบการใหความสาคญ

ปกตเราจะม feature ท�คนจดจาไดแคอนเดยว ท�เหลอเปนของแถม แตจรงๆ อนน �ไมใชสตรตายตว แตละประเภท

กมกลมท�มความตองการแตกตางกน ใหเลอกวาอะไรสาคญ ถาทกอยางสาคญ แปลวาไมมอะไรสาคญเลย

การวางแผนจะชวยลดปรมาณงาน ถาทาแอปพลเคช�นแลวไมมคนใช ทาใหมจะประหยดเวลามากกวา




20

Design Thinking – ใครคอผท�เราจะผลตแอปพลเคช�นใหเขาใชงานและจะแกปญหาของเขาไดอยางไร

1.4.1 People หา persona

1.4.2 Problem ดปญหาของเขา

1.4.3 Possibility ทางท�จะแกปญหาใหเขาได

1.4.4 Path ทา prototype หาทางออก

Design Thinking

1.4.1 การทา Persona

Marketing persona จะกาหนด user เปนกลมคราวๆ อาย เพศ แตเราจะไมใช Marketing persona เพราะมน

กวางเกนไป แตเราตองการ interactive persona เราจะต �งช�อเขาข �นมาวาช�ออะไร อายเทาไร เกดท�ไหน พฤตกรรมของเขา

เปนอยางไร ชอบสอะไร เวลาท�เราสราง persona ข �นมา เราจะสรางรายละเอยดข �นมา เรารชดวาเขาเปนใคร และเพ�อ

ส�อสารกบเพ�อนในทมดวย เราไมใชตวหนงสอเพราะเราอยากใหเหนมนทกวน อยากใหใชทกวน เอาวางไวทกท� เพ�อกระตน

เตอนวาเราสรางแอปพลเคช�นข �นมาเพ�อใคร




21

ตวอยาง persona

ตวอยาง interactive persona

Marketing persona มรายละเอยดนอยเกนไป

ตวอยางในภาพ การประชมทมของบรษท Yahoo จะเอาภาพแผนพบ Personas มาวางไว

เพ�อใหทมงาน จตนาการไปในทางเดยวกน และไมลมท�จะคดถง User ตลอดเวลา




22

บคคลใน Persona คอใคร?

กราฟแสดงจานวนประชากรสมพนธกบความสามารถในการปรบตวรบส�งใหม

กลม First Mover มจานวนไมมากนก เปนกลมคนท�พรอมจะใช หรอ เปดรบเทคโนโลยหรอนวตกรรมใหมอยาง

รวดเรว หากธรกจสามารถทาใหคนในกลมน �มความสนใจในผลตภณฑ กจะทาใหสนคาเปดตวสตลาดได

กลม Follower เปนกลมคนท�ใหญท�สด จะปรบเปล�ยนเม�อเทคโนโลยมผใชมาแลว หรอเปนท�นยม

กลม Don’t move มจานวนไมมาก เปนกลมท�ไมยอมปรบตวจะใชเทคโนโลยหรอผลตภณฑชนดเดมไปจนกวา

จะไมสามารถหาของชนดน �นไดอกแลว

iPhone เขามาตลาด สนใจแค 1% คอ First Mover เพราะเช�อวาหากกลมน �เร�มใชผลตภณฑกจะมกลม Follower

ตามมา แอปพลเคช�นของเราตองการ User แบบไหนท�ตอใหแอปพลเคช�นของเรามนไมดกจะใชหรอเลน

ส�งท�เราจะทาคอเอา market target มา intersect กบ first mover จะได persona ของเรา




23

กจกรรมท� 10 สราง Persona : คดถง software ของตวเอง และคดถงคนท�นาจะมาเปน user ของเรา วาดลงใน

กระดานท�จดไวให

รป ช�อ อาย

ท�อย อาชพ ประวต

บคคลน �นๆ มเงนเกบเปนก�เปอรเซนตของรายได มพฤตกรรม นสย ความชอบเปนอยางไร

ผลการทากจกรรม

โครงการการพฒนาประสทธภาพการเคล�อนท�ของแบบจาลอง Airboat ดวยการเคล�อนเชงมม




24

โครงการ Scan to Buy

โครงการ ระบบตรวจจบโรคนาขาวดวยเทคโนโลยประมวลภาพ




25

โครงการ องครกษพทกษหวใจ

โครงการ Monster Land




26

1.4.2 Problem อะไรคอปญหาของ persona

สงเกตวาเม�อเราเอารปภาพเขามาชวยจะทาใหเราเหนภาพของเขาไดชดเจนข �น และพอคนในทมเหนเปนคน

เดยวกน เวลาท�ทางานจะทาไดงายข �น จากน �นเร�มแปะ post it ไปวาปญหาของเขามอะไรบางและ ทางท�เราจะแกปญหา

ใหเขาไดคออะไร

ตวอยางการระดมปญหา

กจกรรมท� 11 ระดมปญหาของ persona ท�ไดกาหนดไว

ใหแตละกลมโหวตของกลมตวเองและกลมเพ�อนสาหรบปญหาท�คดวาเปนปญหาสาคญ แตละคนโหวต

ไดคนละ 2 ขอ (หรอถาไมเหนวาเปนปญหากไมตองโหวตกได)




27

ผลกจกรรมท� ��

การวเคราะหปญหาของ user โครงการ Easy Phone for Blind

1.4.3 Possibility

หนทางการแกปญหา

ส�งท�คนอ�นโหวต คอ ส�งท�คนอ�นอยากบอกวาเขาตองการใหเราทาเอาเปนขอมลในการตดสนใจ นามาเปนเพยง

ขอมลประกอบ สดทายแลวอยท�ความตองการของ user ตวจรง และตวเราตองการอะไรมากกวา




28

ตวอยางการคดหาความเปนไปได

เพราะวา...พ�สมหมายโดนเพล �ยกระโดดในไรนา

เปนไปไดไหม.... ท�เราจะรกอน

เพราะวา... สอบตกมาสามคร �งแลว

เปนไปไดไหม... วาจะสอบผาน

เพราะวา... นองสมชายเปนโสด

เปนไปไดไหม... ท�จะมแฟนภายใน 1 เดอน / หรอเปนโสดอยางมความสข

....เปนไปไดไหม.... ตองเปนส�งท�วดผลได

กจกรรมท� 12 นาปญหาท�ไดระดมไวแลวในกจกรรมกอนหนา นามาคดตอถงความเปนไปไดในการหาทางออก

ตวอยางผลงานของผเขารวม




29

การระบปญหาใหชดกจะหาทางแกปญหาได ไมใชเร�มดวยการต �งทางออกกอน การท�เรากาหนดโจทย

ได ทาใหเม�อเราทาแอปพลเคช�นออกมาแลว เราวดผลได การคดใหชดเจนทาใหเราและคนในทมวดผลไดวา

ส�งท�ทาแกปญหาไดหรอไม ถาไมไดกเปล�ยนไปทาโปรเจคอ�นได นกยอนกลบไปท�แอปพลเคช�นของเราวา

แกปญหาไดตรงจดหรอไม?

1.4.4 Prototype สรางตนแบบสาหรบทางออก

จากขอมลท�เรามท �งหมด ท �งแตการทา persona การหาปญหาและความเปนไปไดสาหรบทางแกปญหา จะทาให

เราพอท�จะทราบวาจะตองทาผลตภณฑ หรอ แอปพลเคช�นท�มหนาตาหรอฟงคช�นการใชงานอยางไรเพ�อใหผลตภณฑ

สามารถนาไปใชไดจรง

2. Great Impression การออกแบบควรใหความสาคญกบความประทบใจแรกท�ผใชพบเหน

2.1 การจดวาง layout เม�อเราออกแบบเวบไซต เราจะคดวาคนเขามาแลวจะมองอยางไรบาง แตในความเปนจรงไมเปน

เชนน �น

ตวอยางลกษณะการอานในแบบท�ไดออกแบบไว กบ ลกษณะการใชงานจรง

ถาเรารแบบน �เรากจะไมใสพลงไปกบขอความมากเกนไป เราจะไปใสรป เปล�ยนยอหนา หรอเนนตวอกษร ใสส

ทาตวหนา ในสวนท�สาคญ เพ�อใหคนท�สนใจเขาจะไดอานตอ




30

ตวอยางการใชสและขนาดตวอกษรเพ�อทาใหนาอานและนาสนใจมากข �น




31

2.2 ไอคอน (icon)

First impression ของแอปพลเคช�น คอ ไอคอน วธการท�งายท�สดคอตดโลโกมาใสเปนไอคอน แตปญหาคอ

เม�อไอคอนอยในตาแหนงท�มขนาดเลกลง ผ ใชจะมองไมออก ดงน�นตองออกแบบใหเม�อเลกท� สดแลวกยงตองมอง

ออกวาคออะไร การเอาโลโกไปใสท�อๆ ไมเวรก

ลกศรสเหลอง ไอคอนเม�ออยในตาแหนงท�เลกท�สด

เอาโลโกมาเปนไอคอน เลกแลวมองไมเหน

ออกแบบใหมทาใหเหนไดชด




32

ตวอยางการออกแบบโลโกและไอคอนท�แตกตางกน

ไอคอนถกคดข �นโดยคานงถงโทนสท�เหมาะสมกบพ �นหลงหลายๆ เฉดส

2.3 หนาแรกของแอปพลเคช�น

เปนพ �นท�ท�มความสาคญอยางย�งเพราะเปนประสบการณแรกท�ผใชพบเหนเม�อเขาสระบบการใชงาน

ตวอยางแอปพลเคช�นตางๆ IN หนา update สาคญท�สดแตเขาเอาไปซอน เวอรช�นตอมามการพฒนาเอาส�งท�สาคญ

ออกมาโชว

Interface กอน และ หลงปรบปรง

ส�งท�เปนหวใจสาคญของ social media คอ update ไมใชเมน




33

เราอยากใหคนท�เขามาในแอปพลเคช�น หรอเวบไซตจาอะไรได ตองเอาส�งท�สาคญท�สด ณ ขณะน�นข �นมากอน

หนาเวบไซตไซตของ iPhone นาเสนอสนคาใหมลาสด

เวบไซตไซตของ Sony นาเสนอสนคาท�ตองการโปรโมท

เวบไซตของซมซงเขามาไมรจะดอะไรกอน ขอความท�สาคญท�สดอาจจะสงไมถงมอผอาน

ถาเราทาเวบไซตโปรเจคเรากตองเลอกวาอะไรสาคญท�สดในโครงการเรา




34

Story board

ตอนน �เราได persona problem solution แลว (ถงแมวาอาจจะไมตรงกบปญหา ) ในส�งท�มอยมารอยเรยง วา

ผลตภณฑของเรา ผใชคอใคร เขามปญหาอะไร และผลตภณฑของเราจะชวยแกปญหาไดอยางไร วธการส�อสารท�ดท�สด

ในการนาเสนอโดยใช Story board

โครงสรางของ story board ใหเหนภาพรวมกอน หลงจากน �นเจอปญหา บอกวธการจดการปญหา สาเรจ ไดรางวล

iFound เน �อเร�องมคนเจอตกตาหม ถายรปลงแอปพลเคช�น และคนกมาเจอตกตาหมท�ทาหายไป

เขาพดเร�องหนาจอนอยมากแตอานแลวรวาแอปพลเคช�นของเขาใชเพ�ออะไร




35

เคาโครงการทา story board

กจกรรมท� 13 งานกลม เขยน Story board เลาเร�องการของการแอพลช�นของเรา จะสามารถนาไปแกปญหาให User

อยางไร

----------พกเบรก 15 นาท ---------

กจกรรมท� 14 ดโฆษณา Power of Words

เน �อเร�อง ชายตาบอดน�งขอทาน มปายเขยนวา “ฉนตาบอดโปรดชวยฉน” แตคนเดนผานไปมาไมมคนสนใจ สน

กระท�งมผหญงคนหน�งมาแกคาพดบนกระดาษแลวเดนจากไป หลงจากน �นมคนใหเงนชายตาบอดเปนจานวนมาก เม�อ

ผหญงคนน �นเดนมาอกคร �ง ชายตาบอดจาไดจากการจบรปทรงรองเทา จงถามวา “เธอเขยนอะไร” หญงคนน �นไมไดบอก

แตตอบวา ฉนเขยนเหมอนเดมแตเปล�ยนคาพด มมกลองซมไปท�กระดาษซ�งเขยนวา It’s a beautiful day but I can’t see

it. “มนเปนวนท�สวยงามแตฉนมองไมเหนมน”

โฆษณาน �ตองการส�อวาอยางไร ?

คาพดแรกเปนคาพดมาจากคนตาบอด แต ประโยคท�สองมาจากมมมองของคนตาด มนจงโดนใจ

การท�เราส�อสารจากมมของเราซ�งเปนคนผลตแอปพลเคช�น แตถาเราทาจากมมมองของผใช ผใชจะเขาใจไดงายกวา เราตองไมคด UX จากมมคนทาแตเราคดจากมม User




36

3. The Fundamentals

พ �นฐานท�สาคญในการทา UX ม 4 ขอ ไดแก

3.1 All the interaction occur through the presentation

พยายามแสดงทกอยางข �นมาบนหนาจอ อยาซอนไว ตวอยางเชน เวลา minimize แอปพลเคช�นบน Mac มนชวย

ส�อสารวามนไปอยท�ไหน ทาใหเราหาเจอเม�อตองการจะแอปพลเคช�นอกคร �ง หรอเวลากด delete mail มนจะถกดดเขาไป

ท�ถงขยะ

3.2 Inform Users พยายามบอกใหร หลายอยางท�ใสไปผใชไมรสก แตถามนหายไปเขาจะรสกวามนหายไป ถาไปถาม

คนใชเขาจะไมร ดงน �นเราจะไมถามเขาตรงๆ เราจะตองคดเอง

เม�อดงจอข �นจะรวามอะไรอยขางใต




37

แสดงใหผ ใชเหนวา Toolbar มาจาก Applications

ถาทาไมไดกปลอมมนข �นมา เชน network ตองมเวลาท�

เช�อมกนกอน แอปพลเคช�นจะมการทาภาพเสมอนวามการ

loading ท �งๆ ท�ไมไดดาวนโหลดจรง การสรางภาพข �นมาจะชวยให

ผใชรวาเกดอะไรข �น

3.3 Make organizational system clear

ทาใหชดเจนเดาได ทาโครงสรางการใชงานใหเขาใจงาย ถงแมมนจะนาเบ�อแตผใชไมตองมาเรยนรใหม

Interface ใน iOS และ Android ของ Youtube มแบบแผนท�จดจาไดงายและใชงานงาย




38

3.4 Effectively convey brand message to your audience

ทาใหรวาอยในแอปพลเคช�นเดยวกน

เปดไปทกหนากยงรวาอยท�เดม เปนสไตลเดยวกน คงโครง หรอสเดมเอาไว




39

Wireframe layout ของแอปพลเคช�น

เม�อเรารพ �นฐานของการทา UX เราออกแบบแอปพลเคช�นไดงายข �นโดยการ Wireframe กอนท�จะทาแบบ

ตวอยางใน Photoshop การวาดออกแบบรางออกมาเพ�อส�อสารกอน จะชวยใหกระบวนการปรบแกทาไดงาย

Wireframe จะไมพดเร�อง design icon จะเปนการใสโครงไวกอน ควรมการใสกรอบ ใส brower ดวย เพราะตอน

ท�เหนใน browser กบนอก browser จะแตกตางกน การรางแบบ low -fi จะทาวาดไดเยอะ high-fi จะมรายละเอยดเยอะ

ส�งท�เราพยายามทาคอใชพลงใหนอยท�สด อาจจะยงไมใสส รอคอนเฟรมกอน (low - fidelity ; มความแมนยาสง / high –

fidelity ; มความแมนยาต�า)

ตวอยาง

ตวอยาง Wireframe ลาดบการเขาสหนาการใชงานเวบไซต

ตวอยาง Wireframe ท�ใชในการส�อสารกบผ เก�ยวของกบโครงการ




40

การออกแบบไว 2 ลกษณะ เพ�อใหเลอก

ตวอยาง Wireframe ท�ทาข �นโดยใช Photoshop และเปนแอปพลเคช�นช�วคราว

My act แอปพลเคช�นของ NECTEC แอปพลเคช�นน �สรางมาเพราะมความเช�อวา ถาคณขยบตวเกนคา BMR

(Basal Metabolic Rate) คณจะมสขภาพด

Wire frame ผานการปรกษาระหวางลกคา และ developer จนถง draft สดทาย

การแกรปแบบใน Photoshop เพ�อใหไดรปแบบท�ถกในทาไดงายกวาทาแอปพลเคช�นจรง




41

กจกรรมท� 15 Workshop วาด Wireframe ( 20 นาท )

กตกา : ชองแรก วาดเพ�อส�อสารกบลกคา - วาด free style

ชองสอง ภาพเพ�อส�อสารกบ developer สรางเคาโครงใหทาตอ กาหนด วาดรปส�เหล�ยมได 20 รป

ชองสาม ภาพแอปพลเคช�นท�เรามอยในใจ เราตองรวาอะไรท�สาคญท�สด กาหนดวาดรปส�เหล�ยมได 3 รป

(ใหใชปากกาหวท�เตรยมมาให จะชวยใหไมเผลอลงรายละเอยด )




42

4. Design for Platform การออกแบบโครงรางการใชงาน

4.1 Navigation

iOS ไมม back มแตHome (ป มตรงกลาง)

Android ม up (ยอนกลบไปท�โฟลเดอร) และ back

สอง platform ไมเหมอนกน อยาเอาไปใชดวยกนเพราะผ ใชคาดหวงวธการใชท�คนเคย




43

4.2 Tab

iPhone – tab อยดานลาง

Android – tab อยขางบน เม�อจอเอยง tab จะไปอยกบโลโก

Tab บน Window Phone




44

4.3 Icon

ขอกาหนดของ iOS ใหไอคอนเปนป มไอคอน แต Android ใหเปนรปวตถ

แหกกฎรปแบบไอคอนบน iOS ไมคอยดเพราะคนไมคนเคย แตบน Android คนแหกกฎเยอะ แตพอหลงๆคนก

เร�มตามกฎมากข �น ทาตามกฎไดจะดกวา

แหกกฎ - เมน iOS กาหนดใหมรปพรอม text สวน Android ใหเปน text แต Dropbox ไมม text เลย

Instragram เปนแอปพลเคช�น แรกๆท�แหกกฎ กฎของ tab คอ กดแลวตองอยหนาเดม

กลองไมใช tab แตเปน Actionจงใสสแตกตาง




45

ลกษณะการใชงานท�แตกตางกนของอปกรณ -Tablet vs. smart phone ตางกนอยางไร

องคประกอบทางกายภาพมสวน แตไมใชสวนหลกในการออกแบบ ส�งท�เปนปจจยหลกในการออกแบบ คอ

พฤตกรรมของผใช Tablet คอนาทท�ใชสบายๆ คอยๆ ด มอถอคอหยบเขาหยบออก

พฤตกรรมการใชท�แตกตางกน

Ebay บนเวปไซตและ Desktop

Ebay บนมอถอเนนขอมล update บน Tablet คอคอยๆ เลอกดของท�จะซ �อ

คอนเซปตของเวปไซต คอคลกแลวเปล�ยนหนา แตใช desktop ทาอะไรไดเยอะกวา สวนเวบไซตท�ดบเบลคลก

back and drop ได เราเรยกวาแอพลเคช�น ท� run บน browser




46

รปแบบ interface บน Mac และ Windows

ถาเขามาแลวกไป ไมไดตองการใชงานนานๆ อยาใหเขาตองเรยนรเยอะ ผใชคาดหวงฟอรมท�คนเคย ระหวาง

Mac และ Windows ทาตามฟอรมใหเหมาะสมอยาใหผใชตองสบสน เวลาท�ทาแอปพลเคช�นเรารวา ท�เราทาออกมา

ไมใชเวอรช�นท�ดท�สด เราทาเปนกระดาษออกมาแลวลองทดสอบเปนระยะ ทาแอปพลเคช�นใหเสรจแลวหวงวา

ผใชจะชอบเปนความผดมหาศาล

5. Kaisen การพฒนาอยางตอเน�อง

วงจรการพฒนาผลตภณฑ

เม�อผลตแลวจะตองมการประเมนผลและเกบรวบรวมขอมล นามาพฒนาปรบปรงผลตภณฑใหดมากย�งข �น




47

ตวอยาง

พฒนาการของ Facebook

version2008 - ปญหาคอมเมนเยอะมาก

version2009 -แกปญหาโดยการเอา dashboard มาใช แตปญหาคอ New Feed ถกลดความสาคญลงไป

version2011 - เปดมาเจอ new feed เลย ทาหนาตาใน iOS กบ Android เหมอนกน มแฮมเบอรเกอรอยมมบน

ซาย ซอนเมนเอาไว

Version 2013 - เปล�ยนรปแบบการ chat กอนการสงมอบ feature ทกอนจะถกนามาทดสอบในโปรแกรมจาลอง

ในเคร�องของบรษท (facebook )กอนท�จะ run ออกไป feature พรอมปดพรอมเปดตลอดเวลา แกปญหาการ

เปล�ยน feature ไปแลวอยากจะเปล�ยนกลบคน

สดทายเอาแฮมเบอรเกอรออก (ไอคอนท�มลกษณะเปนขดสามขด) ใส search ไปแทน

พฒนาการ Google version ตางๆ ต �งแตอดตคนถงปจจบน




48

ในการพฒนาแอปพลเคช�น เรามภาพของส�งท�ดท�สดเอาไวกอนได แตไมจาเปนตองทาไปถงจดสงสดในคร �งเดยว

เราสามารถผลตและเกบ feedback และพฒนาไปเร�อยๆ เชน Group On เปนบรการคปองลงราคาสนคา จะมแพกเกจให

เลอกลงทะเบยนเพ�อรบสวนลด เชน ถามคนซ �อพซซา 20 คน จะซ �อไดในราคา 50% เม�อเร�มตน เขาไมไดเร�มจากการ

เปดเวปไซต แตเขาเร�มจากอเมลลกอน โดยการใช mail list ทาใหเขารจก User ม feedback กลบมาวาตองม deal

ประเภทไหนคนถงจะอยากซ �อ

สรปความเขาใจ ความแตกตางระหวาง UX และ UI

ส�งท�เสนอท �งหมด

User experience

ประสบการณท�ผ ใชไดรบ – ส�งท�ขาย

User interface – ส�งท�เปนพ �นผวปฏสมพนธกบผ ใช

ชอนคอส�งท�เขาสมผส ชอนกตอง support สนคาของเรา

พ �นท�เกบขอมล

ศนยรวมเกบขอมล




49

ประสบการณผใชหลายๆแบบ หลายรสชาต

คดถง UX กอน UI จะตามมาเอง

workshop : user experience (ux) and user interface(ui) · workshop : user experience (ux) and user...

Documents