เบื้องหลังการออกแบบ แมคมือใหม่.คอม #2

มาต่อกันตอนที่ 2 ครับ .. ในตอนนี้จะเป็นเรื่องเกี่ยวกับการดีไซน์ Layout หลักของหน้าเวป

จากความเดิมตอนที่แล้ว ผมต้องการที่จะให้ส่วนของ How-To มีพื้นที่ ๆ มากเพียงพอสำหรับเวลา browse เข้าไปลึก ๆ แล้วยังดู link ได้รู้เรื่องอยู่ หรือถ้าต้องตัด link เป็นบรรทัดใหม่ ก็อยากให้มีตรงนี้ให้น้อยที่สุด

ตรงนี้เลยเป็นที่มาว่า ทำไมต้องทำ block ทางด้านขวาให้ใหญ่ขึ้นกว่าเวปทั่วไปครับ

ต่อจากนั้น มีอีก 2 ประส่วนหลัก ๆ ที่ผมต้องการที่จะทำกับการดีไซน์ layout ของหน้าเวปใหม่ คือ

• ทำอย่างไร จึงจะยังคงส่วนของ tag ในรูปแบบเดิมได้ (แบบที่ list เป็นคำลงมายาว ๆ อย่างที่เห็นนนี่ล่ะครับ) แล้วนำมาใช้กับ layout ใหม่ โดยที่มีความสำคัญระดับ 2 คือไม่ใช่สิ่งที่คนทั่วไป หรือสมาชิกที่เข้าบ่อย ๆ จะรู้สึกรำคาญ แต่ก็ต้องอยู่ในตำแหน่งที่ ถ้าเกิดต้องการค้นหาแล้ว สามารถทำได้โดยสะดวก
• ทำอย่างไรให้ขยายพื้นที่ของโพสปรกติได้มากขึ้น - ตรงนี้สำหรับสมาชิกใช้งานครับ เพราะลำพังขนาดหน้าเวปเดิม ส่วนเนื้อหา how-to หรืออื่น ๆ สามารถแสดงผลได้เพียงพออยู่แล้ว แต่ที่ผมต้องการขยายตรงนี้ขึ้นไปอีกเพราะว่า ถ้าสมาชิกต้องการจะแทรกรูปเพื่อถามปัญหา จะได้แทรกรูปได้ใหญ่ขึ้น จึงทำให้น่าจะได้รับคำตอบที่ตรงและเร็วขึ้นตามมา

มาที่การปรับใช้

จัดการกับส่วนของ tag

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

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

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

ไอเดียแรกเลยคือ เอา tag list นี้ไปไว้เป็น sidebar นึงแยกต่างหากไปเลย รวมแล้วแบ่งหน้าเวปเป็น 3 ส่วน

• tag list อยู่ใน sidebar ทางด้านซ้ายกว้าง 10% ของหน้าเวป
• เนื้อหาหลัก กว้างประมาณ 50% ของหน้าเวป และสุดท้าย
• how to และ block ของเนื้อหาอื่น ๆ อยู่ใน sidebar ท้างด้านขวา กว้างประมาณ 40% ของหน้าเวป

เป็นประมาณนี้ครับ

ด้านซ้าย                                 ตรงกลาง                                                  ด้านขวา
| -tag list-| ------------------ เนื้อหาหลัก----------------------| -------------how to และ เนื้อหาอื่น ๆ ---|
| -tag list-| ------------------ เนื้อหาหลัก----------------------| -------------how to และ เนื้อหาอื่น ๆ ---|
| -tag list-| ------------------ เนื้อหาหลัก----------------------| -------------how to และ เนื้อหาอื่น ๆ ---|

ทำให้อ่านง่าย แยกต่างหาก เป็นเอกเทศ แต่... จะทำให้หน้าเวปแบ่งออกมาไม่เท่ากัน (sidebar ซ้าย กับด้านขวา คนละขนาดกันแบบเห็นได้ชัดเจน 10:40) ตรงนี้ทำให้ผมคิดหนัก ว่าจะลองแบ่งแบบนี้ดูดีหรือไม่ .. หลังจากลองอยู่พักใหญ่ เรื่องการแบ่งแยกเนื้อหาทำได้ค่อนข้างลงตัว แต่ผมพบว่า ด้วยลักษณะหน้าเวปที่แบ่ง 3 ส่่วนไม่เท่ากันเลยแบบนี้ พอใช้งานไปสักระยะ จะเริ่มเมื่อยลูกตาครับ เพราะจะมีความรู้สึกว่า ตัวเวปเอียงไปทางด้านใดด้านหนึ่งนิด ๆ อยู่ตลอดเวลา

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

หลังจากคิดและหาทางออกอยู่กับเรื่อง tag อยู่นาน ผมสังเกตว่า ถ้า sidebar ส่วน how-to มีขนาดที่กว้างแล้ว แต่ block ของเนื้อหาอื่น ๆ ไม่ได้จำเป็นต้องการพื้นที่ด้านกว้างขนาดนั้น ผมเลยลองทำเฉพาะส่วน how-to ให้มีขนาดตามที่ต้องการ แล้วลองแทรก เนื้อหาอื่น ๆ ต่อลงมาด้วยขนาดที่เล็กลง เลยได้ออกมาตามที่เห็นในปัจจุบันแบบนี้ครับ

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

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

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

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

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

ไม่ใช่ว่าระบบ search ไม่ดี

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

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

การจัดการกับเนื้อหาหลัก

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

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

จากตรงนี้ ผมได้ลองเพิ่มเนื้อหาด้านล่างของหน้าเวปไปอีก 3 ส่วน คิดว่าน่าจะทำให้สมาชิกที่อ่านผ่าน ๆ ได้เจอเนื้อหาอะไรใหม่ ๆ บ้าง จาก block ด้านล่างนี้

จากทั้งหมด ผมเลยสรุปออกมาเป็น layout ปัจจุบันตามที่เห็น ณ ตอนนี้ครับ =)