Designil https://www.designil.com สอนเว็บดีไซน์ UI UX HTML5 CSS3 WordPress Web Design Sun, 18 Aug 2019 04:55:59 +0000 en-US hourly 1 45426279 EP4 AOMAM สร้างรายได้กับการขาย Icon https://www.designil.com/designil-chats-ep4.html https://www.designil.com/designil-chats-ep4.html#respond Sun, 18 Aug 2019 04:55:49 +0000 https://www.designil.com/?p=8638 Designil Chats สัปดาห์นี้เราได้นำบทสัมภาษณ์จากฟรีแลนซ์ดีไซน์เนอร์อย่าง Aomam มานำเสนอ น้องแอ๋มได้เล่าเรื่องราวการเดินทางในสายอาชีพเกี่ยวกับการทำไอค่อนขาย วิธีการฝึกวาดภาพด้วยตนเอง จะน่าสนใจแค่ไหน ลองมาอ่านและรับชมผลงานของน้อง Aomam ไปด้วยกันค่ะ แนะนำตัวกันก่อน สวัสดีค่ะ ชื่อ อ๋อมแอ๋มนะคะ ตอนนี้ทำงานฟรีแลนซ์ ทำงานเกี่ยวกับ icon และ vector..

The post EP4 AOMAM สร้างรายได้กับการขาย Icon appeared first on Designil.

]]>
Designil Chats สัปดาห์นี้เราได้นำบทสัมภาษณ์จากฟรีแลนซ์ดีไซน์เนอร์อย่าง Aomam มานำเสนอ น้องแอ๋มได้เล่าเรื่องราวการเดินทางในสายอาชีพเกี่ยวกับการทำไอค่อนขาย วิธีการฝึกวาดภาพด้วยตนเอง จะน่าสนใจแค่ไหน ลองมาอ่านและรับชมผลงานของน้อง Aomam ไปด้วยกันค่ะ

แนะนำตัวกันก่อน

สวัสดีค่ะ ชื่อ อ๋อมแอ๋มนะคะ ตอนนี้ทำงานฟรีแลนซ์ ทำงานเกี่ยวกับ icon และ vector เป็นหลักค่ะ ก่อนหน้าเคยทำงานเกี่ยวกับออกแบบ website และ mobile application ค่ะ

ผลงานวาดของ Aomam บน Freepik
ผลงานวาดของ Aomam บน Freepik

เริ่มต้นสนใจการออกแบบได้อย่างไร ชอบวาดรูปมาก่อนแล้วหรือเปล่า

ชอบวาดรูปและออกแบบ มาตั้งแต่ประถมเลยค่ะ ที่บ้านได้สนับสนุนให้ไปเรียนศิลปะตั้งแต่ยังเด็ก แรกๆก็ไม่ได้รู้สึกพิเศษอะไรมากมาย ที่บ้านได้ผลักดันให้ลองไปประกวดวาดภาพระบายสี แล้วเราได้รับรางวัลชมเชยในการประกวด เลยรู้สึกดีกับการวาดรูปตั้งแต่นั้นมา อีกอย่างเป็นคนชอบอยู่หน้าจอคอมพิวเตอร์มาตั้งแต่เด็กแล้วค่ะ

จุดเริ่มต้นช่วงชั้น ป.3 เคยขอรางวัลจากที่บ้านถ้าสอบได้ที่ 1 ของชั้น เป็นคอมพิวเตอร์ จากตรงนั้นเหมือนกลายเป็นการจุดประกายเล็กๆ ให้กับตัวเองตั้งแต่นั้นมา รู้สึกว่าเจ้ากล่องเหลี่ยมๆนี่มันมีอะไรที่สนุก สามารถดึงดูดเราให้สนใจมันได้ตลอดเวลาจริงๆ 

ผลงานวาดรูปของ Aomam
ผลงานวาดรูปของ Aomam

จากนั้นช่วงเรียน ม.ปลาย ตอนต้องเลือกคณะเรียน เราก็มานั่งทบทวนกับตัวเองว่า เราชอบอะไรแล้วเราถนัดอะไร และได้บทสรุปว่า เราชอบคอมพิวเตอร์ เราถนัดงานวาดเขียน แล้วเราก็เลยตัดสินใจจัดลำดับคณะที่อยากเรียน แล้วก็สอบติดคณะออกแบบเว็บและสื่อโต้ตอบ ของมหาวิทยาลัยศิลปากรค่ะ คณะนี้ตรงกับความถนัดของเราทั้งคู่เลย ก็ถือว่าเป็นคนที่โชคดีนิดนึง ที่รู้ตัวเองตั้งแต่เนิ่นๆเลยว่าชอบอะไรต้องการอะไรและคิดว่าตัวเองทำอะไรได้ดี เลยมุ่งตรงไปจุดนั้นเลย

อยากให้แนะนำสำหรับผู้เริ่มต้นหัดวาดรูป

แนะนำให้เริ่มต้นหัดวาดจากรูปทรงง่ายๆ รอบตัวเราทุกสิ่งทุกอย่างเป็นรูปทรง สามเหลี่ยม สี่เหลี่ยม วงกลม ลองมองรอบๆตัวดูจะเห็นว่า icon หรือภาพที่เราจะวาดจะเริ่มต้นจากรูปทรงเหล่านี้หมดเลย เราจะเข้าใจเลยว่ามันเป็นการเอารูปทรงต่าง ๆ มารวมกัน ถ้ายังคงมองภาพไม่ออก ลองเสิชใน pinterest ด้วย keyword ว่า How to draw cute cartoon ขั้นตอนตัวอย่างการวาดพื้นฐานง่ายๆเพียบเลยค่ะ ลองฝึกหัดดูนะคะ

ไม่ยากอย่างที่คิด ต้องฝึกมือบ่อยๆแล้วเราจะสนุกไปกับงานค่ะ

จุดเริ่มต้นการทำงานในสายอาชีพนี้

เริ่มต้นการทำงานเป็นฟรีแลนซ์จาก ความมีช่วงเวลาว่างระหว่างทำงาน ต้องบอกก่อนว่าเคยทำงานประจำมาก่อนที่จะออกมาทำงานฟรีแลนซ์อย่างเต็มตัวนะคะ บริษัทที่เราทำงานนั้นจะมอบหมายงานให้ทำเป็นชิ้นๆ แล้วถ้าเราทำงานเสร็จแล้วรอ comment งานจากลูกค้า บางทีจะมีเวลาว่าง แล้วพอว่างก็เบื่อๆ เลยเปิด illustration แล้วนั่งทำ icon เล่น ตามงานสวยๆใน Dribbble

พอทำแล้วรู้สึกสนุกเลยเกิดไอเดียว่า เราทำแจกฟรีดีไหม ? ทำแบบง่ายๆ เปนสไตล์เราเอง ใช้ keyword ที่คนค้นหาบ่อยๆ แล้วอัพงานลงใน Behance แจกฟรี เป็นการเพิ่มยอด view ใน Portfolio ของเราไปในตัว และนี่ก็คือจุดเริ่มต้น ของเส้นทางอาชีพค่ะ จากนั้นคนก็มาโหลดงานของเราเรื่อยๆ ยอด view ยอดติดตามใน Portfolio เยอะขึ้นจากเดิม ตอนนั้นก็ทำไปสนุกๆ หลังจากนั้นก็เริ่มมีลูกค้า email ติดต่อมาให้ทำงาน icon ให้ ในแบบสไตล์ของเรา ก็รู้สึกตื่นเต้นที่ได้ทำงานกับลูกค้าต่างชาติเป็นครั้งแรก ช่วงนั้นก็จะทำควบคู่ไปกับงานประจำ แบ่งเวลาทำงานฟรีแลนซ์ช่วงหลังเลิกงานเป็นต้นไป

Icon แจกฟรีจาก Aomam บน Behance
Icon แจกฟรีจาก Aomam บน Behance

จุดเปลี่ยนที่ทำงาน Freelance เต็มตัวคือ เริ่มอิ่มตัวกับงานประจำแล้วก็ลองเลยมานั่งทบทวนดูว่าเอาไงดีกับตอนนี้ เพราะงานนอกที่เราทำมันสนุกมากกว่างานประจำที่ทำและไม่กดดันมากเท่าไหร่ เราจะออกจากงานประจำดีไหม จนได้ข้อสรุปว่า “เอาวะ ลองออกมาทำเต็มตัว ลองสักตั้งดูให้มันรู้ไป ว่าจะโอเคไหม ลองทำมันตั้งแต่ตอนนี้ ถ้าไม่โอเคก็ค่อยหางานประจำทำใหม่” เพราะความฝันอย่างนึงของเราคือ อยากทำงานที่เป็นอิสระ อยากทำงานที่ไหนก็ได้ อยากย้ายกลับบ้านเพราะบ้านอยู่ต่างจังหวัด เป็นความคิดที่แล่นเข้ามาในหัวแว๊บนึงในตอนนั้น เราอยากหาทางทำมันให้เป็นจริงให้ได้

เอาวะ ลองออกมาทำเต็มตัว ลองสักตั้งดูให้มันรู้ไป ว่าจะโอเคไหม ลองทำมันตั้งแต่ตอนนี้ ถ้าไม่โอเคก็ค่อยหางานทำใหม่ เพราะความฝันอย่างนึงของเราคือ อยากทำงานที่เป็นอิสระ อยากกลับบ้าน

สรุปแล้วปีนี้ก็ปีที่ 3 แล้วค่ะ ที่ออกมาทำงานฟรีแลนซ์ ยังคงมีความสุขดี ได้ย้ายกลับบ้านเกิด มีอิสระทางเวลา และยังไม่มีความคิดที่จะกลับไปทำงานประจำ 🙂

ความท้าทายของงานที่ทำอยู่ในปัจจุบัน

ความท้าทายก็คือ โจทย์ที่ทางเค้าให้มา จะเป็น icon ที่ยังมีน้อยมากในท้องตลาด แล้วเราต้องมีไอเดียในการคิดแต่ละ icon ออกมาให้ได้ โดยหัวข้อที่ได้รับจะต้องทำประมาณ 40-50 icon/set ความยากมันอยู่ตรงที่ทำยังไงให้ได้ตามปริมาณที่เค้ากำหนดมา และออกมาดี

aomam 04
ผลงานออกแบบ Icon จาก Aomam บน Iconfinder

ภาษาเป็นอุปสรรคหรือเปล่ากับการทำงานในเว็บไซต์กับคนต่างชาติ

ช่วงแรกๆ กังวลกับการเขียน email ในการโต้ตอบกับลูกค้ามาก กลัวเค้าไม่เข้าใจ กลัวอธิบายไม่รู้เรื่อง แรกๆก็ลองหัดร่างเป็นภาษาไทยก่อนตามที่เราต้องการอธิบายลูกค้าว่าเราทำงานยังไง เงื่อนไขเป็นแบบไหน จากนั้นก็เรียบเรียงเป็นภาษาอังกฤษในแบบของเราเอง (ช่วงแรกๆ มีพี่ๆที่สนิทกันคอยช่วยแก้ภาษาให้บ้าง)

หลังๆ ลูกค้าจะถามเราในรูปแบบเดิมๆคล้ายๆกัน เราสามารถนำไปปรับใช้ได้กับลูกค้าท่านอื่นๆ จากที่เคยคุยงานมากับลูกค้าชาวต่างชาติ เค้าไม่มานั่งจับผิดภาษาเราเลย บางทีเรารีบพิมพ์ พิมพ์บางคำผิดแต่ยังคงสื่อสารกับเค้าได้เข้าใจตรงกัน เค้าก็โอเคแล้วค่ะ

อยากให้เล่าวิธีการสมัครการทำงานกับเว็บไซต์เหล่านี้

เริ่มเห็นลู่ทางในการลงงานที่เว็บไซต์ขาย iconโดยตรง เราก็เสิจหาดูหลายๆเว็บ แล้วก็ไปสะดุดที่เว็บ Flaticon ว่ามีรับสมัคร Exclusive icon designer ตอนนั้นก็ยังไม่รู้อะไรมาก ก็เลยสมัครไปโดยยื่น Behance Portfolio ที่มีไป จากนั้น เค้าก็มี email ตอบกลับมา แล้วก็มีข้อสอบให้ทำให้เราทำ icon ตามโจทย์เค้าที่ให้มา

ในใจก็ลุ้นเราจะผ่านไหม สรุปเราผ่านงาน แล้วก็ได้ทำงานร่วมกันกับทางบริษัทแบบทำงานผ่าน dashboard คุยงาน โดยมี art director ประจำตัวแต่ละคนคอยตรวจและส่งงานให้เป็นระยะๆ การทำงานเป็นระบบดีมากๆ ที่นี่จึงเป็นเว็บหลักที่เราคอยทำงานส่งให้ในแต่ละเดือน

ส่วนเว็บอื่นๆ ก็จะนำผลงานที่เราทำสะสมไว้เป็น icon set ต่างๆที่เป็นที่ต้องการในตลาดไปฝากขายในแต่ละเว็บ เป็นการกระจายช่องทางในการขายงานของเราเพิ่มมากยิ่งขึ้น

ค้นหาแรงบันดาลใจใหม่มาจากไหนตลอดเวลา

ได้แรงบันดาลใจมาจากคนรอบตัว ที่ทำอาชีพคล้ายๆกันค่ะ เชื่อไหมคะว่า คนประเภทคล้ายๆกันมักจะดึงดูดเข้าหากัน เราทำงานนสายอาชีพ Icon designer เราได้รู้จักเพื่อนๆที่ทำงานในแวดวงเดียวกันเป็น inspire ให้กัน มีอัพเดทข่าวในวงการให้กันและกันตลอดค่ะ เลยทำให้มีไฟในการทำงานสายนี้ตลอด 

Icon แจกฟรี ดาวน์โหลดกันได้เลย
Icon แจกฟรี ดาวน์โหลดกันได้เลย

ทำงานสายครีเอทีฟออนไลน์แบบนี้ มีบ้างไหมที่รู้สึกว่าคิดงานไม่ออก

เป็นค่ะ คิดว่าทุกคนก็ต้องมีอาการนี้เหมือนกันแหละเนอะ มากบ้างน้อยบ้างในแต่ละครั้ง

มีวิธีจัดการอย่างไรบ้าง ?

วิธีจัดการก็คือ วางมือจากงาน แล้วเปลี่ยนไปทำอย่างอื่นเลยค่ะ เดินออกไปเล่นกับน้องหมา ดูหนัง ฟังเพลง ทำกิจกรรมต่างๆอย่างอื่นที่นอกเหนือจากตัวงานที่ทำอยู่ จากนั้นกลับมาตั้งสติจับตัวงานอีกรอบ อาจจะลองวาดเป็นภาพก่อนก็ได้ วาดไปเรื่อยๆ ปล่อยให้ความคิดเราค่อยๆไหลไปเรื่อยๆ แล้วเราจะคิดงานออกเอง 

หรือบางทีการแลกเปลี่ยนความคิดของตัวงานกับคนอื่น ก็ช่วยให้เราได้ไอเดียในการทำงานด้วยนะคะ

ผลงานออกแบบแอพลิเคชั่น จาก Aomam
ผลงานออกแบบแอพลิเคชั่น

สุดท้ายอยากฝากอะไรถึงน้องๆ ที่กำลังมองหาอาชีพฟรีแลนซ์

ฟรีแลนซ์เป็นอาชีพที่มีอิสระทางเวลา ทำงานตอนไหนก็ได้ เมื่อไหร่ก็ได้ ไม่ต้องเสียเวลาเดินทางไปทำงานที่ออฟฟิศ และไม่ต้องเข้าออกงานตรงตามเวลา แต่สิ่งหนึ่งที่สำคัญ คือ ความมีวินัยในตัวเอง ตรงต่อเวลา รับผิดชอบงานในส่วนที่ได้รับมอบหมาย ทำออกมาให้ดีที่สุดในแบบของเรา

ฟรีแลนซ์ ไม่ได้เป็นอาชีพที่การเงินไม่แน่นอนเสมอไปนะคะ ถ้ามีการวางแผนที่ดีในแต่ละเดือนและทำงานรักษาคุณภาพงานให้ดี ติดตามข่าวสารในวงการที่เราทำอยู่ พัฒนาฝีมือตัวเองขึ้นเรื่อยๆ ทำงานส่งตรงต่อเวลา มีระบบแบบแผน เชื่อว่าลูกค้าต้องกลับมาใช้บริการเราละบอกต่อให้กับคนอื่นรู้จักเราแน่นอนค่ะ 

ฝากผลงานให้เพื่อนๆได้ติดตาม

https://www.freepik.com/aomam-ss
https://www.behance.net/iamaomam
https://www.iconfinder.com/aomam.ss
ติดต่อทางอีเมล์ได้ที่นี่


สำหรับคนที่ชอบอ่านบทความประวัติอาชีพที่น่าสนใจ เส้นทางอาชีพ ไม่ว่าจะเป็นทั้งทำงานบริษัท ฟรีแลนซ์หรือธุรกิจส่วนตัว ติดตามอ่านกันได้เป็นประจำในบทความชุด Designil Chats ทุกสัปดาห์

อ่าน Designil Chats EP.1 สัมภาษณ์คุณพิชญ์ PRODUCT DESIGNER คนไทยในออสเตรเลีย
อ่าน Designil Chats EP2 ทำความรู้จักอาชีพขายธีมบน THEMEFOREST กับ NUTZUMI
อ่าน Designil Chats EP3 เส้นทางอาชีพกับป๋อม สุธัม UX Designer

The post EP4 AOMAM สร้างรายได้กับการขาย Icon appeared first on Designil.

]]>
https://www.designil.com/designil-chats-ep4.html/feed 0 8638
Web Page Speed: สรุป วิธีการ Optimise รูปภาพและวีดิโอให้โหลดเร็ว https://www.designil.com/web-page-speed-image-video.html https://www.designil.com/web-page-speed-image-video.html#respond Tue, 13 Aug 2019 06:23:38 +0000 https://www.designil.com/?p=8558 บทความนี้เราก็จะมาคุยกันเรื่องวิธีการ Optimise รูปภาพและวีดิโอ เช่น การ บีบอัดรูป, การเปลี่ยนนามสกุลไฟล์, การทำ Lazyload ฯลฯ ซึ่งทำให้บทความ Web Page Speed ตอนนี้เป็นหัวข้อที่สำคัญมาก ๆ ไม่แพ้เรื่องอื่น ๆ

The post Web Page Speed: สรุป วิธีการ Optimise รูปภาพและวีดิโอให้โหลดเร็ว appeared first on Designil.

]]>
ใน บทความ Web Page Speed ตอนที่ 1 เราพูดกันไปว่า ทำไมความเร็วเว็บถึงสำคัญ, อธิบายว่าทำไมเว็บไซต์ถึงโหลดเร็วหรือช้า, และหัวข้อที่สำคัญที่สุด คือ 4 เทคนิคในการทำให้เว็บโหลดเร็วขึ้น

ตามที่สัญญาไว้ในบทความตอนที่แล้ว บทความนี้เราก็จะมาคุยกันเรื่องวิธีการ Optimise รูปภาพและวีดิโอ เช่น การ บีบอัดรูป, การเปลี่ยนนามสกุลไฟล์, การทำ Lazyload ฯลฯ ซึ่งทำให้บทความ Web Page Speed ตอนนี้เป็นหัวข้อที่สำคัญมาก ๆ ไม่แพ้เรื่องอื่น ๆ เลยครับ

บทความซีรีย์ Web Page Speed ของเรามี 3 ตอน คือ:

  1. ตอนที่ 1 ส่วนประกอบของเว็บไซต์สำคัญ ๆ ที่เกี่ยวข้องกับความเร็วเว็บ และเทคนิคการ Optimise เว็บให้เร็วสุด ๆ
  2. (บทความนี้) วิธีการ Optimise รูปภาพและวีดิโอให้โหลดเร็ว
  3. วิธีการ Optimise JavaScript ให้โหลดเร็ว & สรุป

มาเริ่มกันเลยดีกว่าครับ

ทำไมเราถึงต้อง Optimise รูปภาพและวีดิโอบนเว็บ

เว็บไซต์ในปัจจุบันมีการนำรูปภาพและวีดิโอมาใช้มากขึ้นเรื่อย ๆ ซึ่งจากสถิติล่าสุดที่แอดหามาได้ พบว่ารูปภาพหนักเฉลี่ย 1.4 MB ต่อเว็บไซต์เลยทีเดียว อันนั้นเป็นของปี 2016 นะครับ ในปัจจุบันอาจจะทะลุ 5 MB ไปแล้วก็ได้

statistics average image size website
สถิติขนาดหน้าเว็บในปี 2016 จาก KeyCDN

เนื่องจากรูปภาพและวีดิโอเป็นส่วนสำคัญเลยที่ทำให้เว็บหนัก การ Optimise ในส่วนนี้จะทำให้ผู้ใช้เว็บไซต์เราโหลดเว็บได้เร็วขึ้น ซึ่งมีผลโดยเฉพาะอย่างยิ่งกับผู้ใช้ทางมือถือของเราที่มีอินเตอร์เน็ตความเร็วจำกัดครับ

นอกจากประโยชน์ด้าน User Experience แล้ว เรายังได้ประโยชน์ด้าน SEO อีกด้วย เพราะเว็บไซต์เราจะโหลดเร็วขึ้น และ Google จะจัดอันดับใน Search Engine ให้สูงขึ้นครับ

ต่อไปมาดูเทคนิคการ Optimise กันบ้างดีกว่าครับ ซึ่งมีหลาย ๆ ข้อที่สามารถทำได้ง่ายมาก ๆ ใช้เวลาไม่นาน

วิธีการ Optimise ความเร็วการโหลดรูปภาพและวีดิโอบนเว็บไซต์

ใช้เครื่องมือบีบอัดรูป

tinypng free image compress
ลดขนาดรูป JPG หรือ PNG เกิน 50% ง่าย ๆ แถมอัพได้สูงสุด 20 รูป บนเว็บไซต์ TinyPNG

ถ้าต้องการหาเครื่องมือออนไลน์เพื่อช่วยบีบขนาดรูป แอดเคย แนะนำเว็บไซต์ช่วยลดขนาดรูป ไปก่อนหน้านี้แล้วครับ เว็บพวกนี้จะใช้เทคนิคในการลบข้อมูลที่ไม่จำเป็นออกจากไฟล์รูป ทำให้ความละเอียดของรูปไม่เสียมากนักในขณะที่ขนาดไฟล์ลดไปเกิน 50%

สำหรับใครที่ไม่ชอบใช้เว็บไซต์ ก็มีทางเลือกอื่น ๆ เช่น สามารถดาวน์โหลดโปรแกรมบีบอัดรูปมาใช้ในเครื่องเราได้ หรือถ้าใครทำเว็บ ก็สามารถใช้ Library บีบอัดรูปในขณะที่เรนเดอร์เว็บได้เลย

วิธีต่าง ๆ ที่แอดแนะนำมีดังนี้ครับ (จริง ๆ มีอีกหลายตัว):

  • Caesium – โปรแกรมฟรี สำหรับบีบอัดรูปบน Windows
  • ImageOptim – โปรแกรมฟรี สำหรับบีบอัดรูปบน Mac
  • Pica – Library บน NodeJS ที่สามารถบีบอัดรูปในขณะ Compile โค้ดได้เลย

