การออกแบบ UX-UI

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

UI = User Interface มองง่ายๆคือ ส่วนที่ผู้ใช้จะมองเห็นและกระทำ (interface และ interact) ได้ในเว็บไซต์ หรือโปรแกรม หรืออะไรก็แล้วแต่ที่เป็นหน้าตาของงาน

UX = User eXperience จะเป็นเรื่องของความรู้สึกในการใช้งาน มันยากหรือมันง่าย มันสะดวกสำหรับผู้ใช้ไหม นี่แหละคือเรื่องของ user experience หรือ ประสบการณ์การใช้งานของผู้ใช้ นั่นเอง

ออกแบบ UI
สำหรับ UI นั้น จริงๆ ก็คือตัวย่อของคำว่า ?User Interface? เป็นงานดีไซน์ที่เน้นหนักเรื่องการออกแบบ ?หน้าจอ? หรือแพลทฟอร์มต่างๆ ที่ธุรกิจทำไว้เพื่อติดต่อกับผู้ใช้ ยกตัวอย่างเช่น เว็บไซต์ แอพลิเคชั่น เกมส์ รวมไปถึงฮาร์ดแวร์ที่จับต้องได้เช่นอุปกรณ์จอทัชสกรีน ฯลฯ สำหรับเนื้องานของนักออกแบบ UI นั้นก็จะต้องปรากฏให้เห็นเป็นรูปธรรมได้ เพื่อว่านักพัฒนาแอพฯ หรือโปรแกรมเมอร์ จะสามารถนำไปใช้ต่อยอดได้ทันที

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

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

7 กฎการออกแบบ UI ให้สวยงาม ที่ใครก็เรียนรู้ได้

1. แสงต้องมาจากบนฟ้า เมื่อไหร่ที่มีแสงสาดลงมา ก็ต้องเกิด ?เงา? อยู่ด้านล่าง เพราะฉะนั้นด้านบนของสิ่งที่โดนแสงจะสว่าง และด้านล่างจะมืดกว่าเสมอ การออกแบบ User Interface ก็เป็นไปตามเรื่องแสงนี้เช่นกัน ถ้าสังเกตในเว็บไซต์ต่าง ๆ จะเห็นว่า UI หลาย ๆ จุด เช่น ปุ่ม จะมีการใส่ ?เงา? เพื่อให้เรารู้สึกว่าปุ่มเป็น 3 มิตินูนออกมาจากหน้าเว็บไซต์นั่นเอง
   ปัจจุบัน Material Design ซึ่งเป็นหลักที่ใช้ดีไซน์ Product โดยเน้นการแสดงความลึกของสิ่งต่าง ๆ ด้วยแสงเงา เลียนแบบเงาของจริง กับสิ่งที่มาจากในชีวิตจริง (แสงเงา ความลึก ความนูน)
