ขั้นตอนการออกแบบ User Interface (UI) ก่อนและหลัง

กรณีศึกษาและเคล็ดลับ

ขั้นตอนการออกแบบ User Interface (UI) ก่อนและหลัง
หมวดหมู่
เทคโนโลยี
ผู้เขียน

Edgar Outsourcify

Design Manager & UX/UI Specialist
วันที่

ในฐานะเว็บเอเจนซี่ เราทำทั้งงานออกแบบและปรับปรุงออกแบบเว็บไซต์ใหม่
เรามี portfolios จำนวนมากเกี่ยวกับการออกแบบเว็บไซต์ ดังนั้นเราจึงคิดว่ามันน่าสนใจที่จะแสดงกระบวนการออกแบบส่วนต่อประสานผู้ใช้ (UI) ของเราพร้อมกับนำเสนอกระบวนการการออกแบบของเเต่ละโปรเจ็กต์ และนำเสนอให้เห็นความต่าง ภาพก่อน – หลังในกรณีศึกษาของเรา: การออกแบบเว็บไซต์ฝึกสุนัขออนไลน์ WKD


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

ก่อนอื่นเราต้องการแบ่งปันขั้นตอนการออกแบบ user interface ก่อน

Ui 01

ขั้นตอนที่ 1: การวิเคราะห์เว็บไซต์เก่า

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

ขั้นตอนที่ 2: วิเคราะห์และวิจัยตลาดและคู่แข่ง

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

อย่าลังเลที่จะอ่านเพิ่มเติมเกี่ยวกับการดำเนินการทำ UX workshops ของเรา: https://outsourcify.net/how-we-facilitate-a-ux-workshop-at-outsourcify/

เราจะไปต่อกันที่หัวข้อหลักของบทความนี้คือ การออกแบบ UI

ขั้นตอนที่ 3: การรวบรวมแรงบันดาลใจ

นี่คือจุดเริ่มต้นของการออกแบบ UI

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

ขั้นตอนที่ 4: กำหนดแนวทาง

เมื่อเราจำกัดความคิดเห็นเกี่ยวกับแนวคิดการออกแบบสำหรับโครงการให้แคบลงเราจะเริ่มออกแบบหน้า Landing Page ก่อนเพื่อดูบรรยากาศโดยรวมของการออกแบบและเมื่อเสร็จแล้วเราก็นำเสนอให้กับลูกค้า ในระหว่างขั้นตอนนี้เราได้กำหนดแนวทางพื้นฐาน เช่น headings, color theme และรูปแบบของส่วนประกอบต่างๆ เช่น ปุ่ม หรือ เมนู กระบวนการนี้สามารถทำได้โดยเริ่มจากการออกแบบ Desktop version หรือ Mobile ก่อน ซึ่งหมายถึงการเริ่มต้นด้วยการออกแบบ mobile responsive โดยขึ้นอยู่กับข้อมูลประสบการณ์ของผู้ใช้หากผู้ใช้มีแนวโน้มที่จะใช้แพลตฟอร์มบนอุปกรณ์มือถือของตน

กระบวนการแรกของการออกแบบ Mobile นี้ช่วยในการจัดโครงสร้างสถาปัตยกรรมข้อมูลให้ดีขึ้นและยังช่วยให้การพัฒนาเริ่มต้นด้วย code base ที่น้อยลงเพื่อปรับเปลี่ยนเมื่อเวอร์ชัน desktop version ต้องการพัฒนาต่อ

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

ขั้นตอนที่ 5: นำเสนอการออกแบบให้กับลูกค้า

เมื่อการออกแบบเสร็จสมบูรณ์เราจะนำเสนอการออกแบบให้กับลูกค้าผ่านแพลตฟอร์มเช่น Invision หรือ Adobe xd และเราจะรับคำติชมกลับมาจากลูกค้า จนกว่าเราทั้งคู่จะพอใจเเละตกลงร่วมกันเกี่ยวกับการออกแบบ หลังจากขั้นตอนนี้การออกแบบของเราได้รับการพัฒนาโดยมืออาชีพ นักพัฒนาที่ Outsourcify .

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

Ui 02

ก่อนออกแบบใหม่

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

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

Before 1@2x 1

เราแก้ไขปัญหานี้อย่างไร?

ขั้นตอนที่ 1: ใช้สีและธีมที่สอดคล้องกัน

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

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

เราตั้งค่าสีชมพูเป็นสีหลักเพื่อเน้นส่วนประกอบที่สำคัญ เช่น ปุ่มหลัก หรือสถานะโฮเวอร์ ในทางกลับกันเราตั้งค่าสีกรมท่าเป็นสีรองเพื่อใช้สำหรับ ฟอนต์ และ ปุ่มรอง เป็นส่วนใหญ่

ขั้นตอนที่ 2: ใช้ตัวพิมพ์ที่อ่านได้ชัดเจน

การเลือกแบบอักษรที่เหมาะสมมีความสำคัญพอ ๆ กับการเลือกโทนสีที่เหมาะสมเพื่อประสบการณ์ของผู้ใช้และเอกลักษณ์ของแบรนด์ที่ดีขึ้น

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

Wkd Homepage

ขั้นตอนที่ 3: ใช้องค์ประกอบ UI และรูปภาพที่ดีที่สะท้อนให้เห็นเอกลักษณ์ของแบรนด์

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

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

Wkd 2

หลังจากออกแบบใหม่

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

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

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

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

Wkd Homepage – 1

หากคุณชอบสิ่งที่ได้อ่านไปหรือไม่? และต้องการเป็นส่วนหนึ่งของทีมออกแบบที่ยอดเยี่ยมของเรารึเปล่า? โปรดอย่าลังเลที่จะติดต่อเรา!
Edgar Outsourcify · Design Manager & UX/UI Specialist

UX/UI and Project management expert. Obtained a Bachelor in IT, Design Communication and Project Management. He started his career as a graphic, web and UX/UI designer in France, Lyon; then became a Digital Project Manager in a web agency in Bangkok and now the Design Manager in Outsourcify.

สนใจเวิร์กชอปของเราไหม
พูดคุยกับทีมงานของเรา!

ติดต่อเรา
สนใจเวิร์กชอปของเราไหม
พูดคุยกับทีมงานของเรา!

บทความบล็อกที่เกี่ยวข้อง