ความใกล้ชิดในการออกแบบเว็บคืออะไรและคุณจะใช้งานได้อย่างไร

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

ในศตวรรษที่ 20 นักจิตวิทยาชาวเยอรมัน Max Wertheimer, Kurt Koffka และ Wolfgang Kohler พยายามหาคำตอบสำหรับคำถามนี้ พวกเขาทำการศึกษาหลายชุด และด้วยเหตุนี้ พวกเขาจึงพัฒนาหลักการเกสตัลต์ ซึ่งเป็นชุดของแนวทางง่ายๆ ที่อธิบายว่าผู้คนมองโลกรอบตัวอย่างไร

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

ความใกล้ชิดในการออกแบบเว็บคืออะไร?

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

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

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

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

วิธีการใช้ความใกล้ชิดในการออกแบบเว็บ?

พื้นที่สีขาว

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

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

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

สร้างลำดับชั้นภาพ

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

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

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

ปรับปรุงความเข้าใจในเนื้อหา

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

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

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

มีเลย์เอาต์ที่สแกนได้

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

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

เน้นองค์ประกอบบางอย่าง

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

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

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

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

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

ชี้นำสายตาของผู้ชมผ่านเนื้อหา

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

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

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

ห่อ

การมุ่งเน้นที่ระยะทางสัมพัทธ์ระหว่างปัจจัย UI มีความสำคัญในขณะที่คุณจัดวางสำหรับจอภาพและความละเอียดที่หลากหลาย การออกแบบที่ปรากฏบนหน้าจอแล็ปท็อปขนาดใหญ่จะไม่ปรากฏบนจอภาพมือถือขนาดเล็ก

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

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