Art & Design

Online UI Workshop (29-30 Aug 2020)

COURSE DESCRIPTION


งานออกแบบ UI นั้นต่างจากงานออกแบบสิ่งพิมพ์ หรือออกแบบโฆษณาออนไลน์ เพราะบริบทของผู้ใช้ไม่เหมือนกัน ความคาดหวังต่อตัวงานก็จะไม่เหมือนกัน งานสิ่งพิมพ์นั้นตัวผลงานมีเวลาอยู่กับผู้ใช้นานแต่ผู้ใช้มักผ่านมารอบเดียว ส่วนงาน UI นั้นผู้ใช้มีเวลาสั้นมากไม่ถึง 5 วินาที แต่ผู้ใช้มักจะผ่านมาใช้มันหลายรอบ

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

การจะทำแบบนั้นมันไม่ใช่เรื่องยาก เราต้องอาศัยสิ่งที่ผู้ใช้เรียนรู้ไปแล้วตั้งแต่ก่อนที่จะใช้โปรแกรมของเราให้เป็นประโยชน์ เราเรียกว่า (World Experience) เราต้องรู้ว่าผู้ใช้เรียนอะไรไบแล้ว ในแต่ละระบบทั้ง Windows OSX iOS หรือ Android รวมถึงลำดับการจัดลำดับข้อมูลที่ตรงกับผู้ใช้คาดหวัง ให้ผู้ใช้สามารถบริโภคข้อมูลให้ง่ายที่สุด (Information Architech)

ใน Workshop นี้ผู้เรียนจะได้ลองคิดถึงพื้นฐานในการออกแบบ UI ตั้งแต่แนวคิดพื้นฐาน การวาด Wireframe อย่างเร็ว และวาด Wireframe ที่พร้อมสำหรับส่งให้ลูกค้า หรือส่งต่อให้ Graphic Designer รวมถึงการวิเคราะ์ UI เพื่อปรับปรุงโปรแกรมให้ดีขึ้นเรื่อย ๆ (Usability Critique)

ทำความเข้าใจ UX เพิ่มเติมผ่าน blog.uxacademy.in.th



Duration:

2 Day (10.00-17.30)


Instructor:

Apirak Panatkool short profile, LinkedIn

Apirak currently works as a UX Evangelist at Omise Payment Gateway. Previously he was the UX Coach at Ascend Group (Truemoney, itruemart, weloveshopping). 

He’s a big believer that great user experience comes from everyone working as part of a team, not only for designers. 

Apirak is also the co-founder of UXinThai, one of the biggest UX community on Facebook in Thailand. He is also the co-founder of UX Academy. Apirak loves to see people with different talents working together and he thinks user experience is the key that makes it happen.

Who Should Attend:

  • QA เพื่อศึกษาการควบคุมคุณภาพ ที่ไม่ใช่หา Bug
  • UI Designer ที่ต้องการศึกษาความรู้เพิ่มเติม
  • Graphic Designer ที่ต้องการเข้าใจความแต่ต่างของ UI กับงาน Digital Graphic
  • Print Designer ที่ต้องการเร่งความเร็วเพื่อเข้าสู่โลกของ UI
  • DEV / PM / PO / AE ที่ต้องการสื่อสารกับทีม

Objective

  • เข้าใจเรื่อง Information Architect สามารถนำมาประยุกต์ใช้ เพื่อลดความเสี่ยงของโปรแกรมได้
  • สามารถวิเคราะห์ความแตกต่างของ UI สำหรับผู้ใช้แต่ละประเภทได้
  • เข้าใจพื้นฐานการออกแบบ ที่ต่างกันบนแต่ละ Platform (iOS, Android, Web, Desktop App)
  • สามารถเลือกใช้เทคนิคการวาด Wireframe ให้เหมาะสมกับแต่ละงาน
  • สามารถวิเคราะห์ปัญหาของ UI ได้ (Usability Critique)

Schedule

