จัดวางเพจ (Page) อย่างไรให้สะดุดตา

จัดวางเพจ (Page) อย่างไรให้สะดุดตา

 

ความเรียบง่าย

 

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

 

ตัวอย่างของข้อมูล

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

 

ตัวอย่าง 

 

 

 

แม้จะเรียบง่าย แต่ก็ตื่นตา และน่าสนใจในขณะเดียวกัน

 

เนื้อหาอยู่กึ่งกลาง

 

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

 

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

 

น้อยคอลัมน์

 

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

แยกส่วนหัวของหน้าเว็บอย่างชัดเจน

 

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

 

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

 

ส่วนต่างๆ ของหน้าเว็บประกอบไปด้วย

  • เมนู
  • พื้นหลัง
  • เนื้อหา
  • ส่วนอื่นๆ
  • ลิงค์

เมนูเรียบง่าย

 

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

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

 

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

 

โลโก้ตัวหนา

 

       สอดคล้องไปกับหลักการดีไซน์ยุค 2.0 เพื่อสร้างภาพลักษณ์ที่ชัดเจนและหนักแน่น

 

ตัวอย่าง โลโก้ดังต่อไปนี้เป็นขนาดจริง สังเกตได้ว่าขนาดจะค่อนข้างใหญ่

 

คุณสมบัติของโลโก้

  • จำได้ง่ายและแตกต่าง
  • แสดงออกให้มองเห็นได้อย่างชัดเจน

          • เป็นตัวแทนภาพลักษณ์

 

ตัวอักษรตัวใหญ่

 

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

 

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

 

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

สีสันสดใส

 

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

 

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

 

มีลูกเล่นบนพื้นผิว

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

 

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

 

เงาสะท้อน

 

มีหลักๆ อยู่ 2 แบบ คือ

  • เงาสะท้อนบนพื้นผิวของตัววัตถุเอง

 

  • และเงาสะท้อนบนพื้นผิวที่วัตถุวางอยู่

 

 

Icon น่ารัก

 

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

 

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

 

ป้ายดาว

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

  

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

 

 

 

 

Credit : คุณปัญญ์ชลี ไชยอุปละ อ้างอิง :  http://www.enjoyday.net/good-page-design.html

โดย :
 2596
ผู้เข้าชม

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

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

Feature SoGoodWeb

SoGoodWeb มีระบบรับชำระเงินแบบใหม่ผ่าน Pay Solution รองรับทุกธนาคารชั้นนำ ทำให้การจ่ายเงินผ่านช่องทางออนไลน์เป็นเรื่องง่าย ช่วยให้ลูกค้าจ่ายเงินออนไลน์ได้อย่างสะดวก
LINE Notify คือ บริการที่คุณสามารถได้รับข้อความแจ้งเตือนจากเว็บเซอร์วิสต่างๆ ที่คุณสนใจได้ทาง LINE โดยหลังเสร็จสิ้นการเชื่อมต่อกับทางเว็บเซอร์วิสแล้ว คุณจะได้รับการแจ้งเตือนจากบัญชีทางการของ “LINE Notify” ซึ่งให้บริการโดย LINE นั่นเอง
เหมาะสำหรับลูกค้าที่เปิดธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ทั้งที่เป็นเจ้าของเอง หรือเป็นรายย่อย เป็นระบบจองทัวร์ ที่ช่วยทำให้การจัดการธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ให้เป็นเรื่องง่าย
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์