UX Design Process คืออะไร ไม่รู้บาป

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

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

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

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

ux design process การออกแบบ

Before you start… เตรียมตัวก่อน

การออกแบบ UX จะมีประสิทธิภาพมาก ถ้าหากคุณเริ่มจากความคิดที่ถูกต้อง ก่อนที่คุณจะดำดิ่งสู่ขั้นตอนการออกแบบ UX มีหลักการสองสามข้อที่คุณควรคำนึงถึงตลอดการสร้างเว็บไซต์ของคุณ:

  • ผู้ชมต้องมาก่อนเสมอ

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

เป้าหมายทางธุรกิจมีความสำคัญ แต่จะเป็นความคิดที่ดีมากๆ ถ้าเราพัฒนาเว็บเพื่อที่จะช่วยให้ผู้ใช้บรรลุเป้าหมาย เช่น ถ้าคุณต้องการเพิ่ม engagement คุณต้องโฟกัสในการพัฒนาเว็บให้ผู้ใช้ ใช้งานได้ง่าย น่าสนใจ อ่านง่าย ได้สิ่งที่เค้าต้องการจริงๆ

  • Communicate and collaborate สื่อสารและทำงานร่วมกัน

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

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

  • Test, refine, and test again ทดสอบปรับแต่งและทดสอบอีกครั้ง

การออกแบบ UX ที่ดีต้องอาศัยการทำซ้ำ – ทดสอบและปรับปรุงการออกแบบของคุณหลาย ๆ ครั้งในแต่ละขั้นตอนเพื่อให้สมบูรณ์แบบ

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

user experience

4 ขั้นตอน ออกแบบ UX design process

  1. Research – ใครคือผู้ใช้ของคุณและเขาต้องการอะไร
  2. Analysis – การวิเคราะห์หาเป้าหมายของผู้ใช้ จากนั้นหาไอเดียเพื่อออกแบบเว็บไซต์ให้ตอบสนองผู้ใช้
  3. Design and usability testing – การออกแบบและการทดสอบการใช้งาน – ออกแบบโครงสร้างและ layout จากนั้นปรับแต่งให้ใกล้เคียงงานที่เสร็จสมบูรณ์ และทดสอบทันที
  4. Evaluate – กระบวนการประเมินว่าเว็บไซต์ของเรามีประสิทธิภาพอย่างไร มีข้อบกพร่องตรงไหน

Research

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

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

แล้วทำอย่างไรล่ะ

  • Customer statistics สถิติต่างๆของลูกค้า

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

  • Interviews and focus groups 

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

  • Examine current user behaviour 

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

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

Analysis

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

แล้วทำอย่างไรล่ะ

  • User personas 

จากข้อมูลที่คุณรวบรวม นำมาสร้างลักษณะของผู้ใช้ 3-5 คน: การสมมติผู้ใช้งานเสมือนจริง สิ่งเหล่านี้จะช่วยให้คุณเอาใจใส่ผู้ใช้ของคุณเมื่อคุณออกแบบเว็บไซต์

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

  • Scenario maps แผนที่สถานการณ์

จากนั้นสร้างสถานการณ์จำลองสำหรับแต่ละบุคคล: เวลาที่พวกเขาใช้เพื่อให้บรรลุเป้าหมาย มีกี่วิธีที่เขาสามารถทำได้ คุณสามารถใช้ Post-it, Flowchart หรืออะไรก็แล้วแต่เขียนออกมาเป็นภาพบน storyboard นั่นเป็นวิธีคิดพื้นฐานในการแตกไอเดียออกมา คุณจะได้เห็นภาพว่าผู้ใช้ ใช้งานเว็บไซต์ของคุณอย่างไรและอะไรคือสิ่งที่เค้าต้องการหรือไม่ต้องการ

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

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

Design and usability testing

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

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

Once you’ve perfected this, you can move on to developing an interactive prototype. Here’s where you conduct a series of usability tests to refine the performance of the design and establish the website’s visual elements.

โอเคตอนนี้เราเตรียมงานมากันถึงขั้นตอนนี้ ทั้งการวิเคราะห์ข้อมูลต่างๆ Keyword, User ต่อไปก็ถึงการลองสร้าง Prototype เหมือนใช้งานจริง ที่นี่คุณสามารถทำการทดสอบการใช้งานตามที่เคยออกแบบไปตาม Scenario ต่างๆ แล้วดูประสิทธิภาพการทำงานและปรับปรุงให้สมบูรณ์ แล้วทดสอบอีกครั้ง

แล้วทำอย่างไรล่ะ

  • Wireframes

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

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

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

  • Prototyping

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

มีเครื่องมือสร้าง Prototype มากมายที่จะช่วยคุณให้สามารถปรับแต่ง Visual Element, Transition หรืออะไรต่างๆ ในขั้นตอนนี้เราโฟกัสในส่วนที่ prototype ต้องมีการทำงาน interact ให้เหมือนกับ

งานจริง  เพราะนั่นเป็นสิ่งที่ทำให้ผู้ใช้งานเข้าใจมากที่สุด เห็นภาพได้มากที่สุดว่าเว็บที่เขาใช้ถูกใจหรือไม่ถูกใจ มีส่วนบกพร่องตรงไหน

  • Usability testing tools

เมื่อเราสร้าง Prototype ที่ทำงานได้เสมือนจริง ซึ่งจริงๆแล้วถูกและใช้เวลาน้อยกว่า Codeเว็บขึ้นมาจริงๆ นี่คือจุดที่คุณสามารถนำ Design ของคุณเข้ากระบวนการทดสอบการใช้งาน

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

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

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

Evaluate

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

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

แล้วทำอย่างไรให้ดีต่อ UX Design Process

  • Usability testing

ก่อนที่คุณจะเปิดเว็บไซต์ของคุณ คุณควรทดสอบซ้ำอีกครั้งตั้งแต่ต้น ไม่ว่าจะเป็น ส่วนของ prototype, Heatmaps และ session recordings เพื่อให้แน่ใจถึงประสิทธิภาพของเว็บไซต์ รวมไปถึงการเขียน Code ที่มีประสิทธิภาพ

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

  • Website analytics

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

  • User feedback surveys

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

  • Ongoing evaluation

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

ux design
engagement คือ

ยอดการมีส่วนร่วมค่านี้จะใช้วัดสำหรับในสื่อที่เป็น Social Media โดยการวัดจากยอด Like Comment Share หรือ Click Post ซึ่งยิ่งมี Engagement Rate มากขึ้นเท่าไร แสดงว่าคนชื่นชอบแบรนด์เรามากเท่านั้น 

Competitor research คือ

การวิเคราะห์คู่แข่ง คือ การวิเคราะห์เพื่อใช้ในการวางแผนและสร้างกลยุทธ์ทางธุรกิจ ผ่านการพิจารณาธุรกิจคู่แข่ง

Prototype คือ

แบบจำลองเพื่อเก็บ Feedback จาก User ก่อนการสร้าง Product จริง เป็นขั้นตอนที่สำคัญที่ส่งผลต่อการสร้าง Product ให้น่าพึงพอใจ

ขอบคุณข้อมูลจาก itopplus

สรุป

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

บทความอื่น ๆ ที่น่าสนใจ