สิ่งที่ควรต้องรู้เกี่ยวกับการใช้โปรแกรมฟรี หรือ Library ฟรีเหล่านี้ คือ Algorithms ที่ใช้ในการบีบอัดรูป จะเป็น Algorithms ที่ Open Source ครับ แต่ถ้าเราใช้บริการบีบอัดรูปออนไลน์

เช่น แอดมินใช้ของ TinyPNG หรือ ShortPixel เป็นหลัก ก็อาจจะมี Algorithms ที่บีบอัดรูปได้ดีกว่าครับ (แต่ก็ไม่ได้แปลว่าจะดีกว่าเสมอไปนะครับ)

แปลงรูปภาพ / วีดิโอให้กลายเป็น CSS

css3 buttons download
ปุ่มพวกนี้ทั้งหมดใช้แค่โค้ด CSS – ดูโค้ดจริงได้บน Codepen

เทคนิคหนึ่งที่ทำให้เว็บเร็วขึ้นง่าย ๆ ก็คือ “ลดการใช้รูปภาพและวีดิโอ” นั่นเองครับ ถ้าอะไรที่เขียนด้วยโค้ด CSS หรือ JavaScript มาแทนรูปภาพได้ ใช้โค้ดเป็นทางเลือกที่ดีกว่า (ยกเว้นเราต้องโหลด Library เพิ่ม 10 ตัวมาเพื่อทำจุดเดียว อันนั้นใช้รูปไปเถอะครับ)

โดยเฉพาะอย่างยิ่งในยุคนี้ที่ CSS เก่งขึ้นเรื่อย ๆ ตัวอย่างสิ่งที่ CSS / JavaScript ในปัจจุบันสามารถทำได้ แต่ก่อนหน้านี้เราต้องใช้รูปภาพ ก็เช่น

  • ปรับความโปร่งใสของส่วนต่าง ๆ บนหน้าเว็บ – ใช้ CSS3 opacity
  • ใส่ฟ้อนต์ไทยสวย ๆ บนหน้าเว็บ – ใช้ CSS3 @font-face
  • ใส่ขอบมน -ใช้ CSS3 border-radius
  • ส่เงา – ใช้ CSS3 box-shadow และ text-shadow
  • ทำ Animation – ใช้ CSS3 animation, SVG Animation, หรือ JavaScript เช่น GreensockJS
  • พลอตกราฟ Data Visualisation – ใช้ D3.js หรือ Library สำหรับพลอตกราฟตัวอื่น ๆ

ใช้รูป WEBP แทน JPG, PNG

webp image compare
เปรียบเทียบขนาดไฟล์ของ WebP กับ JPEG จะเห็นว่าขนาดลดลงมาเยอะมากเลยครับ

การบีบอัดไฟล์รูปในปัจจุบันจะสามารถช่วยได้ในระดับหนึ่งเท่านั้นครับ ทาง Google เลยคิด Algorithms ใหม่สำหรับไฟล์รูปภาพซะเลย ออกมาเป็นสิ่งที่เรียกว่า WebP

WebP เป็นนามสกุลรูปตัวใหม่ (จริง ๆ ก็ไม่ใหม่แล้ว) ที่สามารถบีบรูปให้ขนาดเล็กลงกว่านามสกุลอื่นที่เราใช้กันครับ อย่างไรก็ตาม สำหรับบางรูปที่ Contrast น้อย ๆ ก็เคยได้ยินว่า WebP ไม่ได้ช่วยมากเท่าไหร่ครับ อันนี้อาจจะต้องลองทดสอบเป็นรายรูปดู

สำหรับเรื่องของการรองรับในบราวเซอร์ บราวเซอร์ส่วนใหญ่รองรับ WebP หมดแล้วครับ เพราะฉะนั้นส่วนใหญ่จะสามารถเปิดรูปได้โดย (สามารถเช็คได้จาก เว็บไซต์ Caniuse)

และสำหรับบราวเซอร์ที่ยังไม่รองรับ เราสามารถใช้บริการเช่น Cloudflare แบบจ่ายเงินเพียง $20 / เดือน ได้ครับ #สายใช้เงินแก้ปัญหา

ระบบ Cloudflare จะทำการแปลงรูปในเว็บเราให้กลายเป็น WebP โดยอัตโนมัติ และทุกครั้งที่มีคนเข้าเว็บ ก็จะเช็คว่าบราวเซอร์ผู้ใช้รองรับ WebP หรือเปล่า ถ้ารองรับถึงจะส่ง WebP ให้ครับ สะดวกมาก ๆ

ใช้วีดิโอ MP4 แทน GIF

file size web speed gif mp4
แปลง GIF เป็น MP4 ช่วยลดขนาดไฟล์ได้อย่างมหาศาล

อันนี้เป็นเทคนิคหนึ่งที่คนไม่ค่อยเชื่อกันครับ เพราะถ้าตามหลักการแล้วไฟล์รูป (GIF) ก็ควรจะเล็กกว่าไฟล์วีดิโอ (MP4) ถูกต้องมั้ยครับ?

สาเหตุที่ GIF มีขนาดใหญ่กว่า MP4 เพราะว่า GIF เก็บข้อมูลแบบ Lossless แปลว่าไม่มีข้อมูลอะไรเสียหายเลย ทุกเฟรมบน GIF จะถูกเก็บไว้เป็นรูปของแต่ละเฟรมเลยครับ

ส่วน MP4 เก็บข้อมูลแบบ Lossy แปลว่ามีข้อมูลหายไปบ้าง เนื่องจากมัน Optimise ด้วย Algorithms (หรือที่สายวีดิโอเรียกว่า Codec) เพื่อให้การเคลื่อนไหวในวีดิโอเนียนที่สุด โดยมีไฟล์ขนาดเล็กที่สุดครับ

สำหรับใครที่ยังไม่แน่ใจว่าวิธีนี้ใช้ได้จริง คุณตั้งฝากบอกเพิ่มเติมมาว่า

ขนาดเว็บแจก GIF ฮา ๆ ชื่อดังอย่าง Giphy.com ยังใช้ MP4 ทั้งเว็บเลย แล้วเว็บเราเล็กกว่าเค้าทำไมถึงไม่ใช้

Warat Wongmaneekit – Google Developer Expert

สำหรับคนที่มีรูป GIF เยอะ ๆ บนเว็บ สามารถใช้เครื่องมือแปลง GIF to MP4 ออนไลน์ได้เลยครับ มีให้เลือกใช้ฟรีหลายตัวมาก

ถ้าไฟล์ GIF เราใหญ่มาก อัพไม่ไหว ก็สามารถใช้แบบโปรแกรมบนเครื่องได้เช่นกัน แต่แอดยังหาตัวที่ฟรีไม่เจอ ถ้าใครเจอก็แจ้งมาได้ครับ

โหลดเฉพาะรูปที่อยู่บนหน้าจอ ด้วย Lazyload

Lazyload ไม่ใช่เรื่องใหม่ครับ เป็นเทคนิคในการเพิ่มความเร็วการโหลดเว็บ ด้วยการหยุดรูปที่อยู่นอกหน้าจอไม่ให้โหลด แล้วพอเลื่อนลงมาค่อยโหลดครับ

ประโยชน์ของการทำ Lazyload คือ ผู้ใช้เว็บของเราไม่ต้องรอภาพอื่นที่อยู่นอกจากจอโหลด ถ้าเว็บเรามีรูปทั้งเว็บ 5 MB พอใส่ Lazyload อาจจะโหลดแค่ 100kb ที่ใข้จริงเท่านั้นครับ ซึ่งนอกจากจะทำให้เว็บโหลดเร็วขึ้นแล้ว ยังดีกับ User Experience อีกด้วยครับ

ปัจจุบันมี JavaScript Library ออกมาหลายตัวที่ช่วยให้เราสามารถทำ Lazyload ได้เลย แค่ใส่ JS ไฟล์นี้เข้ามาในเว็บ เช่น Vanilla JavaScript Lazy Load

อย่างไรก็ตาม ตอนที่แอดใช้ Library พวกนี้ มักจะชอบเจอปัญหาเวลาเราทำ Slider แบบมีรูปบนเว็บ ด้วย JavaScript Library ตัวหนึ่ง แล้วมันไปตีกับ JavaScript Library ตัวที่ทำ Lazyload ครับ

วิธีแก้ปัญหา ก็คือ เลือกใช้ JavaScript Slider ที่รองรับ Lazyload อยู่แล้ว เช่น Slick ตัวนี้เมื่อก่อนแอดใช้บ่อยมาก เพราะฟีเจอร์เยอะ และตกแต่งง่าย

slick lazyload slider javascript
ฟีเจอร์ Lazy Load ใน Slick

หรืออีกวิธีที่ง่าย (หรือยาก) กว่านี้ ก็คือ เขียน Slider ใช้เองเลยครับ (ไม่ได้พูดเล่น ๆ เพราะคุณตั้งเล่าว่า Slider ที่เค้าทำให้เว็บหนึ่งมีปัญหาเรื่องการทำ Lazyload เค้าเลยเข้าไปแก้โค้ด Slider เองเลย)

สรุป เทคนิคในการทำให้รูปและวีดิโอบนเว็บโหลดเร็วขึ้น

5 เทคนิคที่เราแนะนำกันในบทความนี้ คือ:

  • ใช้เครื่องมือบีบอัดรูป – มีทั้งเครื่องมือฟรีออนไลน์ และเครื่องมือฟรีแบบติดตั้งลงเครื่อง
  • แปลงรูปภาพ / วีดิโอให้กลายเป็น CSS – ปัจจุบันโค้ด CSS3 และ JavaScript สามารถทำอะไรได้เยอะมาก ใช้ประโยชน์จากโค้ดให้ได้มากที่สุด
  • ใช้ WebP แทน JPG, PNG – เพราะไฟล์ WebP มีขนาดเล็กกว่า
  • ใช้วีดิโอ MP4 แทนรูป GIF – เพราะไฟล์ MP4 มีขนาดเล็กกว่า
  • โหลดเฉพาะรูปบนหน้าจอด้วย Lazyload – มีทั้ง JavaScript Library แบบที่ใส่ลงเว็บแล้วใช้ได้เลย หรือจะเขียนเองก็ได้

สำหรับท่านใดยังไม่ได้อ่านตอนอื่น ๆ ของบทความซีรีย์ Web Page Speed สามารถอ่านได้จากลิงค์ด้านล่างนี้เลยครับ:

  1. ตอนที่ 1 ส่วนประกอบของเว็บไซต์สำคัญ ๆ ที่เกี่ยวข้องกับความเร็วเว็บ และเทคนิคการ Optimise เว็บให้เร็วสุด ๆ
  2. (บทความนี้) วิธีการ Optimise รูปภาพและวีดิโอให้โหลดเร็ว
  3. (เร็ว ๆ นี้) วิธีการ Optimise JavaScript ให้โหลดเร็ว & สรุป

และหากมีคำถาม คำแนะนำ หรืออยากอ่านเรื่องอะไรเพิ่มเติมเกี่ยวกับการเพิ่มความเร็วเว็บไซต์ ก็ทักมาหาเราได้ที่ Designil Facebook Page ตลอดเวลาครับ

The post Web Page Speed: สรุป วิธีการ Optimise รูปภาพและวีดิโอให้โหลดเร็ว appeared first on Designil.

]]>
https://www.designil.com/web-page-speed-image-video.html/feed 0 8558
แนะนำ Podcast ชื่อดัง UX UI ไม่ควรพลาด https://www.designil.com/podcast-for-designer.html https://www.designil.com/podcast-for-designer.html#respond Sat, 10 Aug 2019 06:50:40 +0000 https://www.designil.com/?p=8405 บทความรวบรวม Podcast สำหรับสายทำเว็บไซต์ UX UI Designer เราได้รวบรวม Podcast ที่มีเนื้อหาที่น่าสนใจทั้งภาษาไทยและภาษาอังกฤษ พร้อมคำ Reviews เบื้องลึกส่วนตัวจากแอดนัทเอง เลือกมาเฉพาะที่ได้ประโยชน์และแอดนัทได้ฟังจริง ติดตามกันได้ในบทความนี้เลยค่า Podcast ภาษาไทย Design Picnic Podcast ภาษาไทยนี้ดีมากสำหรับผู้ที่สนใจเรื่องของ..

The post แนะนำ Podcast ชื่อดัง UX UI ไม่ควรพลาด appeared first on Designil.

]]>
บทความรวบรวม Podcast สำหรับสายทำเว็บไซต์ UX UI Designer เราได้รวบรวม Podcast ที่มีเนื้อหาที่น่าสนใจทั้งภาษาไทยและภาษาอังกฤษ พร้อมคำ Reviews เบื้องลึกส่วนตัวจากแอดนัทเอง เลือกมาเฉพาะที่ได้ประโยชน์และแอดนัทได้ฟังจริง ติดตามกันได้ในบทความนี้เลยค่า

Podcast ภาษาไทย

Design picnic podcast

Design Picnic

Podcast ภาษาไทยนี้ดีมากสำหรับผู้ที่สนใจเรื่องของ Design, User Experience, User Interface เพราะพอดแคสต์นี้ได้สัมภาษณ์ดีไซน์เนอร์คนไทยในต่างประเทศ ที่ทำงานในบริษัทชื่อดังตั้งแต่ Adobe, Facebook, IBM เนื้อหาเกี่ยวกับเส้นทางอาชีพ การทำ Portfolio การหางาน ประสบการณ์ในบริษัทใหญ่ๆ

Platform: Soundcloud, Spotify
ความถี่ในการอัพเดท: ทุกสัปดาห์

Think aloud podcast

Think Aloud

Podcast รวมคำศัพท์ที่น่าสนใจในวงการ UX จากพี่ชิว Teedej แห่งวงการ User Experience ของเมืองไทย เหมาะสำหรับผู้เริ่มต้น

Platform: Spotify, Soundcloud
ความถี่ในการอัพเดท: ไม่แน่นอน

Kon Tum Web podcast

Kon-Tum-Web

สำหรับคนที่กำลังทำเว็บไซต์ เราขอแทรกด้วย Podcast ภาษาไทยสาย Dev กันบ้าง ตั้ง Warat ได้ถ่ายทอดเรื่องราวน่าสนใจ มาสรุปให้เราฟังตั้งแต่เรื่องของการ Optimize เว็บไซต์ ประสบการณ์การทำงาน เหมาะสำหรับคนที่กำลังทำเว็บไซต์ทุกท่าน

Platform: Soundcloud, Spotify
ความถี่ในการอัพเดท: ทุกเดือน

microphone podcast
microphone podcast

Podcast ภาษาอังกฤษ

Rosenfeld Media

เล่าเรื่องการออกแบบ บทสัมภาษณ์ดีไซน์เนอร์ต่างประเทศ มีสาขาอาชีพตั้งแต่ Designer ไปยันคนเขียนหนังสือ UX ชื่อดัง Don’t make me think อย่าง Steve Krug นอกเหนือจากนี้ยังมีดีไซน์เนอร์ชื่อดังอีกเพียบ อาทิเช่น Luke Wroblewski, Dan Brown, Nathan Curtis

เนื้อหาของ Podcast เล่าเรื่องการทำงานในวงการออกแบบ สังคม องค์กร วิธีการหางาน การทำงาน การทำ Portfolio มีไปจนถึงเรื่องเทคนิคคำศัพท์เฉพาะในวงการ Design

ความเห็นของแอดนัทคือ ฟังเพลิน แต่ถ้าทำงานอยู่มาฟังอันนี้จะไม่รู้เรื่อง เพราะว่าเป็นสัมภาษณ์ที่เจาะลึกไปถึงเรื่อง Technical คำถามเจาะลึก insight ตามแต่ละสายอาชีพค่า

Platform: Soundcloud
ความถี่ในการอัพเดท: ทุกเดือน


UXPodcast

UX Podcast

Podcast นี้ดำเนินรายการโดย Per Axbom & James Royal-Lawson นำเรื่องเล่าที่น่าสนใจเน้นไปที่ User Experience โดยเฉพาะ เนื้อหาส่วนมากจะเป็นการสัมภาษณ์ Designer มีเนื้อหาที่ไม่ซ้ำกันในแต่ละสัปดาห์

ส่วนอันที่แอดฟังคือสัมภาษณ์​ Jared Spool สำหรับคนที่ยังไม่เก่งภาษาอังกฤษ เราแนะนำให้ข้ามอันนี้ไปเลย พูดไวมาก ข้อดีสำหรับคนที่ฟังไม่ทัน Podcast นี้มี Transcript ประกอบอ่านได้ใน Medium ค่า

Platform: Soundcloud, Spotify
ความถี่ในการอัพเดท: ทุกเดือน


Ideo U Podcast

IDEO U

หลาย ๆ คนคงรู้จัก IDEO ผู้คิดค้น Design Thinking โดย Podcast นี้แอดนัทได้ยกมาเพราะว่าบางตอนน่าสนใจมาก เช่นตอนของ Empathy Exercise ทำไม Empathy ถึงมีความสำคัญทั้งทำงานกับ User การเข้าใจ Diversity ของมนุษย์และอื่นๆ
เรื่องน่าสนใจอื่นๆ คือเรื่องของการทำงานกันเป็นทีม, Leadership, Design Transformation
สำหรับท่านที่อยู่ในตำแหน่ง Manager ผู้บริหาร เราขอแนะนำ Podcast นี้เลย

Platform: Soundcloud , Spotify
ความถี่ในการอัพเดท: ทุกเดือน


Dollars to donuts

Dollars to Donuts

Podcast User Experience สัมภาษณ์ Lead ดีไซน์เนอร์ในบริษัทชื่อดัง เจาะลึกเน้นเรื่องราวการทำ Research โดยเฉพาะ ลึกซึ้งแบบที่หาฟังที่ไหนไม่ได้

สำหรับคนที่สนใจเรื่อง Process การทำ UX Research ในบริษัทขนาดใหญ่ค่า

Platform: Spotify
ความถี่ในการอัพเดท: ทุกเดือน


Boagworld Web Show

จัดรายการโดย Designer ชื่อดังที่แอดนัทชื่นชอบคือ Paul Boag มีผู้ดำเนินรายการอีกคนคือ Marcus Lillington มาเล่าเรื่องของ Web Design, Designer, Website, User Experience บางครั้งก็จะมีเรื่องของ Developer และเจ้าของเว็บไซต์

เนื้อหาจะไม่ใช่ UX มาก แต่เนื้อหาจะมีรอบด้านในการทำเว็บ ตั้งแต่การสร้างรายได้ การจัดการองค์กร การบริหารทีม สำเนียงบริทิชสุดๆ เหมาะสมกับสำหรับคนที่มีเว็บไซต์เป็นของตัวเองค่ะ

Platform: Spotify, Itunes, Google Play
ความถี่ในการอัพเดท: ทุกสัปดาห์


The big web show podcast

The Big Web Show

ดำเนินรายการโดย Jeffrey Zeldman เป็นเนื้อหาการทำเว็บไซต์ล้วนๆ ตั้งแต่การทำ Responsive, CSS, HTML, SASS ครอบคลุมเนื้อหาทุกเรื่องที่เกี่ยวกับการทำเว็บไซต์กันไปเลย แนะนำว่าควรเอาไว้ฟังอัพเดทเทคโนโลยีตัวใหม่ที่สามารถใช้งานได้กับเว็บไซต์ค่ะ

Platform: Spotify, Soundcloud
ความถี่ในการอัพเดท: ไม่แน่นอน


UIE Brain Sparks

ฟังเทปเก่าๆนี่น่าสนใจของวงการ User experience จาก Jared Spool

Platform: Tunein
ความถี่ในการอัพเดท: ไม่อัพเดทมาหลายปีแล้ว


Inside intercom podcast

เนื้อหาที่น่าสนใจเกี่ยววกับ Design, Business, Starup, Marketing
เหมาะสมกับผู้บริหาร และผู้ที่สนใจในเรื่องของ Business ภาพรวมการทำงานธุรกิจ Tech

Platform: Spotify, Soundcloud
ความถี่ในการอัพเดท: ทุกเดือน


Presentable podcast

Presentable

เนื้อหาน่าฟังสำหรับดีไซน์เนอร์สาย UI Designer, Visual Designer, Graphic Designer เพราะว่ามีเรื่องของ Design, Font, การตั้งราคางาน, การขายงานของเรา, Design System, Type Setting และอื่น ๆ ที่น่าสนใจในวงการออกแบบ

Platform: Spotify
ความถี่ในการอัพเดท: ทุกเดือน


99 Invisible podcast

99% Invisible

Podcast ที่เล่าเรื่องของการออกแบบที่ใกล้ตัวของเรา มีตั้งแต่ดิจิตัล ไปถึงเรื่องของ Engineering, Architecture สถาปัตยกรรม เรื่องราวเทคโนโลยีที่น่าสนใจ เนื้อหาเล่าเรื่องการออกแบบที่มีผลต่อความรู้สึก ประสบการณ์ของมนุษย์ มีสิ่งนี้เกิดขึ้นแล้ว ชีวิตมนุษย์ได้รับผลกระทบหรือเปลี่ยนแปลงไปอย่างไร เน้นไปที่การใช้การออกแบบเพื่อการเปลี่ยนแปลง ฟังเพลิน มีซาวน์ประกอบ
โดย Podcast นี้ดำเนินมาแล้วถึง 365 ตอน

Platform: Spotify, Soundcloud
ความถี่ในการอัพเดท: ทุกสัปดาห์
*แอดนัท Recommend ชอบฟังอันนี้ สำเนียงฟังง่าย เสียงประกอบดี


Design better podcast

Design Better จาก Invision

เป็นอีก Podcast ที่แอดนัทฟังบ่อยมากที่สุดในบรรดาที่แนะนำมา เพราะว่าจะมีเคสการออกแบบจากบริษัทชื่อดังในวงการ Tech มาเล่าให้เราฟังเป็นประจำ ไม่ว่าจะเป็น Airbnb, Atlassian, Google หรือจะเป็นการสัมภาษณ์ดีไซน์เนอร์ชื่อดังอย่าง Dan Mall และ Brad Frost
Platform: Spotify
ความถี่ในการอัพเดท: เดือนละ 2 ครั้ง


UX Australia Podcast

Podcast นี้เล่าเรื่องวงการ User Experience ในประเทศออสเตรเลีย เป็นการรวมงาน Talk จากงาน Meetup เก่า ๆ มาเล่าให้ฟัง อันนี้แอดนัทขออนุญาตแปะไว้ให้เพื่อน ๆ ที่อยากลองฟังตอนเก่า สังคมการทำงาน UX ในออสเตรเลีย สำเนียงจะฟังยากหน่อย ถ้าไม่คุ้นเราขอแนะนำให้ข้ามไปอันอื่นเลย

Platform: Apple Podcast
ความถี่ในการอัพเดท: ไม่อัพเดทมานานแล้ว

The post แนะนำ Podcast ชื่อดัง UX UI ไม่ควรพลาด appeared first on Designil.

]]>
https://www.designil.com/podcast-for-designer.html/feed 0 8405
EP3 เส้นทางอาชีพกับป๋อม สุธัม UX Designer https://www.designil.com/designil-chats-ep3.html https://www.designil.com/designil-chats-ep3.html#respond Fri, 09 Aug 2019 22:31:57 +0000 https://www.designil.com/?p=8524 กลับมาต่อกันด้วยบทความที่น่าสนใจจาก Designil Chats บทความสัมภาษณ์ดีไซน์เนอร์ที่เต็มไปด้วยประสบการณ์สำหรับน้องๆและดีไซน์เนอร์มือใหม่ บทความนี้แอดนัทได้นำข้อมูลเนื้อหาสาระดีๆจากการสัมภาษณ์พี่ป๋อม ปัจจุบันดำรงตำแหน่ง Senior UX Designer ที่ ธนาคารไทยพาณิชย์ จำกัด (มหาชน) หรือ SCB มาฝากกันค่ะ พี่ป๋อมเป็นผู้เชี่ยวชาญด้าน UI และ UX..

