UX/UI เว็บไซต์ไทย ออกแบบยังไงให้ตอบโจทย์ ในงาน iCreator Meetup ครั้งที่ 8

Update

รอบนี้ได้มีโอกาสมาเป็น Speaker ให้กับ RAiNMAKER เป็นครั้งที่ 2 โดยครั้งที่แล้วได้เป็น Speaker ในงาน iCreator Conference 2019 กับหัวข้อ UX/UI for Modern Mobile Website หลักการออกแบบเว็บบนมือถือสมัยใหม่

กลับมาในครั้งที่ 2 นี้ ก็ยังรับหน้าที่ส่งต่อความรู้เรื่อง UX/UI เหมือนเดิม แต่หัวข้อจะแคบขึ้นโดยจะไปโฟกัสกับเรื่อง UX/UI เว็บไซต์ไทย ออกแบบยังไงให้ตอบโจทย์

ทำไมต้อง UX/UI เว็บไซต์ไทย ?

ตอนได้รับโจทย์ว่าอยากให้พูดเรื่องงานออกแบบ UX/UI สำหรับเว็บไซต์ในเวลา 20 นาที ก็คิดอยู่ประมาณ 2 วันว่าเราจะพูดไปในทิศทางไหนดีเพราะเวลาจำกัดแต่เนื้อหาค่อนข้างเยอะ เลยคิดขึ้นได้ว่าเราทำงานกับลูกค้าที่มี ผู้ใช้(User) เป็นคนไทยประมาณ 95% ซึ่งตอนออกแบบเรามักจะได้ไป Research ข้อมูลมาเยอะพอสมควร ดูผลงานของเรา

กลับมาเป็น Speaker ในรอบนี้เลยอยากเอา Insight ของผู้ใช้แบบไทยๆมาแชร์ให้เป็นความรู้กับ Content Creator และผุ้ที่อยากจะทำเว็บไซต์ของตัวเองในอนาคต โดยจะไล่เนื้อหาตาม Keynote ที่ได้พูดในวันนั้นไปพร้อมกันเลย

UX/UI เว็บไซต์ไทย ออกแบบยังไงให้ตอบโจทย์

เทรนด์อาจจะไม่ใช่สิ่งที่ใช่เสมอไป สำหรับการออกแบบ UX/UI เว็บไซต์ไทย

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

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

1.สร้างเว็บไว้ให้ผู้ใช้ดูหรืออ่าน
เว็บไซต์ที่สร้างไว้ให้ดูหรืออ่านจะเป็น เว็บข่าว เว็บบล็อก เว็บให้ความรู้ต่าง เช่น Mango Zero, The Standard หรือ Bright Today ที่เราได้ออกแบบและพัฒนาให้กับ Bright TV เดิม

2.สร้างเว็บไว้ให้ผู้ใช้ทั้งดูและใช้งาน
ส่วนเว็บไซต์ที่สร้างไว้ให้ทั้งดูและใช้จะเป็น เว็บขายสินค้า เว็บบริการรูปแบบต่างๆ เช่น Shopee, Lazada, Flowaccount

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

สิ่งที่ต้องทำอันดับแรกคือ วิเคราะห์ผู้ใช้ของเว็บไซต์

ผู้ใช้เว็บไซต์ของคุณพวกเขาใช้อุปกรณ์อะไร เป็นอันดับที่ 1 คอมพิวเตอร์ มือถือ หรือ แท็บเล็ต หลายคนอาจจะบอกว่าก็ต้องมือถืออยู่แล้วเพราะสถิติเท่าโลกบอกว่าผู้ใช้งานเข้าเว็บไซต์ผ่านมือถือเกือบ 70% และนั่นก็คือเรื่องจริง แต่เว็บไซต์ของเราผู้ใช้เข้าผ่านมือถือเยอะขนาดนั้นจริงหรือไม่? ถ้าอยากจะรู้ก็มี 2 ทางคือ 1. ติด Google Analytics 2. ทำ User Interview

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

วิเคราะห์ผู้ใช้ UX/UI เว็บไซต์ไทย ด้วย Google Analytics

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

ผู้ใช้ต้องไม่หลงทางไม่ว่าจะเข้าผ่านอุปกรณ์ชนิดไหน

