Blognone 4.0 - Layout

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

ปัญหา

[1] ข่าวมีความหลากหลายขึ้น และมีจำนวน (ต่อวัน) มากขึ้น เริ่มมีปัญหาว่าผู้อ่านสนใจเฉพาะเนื้อหาบางส่วน เช่น บางคนอาจไม่สนใจข่าววิทยาศาสตร์

[2] โครงสร้างทางเนื้อหาของ Blognone ซับซ้อนขึ้นเรื่อยๆ ที่ผ่านมามีชนิดของเนื้อหาเพิ่มดังนี้

  • Forum 3 อัน: Jobs, Press Release, English
  • Sub-domain site 1 อัน: Blognone Library
  • Sister site 2 แห่ง: Codenone, Drupal.in.th
  • Avater, คอมเมนต์แบบ thread, ระบบโหวตคอมเมนต์
  • Video จากงานต่างๆ ที่เคยจัด
  • banner

เพื่อให้ผู้อ่านเข้าถึงเนื้อหาทุกชนิด จึงต้องแสดงช่องทางไว้บนหน้าแรกซึ่งทุกคนเข้า (ผ่านทาง block ใน sidebar) เมื่อมีเนื้อหาเพิ่มขึ้นทำให้ sidebar ยาวขึ้นเรื่อยๆ ส่งผลให้ขนาดของไฟล์ใหญ่ขึ้น, ต้อง scroll มากขึ้น และเกิดความสับสนของผู้อ่าน

ทางแก้ [1]

ข่าววิทยาศาสตร์เป็นแค่การขยายตัวระยะแรกเท่านั้น ในอนาคต Blognone อาจจะมีข่าวการเกษตรก็ได้ (ซึ่งไม่มีเหตุผลที่จะไม่ทำ ถ้าคนอ่านสนใจจะอ่าน)​ ดังนั้นต้องคิดถึงการขยายตัวในอนาคตด้วย

โซลูชันที่ผมเสนอคือ เซคชันย่อย

ที่ผ่านมา แนวคิดของเซคชันใน Blognone นั้นไม่ชัดนัก ถ้าเอาตามเมนูด้านบน ถึงจะมีส่วนของ Interview และ Special Report แต่จริงๆ แล้วมันคือแท็กที่ถูกนำมาทำเป็นเซคชัน ในขณะที่ Jobs และ Press Release มีลักษณะเป็น forum มากกว่า ส่วน Library นั้นเป็นเหมือนเว็บแยกภายใต้ซับโดเมน

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

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

  • มีกรอบของตัวเองบนหน้าแรก แยกเป็นหมวดหมู่ชัดเจน
  • เข้าถึงได้ทั้งทางซับโดเมน section.blognone.com และ www.blognone.com/section รวมถึง feed ของตัวเอง
  • มี identity ของตัวเอง เช่น header ของ section หรือถ้าคิดชื่อเท่ๆ ได้แบบ Ars (Infinite Loop, Opposable Thumbs) ก็ยินดี
  • (อาจจะ) มี forum ของตัวเองในอนาคต ถ้าคนมากพอ

สำหรับระยะเริ่มต้น ผมเสนอว่าควรมี 4 เซคชันดังนี้

  • Apple
  • Open Source
  • Science
  • Internet/Web

อีกเซคชันที่เป็นไปได้สูงแต่ยังสองจิตสองใจอยู่คือ Microsoft อันนี้รอฟัง feedback

อ่านเฉยๆ อาจนึกภาพไม่ออก ดู mockup ง่ายกว่า

blognone-4

หน้าแรกเวอร์ชันใหม่ เซคชันคือส่วนสีส้ม ซึ่งจะถูกแสดงอยู่บนส่วนของ block ปกติ (สีชมพู เช่น โพล, forum) sidebar จะมีขนาดกว้างขึ้นเล็กน้อยเพื่อแสดงเนื้อหาของเซคชันได้มากขึ้น

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

ทางแก้ [2]

