ผมออกแบบอยู่บนความกว้างที่ผิด

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

ก่อนหน้านั้นผมไม่เคยสงสัยวิธีทำงานของตัวเองเลย ผมพัฒนางานบนจอ 27 นิ้ว และเวลาจะดูว่าบนโทรศัพท์เป็นอย่างไร ผมก็แค่ย่อหน้าต่างเบราว์เซอร์ให้แคบลง ราว 390px ถ้าไม่มีอะไรพัง ผมก็ถือว่าเรียบร้อย หน้าต่างที่ย่อแล้วดูเหมือนสี่เหลี่ยมผืนผ้าแนวตั้งจริง ๆ เพียงแต่มันเป็นสี่เหลี่ยมบนโต๊ะของผม ไม่ใช่สี่เหลี่ยมที่อยู่ในฝ่ามือของใครสักคน

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

ผมล็อกหน้าต่างไว้ที่ 360px แล้วไล่เปิดหน้าจอของ KAZENA Books ทีละหน้า ทั้งหมดมี 48 หน้าจอ ในจำนวนนั้น 11 หน้าจอมีการเลื่อนออกด้านข้าง และใน 11 หน้านั้นมีอยู่ 3 หน้าที่การกระทำสำคัญที่สุด — บันทึก ส่งออก ถัดไป — อยู่นอกจอไปเลย การเลื่อนด้านข้างยังเอานิ้วลากให้เห็นได้ แต่สำหรับคนที่ไม่รู้ว่ามันลากได้ ตรงนั้นก็เท่ากับไม่มีอะไรอยู่

สาเหตุเกือบทั้งหมดมาจากชิ้นส่วนเพียง 1 ชิ้น คือเลย์เอาต์ที่วางช่องจำนวนเงินกับตัวเลือกประเภทภาษีเรียงข้างกันเป็น 2 คอลัมน์ สองคอลัมน์นี้ต้องการพื้นที่ 372px เมื่อรวมระยะขอบแล้ว บนจอ 360px จึงล้นออกไป 12px แค่ 12px ก็จริง แต่ถ้าสิ่งที่ยื่นพ้นขอบไปคือตัวเลือก หน้าจอนั้นก็เลือกอะไรไม่ได้อีกต่อไป และเพราะเราใช้ชิ้นส่วนเดียวกันนี้ซ้ำใน 11 หน้าจอ ความพลาด 1 จุดจึงกลายเป็น 11 จุด

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

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

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

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

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

จากนั้นเราเปลี่ยนวิธีตรวจ แทนที่จะพึ่งสายตาของผมเอง ตอนนี้เราให้ระบบถ่ายภาพหน้าจอหลัก 12 หน้าโดยอัตโนมัติที่ขนาด 360px คูณ 640px แล้วถ่าย 12 หน้าเดิมซ้ำอีกรอบที่ขนาดตัวอักษร 130% อะไรที่ล้นออกมาก็เห็นได้จากภาพ พร้อมกันนั้นเราพบ 2 จุดที่พื้นที่สำหรับแตะเล็กกว่า 44px จึงขยายให้ใหญ่ขึ้น ทั้ง 2 จุดคือป้ายเล็ก ๆ สำหรับเลือกประเภทภาษี

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