The post EP3 เส้นทางอาชีพกับป๋อม สุธัม UX Designer appeared first on Designil.

]]>
กลับมาต่อกันด้วยบทความที่น่าสนใจจาก Designil Chats บทความสัมภาษณ์ดีไซน์เนอร์ที่เต็มไปด้วยประสบการณ์สำหรับน้องๆและดีไซน์เนอร์มือใหม่

บทความนี้แอดนัทได้นำข้อมูลเนื้อหาสาระดีๆจากการสัมภาษณ์พี่ป๋อม ปัจจุบันดำรงตำแหน่ง Senior UX Designer ที่ ธนาคารไทยพาณิชย์ จำกัด (มหาชน) หรือ SCB มาฝากกันค่ะ

พี่ป๋อมเป็นผู้เชี่ยวชาญด้าน UI และ UX ให้ความรู้มากมายในงานมีทอัพ การอบรม การสอน และทางเฟสบุคกรุ๊ปอย่าง UX Thailand พี่ป๋อมจะมาเล่าให้เราฟังเบื้องลึกเบื้องหลังการทำงานด้าน UX, UI นั้นควรเริ่มต้นศึกษาอะไร วิธีการเตรียมตัวการสมัครงาน การเลือกเปลี่ยนสายอาชีพ รวมไปถึงงานมีทอัพที่น่าสนใจสำหรับคนที่อยากหาความรู้เพิ่ม

ป๋อม สุธัม ธรรมวงศ์ Senior UX Designer
ป๋อม สุธัม ธรรมวงศ์ Senior UX Designer

แนะนำตัวกันก่อน

ชื่อป๋อมครับ สุธัม ธรรมวงศ์ ตอนนี้เป็น Senior UX Designer ในทีม SCB10X ครับ และก็ take role เป็น Product Owner ด้วย เพราะว่า run ทีมของตัวเองเล็กๆ กับ product ที่ด้วยกันในทีม ก่อนหน้านี้ก็ทำมาหลายอย่างครับ ถ้าเอาตั้งแต่จบป.ตรีก็ Web Designer, Interactive Designer, CSS Designer ซึ่งใช้เวลากับ role เหล่านี้ประมาณ 4 ปีครับ

แล้วย้ายสายไปทาง advertising agency ไปรับหน้าที่เป็น Project Manager รวมแล้วประมาณ 3-4 ปีครับ และเรียนว่าสายล่าสุดที่ทำอยู่ตอนนี้ พี่เรียกว่าเป็น Product Development ละกัน ก็ทำตั้งแต่ UX Designer, Product Owner และล่าสุดก็มาที่ Senior UX Designer 

วันแรกที่ตัดสินใจมาทำงานด้านนี้

มันเป็นเรื่องที่เล่าบ่อยอยู่เหมือนกันครับ คือต้องบอกว่าจริงๆแล้วตอนเราทำงาน Web Designer ตั้งแต่จบปอตรี มันมีการอ้างอิงการใช้ item ของ UX มาบ้างอยู่แล้วนะ แต่อาจจะไม่ได้ถูกทำทั้ง process เช่นว่า พี่จะออกแบบเว็บหน้านี้ คิดจากอะไร ใครใช้ ใครเห็น

ถ้าเอาแบบคำว่า “UX” เข้ามาในชีวิตตอนไหน น่าจะเป็นตอนทำงานโฆษณาครับ ตอนนั้นทำ Project Manager แล้วเราก็ต้องศึกษางานเยอะประมาณนึง เพื่อที่จะได้สื่อสารหรือคุยกับ vender, outsource ได้ เพราะหน้าที่หลักของ Project Manager คือคนกลาง ถ้าเราทำหน้าที่คนกลางที่ไม่ดี สื่อสารไม่เข้าใจ คงไม่มีใครอยากทำงานด้วย

ตอนนั้นก็เลยหยิบจับ item ของ UX มาทำงานแบบไม่รู้ตัวอีกแล้ว ตอนนั้นจะเน้นๆ Wireframe บ่อยมาก เรียกว่าทำเกือบทุกวัน แต่ก่อนจะมา Wireframe มันก็ต้องรู้ Journey กับ User Flow อีกว่าคนใช้งานหรือ User จะไปเจอแต่ละหน้าได้ยังไง ทำอะไรมาก่อน-ระหว่าง-หลัง ก็ทำแบบนั้นทุกวัน 

งาน Startup Weekend ปี 2014
งาน Startup Weekend ปี 2014

จนวันนึงมีงานอีเวนท์งานนึงชื่อว่า StartupWeekend ครับ ลองหาใน google ก็ยังมีข้อมูลอยู่บ้างครับ งานจะเป็นสไตล์ hackathon เลยครับ ตอนนั้นคือปี 2014 ที่ปัจจุบันนี้มีงาน hackathon เกือบทุก week เลย เราก็ไปงาน Startup Weekend สมัครไปในบทบาท UX Designer เลย อยากลอง พอได้ไปร่วมงาน 3 วัน ก็รู้สึกว่า เฮ้ย มันดีมากนะ ชอบเลย แต่ตอนนั้นไม่ได้คิดว่าจะย้ายสายงานครับ แต่ก็ศึกษามาตลอด

เพื่อนคนนั้นบอกว่า “ถ้าเราตัดเรื่องเงินออกไปเลย นายอยากทำอะไร?” พี่ก็บอกว่า “UX” คำเดียวเลย

จนมีช่วงจังหวะนึงที่เราเรียนปริญญาโท ตอนนั้นคือเรียนการตลาด แล้วก็ทำงานโฆษณาไปด้วย มันเหนื่อยมากตอนนั้น เจอปัญหาเยอะมาก ก็มีปรึกษากับเพื่อนคนนึง ซึ่งเค้าก็ให้คำแนะนำที่น่าประทับใจมาก เพื่อนคนนั้นบอกว่า “ถ้าเราตัดเรื่องเงินออกไปเลย นายอยากทำอะไร?” พี่ก็บอกว่า “UX” คำเดียวเลย แล้วก็รู้สึกได้ทันทีว่า การทำอะไรที่เราชอบ สนใจ มันไปสุดจริงๆ ไม่กังวลอะไรเลย เหมือนมาเจอมาทำความฝันตอนอายุมากแล้ว ฮ่าๆ (ตอนนั้นพี่อายุ 30 ครับ) และนั่นแหละ ก็เป็นความรู้สึกและเหตุการณ์ตอนเริ่มต้นเข้ามาทำหน้าที่นี้จริงจัง

จำเป็นไหมที่จะต้องเรียนจบด้าน IT, ด้านออกแบบ, หรือจิตวิทยามาโดยตรง

คือเอาจริงๆ พี่ว่าจบมาตรงมันก็ดี แต่ต้องบอกว่า แต่ละคนมี background ชีวิตที่แตกต่างกันครับ อย่างพี่ พี่ไม่ได้เป็นคนที่ active อะไรมากช่วงมัธยม เรียนแบบผ่านไปวันๆ ไม่เครียด กว่าจะรู้ตัวเองว่าชอบอะไรอยากทำอะไรก็อายุเยอะแล้วอย่างที่บอกไปก่อนหน้า หรือพออยากจะไปศึกษาต่างประเทศบ้าง ค่าใช้จ่ายก็แพง สูงมาก ๆ อยากสอบชิงทุนก็ต้องให้เวลาในการศึกษาภาษาอังกฤษเพื่อสอบเข้า แต่เราก็ต้องมีรายได้ซึ่งก็ต้องทำงานตลอดเวลา ดังนั้นมันทำให้ไม่มีเวลาโฟกัสอะไรได้มาก

ร่ายซะยาว จะบอกอะไรใช่ไหม ฮ่า ๆ คืออันนี้ต้องบอกว่า มันคือความคิดเห็นและมุมมองส่วนตัวเนอะ พี่ไม่ได้บอกว่ามันถูกต้องหรอก ถือว่าแชร์ประสบการณ์และมุมมองนะครับ 

กลับมาที่คำถามนะครับ จำเป็นไหมที่ต้องเรียนจบด้านที่ว่า สำหรับพี่คิดว่า ไม่จำเป็นครับ แต่สิ่งที่ต้องทำความเข้าใจคือ เราเสียเปรียบคนจบตรงมากกว่า แต่จะทำยังไงให้เราเก่งขึ้นกว่าตัวเราเองในวันนี้หรือเมื่อวานนี้ ไม่ต้องไปเปรียบเทียบกับใครเลยครับ เอาตัวเราเองดีกว่า สิ่งที่ต้องทำ คือขยันและมีวินัย ดูเหมือนคำขวัญวันเด็ก ฮ่า ๆ แต่เรื่องจริงเลย ทุกวันนี้พี่จะกดอ่าน กดเรียน ศึกษา อ่านบทความ ให้ได้ทุกวัน วันละย่อหน้าก็มีความหมายแล้วนะครับ แล้วค่อย ๆ สะสม ทำงานจริง ตั้งข้อสงสัย ลงมือทำ เก็บประสบการณ์ไปเรื่อย ๆ พูดคุยกับคนที่ทำงานสายเดียวกันบ้าง และสายรอบข้างที่เป็น Product Development ด้วย เพราะการทำงานจริงไม่ได้ทำตัวคนเดียวครับ

ศึกษาอ่านบทความให้ได้ทุกวัน วันละย่อหน้าก็มีความหมายแล้วนะครับ เก็บประสบการณ์ไปเรื่อยๆ พูดคุยกับคนที่ทำงานสายเดียวกัน และสายรอบข้างที่เป็น Product Development เพราะการทำงานจริงไม่ได้ทำตัวคนเดียวครับ

ภาพบรรกาศการทำงานในสายงาน User Experience
ภาพบรรกาศการทำงานในสายงาน User Experience

ซึ่งการจบมาตรง ไม่ว่าจะ IT ก็จะได้เปรียบเรื่องของขอบเขตการทำงานของ software, hardware กระบวนการคิดและการทำงาน ซึ่งพวกนี้ถ้าเราไม่ได้จบตรงสายก็ต้องเข้าไปคลุกคลีกับกลุ่มคนทำงานเหล่านี้ อย่างงาน Meetup ที่มีเยอะและบ่อยมาก ใช้โอกาสเหล่านี้ให้เต็มที่ หรือด้านออกแบบ ก็เป็นทักษะการลงมือทำ ถ้าอยากทำได้หรือมี process ที่ต้องทำ ก็ต้องเริ่มใช้ tool เยอะๆ บ่อยๆ หาเทคนิค หรือจิตวิทยา อาจจะเริ่มจาก คุยกับคนเยอะๆ เข้าใจที่มาที่ไปทำไมพวกเค้าถึงแบบนั้นเยอะๆ เรียนรู้วิธีการสื่อสารที่ดีที่จะได้ข้อมูลที่ไม่ได้เกิดจากการพูดตรงๆ เหล่านี้น่าจะช่วยทำให้เราทำงานได้ตามเป้าหมายครับ

งานปัจจุบันทำอะไรบ้าง

ถ้าเอา job title หรือชื่อตำแหน่งงาน ก็คือ Senior UX Designer เกริ่นก่อนว่า ตอนที่เข้ามาทำหน้าที่นี้ ตั้งใจอย่างแรกสุด คือเราอยากทำ Research มากๆ (แม้ว่าตอนเรียนมหาวิทยาลัยจะไม่ชอบมากก็ตาม ฮ่าๆ) เนื่องด้วยว่า ที่ผ่านมาเราทำงานออกแบบมาเยอะมากแล้ว เอาจริงก็เป็น 10 ปีแล้วตั้งแต่เรียนจบปริญญาตรี แต่งาน Research ถือว่าได้ทำแต่น้อยมาก ๆ พอเข้ามาก็ได้ทำจริง ๆ และชอบมากจริง ๆ ตามความตั้งใจไว้เลย

การทำงานกับทีมที่ได้เจอคนมากมายหลากหลาย
การทำงานกับทีมที่ได้เจอคนมากมายหลากหลาย

อีกด้านนึงก็คือเป็น Product Owner ด้วยครับ อันนี้เป็นสิ่งที่ผมตั้งใจตั้งแต่ตอนเข้ามาแล้ว เราก็ใช้วิชาที่เคยทำงาน Product Development จากที่เก่ามาเริ่ม ตั้งแต่ recruit ทีมเข้ามาเลย, สัมภาษณ์คนสมัครงาน, ระหว่างรอทีมเข้ามาก็ออกไปทำ usability testing กับ user research รวมถึงเตรียมอุปกรณ์และความพร้อมเมื่อทีมเข้ามาจะได้ทำงานได้เลย และก็มีคุยอัพเดตกับ stakeholder หรือ head team ของเราเนี่ยแหละ อัพเดตเรื่อยๆ ว่าเราทำอะไรไปบ้าง เจออะไรบ้าง ซึ่งก็เป็นอีกหน้าที่ของ Product Owner ด้วย คือ Stakeholder Management ครับ โดยรวมก็ประมาณนี้

ในชีวิตด้านนอกบริษัท ก็จะมีทำคลาสสอน UX ด้วย และก็มีไปสอนที่มหาวิทยาลัยแบบที่ไปเป็น Guest Speaker และก็ปีนี้กำลังจะมีงานสอนที่มหาวิทยาลัยเทอมนึงด้วยครับ เป็นสิ่งที่อยากทำอยู่แล้ว เพราะเราอยากแชร์ประสบการณ์ให้กับน้องๆ ส่วนนึงในใจก็อยากให้เค้าทันกับโลกด้านนอกในการทำงานจริงด้วย เตรียมรับมือกับสถานการณ์จริง

ภาพบรรยากาศการอบรมคอร์ส User Experience
ภาพบรรยากาศการอบรมคอร์ส User Experience

ความท้าทายของงานที่ทำอยู่ในปัจจุบัน

น่าจะคือการเริ่มจากศูนย์เลย อาจจะเรียกว่า 0.2 ก็ได้ คือมันมีการทำงานมาเบื้องต้นแล้ว และเราก็รับเอามาสานต่อเต็มๆ หลังจากนั้น จากนั้นก็สร้างทีม ซึ่งเอาจริงๆ เราไม่เคยสร้างทีมมาก่อนนะ แต่เราเคยทำงานกับทีมมาแล้ว ก็ไม่คิดว่าจะมีปัญหาอะไร แต่เอาเข้าจริง มันก็มี(ว่ะ) ฮ่าๆ มีหลายอย่าง เช่น ตั้งแต่ recruit ทีมเลย เรียกมาสัมภาษณ์ พอได้แล้วว่าคนนี้จะมาทำงาน เวลาเข้าจริงก็ไม่มา เราก็ต้องเปลี่ยนแพลน หรือพอทีมมาครบมาเจอหน้างานกัน ก็จะเจอ issue ที่ต้องปรับตัวเปลี่ยนแผนกันอีก พี่ว่ามันก็สนุกไปอีกแบบนะแหละ

ทีมงานทุกคนก็เก่งมาก เราเป็นเหมือนคนตัวเล็กๆ ในทีมที่มีแต่คนเก่งทั้งหมด ก็ต้องทำให้ตัวเองมีความรู้ ความเข้าใจ ความสามารถมากขึ้น เป็นการ force ตัวเองให้ดีขึ้น

ความท้าทายต่อมา จะเรียกว่าอย่างแรกก็ไม่ผิด คือการได้เข้ามาทำในส่วนของธนาคารที่มีคนให้ความสนใจเยอะ ความกดดันก็มา ทีมงานทุกคนก็เก่งมากๆ ยิ่งช่วงแรกที่ร่วมงานกับชาวต่างชาติด้วยที่เก่ามากๆ เราเป็นเหมือนคนตัวเล็กๆ ในทีมที่มีแต่คนเก่งทั้งหมด ก็ต้องทำให้ตัวเองมีความรู้ ความเข้าใจ ความสามารถมากขึ้น ก็เป็นการ force ตัวเองให้ดีขึ้นด้วย ไม่งั้นคงจะมี question หรือคำถามเกิดขึ้นในหัวแน่นอนว่า “มาทำงานที่นี่ได้ยังไงมีความสามารถแค่นี้” เพราะจากประสบการณ์ส่วนตัว ส่วนที่เราทำมันคือการทำงานในระดับ Senior และระดับ Senior คือคนที่มีปัจจัย 3 อย่างด้วยกัน คือ Key Role ที่ชัดเจน ทำหน้าที่ตัวเองได้ดีและลึก, Coaching คือการแบ่งปันหรือสอนคนอื่น แนะนำคนอื่นได้ และ Accept คือการได้รับการยอมรับจากทีม ไม่ใช่แค่คนที่สัมภาษณ์งานหรือหัวหน้าเราเท่านั้น เพราะการทำงานจริง คือการทำงานกับทีม ไม่ใช่หัวหน้าหรือคนสัมภาษณ์เท่านั้น

ความท้าทายอีกเรื่องที่ตัวเองก็เป็นคนรนหาที่เอง ฮ่าๆ ก็คือการทำ UX ในส่วนที่เป็น Research เนี่ยแหละ ที่เราสนใจและชอบมากๆ อยากทำมากๆ แล้วเราก็ได้เข้ามาทำจริงๆ มันก็ท้าทายด้วย สนุกด้วย และก็ได้ประสบการณ์ใหม่ๆ คือพี่เชื่อว่า การลงมือทำงานจริง มันมีค่ามากกว่าการอ่านหรือนั่งเรียน course online ไปวันๆ

ทำงานไปแล้วพบว่าที่เราเรียนมาเนี่ย ไม่ใช่สิ่งที่ต้องการเลย เปลี่ยนงานยังทันมั้ย

ได้ดิ! คือพี่เป็นคนนึงที่จบแล้วทำงานไม่ได้ตรงสายเป๊ะๆ พี่จบปริญญาตรีวิทยาการคอมพิวเตอร์ครับ หรือ Computer Science และปริญญาโทจบสาขาการจัดการการตลาดครับ และอยากบอกอีกอย่างนึงว่า พี่ก็ไม่ได้จบเมืองนอก หรือมหาวิทยาลัยรัฐชื่อดังใดๆ และตำแหน่งงานที่พี่ทำก็ไม่ได้ตรงกับความต้องการของมหาวิทยาลัยที่วางเอาไว้ว่าจบแล้วต้องเป็นโปรแกรมเมอร์ จบแล้วต้องเป็นนักการตลาด

ประโยคที่ว่า “เพิ่งรู้ตัวว่าชอบ” โห บอกเลยว่าแม่งโคตรดี การที่รู้ตัวเองว่าชอบอะไร มันมีค่ามากเลยนะ พี่ยินดีกับคนที่รู้ตัวเร็วว่าชอบอะไร ส่วนคนที่รู้ช้าอย่าเพิ่งเครียดหรือวิตกกังวลไป พี่เชื่อว่า สิ่งดีๆ หลังจากนั้นมันจะรอเราอยู่ อย่ากลัวที่จะเปลี่ยนแปลง ถ้าเปลี่ยนแล้วดี ก็ถือว่าดีมาก แต่ถ้าเปลี่ยนแล้วไม่ได้เป็นแบบที่ตั้งใจไว้ ก็ถือว่าเป็นบทเรียนครับ แน่นอนว่า ณ เวลาที่พลาดพลั้ง มันเสียใจแหละ แต่รีบกลับมาหาทางออกต่อ

คำตอบนะครับ เปลี่ยนอาชีพได้ครับ มันอาจจะช้า แต่ได้ทำแน่นอน เหมือนที่พี่บอกตอนต้นครับ ลองไม่คิดถึงเรื่องเงิน เราอยากทำอะไร ลองวางแผนดูครับ หรือระหว่างเราทำงานที่เราไม่ได้ชอบเนี่ย ลองหาโปรเจคเล็กๆ ที่เราชอบหรืออยากทำ ลองเอามาทำดูก่อน เพราะถ้าหากเรายังไม่เคยทำ เราอาจจะไม่รู้เลยก็ได้ว่าเราอยู่กับมันได้จริงหรือป่าว มันมีประโยคนึงที่พี่บอกกับน้องๆ หลายคนเลยว่า “งานทุกงานมันมีปัญหาหมดแหละ แต่ปัญหาแบบไหนที่เราอยู่กับมันได้ และเราอยากจะแก้ปัญหานั้น”

งานทุกงานมันมีปัญหาหมดแหละ แต่ปัญหาแบบไหนที่เราอยู่กับมันได้ และเราอยากจะแก้ปัญหานั้น

ภาพบรรยากาศการอบรมพร้อมเสื้อสุดเท่ห์จาก Sketch

คำแนะนำในการเตรียมตัวสัมภาษณ์งานด้าน Design

สิ่งที่สำคัญของการสัมภาษณ์งาน คือประสบการณ์ของเราครับ และประสบการณ์ของเรามันก็อาจจะมีหลายแบบมากๆ และการสมัครงานมันก็หลายวิธีด้วย แต่ที่แน่ๆ มันมักจะเป็นแบบ one way communication ครับ หมายถึง เราต้องส่งอะไรบางอย่างไปบอกเค้าครับว่าเราทำงานนี้ได้ เราเลยสมัครงานนี้ แต่จะทำยังไงให้เค้ารู้ว่าเราทำได้ละ?

เราก็ต้องเล่าครับ วิธีเล่าแบบดั่งเดิมก็อาจจะเขียนจดหมาย, ส่ง resume เล่าประวัติอย่างย่อ การทำงาน ยิ่งเราเป็น Designer ด้วย ผลงานต่างๆ ที่เคยทำ หรือการทำ portfolio ก็ควรจะต้องตามมาด้วย ซึ่งวิธีการเล่า ก็ควรจะเล่าให้เข้าใจง่าย เพราะมันควรจะต้องใช้เวลาเพียงน้อยนิด เพื่อรู้ว่าเราเหมาะกับหน้าที่ที่เค้าเปิดรับตำแหน่งนี้ยังไง

ควรจะเล่าในเอกสารหรือ resume ได้ว่า งานที่เราทำ ทำด้วยวิธีการใด ทำไมถึงทำ ทำให้ใคร เจออุปสรรคอะไรบ้าง ผลลัพธ์เป็นยังไง แล้วได้เรียนรู้อะไรจากงานนั้น

ไม่ว่าจะตำแหน่ง UI Designer, Visual Designer หรือ UX Designer ก็ควรจะเล่าในเอกสารหรือ resume ได้ว่า งานที่เราทำ ทำด้วยวิธีการใด ทำไมถึงทำ ทำให้ใคร เจออุปสรรคอะไรบ้าง ผลลัพธ์เป็นยังไง แล้วได้เรียนรู้อะไรจากงานนั้น พี่ว่าอันนี้เป็นสิ่งที่สำคัญมากๆ คนสัมภาษณ์เค้าอยากรู้หลักๆ เลยคือ กระบวนการคิด และการแก้ปัญหาครับ 