2. เริ่มด้วย ขาว-ดำ เสมอ การออกแบบเป็นสี ขาว-ดำ ก่อน แล้วค่อยใส่สีเข้าไปทีละนิด จะช่วยให้ดีไซน์ UI ที่ซับซ้อนออกมาได้ง่ายขึ้น และนอกจากนั้นยังทำให้เราโฟกัสกับเรื่องการจัดช่องวาง และวาง Layout สิ่งต่าง ๆ ก่อนด้วย เราควรออกแบบเป็นสีขาว-ดำก่อนเพื่อจัดวาง UI Element ต่าง ๆ ให้เข้าที่ และคิดวิธีให้เว็บออกมาดูสวยและใช้งานง่าย โดยไม่พึ่งการใช้สีเลยแม้แต่น้อย อันนี้เป็นสิ่งที่ยากครับ หลังจากนั้นเราค่อยใส่สีเข้าไปทีละนิด และจำไว้ว่าการใส่สีทุกครั้งต้องมีจุดประสงค์ในการใส่ เราอาจจะพัฒนาไปอีกขั้น โดยการใส่สี 2 สี? 3 สี? 4 สี? ไปเรื่อย ๆ ก็ได้ แต่ควรจะใช้สีที่มาจากเนื้อสี (Hue) เดียวกันครับ เช่น ถ้าใส่สีแดง อาจจะใส่แดงธรรมดา แดงเข้ม แดงอ่อน อะไรแบบนี้ เทคนิคการเลือกใช้สีในงานออกแบบที่มาจากเนื้อสีหลักไม่เกิน 1-2 เนื้อสี จะทำให้เราสามารถแบ่งส่วนของดีไซน์ที่ต้องการให้เด่น หรือไม่เด่นได้ง่าย ๆ โดยที่ไม่ทำให้ดีไซน์โดยรวมดูเละเทะ
3. เพิ่ม Whitespace (ช่องว่าง) เป็นสองเท่า เป็นพื้นที่โล่ง ๆ รอบ ๆ ทุกจุดในงานดีไซน์ เทรนด์ดีไซน์เว็บสมัยใหม่ เน้นความง่าย สบายตามากกว่า งานเว็บดีไซน์ในยุคนี้จึงเน้นเรื่อง Whitespace ถ้าอยากทำ UI ที่ดูแล้วรู้สึกว่าผ่านการดีไซน์มาแล้ว ต้องมีพื้นที่โล่งเยอะ ๆ บางครั้งก็ต้องเยอะมาก ๆ ด้วย พยายามใส่ Whitespace ในทุก ๆ อย่าง ไม่ว่าจะเป็นตัวหนังสือแต่ละบรรทัด, ระยะห่างระหว่าง Element ต่าง ๆ บนหน้าเว็บ / แอพ, ระยะห่างระหว่างกลุ่ม Element ต่าง ๆ บนหน้าเว็บ / แอพ ฯลฯ จะทำให้งานออกมาดูดีขึ้นในทันที
4. เทคนิคการวางตัวหนังสือบนรูป ไม่ให้จม รูปพื้นหลังต้องสีเข้ม ? และมีจุดที่สีตัดกันไม่เยอะ ,ตัวหนังสือต้องสีขาว , ทดสอบทุกขนาดหน้าจอ
5. เพิ่ม ? ลด ความเด่นของตัวหนังสือ สิ่งที่เราสามารถใช้ได้ และแนะนำให้ใช้ คือ เปลี่ยนขนาดตัวหนังสือ , เปลี่ยนสีตัวหนังสือ , ปรับตัวหนา-บาง , ใช้ตัวพิมพ์เล็ก ? ตัวพิมพ์ใหญ่ (ในภาษาไทยเราไม่มีนะครับ แต่ในภาษาอังกฤษการใช้ตัวพิมพ์เล็ก ? ใหญ่ก็สร้างความแตกต่างได่ง่าย) , ใช้ตัวเอียง , เปลี่ยนระยะห่างตัวหนังสือ ,เปลี่ยนระยะห่างของกล่อง , การใช้ตัวหนังสือมีหาง (Serif) ? ไม่มีหาง (สำหรับภาษาไทย น่าจะเป็นแบบมีหัว)
   การทำให้ ?เด่นขึ้น? อธิบายให้เข้าใจง่าย ๆ คือ เป็นการทำให้ตัวหนังสือจุดนั้นมองเห็นได้ชัดเจนกว่าจุดอื่น ไม่ว่าจะเป็นการทำตัวหนังสือใหญ่, ฟ้อนต์หนา, ตัวพิมพ์ใหญ่ ฯลฯ
   ส่วนการทำให้ ?เด่นน้อยลง? เป็นการทำให้ตัวหนังสือจุดนั้นมองเห็นได้ยากกว่าจุดสำคัญอื่น ไม่ว่าจะเป็นการทำให้ตัวหนังสือเล็ก, ฟ้อนต์บาง, ลด Contrast ฯลฯ
