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

เนื้อหานี้เขียนขึ้นหลังจากที่ได้อัพเดทเวป พร้อมกับเปลี่ยนตีมของแมคมือใหม่.คอมเรียบร้อยแล้วในวันที่ 22 มีนาคม 2552

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

มาเริ่มกันต้องแต่ต้นนะครับ =)

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

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

จากตรงนั้นผมเลยแบ่งหน้าตาเวปออกเป็น 3 ส่วน คือมี sidebar 2 ด้าน (ซ้าย - ขวา) เพื่อแยกส่วนของข้อมูลออกเป็นชุด ๆ ตามภาพนี้

แลกมาด้วยต้องเปิดหน้าต่าง browser ที่กว้างขึ้น แต่สะดวกขึ้นในการมองภาพรวมของเวป

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

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

หน้าเวปเดิม แสดงผลแบบนี้
- หัวข้อ How-Tos
อันที่ 1
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ยว
กับ ABCDE
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ย
วกับ FGHIGKL
MNOP
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ยว
กับ FGHIGKLM
NOP

และนี่เป็นสิ่งที่ผมอยากให้เป็น

- หัวข้อ How-Tos อันที่ 1
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ ABCDE
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ FGHIGKLMNOP
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ FGHIGKLMNOP

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

คำตอบที่ผมคิดได้คือ เวปที่มีเนื้อหา / รูปแบบเฉพาะแบบนี้ จะดีที่สุดคือ ต้องมีตีมเฉพาะ ซึ่งนั่นก็หมายความว่า ผมต้องทำตีมขึ้นมาใหม่เอง .. ตรงนั้น ทำให้ผมเริ่มต้นที่จะเรียนรู้ HTML, CSS, PHP เพื่อเอามาใช้งานการทำตีมให้แมคมือใหม่.คอม ครับ..

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

ผมคิดว่า คำตอบสำหรับเรื่องนี้คือ ผมรักเวปนี้มากจนผมอยากที่จะทำเองครับ .. ผมอยากให้เวปนี้พิเศษในแบบที่ไม่ค่อยมีใครทำกัน (เป็นประมาณว่า ถ้ามีบ้านก็อยากที่จะตกแต่งเองครับ )

• คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำเวป นั่งวาด อีโมชั่นไอคอนขึ้นมาไว้ใช้เอง (อันที่ใช้กันอยู่ใน macmuemai.com นี้ เป็นเซทที่ไว้ใช้ที่เดียวในโลกครับ )
• คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำเวป ไม่เคยสนใจเรื่อง SEO หรือว่า Flash
• คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำกราฟฟิก กับคนทำโปรแกรมทำงานร่วมกันได้ 100% แบบนี้ เพราะทำคนเดียวเลย ฮ่า... ถามเอง ตอบเอง แก้ปัญหาเอง
• และสุดท้ายคงมีไม่กี่เวป community ในประเทศไทย ที่ถูกสร้างขึ้นมาด้วยคนที่ทำตีมขึ้นมาเอง =)

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

พอเท่านี้ก่อน เดี๋ยวมาเขียนต่อวันหลังนะครับ =)

เบื้องหลังการออกแบบ แมคมือใหม่.คอม #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 ปัจจุบันตามที่เห็น ณ ตอนนี้ครับ =)