ถ้าเอาคำตอบแบบตรงกับคำถามเลยว่า เตรียมตัวสัมภาษณ์ยังไง 

  • ทำการบ้านมาก่อน ว่าบริษัทมีผลงานอะไรบ้าง 
  • ไปให้ถึงก่อนเวลา สำรวจสถานที่ 
  • รถไฟฟ้าหรือมอไซค์เท่านั้น อย่าไว้ใจการขับรถ เพราะท้องถนนเอาแน่เอานอนไม่ได้
  • ไม่ต้องตื่นเต้น ตอบให้ตรงคำถาม
  • เตรียมคอมตัวเองไปและ internet เปิดให้พร้อมใช้งาน เปิด file/folder พอร์ทงานรอไว้เลย (ถ้าใช้ Google Slide ควรเปิดแล้วดูให้ครบทุกหน้าก่อนพับหน้าจอ เพราะรูปจะได้โหลดไว้ก่อน หรือ export PDF มาก่อนเลย)
  • เก็งคำถามล่วงหน้าไปก่อน และลองซ้อมตอบก่อน เช่น ถ้าเกิดปัญหา….คุณจะแก้ปัญหานี้ยังไง, ถ้าผมอยากได้….ภายใน…..แล้วเกิดปัญหาว่าทำไม่ได้ จะทำยังไง และลองซ้อมกับเพื่อนหรือแฟนดูบ้าง
  • เก็งคำตอบแล้ว เก็งคำถามด้วย เพราะเค้าจะเปิดโอกาสให้เราถาม สำคัญมากนะครับ เค้าจะดูด้วยว่าเราสนใจเค้ามากน้อยขนาดไหน คำถามที่ดีก็จะทำให้น่าสนใจมากขึ้น เช่น ปกติแล้วที่นี่เวลาไปหาลูกค้าจะมีหน้าที่ส่วนไหนไปบ้าง ใช่…..หรือเปล่าครับ / คืออย่าถามแบบดูไม่รู้ แต่ต้องมีคำตอบในใจหรือที่คาดการณ์แล้ว คนสัมภาษณ์จะไม่คิดในใจเลยหรอว่า “อะไรกันแค่นี้ไม่รู้หรอว่าเวลาไปหาลูกค้ามีใครไปบ้าง”
  • ควรถามสวัสดิการนะครับ อย่าให้เกิดเหตุการณ์ว่า “ทำไมตอนสัมภาษณ์พี่ไม่เห็นบอกผมเลย” เราเองเนี่ยแหละที่พลาด
  • ลองถามพวก career path หรืออนาคตทีมของบริษัทไว้ก็ดีว่าเค้าจะ scale ทีมไหม ยังไง เราจะได้แพลนอนาคตตัวเองไปด้วย

เอาประมาณนี้แล้วกัน นี่ให้คำตอบสดๆ มาก ฮ่าๆ นึกได้ประมาณนี้ พี่เคยเขียนบทความเรื่องสัมภาษณ์งานไว้ด้วย ลองไปหาอ่านที่ medium พี่นะครับ พี่ไม่ลง URL ให้นะครับ เดี๋ยวไม่อ่านสัมภาษณ์ด้านล่างต่อ พี่เสียใจ ฮ่าๆ

คำแนะนำสำหรับดีไซน์เนอร์มือใหม่

ทำเยอะๆ ศึกษาเยอะๆ อย่าหยุดเรียนรู้ครับ สังเกตสิ่งรอบตัวและตั้งคำถามกับตัวเองบ่อยๆ เช่น งานนี้มันทำให้ใครนะ ใครเป็นคนใช้งาน ใช้งานแบบอื่นได้ไหม เค้าคิดจากอะไรทำไมถึงได้งานแบบนี้ออกมา เค้าใช้เครื่องมืออะไรบ้างนะ ต้องใช้เวลานานไหมนะ กลายเป็นหัวข้อที่ตอบน้อยสุดเลย แหะๆ แต่มันก็ควรจะเริ่มต้นแบบนี้จริงๆ สำหรับมือใหม่ครับ และมือเก่าก็ต้องทำอยู่เรื่อยๆ มีวินัยกับตัวเองตลอดเวลา 🙂 

Meetup หรือเว็บไซต์แนะนำที่ไม่ควรพลาด

งาน Meetup มีเยอะมากเลยครับ ยิ่งเราทำงานสาย Design มันก็ถือว่ามีเยอะมากๆ แต่ก่อนพี่ก็จัดของ UX Connext ครับ เดี๋ยวนี้ไม่ค่อยได้จัดการแล้ว แล้วก็มีใน Facebook group ช่ือ UX Thailand ก็จะมีประกาศ Meetup อยู่เรื่อยๆ ถ้าเอาหลักๆ จะมี 2 ผู้จัดหลัก ที่แนะนำเลยคือ

บรรยากาศงาน Meetup ที่ไปเป็นประจำ เจอหน้ากันแล้วอย่าลืมทักทายกันนะ
บรรยากาศงาน Meetup ที่ไปเป็นประจำ เจอหน้ากันแล้วอย่าลืมทักทายกันนะ

ถ้ามีโอกาส อยากให้ลองไปงานอื่นๆ ที่ไม่ใช่ Meetup สายตัวเองด้วย ลองดูก่อน มันอาจจะยาก แต่ลองไปดูบรรยากาศ วิธีการทำงาน วิธีแก้ปัญหาของเค้าด้วย รวมถึงไปงานอีเวนท์ต่างๆ ด้วยนะ ไปเปิดหูเปิดตา เปิดรับความรู้ใหม่ๆ หรือข่าวใหม่ๆ 

เมื่อตอนปลายปีพี่ลองไปงาน UXSEA จัดที่สิงคโปร์ ราคาเข้างานไม่แพงมาก ประเทศเพื่อนบ้านเราก็เริ่มมีงาน UX ด้วย ราคาไม่แพงมาก ถือว่าเดินทางไปรับความรู้ ฝึกใช้ภาษาบ้าง (เพราะพี่ก็ไม่เก่ง ฮ่าๆ) และใช้โอกาสไปเที่ยว ได้เห็นอะไรใหม่ๆ จะได้เกิดการตั้งคำถามหรือเห็น service ที่ไม่ิชนหูชินตาเราบ้าง จะได้เกิดการเรียนรู้ครับ

ส่วนเว็บไซต์ที่ไม่ควรพลาด เราชอบเว็บนี้ครับ

  • https://www.interaction-design.org/ เพราะเราเรียนเว็บนี้อยู่ด้วย
  • https://www.nngroup.com/ ความรู้และบทความก็มีมากเลยครับ
  • https://uxdesign.cc/ เป็น medium ที่มีนักเขียนหลากหลายประเทศ รวมถึงคนไทยด้วย

สกิลแนะนำที่ควรมีในยุค 2019 หรือหนังสือที่น่าสนใจ

พี่เป็นคนขี้เกียจอ่านหนังสือครับ ฮ่าๆ โคตรแย่เลยเนอะ แต่ก็พยายามอ่านอยู่นะครับ ก็ซื้อหนังสือมาหลายเล่ม จริงๆ มุมมองพี่ อนาคตจะเป็นเรื่อง soft skill ครับ แปลเป็นไทยมันคืออะไรดีอะ ทักษะทางด้านการจัดการและอารมณ์ น่าจะประมาณนี้ เพราะพี่เชื่ออย่างนึงว่า การลงมือทำ มันเกิดจากการฝึกฝนที่ใช้งานบ่อยๆ หาอ่านเทคนิคแล้วก็ทำมันซ้ำๆ แต่เรื่องการจัดการ การรับมือ การเข้าใจคน เป็นทักษะที่ต้องใช้ความเข้าใจอย่างมีที่มาที่ไป คิดวิเคราะห์ได้ หรือคาดการณ์ได้ประมาณนึง คือมันไม่มีสูตรสำเร็จในการจัดการทุกอย่างแน่นอน แต่มันต้องใช้ทักษะในการคิดเยอะมากๆ critical thinking สำคัญมากๆ จะเรียกว่าพื้นฐานเลยก็ว่าได้

การทำอะไรบ่อยๆ เราเรียกว่าการฝึกฝน ถ้าเราฝึกฝนบ่อยๆ จะเกิดเป็นความชำนาญ เมื่อเราชำนาญมากแล้ว จะเกิดเป็นสัญชาตญาณ

พี่ชอบหนังเรื่องนึงและก็ชอบยกประโยคนี้มาพูดกับคนอื่นบ่อยๆ มีหนังเรื่อง triple tap เป็นหนังฮ่องกงครับ ตัวละครตัวนึงพูดว่า “การทำอะไรบ่อยๆ เราเรียกว่าการฝึกฝน ถ้าเราฝึกฝนบ่อยๆ จะเกิดเป็นความชำนาญ เมื่อเราชำนาญมากแล้ว จะเกิดเป็นสัญชาตญาณ” พี่ว่า สัญชาตญาณเนี่ยสำคัญ มันต้องตอบและคิดออกมาได้ทันที คนทำงาน Design ที่เป็น Digital Product อย่างทุกวันนี้ เราไม่ควรตอบแค่ว่า “สวย” แต่ควรตอบได้ว่า มันมีที่มาที่ไปอย่างไร ได้ทันทีที่มีคนถาม ต้องมีชุดข้อมูลในการตอบและวิธีการตอบที่ทำให้คนฟังเข้าใจได้ง่าย

สุดท้าย ทักษะที่สำคัญมากๆ สำหรับพี่ คือ การสื่อสาร เพราะหน้าที่ของ Designer คือการทำชิ้นงานออกมาที่มีคุณค่าด้วยตัวงาน รวมถึงบอกที่มาที่ไป เหตุผลในการสร้างชิ้นงาน รวมถึงการซักถามด้วย เพราะเราก็ต้องนำ feedback มาปรับปรุงงานในครั้งต่อไปถัดไป การสื่อสารแทบจะอยู่ในทุกขั้นตอนเลย ตั้งแต่เริ่มทำงาน ก็ต้องไปรับ requirement, เสร็จก็ต้องมาทำ research

หากคุณคือ UX แต่ UI ก็ใช่ว่าจะทำไม่ได้ เพราะก็ต้องรู้เพื่อให้งานตัวเองแข็งแรงขึ้น, ทำงานเสร็จก็ต้องส่งมอบให้ developer อีก อธิบายว่าทำไมถึงออกแบบเช่นนั้น เพื่อให้ developer เข้าใจเหตุผลการออกแบบ เพราะเผื่อบางทีเค้าจะได้ช่วยเราตรวจงานได้ หรือเราอาจจะเผลอทำอะไรตกหล่นก็ได้ คำว่า “ทีม” สำคัญมากๆ


ฝากผลงาน

ผลงานเขียน https://medium.com/@Sutham

Facebook https://web.facebook.com/sutham

Podcast กับเพื่อนที่เป็น Lead Data ก็จะเป็นการนั่งคุยกันระหว่าง UX และ Data ครับ เพราะคิดว่าน่าจะมีอะไรสนุกๆ เมื่อทั้งสองศาสตร์มาเจอกันครับ ยังไงก็ ฝากติดตามด้วยนะครับ ที่เพจ หมีเรื่องมาเล่า https://web.facebook.com/2bearstalk/ และ podbean https://twobearstalk.podbean.com/

คอร์สอบรม UX นะครับ https://v1.skooldio.com/courses/ux-foundations-2


สำหรับคนที่ชอบอ่านบทความประวัติอาชีพที่น่าสนใจ เส้นทางอาชีพ ไม่ว่าจะเป็นทั้งทำงานบริษัท ฟรีแลนซ์หรือธุรกิจส่วนตัว ติดตามอ่านกันได้ในบทความชุด Designil Chats ทุกสัปดาห์

อ่าน Designil Chats EP.1 สัมภาษณ์คุณพิชญ์ PRODUCT DESIGNER คนไทยในออสเตรเลีย
อ่าน Designil Chats EP2 ทำความรู้จักอาชีพขายธีมบน THEMEFOREST กับ NUTZUMI

The post EP3 เส้นทางอาชีพกับป๋อม สุธัม UX Designer appeared first on Designil.

]]>
https://www.designil.com/designil-chats-ep3.html/feed 0 8524
EP2 ทำความรู้จักอาชีพขายธีมบน Themeforest กับ Nutzumi https://www.designil.com/designil-chats-ep2.html https://www.designil.com/designil-chats-ep2.html#respond Sun, 04 Aug 2019 10:06:46 +0000 https://www.designil.com/?p=8513 Designil Chats EP.2 นำเสนอเรื่องราวอาชีพแปลกใหม่ที่หลายคนอาจจะยังไม่เคยได้ยิน หรือเคยได้ยินแต่พอลองทำก็ต้องพากันถอดใจไปหลายราย แต่จะมีใครทราบบ้างว่าอาชีพนี้สามารถสร้างรายได้ให้เราเป็นอาชีพหลักได้ เราได้พูดคุยกับพี่นัท Nutzumi ผู้จำหน่าย Digital Product บนเว็บไซต์ E-Commerce ชื่อดังอย่าง Themeforest มานานกว่า 8 ปี พี่นัทได้ถ่ายทอดเรื่องราวการทำงาน การแก้ไขปัญหาสำหรับลูกค้า..

The post EP2 ทำความรู้จักอาชีพขายธีมบน Themeforest กับ Nutzumi appeared first on Designil.

]]>
Designil Chats EP.2 นำเสนอเรื่องราวอาชีพแปลกใหม่ที่หลายคนอาจจะยังไม่เคยได้ยิน หรือเคยได้ยินแต่พอลองทำก็ต้องพากันถอดใจไปหลายราย แต่จะมีใครทราบบ้างว่าอาชีพนี้สามารถสร้างรายได้ให้เราเป็นอาชีพหลักได้

เราได้พูดคุยกับพี่นัท Nutzumi ผู้จำหน่าย Digital Product บนเว็บไซต์ E-Commerce ชื่อดังอย่าง Themeforest มานานกว่า 8 ปี พี่นัทได้ถ่ายทอดเรื่องราวการทำงาน การแก้ไขปัญหาสำหรับลูกค้า การบริการ ที่ทำแล้วรุ่งจนกลายมาเป็นอาชีพหลักที่ทำมาจนถึงปัจจุบัน พี่นัทเองยังเล่าถึงการผ่านปัญหาอุปสรรคที่อ่านแล้วขอบอกว่า ไม่ง่าย พร้อมแชร์เรื่องการทำงานอย่างไรให้มีความสุข รวมถึงการจัดสรรเวลาเพื่อไปงานจับมือน้องมิวสิค BNK48

แนะนำตัวกันก่อน

สวัสดีครับ ชื่อนัทครับ ปัจจุบันเป็น Author อยู่ ที่ Themeforest, GraphicRiver ของ Envato ครับ ประมาณ 8 ปีได้แล้วล่ะ (เริ่มตอนปี 2011) จริง ๆ ก็มีขายที่ CreativeMarket ด้วยนิดหน่อยนะ

ปัจจุบันทำงานที่ไหน

พกคอมไปไหนมาไหนตลอดครับ พอไปๆมาๆ กรุงเทพกับที่บ้านต่างจังหวัด เลยไม่ค่อยลำบากเท่าไร ขอแค่มีอินเตอร์เน็ต

เริ่มต้นสนใจการออกแบบ หรือสายอาชีพนี้ได้อย่างไร

ชอบงานออกแบบครับ แต่ไม่ได้เรียนมาสายนี้โดยตรงครับ พอสมัครงานในบริษัทไอที ก็เลยได้เริ่มทำในตำแหน่งยอดฮิต คือ Customer Support ครับ ทำมาอยู่ 2 ปีกว่าๆ ระหว่างนั้นก็คอยสะกดจิตบอกเจ้านายอยู่เรื่อยๆว่า ผมอยากทำ Web Design นะครับ จนเค้าให้โอกาสลองช่วยทำ แล้วก็ได้ย้ายแผนกมาอยู่ Graphic Design ครับ ก็ทำมาเรื่อยๆ ถึงได้รู้ว่าการเขียนโค้ดในภาษาต่างๆนั้น ไม่ง่ายเลย ก็เลยกลายเป็นว่าเน้นหนักไปทาง Design เสียมากกว่าครับ

วันนึงก็มาเจอการขายไฟล์งานที่ GraphicRiver เลยคิดอยากจะลองดูบ้าง ถ้าขายได้ก็ดี เป็นค่าขนม ค่าเดินทาง แต่ก็ทำมาเรื่อยๆจนถึงทุกวันนี้ กลายเป็น Full-time ไปแล้ว เป็นค่ากินอยู่ ฯลฯ ส่วนที่เปลี่ยนมาสิงอยู่ Themeforest ก็เพราะว่า GraphicRiver ค่อนข้างอยู่อยากครับ(ไม่พอกินนั้นแหละ) ประกอบกับได้ยินข่าวที่คนไทยมาประสบความสำเร็จที่นี่ ก็เลยมาลองหาดูครับว่าพอจะมีอะไรที่ทำได้บ้างจนมาเจอหมวดนึง คิดว่าพอทำไหว ก็ลองส่งขายดูครับ พอเริ่มขายได้ประมาณนึง ก็รู้สึกสนุก จึงมีอันที่สอง สาม ฯลฯ ตามมา

การตอบคำถาม Support ลูกค้าบนเว็บ Themeforest
การตอบคำถาม Support ลูกค้าบนเว็บ Themeforest – ขายมานานจนได้เป็น Elite Author

งานปัจจุบันบนเว็บ Themeforest ทำอะไรอยู่บ้าง

95% คือ Email Template ครับ ตอนที่เข้าไป หมวดนี้มี template น้อยมาก น่าจะ 200 กว่าๆ (ตอนนี้เกือบ 2,000 แล้ว) ช่วงหลังมานี้ก็ไม่ค่อยได้ส่งงานใหม่เท่าไรแล้วครับ ด้วยข้อจำกัดของ HTML email ทำให้การดีไซน์จำกัดมาก ไม่สามารถลูกเล่นอะไรได้เหมือนการทำเว็บ ทุกวันนี้เน้นตอบอีเมล์ คอย Support ลูกค้า รู้สึกว่าสุดท้ายเราก็วนกลับมาเป็นแผนก Customer Support อยู่ดีหนีไม่พ้น

นาน ๆ ทีก็จะมีเข้าร่วมกิจกรรมแข่งประกวดชิงรางวัลที่ทาง Envato เป็นผู้จัด ส่วนใหญ่จะเป็นช่วงที่เค้าเปิดหมวดใหม่ ต้องการคนมาอัพไฟล์ใส่เยอะๆ ของรางวัลก็เป็นเงิน ไม่เยอะเท่าไร ที่อยากได้คือ Badges ครับ เป็นเหมือนป้ายสัญญาลักษณ์ใต้ชื่อเรา มันก็จะสนุกคล้าย ๆ กับการไล่ปลด Achievement ตอนเล่นเกมส์นั้นแหละครับ

บางทีก็จะได้รับการติดต่อจาก Author ท่านอื่นปรึกษากันในเรื่องต่างๆครับ แต่ก็มีหลายคนที่หายไปทำอย่างอื่นแล้วก็เยอะครับ

ผลงานขายดีของ Nutzumi ชื่อว่า Koble
ผลงานขายดีของ Nutzumi ชื่อ Koble

มีงานอดิเรกที่ชอบเป็นพิเศษบ้างมั้ย เห็นว่าโอชิน้องมิวสิค BNK48

ฮั่นแหน่ อย่างอื่นก็มีนะครับ Netflix นี่นับว่าเป็นงานอดิเรกไหม ไหนๆงานเราก็อยู่กับหน้าจอเกือบตลอดแล้ว พอว่างๆก็มีสลับไปดูซีรีย์บ้างครับ ส่วนน้องมิวสิคก็เหมือนไอเท็มลับใช้ฟื้นฟูจิตใจเราให้สดชื่นหลังจากเหน็ดเหนื่อยกับการการตอบปัญหากับลูกค้าครับ เพราะการเข้าไปดูหนังใน Netflix ไม่สามารถฮีลลิ่งเราได้เหมือนน้อง 555 พูดไปก็เขิน พอดีกว่า

Nutzumi และภาพถ่าย 2 shot กับน้องมิวสิค BNK48
พี่นัทและภาพถ่าย 2 shot กับน้องมิวสิค BNK48

การแบ่งเวลาติดตามไอดอล และการทำฟรีแลนซ์

โอโห มีขยี้ 555 จริงๆ ก็ไม่ได้ติดตามขนาดนั้นครับ จะไปก็แค่งานอีเวนท์หลักๆ อย่าง งานจับมือ, หรือ 2shots อะไรแบบนี้ครับ งานนอกอื่นๆ ก็อาศัยดูย้อนหลังจาก Fancam ที่เค้าถ่ายกันครับ(ขอบคุณครับ) ระหว่านั้นถ้ามีปัญหาด่วนเข้ามาจริงๆ ผมอาจจะโชคดีตรงที่ทำมานานแล้ว คำถามส่วนใหญ่จึงมักจะเป็นคำถามที่มีคำตอบในหัวอยู่แล้ว

ปกติก็จะพยายามเคลียร์ให้หมดทุกวันครับ ไม่ปล่อยค้างข้ามวัน เว้นแต่ลูกค้าจะตอบช้าเอง ซึ่งมีบ่อยครับ ที่ลูกค้า ASAP มา ทางเราก็ตอบกลับแทบจะทันที ขอข้อมูลเพิ่มบ้างฯ แต่ทาง ลค. ก็หายไป 5-6 ชม. ช้าจนไม่แน่ใจว่าใครรีบกว่ากัน

เพราะลูกค้าส่วนใหญ่จะอยู่คนละ time zone ตอนกลางวันมันก็จะเงียบๆ มาคึกคักกลางคืนดึกๆครับ  ซึ่งเราก็จะเคลียร์ให้หมดก่อนนอน ไม่งั้นนอนไม่หลับ (จริงๆ)

รับมือยังไงในการ Support ลูกค้าที่มาจากทั่วโลก พร้อมคำถามร้อยแปดพันอย่าง

ช่วงแรกๆ อาจจะยังไม่ชิน เพราะปัญหา, คำถามต่างๆ มันใหม่ไปหมด ดีที่เคยทำงาน IT Support มาบ้าง แต่การรับมือ ลค. ที่มาจากทั่วโลกนั้น ไม่ค่อยเหมือนกันเลยเสียทีเดียว

อย่างแรกคือความหลากหลายด้านพื้นฐานความรู้ครับ ถ้าเจอลูกค้าที่พอมีความรู้บ้างจะถือว่าโชคดีมาก เวลาอธิบายถึงข้อจำกัดอะไรก็เข้าใจเราง่ายๆ ลูกค้าที่มีปัญหามากที่สุดคือไม่เข้าใจในสิ่งที่ตนเองซื้อ เอะอะก็จะของ Refund อย่างเดียว ซึ่งอย่างที่รู้กันว่าสินค้าเราเป็น Digital Product เมื่อซื้อแล้วโหลดไปแล้วก็ถือว่าได้รับเรียบร้อย ต่อให้คืนเงิน เขาก็ยังมีไฟล์อยู่ดี

บางทีถึงกับสอนเป็นเรื่องเป็นราว พอคุยกันจบปิดเคสเหมือนปิดคอสเรียน ลูกค้าได้ความรู้ สวนเราได้เรท 5 ดาว บางคนเค้าก็ให้ทิปนะครับ เราก็แปะลิงค์ PayPal ไปครับ หลังๆก็จะทำเป็น Knowledge Base ส่วนตัวไว้ มี FAQ ไปเลยครับ ง่ายดีมีปัญหาอะไรก็สามารถหาคำตอบได้ด้วยตัวเอง