Day 1: Basic practice for being UI Designer

  1. Design Principle: เป็นการนำเทคนิคพื้นฐานในการออกแบบมาใช้ในการทำ User Interface ผู้เรียนจะได้รู้ พื้นฐานความแตกต่างของการออกแบบงานสิ่งพิมพ์ งานโฆษณาดิจิตอล และ งานออกแบบหน้าจอ เพื่อจะได้ ออกแบบได้ตรงกับความต้องการของผู้ใช้ นอกจากนั้นผู้เรียนจะได้เข้าใจตนเองว่าทำไมนักออกแบบถึงรู้สึกว่า แบบนี้ดีแล้ว ช่วยให้สามารถอธิบาย (ปกป้อง) งานออกแบบของตนเองกับหัวหน้า หรือลูกค้าได้


  2. Wireframe: หลายครั้งลูกค้าไม่ชอบให้เราทำ wireframe มาให้ดู โดยอ้างว่าดูไม่รู้เรื่อง ทำให้นักออกแบบ ต้องวาดงานเหมือนจริงไปให้ลูกค้าดู ซึ่งใช้เวลานานกว่าการวาด wireframe มาก ในบทนี้เราจะมาดูกันว่าทำ อย่างไรลูกค้าถึงจะดู wireframe รู้เรื่อง และ ทำอย่างไรให้เราสามารถวาด wireframe ได้อย่างรวดเร็วโดยไม่ วาดผิดวิธี


  3. Time saving tools: เครื่องมือในการวาด wireframe มีมากมาย แต่ผมคัดเครื่องมือที่สามารถใช้งานได้ดี รวดเร็ว สามารถทำให้ฝ่ายอื่น ๆ ในบริษัทมาช่วยเราวาดได้ ในบทนี้เราจะมาลองวาดกันจริง ๆ ผู้เรียนต้องเตรี ยม Notebook เพื่อมาฝึกวาดกัน (เป็น Windows, Mac หรือ Linux ก็ได้)

  4. Platform: คนที่ยังไม่ได้ลงรายละเอียดเรื่อง UI มักคิดว่าแต่ละ Platform ไม่ว่า iOS, Android ก็สามารถ ออกแบบเป็นแบบเดียวกันได้ แต่จริง ๆ แล้ว แต่ละระบบมีพื้นฐานการออกแบบไม่เหมือนกัน มีบางอย่างเหมือน กันได้ และมีหลายอย่างที่อันตรายเมื่อออกแบบให้เหมือนกัน ถ้าเรารู้พื้นฐานในการออกแบบ จะช่วยให้เรา ตัดสินใจได้อย่างถูกต้อง ไม่ว่าจะเป็น Web หรือ Desktop App จะทำ Responsive หรือ Mobile site ไปเลย


Day 2: More practice and working process for individual and team (How to work with UX, PO, Developer, etc.)

  1. Information Architecture: เป็นพื้นฐานในการออกแบบ User Interface เป็นเทคนิคที่ทำให้เราเข้าใจบริบทของคนใช้งาน รู้ว่าจะสื่อสารกันในทีมงานอย่างไร และที่สำคัญคือรู้ว่าจะถาม หรือสื่อสารอย่างไรกับคนที่ทำ User Experience


  2. Critique UI: เทคนิคในการวิเคราะห์ User Interface มีอะไรบ้างที่เราจะต้องมองให้ออก ทำอย่างไรเราถึงจะ สามารถลงรายละเอียดได้อย่างรวดเร็ว ผู้เรียนจะได้ฝึกฝนการวิเคราะห์ UI และได้เรียนรู้เทคนิคในการให้คำ แนะนำคนออกแบบ โดยไม่ทำให้เค้าโกรธเรา


  3. Speed Wireframe: เทคนิคเพิ่มเติมในการวาด wireframe เพื่อลดเวลาในการออกแบบและลดความเสี่ยง ในงานพัฒนาโปรแกรม

  4. Usability Test: การทดสอบและการสังเกตุผู้ใช้งาน เพื่อนำมาปรับปรุงหน้าจอในครั้งถัดไป


Why we dare to open Online Workshop

