ในเรื่องของการออกแบบ User Experience (UX) และ User Interface (UI) นั้น มุ่งเน้นให้คนในทีมพัฒนาเว็บไซต์หรือพัฒนาแอพพลิเคชัน ออกแบบมาแล้วไม่หลุด Theme เป็นการออกแบบมาเพื่อสร้างความประทับใจให้กับผู้ใช้งานได้
ในการทำผลิตภัณฑ์ (Product) หรือเว็บ หรือแอพพลิเคชั่นอะไรสักอย่างหนึ่งนั้นจะต้องมีการออกแบบไม่ว่าจะเป็นแอพพลิเคชั่นหรืออุปกรณ์ใดๆ โดยในองค์ประกอบหลักๆ ที่จะสร้างประสบการณ์ที่ดีให้กับผู้ใช้งานได้นั้นก็คือเรื่องของ UX (User Experience) และ UI (User Interface) โดยความหมายที่เข้าใจและเห็นภาพชัดเจนของสองสิ่งนี้คือ ยกตัวอย่างเช่นการออกแบบลูกบิดประตู UI คือ มุมมองในสิ่งความสวยงามเน้นในเรื่องของสีสรรค์ หรือ รูปร่างรูปทรง (Shape) ดูดี เรียกว่าเป็น Perl Visual เป็นหลัก แต่ถ้าเป็น UX จะเน้นในเรื่องการใช้งาน ผู้ใช้(User) ใช้งานติดใจอยากกลับมาใช้อีก เช่น ลูกบิดใช้งานง่าย คำนึงถึงจุดที่จะเข้าบ้านจะคำนึงถึงกลอนประตูบ้าน สามารถนำโน๊ตไปเสียบไว้กับกลอนประตูได้ ก็ออกแบบมาเพื่อให้ผู้ใช้ใช้แล้วอยากกลับมาใช้อีก ผู้ใช้จะรับรู้เรื่อง UX ได้ว่าดีหรือไม่ก็อยู่ในขั้นตอนการใช้งาน แต่หากเป็นเรื่อง UI ผู้ใช้จะพบเห็นในภายนอกตั้งแต่ตอนแรก
User Interface: UI คือ สิ่งที่ User มีปฏิสัมพันธ์ (interact) กับ Product เช่น รถจักรยาน สิ่งที่เราจะ interact ด้วยได้แก่ เบาะ และที่ทีปจักรยาน เป็นต้น UI คือสิ่งที่เรามองเห็นด้วยตาหรือสิ่งที่ผู้คนมีปฏิสัมพันธ์ (Interact) ร่วมด้วย ดั้งนั้นถ้าหาก UI ไม่สวยก็จะทำให้ไม่น่าสนใจ ก็เปรียบเสมือนกับ Application หรือ Web ที่พัฒนาหากออกแบบไม่สวยก็จะทำให้ผู้ใช้ไม่อยากเข้าใช้งานได้
วิวัฒนาการของ User Interface : UI ถ้าหามองในแง่มุมของซอฟต์แวร์ก็จะมีตั้งแต่สมัยที่เป็นยุคของ Text User Interface (TUI) งานด้านการแสดงผลด้วยข้อความ , Graphic User Interface (GUI) การแสดงผลด้วยกราฟิก , Natural User Interface (NUI) เป็นการออกแบบที่เราสามารถใช้งานร่างกายปฏิสัมพันธ์กับซอฟต์แวร์ได้ มักจะเรียกว่า Motion Sensor
แนวโน้มการออกแบบ UI ของ Mobile (Mobile UI Trends) เทรนของการออกแบบ UI Mobile ต้องทำความเข้าใจเทรน ซึ่งจะส่งผลต่อยอดดาวน์โหลดได้ ซึ่ง Trends ประกอบไปด้วย
- Skeuomorphic หรือ Realism (ความสมจริง) เป็นการออกแบบเน้นวัตถุสิ่งใดสิ่งหนึ่งการทำกราฟิกให้เสมือนจริง ให้ผู้ใช้อินกับกราฟิก เป็นการเรียนแบบการออกแบบเกี่ยวกับงานหนัง งานเย็บ ต่าง ๆ ในสมัยก่อน ที่ให้ความรู้สึกกับผู้ใช้ว่า กำลังใช้งาน Object วัสดุ นั้นจริงๆ โดยไม่ต้องทำความเข้าใจอะไรมาก ข้อดีคือ มีความเป็น Uni ในการออกแบบ
- Flat Design & Simplicity (การออกแบบเรียบง่าย) เป็นการออกแบบที่เรียบง่ายด้วยยุคก่อน ไม่มีปัญหากับขนาดของหน้าจอเพราะมีขนาดเดียว ไม่เหมือนเช่นกับปัจจุบัน เพราะมีอุปกรณ์หลากหลายชนิดที่ผู้ใช้ใช้งาน เช่น Smart Phone , Personal Computer เป็นต้น
- Gestural interfaces (การออกแบบโดยใช้นิ้วปาดไปมา) Gestures คือรูปแบบการใช้นิ้วปาด ก็จะมีวิธีการปาดหลายรูปแบบ เช่น การปาดเพื่อการ CUT , UNDO , COPY เป็นต้น เทคนิคที่จะทำให้ผู้ใช้เข้าใจได้ โดยการใช้ Icon Gestural มาแนะนำบอกให้กับผู้ใช้ให้เข้าใจว่าสามารถใช้การปาดซ้ายขวาได้ด้วยนิ้ว หรือฝ่ามือ
- Circles (วงกลม) เทรนการแสดงรูปภาพเป็นวงกลม จะสามารถทำการ Contrast ได้อย่างชัดเจนทำให้ผู้ใช้งานมาโฟกัสกับมือถือได้มากขึ้น เช่น การทำ icon ในรูปทรงวงกลม ทำให้ดูทันสมัยยิ่งขึ้น ทำให้แอพลิเคชั่นดู Soft ขึ้น ด้วยการใช้เรื่องของสีเข้ามาจะทำให้ภาพที่ใช้ในแอพดูดียิ่งขึ้น แต่สิ่งสำคัญไม่ควรใช้วงกลมที่ใหญ่เกินไป และมีมากเกินกว่า 2-3 วง จะทำให้ User ไม่สามารถจับได้ว่าอะไรคือสิ่งที่ควร concentrate ด้วย
- Enterprise Mobile เป็น Theme ที่จะต้องเข้าใจเกี่ยวกับการใช้เฉดสี ไม่ควรใช้เฉดสีที่ฉูดฉาดเกินไป และ Content ดูเรียบง่ายเป็นทางการ โดยเน้น Data Content เป็นหลัก ไม่เน้น Graphic มาก เช่น Gmail เป็นต้น
- Pure Guidelines การใช้ User Interface แบบ Default ใช้ตาม Standard ที่ได้รับมา เน้นใช้ตัวมาตรฐานที่ได้รับมาหมด เช่น Android ใช้ค่ามาตรฐาน User Interface เลย โดยไม่แต่งเพิ่ม
- Large Images เป็นเทรนที่มาแรง เน้นรูปภาพที่ใหญ่ แสดงรูปภาพขนาดใหญ่ ข้อดีทำให้ผู้ใช้รู้รับทราบได้ว่าเว็บกำลังสื่อถึงอะไร แต่รูปที่ใช้ต้องสื่อความหมายที่ชัดเจน เข้าใจง่าย
- Blur การทำ Blur Affect การทำภาพพื้นหลังให้เบลอ ทำให้ผู้ใช้งานเข้าใจไปกับ Content อารมณ์และความรู้สึกที่ผู้พัฒนาต้องการสื่อได้อย่างง่าย
- Infographic การทำข้อมูลให้เป็นเชิงกราฟิก เช่น ข้อมูลสุขภาพ ออกมาในรูปกราฟ หรือรูปภาพสถิติให้ผู้ใช้เข้าใจได้ง่าย เป็นต้น
หลักการในการออกแบบ UX/UI
1. Contrast การออกแบบให้เด่น ออกแบบปุ่ม รูปภาพ ข้อความ ให้ User เห็นแล้วอยากกดเข้าไปใช้งาน เช่น ปุ่มจากเดิมเป็นสีขาว ก็ทำให้เป็นสีเขียว ด้วยวิธีการทำให้วัตถุน่าใช้งานมากขึ้น ด้วยหลักการต่อไปนี้
-
-
- เลือกใช้สี และวงจรสี (Wheel) ถ้าสีที่อยู่ตรงกันข้ามกันจะมีค่า Contrast สีของกันมากที่สุด เช่น สีแดง เป็นพื้น วงจรสีตรงข้ามที่พบจะเป็นสีเขียว คือค่าสีตรงข้าม ถ้าใช้สีเขียวเป็นปุ่ม ก็จะทำให้เกิด Contrast สีขึ้น
- Size การใช้ขนาดที่แตกต่างกัน มาสร้างความ Contrast ให้กับภาพ
- Shape รูปทรง เช่น สามเหลี่ยม สี่เหลี่ยม วงกลม มาสร้างความ Contrast
- Position ตำแหน่งในการจัดวาง สร้างความโดดเด่นให้กับสายตาผู้ใช้เลื่อนไปดูได้
- Direction ทิศทางตำแหน่งการแสดงผลที่แตกต่างจากจุดอื่น สร้างความโฟกัสให้กับสายตา
- Texture พื้นผิว สร้างความแตกต่างให้กับการแสดงผล
2. White Space ที่ว่างใน User Interface จะส่งผลกับจุด Focus ของ User หากหนาแน่นเกินไปก็จะทำให้รูปภาพหรือเนื้อหาเว็บหรือแอพหนาแน่นอึดนัด หากจัดให้พอดีจะทำให้ User มีจุดโฟกัสที่ดีและอยากใช้งาน
3. Visual Noise จุดรบกวนของสายตา User เช่น การแบ่งบันทัดการแสดงผลของข้อมูล เส้นที่แบ่งระหว่างบันทัดของข้อมูลที่เข้มเกินไป หากปรับให้สีเบาสบายตาจะทำให้น่าใช้งานขึ้น
4. การตัดคำที่ไม่จำเป็น เช่น การใช้ Dropdown list วันที่ ที่ไม่ยาวเกินไป ใช้แบบสั้น หรือข้อความที่นำมาแสดงการแนะนำบทความที่ไม่ยาวเกินไปก็จะลดเวลาสายตาในการอ่านของผู้ใช้มากขึ้น
5. Focus on Goal เวลาที่ผู้ใช้งานแอพพลิเคชั่นแต่ละหน้า ผู้ใช้มักจะคาดหวังว่าจะได้อะไร และควรจะทำอะไรบ้างกับแอพพลิเคชันนั้น เช่น เข้าไปในเว็บขายของ ก็ควรจะรู้ว่ากดปุ่มใดเพื่อสั่งซื้อสินค้า เช่น แอพของ OLX มีปุ่น ขายสีส้มใหญ่ ปุ่มซื้อ สีเขียวเล็ก เป็นต้น
6. Visual Hierarchy คือการแบ่งความสำคัญของเนื้อหาออกเป็นลำดับ จากความสำคัญมากไปหาน้อย แล้วก็ใช้หลักการของ Contrast มาใช้ในการออกแบบแต่ละส่วนให้เกิดความเด่นตามลำดับที่วางไว้
7. Conventions เป็นสิ่งที่ใช้กันมาต่อเนื่องแบบเป็นธรรมเนียม เช่น สิ่งที่มันดีอยู่แล้วก็ไม่ต้องไปเปลี่ยนแปลง เพราะคือสิ่งที่ผู้ใช้เข้าใจอยู่แล้ว เช่น ลิงค์การเชื่อมโยง หากใช้สีน้ำเงินผู้ทราบทันทีว่าคือ ลิงค์ , สัญญาลักษณ์ icon รูปตะกร้า คือคิดเงิน เป็นต้น
8. Context of Use บริบทการใช้งานในตัว Device ที่แตกต่างกัน เช่น การออกแบบที่ Mobile ที่มีข้อมูลไม่มาก เน้นไอคอนเพื่อใช้งานง่ายๆ แต่ UI ที่ออกแบบกับ Tablet ก็จะออกแบบเยอะกว่าให้เห็นรายละเอียดเพิ่มกว่า Mobile เพื่อความสบายสายตา เป็นต้น
9. Interaction Distance การวางระยะห่างของปุ่มหรือวัตถุที่ผู้ใช้จะมีปฏิสัมพันด้วย คือ เป็นหลักการที่ไม่ควรจะมองข้าม เกี่ยวกับการปฏิสัมพันกับผู้ใช้ โดยผู้ใช้มักจะคาดหวังว่าจะมีการแสดงผลใดต่อกับผู้ใช้ เช่นให้กดใช้งาน หรือคลิกต่อไป หรือทำให้ผู้ใช้คิดว่าแอพนั้นที่ใช้ค้าง คือกดอะไรไม่ได้ แต่จริงๆ แล้วต้องเลื่อนแอพพลิเคชันนั้นลงมา คือมีระยะห่างในการกดห่างเกินจนทำให้ผู้ใช้คิดว่าแอพนั้นใช้งานต่อไปไม่ได้นั่นเอง
10. Step by Step Guide หากแอพที่ใช้งานเป็นแอพที่ใหม่ ครั้งแรกสำหรับ User ควรมี Step ในการแนะนำการใช้งานบอกให้กับผู้ใช้ทราบ
11. Field form การกรอกข้อมูลในฟอร์มข้อมูล พยายามจัดวางโดยให้ผู้ใช้มีการใช้สายตาให้น้อยที่สุด เช่น วางจากบนลงล่าง จะดีกว่าวาง Form Input แบบไล่ซ้ายขวา
12. ปิด Dialogue Box ด้วยการ Touch นอกกรอบได้
13. Pull-down Menu ควรมีการวางลำดับของตัวอักษร A-Z , ก-ฮ จะง่ายต่อการหาของผู้ใช้
14. Minimum Touch Area พื้นที่ให้ User กดได้ มีการกำหนดขนาดของ Apple ที่ออกแบบมาคือ 44 x 44 pixel ส่วนของฝั่ง Microsoft 38x38 pixel