เคสแปลกๆก็มีเยอะครับ เช่น เจอปัญหาบางอันที่แก้ไขไปนานแล้ว เราก็เลยแนะนำให้โหลดเวอร์ชั่นใหม่ แต่เขาก็จะยืนยันจะให้เราแก้ไขไฟล์เวอร์ชั่นที่เขามี ให้ใช้ได้ไปก่อน คุยไปคุยมาสรุปว่าเขาไปโหลดไฟล์เรามาจากเว็บเถื่อนแจกฟรีครับ…

หรืออีกแบบ เช่น ลูกค้าที่เอาไปแก้ไขจนพังแล้วเอากลับมาให้เราแก้ โดยอ้างว่าไฟล์เราไม่ดี ซึ่งมักจะมาในสภาพที่แทบจำไม่ได้เลยว่านี่งานเรา

ค้นหาแรงบันดาลใจใหม่ ๆ มาจากไหนตลอดเวลา

น้องมิวส.. อะ ผิดๆ นั้นกำลังใจ

ส่วนใหญ่จะเป็น Pinterest ครับ พยายามหาอะไรที่ไม่เกี่ยวกับงานเรา แล้วมาปรับแต่งให้เข้ากับสิ่งที่เราทำ เพราะเชื่อว่าไอเดียใหม่ๆ เกิดจากหลายๆมารวมกัน ถ้าเราค้นหาแต่ในที่เดิมๆ ความคิดก็จะวนอยู่ที่เดิม ที่สำคัญก็คือให้เวลากับมันครับ อะไรที่คิดว่าสวยแล้วดีแล้ว ถ้าพักไว้สักแปปอาจจะมีไอเดียแปลกใหม่ที่บรรเจิดกว่าเดิมก็ได้

ข้อดีอย่างนึงของการขายงานใน Marketplace แบบนี้คือ เราจะไม่มีหัวข้อ Requirement ที่เจาะจงในการออกแบบ เหมือนรับงานลูกค้า เราจะทำอะไรก็ได้ ขอให้ถูกต้องได้มาตรฐานตามกฏของ Marketplace ถ้าลูกค้าชอบก็จะซื้อไปดัดแปลงใช้งานกับธุรกิจของเขาเอง ดังนั้นหน้าที่หลักๆของเราคือการต้องอัพเดทความรู้ตามเทรนตลอดเวลาครับ เช่นการอ่านบทความที่ Designil ครับ (เย้)

มีไหมที่ไอเดียตัน มีวิธีจัดการอย่างไร

มีแน่นอน และบ่อยมากๆด้วยครับ อย่างแรกที่ทำคือหยุดคิดแล้วลองหากิจกรรมอย่างอื่นทำครับ ออกไปวิ่ง ไปดูหนัง อยากไปเธียเตอร์ BNK นะ แต่ก็ไม่เคยสุ่มได้สักที T-T ฯลฯ แต่ได้ดีสุดสำหรับผมคือนอนครับ หลับไปเลย เหมือนรีสตาร์ทตัวเอง แบบที่เค้าเรียก Power Nap

แต่เนื่องจากการส่งงานขายกับ Marketplace ไม่มีเดทไลน์ ไม่มีใครมาทวงงาน เลยค่อย ๆคิดได้ครับ ฟังดูชิล ๆ แต่ถ้าไม่คอยเตือนตัวเองรักษาความสม่ำเสมอ ก็จะไม่มีรายได้ ยังไงก็ชิลไม่ได้ครับ

การส่งงานขายกับ Marketplace ไม่มีเดทไลน์ ไม่มีใครมาทวงงาน ถ้าไม่คอยเตือนตัวเองรักษาความสม่ำเสมอ ก็จะไม่มีรายได้ ยังไงก็ชิลไม่ได้ครับ

elite
ของที่ได้รับจาก Envato ตอนเป็น Author Lv.8 (Elite)

ได้ยินมาว่ามีปัญหาลิขสิทธิ์เยอะมาก

คงต้องทำใจให้ได้ก่อนครับ สินค้าเราเป็น Digital Product การโดนก็อป, โดนเลียนแบบ เป็นสิ่งที่หลีกเลี่ยงไม่ได้ เป็นเรื่องของจิตสำนึกและมารยาทของแต่ละบุคคล ยิ่งเราขายดีสินค้าเด่น ก็จะมีใครสักคนพยามเลียนแบบเราแน่นอน แต่เขาก็จะทำได้แต่สิ่งที่เราทำไปแล้ว ไม่มีทางก็อปสิ่งที่เรากำลังคิดอยู่ได้ สุดท้ายลูกค้าที่อยากได้อะไรสดใหม่ก็จะมาตามเราที่ตัวบุคคล แทนที่จะรอของเลียนแบบ และสิ่งสำคัญที่ลูกค้าไม่มีทางได้จากคนอื่นคือคุณภาพและบริการครับ

ส่วนเรื่อง ลูกค้าเอาไฟล์ไปแจกฟรียังไม่เคยจับได้ แต่คิดว่ามีอยู่แล้วล่ะ ก็ทำใจครับอย่างน้อยเขาก็ซื้อไปแจกน่ะนะ ตั้งแต่ทำมา มีคนซื้อแบบ Extended License ได้ยังไม่ถึงสิบครั้งเลย หลายครั้งที่เราไปเจอไฟล์งานเราในเว็บโหลดเถื่อน แรกๆ ก็แสดงตัวพร้อมหลักฐานแจ้งลบ เขาก็ลบให้นะ แต่หลังๆมันเยอะจนตามลบไม่หมดแล้ว

เลยทำใจคิดว่าเป็นการโฆษณาอีกทางนึง เพราะไฟล์โหลดเถื่อนส่วนใหญ่มักจะเป็นเวอร์ชั่นเก่าๆ แล้วเขาก็แปะลิงค์ Affiliate มาที่ Themeforest หน้าขายไฟล์ของเรา ก็ถ้าใครอยากได้เวอร์ชั่นล่าสุดก็ต้องซื้อนะจ๊ะ

Nutzumi กับผลงานตั้งแต่ออกแบบไปจนถึงเขียนโค้ด
Nutzumi กับผลงานตั้งแต่ออกแบบไปจนถึงเขียนโค้ด

รับมืออย่างไรถ้าเจอปัญหาลิขสิทธิ์

บางทีมันก็พูดยากครับ แล้วแต่กรณี คงต้องพยายามเซฟตัวเองก่อน อย่างแรกคงเป็นการระมัดระวังในการใช้รูปหรือ Assets ต่างๆ ควรเช็คดูให้เรียบร้อยว่าอนุญาติให้เราใช้งานได้ถึงในระดับไหน เรื่องการออกแบบดีไซน์ก็ต้องเข้าใจและมั่นใจว่าผลงานเรานั่นมีความ Original เพียงพอไม่ใช่การลอกเลียนแบบ เพราะแรงบันดาลใจกับการลอก มันห่างกันนิดเดียว

ส่วนถ้ามีปัญหาใน Marketplace ก็ลองติดต่อ จนท. เป็นตัวกลางได้ครับ เค้ายินดีช่วยเหลือ เขามีวิธีการตรวจสอบ ซึ่งส่วนใหญ่ก็มักจะดูออกไม่ยากครับ

envato

ขายธีมออนไลน์เป็น Passive Income?

จริงๆ ก็ขึ้นอยู่กับมุมมองของแต่ละคนด้วยครับ ว่า Passive ที่คิดเป็นแบบไหน ถ้าเป็นการขายไฟล์งานแบบนี้ยอมรับว่าไม่ง่ายและยากขึ้นทุกวัน ยิ่งถ้าคิดจะทำให้เป็น Passive แล้วต้องขยันสุดๆไปเลย แบบว่า เสร็จชิ้นนี้แล้วเริ่มคิดทำอันใหม่ต่อทันที แล้วทำแบบนี้นานแค่ไหนก็ไม่รู้หรือจนกว่าจะถอดใจไปเอง อีกทั้งยังรับประกันไม่ได้ด้วยว่าสุดท้ายมันจะเป็น Passive Income ไหม ไม่รู้ด้วยว่างานเราจะขายไปได้อีกนานหรือเปล่า หรือจนกว่าจะมีผลงานใครสักคนมาตีตลาดแข่งกับเรา (ซึ่งมักจะเป็นของเลียนแบบแล้วแข่งราคากัน) หรือวันนึงเทคโนโลยีใหม่ๆมา สิ่งที่เราทำอยู่อาจจะไม่มีใครใช้อีกต่อไปเลยก็ได้

ต้องคิดไว้อยู่เสมอว่าผลงานทุกชิ้นมีช่วงเวลาของมัน สักวันก็จะตกเทรนด์ ถ้าเปรียบกับวงการไอดอลก็คือ เราไม่มีทางเป็นเซ็นเตอร์ได้ตลอดไป เดี๋ยวก็จะมีรุ่นต่อไปที่สดใหม่กว่ามาแทน แล้ววันนึงเราก็จะแกรดออกจากวงการ ในช่วงที่เรากำลังรุ่งอยู่ก็จงพยามเกี่ยวความรู้ประสบการณ์ให้เยอะที่สุดครับ

สุดท้าย ถ้าจะบอกว่าขายธีม ขายกราฟฟิคเป็น Passive Income ก็น่าจะเป็นในส่วนของเจ้าของ Marketplace มากกว่าคนทำขายครับ ที่สร้าง Community ขึ้นมาให้คนแข่งกันขายของโดยที่ตัวเองได้ส่วนแบ่งจากทุกคน

ท้าทายที่สุดกับอาชีพนี้

ทำอย่างไรให้สินค้าของเรายังขายได้อยู่เรื่อย ๆ ครับ การทำให้สินค้าเราโดดเด่นเป็นเรื่องยากเสมอ เหมือนการแข่งขันตลอดเวลา

สิ่งที่ท้าทายที่สุดก็คงเป็นการทำอย่างไรให้สินค้าของเรายังขายได้อยู่เรื่อย ๆครับ การทำให้สินค้าเราโดดเด่นเป็นเรื่องยากเสมอ เหมือนการแข่งขันตลอดเวลา อีกทั้ง Envato มีการเปลี่ยนแปลงอัพเดท Marketplace อยู่เรื่อยๆ การปรับตัวและติดตามข่าวสารตลอดเวลา บางครั้ง Envato ก็ออกกฏหรือมีอะไรใหม่ ๆ ที่ส่งผลกระทบกับ Authors โดยตรง ซึ่งเขาก็รับฟังนะ เวลามีคนไม่พอใจกันเยอะ ๆ แต่สุดท้ายไม่ว่าใครก็ไม่สามารถเปลี่ยนใจเปลี่ยนนโยบายเขาได้อยู่ดี

ฝากถึงคนที่กำลังมองหาอาชีพฟรีแลนซ์

ฟรีแลนซ์ คือความไม่แน่นอน มีทั้งช่วงรุ่งและร่วง อาจจะดูชิลๆเท่ๆนั่งทำงานที่บ้านหรือที่ไหนก็ได้ แต่ที่จริง ต้องขยันและมีวินัยในการเตือนตัวเอง และที่สำคัญที่สุดคือรักษาสุขภาพกันด้วยนะครับ

ผลงาน Email Template จาก Nutzumi
ผลงาน Koble – Email Template จาก Nutzumi

ฝากผลงานให้เพื่อน ๆ ได้ติดตาม

Facebook : nutz.teeravit
Portfolio : Themeforest.net/user/nutzumi
Twitter : @nutz_teera

แล้วก็ฝากติดตามน้องมิวสิคด้วยนะคร้าบ 555


สำหรับคนที่ชอบอ่านบทความประวัติอาชีพที่น่าสนใจ ไม่ว่าจะเป็นทั้งกับทำงานบริษัทหรือจะฟรีแลนซ์ ติดตามอ่านกันได้ในบทความชุด Designil Chats ทุกสัปดาห์

อ่าน Designil Chats EP.1 สัมภาษณ์คุณพิชญ์ PRODUCT DESIGNER คนไทยในออสเตรเลีย

The post EP2 ทำความรู้จักอาชีพขายธีมบน Themeforest กับ Nutzumi appeared first on Designil.

]]>
https://www.designil.com/designil-chats-ep2.html/feed 0 8513
Designil Chats EP.1 สัมภาษณ์คุณพิชญ์ Product Designer คนไทยในออสเตรเลีย https://www.designil.com/designil-chats-ep1.html https://www.designil.com/designil-chats-ep1.html#respond Wed, 31 Jul 2019 06:49:07 +0000 https://www.designil.com/?p=8454 Designil Chats EP1 พี่พิชญ์ Product Designer เล่าเรื่อง UI ถึง UX การทำงาน การหางาน เส้นทางการเรียนรู้และการเติบโตในสายอาชีพ พร้อมสกิลที่ควรมี ไม่ควรพลาด

The post Designil Chats EP.1 สัมภาษณ์คุณพิชญ์ Product Designer คนไทยในออสเตรเลีย appeared first on Designil.

]]>
ถ้าใครได้ติดตาม Fanpage Designil คงจะได้เห็นโพสต์สอบถามเพื่อนๆเรื่องเกี่ยวกับบทความในเพจล่าสุด “อยากอ่านบทความเรื่องอะไรมากที่สุด” ผลโหวตของเราเป็นที่น่าสนใจมาก เพราะผลโหวตสูงสุดคือ “อยากเรียนรู้เรื่องประสบการณ์ทำงานของดีไซน์เนอร์” เราจึงได้เกิดเป็นบทความเนื้อหาประสบการณ์วงในจากพี่ๆ เพื่อนและน้องๆ ที่มากประสบการณ์ในวงการ UX, UI ทั้งในและต่างประเทศชุดนี้ขึ้นมาค่า

บทความจาก Designil Chats EP.1 วันนี้ เรารับเกียรติได้มาสัมภาษณ์พี่พิชญ์ Product Designer ผู้เต็มไปด้วยประสบการณ์หลากหลาย ตั้งแต่การทำ UI ไปจนถึง UX วันนี้เราได้พี่พิชญ์มาเล่าเรื่องการทำงาน การหางาน เส้นทางการเรียนรู้และการเติบโตในสายอาชีพนี้

พี่พิชญ์​ – Product Designer

เริ่มต้นแนะนำตัวกันก่อนนะคะ พี่ชื่ออะไรเอ่ย ทำงานอยู่ประเทศไหนคะ

สวัสดีครับ ผมชื่อพิชญ์ครับ ปัจจุบันทำงานเป็น Product Designer ให้กับ Telstra ซึ่งเป็นบริษัทโทรคมนาคมอยู่ที่ Sydney, Australia ครับ 

สนใจการออกแบบได้อย่างไร

เริ่มต้นทีแรกเลยเนี่ย ผมทำ Graphics ทำ Web มาก่อนครับ แต่พอมาถึงจุดนึงผมรู้สึกว่าตัวเองไม่ได้เป็นคน creative เท่าไหร่ แบบว่าให้ทำโฆษณา หรือทำ งาน print อะไรพวกนี้ทำไม่ได้ ก็เลยเบนเข็มไปเรียนรู้ทางด้าน technical มากขึ้น

แล้วพอตอนเรียนมาเจอวิชานึงชื่อว่า HCI หรือ Human Computer Interaction ซึ่งเป็นวิชาที่โฟกัสในการออกแบบ interaction ระหว่าง user กับ computer  พอเรียนไปก็สนุกมากเลยครับ เหมือนมันเป็นการออกแบบที่ใช้หลักการและเหตุผลเข้ามาร่วมด้วย แล้วที่สำคัญเลยมันสามารถวัดผลได้ 

จุดเริ่มต้นการทำงานในสายอาชีพนี้

ก็อย่างที่บอกว่าผมได้ไปเรียนวิชา HCI มาใช่มั้ย ก็ตอนนั้นแหละผมก็ได้รู้จักอาชีพ UX Designer ขึ้นมาด้วย จากนั้นผมก็เลือกพวก elective อีกหลายตัวที่มันเกี่ยวกับสาย UX แล้วผมก็สร้าง Port แล้วก็หว่านสมัครงานในตำแหน่ง UX/UI Designer พอดีว่าตอนนั้นผมไปเรียนโทที่อเมริกา แล้วมันจะมีวีซ่าชื่อ OTP ซึ่งออกให้นักเรียนได้หางานได้ปีนึง ก็สมัครไปเยอะจนได้งานเป็น UX/UI Designer ให้กับบริษัท Software Consultancy เล็กๆที่ San Francisco ครับ ก็จนมาถึงตอนนี้เรียกว่าทำงานสายนี้มาได้ 8 ปีแล้วครับ

งานปัจจุบันที่ทำอยู่ ทำอะไรบ้าง

โปรเจ็คที่ผมดูแลอยู่ที่ Telstra ตอนนี้จะเป็นในส่วนของ Self Service – Mobile Assurance ครับ เป็น tool ที่ช่วยให้ลูกค้าสามารถเข้ามา Troubleshoot เวลามือถือมีปัญหา โดยที่ไม่ต้องโทรเข้าไปที่ Call Centre เพราะตอนนี้ที่บริษัทกำลังพยายามปรับทุกอย่างให้เป็น Digital ครับ

สำหรับในส่วนเนื้องาน ด้วยความที่เป็น Product Designer ผมก็จะทำตั้งแต่ end-to-end เลยครับ ตั้งแต่ discovery, workflow, wireframe, prototype ไปจนถึงในส่วนของ UI Design และ delivery 

ความท้าทายของงานที่ทำอยู่ในปัจจุบัน

ส่วนที่ท้าทายมากๆก็คือการที่เราต้องทำงานร่วมกับฝ่ายอื่นๆ ในบริษัทครับ เมื่อก่อนผมทำงานในบริษัทขนาดเล็กก็จะไม่ค่อยเจออะไรแบบนี้เท่าไหร่ แต่พอบริษัทใหญ่แล้ว กลายเป็นว่า stakeholder มีเยอะแยะมาก อย่างเราจะออกแบบ Troubleshoot Tool เนี่ย เราก็ต้องไปคุยกับฝ่าย process ฝ่าย agent อีก เพราะว่า tool ของเรามันต้องมี workflow ที่มันตรงกับทางฝ่าย call center ด้วย เรียกว่าวันๆนึงเนี่ย มี meeting เยอะกว่าเวลานั่งทำงานอีก

สายอาชีพดีไซน์มีชื่อเรียกมากมายตั้งแต่ UI Designer, UX Designer, Product Designer, Service Designer มีความแตกต่างกันอย่างไร

แตกต่างกันครับ แต่ทั้งนี้ทั้งนั้นแล้วมันก็จะแตกต่างกันไปตามบริษัทด้วย แต่ถ้าจะให้พูดง่ายๆ UI Designer ก็จะรับผิดชอบแค่ในส่วนการออกแบบ User Interface อย่างเดียว บางบริษัทอาจจะเรียกว่า VD หรือ Visual Designer สำหรับ UX Designer ก็ส่วนมากแล้วจะรับผิดชอบในส่วนของ Discovery, workflow และ wireframe ประมาณว่าจะออกแบบยังไงให้ใช้งานง่าย แล้วก็จะส่งต่อไปให้ UI Designer ทำต่อ

ส่วน Product Designer จะทำรวมทั้ง UX/UI พูดง่ายๆว่าเป็น Full-Stack Designer ครับ ทำทุกอย่างจบในตัวคนเดียว

สำหรับ Service Designer จะมองกว้างขึ้นไปอีกโดยไม่ได้หยุดอยู่แค่ product สมมุติว่า ยกตัวอย่างจาก Troubleshooting tool ของผมเนี่ย ถ้าเป็น Service Designer จะอาจจะมองไปถึง process ของด้าน call center ด้วย

ผู้จ้างดูอะไรจากเราบ้างเวลาต้องการรับดีไซน์เนอร์เข้าไปทำงาน

อย่างแรกเลยก็คือ attitude อันนี้ไม่ได้จำกัดแค่ designer นะ แต่รวมไปถึง อาชีพอื่นๆด้วย เพราะแน่นอนว่าถ้าเวลาคุยแล้วคุณ attitude ดีคุยแล้วผู้จ้างถูกชะตาคุณก็มีชัยไปกว่าครึ่ง อย่างที่สองก็คือ skills ว่าคุณจะสามารถทำงานที่มอบหมายได้หรือไม่ ซึ่งตรงนี้บางทีก็จะวัดกันจาก portfolio หรือการทำ design excercise ที่หลายๆบริษัทมักจะให้ผู้สมัครทำ

พูดถึงเรื่องการทำงาน การสมัครงาน หากเราเคยโดนปฏิเสธงานเราควรสมัครงานซ้ำหรือไม่คะ

แน่นอนครับคือคิดง่ายๆว่า ถ้าเราสมัครงานเนี่ย โอกาสมันมีได้กับไม่ได้ใช่มั้ย แต่ถ้าไม่สมัครอะ มันมีแต่ไม่ได้อย่างเดียวเลย แต่เวลาเราจะสมัครงานซ้ำเนี่ย ต้องให้มั่นใจว่าเราแก้ไข หรือพัฒนาในจุดด้อยของเราด้วยนะ อย่างถ้าเราไม่ถูกเรียกตั้งแต่ตอนส่ง Resume เราก็ต้องปรับให้มันดีขึ้นก่อนจะส่งใหม่ ปรับพอร์ทปรับอะไรงี้ด้วย อีกอย่างยิ่งเวลาเราสมัครงานบริษัทใหญ่ๆ คนที่พิจารณา เรามักจะไม่ใช่คนเดิม เพราะงั้นสมัครซ้ำได้แน่นอน Skills หรือ background เราอาจจะไปเหมาะสมกับอีกทีมมากกว่าก็ได้ครับ

คำแนะนำสำหรับดีไซน์เนอร์มือใหม่

ฝึกคิดวิเคราะห์เยอะๆ เวลาเราใช้ product อะไรเราก็ลองมาวิเคราะห์ดูว่า ทำไมเค้าออกแบบมาแบบนี้ ถ้าเรารู้สึกว่ามันใช้งานยากก็ลองคิดดูว่าถ้าเป็นเราจะออกแบบยังไงให้ใช้งานง่ายขึ้น อีกอย่างที่สำคัญก็คืออ่านและเรียนรู้เยอะๆ อย่าหยุดอยู่แค่ใน topic ของการ design เพราะจะทำงานด้านนี้ให้ดี เราต้องเข้าใจทั้งในเรื่องของ จิตวิทยา เทคโนโลยี ไปถึงเรื่องของ business ด้วย 

อ่านและเรียนรู้เยอะๆ อย่าหยุดอยู่แค่ใน topic ของการ design เพราะจะทำงานด้านนี้ให้ดี เราต้องเข้าใจทั้งในเรื่องของ จิตวิทยา เทคโนโลยี ไปถึงเรื่องของ business ด้วย 

สกิลพื้นฐานสำหรับน้องๆ มือใหม่

เอาจริงๆเลยนะ Soft Skills เป็นสิ่งที่จำเป็นมากถึงมากที่สุด เพราะว่าเวลาเราออกแบบอะไรออกมาเนี่ยการที่จะอธิบายงาน หรือแนวคิดของเราให้คนอื่นเข้าใจได้เป็นอะไรที่สำคัญมากๆ เพราะเวลาออกแบบมาแล้วบ่อยครั้งที่เราต้อง get buy in จาก stakeholder ด้วย

สกิลแนะนำที่ควรมีในปี 2019