ทำไมต้องทำให้ยาก ทำไมต้องทำให้ซับซ้อน เพราะสุดท้ายผู้ใช้แค่อยากเข้ามาอ่านเนื้อหาที่ดี เราควรจะไปโฟกัสในเรื่องของเนื้อหามากกว่าการทำ UI ให้สวยแต่ใช้งานยาก อย่างการออกแบบเมนูสังเกตว่าทาง Grappik เองพยายามออกแบบให้ง่ายที่สุด

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.011-1024x576.jpeg

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

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.012-1024x576.jpeg

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

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.013-1024x576.jpeg

การค้นหาหัวใจหลักของเว็บ Content ผู้ใช้ชอบค้นหาแต่จะให้ค้นหาอะไร?

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

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.015-1024x576.jpeg

ถ้าผู้ใช้ไม่ค้นหาก็จะตาม Tag Categories ต่างๆไป เนื้อหาที่เราเขียนบนเว็บไซต์ควรทำ Tag เอาไว้ให้ผู้ใช้สามารถตามไปอ่านบทความที่น่าสนใจได้อย่างง่ายดาย

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.016-1024x576.jpeg

เนื้อหาบนเว็บไซต์ต้องอ่านสบายตาและต่อเนื่อง

สิ่งที่เราควรปรับและออกแบบอย่างแรกสำหรับเว็บ Content คือเรื่องของตัวอักษร ฟอนต์บนเว็บไซต์สามารถช่วยเรื่อง UX/UI ได้ เพียงแค่เลือกใช้ให้ถูกต้อง พาดหัวของ Content ควรใช้ Sans Serif ฟอนต์ไม่มีหัว และตัด Description เพื่อความกระชับ UI

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.018-1024x576.jpeg

Pattern ของ UI Card ของ Content จะประกอบไปด้วย รูป, ชื่อเรื่อง 2-3 บรรทัด, หมวดหมู่, ผู้เขียน, วันที่ ซึ่งในความเป็นจริงเราไม่จำเป็นต้องใส่ทั้งหมดที่กล่าวมาก็ได้ เพียงแค่เลือกสิ่งที่จำเป็นสำหรับผู้ใช้ของเราก็พอ

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.019-1024x576.jpeg

มี Card UI สำหรับ Content แล้วก็ควรจัดระเบียบให้น่าสนใจด้วยเทคนิคเล็กใหญ่ พระเอก พระรอง

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.020-1024x576.jpeg

ตัวอย่างของเว็บไซต์ Bright Online, The Standard หรือ The Matter ก็วางรูปแบบคล้ายๆกัน

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.021-1024x576.jpeg

ระยะการวางเนื้อหาก็มีผลกับการอ่านของผู้ใช้ การใช้เว็บไซต์เปรียบเสมือนการอ่านหนังสือ ยิ่งเป็นเว็บ Content เราก็ควรออกแบบระยะการอ่านให้อ่านง่าย ไม่ต้องกวาดสายตาจากซ้ายไปขวาจนปวดตา ยกตัวอย่าง https://medium.com/ การจัดเนื้อหาจะใช้ความกว้างไม่เกิน 680 px เพื่อไม่ให้ผู้ใช้ต้องกวาดสายตามากจนเกินไป

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.022-1024x576.jpeg

ไม่ใช่แค่อ่านง่าย แต่ควรสร้างเรื่องราวให้ Content น่าสนใจ เรื่องบางเรื่องเนื้อหาต่อกันควรจะมีการแปะ URL เอาไว้ให้ผู้ใช้ได้กลับไปย้อนหลังได้สะดวก

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.023-1024x576.jpeg

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

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.025-1024x576.jpeg

ตัวหนังสือที่ใช้สำหรับการอ่านก็ต้องอ่านง่าย อ่านแล้วสบายตา ซึ่งจะใช้ Serif ฟอนต์มีหัว เช่น Tahoma, Sarabun เป็นต้น ดูฟอนต์ไทยฟรีที่นักออกแบบนิยมใช้

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.024-1024x576.jpeg

เปลี่ยนเนื้อหาให้สนุกด้วยภาพและกราฟิก

