ทำไมผมถึงเริ่มทำเว็บไซต์นี้จากการอ่าน

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

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

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

เริ่มจากสิ่งที่ผู้อ่านอยากรู้

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

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

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

อ่านได้สบาย แล้วค่อยเพิ่มรายละเอียด

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

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

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

ลองเปลี่ยน แล้วเห็นเหตุผลด้วยตัวเอง

เว็บไซต์ของ Josh W. Comeau มีบทความและคู่มือแบบโต้ตอบ เช่นเรื่อง Flexbox และ SVG Paths ผมชอบการให้ผู้อ่านลองเปลี่ยนบางอย่างระหว่างอ่าน เพราะบางเรื่องจะเข้าใจง่ายขึ้นเมื่อเห็นผลของการปรับด้วยตัวเอง

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

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

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

มีพื้นที่ให้ความคิดเติบโต

อีกแรงบันดาลใจมาจาก Maggie Appleton เว็บไซต์ของเธอแยกบทความออกจากบันทึก และอธิบาย digital garden ว่าเป็นพื้นที่รวบรวมบันทึกกับความคิดที่ค่อย ๆ เติบโตตามเวลา ผมชอบที่แนวคิดนี้เปิดให้เก็บเรื่องที่ยังคิดไม่จบไว้ได้

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

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

อ่าน ฟัง ดู และเรียนรู้ ตามจังหวะของแต่ละเรื่อง

Emergence Magazine แบ่งทางเข้าสู่เนื้อหาเป็น Read, Listen และ Watch หรืออ่าน ฟัง และดู ผมเลือกนำแนวคิดนี้มาวางโครงให้เว็บผม และตั้งใจเพิ่ม Learn สำหรับเรื่องที่เหมาะกับการเรียนแล้วลองทำเป็นลำดับ

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

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

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

เริ่มเล็ก เพื่อดูว่าอะไรช่วยได้จริง

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

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

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