ถ้าฮ๊อตฮิตมากๆในยุคนี้ ผมคิดว่าเป็นในเรื่องของการ Run workshop เพราะจากนี้ไปผมคิดว่าการออกแบบมันจะไม่ได้หยุดอยู่แค่ตัวคุณแล้ว การที่จะ facilitate workshop ให้ stakeholder หรือทีมเข้ามามีส่วนร่วมในการออกแบบ solution เรียกว่าเป็น skills ที่สำคัญมากๆทีเดียว

สำหรับคนไทยที่อยากมาทำงานต่างประเทศ มีคำแนะนำอะไรบ้าง

สำหรับคนที่ไทยอยากมาทำงานต่างประเทศ ถ้าง่ายสุดก็คือมาเรียนก่อน เพราะว่าเป็น pathway ที่ดีมากที่จะหางานหลังจากเรียนจบครับ แต่ถ้างานคุณเจ๋งหรือฝีมือดีจริงๆ สมัคร online เลยก็ได้นะครับเพราะก็เคยเห็นคนที่ได้มาทำงานต่างประเทศโดยสมัครมาเองอยู่เหมือนกัน แต่อาจจะมีส่วนน้อยเพราะว่าโดยปกติแล้วบริษัทเค้าก็จะพยายามหาผู้สมัคร local ก่อน

ในส่วนของหางานปกติแล้วผมจะหาผ่าน Linkedin นะครับ มีงานของทุกประเทศเลย บริษัทใหญ่ๆก็โพส job ad บนนี้เยอะครับ –  https://www.linkedin.com/jobs/ 

แต่สำหรับใครที่สนใจเรื่องการมาเรียนต่อออสเตรเลีย ขอแอบโปรโมทเอเจนท์แฟนหน่อยครับ Step Abroad Visa: https://www.facebook.com/StepAbroadVisa ติดต่อมาสอบถามได้เลยครับ ให้คำแนะนำฟรี 😀

ติดตามผลงานและติดต่อพี่พิชญ์ได้ที่ช่องทางด้านล่างนี้เลย

Portfolio : www.pittfolio.com
Facebook / linkedin : Pitt Rasananda
Twitter : @gzstudio

ถ้าใครสนใจอยากมาพูดคุย ก็ติดต่อมาได้ครับ 🙂


อ่านมาถึงตรงนี้หลาย ๆ ท่านคงจะคุ้นชื่อ และอาจจะได้เคยฟังพี่พิชญ์ให้สัมภาษณ์ผ่าน Podcast ออนไลน์อย่างทาง Podcast ออนไลน์อย่าง Design Picnic กันมาบ้างแล้ว ใครที่กำลังมองหา Mentor ในการทำงานด้านนี้หรือการศึกษาต่อ ลองติดตามอ่านบทความในชุดของ Designil Chats ได้เลยนะคะ

อย่าลืมกดไลค์เพจ Designil สำหรับกิจกรรมโหวตเนื้อหาบทความชุดถัดไปกันนะค้า เดี๋ยวแอดนัทจัดให้ตามแรงโหวตเลย ^0^

The post Designil Chats EP.1 สัมภาษณ์คุณพิชญ์ Product Designer คนไทยในออสเตรเลีย appeared first on Designil.

]]>
https://www.designil.com/designil-chats-ep1.html/feed 0 8454
Web Page Speed: ตำราสรุป ทำยังไงให้เว็บเราโหลดเร็วสุด ๆ https://www.designil.com/how-to-web-page-speed.html https://www.designil.com/how-to-web-page-speed.html#respond Mon, 29 Jul 2019 22:54:27 +0000 https://www.designil.com/?p=8457 ในปัจจุบันการสร้างเว็บไซต์ใหม่กลายเป็นเรื่องง่ายไปแล้ว ไม่ว่าจะใช้เครื่องมือฟรี หรือเครื่องมือเสียเงิน ไม่ว่าจะเขียนโค้ดเป็นหรือไม่ ไม่ว่าจะอยากได้บลอคหรือ E-Commerce ก็สามารถสร้างเว็บไซต์เองได้ แต่สิ่งสำคัญที่หลาย ๆ คนมองข้ามไป คือ ทำยังไงให้เว็บไซต์เร็ว? เรื่องของ การเพิ่มความเร็วในการโหลดเว็บไซต์ อาจจะดูไม่สำคัญ แต่ตอนนี้กลายเป็นเรื่องใหญ่แล้ว เพราะ Google นำความเร็วเว็บไซต์มาจัดอันดับ Search..

The post Web Page Speed: ตำราสรุป ทำยังไงให้เว็บเราโหลดเร็วสุด ๆ appeared first on Designil.

]]>
ในปัจจุบันการสร้างเว็บไซต์ใหม่กลายเป็นเรื่องง่ายไปแล้ว ไม่ว่าจะใช้เครื่องมือฟรี หรือเครื่องมือเสียเงิน ไม่ว่าจะเขียนโค้ดเป็นหรือไม่ ไม่ว่าจะอยากได้บลอคหรือ E-Commerce ก็สามารถสร้างเว็บไซต์เองได้ แต่สิ่งสำคัญที่หลาย ๆ คนมองข้ามไป คือ ทำยังไงให้เว็บไซต์เร็ว?

เรื่องของ การเพิ่มความเร็วในการโหลดเว็บไซต์ อาจจะดูไม่สำคัญ แต่ตอนนี้กลายเป็นเรื่องใหญ่แล้ว เพราะ Google นำความเร็วเว็บไซต์มาจัดอันดับ Search Ranking เพราะฉะนั้นเว็บไหนโหลดช้าก็จะอยู่ในอันดับต่ำกว่าคู่แข่ง เสียทั้งผู้ใช้และรายได้

ในบทความนี้เราจะมาสรุปครบทุกเรื่องที่คุณต้องรู้เกี่ยวกับการเพิ่มความเร็วของเว็บไซต์ เทคนิคเหล่านี้สามารถนำไปปรับใช้ได้กับเว็บไซต์ทุกรูปแบบครับ

โดยบทความซีรีย์ Web Page Speed จะแบ่งเป็น 3 ตอน คือ:

  1. ส่วนประกอบของเว็บไซต์สำคัญ ๆ ที่เกี่ยวข้องกับความเร็วเว็บ และเทคนิคการ Optimise เว็บให้เร็วสุด ๆ
  2. วิธีการ Optimise รูปภาพและวีดิโอให้โหลดเร็ว
  3. วิธีการ Optimise JavaScript ให้โหลดเร็ว & สรุป

ก่อนอื่นเลยต้องขอขอบคุณตั้ง Warat Wongmaneekit ที่ถ่ายทอดวิชา Web Speed Optimisation ให้กับผมครับ เจ้าตัวอยากให้เผยแพร่ความรู้นี้ไปให้ถึงคนไทยเยอะ ๆ ผมเลยเอามาสรุปให้อ่านกันในบทความนี้ครับ ถ้ามีประโยชน์ก็แชร์กันไปเยอะ ๆ นะครับ

ทำไมความเร็วของเว็บไซต์ถึงสำคัญ

เว็บเร็ว = SEO ดี

เหตุผลหนึ่งที่บอกไปก่อนหน้านี้แล้ว คือ เรื่องของอันดับ Search Ranking ที่ทำให้ SEO (Search Engine Optimisation ) ของเราไม่ดี หากเว็บไซต์โหลดช้าครับ ช่วงนี้จึงไม่แปลกว่าทำไมบางเว็บไซต์คนเข้าจาก Google ถึงเยอะขึ้นแบบก้าวกระโดด ในขณะที่บางเว็บไซต์คนเข้าลดฮวบ

เว็บเร็ว = User Experience ดีขึ้น

Google มีการทำวิจัยมาแล้วว่า ถ้าเว็บไซต์บนมือถือโหลดช้าเกิน 3 วินาที คนเข้าจะลดลงไปถึง 53% และถ้าเกิน 5 วินาที คนเข้าก็จะลดลงไปถึง 90% เลยครับ

นอกจากนั้นยังมีข้อมูลการทดสอบจากหลากหลายสถาบันที่ยืนยันว่าในปัจจุบันผู้ใช้ไม่รอเว็บไซต์ที่โหลดช้าอีกต่อไปแล้ว

เว็บเร็ว = รายได้เพิ่มขึ้น

ข้อนี้ต่อเนื่องมาจาก 2 ข้อที่ผ่านมาครับ ไม่ว่าเราจะหารายได้บนเว็บจากการขายของแบบ E-Commerce หรือ หารายได้จากโฆษณาบนเว็บ เมื่อเรามีคนเข้าเว็บไซต์น้อยลง รายได้ก็หดหายเป็นธรรมดาครับ

เว็บเราควรจะเร็วแค่ไหนดี

ก่อนที่เราจะมาดูกันว่าเราทำยังไงได้บ้างให้เว็บเร็วขึ้น มาคุยกันก่อนว่า “เว็บเราควรจะโหลดเร็วแค่ไหนถึงจะเรียกว่าเร็ว”

2 วินาที คือ ระยะเวลาสูงสุดที่ผู้ใช้จะยอมรับได้สำหรับเว็บ E-Commerce แต่ที่ Google เราตั้งเป้าให้โหลดต่ำกว่า 0.5 วินาที

Maile Ohye, Google (2010)

จาก บทความของ Google ที่อัพเดทล่าสุดในปี 2018 ได้บอกไว้ว่า ความเร็วเว็บควรจะอยู่ต่ำกว่า 3 วินาที ครับ

google website speed fast
ความเร็วเว็บไซต์ที่ Google แนะนำ คือ ควรต่ำกว่า 3 นาที

เพราะฉะนั้นผมคิดว่าถ้าเว็บไซต์เราโหลดต่ำกว่า 3 นาทีก็ถือว่าโอเคแล้ว แต่ถ้าจะให้ดีที่สุด ยิ่งต่ำได้ยิ่งดีครับ อันนี้น่าจะขึ้นอยู่กับคอนเท้นท์บนเว็บไซต์ของเราด้วยครับ (แต่ตัว Content เช่น CSS, JS, Image, Video ต่าง ๆ ก็มีวิธีบีบอัดให้โหลดเร็วขึ้นครับ ซึ่งเดี๋ยวจะเล่าให้ฟังกัน)

ความเร็วเว็บไซต์เกิดจากอะไร: ทำไมบางเว็บถึงโหลดช้า บางเว็บถึงโหลดเร็ว

ก่อนที่จะมาดูเทคนิคการ Optimise ความเร็วของเว็บไซต์ ก็อยากให้เข้าใจกันก่อนว่าเวลาโหลดเว็บไซต์มันเกิดอะไรขึ้นบ้างครับ เพราะจะทำให้เราปรับความเร็วได้ตรงจุดมากขึ้น

เว็บไซต์เกิดจาก HTML + CSS + JavaScript + Asset อื่น ๆ

ไม่ว่าจะเป็นเว็บไซต์ที่หรูหราแค่ไหน ใช้ Library, Framework ชื่อดังอย่าง React, Angular, VueJS หรือใช้ Frontend Framework อย่าง Bootstrap หรือ Bulma ก็ไม่สำคัญครับ

เพราะสุดท้ายแล้วทุกเว็บไซต์เกิดจากการรวมกันของภาษาที่เป็นต้นกำเนิดเว็บเหล่านี้:

  • HTML – อันนี้ใครใช้ React ก็จะเขียนในรูปแบบ JSX แต่สุดท้ายแล้วก็กลายมาเป็น HTML เหมือนเดิม
  • CSS – ไม่ว่าจะใช้ SASS หรือ LESS ก็ Compile ออกมาเป็น CSS
  • JavaScript – ต่อให้เราเขียนเป็น TypeScript ก็ Compile ออกมาเป็น JavaScript เช่นกันครับ
  • Asset อื่น ๆ – เช่น รูป วีดิโอ ฟ้อนต์ ฯลฯ

ขั้นตอนการโหลดเว็บไซต์ ไม่ได้เกิดขึ้นในขึ้นตอนเดียว

การโหลดเว็บไซต์ คือ ประสบการณ์ที่เราไม่สามารถวัดได้ด้วยค่าค่าเดียว มีหลายขั้นตอนเกิดขึ้นในระหว่างการโหลดที่ให้ผู้ใช้รู้สึกว่าเว็บ “เร็ว” หรือ “ช้า”

Paint Timing Spec, W3C

เวลาเราเข้าเว็บไซต์ไหนก็ตาม สิ่งที่เกิดขึ้นก็คือ:

  1. Browser ส่งคำขอไปยัง DNS เพื่อแปลงโดเมนเว็บไซต์ให้กลายเป็น IP Address ของ Server
  2. พอได้ IP Address มาแล้ว Browser ก็จะส่งคำขอไปที่ Server เพื่อขอไฟล์ต่าง ๆ ในเว็บไซต์ของเรา
  3. ถ้าไฟล์ในเว็บไซต์ของเราเก็บไว้หลายที่ (เช่น ดึง JavaScript ปุ่ม Share จาก Facebook) Browser ก็จะต้องส่งคำขอไปหลายที่ = เว็บไซต์จะโหลดช้าลง
  4. ถ้ามีหลายไฟล์ ใน HTTP 1.1 Browser จะต้องส่งคำขอไปทีละไฟล์ด้วย แต่ในปัจจุบันมี HTTP 2 ที่ช่วยให้ Browser ส่งคำขอแค่ทีเดียว ถ้าเปิดใช้ HTTP 2 เว็บก็จะโหลดเร็วขึ้น
  5. เมื่อได้รับไฟล์มาแล้ว Browser ก็จะนำไฟล์มารัน (เช่น JavaScript) หรือนำมาเรนเดอร์ (เช่น รูปภาพ วีดิโอ) ซึ่งไฟล์แต่ละแบบก็จะส่งผลต่อความเร็วเว็บต่างกัน เดี๋ยวเราจะมาพูดถึงในส่วนต่อไปครับ

จะเห็นว่าในการเข้า 1 เว็บไซต์ มีขั้นตอนต่าง ๆ เกิดขึ้นมากมายเลยครับ

นอกจากนั้น ในเครื่องมือสำหรับเช็คความเร็วเว็บของ Google ชื่อ Lighthouse (สามารถใช้ได้ฟรีใน Google Chrome โดยไปที่แท็บ Developer Tools > Audit) มีการจับเวลาสำหรับขั้นตอนต่าง ๆ ในการเรนเดอร์เว็บไซต์ด้วยครับ

Lighthouse วัดความเร็วเว็บด้วยโมเดลที่ชื่อว่า RAIL (Response, Animation, Idle, Load) โดยจะมีค่าต่าง ๆ อะไรให้เราบ้าง และแต่ละค่าคืออะไร มาดูกันเลยครับ

designil page load time
ผลของการใช้ Lighthouse เช็คเว็บไซต์ Designil.com
  • First Contentful Paint – เวลาที่บราวเซอร์เริ่มเรนเดอร์ส่วนแรกของ DOM (Document Object Model)
  • First Meaningful Paint – เวลาที่ผู้ใช้รู้สึกว่าเนื้อหาหลักของเว็บไซต์ปรากฏขึ้น
  • Speed Index – ความเร็วในการโหลดเว็บ ยิ่งน้อยยิ่งดี
  • First CPU Idle – เวลาที่ส่วนหลัก ๆ ของหน้าเว็บพร้อมใช้งาน
  • Time to Interactive – เวลาที่หน้าเว็บทั้งหน้าพร้อมใช้งาน
  • Estimated Input Latency – เวลาที่หน้าเว็บใช้ในการโต้ตอบ Input จากผู้ใช้ โดย Lighthouse บอกว่าถ้าเกิน 50ms จะไม่ดี

สำหรับการ Optimise ค่าต่าง ๆ ด้านบนนี้ สามารถกดเข้าไปดูทีละค่า แล้วดูที่หัวข้อ Recommendations ทาง Google จะแนะนำไว้ครับ ซึ่งถ้า Optimise ครบทั้งหมด เว็บไซต์ของเราจะโหลดเร็วขึ้นจนรู้สึกได้แน่นอนครับ

ต่อไปเราจะมาพูดถึงเทคนิค 4 ข้อที่จะทำให้เว็บของเราเร็วขึ้นแบบก้าวกระโดดเลยครับ อ่านจบแล้วเอาไปทำตามได้เลย

4 เทคนิค เร่งความเร็วเว็บให้ SEO แซงหน้าคู่แข่ง

เทคนิค 1) ปรับ Web Hosting ของเราให้เร็วสุด ๆ

ความเร็วของเว็บไซต์ไม่ได้ขึ้นอยู่ที่ตัวเว็บไซต์ของเราเท่านั้นครับ แต่ขึ้นอยู่กับ Hosting ที่เราใช้งานอยู่ด้วย โดยมี 2 เรื่องหลัก ๆ ที่เราต้องเช็คเวลาเลือก Hosting ครับ

เรื่องแรก คือ Web Hosting ของเราเป็นประเภทไหน? สามารถอ่านเพิ่มเติมในเรื่องนี้ได้จากบทความ วิธีเลือก Hosting ประเภทต่าง ๆ ได้เลยครับ

what is cloud hosting
Cloud Hosting – ทุกเว็บไซต์ใช้ทรัพยากรแยกจากกัน ทำให้ได้ความเร็วเต็มที่

ประเภท Hosting ที่อยากแนะนำให้ใช้ คือ Cloud Hosting หรือ VPS ครับ เพราะ Hosting แบบนี้จะมีการแบ่งทรัพยากรให้แต่ละเว็บไซต์แบบชัดเจน ไม่ต้องไปแย่งกับใคร รวมไปถึงค่าใช้จ่ายของ Hosting ประเภทนี้ก็ถูกกว่าการซื้อ Dedicated Hosting ทั้งเครื่องด้วยครับ

ถ้าสนใจ Cloud Hosting ที่ Designil ของเราใช้อยู่ สามารถไปดูรายละเอียดได้ที่เว็บไซต์ CloudWays ซึ่งค่าใช้จ่ายเริ่มต้นประมาณเดือนละ 300 บาท แต่คุณภาพเกินราคามาก แถมถ้าสมัครด้วยคูปองโค้ด “DESIGNIL20” จะได้รับส่วนลด 20% สำหรับ 3 เดือนแรกด้วย !

ป.ล. ส่วนลดอันนี้พิเศษสำหรับผู้อ่าน Designil เท่านั้นนะครับ แอดเมลไปคุยกับเค้าเพื่อขอโค้ดมาเลย

อย่างเคสของ Designil ที่ย้ายจาก Shared Hosting แห่งหนึ่งมาอยู่ที่ CloudWays พบว่าความเร็วเพิ่มขึ้นจนน่าตกใจครับ โดยเฉพาะในส่วนหลังบ้านที่มักจะมีปัญหาโหลดช้ามาตลอด แลกกับค่าใช้จ่ายที่เพิ่มขึ้นเล็กน้อยต่อเดือน ผมคิดว่าคุ้มมากครับ

เรื่องที่สอง ที่ต้องเช็คเวลาเลือก Hosting คือ Web Hosting ของเราเก็บเว็บไซต์เราไว้ที่ประเทศไหน? การเข้าเว็บไซต์ก็เหมือนกับการโทรศัพท์ครับ ถ้าปลายทางอยู่ที่ประเทศเดียวกัน หรือใกล้กัน สัญญาณก็จะดีกว่า แปลว่าถ้าเราใช้ Hosting ที่โฮสต์เว็บไว้ในประเทศไทย คนไทยก็จะโหลดเร็ว แต่คนในประเทศไกล ๆ เช่น อเมริกา ก็จะโหลดช้า

อย่างไรก็ตาม เท่าที่ผมทราบ Cloud Hosting ชื่อดังต่าง ๆ ยังไม่มี Server ในไทย เพราะฉะนั้นเว็บไซต์ของเราจะถูกเก็บไว้ในต่างประเทศอย่างเลี่ยงไม่ได้ครับ (Server ที่ใกล้ที่สุดน่าจะเป็นสิงคโปร์) แต่ไม่ต้องห่วงไป เพราะเทคนิคต่อไปที่เราจะพูดถึงมีไว้เพื่อแก้ปัญหานี้โดยเฉพาะ

เทคนิค 2) ใช้ CDN ช่วยกระจายเว็บไซต์ของเราไปทั่วโลก

ผมเคยแนะนำ CDN (Content Delivery Network) กันไปแล้วในบทความ วิธีทำให้เว็บโหลดเร็วใน 5 นาทีด้วย Cache & CDN ถ้าอยากรู้ว่า CDN คืออะไร และมีประโยชน์อย่างไร ก็เชิญได้ในบทความข้างต้นเลยครับ

อธิบาย CDN แบบสั้น ๆ คือ การที่ผลลัพธ์จากเว็บไซต์ของเราถูกก็อปปี้ไปเตรียมไว้ใน Server หลากหลายจุดทั่วโลก เพื่อให้ผู้ใช้ที่ไม่ว่าจะมาจากประเทศไหน ก็จะวิ่งไปอ่านเว็บไซต์ของเราจาก Server ที่ใกล้เค้าที่สุด

cloudflare cdn speed
เปรียบเทียบความเร็ว เว็บที่ใช้ CDN ของ Cloudflare (ซ้าย) และไม่ได้ใช้ (ขวา)

ในปัจจุบันมีผู้ให้บริการ​ CDN หลายเจ้ามากครับ อันที่ยอดฮิตที่สุดในหมู่นักพัฒนาไทย น่าจะเป็น Cloudflare เพราะสามารถใช้งานได้ฟรีสำหรับแพลนพื้นฐานที่ครอบคลุมความจำเป็นหลัก ๆ หมดแล้ว และสามารถอัพเกรดไปแพลนสูงขึ้นถ้าต้องการฟีเจอร์ที่มากขึ้นในอนาคตได้

เพิ่มเติมสำหรับคนที่ใช้ Cloudflare นอกจากจะได้ประโยชน์เรื่องของ CDN แล้ว เรายังได้ HTTP 2 โดยอัตโนมัติ ช่วยให้เว็บโหลดเร็วขึ้น และยังได้ SSL (HTTPS) ฟรี ๆ อีกด้วย

สำหรับคนที่สนใจเริ่มใช้งาน Cloudflare สามารถอ่าน บทความสอนวิธีทำ HTTPS ฟรีใน 5 นาที ได้เลย

เทคนิค 3) ใช้ Cache ให้เป็นประโยชน์

การใช้ Cache ถือเป็นเทคนิคพื้นฐานของการทำให้เว็บไซต์โหลดเร็วเลยครับ เพราะเป็นเทคนิคที่ทำได้ง่าย ไม่กระทบกับโค้ดหลักของตัวเว็บมาก และยังช่วยเพิ่มความเร็วแบบเห็นผลได้ชัดมาก

วิธีการทำงานของ Cache แบบสรุป คือ Cache จะช่วยเก็บไฟล์ผลลัพธ์ให้ และส่งผลลัพธ์ที่เก็บไว้ให้กับผู้ใช้ที่ขอข้อมูลเดียวกัน ทำให้ระบบของเราไม่ต้องประมวลผลใหม่ทุกครั้งที่มีผู้ใช้ต้องการผลลัพธ์

สำหรับตัวอย่างการใช้ Cache ลองนึกถึงเว็บข่าวขนาดใหญ่ที่มีคน 200,000 คนอ่านข่าวเดียวกันพร้อมกัน แทนที่ Server จะประมวลผล 200,000 ครั้ง ก็ประมวลผลรอบเดียว แล้วเก็บเป็น Cache เอาไว้ จากนั้นก็ส่งให้ก้อนนั้นให้กับคนอ่านทุกคน ลดการประมวลผลไปได้ 199,999 ครั้ง

