สรุปเนื้อหางาน UX for Developers ตอน Framework

Introduction Event

ก็เป็นอีกหนึ่งงานที่จัดขึ้นสำหรับชาว IT โดยเฉพาะ Developer ที่สนใจในการทำ UX และผมก็ได้มีโอกาสไปร่วมงานเหมือนกัน โดยจุดประสงค์ของงานคือให้ความรู้เกี่ยวกับการทำ UX สำหรับ Developer นั่นเอง แต่จริงๆ แลัวงานวันนี้ Designer เองก็สามารถเข้าไปฟังได้เพราะถือว่าเนื้อหากลางๆ ไม่พูดการ Design มากไปหรือ Technical มากไป จะเป็นออกแนวคิดมากกว่า ฟังได้ทุกคนครับ

งานนี้จัดแถวๆ BTS ออนนุช โดยสถานที่จาก HUBBA-TO จัดโดย Startup หน้าใหม่ชื่อ Indie Dish แอพสั่งอาหารเพื่อสุขภาพ โดยมีคุณ Darin Suthapong ซึ่งเป็น Co-Founder ของ Indie Dish และ UX Design Lead ของ Amazon (US) มาพูดให้ความรู้เกียวกับงานในวันนี้ พูดได้ว่างานเรามีผู้เชียวชาญด้าน UX มาโดยตรงนะครับ 

 

What’s UX

อธิบายง่ายๆ ให้ Developer หรือ Designer มือใหม่ เข้าใจง่ายๆ คือการออกแบบที่เอา คน เป็นตัวตั่งเพื่อให้ เพื่อให้คนที่เข้ามาใช้งานระบบมีความเข้าใจระบบ (Discoverability), เรียนรู้ได้เอง (Learnability) โดยการออกแบบแนวนี้เราจะมองกันที่หลักจิตวิทยาว่า UI ที่เราออกแบบมานั่น User พึ่งพอใจและใช้งานได้ดีแค่ไหนเป็นต้น โดยที่เราจะมีศาสตร์ที่ตรงข้ามกับ UX คือ SA (System Analysts) โดย UX จะพูดถึงคนและจิดใจ อารมณ์จะใช้หลักจิตวิทยา (Psychology) เข้ามาช่วยและ SA จะพูดถึงการออกแบบระบบ การวางโครง การเขียนโฟร์

 

Topic of speech

  • Mindset – มุมมองแนวคิด แง่มุมการคิดของการทำ UX
  • Framework – ขั่นตอนการทำงาน เครื่องมือต่างๆ ที่ช่วยในการนำเอา Mindset ไปใช้ยัง
  • Implement – จะนำเอาสองหัวข้อด้านบนไปใช้ยังไงถ้าเข้าในการทำ UX และขั่นตอนต่างๆ กับ Product ใหม่ หรือ Product เก่าของเรา

งานนี้มีอยู่ 3 หัวข้อหลักซึ่งต้องบอกว่าแต่ละหัวข้อสนุกมาๆ เต็มอิ่มกันเลยทีเดียว เรามีดูกันต่อแต่ละหัวข้อนะครับ

 

Framework

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

Framework – ถ้าหาคำแปลภาษาไทยบอกว่าเลยว่าคงไม่มี หรืออาจจะไม่เข้าใจแน่นอน งั่นผมจะอธิบายลักษณะของมันแทน และให้เอาไปตีความเอง ยกตัวอย่าง ในการเขียนหน้าเว็บ (HTML, CSS) เมื่อก่อนย้อนไปสัก 10 ปีพอละกัน เวลาเราเอาดีไซน์มาเขียนให้เป็นหน้าเว็บจริงๆ Web Developer จะต้องเขียนตามหลักการ ทฏษฏีของ HTML, CSS กันตั่งแต่ต้นจนจบโปรเจค จึงจะได้หน้าเว็บมา 1 หน้า หรืออะไรก็ตามแต่ พอมาช่วงหลังๆ มีคนสร้าง Framework ขึ้นมาข้างในมีการบันจุโค้ดต่างๆ และเอาหลักการ ทฏษฏีการเขียนโค้ดต่างๆ มารวมไว้ข้างใน เพื่อให้ Web Developer เอาโค้ดต่างๆ ไปเรียกใช้งานทำหน้าเว็บได้เลย ไม่ต้องคิดเอง เขียนใหม่ นี่คือลักษณะของ Framework ดังนั่นถ้าผมจะบอกว่า Framework คือเอาหลักการ ทฏษฏีมารวมไว้ เอามาประยุกต์ให้เกิดส่วนสำเร็จรูปของการทำงานก็คงไม่ผิด 

