workshop : user experience (ux) and user interface(ui) · workshop : user experience (ux) and user...
Post on 02-Aug-2020
68 Views
Preview:
TRANSCRIPT
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 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
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
2
กจกรรมท� 2 กจกรรม Check in : แนะนาตว - ฉนคอใคร / คาดหวงอะไร / มความตองการเรยนรเร�องอะไรบาง
คาตอบของผ เขารวม
แบงค อยากไดความรมาพฒนาตวเองตอ เพ�อจะรวา user ตองการอะไร
มารค อยากรวาเทคโนโลยไปถงไหนกนแลว
วาน อยากรวางานดานน �เปนส�งท�เราชอบจรงหรอไมจะไดตดสนใจเรยนตอได
พชร อยากเรยนรความตองการของผใช
ม �ง อยากมาเรยนรอะไรใหมๆ UI / UX คออะไร
เจแปน เรยนรวาจะออกแบบหนาตาส�ออยางไรใหผใชอยากใช
คาดหวงวาเราจะพยากรณพฤตกรรมผใชอยางไร
บอย อยากใหแอปพลเคช�นเพ�อผ พการทางสายตานาไปใชไดจรง
ภา ทาแอปพลเคช�นเพ�อผ พการทางสายตา ตองการรวาเขาตองการอะไร เอาไปใชอยางไร
เกน ทาเกมทาอาหาร วาดหวงวาทาอยางไรใหเกมเอาไปใชไดจรง คนใชมความสข
ปารค ไมไดเปนโปรแกรมเมอร อยากไดความรใหมๆ มาชวยเพ�อนๆในกลม
ว อยากไดความรใหมๆ
ปาลม ตรวจจบโรคในนาขาว เคยอานหนงสอท�วทยากรเขยน เลยอยากเจอตวจรง เปนคนท�ไมเคยชนกบการ
ใชพวกน �เลยจะทาอยางไรใหผใชเอาไปใชได
บนน� ระบบตรวจจบในนาขาว UI ยงไมมการออกแบบ ทายงไงใหผใชใชไดงาย
แพตต � ลองมาอบรมเพ�อไปปรบใชในโครงงาน ยอมเสนไหมดวยเคม
เมฆ มาเรยนเพราะวาอยากรวาทาอยางไรใหผใชอยากใช
ทาอยางไรผใชใชงาย ใชไดเรว
ตองการเรยนรวธการออกแบบ UI ใหมนนาเลน
โบท ทาอยางไรใหผใชอยากใชงาน ใชงานไดงายข �น
ซน คาดหวง ศกษา UX / UI ไปใชกบโครงงาน
หยก แอปพลเคช�น Scan to Buy ทาสองสวน สวนลกคากบเจาของกจการ ทาบญช หวงวาอยากใหเขาไป
ใชไดจรงตรงตามความตองการ
แอปพลเคช�น Scan to Buy อยากจะออกแบบหนาตาโปรแกรมใหใชงานไดงาย
กาย เปนคนทาเวบไซต คาดหวง ทาอยางไรใหเหนแลว วาว! นาใชมาก
นท ทาส�อการสอนเก�ยวกบหวใจ UI / UX คออะไร
กลมองครกพทกษหวใจ อยากปรบใชทาโปรแกรมใหผใชเขาใจงาย
เอก มาเพ�อจะไดเอา UI ไปปรบใชใหเหมาะ
เมฆ คาดหวงวาจะเขาใจเร�องท�วทยากรจะมาพด
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
3
UX คออะไร
User experience – experience of user ประสบการณท�ผใชรสกตอระบบ
ตวอยาง เปรยบเทยบประสบการณกบตลาดอาหาร
ความรสกเม�อมองรป - พอครวไมมฝมอ / อาหารแชแขง / ไมมคณคาทางอาหาร/ รสชาตเทยม /
อนน �คอตวอยางซอฟตแวรท�ไมด อาหารท�เหนอาจจะไมไดเปนแบบน �แตภาพท�นาเสนอทาใหรสกวาเปนอาหารท�ไมด
เปรยบเทยบ กบภาพท�สองซ�งไมรวาเปนอาหารท�ดหรอไมแตมภาพลกษณท�ด
ความรสกจากการมองรป - อาหารสด / พอครวฝมอด – โภชนาการ – รสชาตด – ดสาหรบเรา
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
4
ไมใชวาอาหาร fast food ไมด แตถาเราจะทากตองใหดดเหมอนรปตอไปน �
เปรยบเทยบประสบการณอาหารกบการใชระบบปฎบตการบนมอถอ
iOS – Apple หรหรา จดเปนคอรส ตองใชงานไปตามท�มกาหนดมาให
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
5
Android – เหมอน fast food มความเปน mass แตกยงดด สรางมาเพ�อใหผ ใชแกไขได ไมชอบอะไรกเอาออก
Window Phone – ประสบการณเหมอน food court มปายบอกทกรานนาทางไปท�ๆ ตองการไดอยางรวดเรว
ได concept มาจากประสบการณในรถไฟใตดน ปายมพ �นสเดยวและมตวอกษรท�ชดเจน
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
6
USER
รจกและเขาใจ user
ส�งแรกท�ตองทาคอเดาเขาใหได แตเราตองจาไววา เราเดา user ไมได การน�งคดอยกบโตะเอาเองเปนการเอา
ตวเราเปนศนยกลาง
ตวอยาง
ผหญงจะชอบหองสชมพ แตเรากแนใจไมไดวากลมเปาหมายเราชอบแบบน �จรงหรอไม
เรารไดแคคราวๆ แลวตองไปทดสอบกบ user
บคคลในภาพเปนผหญงเหมอนกน แตมความชอบและวถชวตท�แตกตางกน
ท �งๆ ท�อาจเปนไปไดวาท �งสามคนอาจมรายไดท�ใกลเคยงกน
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
7
เราพอจะคาดเดาไดวาสาวออฟฟศนาจะมรสนยมอาหารแบบ fast food
สาวมอายท�แตงตวดกนาจะชอบอาหารช �นดมากกวา
ความผดพลาดเกดข �น คอเรามกจะนยามกลม user งายๆ เชน ประเมนจากรายได แต “ความ
ตองการ” ของคนแตละกลมไมเหมอนกน เราควรเดาใหนอยท� สด สารวจความตองการของ user กอนแลวให
user ทดลองใชเปนระยะๆ (เชน iPhone กอนท�จะผลต มการทาตวอยางออกมากอนวาผใชชอบรปทรงและน �าหนกแบบ
ไหน)
Idea workshop
คาถาม : โครงการ / แอปพลเคช�น ของเราอยในหมวดใด?
จรงจง / สนกสนาน - เคร�องเลน / เคร�องมอ (ของใชงาน) / ผ ชวย
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
8
คดทบทวนเพ�อตรวจสอบวา เราทาเพ�อใคร เพ�อความเขาใจของตวเราเอง และผใชจะไดรวาผลตภณฑน �น
ตอบสนองความตองการเขาไดหรอไม ถาไมใชเขาจะไดไปหาส�งอ�น
Positioning of Idea
จรงจง – เคร�องมอ ใสลกเลนใหนอยท�สด เปดเพ�อทางานใหเสรจดวยความรวดเรวแลวปด ทาใหเขาใจงาย
ไมตองทาใหสวย การใสลกเลนทาใหโปรแกรมโหลดชา ตวช �วด คอ ถาเขาอยนานแสดงวา แอปพลเคช�นหวย
ตวอยางเชน calendar, email
เคร�องมอ – สนกสนาน เพ�อแกปญหาแตไมตองซเรยสมาก เชน to do list หรอ daily cost จดบนทก
คาใชจาย - เนนสวยงาม ใชสนก ไมเนนการทางานเรว ไมเนนการส�อสารมาก ตอบสนองชวตท�ไมไดเก�ยวกบการ
ทางาน ตวอยางเชน แอปพลเคช�น ขายของ (กลม Scan to Buy)
เคร�องเลน – สนกสนาน ทามาเพ�อความสนกสนาน ไมตองทาใหเสรจ แอปพลเคช�นเพ�อการศกษาบางอนกอย
หมวดน � ไมไดตองการใหรเยอะ ใหซมๆ เขาไป
เคร�องเลน – จรงจง โปรแกรมเลนวดโอ เขาถงส�อ ดรปภาพ เขาไมไดจรงจงกบแอปพลเคช�น แตเพ�อเขาถง
เน �อหา ตวช �วด คอเขาอยกบแอปพลเคช�นนอยมากแตเขาถงเน �อหาเรวท�สด เชน Youtube
ผชวย – แอปพลเคช�นท�ไมไดแกปญหาเอง แตเปนเคร�องมอท�ชวยให user นาไปแกปญหา เชน เขมทศ อณหภม
แอปพลเคช�นสาหรบคนตาบอดซ�งเปนแคเคร�องชวย ใชแลวเหมอนไมไดใชแอปพลเคช�น
จรงจง ไมตองเนนสวยงามใชในการทางาน
สนกสนาน ใชแลวเบกบาน – ใชเวลาพกเท�ยง เวลาวาง
กจกรรมท� 3 ปรกษากบสมาชกในกลมวาผลงานของตวเองจดอยในประเภทใด ตาม Positioning of Idea เลอกเพยง
หน�งประเภทเทาน �น
ชวนคด เกมสอนภาษาองกฤษ ตองคดใหชดวาเอาไวสาหรบคนท�จะสอบโทเฟลหรอใชเลนๆ ตอนปดเทอม อาจจะตอง
ตดใจวาจะทาแอปพลเคช�นน �ใหใคร ไมเชนน �นอาจไมมคนเอาไปใชเลย
ชวงเวลาถามตอบ
(กลม ZombiO นายซอมบ �กบเคมท� รก ซอฟตแวรเพ�อการเรยนรเร�อง สารชวโมเลกล)
ถาม : ไมแนใจวาแอปพลเคช�นของกลมตวเองจดอยในกลมใด เปนส�อการเรยนรวชาเคม สารชวโมเลกล ไมรวาจะอย
จรงจงหรอเขามาเลนแบบสนกสนาน
วทยากรถามผเขารวมในหอง : เปดไปคดวาจะเจออะไร?
ผเขารวมตอบ : เจอความรกอน อยากยดอะไรกยด ยดพ �นฐาน
วทยากรถาม : มนตองเกดความรสกอะไรกบเรา เราถงจะยอมไปดาวนโหลดมาใช
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
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 ของเรา ถาคดไมชดจะขายไมได”
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
10
กจกรรมท� 4 วเคราะห User ของแตละกลม
ผลกจกรรม
Monster Land เกม RPG เดกผานการดชองเกาการตน เลนเกมประเภทน �อยแลว มประสบการณ
การตนแฟนตาซตอยอดประสบการณเดม
Scan to Buy เปนคร นกเรยนภายในโรงเรยน คนท�ไมคอยมเวลาซ �อของตามหาง
องครกษพทกษหวใจ นกเรยน ม.ปลาย ตองเรยนเก�ยวกบโรค ระบบหวใจ ใชตอนวาง (ใครจะมาใช
แอปพลเคช�นโรคหวใจตอนวาง ? นกเรยนจะเรยนไปสอบ / คณยายเปนโรคหวใจ / คนท�สงสยวาเปน
โรคหวใจ? )
1.1.3 ไปหามาวาเปาหมายในการเขามาหาคอนเทนทของเขา มาจากความตองการอะไร (understand their
need and goal)
เขาใจวา ส� งท� ผใชตองการ มรปแบบ หรอ หนาตาเปนอยางไร และนาไปเพ�อใชประโยชนหรอ
แกปญหาอะไร ถาเราเขาใจเชนน�นกจะทาใหสามารถออกแบบผลงานไดเพ�อนาไปใชตอบสนองความตองการ
ไดอยางแทจรง เชน สมมตวาคณยายตองการสะพานขาม จะตองการสะพานแบบไหนท�เหมาะสมกบผใช
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
11
ผดาเนนการกอสรางอาจจะเสนอสะพานหลายๆ แบบใหคณยาย แตไมมอนไหนท�เหมาะกบความตองการ
สดทายแลวไดสะพานหวยๆ มาหน�งอนดวยเหตผลท�วา มการเปล�ยนแบบจนไมมเงนจะทาแลว เปรยบเสมอนคนทาชอบ
โทษ User วาเปล�ยนแลวไมสวย ถาเลอกอนแรกกสวยต �งแตแรกแลว แตเราไมเคยถามไปวาเขาตองการอะไร ในความเปน
จรงเขาอาจจะไมตองทาสะพานกได เพราะมสะพานอยแลวใกลๆ ท�ใชได หรออาจจะแกปญหาไดโดยไมตองใชสะพาน
“อยาแนใจวาเราเดาถก แตตองไปถามความตองการท�แทจรงของเขา”
1.1.4 เขามความสามารถในการอดทนอยกบแอปพลเคช�นของเรามากแคไหน (understand their ability)
ผใชแตละกลมมความสามารถในการใช software ไมเหมอนกน เชน กลมท�ตองการใชเพ�อประกอบอาชพ ขอให
สามารถนาไปใชงานไดอยางท�ตองการ ไมวาจะตองไปเรยนหรอศกษาวธใชจากคมอกสามารถลงทนลงแรงทาได แตกลมท�
ตองการใชเพ�อเปนงานอดเรก อาจตองการแคไดใชโปรแกรมท�ใชไดงาย ไมยงยาก ไมตองเรยนรมากนก
ตวอยาง โปรแกรมแตงภาพบน iOS
Less sophisticate
iPhoto เปน home use ใชนอกเวลา ป มนอย
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
12
More sophisticate
Aperture เปนโปรแกรมจรงจง ใชสาหรบมออาชพ กลมน �ยนดเรยน เปาหมายคอทางานไดเรว
“UX ไมไดแปลวาทา software ใหงาย แตใหเหมาะกบการใชงาน”
กจกรรมท� 5 วเคราะห ability ของ user โดยใหเวลา 3 นาท
1. user ของเราตองการอะไร
2. ม ability (ความอดทนการเรยนรส�งใหม ทกษะมอยในการใชงานระบบ) มมากนอยแคไหน
ชวงเวลาถามตอบ (ก ลมอง ค รก ษพท ก ษห ว ใจ – ซอฟตแว ร เพ� อการเ รยน รการท า งานของห ว ใจและโรคห ว ใจ )
ถาม : เกมของเราตองใชขอมลเยอะ ในการศกษาทาอยางไร
ตอบ : การผลต Software มปญหาน �เยอะ ทางแกคอ ของเราคลายๆ กบเกมอะไร กทาใหมนคลายๆ กน กจะใชไดงาย
ข �น ทาใหเหมอนของท�เขาเคยเลน ทาแหลงการวาง item ป มกดแบบเดยวกน
ถาม : กลมเรามผใชเปนอาจารยและนกเรยน ตองเจาะจง user เดยวหรอไม?
ตอบ : อาจจะมหนา interface ท�แยกกน / เวบไซตน �เปนเวบไซตสอน จะตอง define วาเปนแอปพลเคช�นท�ใหนกเรยน
เรยนดวยตนเอง หรออาจารยเอาไปใชประกอบการสอน และตองเลอกวาเปนนกเรยนหรออาจารยประเภทไหนท�
เอาไปใช เชน มแอปพลเคช�นท�ไดมการผลตข �นแลว เปนแอปพลเคช�นท�เอาไวดรายละเอยดของกระดกและ
กลามเน �อ โดยมการออกแบบมาเพ�อใหใชคนเดยว แตถาเขาจะเอาไปสอนกไมตองแครมาก
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
13
ถาม : ถาเราทาใหใชงายใกลเคยงโปรแกรมอ�น แลวแตเขาเลอกจะไมด แตจ �มไปม�วๆ เปนเพราะอะไร?
ตอบ : เปนธรรมดาท�เขาจะใชวธการท�เขาเรยนรจากแอปพลเคช�นอ�นแลวมาใชกบแอปพลเคช�นเรา เชน เม�อตองการ
เซฟ ผใชจะมองหารปแผนดสก ท �งๆ ท�ปจจบนไมมใครใชแผนดสกเหมอนรปในไอคอนแลว แตถาเขาไมเคยใชเขา
กจะไมร เชน ถาผใชเคยใช Microsoft Word หรอ Excel เขากจะจามาแบบน �น อยางป มกากบาท เรารวาเปนการ
กดออกจากโปรแกรม แตคณปาท�ไมเคยใชอาจจะเขาใจวาหามกดป มน � เราอาจจะตองออกแบบเปนรปประต
เคยเอา iPad ไปใหคณปาใช ใหเขาคลกเพ�อเปดรปเขาทาไมได แตซมกบสไลด เขาทาไดเลย เขาดใจมากขนาดท�
เขาพรอมท�จะซ �อเลย ไมใชวาเขาไมมกาลงซ �อแตเขาไมแนใจวาจะใชได
----------พกเบรก 15 นาท----------
กจกรรมท� 6 ชมวดโอ โฆษณาของผลตภณฑ Dove - Dove Real Beauty Sketches
เน �อหาเปนการวาดรปผหญงโดยมนกสเกตภาพมออาชพน�งอยในหองและจะวาดภาพตามคาอธบายโดยไมเหน
หนาตนแบบ มการจดใหผหญงเขามาในหอง น�งลง แลวบอกวาตวเองหนาตาเปนอยางไร นกสเกตภาพจะวาดตาม แลว
ใหคนท�สองท�เดนสวนเขามาในหอง บอกวามองเหนคนแรกหนาตาเปนอยางไร ผลปรากฏวาภาพท�วาดออกมาโดยคาบอก
เลาของคนอ�นจะสวยกวาท�เจาตวอธบายลกษณะของตวเอง
ถาม : คดวาคนทาโฆษณาอยากบอกวาอะไร
ตอบ : คณคดวาคณสวยกวาท�คณคด
วทยากร ผมเขาใจวาเขาตองการสะทอนวาจรงๆ แลวคนมกจะมองขอเสยของตวเอง แทนท�จะมองดานท�ตวเองมด ในเชง UX โฆษณาน �สะทอนใหเหนวา user หลอกเราเสมอ เขาไมบอกเราตรงๆ เพราะเขาไมรวาเขาอยากไดอะไร เขาจะบอกส�งท� ฝงอยในใจ ส�งท� นาจะเปน แตเขาไมรวาเขาอยากจะไดอะไร วธการจรงๆ ท�จะรไดคอการทดสอบ ไมใชการถาม การท�จะรวาเขาตองการความซบซอนมากหรอนอย เราตองลองทาแลวไปทดสอบวาเขาตองการแบบน�นจรงๆ หรอไม
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
14
1.2 เขาใจแอปพลเคช�น หรอผลตภณฑท�ตวเองจะทา
1.2.1 Core Value
เม�อเราเหนแลววา กลมเปาหมายเรามความตองการท�หลากหลาย การตดสนใจสดทายตองใชตวเราเอง เราเลอก
วาเราจะทาใหใครใช โฟกสท�คณคาหลกและจดแขงของเรา เราเลอกส�งท�เราทาไดดมากกวาโฟกสไปท�ความตองการของ
ผใช เราเช�ยวชาญอะไรกเปนแบบน �น ถาเราไมไดตอบสนองความตองการของ user เขากจะไปหาแอปพลเคช�นอ�น เชน ถา
เราผลตเน �อหาเคมเบ �องตน เม�อเขาตองการแบบ advance เรากตองปลอยเขาไป
กจกรรมท� 7 คด Core Value ของผลตภณฑของกลมตนเองวาคออะไร ? อยในระดบเทาไร (level)
อะไรเปนขอโดดเดนมากท�สด
เราตองร Core Value ของเรา เพราะเม�อเราม Request มาจาก User เราจะหลดไปจากส�งท�เราเช�ยวชาญไดงาย
เม�อเราเขาใจ value ของเรา เม�อเราทาแอปพลเคช�นของเรา เราสงมอบการแกปญหาใหลกคา ไมใชการให
feature เชน เม�อมบรษทมาจางใหทาแอปพลเคช�น น�เปนส�งท�สาคญมาก เราตองคดเลยวา ผใชตองการอะไร ดกอนวาผใช
มปญหาอะไร แลวจะแกปญหาใหไดอยางไร ไมใชเร�มดวยการคดวาควรมอะไร เชน แอปพลเคช�นเคม ทาเพ�อตอบโจทย
ปญหาวา ทาอยางไรใหสอบผานวชาเคม อยาเพ�งไปคดวาตองมอะไรบาง แตใหคดวาเขามปญหาอะไร บางคร �งปญหา
ของเขาคอเบ�อมาก เขาจงมาใชแอปพลเคช�นแกเบ�อ
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
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 รวาแอปพลเคช�นของเขาไมไดใหมออาชพใช จงทมเวลาในการทาใหนาใชโดยทาใหด
สวยงาม
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
16
ตวอยางท� 2
Microsoft Word ทมเทเวลากบการเปล�ยนสเพ�อคน 20% แตคนท�วไปไมเหนการเปล�ยนแปลง เวอรช�นตอมาม
การเปล�ยนแปลงชดเจน เพราะเขารวาตองเพ�อคน 80% เขาจงพรเซนตมนออกมา เปล�ยนเมนเปนรปภาพ คนกเร�มใชงาน
ฟงกช�นท�ซอนไว
การทมเทเวลาไปกบการทา feature ท�ไมจาเปนทาใหเกดปญหา...
1) มโอกาสเกดขอผดพลาด (bug)ไดมากข �น
2) ใชทรพยากรมากข �น
3) ยงยากตอการเขยนโปรแกรม
4) ส �นเปลองเวลาในการพฒนาโปรแกรม
5) เสยโอกาสในการพฒนาสวนท�จาเปน
Your Money Pro
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
17
�.� เขาใจ Market’s Needs
กจกรรมท� � วเคราะหความตองการของตลาดในหมวดการใชงานท�แตกตางกน
Column ดานซาย คอ ลกษณะของ Feature
High performance ประสทธภาพการใชงาน
Response ความไวตอการตอบสนองท�เกดข �น
Elegant ความสวยงาม
Attractive เหนหนาน �ชวนใหทาตอ
Easy to use เหนแลวใชเปน
Adaptive มความสามารถในการใชงานไดหลากหลาย (ตวอยางเชน Excel ใชไดทกงานต �งแตทาบญช
เอกสาร หรอแมกระท�งวาดรป)
Compatible เวลาทางานเสรจแลวสงไปใหคนอ�นดแลวหนาตาเหมอนกน แอปพลเคช�นการเงนจะมปญหา
กบแอปพลเคช�นปกตคอการปดเศษทศนยมไมเหมอนกน
Mobile เอาไปใชตามท�ตางๆได
Accessible เขาถงได คนหหนวกตาบอดใชได
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
18
ความตองการของตลาด
ตารางน �นาจะไมเปนความจรงเพราะสรางมาหลายปแลว ถาส�งท�เราเราคดเหมอนกนกบตารางแสดงวาเราเชย
อนท�ไมนาจะจรงแลวคอ เร�อง high performance สาหรบเกม เพราะเม�อกอนคอมพวเตอรชา เด�ยวน �ทกเกมทางานไดเรว
หมด สวน Attractive, easy to use, response นาจะยงเหมอนกน
ส�งท�ตองโฟกสเก�ยวของชดเจนกบคาแรกเตอรของกลมเปาหมาย ภาคธรกจเนนความจรงจง การใชงานมอ
อาชพไมสนใจวาใชงานงายแตขอใหทางานไดด แอปพลเคช�นสาหรบการทางานไมคอยจาเปนตองดดหรหรา แตถาเปน
แอปพลเคช�นท�ใชในเวลาสวนตวกตองการความสวยงาม
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
19
1.4 Market’s needs
กจกรรมท� 9 ลาดบความสาคญของความตองการของตลาดโดยใสหมายเลข 1-3 ลงไปในแตละหมวดกลมผใชงาน
ตามลาดบความสาคญของ feature
ลาดบการใหความสาคญ
ปกตเราจะม feature ท�คนจดจาไดแคอนเดยว ท�เหลอเปนของแถม แตจรงๆ อนน �ไมใชสตรตายตว แตละประเภท
กมกลมท�มความตองการแตกตางกน ใหเลอกวาอะไรสาคญ ถาทกอยางสาคญ แปลวาไมมอะไรสาคญเลย
การวางแผนจะชวยลดปรมาณงาน ถาทาแอปพลเคช�นแลวไมมคนใช ทาใหมจะประหยดเวลามากกวา
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
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 ข �นมา เราจะสรางรายละเอยดข �นมา เรารชดวาเขาเปนใคร และเพ�อ
ส�อสารกบเพ�อนในทมดวย เราไมใชตวหนงสอเพราะเราอยากใหเหนมนทกวน อยากใหใชทกวน เอาวางไวทกท� เพ�อกระตน
เตอนวาเราสรางแอปพลเคช�นข �นมาเพ�อใคร
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
21
ตวอยาง persona
ตวอยาง interactive persona
Marketing persona มรายละเอยดนอยเกนไป
ตวอยางในภาพ การประชมทมของบรษท Yahoo จะเอาภาพแผนพบ Personas มาวางไว
เพ�อใหทมงาน จตนาการไปในทางเดยวกน และไมลมท�จะคดถง User ตลอดเวลา
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
22
บคคลใน Persona คอใคร?
กราฟแสดงจานวนประชากรสมพนธกบความสามารถในการปรบตวรบส�งใหม
กลม First Mover มจานวนไมมากนก เปนกลมคนท�พรอมจะใช หรอ เปดรบเทคโนโลยหรอนวตกรรมใหมอยาง
รวดเรว หากธรกจสามารถทาใหคนในกลมน �มความสนใจในผลตภณฑ กจะทาใหสนคาเปดตวสตลาดได
กลม Follower เปนกลมคนท�ใหญท�สด จะปรบเปล�ยนเม�อเทคโนโลยมผใชมาแลว หรอเปนท�นยม
กลม Don’t move มจานวนไมมาก เปนกลมท�ไมยอมปรบตวจะใชเทคโนโลยหรอผลตภณฑชนดเดมไปจนกวา
จะไมสามารถหาของชนดน �นไดอกแลว
iPhone เขามาตลาด สนใจแค 1% คอ First Mover เพราะเช�อวาหากกลมน �เร�มใชผลตภณฑกจะมกลม Follower
ตามมา แอปพลเคช�นของเราตองการ User แบบไหนท�ตอใหแอปพลเคช�นของเรามนไมดกจะใชหรอเลน
ส�งท�เราจะทาคอเอา market target มา intersect กบ first mover จะได persona ของเรา
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
23
กจกรรมท� 10 สราง Persona : คดถง software ของตวเอง และคดถงคนท�นาจะมาเปน user ของเรา วาดลงใน
กระดานท�จดไวให
รป ช�อ อาย
ท�อย อาชพ ประวต
บคคลน �นๆ มเงนเกบเปนก�เปอรเซนตของรายได มพฤตกรรม นสย ความชอบเปนอยางไร
ผลการทากจกรรม
โครงการการพฒนาประสทธภาพการเคล�อนท�ของแบบจาลอง Airboat ดวยการเคล�อนเชงมม
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
24
โครงการ Scan to Buy
โครงการ ระบบตรวจจบโรคนาขาวดวยเทคโนโลยประมวลภาพ
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
25
โครงการ องครกษพทกษหวใจ
โครงการ Monster Land
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
26
1.4.2 Problem อะไรคอปญหาของ persona
สงเกตวาเม�อเราเอารปภาพเขามาชวยจะทาใหเราเหนภาพของเขาไดชดเจนข �น และพอคนในทมเหนเปนคน
เดยวกน เวลาท�ทางานจะทาไดงายข �น จากน �นเร�มแปะ post it ไปวาปญหาของเขามอะไรบางและ ทางท�เราจะแกปญหา
ใหเขาไดคออะไร
ตวอยางการระดมปญหา
กจกรรมท� 11 ระดมปญหาของ persona ท�ไดกาหนดไว
ใหแตละกลมโหวตของกลมตวเองและกลมเพ�อนสาหรบปญหาท�คดวาเปนปญหาสาคญ แตละคนโหวต
ไดคนละ 2 ขอ (หรอถาไมเหนวาเปนปญหากไมตองโหวตกได)
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
27
ผลกจกรรมท� ��
การวเคราะหปญหาของ user โครงการ Easy Phone for Blind
1.4.3 Possibility
หนทางการแกปญหา
ส�งท�คนอ�นโหวต คอ ส�งท�คนอ�นอยากบอกวาเขาตองการใหเราทาเอาเปนขอมลในการตดสนใจ นามาเปนเพยง
ขอมลประกอบ สดทายแลวอยท�ความตองการของ user ตวจรง และตวเราตองการอะไรมากกวา
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
28
ตวอยางการคดหาความเปนไปได
เพราะวา...พ�สมหมายโดนเพล �ยกระโดดในไรนา
เปนไปไดไหม.... ท�เราจะรกอน
เพราะวา... สอบตกมาสามคร �งแลว
เปนไปไดไหม... วาจะสอบผาน
เพราะวา... นองสมชายเปนโสด
เปนไปไดไหม... ท�จะมแฟนภายใน 1 เดอน / หรอเปนโสดอยางมความสข
....เปนไปไดไหม.... ตองเปนส�งท�วดผลได
กจกรรมท� 12 นาปญหาท�ไดระดมไวแลวในกจกรรมกอนหนา นามาคดตอถงความเปนไปไดในการหาทางออก
ตวอยางผลงานของผเขารวม
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
29
การระบปญหาใหชดกจะหาทางแกปญหาได ไมใชเร�มดวยการต �งทางออกกอน การท�เรากาหนดโจทย
ได ทาใหเม�อเราทาแอปพลเคช�นออกมาแลว เราวดผลได การคดใหชดเจนทาใหเราและคนในทมวดผลไดวา
ส�งท�ทาแกปญหาไดหรอไม ถาไมไดกเปล�ยนไปทาโปรเจคอ�นได นกยอนกลบไปท�แอปพลเคช�นของเราวา
แกปญหาไดตรงจดหรอไม?
1.4.4 Prototype สรางตนแบบสาหรบทางออก
จากขอมลท�เรามท �งหมด ท �งแตการทา persona การหาปญหาและความเปนไปไดสาหรบทางแกปญหา จะทาให
เราพอท�จะทราบวาจะตองทาผลตภณฑ หรอ แอปพลเคช�นท�มหนาตาหรอฟงคช�นการใชงานอยางไรเพ�อใหผลตภณฑ
สามารถนาไปใชไดจรง
2. Great Impression การออกแบบควรใหความสาคญกบความประทบใจแรกท�ผใชพบเหน
2.1 การจดวาง layout เม�อเราออกแบบเวบไซต เราจะคดวาคนเขามาแลวจะมองอยางไรบาง แตในความเปนจรงไมเปน
เชนน �น
ตวอยางลกษณะการอานในแบบท�ไดออกแบบไว กบ ลกษณะการใชงานจรง
ถาเรารแบบน �เรากจะไมใสพลงไปกบขอความมากเกนไป เราจะไปใสรป เปล�ยนยอหนา หรอเนนตวอกษร ใสส
ทาตวหนา ในสวนท�สาคญ เพ�อใหคนท�สนใจเขาจะไดอานตอ
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
30
ตวอยางการใชสและขนาดตวอกษรเพ�อทาใหนาอานและนาสนใจมากข �น
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
31
2.2 ไอคอน (icon)
First impression ของแอปพลเคช�น คอ ไอคอน วธการท�งายท�สดคอตดโลโกมาใสเปนไอคอน แตปญหาคอ
เม�อไอคอนอยในตาแหนงท�มขนาดเลกลง ผ ใชจะมองไมออก ดงน�นตองออกแบบใหเม�อเลกท� สดแลวกยงตองมอง
ออกวาคออะไร การเอาโลโกไปใสท�อๆ ไมเวรก
ลกศรสเหลอง ไอคอนเม�ออยในตาแหนงท�เลกท�สด
เอาโลโกมาเปนไอคอน เลกแลวมองไมเหน
ออกแบบใหมทาใหเหนไดชด
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
32
ตวอยางการออกแบบโลโกและไอคอนท�แตกตางกน
ไอคอนถกคดข �นโดยคานงถงโทนสท�เหมาะสมกบพ �นหลงหลายๆ เฉดส
2.3 หนาแรกของแอปพลเคช�น
เปนพ �นท�ท�มความสาคญอยางย�งเพราะเปนประสบการณแรกท�ผใชพบเหนเม�อเขาสระบบการใชงาน
ตวอยางแอปพลเคช�นตางๆ IN หนา update สาคญท�สดแตเขาเอาไปซอน เวอรช�นตอมามการพฒนาเอาส�งท�สาคญ
ออกมาโชว
Interface กอน และ หลงปรบปรง
ส�งท�เปนหวใจสาคญของ social media คอ update ไมใชเมน
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
33
เราอยากใหคนท�เขามาในแอปพลเคช�น หรอเวบไซตจาอะไรได ตองเอาส�งท�สาคญท�สด ณ ขณะน�นข �นมากอน
หนาเวบไซตไซตของ iPhone นาเสนอสนคาใหมลาสด
เวบไซตไซตของ Sony นาเสนอสนคาท�ตองการโปรโมท
เวบไซตของซมซงเขามาไมรจะดอะไรกอน ขอความท�สาคญท�สดอาจจะสงไมถงมอผอาน
ถาเราทาเวบไซตโปรเจคเรากตองเลอกวาอะไรสาคญท�สดในโครงการเรา
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
34
Story board
ตอนน �เราได persona problem solution แลว (ถงแมวาอาจจะไมตรงกบปญหา ) ในส�งท�มอยมารอยเรยง วา
ผลตภณฑของเรา ผใชคอใคร เขามปญหาอะไร และผลตภณฑของเราจะชวยแกปญหาไดอยางไร วธการส�อสารท�ดท�สด
ในการนาเสนอโดยใช Story board
โครงสรางของ story board ใหเหนภาพรวมกอน หลงจากน �นเจอปญหา บอกวธการจดการปญหา สาเรจ ไดรางวล
iFound เน �อเร�องมคนเจอตกตาหม ถายรปลงแอปพลเคช�น และคนกมาเจอตกตาหมท�ทาหายไป
เขาพดเร�องหนาจอนอยมากแตอานแลวรวาแอปพลเคช�นของเขาใชเพ�ออะไร
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
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
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
36
3. The Fundamentals
พ �นฐานท�สาคญในการทา UX ม 4 ขอ ไดแก
3.1 All the interaction occur through the presentation
พยายามแสดงทกอยางข �นมาบนหนาจอ อยาซอนไว ตวอยางเชน เวลา minimize แอปพลเคช�นบน Mac มนชวย
ส�อสารวามนไปอยท�ไหน ทาใหเราหาเจอเม�อตองการจะแอปพลเคช�นอกคร �ง หรอเวลากด delete mail มนจะถกดดเขาไป
ท�ถงขยะ
3.2 Inform Users พยายามบอกใหร หลายอยางท�ใสไปผใชไมรสก แตถามนหายไปเขาจะรสกวามนหายไป ถาไปถาม
คนใชเขาจะไมร ดงน �นเราจะไมถามเขาตรงๆ เราจะตองคดเอง
เม�อดงจอข �นจะรวามอะไรอยขางใต
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
37
แสดงใหผ ใชเหนวา Toolbar มาจาก Applications
ถาทาไมไดกปลอมมนข �นมา เชน network ตองมเวลาท�
เช�อมกนกอน แอปพลเคช�นจะมการทาภาพเสมอนวามการ
loading ท �งๆ ท�ไมไดดาวนโหลดจรง การสรางภาพข �นมาจะชวยให
ผใชรวาเกดอะไรข �น
3.3 Make organizational system clear
ทาใหชดเจนเดาได ทาโครงสรางการใชงานใหเขาใจงาย ถงแมมนจะนาเบ�อแตผใชไมตองมาเรยนรใหม
Interface ใน iOS และ Android ของ Youtube มแบบแผนท�จดจาไดงายและใชงานงาย
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
38
3.4 Effectively convey brand message to your audience
ทาใหรวาอยในแอปพลเคช�นเดยวกน
เปดไปทกหนากยงรวาอยท�เดม เปนสไตลเดยวกน คงโครง หรอสเดมเอาไว
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
39
Wireframe layout ของแอปพลเคช�น
เม�อเรารพ �นฐานของการทา UX เราออกแบบแอปพลเคช�นไดงายข �นโดยการ Wireframe กอนท�จะทาแบบ
ตวอยางใน Photoshop การวาดออกแบบรางออกมาเพ�อส�อสารกอน จะชวยใหกระบวนการปรบแกทาไดงาย
Wireframe จะไมพดเร�อง design icon จะเปนการใสโครงไวกอน ควรมการใสกรอบ ใส brower ดวย เพราะตอน
ท�เหนใน browser กบนอก browser จะแตกตางกน การรางแบบ low -fi จะทาวาดไดเยอะ high-fi จะมรายละเอยดเยอะ
ส�งท�เราพยายามทาคอใชพลงใหนอยท�สด อาจจะยงไมใสส รอคอนเฟรมกอน (low - fidelity ; มความแมนยาสง / high –
fidelity ; มความแมนยาต�า)
ตวอยาง
ตวอยาง Wireframe ลาดบการเขาสหนาการใชงานเวบไซต
ตวอยาง Wireframe ท�ใชในการส�อสารกบผ เก�ยวของกบโครงการ
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
40
การออกแบบไว 2 ลกษณะ เพ�อใหเลอก
ตวอยาง Wireframe ท�ทาข �นโดยใช Photoshop และเปนแอปพลเคช�นช�วคราว
My act แอปพลเคช�นของ NECTEC แอปพลเคช�นน �สรางมาเพราะมความเช�อวา ถาคณขยบตวเกนคา BMR
(Basal Metabolic Rate) คณจะมสขภาพด
Wire frame ผานการปรกษาระหวางลกคา และ developer จนถง draft สดทาย
การแกรปแบบใน Photoshop เพ�อใหไดรปแบบท�ถกในทาไดงายกวาทาแอปพลเคช�นจรง
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
41
กจกรรมท� 15 Workshop วาด Wireframe ( 20 นาท )
กตกา : ชองแรก วาดเพ�อส�อสารกบลกคา - วาด free style
ชองสอง ภาพเพ�อส�อสารกบ developer สรางเคาโครงใหทาตอ กาหนด วาดรปส�เหล�ยมได 20 รป
ชองสาม ภาพแอปพลเคช�นท�เรามอยในใจ เราตองรวาอะไรท�สาคญท�สด กาหนดวาดรปส�เหล�ยมได 3 รป
(ใหใชปากกาหวท�เตรยมมาให จะชวยใหไมเผลอลงรายละเอยด )
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
42
4. Design for Platform การออกแบบโครงรางการใชงาน
4.1 Navigation
iOS ไมม back มแตHome (ป มตรงกลาง)
Android ม up (ยอนกลบไปท�โฟลเดอร) และ back
สอง platform ไมเหมอนกน อยาเอาไปใชดวยกนเพราะผ ใชคาดหวงวธการใชท�คนเคย
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
43
4.2 Tab
iPhone – tab อยดานลาง
Android – tab อยขางบน เม�อจอเอยง tab จะไปอยกบโลโก
Tab บน Window Phone
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
44
4.3 Icon
ขอกาหนดของ iOS ใหไอคอนเปนป มไอคอน แต Android ใหเปนรปวตถ
แหกกฎรปแบบไอคอนบน iOS ไมคอยดเพราะคนไมคนเคย แตบน Android คนแหกกฎเยอะ แตพอหลงๆคนก
เร�มตามกฎมากข �น ทาตามกฎไดจะดกวา
แหกกฎ - เมน iOS กาหนดใหมรปพรอม text สวน Android ใหเปน text แต Dropbox ไมม text เลย
Instragram เปนแอปพลเคช�น แรกๆท�แหกกฎ กฎของ tab คอ กดแลวตองอยหนาเดม
กลองไมใช tab แตเปน Actionจงใสสแตกตาง
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
45
ลกษณะการใชงานท�แตกตางกนของอปกรณ -Tablet vs. smart phone ตางกนอยางไร
องคประกอบทางกายภาพมสวน แตไมใชสวนหลกในการออกแบบ ส�งท�เปนปจจยหลกในการออกแบบ คอ
พฤตกรรมของผใช Tablet คอนาทท�ใชสบายๆ คอยๆ ด มอถอคอหยบเขาหยบออก
พฤตกรรมการใชท�แตกตางกน
Ebay บนเวปไซตและ Desktop
Ebay บนมอถอเนนขอมล update บน Tablet คอคอยๆ เลอกดของท�จะซ �อ
คอนเซปตของเวปไซต คอคลกแลวเปล�ยนหนา แตใช desktop ทาอะไรไดเยอะกวา สวนเวบไซตท�ดบเบลคลก
back and drop ได เราเรยกวาแอพลเคช�น ท� run บน browser
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
46
รปแบบ interface บน Mac และ Windows
ถาเขามาแลวกไป ไมไดตองการใชงานนานๆ อยาใหเขาตองเรยนรเยอะ ผใชคาดหวงฟอรมท�คนเคย ระหวาง
Mac และ Windows ทาตามฟอรมใหเหมาะสมอยาใหผใชตองสบสน เวลาท�ทาแอปพลเคช�นเรารวา ท�เราทาออกมา
ไมใชเวอรช�นท�ดท�สด เราทาเปนกระดาษออกมาแลวลองทดสอบเปนระยะ ทาแอปพลเคช�นใหเสรจแลวหวงวา
ผใชจะชอบเปนความผดมหาศาล
5. Kaisen การพฒนาอยางตอเน�อง
วงจรการพฒนาผลตภณฑ
เม�อผลตแลวจะตองมการประเมนผลและเกบรวบรวมขอมล นามาพฒนาปรบปรงผลตภณฑใหดมากย�งข �น
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
47
ตวอยาง
พฒนาการของ Facebook
version2008 - ปญหาคอมเมนเยอะมาก
version2009 -แกปญหาโดยการเอา dashboard มาใช แตปญหาคอ New Feed ถกลดความสาคญลงไป
version2011 - เปดมาเจอ new feed เลย ทาหนาตาใน iOS กบ Android เหมอนกน มแฮมเบอรเกอรอยมมบน
ซาย ซอนเมนเอาไว
Version 2013 - เปล�ยนรปแบบการ chat กอนการสงมอบ feature ทกอนจะถกนามาทดสอบในโปรแกรมจาลอง
ในเคร�องของบรษท (facebook )กอนท�จะ run ออกไป feature พรอมปดพรอมเปดตลอดเวลา แกปญหาการ
เปล�ยน feature ไปแลวอยากจะเปล�ยนกลบคน
สดทายเอาแฮมเบอรเกอรออก (ไอคอนท�มลกษณะเปนขดสามขด) ใส search ไปแทน
พฒนาการ Google version ตางๆ ต �งแตอดตคนถงปจจบน
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
48
ในการพฒนาแอปพลเคช�น เรามภาพของส�งท�ดท�สดเอาไวกอนได แตไมจาเปนตองทาไปถงจดสงสดในคร �งเดยว
เราสามารถผลตและเกบ feedback และพฒนาไปเร�อยๆ เชน Group On เปนบรการคปองลงราคาสนคา จะมแพกเกจให
เลอกลงทะเบยนเพ�อรบสวนลด เชน ถามคนซ �อพซซา 20 คน จะซ �อไดในราคา 50% เม�อเร�มตน เขาไมไดเร�มจากการ
เปดเวปไซต แตเขาเร�มจากอเมลลกอน โดยการใช mail list ทาใหเขารจก User ม feedback กลบมาวาตองม deal
ประเภทไหนคนถงจะอยากซ �อ
สรปความเขาใจ ความแตกตางระหวาง UX และ UI
ส�งท�เสนอท �งหมด
User experience
ประสบการณท�ผ ใชไดรบ – ส�งท�ขาย
User interface – ส�งท�เปนพ �นผวปฏสมพนธกบผ ใช
ชอนคอส�งท�เขาสมผส ชอนกตอง support สนคาของเรา
พ �นท�เกบขอมล
ศนยรวมเกบขอมล
โครงการตอกลาใหเตบใหญ
การอบรมเชงปฏบตการเพ�อเสรมสรางศกยภาพการพฒนาโครงการ และตดสนโครงการรอบท� 2
ระหวางวนท� 4 – 8 พฤษภาคม พ.ศ. 2557
49
ประสบการณผใชหลายๆแบบ หลายรสชาต
คดถง UX กอน UI จะตามมาเอง
top related