6. เลือกใช้ฟ้อนต์ให้เหมาะสม ฟ้อนต์เป็นตัวกำหนด Mood & Tone ของงานดีไซน์ที่สำคัญมากเลยครับ ฟ้อนต์แต่ละแบบให้ความรู้สึกแตกต่างกันไป เราอยากทำงานดีไซน์ให้ดู Modern, Clean ก็ต้องเลือกฟ้อนต์ที่ให้สื่อไปในทางเดียวกัน แนะนำ และใช้บ่อย ๆ คือ Lato, Open Sans, Bebas Neue, Montserrat, Raleway
7. ขโมยอย่างศิลปิน ตอนที่เริ่มทำดีไซน์ใหม่ ๆ เค้าถึงได้รู้ว่าการจะทำให้ UI Element ง่าย ๆ อย่างพวกปุ่ม, ตาราง, Popup ฯลฯ ให้มันดูดีได้นั้นยากมาก เพราะฉะนั้นเค้าเลยใช้วิธีศึกษาจากเว็บไซต์ต่างประเทศเยอะ ๆ

ออกแบบ UX
UX ย่อมาจากคำว่า ?User Experience? งานออกแบบด้านนี้จะเกี่ยวข้องกับทุกกระบวนการที่สินค้าหรือบริการหนึ่งๆ มีปฏิสัมพันธ์กับผู้ใช้ โดยเน้นไปที่การนำสินค้าหรือบริการไปทดลองกับกลุ่มตัวอย่าง ทั้งนี้เพื่อจะเก็บข้อมูลและ ?ฟีดแบค? อย่างละเอียดกลับมาพัฒนาตัวสินค้าหรือบริการต่อไป การทดสอบเรื่อง UX นี้ควรทำทั้งก่อนและหลังเปิดตัวสินค้า โดยครอบคลุมทั้งสินค้า/บริการดิจิตอล และสินค้า/บริการทั่วไปด้วย

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

หนึ่งในเนื้องานหลักที่ UX Designer ต้องทำก็คือ ?Usability Testing? ซึ่งคือการให้กลุ่มเป้าหมายได้ทดลองใช้ผลิตภัณฑ์หรือบริการด้วยตัวเอง แล้วถ่ายบันทึกเก็บไว้เพื่อนำมาพิจารณาว่ามีข้อติดขัดในส่วนไหนบ้าง โดยอาจจะสร้างตัวงานให้ทดลองใช้ 2 แบบ (A/B Testing) แล้วสังเกตว่าแบบไหนได้รับการตอบสนองที่ดีกว่ากัน ในการทดสอบลักษณะนี้หากเป็นเว็บไซต์หรือแอพลิเคชั่น การตรวจวัดก็จะง่ายขึ้น เพราะนอกจากจะถ่ายวิดีโอกับกลุ่มตัวอย่างได้แล้ว เรายังสามารถเก็บข้อมูลจากผู้ใช้โดยตรงด้วยระบบ Analytics (เช่น Google Analytics) ซึ่งจะรายงานยอดผู้เข้าชมแยกตามเพจต่างๆ พร้อมระบุเวลาการใช้ พฤติกรรมการคลิก ฯลฯ ได้อย่างละเอียด

การออกแบบ UX ที่ดี ซึ่งคุณจะได้ประสบการณ์การใช้งานเชิงบวกในการเพิ่มประสิทธิภาพของผู้ใช้อย่างแน่นอน

การออกแบบ UI เน้นที่การดีไซน์ การวาด และการสร้างสัญลักษณ์ เพื่อจะปฏิสัมพันธ์กับลูกค้า ส่วนงานของนักออกแบบ UX จะอาศัยทั้งการออกแบบ ทดสอบ สังเกต ติดตามผล วัดผล สรุปผล ฉะนั้นทั้งอย่างนี้จึงมีเนื้องานแตกต่างกัน แต่ก็จำเป็นต้องใช้งานร่วมกันอย่างใกล้ชิด

ป้ายคำ : เว็บไซต์