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

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

ขั้นตอนแรก ต้องเข้าใจจุดประสงค์การสร้างเว็บไซต์ก่อน

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

ขั้นตอนที่ 2 ต้องเข้าใจลูกค้า

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

UX กับ UI แฝดคนละฝาที่มักมาพร้อมกัน

UX กับ UI แฝดคนละฝาที่มักมาพร้อมกัน

UX/UI (User Experience / User Interface) เป็นกระบวนการในการออกแบบผลิตภัณฑ์ ไม่ว่าจะเป็นสินค้า บริการ หรือสินค้าในรูปแบบดิจิทิล หากใช้ UX/UI เข้ามาช่วยแล้วสินค้า บริการ งานดิจิทัลที่ทำออกมาจะโดนใจลูกค้า และได้รับการบอกต่อแน่นอน

ตัวอย่าง UX/UI ใกล้ ๆ ตัว

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

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

ทั้ง 2 ผลิตภัณฑ์นี้ถึงแม้จะต่างอุตสาหกรรมกันอย่างสิ้นเชิง แต่สิ่งที่เหมือนกันคือ การตอบสนองความต้องการของลูกค้า

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

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

สร้าง Website Wireframe

ขั้นตอนที่ 3 สร้าง Wireframe

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

ขั้นตอนที่ 4 ลงรายละเอียด

เมื่อ Wireframe ได้รับการเห็นชอบแล้ว ให้เราลงรายละเอียดของเว็บไซต์เราลงไป ไม่ว่าจะเป็นการกำหนดสี หรือการนำ CI หรือ (Cooperate Identity) ขององค์กรมาใช้ การเลือกรูปประกอบ เลือกภาพเคลื่อนไหว และการสร้างคอนเทนต์ในเว็บ

ขั้นตอนสุดท้าย ทดสอบและแก้ไข

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

เมื่อทดสอบและแก้ไขจนพอใจ เท่านี้เราก็จะได้หน้าตาเว็บไซต์ที่ตรงใจลูกค้า ก่อนจะส่ง UI เว็บไซต์ที่เราออกแบบให้ทางนักพัฒนาหรือ Developer ลงโปรแกรมต่อไป