ผมและทีมงานเราออกแบบระบบการทำ workshop ใหม่หมด เพราะรู้ว่าการสอนแบบเดิมของเราถูกออกแบบมาเพื่อ offline workshop ดังนั้นทีมงานจึงวาง Persona และ Journey ของผู้เรียนใหม่หมด ออกแบบละดับขั้น คำพูดและวิธีการสรุปใหม่ เพื่อให้เหมาะกับการสอน Online แล้วก็ทดลองสอนเป็น 10 รอบ ตั้งแต่กลุ่มเล็ก กลุ่มใหญ่ ระยะสั้น ระยะยาว เปลี่ยนการจัดไฟ เปลี่ยนตัว workshop เปลี่ยนเครื่องมือเพื่อให้ผู้เรียนตามได้ง่ายจนเราเริ่มได้ แนวทางที่เรียกว่าสำเร็จ 🎉

เราพบสิ่งที่แปลกใจมากๆ "การสอน UX แบบ Online มันให้ผลออกมาดีมาก" เรียกได้ว่าผู้สอนติดใจเลยทีเดียว มันแก้ Painpoint ที่ผมเจอมาตลอดตอนสอน Online ได้เป็นหลายข้อมากๆ

1. Presentation ชัดมาก: ในการสอน UX ผมจะเจอปัญหานี้ตลอด แม้ว่า Projector จะชัดมาก แต่ผู้เรียนที่อยู่ท้ายห้องมักมองเห็นจอภาพได้ไม่ชัดเท่าคนอยู่หน้าห้อง อ่านตัวหนังสือได้ไม่คม แต่การสอน online ทุกคนเห็นภาพชัดสุดๆ การยกตัวอย่างเรื่องสีทำได้ดีมาก แถมตัวไหนอยากเน้นเราก็ zoom เข้าไปได้ด้วย

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

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

4. แยกลุ่ม รวมกลุ่ม ได้เร็วมาก: หลายคนอาจจะไม่รู้ว่านี่เป็น Painpoint ของผู้สอนมากๆ ยิ่งใน UX Workshop ของผมที่เรามี Workshop แทบจะตลอดเวลา ตอนเรียกคนให้กลับมารวมกันเป็นอะไรที่เสียเวลามากๆ แต่พอเป็นแบบ Online เราสามารถกระจายกลุ่มหรือรวมกลุ่มได้ในทันที ทำให้ระบบ Timebox ของเราดีขึ้นมาก มันไปได้เร็วใช้ได้เลย

5. คนเรียนสอบถามได้ง่าย: แน่นอนว่าแต่ละคนมีพื้นฐานไม่เท่ากัน บางคนที่ต้องการความช่วยเหลือก็จะเกรงใจเพื่อนๆ แต่ในระบบ Online เค้าสามารถเรียกหา TA ได้ตลอด จะถามก็พิมพ์ได้เลยไม่ต้องยกมือให้เกรงใจผู้สอน แบบใน Offline Workshop

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


อุปกรณ์ในการเรียน:

  1. Internet ความเร็วสูง
  2. Computer (Mac, Windows หรือ Linux) ที่ลงโปรกรม Zoom ไว้แล้ว
  3. Webcam เพื่อให้ผู้สอนเห็นหน้าได้
  4. กระดาษ A4 และ ปากกา

ก่อนวันเรียนถ้าใครไม่แน่ใจเราจะมีนัดซ้อมตระเตรียมเครื่องมือต่าง ๆ ด้วยกัน รวมถึงถ้าใครไม่ถัดการใช้ software ที่เราจะใช้ใน Workshop สามารถเข้ามาฝึกในวันนั้นได้ครับ


Feedback from Online workshop:




Payment:

*ราคารวมค่าอาหารกลางวัน ขนม และ อุปกรณ์สำหรับ Workshop 2 วัน

สามารถชำระเงินได้โดยการโอนเข้าบัญชี


Other workshop schedule:

 Organizer officecial website: uxacademy.in.th
ux academy
35fe1cfe2e5828709fe9caf31de3e74a946d361c
Organized by
UXA Co., Ltd