สำหรับวิธีการทำงานของ Cache แบบละเอียด สามารถอ่านได้ในบทความ วิธีแก้ปัญหาเว็บโหลดช้า ง่าย ๆ ด้วย Cache & CDN

how cache work
ตัวอย่างการทำงานของ Cache ใน WordPress – แต่กับ Application ไหน ๆ ก็ใช้แนวคิดเดียวกันนี้ครับ

ถ้าเราใช้เว็บสำเร็จรูป ก็จะมีปลั๊กอินที่ช่วยในการทำ Cache แบบคลิกเดียวเสร็จหลากหลายตัวครับ แต่ถ้าเราไม่ได้ใช้ ก็สามารถติดตั้งเครื่องมือต่าง ๆ มาช่วยได้ เช่น Memcached หรือไปใช้บริการอย่าง AWS Elasticache ครับ

เทคนิค 4) บีบอัดทุกอย่างในเว็บ

สำหรับข้อนี้ เราจะมาเจาะลึกกันในบทความต่อ ๆ ไปของซีรีย์นี้ครับ

องค์ประกอบทุกอย่างของเว็บไซต์ ไม่ว่าจะเป็นโค้ด HTML, CSS, JS, รูปภาพ, วีดิโอ ฯลฯ ล้วนสามารถถูกบีบอัดได้ทั้งหมดครับ ซึ่งถ้าเราบีบอัดดี ๆ เว็บอาจจะเร็วขึ้น 2 เท่า (หรือมากกว่า) เลยทีเดียว

พื้นฐานของการบีบอัด คือ GZIP Compression ครับ เป็นการบีบอัดไฟล์ก่อนส่งกลับมาที่ Browser ของผู้ใช้ ทำให้เว็บไซต์ของเราโหลดเร็วขึ้น (แต่ไม่ได้แปลว่าจะ Render เร็วขึ้นนะครับ)

โฮสต์ส่วนใหญ่ที่ผมเจอ (เช่น CloudWays) ก็มี GZIP มาให้อยู่แล้ว หรือถ้าไม่มี ก็ไปใช้ CDN ของ Cloudflare ตัวฟรี ก็มี GZIP Compression มาให้ด้วยเช่นกันครับ

สรุป: ทำยังไงให้เว็บเราโหลดเร็วขึ้น

จากบทความนี้ น่าจะเห็นกันแล้วว่าเรื่องความเร็วของเว็บมีเทคนิคต่าง ๆ ในการเพิ่มความเร็วมากมายครับ บางอย่างก็ทำได้ง่าย และบางอย่างก็ต้องใช้เวลาครับ

สำหรับมือใหม่หัดเพิ่มความเร็วเว็บไซต์ อยากแนะนำว่าให้ลองใช้เครื่องมือ Lighthouse เลยครับ ฟรี & ดีมากจริง ๆ ลองค่อย ๆ ปรับทีละส่วน ทีละเล็กละน้อยครับ แนะนำให้เปิดคู่ไปกับบทความ สรุปเทคนิค Optimise เว็บให้เร็วทะลุโลก จาก Google Developer Expert มีบอกวิธีการปรับเว็บทีละข้อเลยครับ

ในบทความตอนต่อไป เราจะมาพูดถึงเทคนิคการลดขนาดรูปและวีดิโอกันครับ ซึ่งเป็นทรัพยากรที่โหลดหนักมากที่สุดในเว็บส่วนใหญ่เลย มาดูกันว่ามีวิธีไหนให้เราลดขนาดบ้าง และแต่ละวิธีมีข้อดี-ข้อเสียอย่างไรครับ


หากต้องการติ-ชม หรือถามคำถามเพิ่มเติม ก็สามารถถามไว้ได้ใน Comment ใต้บทความนี้ หรือส่งข้อความมาคุยกันที่ เพจ Designil เช่นเดิมเลยนะครับ

The post Web Page Speed: ตำราสรุป ทำยังไงให้เว็บเราโหลดเร็วสุด ๆ appeared first on Designil.

]]>
https://www.designil.com/how-to-web-page-speed.html/feed 0 8457
Card Sorting คือ ? สอนใช้เครื่องมือทำ UX ยอดนิยม https://www.designil.com/card-sorting.html https://www.designil.com/card-sorting.html#respond Mon, 15 Jul 2019 08:34:45 +0000 https://www.designil.com/?p=8407 Card Sorting คือ? ไม่ใช่การเล่นเกมการ์ดแต่เป็นเครื่องมือที่ใช้ในการทำ UX ยอดนิยมที่ใช้เพื่อวางแผนข้อมูลระบบ หรือนำไปใช้ในการออกแบบ Sitemap ให้กับเว็บไซต์

The post Card Sorting คือ ? สอนใช้เครื่องมือทำ UX ยอดนิยม appeared first on Designil.

]]>
เคยสงสัยหรือไม่ว่าเราจะวิเคราะห์เว็บไซต์เราแบบง่ายๆได้อย่างไร, คนทำ UX วางแผนเว็บไซต์อย่างไร คิดอะไรกว่าจะออกมาเป็นเว็บไซต์แบบนี้

บทความนี้จะเล่าเรื่องเครื่องมือในการทำ UX สำหรับผู้ที่เพิ่งเริ่มต้นอยากจะศึกษาแต่ไม่รู้จะจับต้นชนปลายอย่างไร แอดมินนัทจะมาเล่าเทคนิคและเครื่องมือต่างๆที่น่าสนใจในระดับพื้นฐานมาให้อ่านแบบเข้าใจง่ายกันค่ะ ^0^


เกริ่นนำ

Card Sorting ไม่ใช่การเล่นเกมการ์ดหรือไพ่ยูกิที่เรารู้จักกันแต่อย่างใด แต่เป็นเครื่องมือที่ใช้ใน การทำ UX ยอดนิยมที่ใช้เพื่อวางแผนข้อมูลเพื่อการนำเสนอ หรือที่นิยมมากที่สุดคือนำไปใช้ในการออกแบบ Sitemap ให้กับเว็บไซต์ของเรา บทความนี้เราจะมาเล่าประเภทของ Card Sorting และมีภาพประกอบวิดีโอที่น่าใจให้ผู้อ่านนำเทคนิคไปใช้งานได้จริงกันค่ะ

เราลองมาเล่นเกมตอบคำถามกันดีกว่าว่า Sitemap คืออะไร ?
A. เครื่องมือที่ใช้ทดสอบ eye tracking กับผู้ใช้งาน
B. ชื่ออัลบั้มใหม่ของยังโอม
C. ภาพไดอะแกรม แสดงลำดับขั้นตอนของเว็บไซต์ที่ผู้ใช้งานสามารถเข้าใจได้ง่าย มีความเหมาะสมและใช้งานได้จริงตามหลัก Mental Model

ถ้าหากว่าคุณตอบข้อ B เราขอให้งูมันเลื้อยเข้ามาอยู่ที่เอว
หากคุณตอบข้อ C คือถูกต้องค่า เพราะ Sitemap คือสิ่งที่สำคัญที่สุดในการออกแบบสื่อดิจิตอลของเราแบบเริ่มต้น

เราก็จะมีคำถามตามมาอีกว่า แล้วเราจะออกแบบ Sitemap อย่างไรให้ผู้ใช้งานของเราเข้าใจง่าย?

เครื่องมือนี้จะมาช่วยทำให้เรารวบรวมข้อมูลที่จะสามารถพัฒนาโครงสร้างข้อมูลของเราได้ เพราะการทำ Card Sorting เป็นเครื่องมือที่จะใช้ทดสอบผู้ใช้งานของเรา โดยการให้ Participants หรือผู้ใช้งานเข้ามามีส่วนร่วมในการเรียงการ์ดที่เรากำหนดให้เข้าที่เข้าทางเป็นกลุ่ม โดยในแต่ละการ์ดก็จะมี Label หรือคำที่จะเราจะแสดงในระบบของเราเขียนไว้บนการ์ดนั่นเอง

Card sorting จะเป็นเครื่องมือที่ช่วยตอบเราได้ว่า คำที่เราเขียนนี้เข้าใจยากหรือไม่, การจัดเรียงมีความซับซ้อน มีประสิทธิภาพหรือไม่ และเราจะสามารถมองเห็นภาพทั้งหมดได้ว่า Users จัดกลุ่มการ์ดเข้ากลุ่มเชื่อมโยงกันได้อย่างไร

และในระหว่างการทำทดสอบเอง ผู้ใช้งานของเราก็ยังช่วยแนะนำข้อมูลให้กับผู้ทดสอบอย่างเรานำข้อมูล ผลลัพธ์ไปใช้งานได้มากมาย ไม่ว่าจะเป็นวางแผนการออกแบบ Menus, Navigations, หรือ Taxonomies (การจัดกลุ่มข้อมูล) หรือนำข้อมูลนี้ไปสร้าง ปรับปรุง Sitemap ของเราให้มีประสิทธิภาพมากยิ่งขึ้นได้


Card Sorting คือ?

คือ เครื่องมือที่ช่วยให้เราได้ออกแบบ วางแผนการจัดการโครงสร้างของเว็บไซต์ (Information Architecture) โดยการจัดกิจกรรมเรียงการ์ดกับผู้ใช้งานของเรา ว่าผู้ใช้งานของเราสามารถเรียงข้อมูลเป็นอย่างไร เป็นเหมือนอย่างที่เราคิดไว้หรือไม่ เพื่อให้เรานำข้อมูลที่ได้จากการทำกิจกรรมนี้ไปใช้ในการวางแผนระบบที่เรากำลังจะพัฒนาให้ดียิ่งขึ้น

โดยการทำ Card Sorting นั้นเราสามารถใช้ได้ทั้งการ์ดที่เป็นกระดาษ มีคำด้านใน หรือจะใช้ระบบออนไลน์ในการทำแบบทดสอบก็ได้


ข้อดี

Card Sorting จะช่วยให้เราเข้าใจความคาดหวังของผู้ใช้งานระบบของเรา ว่าเข้าใจหัวข้อที่เรากำลังจะนำเสนอได้ระดับใด

  • ช่วยในการวางแผนโครงสร้างของเว็บไซต์ (IA)
  • ช่วยให้เราตัดสินใจได้ว่าสิ่งที่เราจะนำเสนอในระบบของเรานั้นเข้าใจง่ายหรือไม่
  • ช่วยในการออกแบบ Menus, Navigations, Sitemap, Taxonomies

Card Sorting มีแบบไหนบ้าง?

มีทั้งหมดสองแบบด้วยกัน มีทั้งแบบ OPEN และ CLOSED ทั้งนี้ทั้งนั้นเทคนิคทั้งสองแบบนี้ขึ้นอยู่กับเราด้วย ว่าเราจะเลือกเทคนิคไปใช้ในการทำการทดลอง มาดูกันว่าแต่ละแบบแตกต่างกันอย่างไรด้วยวิดีโอด้านล่างนี้เลย

สำหรับคนที่ไม่อยากดูวิดีโอ ข้ามไปอ่านด้านล่างได้เลย แอดมินสรุปมาละเอียดยิบ

ตัวอย่างเรามีการ์ดที่มีข้อมูลเป็นนักร้องทั้งหมด และเราอยากดูว่าผู้ใช้จะจัดเรียงนักร้องตามกลุ่มใด

ปาล์มมี่
Body Slam
Cocktails
25 Hours
Big Ass
Youngohm
Polycat
Blackpink
Potato
Zeal
BNK48

Open Card Sorting – การเรียงการ์ดแบบเปิด

คือการที่ผู้ใช้งานสามารถจัดเรียงข้อมูลเข้าตามกลุ่มใดที่ตนเองต้องการก็ได้ และผู้ใช้งานจะต้องเป็นคนกำหนดหัวข้อในการจัดเรียงเอง

เช่น นายสมชาย จัดกลุ่ม Blackpink และ BNK48 ไว้รวมกัน และตั้งชื่อกลุ่มด้วยตนเองว่า Girl Group

Closed Card Sorting – การเรียงการ์ดแบบปิด

คือการที่เรากำหนดหัวข้อของแต่ละกลุ่มทั้งหมดแล้ว และเราจะให้ผู้ใช้งานจัดเรียงข้อมูลข้างต้น เข้าในกลุ่มที่เรากำหนดไว้ให้เท่านั้น

เช่น แอดมินนัท ตั้งชื่อกลุ่มของ Rock Music, Pop Music, Hiphop ไว้ให้กับผู้ใช้งาน เพื่อดูว่าผู้ใช้งานหรือ นายสมชาย นั้นจะสามารถเลือกนักร้องที่มีแนวเพลงนี้เข้ามาอยู่รวมกันได้ถูกต้องหรือไม่


เราสามารถเริ่มต้นการทำ Open Card Sorting การเรียงการ์ดแบบเปิด ก่อนเพื่อทดสอบว่า มีหัวข้อไหนที่มันจะดูฟังเป็นไปได้มากที่สุดสำหรับกลุ่มผู้ใช้งานของเรา
หลังจากที่เราทำเสร็จ เมื่อได้ข้อมูลมาแล้วนั้น เราจะตัดสินใจได้แล้วว่าระบบของเราจะใช้การจัดกลุ่มแบบไหน เราค่อยไปทำ Closed Card Sorting อีกครั้งเพื่อทดสอบว่าผู้ใช้งานของเรามีแนวคิดเดียวกับที่เราต้องการจะสื่อไปหรือไม่

หากในอนาคตเราจะทดสอบว่าผู้ใช้งานของเราเข้าใจเมนู ซับซ้อนภายในเว็บไซต์หรือแอพลิเคชั่นของเราหรือไม่นั้น การทดสอบด้วยสิ่งที่เรียกว่า Tree Test เป็นสิ่งที่มีประโยชน์และได้ผลมากกว่า Closed Card Sorting เพราะการทำ Tree Test จะมีหน้าตาที่คล้ายกับการทำเมนูในระบบของเรานั่นเอง

ข้อเสียของการทำ Closed Card Sorting

ผู้เรียงการ์ดในตัวอย่างข้างต้นคือนายสมชาย เวลาทำการทดสอบ นายสมชายจะมองเห็นการ์ดของเราทั้งหมดพร้อมกัน แปลว่าอะไร แปลว่าเห็นทั้งหมดพร้อมกัน ก็ทำให้เรียงการ์ดง่ายกว่าเดิมน่ะสิ

ซึ่งในความเป็นจริงในการใช้ระบบ ผู้ใช้งานจะมองเห็นแค่เมนู Level เดียวเท่านั้น บางครั้งผู้ใช้งานอาจจะหลงผิดไปมา ไปวนลูปอยู่ในระดับ level 2, Level 3 หลงทางเหมือนหลงในใจเธอ

เราก็เลยมีคำแนะนำว่า หากเรามีเมนู sitemap มีเว็บไซต์ที่ทำขึ้นมาอยู่แล้ว การใช้เครื่องมืออย่าง Tree Test จึงมีประสิทธิภาพที่มากกว่า Closed Card Sorting เพราะ Tree Test คือการทดสอบที่เสมือนจริงกับการใช้งานระบบของเรา เราทำการทดสอบโดยการโชว์แค่ Level 1 แล้วค่อยให้ User ไปตามหาอะไรสักอย่างตามเป้าหมายที่เราตั้งไว้เอาเอง

สรุปคือ Tree Test จำลองเมนูในการทำเทสได้สมจริงมากกว่านั่นเอง


ด้านล่างนี้เรานำวิดีโอ การทำ Card Sorting VS. Tree Test ผ่านระบบออนไลน์อย่าง Optimal Workshop มาให้ดูกันด้วย เพื่ออธิบายให้ทุกท่านเข้าใจความหมายของ Tree Test ให้มากยิ่งขึ้นไปด้วยกัน

ระหว่าง Card Sorting หรือ Tree Test เราควรจะทำอะไรก่อน ?

ทั้งสอง Tools นี้ก็ให้ Insights ที่แตกต่างกัน วิธีใช้งานอันไหนก่อนหลังนั้นก็ขึ้นอยู่กับสิ่งที่เราต้องการค้นหานั่นเอง

กรณีที่ 1 ถ้าหากเรากำลังเริ่มทำเว็บไซต์ใหม่

เราควรเริ่มต้นที่ Card Sort เพื่อรวบรวมไอเดีย คิดถึงข้อมูลว่าเราอยากจัดเรียงข้อมูลออกมาเป็นแบบไหน หลังจากเรามาวิเคราะห์ข้อมูลที่ได้มาแล้วนั้น เราแนะนำว่าให้ลองคิดโครงสร้าง Sitemap, Menu ที่เป็นไปได้ออกมาสักสามแบบ

กรณีที่ 2 หากเรามีเว็บไซต์อยู่แล้ว หรือเรามีข้อมูลจากทำ Card Sorting แล้ว

เราจะใช้เครื่องมืออย่าง Tree Testing ในการ Validate (พิสูจน์) ทดสอบข้อมูลของเราว่าสิ่งที่เราทำมานั้น ใช้งานง่ายและมีประสิทธิภาพ

สิ่งที่ได้จากการทำ Tree Testing จะช่วยทำให้เรามองเห็นชัดยิ่งขึ้นว่าการ Labeling หรือการเขียนคำใน Sitemap, Menu ของเรานั้นเข้าใจง่ายหรือไม่

ตัวอย่าง อธิบายไวๆแบบเข้าใจง่าย

โจทย์: แอดมินนัทจะออกแบบเว็บไซต์ Designil ใหม่ โดยมีเว็บไซต์เก่าอยู่แล้ว
วิธีทำการทดสอบ: ว่าผู้ใช้งานของ Designil จะหาอะไรเจอบ้าง
แอดมินนัทก็จะเอาเมนูของ Designil ปัจจุบันมาทดสอบด้วยเครื่องมือ Tree Testing
เป้าหมาย: อยากให้บทความ Freelance มีคนอ่านเยอะขึ้น
กำหนดคำสั่งให้ User ตามเป้าหมายของเรา เช่น ให้ นายสมชาย ตามหาหมวดหมู่บทความ Freelance จากเมนูของเว็บไซต์ ​Designil และติดตามผลว่านายสมชายจะกดหลงไปหลงมา ผิดไปมาผิดมากี่รอบ

สรุป Card Sorting & Tree Test

Card Sorting – Generate Idea
คือการคิดและรวบรวมไอเดีย

Tree Testing – Test Idea
คือการเทสไอเดียของเรา ว่าเมนูหรือโครงสร้างของระบบของเราใช้งานง่ายแค่ไหนในการใช้งาน


ตัวอย่างการทำ Card Sorting แบบออนไลน์

ภาพตัวอย่างประกอบให้ดูด้านล่าง เป็นโปรเจคที่แอดนัททำนอกเวลาทำงานเองค่ะ ^0^

เป็นการทดสอบระบบจับคู่เครื่องสำอางค์ เทสเพื่อนำข้อมูลไปสร้าง Taxonomies ของแอพลิเคชั่น ทดสอบด้วยโปรแกรม Optimal Workshop โปรแกรมออนไลน์เพื่อใช้ในการทำ Card Sorting (สำหรับตัวที่ใช้งานฟรี เราจะใส่ได้แค่ 30 การ์ดและทดสอบได้กับผู้ใช้งานได้แค่จำนวนจำกัด)

Optimal Workshop เป็นเครื่องมือทำช่วยทำ Card Sorting, Tree Testing ด้วยตนเองแบบออนไลน์ มีสถิติให้ดูแบบอ่านง่าย พร้อมสรุปผลให้ดูว่าผู้ใช้งานของเราทำเสร็จภายในกี่นาที แบ่งกลุ่มออกมาเป็นแบบไหนบ้าง และเราก็นำข้อมูลที่ได้ไปใช้ในการออกแบบโครงสร้างของระบบเราต่อ

ตัวอย่างเวลาเราสร้าง Card ทั้งหมด 30 Card เสร็จแล้วจะออกมาหน้าตามแบบด้านล่างนี้

cardsorting online test
ตัวอย่างหน้าตาของระบบ Optimal Workshop ในการทำ Card Sorting ออนไลน์

ภาพด้านล่างนี้เป็นสรุปผล ว่าผู้ใช้งานจาก 8 คนใช้เวลาทำ Open Card Sorting ไปเฉลี่ยคนละ 6.29 นาที

สรุปผล Card Sorting
สรุปผล Card Sorting

ภาพด้านล่างนี้คือการ Merge สรุปผลข้อมูลมาในแผงผัง Dendogram รวบรวมสรุปผลจากผู้ใช้งานทุกคนที่แบ่งกลุ่มมา จะเห็นได้ว่าอันสีเขียวคืออันที่ประสบความสำเร็จ เพราะผู้ใช้ 8 คนสามารถรวมกลุ่มการ์ดเหล่านี้ได้เหมือนกัน 100% ป๊าบ ผลลัพธ์นี้ก็คือ Labeling หรือการตั้งชื่อเรานั้นถูกต้อง เข้าใจง่ายนั่นเอง เราก็สามารถนำ 100% นี้ไปทำ Taxonomies ที่วางแผนไว้ได้อย่างตรงตามเป้าหมาย

ส่วนผลลัพธ์กลุ่มอื่นก็ถือว่าอยู่ในระดับที่รับได้ที่ 70% User มีความสับสนเล็กน้อย อาจจะต้องพิจารณาตามเคสไปว่าจะจัดกลุ่มออกมาเป็นแบบไหน หรือเราอาจจะไปลองเทส Closed Card Sorting หรือ Tree Test อีกรอบเพื่อความมั่นใจในอนาคต

ผลการทดสอบ Card Sorting
ผลการทดสอบ Card Sorting

ด้านล่างนี้เป็นผลลัพธ์แผนผังแบบ Similarity Matrix อันไหนที่คนชอบจัดกลุ่มมารวมกันมากที่สุดจะเป็นสีน้ำเงินเข้ม เอาไว้ดูแบบไวๆ ให้เข้าใจได้ง่าย

วัดผล Card Sorting
วัดผล Card Sorting

ด้านล่างนี้ภาพสุดท้ายเป็นการสรุปผลว่า ผู้ใช้แบ่งมากี่กลุ่มมากที่สุด ของแอดมินนัทนั้นจะเห็นได้ชัดว่าผู้ใช้ส่วนใหญ่แบ่งออกมา 5 กลุ่มด้วยกัน

สถิติ Card Sorting
สถิติ Card Sorting

Optimal Workshop ยังสามารถทำ Tree Test ได้ด้วยนะคะ 😀 ตามวิดีโออธิบายด้านบ่นที่เกริ่นไว้ข้างต้นเลย การสรุปผลจาก Tree Test มี Diagram แบบคูลๆมาให้เราดูด้วย ข้อดีคือนำข้อมูลสรุปไปพรีเซนต์ Stakeholder ให้เห็นได้ง่ายและชัดเจน


สรุป

Card Sorting คือเครื่องมือช่วยในการวางแผนโครงสร้าง จัดกลุ่มข้อมูลของเว็บไซต์ของเรา ช่วยให้เราตัดสินใจได้ว่าสิ่งที่เราจะนำเสนอในระบบของเรานั้นเข้าใจง่ายหรือไม่ เป็นเครื่องมือที่ช่วยในการออกแบบ Menus, Navigations, Taxonomies ให้มีประสิทธิภาพมากยิ่งขึ้น


