ในฐานะเว็บเอเจนซี่ เราทำทั้งงานออกแบบและปรับปรุงออกแบบเว็บไซต์ใหม่
เรามี portfolios จำนวนมากเกี่ยวกับการออกแบบเว็บไซต์ ดังนั้นเราจึงคิดว่ามันน่าสนใจที่จะแสดงกระบวนการออกแบบส่วนต่อประสานผู้ใช้ (UI) ของเราพร้อมกับนำเสนอกระบวนการการออกแบบของเเต่ละโปรเจ็กต์ และนำเสนอให้เห็นความต่าง ภาพก่อน – หลังในกรณีศึกษาของเรา: การออกแบบเว็บไซต์ฝึกสุนัขออนไลน์ WKD
เว็บไซต์เป็นหนึ่งในเครื่องมือทางการตลาดที่สำคัญที่สุดในการดึงดูดผู้มีโอกาสเป็นลูกค้า ลูกค้าของเราต้องการให้เรานำเว็บไซต์ที่ล้าสมัยมีประสิทธิภาพต่ำและไม่ตอบสนองและเปลี่ยนเป็นเว็บไซต์ที่ออกแบบมาอย่างดีและใช้งานง่ายโดยกำหนดเป้าหมายไปยังผู้ใช้ที่ไม่เข้าใจเทคโนโลยีเพื่อช่วยให้พวกเขาเติบโตในตลาดของตน ในบทความนี้เราจะเจาะลึกรายละเอียดของการออกแบบอินเทอร์เฟซผู้ใช้และก่อนและหลังของโครงการออกแบบเว็บไซต์นี้ใหม่
ก่อนอื่นเราต้องการแบ่งปันขั้นตอนการออกแบบ user interface ก่อน
ขั้นตอนที่ 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
ก่อนออกแบบใหม่
เว็บไซต์ของ WKD เวอร์ชันเก่านั้นหนักมากและมีเนื้อหามากมาย โดยเฉพาะหน้าเว็บในหลักสูตรออนไลน์เต็มไปด้วยเนื้อหาที่ไม่เป็นระเบียบ และดูเหมือนว่าจะยากที่จะค้นหาข้อมูลที่ผู้ใช้ต้องการได้อย่างรวดเร็ว โดยรวมแล้วเว็บไซต์ยังไม่ได้รับการปรับให้เหมาะกับการตอบสนอง
นอกจากนี้องค์ประกอบแต่ละส่วนบนเว็บไซต์ยังไม่กลมกลืนกันและไม่ได้แสดงตัวตนของแบรนด์อย่างแท้จริง จากที่เราศึกษาผ่านเว็บไซต์เราพบว่าพวกเขาใช้สีเช่นเขียวนีออน ชมพู และส้ม ซึ่งดูเหมือนจะไม่เข้ากัน จำเป็นต้องมีโทนสีร่วมกันและส่วนประกอบการออกแบบเพื่อการออกแบบที่ยั่งยืนและสอดคล้องกัน
เราแก้ไขปัญหานี้อย่างไร?
ขั้นตอนที่ 1: ใช้สีและธีมที่สอดคล้องกัน
เพื่อให้เว็บไซต์นำทางไปยังเนื้อหาต่างๆได้ง่ายและทำให้อ่านง่ายเราจึงต้องเลือกแบบอักษรและสีให้ดีที่สุด เราเลือกสีและแบบอักษรที่แสดงถึง WKD เพื่อสร้างผลกระทบเชิงบวกต่อผู้ใช้เว็บไซต์
เราเสนอสีใหม่ให้กับลูกค้าของเรา ซึ่งประกอบด้วย สีชมพู และ สีกรมท่า ที่สามารถช่วยสร้างแบรนด์ให้ดูพลังมากขึ้น สิ่งที่ทันสมัยและเป็นมิตรที่ทุกคนสามารถเข้าถึงได้สิ่งที่เกิดขึ้นสำหรับผู้ใช้ที่ไม่เข้าใจเทคโนโลยีและบางสิ่งที่ยังคงแสดงถึงด้าน “ออนไลน์” ของ WKD ซึ่งเป็นแพลตฟอร์ม “การฝึกสุนัขออนไลน์” สีเหล่านี้ยังโดดเด่นกว่าคู่แข่ง
เราตั้งค่าสีชมพูเป็นสีหลักเพื่อเน้นส่วนประกอบที่สำคัญ เช่น ปุ่มหลัก หรือสถานะโฮเวอร์ ในทางกลับกันเราตั้งค่าสีกรมท่าเป็นสีรองเพื่อใช้สำหรับ ฟอนต์ และ ปุ่มรอง เป็นส่วนใหญ่
ขั้นตอนที่ 2: ใช้ตัวพิมพ์ที่อ่านได้ชัดเจน
การเลือกแบบอักษรที่เหมาะสมมีความสำคัญพอ ๆ กับการเลือกโทนสีที่เหมาะสมเพื่อประสบการณ์ของผู้ใช้และเอกลักษณ์ของแบรนด์ที่ดีขึ้น
เมื่อเราตรวจสอบผ่านเว็บไซต์ก่อนหน้าของ WKD เราพบว่าไม่มีระบบแนวทางสำหรับการพิมพ์เช่นหัวเรื่อง หัวเรื่องย่อย และเนื้อหน้า เราเลือกรูปแบบฟอนต์ที่เกี่ยวข้องกับเอกลักษณ์ของแบรนด์และสะท้อนถึงบุคลิกของแบรนด์ที่สามารถอ่านได้ง่าย
ขั้นตอนที่ 3: ใช้องค์ประกอบ UI และรูปภาพที่ดีที่สะท้อนให้เห็นเอกลักษณ์ของแบรนด์
รูปภาพเป็นเนื้อหาที่ดีในการถ่ายทอดเรื่องราวของแบรนด์ไปยังผู้ใช้ สำหรับภาพของแบรนด์ที่ประสบความสำเร็จเรามุ่งเน้นไปที่การใช้รูปภาพที่มีคุณภาพและสอดคล้องกันทั่วทั้งเว็บไซต์ (โดยปกติแล้วขอแนะนำอย่างยิ่งให้มีภาพที่เป็นเอกลักษณ์และเป็นกรรมสิทธิ์ของทีมงานสำนักงานของลูกค้าและเหตุการณ์ใดก็ตามที่พวกเขาต้องการเน้น)
นอกจากนี้เรายังใช้รูปสี่เหลี่ยมมุมมน ซึ่งหมายถึงการเติมเส้นขอบสำหรับภาพและข้อความเพื่อให้สอดคล้องกับวัสดุ UI อื่น ๆ เช่น แบบอักษร สี และไอคอน
หลังจากออกแบบใหม่
เป้าหมายหลักของเราคือการอัปเดตส่วน UI ที่ล้าสมัยของเว็บไซต์เก่า ให้ดูทันสมัยและสะอาดตาในขณะที่ยังคงรักษาเอกลักษณ์ของแบรนด์ไว้ และเรายังออกแบบ user journey ทั้งหมดของแพลตฟอร์มการฝึกอบรมออนไลน์ด้วย
การออกแบบ UI ไม่ได้พูดถึงเเค่เรื่องของรูปลักษณ์ของหน้าสาธารณะเท่านั้น แต่ยังรวมถึงวิธีการประสานทั้งหน้าเว็บไซต์สาธารณะและแพลตฟอร์มการฝึกอบรมออนไลน์ทั้งหมดไว้ด้วยกัน กล่าวคือ หลักสูตร กลุ่มหมวดหมู่ และบทเรียนต่างๆ
หลังจากออกแบบเว็บไซต์ใหม่แล้ว ผู้เยี่ยมชมเว็บจะมีความเข้าใจที่ชัดเจนมากขึ้นว่าควรทำอะไร ตัวอย่างเช่น ลงชื่อเข้าใช้ และ สมัครหลักสูตร การจ่ายเงินสำหรับหลักสูตร และให้ความช่วยเหลือในบทเรียน
ทั้งหมดที่กล่าวไปข้างต้นนี้ ไม่ได้เกิดขึ้นเเค่บนเดสก์ท็อปเท่านั้น แต่ยังรวมถึงอุปกรณ์พกพาด้วยเนื่องจากผู้ใช้เป็นกลุ่มเป้าหมายที่ไม่เข้าใจเทคโนโลยีเราจึงต้องตัดสินใจอย่างหนักว่าอะไรคือพื้นฐานที่เรียบง่ายกว่าง่ายกว่าและยังดูทันสมัยและดึงดูดสายตาทุกคน
นอกจากนี้ การที่ออกแบบมาอย่างดีและมีการจัดวางอย่างกลมกลืนช่วยเสริมสร้างเอกลักษณ์ของแบรนด์เด่นชัด ที่สำคัญที่สุดคือลูกค้าของเราพึงพอใจกับการออกแบบใหม่ล่าสุดมาก โดยรวมแล้วเราสามารถบรรลุเป้าหมายของเราและเป้าหมายของโครงการนี้ได้สำเร็จ
