หยิบประเด็น Modern UX/UI กับการออกแบบเว็บสมัยใหม่ที่ไม่ควรพลาด จากงาน iCreator Conference 2019

หยิบประเด็น-Modern-UXUI-กับการออกแบบเว็บสมัยใหม่ที่ไม่ควรพลาด-จากงาน-iCreator-Conference-2019

หยิบประเด็น Modern UX/UI กับการออกแบบเว็บสมัยใหม่ที่ไม่ควรพลาด จากงาน iCreator Conference 2019 

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

เว็บไซต์มีความสําคัญอย่างไร 

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

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

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

จุดเริ่มต้นของการเริ่มทำเว็บไซต์ 

ก่อนทำเว็บไซต์ ผมแนะนำว่าให้ลองคิดก่อนว่า User ของเรา คือใคร อายุเท่าไหร่ เพศอะไร ประกอบอาชีพอะไร การศึกษาขั้นไหน รายได้เป็นอย่างไร ความชอบ ไลฟ์สไตล์ต่าง ๆ  จากนั้นค่อยคิดต่อในเรื่องของ ความต้องการ, ปัญหา เพราะการจะ ออกแบบเว็บบนมือถือ หรือบน Devices อื่น ๆ ควรมี User Requirement + Good UI + Good UX = Modern UX / UI นอกจากนี้เรื่องความสวยงามก็เป็นเรื่องที่สำคัญ ซึ่งประกอบไปด้วยปัจจัยที่หลากหลาย ไม่ว่าจะเป็นทั้งความเร็ว ความง่ายในการใช้งาม ความสวยงามและทันสมัยครับ 

 

เว็บไซต์ Desktop และ Mobile ต่างกันอย่างไร แบบไหนดีกว่า


Desktop site

  • พื้นที่เยอะกวาดสายตาจากซ้ายไปขวาแบบตัว Z

  • ผู้ใช้มีเวลาในการเล่น หรือ กวาดสายตา
หาข้อมูลที่สนใจ

  • ใช้เมาท์ในการเลื่อนบนหน้าจอคอมพิวเตอร์หรือแล็ปท็อป

  • UI ในการใช้เหมาะสมกับพื้นที้ใช้งาน

Mobile site

  • พื้นที่มีจำกัดกวาดสายตาจากบนลงล่าง

  • ผู้ใช้มีเวลาในการเล่นน้อย หรือ กำลังใช้งานในเวลาที่ไม่สะดวกมากนัก

  • ใช้นิ้วในการเลื่อนบนหน้าจอโทรศัพท์ทัชกรีน 

  • ต้องคำนึงถึง UI เพราะพื้นที่มีจำกัด 

UX / UI ที่เหมาะกับการออกแบบเว็บไซต์บนโทรศัพท์

  1. Navigation การนำทางสู่ข้อมูล

Navigation ที่ผมกล่าวถึงเป็นได้หลายตัวเลยครับ ไม่ว่าจะเป็น เมนู(Menu Bar) ไปจนถึงส่วนล่าง(Footer) , Link ต่าง ๆ ภายในเว็บไซต์

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

TIP ! แทบเมนูควรจะมีการแบ่งระยะให้สามารถกดได้ง่ายและมีเส้นขั้นให้ระยะชัดเจนจะช่วยทำให้ผู้ใช้งานสะดวกสบายขึ้น


2. เลือก Font ดีมีชัยไปกว่าครึ่ง

  • ขนาดของตัวอักษร ควรอ่านได้ชัดเจน ไม่ต้องเพ่ง ไม่ต้องขยาย ผมแนะนำ ขนาด 16 px ขึ้นไป แต่ถ้าเป็นคนสูงอายุฟอนต์ก็ต้องอ่านง่ายตัวใหญ่ชัดเจน

  • Headline / Sub Headline / Body แบ่งขนาดอักษรให้แยกกันชัดเจน เพื่อให้อ่านง่าย จับประเด็นได้รวดเร็ว รวมไปถึงการทำ H1 – H6 เพื่อให้ เสริมการทำ SEO ที่ดีด้วย

สำหรับการออกแบบเว็บไซต์ในโทรศัพท์  ควรเลือกขนาดตัวอักษรให้พอดีควรจะต้องทำ 2 Size คือสำหรับ โทรศัพท์ และ หน้าจอคอมพิวเตอร์

Line Spacing คือ การเว้นระยะให้อ่านแล้วไม่รู้สึกอึดอัด ไม่ปวดตา 

Alignment ควรจัดให้ดึงสายตา อ่านง่าย สบายตา เน้นชิดซ้ายเป็นหลัก

Link Text ควรแบ่งแยกสีให้ชัดเจน

3. Mood&Tone เป็นหัวใจหลัก

  • กำหนดสีในแต่ละส่วนให้ชัดเจน ไม่ว่าจะเป็น สีหลัก, สีรอง, สีฟอนต์, สีปุ่ม จะช่วยให้ผู้ใช้เข้าใจภาพรวมของแบรนด์มากขึ้น และจดจำได้

 

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


4. GUI ส่วนประกอบสำคัญบนหน้าเว็บ

GUI (graphical user interface) คือ  การใช้ภาพกราฟิกเป็นตัวกลางกระหว่างผู้ใช้ เป็นวิธีการให้ความสะดวก เช่น ใช้เมาส์กดเลือก Icon แทนการพิมพ์คำสั่ง หรือการเลือกคำสั่งตามรายการเลือกที่เรียกว่า ระบบเมนู นอกจากนี้ยังมีรายละเอียดหลากหลายที่ควรคำนึงเพื่อให้ผู้ใช้งาน รู้สึกว่าเว็บไซต์อ่านง่าย เข้าถึงง่ายอีกด้วยครับ ลองไปดูกันเลย 

  • ระยะปลอดภัย 
บน/ล่าง ซ้าย/ขวา ผมแนะนำว่าเว้นระยะประมาณ 15 Pixels กำลังดีครับ

  • เทคนิค Card Design แบ่งข้อมูลให้ชัดเจน ง่ายต่อการอ่าน การกด การเลื่อน ยกตัวอย่างสื่อใหญ่ ๆ ที่ใช้เทคนิคนี้ Facebook, Instagram จุดเด่นของเทคนิคนี้ คือ ออกแบบเป็นบล็อก ๆ จะช่วยให้อ่านและการใช้งานได้ง่าย 

 

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

 

  • Call to action หน้าเว็บไซต์ควรมีเป้าหมาย สักอย่างให้ผู้ใช้ได้ลองทำ เช่นกดแชร์ กดติดตาม, กดรับข่าวสาร 

  • ปุ่ม ต้องกดง่ายขนาดเหมาะสม มองเห็นง่าย ไม่เล็กหรือใหญ่เกินไปครับ 

 

5. ปรับแต่งเว็บไซต์ให้เร็วแรงถูกใจผู้ใช้งาน

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

  • ขนาดภาพควรปรับให้เล็ก
เหมาะสมกับโทรศัพท์นะครับ ความกว้าง อยู่ที่ 900px – 1200px ไม่จำเป็นต้องทำภาพให้ใหญ่เพราะการแสดงผลเท่าที่กำหนดอยู่ดี

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

  • ลด Effect เน้นการจัดวางที่เข้าใจง่ายจะดีกว่านะครับ บางจุดเขียนเป็น Code ได้จะดีกว่าการตัดเป็นภาพแปะ เช่นพวก ปุ่ม พื้นหลัง 

หมั่นเช็ค Data และอัพเดตเว็บไซต์สม่ำเสมอ

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

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

Related Articles