สำหรับใครที่คิดว่าบทความนี้มีประโยชน์สำหรับการนำไปใช้ในการทำงาน สามารถกดติดตามรับข่าวสารด้านล่างนี้ เพื่ออัพเดทบทความใหม่เป็นประจำทุกสัปดาห์ ขอบคุณสำหรับการติดตามค่า

The post Card Sorting คือ ? สอนใช้เครื่องมือทำ UX ยอดนิยม appeared first on Designil.

]]>
https://www.designil.com/card-sorting.html/feed 0 8407
การทดสอบเว็บกับผู้พิการทางสายตา Web Accessibility https://www.designil.com/web-accessibility-testing.html https://www.designil.com/web-accessibility-testing.html#respond Mon, 08 Jul 2019 02:30:46 +0000 https://www.designil.com/?p=8341 Web Accessibility Case Study ทดสอบเว็บกับผู้พิการทางสายตา ที่จะเล่าวันนี้ได้รับแรงบันดาลใจมาจากงาน GAAD โดยเดือนพฤษภาคมที่ผ่านเป็นวัน Global Accessibility Awareness Day หรือเรียกว่า GAAD ทางที่มหาวิทยาลัยที่แอดมินนัททำงานอยู่ก็เลยจัด Session อบรมบรรยายการใช้งานเว็บไซต์กับผู้พิการ แอดมินนัทเลยขอนำประสบการณ์เรื่องการทำเว็บไซต์ให้กับคนพิการมาเล่าให้ฟัง ว่า Insight..

The post การทดสอบเว็บกับผู้พิการทางสายตา Web Accessibility appeared first on Designil.

]]>
Web Accessibility Case Study ทดสอบเว็บกับผู้พิการทางสายตา ที่จะเล่าวันนี้ได้รับแรงบันดาลใจมาจากงาน GAAD

โดยเดือนพฤษภาคมที่ผ่านเป็นวัน Global Accessibility Awareness Day หรือเรียกว่า GAAD ทางที่มหาวิทยาลัยที่แอดมินนัททำงานอยู่ก็เลยจัด Session อบรมบรรยายการใช้งานเว็บไซต์กับผู้พิการ แอดมินนัทเลยขอนำประสบการณ์เรื่องการทำเว็บไซต์ให้กับคนพิการมาเล่าให้ฟัง ว่า Insight วิธีการใช้งานของแต่ละท่านนั้นเป็นแบบไหน

โดยคนที่มาบรรยายให้กับเราในวันนี้ ท่านแรกคือชายตาบอด และอีกท่านเป็นคนที่เรียกว่า Partialy Blind คือไม่ได้ตาบอด แต่เป็นการพิการทางสายตาชนิดหนึ่ง เป็นชนิดที่สายตาสั้นมากในระดับที่ทำเลสิกไม่ได้ ถึงกับต้องใช้โปรแกรมซูมในการมอง ใช้กล้องส่องทางไกลในการเดินทางเพราะมองไม่เห็นป้ายนำทาง

ทั้งสองท่านนี้เป็นนักศึกษาที่เรียนจบมหาลัยที่แอดมินทำงานอยู่ จบการศึกษาสูงสุดถึงระดับปริญญาโท และเรียกว่าได้ใช้งานเว็บไซต์ของมหาลัยเป็นที่คล่องแคล่วเลยทีเดียว รวมไปถึงใช้ระบบสื่อการเรียนการสอนออนไลน์ในการศึกษาหาความรู้เพิ่มเติมด้านการ เขียน SQL เรียน Database ด้วยตนเอง

ทดสอบเว็บ ผู้บรรยายคนที่ #1

ท่านแรกเป็นคนพื้นเมืองออสเตรเลีย โดยที่ออสเตรเลียเราจะเคารพคนพื้นเมืองมากๆค่ะ เรียกว่า Indigenous Australians เราจะต้องทำเว็บไซต์ให้มีข้อความและสัญลักษณ์ถึงคน Indigenous เพื่อเป็นการแสดงความเคารพต่อความหลากหลายเชื้อชาติ (นอกเรื่องเฉยๆ โอเคไปต่อได้)

ท่านแรกตาบอดสนิทถาวร ขอเรียกชื่อในนามสมมุติว่า Mr. A นะคะ Mr. A ได้นำเสนอการใช้งานเว็บไซต์แบบต่อลำโพงจากคอม และได้ทดลองเล่นเว็บไซต์กับแอพของมหาลัยให้ดู ว่าใช้ screen reader (โปรแกรม Jaws)

เทคนิคหลักที่ Mr. A ได้ใช้งานคือจะใช้คีย์บอร์ดปุ่ม เลื่อนไปที่ Heading ทั้งหมดของหน้าเพื่ออ่านหัวข้อหลักก่อนเสมอ อ่าน Heading ทั้งหมดของเว็บไซต์ก่อนแล้วค่อยไปไล่อ่านข้อความที่เขาสนใจอีกที

ความพิเศษของไอ้โปรแกรมนี่มันก็ดีมาก ในขณะที่เว็บไซต์ทำการโหลดเสร็จเรียบร้อย โปรแกรมก็จะบอกว่าโหลดเสร็จแล้ว มี Heading 10 อัน มีปุ่มกี่อัน

ทดสอบเว็บ กับผู้พิการทางสายตา ตัวอย่างการใช้โปรแกรม Jaws Screen Reader

ถ้าหาก Mr. A หาอะไรในเว็บไซต์ไม่เจอ เขาจะใช้ปุ่ม F เพื่อไปยัง input form search แล้วก็พิมพ์คำค้นหากด enter เพื่อค้นหาแทนที่จะ navigate ไปมาภายในเว็บไซต์เพื่อลดเวลาในการทำงาน 

Mr. A กล่าวว่า Time Pressure เป็นอะไรที่ยากสำหรับเขามาก เช่นเวลาในการทำข้อสอบออนไลน์ ถ้าเกิดมีฟอร์มให้เขาเสิชสำหรับการค้นหาได้ จะช่วยลดระยะเวลาให้เขาได้มากกว่าให้เขามานั่งหาตามคีย์เอง สำหรับดีไซน์เนอร์ที่คิดว่า Input Search ไม่มีประโยชน์ คนตาบอดบอกว่ามีประโยชน์มากเลยค่ะ

Mr. A ยังเล่าอีกว่าปัจจุบันทำงานเป็นแผนกทำเทสให้กับแบรนด์ชื่อดังในออสเตรเลีย เช่น Coles, Woolworth ในการสั่งสินค้าออนไลน์ผ่านเว็บไซต์ ผ่านแอพลิเคชั่น ถ้า Task ที่ได้รับมามีเวลามาเกี่ยวข้อง พวก Heading และการวางปุ่มไว้บนๆ มี Labeling ตรงฟอร์มที่ชัดเจนจะช่วยให้ Mr. A ลดระยะเวลาในการคีย์ไปมาระหว่างหน้าได้มาก

Mr. A บอกว่ารู้จัก REL ด้วยนะ ช่วยใส่ REL ให้ด้วยในข้อความเป็นที่เป็น Text Link (a) สุดท้ายนี้ อย่าวาง BUTTON ซ้อน BUTTON แล้ว Label ไม่ชัดเจน เพราะ Mr. A ใช้เวลานานมากในการทำ Task Scenario ที่ทีมของแอดมินนำไปทดสอบนาน

ทดสอบเว็บ ผู้บรรยายคนที่ #2

ต่อไปคือท่านที่สอง Mr. B
ผู้ที่ Partialy Blind พิการทางสายตาแต่ไม่ได้ตาบอด ผู้ซึ่งจะดูอะไรต้องซูม ต้องมีกล้องส่องทางไกล ต้องทำภาพใหญ่ๆ เพราะตาบอดแบบนี้มานานกว่ายี่สิบปีแล้ว การจะส่องอะไรเลยต้องซูม​ซู้มซูม ถือว่าเป็นผู้พิการทางสายตาอย่างแท้จริง

ท่านนี้จะใช้โปรแกรม ZoomText ในคอมพิวเตอร์เพื่อการซูมทุกสิ่งอันเพื่อไปค้นหาสิ่งที่ต้องการ บางครั้ง Mr. B ก็จะใช้โปรแกรมอ่านออกเสียงบ้างตามแต่ละเคส

zoomtext image
ทดสอบเว็บ ด้วยโปรแกรม zoomtext image

เขายังฝากข้อความมาบอกว่า คนตาบอดไม่ได้มีตาบอดแบบเดียว การทำเว็บไซต์นั้นเลยต้องคำนึงถึงคนที่เป็นผู้พิการแบบ Partialy Blind หรือ ตาบอดสีด้วย เพราะเขาจะมีปัญหาทุกครั้งในการแยกแยะสี ใช้เวลานานในการจ้องมองคอมพิวเตอร์ผ่านเครื่องมือการซูม


ส่วนใครที่ยังงงๆ ไม่เข้าใจว่า Web Accessiblity คืออะไร Universal Design คืออะไรนั้น เราขอแนะนำบทความด้านล่างนี้นะคะ

Web Accessibility คืออะไร ทำไมถึงต้องออกแบบให้รองรับคนทุกรูปแบบ
https://www.designil.com/web-accessibility.html


หวังว่าประสบการณ์อบรมทดสอบเว็บกับผู้พิการทางสายตาครั้งนี้คงจะมอบความรู้แก่ทุกท่านไม่มากก็น้อย บทความนี้หาอ่านที่ไหนไม่ได้อีกแล้วดังนั้นจึงต้องขอขอบพระคุณผู้บรรยายของเราทั้งสองท่านที่มามอบความรู้ให้กับแอดมินนัท นำมาเขียนบทความให้แฟนๆ Designil อ่านกันต่อ

สำหรับท่านที่สนใจติดตามอ่านเรื่องราวการออกแบบที่น่าสนใจจาก Designil อัพเดทใหม่เป็นประจำ อย่าลืมกด like, share แฟนเพจ หรือกดรับข่าวสารผ่านทางอีเมล์ได้ด้านล่างนี้เลยนะคะ ครั้งหน้าจะเป็นบทความอะไร เราจะแจ้งเตือนทุกท่านผ่านทางอีเมล์ค่า


The post การทดสอบเว็บกับผู้พิการทางสายตา Web Accessibility appeared first on Designil.

]]>
https://www.designil.com/web-accessibility-testing.html/feed 0 8341
Adobe Symposium2019 สำหรับดีไซน์เนอร์ https://www.designil.com/adobe-symposium-2019.html https://www.designil.com/adobe-symposium-2019.html#respond Sat, 06 Jul 2019 01:27:38 +0000 https://www.designil.com/?p=8357 Adobe Symposium2019 รวมข่าวสารการอัพเดทจาก Adobe จัดขึ้นที่ซิดนีย์ ประเทศออสเตรเลียประจำปี 2562 บทความนี้เราขอรวบรวมสรุป Talk รวมสรุปวิดีโอเจ๋งๆ ที่ไม่ควรพลาดจากงาน Adobe Symposium เหมาะสำหรับสายออกแบบ และนักการตลาดทุกท่านประจำปีนี้มาฝากกันค่ะ เคสการใช้งาน Adobe Analytics + Magento..

The post Adobe Symposium2019 สำหรับดีไซน์เนอร์ appeared first on Designil.

]]>
Adobe Symposium2019 รวมข่าวสารการอัพเดทจาก Adobe จัดขึ้นที่ซิดนีย์ ประเทศออสเตรเลียประจำปี 2562 บทความนี้เราขอรวบรวมสรุป Talk รวมสรุปวิดีโอเจ๋งๆ ที่ไม่ควรพลาดจากงาน Adobe Symposium เหมาะสำหรับสายออกแบบ และนักการตลาดทุกท่านประจำปีนี้มาฝากกันค่ะ

เคสการใช้งาน Adobe Analytics + Magento

adobesymposium2019 01
Adobe Symposium2019 Creative Keynote

รู้หรือไม่ Adobe ไม่ได้ทำแค่ Photoshop
แต่ยังทำระบบเพื่อ Marketing ได้อย่างยอดเยี่ยม

เคสที่น่าสนใจมากที่สุดและอยากนำมาเล่าคือ อย่างที่เราคงจะทราบกันแล้วว่า Adobe ซื้อ Magento เข้าไปเก็บไว้ในคลัง เพื่อเอาไปเชื่อมกับระบบ Adobe Sensei ที่เป็นระบบ AI สำหรับช่วยในการบริหารจัดการเว็บไซต์ e-commerce 

Kathmandu ที่ออสเตรเลียเล่าให้ฟังว่า เขาสร้างหน้าเว็บขึ้นมาผ่าน Magento ปัจจุบัน สามารถทำ A/B testing หน้าเพจหน้าแรกได้ด้วยการ Drag & Drop แล้วดึง Audience มาใส่เพื่อทำ Personalization ด้วยตนเองได้ง่ายมากแบบไม่ต้องพึ่งโปรแกรมเมอร์ 

ความฉลาดมากกว่านั้นยังมีระบบค้นหารูปสินค้า จากภาพถ่ายด้วย AI จาก Adobe Sensei โอโหจะฉลาดไปไหน เพียงแค่ถ่ายรูปกระเป๋าสตางค์มาเสิชกับระบบก็จะเจอสินค้าที่เรากำลังตามหาทันที !!! แถมยังมาด้วยระบบ Fast checkout ที่จดจำได้ว่าลูกค้าคนนี้ชอบไปรับสินค้าที่หน้าร้าน (Click and Collect) หรือชอบให้มาส่งที่บ้าน เพียงแค่คลิ๊กเดียวลูกค้าก็เดินไปรับสินค้าที่ร้านได้ทันที

สำหรับใครที่อยากเรียนรู้ระบบของ Adobe วิดีโอสอนใช้งาน Adobe Experience Manager ในการทำเว็บไซต์ ดูฟรีแบบไม่ต้องเสียเงิน
แวะไปที่ Adobe Experience League


adobe cloud products
adobe marketing cloud products

เล่าเรื่องประสบการณ์การใช้ Adobe Marketing Cloud

แอดนัทขอยกตัวอย่างประสบการณ์ทำงาน สรุปต่อเนื่องเพื่อให้ได้ความรู้องค์ประกอบโดยรวมของ Adobe Marketing Cloudจากเคสการใช้งานจริงกันค่ะ

ตัวที่แอดใช้ทำงานปัจจุบันตัวแรกคือ Adobe Experience Manager หรือ AEM คือ ระบบจัดการเว็บไซต์ ถ้าให้ยกตัวอย่างเปรียบเทียบง่ายๆ AEM จะคล้ายๆกับ CMS อย่าง WordPress เป็นตัวที่ใช้ในการจัดการเว็บไซต์ มีระบบการจัดการ Content เรายังสามารถเขียนโปรแกรมเพิ่มเติม Module ส่วนต่างๆเข้าไปได้ไม่ว่าจะเป็น Components, Taxonomy, Page Template etc.

นอกจาก AEM แล้ว Adobe ยังเต็มไปด้วย Product ที่สร้างขึ้นมาเพื่อสนับสนุนการทำการตลาดออนไลน์ของเรา โดยเราสามารถนำมาเชื่อมต่อกับระบบ Experience ตัวหลักของเราได้ไม่ว่าจะเป็น Analytics, Audience Manager, Campaign, Experience Manager, Commerce Cloud, Maketo Engage, Magento, Advertising etc.

บริษัทของแอดนัทใช้ Adobe ทั้งระบบ โดยในส่วนการทำงานแผนก Designer team ของแอดนัทเองนั้น แอดนัทสามารถออกแบบ Component จาก Design System และเขียนโค้ดไปไว้บน AEM สามารถใช้งาน Adobe Analytics ในการ Track ได้ว่าที่แอดนัทออกแบบไปมีคนกดกี่ครั้ง เปรียบเทียบกับยอดผู้เข้าชม ถ้าให้สรุปคือ Analytics ของ Adobe ฉลาดขึ้นมากด้วยระบบ Cookies ที่ฉลาดขึ้นกว่าเดิม ทำให้เราสามารถ Track ได้จากต้นทางยันปลายทางตลอด Session เพื่อนำข้อมูลมาใช้วิเคราะห์เชิง Quantitative ได้ต่อ

ระบบ Audience Manager ยังมีประโยชน์มาก ไว้ใช้สำหรับการสร้างกลุ่มลูกค้าตาม Personas ที่เราได้ทำรีเสิชมา เราสามารถสร้าง Audience ได้จากหลากหลายปัจจัยไม่ว่าจะเป็นแยกตามประเทศ IP สถานที่ที่เข้ามาและอื่นๆอีกมากมาย โดยเมื่อเราสร้างเสร็จแล้ว สามารถนำไปสร้าง Personalization ได้แยกตามกลุ่ม Audience เพื่อเพิ่มมูลค่าให้กับองค์กรของเราในอนาคต


นอกจาก Talk ทางด้านโปรดัคการตลาดที่น่าสนใจยังมี Creative Keynote ที่ไม่ควรพลาดสำหรับดีไซน์เนอร์ด้วยเช่นเดียวกัน

adobesymposium2019 02
Adobe Symposium2019 Creative Keynote

ทำไมการออกแบบถึงมีความเสี่ยง ?

คำว่า Experience หรือ ประสบการณ์ของเราที่เราได้รับนั้นเป็นตัวกำหนดมุมมองของเรา ทั้งสิ่งที่เรารู้สึก นึกคิด หรือการกระทำ และประสบการณ์สามารถเกิดขึ้นตลอดเวลาแม้แต่ตอนนี้ที่ทุกคนกำลังอ่านข้อความนี้อยู่

ดังนั้นการออกแบบเพื่อประสบการณ์ Design for experience ก็คือการออกแบบเพื่อการมีชีวิตอยู่ของมนุษย์ Human Existence ไม่ใช่แค่ Design Process ที่เรากำลังใช้งานหรือเป็นแค่ Wireframe , mobile app, pattern library

แต่มันคือการออกแบบเพื่อให้ตอบรับกับพื้นฐานความต้องการของมนุษย์ทั้งความรู้สึก นึกคิด การสัมผัส การจับต้อง กลิ่น รส เสียง นั่นเอง

มีบทความบอกมาว่าในอนาคตอีกห้าถึงสิบปี อาชีพดีไซน์เนอร์อาจจะหายไป เธอกล่าวว่า มันจะหายไปได้อย่างไร ในเมื่อปัจจุบันเรายังเปิดประตูผิดด้านเพราะไม่รู้ว่าจะผลักหรือดึง นอกจากนี้ยังมีคนไข้ที่เสียชีวิตได้เพราะระบบบันทึกการให้ยาจากรพ.ที่ไม่เข้าใจผู้ป่วยเพราะคิดว่าจะเชื่อถือระบบได้

หากเราจะสร้างอนาคตให้กับการออกแบบได้ เราก็ต้องเปลี่ยนวิธีการคิดของเราใหม่ ว่าทำไมเราต้องสร้างมันขึ้นมา 

เราต้องคำนึงถึงในอีก 20 , 50 ปีจะเกิดอะไรขึ้นกับสิ่งนี้ เราคงไม่อยากให้เป็นเหมือนกับการออกแบบพลาสติกที่กำลังทำร้ายโลกและสัตว์น้ำ เราไม่อยากให้เทคโนโลยีมาทำร้ายคนเหมือนในซีรีส์ Black Mirror 

ให้เวลากับการออกแบบว่าเราต้องสร้างสิ่งนี้ขึ้นมาเพื่ออะไร มิเช่นนั้นการออกแบบของเราอาจจะทำให้เกิดความเสี่ยงแก่มนุษย์ได้ในอนาคต

แล้ววันนี้เราเริ่มถามตัวเองหรือยังว่าเราออกแบบไปเพื่ออะไร ?

Adobe symposium2019 – Creative Keynote video

ดูวิดีโอ Creative Keynote
1. สรุปการออกแบบมีความเสี่ยง? นาทีที่ 18:59 – Chi Ryan, National Experience Strategy Lead, PwC Experience Consulting
2. สรุป Adobe XD นาทีที่ 00:40:50 – Hoyle Wang, Product Manager, Adobe


ADOBE XD กับการอัพเดทใหม่

Creative Talk ที่น่าสนใจยังไม่หมดเพียงแค่นี้ มาต่อกันที่การอัพเดท Adobe XD เครื่องมือออกแบบสุดเทพที่ใช้ทำตั้งแต่ Low Fidelity Wireframe ไปจนถึง High Fidelity Prototype หรือนำใช้สร้าง Design System

Design at the speed of thought

การออกแบบปัจจุบันเราต้องใช้โปรแกรมมากมายตั้งแต่การออกแบบไปยันการทำ Prototype

มิสเตอร์ Wang จึงอธิบายว่า ต่อไปนี้จะไม่มีอะไรมาขัดขวางการออกแบบของเรา เราจะได้ออกแบบได้อย่างรวดเร็วโดยไม่ต้องเปลี่ยนโปรแกรมไปมา ตั้งแต่ Design, Prototype & Share นอกจากนี้ยังลดการใช้โปรแกรมอื่นๆที่จะทำให้งานของเราช้าลง

Adobe XD Voice Trigger
Adobe XD Voice Prototype – กดปุ่ม Spacebar ค้างไว้แล้วพูด Prototype จะทำงาน

Adobe XD Feature ที่พลาดไม่ได้คือ

  • Repeat grid – ไม่ต้องก้อปวางอีกต่อไป
  • Content drag and drop – ลากรูปจากโฟลเดอร์มาใส่ในงานของเราได้ทันที
  • Text.txt drag and drop – ลากไฟล์ข้อความ .txt มาใส่ใน text ในงานของเราได้โดยไม่ต้องพิมพ์เอง
  • Responsive Resize – resize งานของเราปรับไปตาม screen ได้แบบไร้กังวล ง่ายและเนี้ยบขึ้นกว่าเดิมมาก
  • Fixed element – ล็อก element ได้ใน Adobe XD เวลาทำ Prototype
  • Auto Animate – อันนี้อธิบายยากมากเพราะเป็นฟีเจอร์สุดเทพ ทำได้อย่างกับ After Effect แอดมินแนะนำให้ดูวิดีโอของ Dansky ชื่อวิดีโอ Auto-Animate สอนการทำแอนิเมตแบบละเอียดตั้งแต่ขั้นตอนแรก
    พี่ดีไซน์เนอร์คนนี้สอนหลายวิดีโอมาก ตั้งแต่เทคนิคลับในการใช้โปรแกรม Adobe XD สอนกันตั้งแต่โปรแกรมอัพเดทวันแรกเลยทีเดียว
    (ติดตามคนอื่นแล้วอย่าลืมติดตาม Designil ด้วยนะคะ อิอิ)
  • Voice Prototype – เราสามารถทำ Prototype ด้วยคำสั่งเสียงหรือ voice command ได้แล้วตามภาพด้านล่างนี้เลย
Adobe Symposium2019 Adobe XD
Adobe XD Voice Prototype

บทความนี้ต้องขอจบไว้เพียงเท่านี้ หากใครสนใจติดตามอ่านเรื่องราวด้านการออกแบบที่น่าสนใจจาก Designil อย่าลืมกด like, share แฟนเพจ หรือกดรับข่าวสารผ่านทางอีเมล์ได้ด้านล่างนี้เลยนะคะ ^0^ ครั้งหน้าจะเป็นบทความอะไร เราจะแจ้งเตือนทุกท่านผ่านทางอีเมล์ค่า

The post Adobe Symposium2019 สำหรับดีไซน์เนอร์ appeared first on Designil.

]]>
https://www.designil.com/adobe-symposium-2019.html/feed 0 8357