อย่างไรก็ตาม ด้วยปัญหาว่า block ใน sidebar มีจำนวนมากขึ้นเรื่อยๆ (และจะเพิ่มขึ้นอีกถ้ามีเซคชัน) ธีมแบบ 2 คอลัมน์อาจไม่เพียงพอ ทางออกที่เป็นไปได้คือธีม 3 คอลัมน์

blognone-4-2

กรอบสีก็ตามเดิม คงไม่ต้องอธิบายอะไรเพิ่มมาก ถ้าเป็นธีม 3 คอลัมน์ก็อาจต้องจัดเนื้อหาให้ชิดขอบ และ block แบบเก่าจะมีขนาดแคบกว่ากรอบเซคชันเล็กน้อย แบบนี้จะยิ่งคล้ายกับของ Ars (ถ้าย้าย block มาไว้ด้านซ้ายมือสุดแทน ก็จะเป็นแบบ Slashdot ไป)

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

ชอบแบบแรกเพราะมันดูไม่ค่อยกว้างมาก friendly กับคนที่ใช้พวก subnotebook

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

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

แล้วสามารถทำเป็น tab ย่อยๆ ให้คลิ้กเพิ่มเติม หรือเปลี่ยนเองทุกๆ 5-10 วินาทีได้หรือเปล่า? (เหมือนจะผสมวิธีของ Banner เปลี่ยนเอง แต่คราวนี้เป็นเนื้อหาของหัวข้อข่าวแทน)

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

@thanr อืม เรื่องซับโน้ตบุ๊คก็เป็นเรื่องน่าสนใจ และต้องเอามาพิจารณาตอนทำ CSS ครับ

ชอบแบบ 2 คอลัมน์ รู้สึกว่ามันไม่แน่นเกินไปครับ

ไปดูของ ars มาผมว่าทำ sidebar เป็นแท็บก็ดีเหมือนกันนะ
เผื่อมีเซคชันมากขึ้นมันจะได้ไม่ยาวมาก โดยแท็บแรกอาจจะเป็น hot topic (มีคนอ่านมาก หรือคอมเมนต์มาก) จะได้ไม่ซ้ำกับเนื้อหาหลักครับ

แบบแรกน่าจะดีกว่า แล้ว sidebar ด้านข้างจะได้ไม่เล็กมากเกินไป
section ย่อยอาจจะแสดง section เดียวต่อ 1 แถวหรือ
บาง section อาจจะแสดง 2 section ต่อ 1 แถว แต่ sidebar จะใหญ่ขึ้น
อย่าง site search กับ blognone video น่าจะอยู่แถวเดียวกันได้
ลองดูตัวอย่าง http://www.campuscompare.com/college/?college_id=1131

ถ้าใช้ CSS ก็กำหนดให้ ขึ้น scrollbar ในแต่ละ section ถ้ายาวเกิน
หรือทำปุ่ม expand/collapse แล้ว expand section หลักๆ

ข่าววิทยาศาสตร์ก็ไปเขียนที่ foosci ไงครับ :)

เป็น tab แล้วมี balloon แบบ technorati ก็ทำดีนะ
คือประหยัดที่ แต่ก็ยังมีข้อมูลให้นิดหน่อยโดยยังไม่ต้องกดเข้าไป
http://technorati.com/

ถ้าอยากทำ 3 คอลัมน์ อย่างของ Newsvine ก็น่าสนใจ
คือคอลัมน์แรกมันจะแคบกว่าชาวบ้านมาก เอาไว้ใส่ส่วนที่ไม่ได้เป็นเนื้อหา
(ช่วยแบ่งเบาไปจากอีกสองคอลัมน์) - ตรงนี้น่าจะตรงกับส่วนสีชมพู
http://newsvine.com/

เรื่องพวกจอเล็ก อย่างซับโน๊ตบุ๊กนี่ ยากแฮะ
สงสัยต้องทำไม่ให้มันเป็น table ไปพึ่ง css เอา ให้มันไหลไปตามขนาดจอ ... ทำพวกยุบ-ขยายนี่ก็คงได้ แต่อาจจะไม่สะดวกนักในแง่ accessibility
ยังนึกวิธีดี ๆ ไม่ออก

Post new comment

The content of this field is kept private and will not be shown publicly.