จำได้ไหมว่าทาง ไทยรัฐ ออนไลน์ เคยทำเรื่องราวของปลาทูไทยโดยใส่ลูกเล่นให้ดูน่าสนใจมากขึ้น นี่เป็นอีกหนึ่งเทคนิคการปรับ UX/UI ให้เนื้อหาดูน่าสนใจมากขึ้น ดูเรื่องราวของปลาทูไทย

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

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.027-1024x576.jpeg

เข้าใจ Flow การใช้เว็บ ผู้ใช้มาทางไหน?

ถ้ามี Google Analytics ติดอยู่ในเว็บไซต์อยู่แล้ว เราควรไปเรียนรู้ Flow ของผู้ใช้ดู พวกเค้ามาจากไหน Social Media, SEO หรือ Direct

จากตัวอย่างเว็บ Grappik จะมีผู้ใช้เข้ามาจาก SEO เป็นอันดับ 1 พออ่าน Content เสร็จก็จะกลับไปหน้าแรกเพื่อหา Content ที่น่าสนใจอื่นๆเพิ่มเติม การออกแบบ Flow ใหม่สามารถแก้ไขให้คนยังไม่ต้องไปหน้าแรกได้ด้วยการทำ Related Content ในหมวดหมู่เดียวกัน หรือ แทรก Content ที่น่าสนใจต่อท้าย

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.032-1024x576.jpeg

เข้าใจ Flow ของผู้ใช้งานให้ได้ แล้วเราจะสามารถอุดรอยรั่วของเว็บให้ผู้ใช้สามารถอยู่บนเว็บไซต์ของเราได้นานยิ่งขึ้น

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.033-1024x576.jpeg

ดู Flow อย่างเดียวเราควรดูพฤติกรรมของผู้ใช้ด้วย Heat Map เรารู้แล้วว่าผู้ใช้เข้ามาหน้าไหน แต่ไม่รู้ว่าเค้ากดอะไรบ้าง เลื่อนเมาส์ไปทิศทางไหน หรือเลื่อนลงไปอ่านถึงส่วนไหน การใช้ Heat Map ก็เป็นส่วนสำคัญในการปรับ UX/UI ได้ดีเยี่ยม

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.035-1024x576.jpeg

ดูพฤติกรรมให้ครบถ้วนด้วย Heat Map โดยฟังก์ชั่นของโปรแกรม(ตัวฟรี) ก็มีให้เราเก็บข้อมูลได้ดีอยู่แล้ว

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.039-1024x576.jpeg

Heat Map Tools ที่แนะนำจะมี Hotjar และ Ptendine ใช้งานได้ฟรีตามเงื่อนไขของแต่ละโปรแกรม

รูปภาพนี้มี Alt แอตทริบิวต์เป็นค่าว่าง ชื่อไฟล์คือ RAiNMAKER-Thai-Website.040-1024x576.jpeg

การใช้ Heat Map ก็มีข้อดีและข้อเสียรายละเอียดตามรูปภาพด้านล่าง

1 คลิกมีค่า หน้านั้นต้องดีจริง

ค่าของเวลาเว็บไซต์ของเราควรเร็ว แรง เบา ผู้ใช้มีความอดทนไม่เท่ากันอย่าให้การรอเว็บโหลดกลายเป็นปัญหาของผู้ใช้

ค่าความคุ้ม การที่ผู้ใช้จะกดคลิกไปแต่ละหน้านั้นไม่ใช้ง่ายๆ เพราะงั้นการคลิกแต่ละครั้งเราควรมีความคุ้มค่าในส่วนของเนื้อหาเตรียมพร้อมเสิร์ฟ ไม่ใช่หลอกให้คลิก หรือคลิกแล้วไม่เจอข้อมูลที่ต้องการ


จากประสบการณ์ที่ได้ทำเว็บไซต์ให้กับทั้งหน่วยงานเอกชนและภาครัฐ สิ่งที่อยากจะบอกทุกคนเอาไว้คือ UX / UI
ไม่ใช่แค่ “เทรนด์” แต่คือสิ่งที่ต้อง “ทำและทดสอบ” เพื่อหาสิ่งที่ใช่ให้กับผู้ใช้ของเรา