ในงาน Design เราก็มี Framework เหมือนกันเช่น

  • Icon Font – พูดง่ายคือการทำ Icon บนหน้าเว็บ โดยเอาไฟล์ SVG ไปทำเป็นไฟล์ Font แทนการใช้ Icon แบบเดิมๆ ด้วย JPEG, PNG นั่นเอง ทำให้ Icon นั่นขยายได้โดยไม่แตก ช่วยเพิ่มความไวในการโหลดหน้าเว็บ เป็นต้น รายละเอียดเพิ่มเติม
  • UI Kit – เป็นการออกแบบหน้าจอเตรียมไว้ แล้วให้คนที่สนใจโหลดไฟล์ PSD, AI ไปใช้แก้ไขได้เลย ช่วยลดขั่นตอนการคิดลงไปบางส่วน ดูตัวอย่างใน Pinterest

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

ในเรื่องของ UX Framework คุณ Darin ก็ได้อธิบายไว้ว่า ถ้าพูดถึง UX Concepts มันก็จะมีหลายๆ คำเช่น User-centered Design, Design Thinking, UX Design Concepts เป็นต้นซึ่งยังมีอีกหลายๆ คำ และทั่งหมดนี่มันก็คือลูกของ Mindset หรือเป็น Sub-set นั่นเอง โดยมี Think Human หรือ Human (คน) เป็นหัวใจสำคัญนั่นเอง ซึ่งคุณ Darin ก็บอกว่าจริงๆ มันลึกมากและมันมีหลากหลายกระบวนท่ามาก

Screenshot from 2016-08-21 22:59:38

แล้วเราจะใช้ Framework ไหนดีละ ?? โดยคุณ Darin ได้เสนอ Framework ที่เรียกว่า 4Ds ซึ่งช่วยให้การทำ Product Development ไปได้ถึง 90% โดยมีขั่นตอนดังนี้

Screenshot from 2016-08-21 23:00:14

  • Discover – เป็นขั่นตอนในการรวบรวมข้อมูล ซึ่งเป็นข้อมูลที่เกี่ยวกับคน, เกี่ยวกับ What if., Imagination, เกี่ยวกับ Holistic และ Detail โดยถ้าเปรียบเทียบขั่นตอนนี้คุณ Darin ได้อธิบายว่าให้นึกถึงการเข้าครัวทำอาหาร เป็นช่วงกำลังหาสูตร หาเครื่องปรุงส่วนผสม ซื้อหมู ซื้อไก่
  • Design – ช่วงเกี่ยวกับการทดลอง คุณ Darin บอกว่าไม่ใช่ช่วงที่เกี่ยวกับการทำให้สวยงามแต่ เป็นการ ลอง (Try) ลองทำนี่ดู ทำโน้นดู โดยจากตัวอย่าง การเข้าครัวก็จะเปรียบเทียบได้ว่าก่อนเข้าครัวจากขั่นของ Discover เรามีเครื่องปรุง ส่วนผสมต่างๆ เราสามารถทำอะไรได้บ้าง เช่นถ้าเราจะทำซุปก็ต้องมาดูว่าเรามีอะไรบ้าง ลองทำซุปนี่ดูไหม ทำซุปแบบนั่นดูไหมจากส่วนผสมที่เรามี
  • Develop – ช่วงนี้จะคงเป็นงานของฝั่ง Developer คือการเอาขั่น Design มาทำให้มันเกิดขึ้นจริง ถ้าเปรียบเทียบของการทำอาหารก็คือเริ่มทำอาหารแล้ว เริ่มลงมือใส่ส่วนผสมเครื่องปรุงลงไปในหม้อซุปนั่นเอง
  • Do The Test – หลังจากที่เราทำซุปออกมาเสร็จแล้ว เรามีเครื่องปรุงต่างๆ ส่วนผสมใส่ลงไป จะรู้ได้ไงว่ามันดี เราก็ต้องกิน ตรงนี้ก็จะเป็นการวัดผลว่าที่เราทำมันตอบโจทย์จริงไหม กินแล้วอร่อยไหม

โดยคุณ Darin ยังย้ำไว้ว่ามันมีแค่นี้จริงๆ และเพิ่มเติมให้อีกว่าถ้าเราไม่เก่งเรื่องคนลองไปศึกษาเรื่อง Psychology (จิตวิทยา) และถ้าไม่เก่งเรื่อง What If ให้ไปศึกษาเรื่อง Design Thinking เป็นต้น

ในบทความหน้าเราจะต่อหัวข้อสุดท้ายคือ Implementation ซึ่งคุณ Darin ได้อธิบาย ในส่วนการนำมาใช้งานใน New Product (งานใหม่) กับ Later Stage Product (งานเก่า)  โดยการนำเอา 4Ds มาประยุกต์ใช้ยังไง เจอกันตอนหน้านะครับ

14088781_10154352011208605_1929331825_n

Facebook Comments