วิธีการออกแบบเว็บโดยใช้รูปแบบการออกแบบ

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

ตัวอย่างของรูปแบบการออกแบบ

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

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

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

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

เหตุใดนักออกแบบจึงควรให้ความสำคัญกับรูปแบบการออกแบบ

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

รูปแบบการออกแบบสร้างความน่าเชื่อถือ

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

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

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

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

รูปแบบการออกแบบนั้นใช้งานง่าย

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

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

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

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

รูปแบบการออกแบบให้ภาษาทั่วไประหว่างนักออกแบบ

[twitter_link]ประสบการณ์ที่ยอดเยี่ยมเริ่มต้นด้วยการออกแบบที่มีประสิทธิภาพ[/twitter_link]

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

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

ขั้นตอนการวางแผน

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

ใช้สิ่งที่คุณรู้อยู่แล้วเพื่อเริ่มต้น

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

การเริ่มต้นการวิจัย

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

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

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

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

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

การออกแบบเว็บด้วย Design Patterns

ต้นแบบและการทดสอบ

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

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

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

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

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

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

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

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

• คู่มือฉบับสมบูรณ์สำหรับการทดสอบผู้ใช้
• การผ่าตัดจรวดของ Steve Krug ทำได้ง่าย
• ตัวอย่างคำแนะนำสไตล์