จำกัดความเร็ว-เพิ่มความปลอดภัย: การใช้การออกแบบและเทคโนโลยีมาช่วยให้คนทำตามกฎได้สะดวกขึ้น

ป้ายเตือนหน้ามหาวิทยาลัยทรินิตีคอลเลจดับลิน แจ้งให้รถใช้ความเร็วไม่เกิน 30 กม./ชม.

เมื่อต้นปีนี้ ไปเที่ยวนอกเมืองตามเส้นทาง Wild Atlantic Way กับเพื่อนๆ ที่ดับลิน รถที่เช่าเป็น Volkswagen Golf ซึ่งระหว่างขับจะแสดงตัวเลขขีดจำกัดความเร็วของถนนช่วงนั้นขึ้นบนหน้าปัดเลย

ถ้าเกินขีดจำกัด ตัวเลขจะเปลี่ยนเป็นสีเหลือง
เกินนานๆ จะมีเสียงร้องเตือน
ถ้าเกินขีดไปมาก ตัวเลขจะเปลี่ยนเป็นสีแดง และยิ่งร้องดังหนัก

บนหน้าปัดยังมีกราฟิกแสดงระยะห่างจากรถคันหน้าที่เหมาะสมกับความเร็วที่ใช้อยู่ในปัจจุบันด้วย โดยจะแสดงเป็นรูปรถและเส้นแสดงระยะ

นอกจากกฎที่เหมาะสมแล้ว เทคโนโลยี + การออกแบบก็ช่วยให้คนตัดสินใจทำตามกฎได้สะดวกขึ้น

รถยี่ห้ออื่นก็มีความสามารถเดียวกันนี้ ลองค้นในเน็ต เจอคู่มือภาษาไทยของ Volvo S90 รุ่นปี 2020 เรื่อง “การ​เตือน​สำหรับ​ขีดจำกัด​ความเร็ว​และ​กล้อง​ตรวจจับ​ความเร็ว​จาก​ระบบ​ข้อมูล​ป้ายถนน” ด้วย

ตัวอย่าง​​ตัว​จำกัด​ความเร็ว​บน​จอแสดงผล​สำหรับคนขับ ในรถวอลโว่ S90 (2020) จากเว็บไซต์ volvocars.com

การกำหนดขีดจำกัดความเร็วตามลักษณะการใช้สอยพื้นที่

โดยทั่วไป ความเร็วสูงสุดในเขตเมืองดับลิน (Dublin City Council – ประมาณเทศบาลนครของไทย) คือ 50 กม./ชม. — ส่วนย่านที่อยู่อาศัย ย่านชุมชน จะกำหนดที่ไม่เกิน 30 กม./ชม.

ยกเว้นทางหลวงในเขตเมืองซึ่งถนนแยกเป็นสัดส่วนเฉพาะ จะอยู่ที่ 60 หรือ 80 กม./ชม. — ถ้าพ้นเขตเมืองไปแล้วก็จะสูงกว่านี้

เว็บไซต์รัฐบาลท้องถิ่นมีแผนที่ข้อเสนอการจำกัดความเร็วให้ดาวน์โหลด

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

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

เทคโนโลยีที่ช่วยให้ขับรถปลอดภัยขึ้น

สหภาพยุโรปออกกฎความปลอดภัยทั่วไปฉบับปรับปรุง (Regulation 2019/2144 หรือ “General Safety Regulation 2” หรือ “GSR2”) เมื่อ 27 พ.ย. 2562 กำหนดให้ตั้งแต่วันที่ 6 ก.ค. 2565 (ปีนี้) รถในประเภท M1 (รถยนต์นั่ง) และ N1 (รถเพื่อการพาณิชย์ขนาดเบา) รุ่นใหม่ทุกรุ่นที่จะขออนุมัติเพื่อขายในยุโรป ต้องติดตั้งเทคโนโลยีเพื่อความปลอดภัย เช่น ระบบช่วยเตือนเมื่อใช้ความเร็วเกินกำหนด (intelligent speed assistance – ISA) และเทคโนโลยีช่วยในกรณีฉุกเฉินให้ขับอยู่ในช่องจราจร (emergency lane keeping systems – ELKS) ซึ่งประกอบไปด้วยเทคโนโลยีอีกย่อย 2 อย่างประกอบกันคือ การเตือนเมื่อวิ่งคร่อมช่องจราจร (lane departure warning systems – LDWS) และ การช่วยขยับให้กลับช่องจราจรที่ถูกต้อง (corrective directional control functions – CDCF)

ทั้งนี้ภายใน 7 ก.ค. 2567 รถใหม่ทุกคัน ไม่ว่าจะรุ่นใดก็ตาม จะต้องมีเทคโนโลยีความปลอดภัยต่างๆ ข้างต้น

นับจากวันที่ประกาศกฎหมายจนถึงวันบังคับใช้ขยักแรก (เฉพาะรถรุ่นใหม่) 2 ปี 7 เดือน และขยักสอง (รถใหม่ทุกคัน) 4 ปี 7 เดือน

เทคโนโลยีช่วยควบคุมความเร็วอัจฉริยะทำงานอย่างไร

วิดีโออธิบายการทำงานของระบบช่วยเตือนขีดจำกัดความเร็ว โดย Road Safety Authority Ireland

ที่หน้ารถจะมีกล้องที่อ่านป้ายแจ้งขีดจำกัดความเร็วที่ติดไว้ข้างถนน (ตัวป้ายมีมาตรฐานกำหนดหน้าตาไว้) ไม่จำเป็นต้องเชื่อมกับ GPS หรืออินเทอร์เน็ต

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

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

ตัวอย่าง​ของ​ป้าย​จราจร​ที่​รถ Volvo รุ่น S90 (2020) สามารถ​อ่านได้

ตัวอย่าง​ของ​ป้าย​จราจร​ที่​รถวอลโว่รุ่น S90 (2020) สามารถ​อ่านได้
ตัวอย่าง​ของ​ป้าย​จราจร​ที่​รถวอลโว่รุ่น S90 (2020) สามารถ​อ่านได้

กลไกตลาด กับ การส่งเสริมด้วยกฎหมาย

เมื่อต้องควักกระเป๋าจ่ายเอง และเงินในกระเป๋ามีจำกัด คนมีแนวโน้มเลือกซื้อความปลอดภัยสำหรับตัวเองก่อน เช่น ถุงลมนิรภัย (คุ้มครองคนในรถ) ระบบกันเบรกล็อก (ช่วยมากกรณีใช้ความเร็วสูง ซึ่งคนในรถเสี่ยงจะเจ็บด้วย)

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

การใช้ “กลไกตลาด” เพียงอย่างเดียวจึงอาจไม่มากพอหรือไม่เร็วพอ

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

ใครสนใจเรื่องเทคโนโลยีช่วยความปลอดภัยเชิงรุก (“active”) เพื่อป้องกันไม่ให้เกิดอุบัติเหตุแต่แรก [เทียบกับเทคโนโลยี “passive” เช่น ถุงลมนิรภัย ที่เป็นเรื่องลดความเสียหายเมื่อเกิดเหตุแล้ว] ดูได้เว็บไซต์ RoadSafetyFacts.eu — ซึ่งจะเป็นข้อมูลจากมุมมองของสมาคมผู้ผลิตรถยนต์ European Automobile Manufacturers’ Association (ACEA)

ระบบความปลอดภัยเชิงรุกของรถยนต์

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

เผยแพร่ต้นฉบับครั้งแรกเมื่อ 21 ก.พ. 2565 ในเฟซบุ๊ก

คิดเงิน “ตามตัวอักษร” แฟร์ไหม?

เช็คอะไรนิดหน่อย ไปเจออันนี้ วิธีการคิดเงินของ Google Cloud Translation API ก็แฟร์ระดับหนึ่งนะ คือคิดตามจำนวนตัวอักษร (code point) แทนที่จะคิดตามปริมาณข้อมูลจริงๆ (byte)

Charged characters

To calculate usage, Google counts usage on a per character basis, even if a character is multiple bytes. Each character corresponds to a code point.

You are charged for all characters that you include in a Cloud Translation request, even untranslated characters. This includes, for example, whitespace characters. If you translate <p>こんにちは</p> to English, it counts as 12 characters for the purposes of billing.

Google also charges for empty queries. If you make a request without any content, Google charges one character for the request.

—-

คือในทางคอมพิวเตอร์ มาตรฐานตัวอักษรที่แพร่หลายในปัจจุบัน คือมาตราฐาน Unicode และวิธีการจัดเก็บตัวอักษรที่นิยมและเข้ากันได้กับแอปบนอินเทอร์เน็ตต่างๆ ก็คือ UTF-8 ซึ่งในตัวอักษรในแต่ละระบบการเขียนอาจใช้จำนวนไบต์ไม่เท่ากัน ตัวละตินที่ไม่มีเครื่องหมายประสม (อย่างที่ใช้ในภาษาอังกฤษ มาเลย์ อินโด) จะใช้เพียง 1 ไบต์ต่อ 1 ตัวอักษร (code point) ส่วนตัวอักษรไทยจะใช้ 3 ไบต์ต่อ 1 ตัวอักษร

จากการตัดสินใจในขั้นการออกแบบ มันเป็นไปได้ที่จะมีการเลือกปฏิบัติ มีความ “ไม่เท่าเทียม” หรือความ “ไม่ปลอดภัย” หรือความใดๆ ที่ถ้าเป็นไปได้ก็ไม่อยากให้มี ฝังอยู่ในระบบสถาปัตยกรรมของระบบ บางอย่างไม่ได้อยากให้มี แต่ด้วยข้อจำกัดของทรัพยากรที่มีจำกัดกว่าหรือสมมติฐานของบริบทการใช้งานในตอนที่ออกแบบ ก็เลยตัดสินใจว่าใช้แบบนี้ไปละกัน มันโอเคสำหรับตอนนั้น – แต่พอเวลาผ่านไป ย้อนกลับไปพิจารณา ก็อาจตัดสินใจอีกแบบได้ (จะมีโอกาสแก้ไขไหมก็อีกเรื่อง)

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

แต่ต่อมาเมื่อสมมติฐานความปลอดภัยนั้นไม่เป็นจริงแล้ว หรือข้อจำกัดทางเทคโนโลยี/เศรษฐกิจนั้นได้คลายลงแล้ว ก็มีการคิดวิธีเข้ารหัสลับให้กับข้อมูลขึ้นมา โดยยังทำงานอยู่บนโปรโตคอลเดิม มีความเข้ากันได้กับระบบเก่าๆ (backward compatible)

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

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

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

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

เช่น เดิมใช้ 7 บิตเพื่อแทนชุดตัวอักษร 128 ตัว ก็ขยายมาเป็น 8 บิต 16 บิต ฯลฯ โดยพยายามทำให้มันรองรับระบบเดิมอยู่ โดย 128 ตัวแรก ยังใช้ตัวอักษรชุดเดิมอยู่อะไรงี้ ซึ่งวิธีที่เก็บตัวอักษรที่ใช้บนอินเทอร์เน็ตส่วนใหญ่ตอนนี้ใช้วิธีนี้อยู่ ชื่อมาตรฐานคือ UTF-8

UTF-8 นี่เป็นวิธีการแปลงรหัสเพื่อบันทึกตัวอักษรแบบที่เรียกว่า “variable-width encoding” คือ ตัวอักษรแต่ละตัวอาจใช้จำนวนข้อมูล (คิดเป็นไบต์) ในการเก็บไม่เท่ากัน — พวกตัวอักษรละตินและสัญลักษณ์พื้นฐาน 128 ตัวแรก จะใช้ 1 ไบต์ ตัวละตินอื่นๆ เกือบทั้งหมดที่เหลือ (ซึ่งภาษาจำนวนมากในยุโรปใช้ รวมถึงภาษาอย่างเวียดนาม ก็ใช้ตัวเขียนเหล่านี้) รวมถึงตัวอักษรกรีก ฮีบรู อารบิก คอปติก พวกนี้ใช้ 2 ไบต์ ตัวอักษรที่เหลือเกือบทั้งหมดจะใช้ 3 ไบต์ ในกลุ่มนี้มีตัวอักษรจีน ญี่ปุ่น เกาหลี ไทย รวมอยู่ด้วย ส่วนพวก 4 ไบต์นี่จะเป็นตัวอักษรที่ไม่พบบ่อยนัก หรือเป็นส่วนขยาย/กรณีพิเศษของตัวอักษรบางตัว

วิธีคิดของคณะออกแบบ UTF-8 ก็คือ ตัวอักษรไหนมีแนวโน้มจะใช้บ่อย ใช้มาก ก็พยายามให้ใช้จำนวนไบต์น้อยๆ เพื่อที่ว่าในภาพรวมจะได้ประหยัดพื้นที่จัดเก็บ เว้นเสียว่าจะทำไม่ได้จริงๆ อย่างกลุ่มตัวอักษรจีน​ญี่ปุ่นเกาหลี (CJK) ที่จำนวนตัวอักษรมันเยอะ จะยัดลง 2 ไบต์ก็ไม่ไหว ก็ใช้ 3 ไบต์ไป

ซึ่งในแง่นี้ การให้ตัวอักษร ASCII ใช้เพียง 1 ไบต์ ก็เข้าใจได้มาก ๆ เพราะตัวอักษรในชุดนี้ถูกใช้เป็นคำสั่งและคำสำคัญต่างๆ ในโปรโตคอลการรับส่งข้อมูลและมาตรฐานข้อมูลอื่น ๆ ในระดับพื้นฐานของคอมพิวเตอร์ ถ้าเกิดตัวอักษรชุดนี้ใช้จำนวนไบต์เยอะ ทุกอย่างในระบบก็จะพองขึ้นทันที ซึ่งผลพลอยได้ก็คือ พวกภาษาที่ใช้ตัวอักษรที่อยู่ในกลุ่มตัวละติน (A-Z, a-z) ก็เลย “โชคดี” ไปด้วย (หรือมองอีกมุม ก็เป็นเพราะคนที่ใช้ภาษาที่ใช้อักษรละติน เป็นคนกำหนดมาตรฐานคอมพิวเตอร์ไง ผลที่ตามมาเลยเป็นแบบนี้)

อย่างไรก็ตาม ก็มีคำถามแหละ ว่าเอ๊ะ แล้วเอาเฉพาะชุดตัวที่ใช้บ่อยๆ ของตัวอักษรที่ตอนนี้ถูกจัดอยู่ในหมวด 3 ไบต์ (อย่าง CJK) ไปอยู่ใน 2 ไบต์ก็ได้รึเปล่า อย่าง ฮันกึลของเกาหลี หรือ คะนะของญี่ปุ่น พวกนี้ก็ไม่ได้เยอะมากแบ่งไปใส่ในชุด 2 ไบต์ได้ไหม แล้วพวกฮันจาหรือคันจิ (ตัวจีน) ค่อยใส่ในชุด 3 ไบต์ ไม่ต้องยกกันไปทั้งยวงก็ได้

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

คำว่า “บ่อย ๆ” นี่เอาอะไรวัด จากมุมของใคร หรืองานแบบไหน

แต่เอาล่ะ มาตรฐานมันก็กำหนดมาแบบนี้แล้ว ไปแก้อะไรไม่ได้ (จริงๆ ก็แก้ได้ แต่ต้องไปตามแก้ข้อมูลที่ถูกจัดเก็บไปแล้วทั้งหมด ก็ลำบากมากๆ อยู่) ก็เลยกลายเป็นว่ามีบางภาษา พอออกมาเป็นรูปตัวเขียน ต้องใช้พื้นที่ในการจัดเก็บมากกว่าภาษาอื่น เพราะต่อ 1 ตัวอักษร ใช้จำนวนไบต์มากกว่า

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

วิธีการคิดค่าบริการตามจำนวนตัวอักษร แทนที่จะเป็นจำนวนไบต์ข้อมูลที่จะต้องใช้เก็บตัวอักษรนั้น ก็เลยถูกมองได้ว่าแฟร์ขึ้นมาอีกนิดนึง

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

หรือถ้าไปให้สุดๆ เฮ้ย บางภาษา 1 ตัวอักษร มันเก็บความหมาย อุ้มความหมายเอาไว้ได้เยอะกว่า 1 ตัวอักษรในอีกภาษา ภาษาญี่ปุ่นเขียน 1 ตัว 空 ภาษาไทยต้องเขียน 7 ตัว เพื่อจะได้ความหมายว่า ท้องฟ้า เท่ากัน แบบนี้คนไทยก็ต้องจ่ายแพงกว่าคนญี่ปุ่นรึเปล่า (แบบ 280 ตัวอักษรบนทวิตเตอร์ คนจีนแทบจะเขียนเรื่องสั้นได้แล้ว คนไทยแค่รายงานข่าวอาจจะไม่พอ) แบบนี้การคิดค่าบริการตามตัวอักษรก็ไม่แฟร์อยู่ดีปะ

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

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

มันไม่จำเป็นต้องเป็นการเลือกปฏิบัติในทางลบ (ภาษากฎหมายระหว่างประเทศใช้คำว่า “การเลือกประติบัติ”) มันอาจเป็นทางบวกก็ได้ (จริงๆ การคำนึงถึงความถี่ในการใช้และพยายามให้ตัวอักษรที่พบบ่อย ใช้จำนวนไบต์น้อยๆ ก็เป็นการเลือกปฏิบัติที่พยายามจะให้เกิดผลบวกในภาพรวม ทำให้ในภาพรวมใช้พื้นที่จัดเก็บน้อยลง ส่งข้อมูลได้ไวขึ้น ประหยัดขึ้น)

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

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

เผยแพร่ครั้งแรก 7 เมษายน 2564 บนเฟซบุ๊ก

พอโพสต์เรื่องข้างต้นจบ ก็นึกถึงอีกประเด็นในสัปดาห์ก่อนหน้า ที่คนพูดถึงบทความ When Binary Code Won’t Accommodate Nonbinary People ซึ่งก็คิดๆ ไปก็น่าจะเป็นเรื่องของ encoding นี่อยู่เหมือนกัน เป็นการเอาการจัดประเภทฝังลงไปในระบบ

ถ้าได้อ่านในบทความนั้น คิดว่าหลักใหญ่ใจความประเด็นมันคือเรื่องการออกแบบตัวระบบ — ทั้งระดับโครงสร้างพื้นฐานและระดับส่วนติดต่อผู้ใช้ — ไม่ว่าจะเป็น database schema ช่องหรือปุ่มที่มีให้กดในหน้าจอ UI หรือวิธีการทำ data validation ที่ทำให้ข้อมูลที่อยู่นอกเหนือไปจากที่ผู้ออกแบบระบบอนุญาต มันกรอกไม่ได้ รวมไปถึงคู่มือใช้งาน/การอบรมการใช้งานที่ทำให้เจ้าหน้าที่ที่เป็นผู้กรอกยึดอยู่กับคุณค่าบางอย่าง แม้ตัวระบบจะไม่ได้บังคับ (ในระบบที่ตัวเจ้าของข้อมูลไม่ได้เป็นผู้กรอกเอง)

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

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

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

ซอฟต์แวร์เป็นสถาปัตยกรรมที่กำหนด (อนุญาต/ไม่อนุญาต) ทางที่เราจะใช้ชีวิต{ใน/กับ/ด้วย}สภาพแวดล้อมนี้ได้ ไอเดียเดียวกับที่เลซสิกเสนอว่า code is law น่ะแหละ

เผยแพร่ครั้งแรก 31 มีนาคม 2564 บนเฟซบุ๊ก

ค้าปลีกดิจิทัล – การวิเคราะห์ผู้มีส่วนได้เสีย

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

หัวข้อที่พูดคือชวนวิเคราะห์ผู้มีส่วนได้เสีย (stakeholders) โดยมองไปมากกว่าเฉพาะความสัมพันธ์ระหว่างผู้ซื้อ-ผู้ขาย แต่รวมไปถึงคนที่อยู่รายล้อมอื่นๆ ด้วย กรอบที่ใช้ก็ไปยืมวิธีวิเคราะห์การเคลื่อนย้ายของ ทุน สินค้า บริการ และคน ใน “four freedoms” ของนโยบายตลาดเดียวของสหภาพยุโรป (European Single Market) มามอง เผื่อจะมองเห็นผู้มีส่วนได้ส่วนเสียและประเด็นทางสังคมากขึ้นหรือไม่ เช่น

  • เมื่อคนไปซื้อของในพื้นที่ออนไลน์มากขึ้น ใช้บริการส่งสินค้ามากขึ้น จะมีการเดินในย่านการค้าหรือละแวกบ้านน้อยลงไหม จะทำให้เกิดการเปลี่ยนแปลงอะไรในการจัดพื้นที่กิจกรรมในเมืองบ้าง ย่านจะเปลี่ยวขึ้นรึเปล่า แล้วขยะจากบรรจุภัณฑ์ล่ะ
  • เมื่อมีการเคลื่อนย้ายสินค้าบนถนนมากขึ้น และความคาดหวังของคนที่ต้องการสินค้าด่วนขึ้น สิ่งนี้จะกระทบอย่างไรกับความปลอดภัยของคนที่ร่วมใช้รถใช้ถนน ต้องมีที่จอดมอเตอร์ไซค์มากขึ้นไหม
  • เมื่อกิจกรรมต่างๆ ไปอยู่ในรูปแบบดิจิทัลหรือมีมิติดิจิทัลพ่วงไปด้วย ก็จะเกิดการเก็บข้อมูลของการเคลื่อนไหวไม่ว่าจะเป็นของทุน สินค้า บริการ หรือคน สิ่งนี้จะไปเกี่ยวกับประเด็นความเป็นส่วนตัว การเลือกปฏิบัติ หรือการสะสมอำนาจอะไรไหม
  • เมื่อตลาดและผู้ขายจำนวนหนึ่งอยู่ต่างประเทศ สิ่งนี้จะกระทบกับความสามารถในการกำกับที่เกี่ยวข้องไหม เช่น คุณภาพสินค้า การโฆษณาสรรพคุณ การเคลมสินค้า การร้องเรียน ชนิดภาษีที่สามารถจัดเก็บได้-ความสามารถในการดำเนินนโยบายภาษีที่เป็นธรรม การสมทบเข้ากองทุนประกันสังคมที่น้อยลง
  • เมื่อพื้นที่สำหรับกิจกรรมทางเศรษฐกิจ ทางสังคม ทางวัฒนธรรม ทางการเมือง มันแยกขาดจากกันชัดเจนบนพื้นที่ออนไลน์ เทียบกับพื้นที่ออฟไลน์ที่เวลาเราไปเดินตลาดเดินห้าง ยังได้เจอของที่เราประหลาดใจ ไม่ได้ตั้งใจไปเจอ แต่ก็ได้เจอ เช่น เจอคนประท้วง เจอคนแจกใบปลิว เจอคนชวนลงชื่อแคมเปญต่างๆ การแบ่งแยกพื้นที่แบบนี้ จะทำให้การมีส่วนร่วมทางสังคมการเมืองมันลดลงหรือเปล่า เราจะไปยืนประท้วง “หน้าห้างออนไลน์” ได้อย่างไร

นอกนั้นก็ลองเอาวิธีการวิเคราะห์ความสัมพันธ์ทางอำนาจของฝั่งการผลิตและห่วงโซ่อุปทาน รวมถึงการรวมตัวของแรงงาน ในธุรกิจค้าปลีก จากบทความ Barcode Empires: Politics, Digital Technology, and Comparative Retail Firm Strategies (Watson, 2011) กับการแจกแจงผู้เกี่ยวข้องตามเส้นทางค้าปลีก (ทำแบบ user journey) จากรายงาน Disruptions in retail through digital transformation: Reimagining the store of the future (Deloitte, 2017) มาเล่านิดๆ หน่อยๆ เผื่อนักวิจัยเขาจะสนใจไปดูต่อ

ไม่ได้มีข้อเสนออะไร เพียงแค่ชวนนักวิจัยในห้องคุยประเด็นพวกนั้น และดูว่าจะขยายประเด็นผลกระทบทางสังคมไปยังไงได้อีกบ้าง อาจจะมีชวนนิดหน่อยว่าน่าจะลองไปศึกษาตัว “sites” หรือสถานที่ที่เกิดกิจกรรม/ธุรกรรม ทั้งการผลิต-สะสม (“Things” at Rest) และการแลกเปลี่ยน (“Things” in Transit) ซึ่งก็มโนๆ ขึ้นมานะ

เรื่องที่สนใจอันนึงคือ แล้วใครควบคุม sites เหล่านั้น? ความสัมพันธ์เชิงอำนาจมันเป็นยังไง?

ลิงก์นี้คือสไลด์ครับ: Beyond retailer-consumer relationships

อนุญาตให้เรียนไม่สดเพื่อเพิ่มโอกาสเข้าถึง + การสร้างพื้นที่ปลอดภัยระหว่างบันทึกการสอน

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

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

เวลาที่สะดวกสำหรับการเรียนที่ขึ้นกับทรัพยากรของผู้เรียน

“เวลาที่สะดวก” ในแง่การเรียนออนไลน์นี้ จำเป็นต้องคำนึงถึงปัจจัยดังต่อไปนี้เป็นอย่างน้อย

1) การเข้าถึงอุปกรณ์ที่เหมาะสม (โทรศัพท์หรือคอมพิวเตอร์ที่มีความสามารถเพียงพอจะเปิดสื่อการสอนได้อย่างครบถ้วน)

2) ความเร็วและความเสถียรของอินเทอร์เน็ตที่เหมาะสม

3) พื้นที่ที่เหมาะสม เช่น ที่นั่ง ความสงบ (อาจเป็นในที่พักอาศัยหรือที่อื่น เช่น บ้านญาติ ร้านเน็ต)

“เวลาที่สะดวก” คือช่วงเวลาที่ผู้เรียนสามารถจัดหา (1), (2), และ (3) ได้พร้อมกัน

กรณีบ้านเดียวกันมีอุปกรณ์ตาม (1) เพียงเครื่องเดียว แต่มีสมาชิกในบ้านหลายคนที่ต้องทำงานหรือเรียน การเรียนแบบสด (real time) จะสร้างปัญหาการแย่งกันใช้ทรัพยากรที่มีจำกัด

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

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

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

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

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

ทั้งนี้ “เวลาที่สะดวก” ที่ผู้เรียนสามารถจัดหา (1), (2), และ (3) มาได้พร้อมกันนี้ ไม่จำเป็นจะต้องเป็นเวลาที่ต่อเนื่องกัน เช่น สำหรับคาบเรียน 2 ชั่วโมง ในสัปดาห์หนึ่ง ผู้เรียนรายหนึ่งอาจมีเวลาที่สะดวกตอน 11:30-12:30 หนึ่งชั่วโมงในวันจันทร์ และ 20:00-21:00 อีกหนึ่งชั่วโมงในวันอังคาร และเวลานี้อาจเปลี่ยนไปในอีกสัปดาห์

การบันทึกกับพื้นที่ปลอดภัยในการเรียนการสอน

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

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

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

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

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

การเผยแพร่สื่อบันทึกการเรียนการสอนสู่สาธารณะ

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

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

การคำนึงถึงสมาธิในพื้นที่ทางกายภาพที่ไม่ใช่ห้องเรียนโดยเฉพาะ

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

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

ฝากทางสถานศึกษาต่างๆ พิจารณาสำหรับภาคการศึกษานี้หรือที่จะถึงนี้ครับ

เขียนและออกแบบหน้าตานโยบายความเป็นส่วนตัว-นโยบายการใช้ข้อมูล

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

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

หน้าแรกของนโยบายความเป็นส่วนตัวของเว็บไซต์ Juro
หน้าแรกของนโยบายความเป็นส่วนตัวของเว็บไซต์ Juro

 

ออกแบบ User Interface และ User Experience กรณีศึกษาฉลากโภชนาการแบบใหม่ของสหรัฐ

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

จะเห็นว่ามีการปรับ interface การแสดงผล ทำให้ข้อมูลสำคัญอย่างปริมาณแคลอรีปรากฏเด่นขึ้น ดูได้ง่ายขึ้น มองแว๊บเดียวก็เจอเลยฉลากโภชนาการใหม่ของสหรัฐ

นอกจากนี้ในส่วนของ experience คนทำตัวมาตรฐาน ก็เข้าใจว่า สุดท้ายคนกินก็ไม่ได้กินอาหารกันตามน้ำหนักหรือปริมาตรอาหาร แต่กินตามขนาดของบรรจุภัณฑ์ ดังนั้นการระบุหน่วยบริโภค จึงคำนึงถึงขนาดบรรจุภัณฑ์ด้วย เช่นน้ำอัดลมขวด 330 มล. กับขวดครึ่งลิตร ปกติคนก็กินหมดขวดเหมือนกัน ดังนั้นจึงนับเป็น 1 หน่วยบริโภคเหมือนกัน

ตรงนี้คนทำงานต้องไม่ทำงานแค่ส่วนกราฟิกหรือการออกแบบ interface แต่ต้องไปทำความเข้าใจพฤติกรรมผู้บริโภคจริงๆ ด้วยหน่วยบริโภคใหม่ตามอย.สหรัฐ

ลองเปรียบเทียบกับของประเทศไทยในปัจจุบัน
ฉลากโภชนาการของไทย

ข้อมูลและภาพจาก Banana Post – อย.สหรัฐดีไซน์ป้ายข้อมูลสารอาหารใหม่ ปรับสูตรโภชนาการ แจ้งน้ำตาลที่ใส่เพิ่ม (ภาพ 2 ภาพแรกดัดแปลงมาจากภาพของ USFDA)

(วันนี้นั่งเคลียร์ Desktop เจอรูปนี้เลยเอามาอัปบล็อก เผื่อหาย / Banana Post ตอนนี้เหมือนไม่ค่อยได้อัป สงสัยบก.หายตัว ถถถถถ)

ยากและไม่ค่อยปลอดภัย Facebook Wi-Fi #FAIL @ ห้องสมุด TCDC

วันนี้มีสัมภาษณ์ เลยลองนัดที่ TCDC ใหม่ ตรงไปรษณีย์กลาง บางรัก ช่วงนี้จนถึงสิ้นเดือนพฤษภาคมเขาเปิดให้ใช้ห้องสมุดฟรี

พบว่าการใช้ไวไฟที่นี่วุ่นวายไปหน่อย คือคงตั้งใจดี ทางหนึ่งก็จะได้ยอดเช็กอินเพิ่ม อีกทางก็คงอยากให้ผู้ใช้ล็อกอินได้ง่ายๆ เลยใช้ Facebook Wi-Fi ในการลงทะเบียน (พูดอีกแบบคือ ฝากภาระในการบันทึกผู้เข้าใช้ระบบให้เฟซบุ๊กทำ – จะไม่ทำเลยก็คงไม่ได้ เพราะพ.ร.บ.คอมพิวเตอร์กำหนดให้บันทึกข้อมูลการจราจร-ที่ระบุตัวผู้ใช้ได้)

รวมๆ คือเราพบว่าการล็อกอินไวไฟที่ TCDC ไม่ค่อยเป็นมิตรเท่าไร แถมอาจส่งเสริมพฤติกรรมเสี่ยงด้านความปลอดภัยของข้อมูลส่วนบุคคล โพสต์นี้จะบอกว่าทำไม ปัญหาน่าจะอยู่ตรงไหน และน่าจะแก้ไขยังไงได้บ้าง (ใครใช้ Facebook Wi-Fi ก็อาจจะเจอปัญหาแบบเดียวกันนี้ได้ ไม่เฉพาะ TCDC – เคยเจอร้านกาแฟบางร้านก็ใช้)

มั่นใจว่าไม่ได้เจอปัญหานี้อยู่คนเดียว เพราะระหว่างที่นั่งทำงานอยู่ที่นั่นตั้งแต่ประมาณ 12:40 จนถึงราว 17:00 ได้ยินโต๊ะรอบๆ ถามกันเป็นระยะถึงเรื่องต่อไวไฟ กดตรงไหน ทำไมต่อไม่ได้

บางส่วนอาจจะเกี่ยวกับ UI (เช่น พอ CSS ไม่โหลด ตำแหน่งของแบบฟอร์มที่จะต้องกรอกก็สับสน) แต่ยังมีส่วน UX ด้วย ที่ประสบการณ์ตั้งแต่ต้นจนจบกว่าจะต่อเน็ตได้มีอุปสรรคพอสมควร ซึ่งถ้ายังยืนยันจะใช้ Facebook Wi-Fi อยู่ คงต้องหาทางไปตั้งค่าให้ถูกต้องและรองรับผู้ใช้ที่มีความต้องการหรือข้อจำกัดแตกต่างกันไป

นี่คือเครือข่ายไวไฟที่พบที่บริเวณห้องสมุดชั้น 5 ของ TCDC (จับภาพหน้าจอมาเมื่อ 19 พ.ค. 2560 ประมาณ 14:30)

TCDC wifi list

Guest@TCDC เป็นเครือข่ายสำหรับผู้ใช้ทั่วไป ส่วน Member@TCDC นั้นสำหรับสมาชิก (บุคคลทั่วไป 1,200 บาท/ปี นักศึกษา 600 บาท/ปี) เนื่องจากเรายังไม่ได้เป็นสมาชิก ก็ลองเลือก Guest@TCDC

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

Cannot verify identity of the log in page

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

ถ้ากด “Show Certificate” เพื่อดูรายละเอียดก็จะพบว่า เป็นใบรับรองที่ออกโดย Root Certificate Authority (Root CA – หน่วยงานออกใบรับรองระดับบนสุด) ที่ชื่อว่า cmx.cisco.com และจะหมดอายุวันที่ 12 ตุลาคม 2560 เวลา 01:59:08 (UTC+7) แต่เว็บเบราว์เซอร์ของเรา ไม่เชื่อถือ Root CA รายนี้ มันก็เลยขึ้นคำเตือน

เครือข่ายไวไฟ Member@TCDC ก็พบปัญหาเดียวกัน

ถ้าอยากจะใช้งานเครือข่ายไวไฟ ก็จำเป็นต้องไปให้ถึงหน้าล็อกอินให้ได้ จะไปให้ถึงหน้าล็อกอิน ก็ต้องยอมกด “Continue” ไป ทั้งๆ เราไม่แน่ใจว่ามันปลอดภัยหรือไม่ หรือจะเกิดอะไรขึ้นหลังจากนี้

พอกด Continue ไปแล้ว จะเจอหน้าจอให้ “เช็กอินบน Facebook เพื่อรับการเข้าถึงอินเทอร์เน็ตฟรี”

แต่หน้าจอเช็กอิน/ล็อกอินนี้ จะสับขาหลอกนิดหน่อย เพราะช่องล็อกอินที่เราเห็นเด่นๆ มันไม่ใช่อันที่จะต้องใช้ เราต้องเลื่อนหน้าลงไปอีก ถึงจะเจอฟอร์มที่ใช่ (ปัญหาอาจจะมาจากการที่ CSS ไม่ยอมโหลดด้วย – แต่ลองทั้งมือถือและเดสก์ท็อปก็เป็นเหมือนกัน)

เลื่อนหน้าจอล็อกอินลงมาหน่อย จะเจอคำว่า “หากต้องการเช็กอิน ให้สมัครใช้งาน Facebook วันนี้ หรือคลิกที่ลิงก์ ‘ข้ามการเช็กอิน’ ข้างล่างนี้” ให้มองหาลิงก์ “เข้าสู่ระบบ” (มันจะอยู่ติดกับลิงก์ “สมัครใช้งาน” เลย วรรคก็ไม่ยอมเว้น) พอคลิกที่ลิงก์ “เข้าสู่ระบบ” มันจะนำเราไปที่หน้าล็อกอินที่ถูกต้อง

(ลิงก์ “ข้ามการเช็กอิน” นั้นไม่สามารถคลิกได้ – ส่วนช่องที่เขียนว่า “ป้อนรหัส Wi-Fi” นั้นก็ใช้ไม่ได้ สอบถามเจ้าหน้าที่ TCDC แล้ว ไม่มีการออกรหัสให้ใช้กับช่องนี้)

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

ถ้ามาถึงหน้าจอนี้ หมายถึงใกล้สำเร็จแล้ว แต่เราจะเจอปัญหากับใบรับรองเหมือนกับที่เราเจอไปแล้วทีหนึ่ง ตรงนี้เว็บเบราว์เซอร์จะแจ้งว่ามันไม่สามารถยืนยันได้ว่าหน้าจอนี้ที่อ้างว่ามาจากหมายเลขไอพี 1.1.1.1 นั้นเป็นอย่างที่อ้างจริงๆ ถ้าเราเชื่อใจ อยากไปต่อ ก็ให้กด “Continue” อีกทีหนึ่ง

บนมือถือ (iOS) จะเป็นแบบนี้

Canno Verify Server Identity "1.1.1.1"

ถ้ากด “Continue” ก็จะมีหน้าจอให้เช็กอิน ประกาศให้โลกรู้ว่าเรามาอยู่ที่ TCDC แล้วนะ พอเราเช็กอินเสร็จ ก็จะใช้อินเทอร์เน็ตได้แล้ว

สรุป

พบว่าการเข้าใช้เครือข่ายไวไฟ Guest@TCDC นั้นเป็นประสบการณ์ที่ยากลำบากมาก โดยปัญหาที่พบคือ

  • พบปัญหาใบรับรองออกโดย CA ที่เว็บเบราว์เซอร์ไม่ให้การยอมรับถึง 2 ครั้ง ทั้งช่วงก่อนหน้าจอล็อกอินและช่วงใกล้จะล็อกอินสำเร็จ
    • ผู้ใช้ทั่วไปอาจจะทำตัวไม่ถูกว่าให้ทำอย่างไรต่อ เพราะข้อความเตือนของเว็บเบราว์เซอร์อาจเข้าใจยาก
    • กรณีผู้ใช้ TCDC ถูกสอนว่า “ไม่ต้องสนใจ คลิก Continue” ไปเลย ก็จะเป็นการส่งเสริมพฤติกรรมเสี่ยงให้กับผู้ใช้ โดยอาจเข้าใจไปว่า ต่อไปหากเจออาการแบบนี้อีกไม่ว่ากับเครือข่ายไหน หากอยากไปต่อ ก็ให้กด “Continue” เสีย ก็จะแก้ปัญหาได้ พฤติกรรมเช่นนี้ทำให้ผู้ใช้อาจตกเป็นเหยื่อของอาชญากรรมคอมพิวเตอร์หรือข้อมูลส่วนบุคคลถูกขโมยได้
    • ปัญหาใบรับรองนี้ พบว่าไม่ได้เป็นเฉพาะกับหน้าจอล็อกอินไวไฟของ TCDC หน้าเว็บไซต์หลักของ TCDC ก็มีปัญหานี้ด้วย 🙁TCDC Bad Certificate
  • หน้าจอ Facebook Wi-Fi ในบางกรณี อาจแสดงผลไม่ชัดเจนเพียงพอ ว่าผู้ใช้จะต้องกรอกแบบฟอร์มล็อกอินอันไหน ผู้ใช้ไม่สามารถรู้ได้เองอย่างชัดเจน ว่าจะต้องเลื่อนหน้าจอลงมาเพื่อคลิกลิงก์ “เข้าสู่ระบบ” เพื่อจะไปยังหน้าจอล็อกอินอีกอัน ซึ่งจะสามารถนำไปสู่การเช็กอินและใช้อินเทอร์เน็ตได้
  • ใครไม่มีบัญชีเฟซบุ๊กจะใช้อินเทอร์เน็ตผ่านเครือข่าย Guest@TCDC ไม่ได้ เนื่องจากผู้ใช้จะต้องล็อกอินเฟซบุ๊กก่อน
    • หรือถ้าวันไหนเฟซบุ๊กล่มหรือถูกปิดไป ก็อาจจะล็อกอินไม่ได้เหมือนกัน
    • เจ้าหน้าที่ Info Guru ที่ TCDC ยืนยันว่าไม่มีรหัสให้ป้อนเพื่อข้ามการล็อกอินเฟซบุ๊ก
  • ผู้ใช้ถูกบังคับให้ต้องเช็กอิน เนื่องจากลิงก์ “ข้ามการเช็กอิน” ใช้งานไม่ได้  ซึ่งก็คงไม่ใช่ผู้ใช้ทุกคนที่รู้สึกสะดวกเช็กอินหรือรู้วิธีการตั้งค่าโพสต์เช็กอินให้เป็นส่วนตัว (สำหรับ Facebook Wi-Fi เจ้าของหน้าเฟซบุ๊กอย่าง TCDC สามารถตั้งค่า “โหมดบายพาส” ให้ผู้ใช้ไม่ต้องเช็กอินก็ได้ แค่ล็อกอินเฟซบุ๊กก็พอ)
    • สอบถามเจ้าหน้าที่เพิ่มเติม ได้ข้อมูลว่า ถ้าเป็นบนมือถือ จะข้ามได้ แต่เท่าที่ลองบนเดสก์ท็อปข้ามไม่ได้
  • กรณีผู้ใช้ใช้การยืนยันตัวตนแบบสองชั้นและล็อกอินผ่านมือถือเครื่องเดียวกัน จะมีเวลาไม่เกิน 30 วินาทีในการล็อกอิน เนื่องจากถ้าสลับหน้าจอมาเพื่อดูโค้ด หน้าล็อกอินจะหายทันที
  • แถม: พบว่าโปรแกรมอีเมล (อย่าง Mail บน macOS กับ iOS หรือ Thunderbird) ใช้ไม่ได้ พอร์ต 993 (SSL/TLS encrypted IMAP) และ 465 (SSL/TLS encrypted SMTP) ถูกปิด และแอปแชต Signal ก็ใช้ไม่ได้

ข้อเสนอแนะ

  • ที่แก้ไขได้โดยไม่ต้องรอฝ่ายนโยบายนัก เพราะน่าจะเป็นเรื่องการตั้งค่าเครือข่าย คือเรื่องใบรับรองและเรื่องหน้าจอล็อกอิน กรณีใช้ Cisco น่าจะลองดูเอกสารตรง Clients Redirected to External Web Authentication Server Receive a Certificate Warning กับ Cisco Wireless 1.1.1.1/login.html redirect issues (ผมไม่มีความรู้เรื่องการติดตั้งระบบเครือข่ายใดๆ นี่เป็นการลองค้นข้อมูลเบื้องต้นเท่านั้น)
  • ปัญหาการโหลด CSS ไม่ขึ้น ส่งผลให้การใช้งานหน้าจอล็อกอินสับสน ควรหาทางแก้ไข (ผมไม่แน่ใจว่าเกิดเพราะอะไร)
  • ควรอย่างยิ่งที่จะมีทางเลือกให้ผู้ที่ไม่ได้ใช้เฟซบุ๊ก หรือไม่สะดวกจะล็อกอินด้วยเฟซบุ๊ก (เช่นติดปัญหาการยืนยันตัวตนแบบสองชั้น) ให้สามารถกรอกรหัสไวไฟเพื่อเข้าใช้งานได้ (เลือกใน Facebook Wi-Fi ได้)
  • ควรมีทางเลือกให้ผู้ใช้เฟซบุ๊กหลังจากล็อกอินแล้วไม่จำเป็นต้องเช็กอินก็ใช้งานได้ (เลือกใน Facebook Wi-Fi ได้)
  • พิจารณาเปิดพอร์ตพื้นฐานอย่างอีเมล (IMAP, POP, SMTP)

ใครมีโอกาสก็มาลองใช้งานดูครับ TCDC ใหม่ ทางเข้าห้องสมุดอยู่ชั้น 5 หลังจากนี้ถ้าไม่ใช่สมาชิก ก็ใช้บริการได้ โดยจ่ายค่าบริการรายวัน 100 บาท/วัน มีโต๊ะทำงาน มีปลั๊กไฟ มีไวไฟ (ถ้าเข้าได้) ถูกกว่าไปนั่งร้านกาแฟอีก (ถ้าไม่รวมค่ารถ :p) นอกจากนี้ยังมีส่วนนิทรรศการ Maker Space และส่วนอื่นๆ อีก

อ้อ นอกจากที่กรุงเทพ ที่เชียงใหม่ก็มี TCDC นะ และที่ขอนแก่นก็กำลังจะเปิด (ตอนนี้มี mini TCDC อยู่ในมหาวิทยาลัยขอนแก่นอยู่แล้ว)

โลกของเราขาวไม่เท่ากัน: ข้อคำนึงเพื่อเว็บขาวดำแต่พอดี

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

อย่างไรก็ตาม มีข้อควรระวังด้วย เพื่อไม่ให้กระทบกับการใช้งานหรือเกิดความผิดพลาดระหว่างใช้งาน โพสต์นี้ผมรวมเอาข้อแนะนำจากหลายๆ คนที่เจอบนเฟซบุ๊กมารวมเอาไว้ ขอขอบคุณคุณ @Nutn0nFufu Dogu, และ Kasiti Panthanom ด้วยครับ

ในช่วงแรกจะพูดถึงข้อควรระวังพื้นฐาน วิธีเฉพาะหน้าเพื่อทำสีโทนขาวดำ จากนั้นจะพูดถึงปัญหา ทางแก้ไขระยะยาว โดยอ้างอิงส่วนหนึ่งจาก Web Content Accessibility Guidelines ของ W3C และ human interface guidelines ของแอปเปิล

ปรับสี ให้คำนึงถึงการใช้งานด้วย

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

สีเบเยอร์

เลือกสี iPhone

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

สำหรับเว็บไซต์ที่

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

ไม่ควรปรับสี “ทั้งเว็บไซต์” ให้เป็นขาวดำ แต่ให้พิจารณาปรับเฉพาะจุด และอาจพิจารณาทางเลือกอื่น เช่น ปรับเฉพาะภาพโลโก้เป็นขาวดำ แสดงแบนเนอร์ด้านบนของทุกหน้า แสดงภาพใหญ่ในหน้าแรกหน้าเดียว หรือทำเป็น landing page แยกออกมาต่างหากก่อนเข้าหน้าเว็บหลัก (ไม่ค่อยอยากแนะนำเท่าไหร่สำหรับ landing page)

วิธีเฉพาะหน้า

ก่อนอื่นขอพูดถึง 2 เทคนิคที่ขณะนี้หลายเว็บไซต์ใช้อยู่ก่อน คือการใช้ CSS filter (ทั้ง grayscale() และ saturate()) กับการใช้ JavaScript แบบ “หว่านแห” ครอบจักรวาล เพื่อเปลี่ยนสี “ทั้งเว็บไซต์”

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

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

แม้เบราว์เซอร์รุ่นใหม่ๆ หน่อยปรับปรุงประสิทธิภาพของ filter grayscale() และ filter saturate() ให้ดีขึ้นมากแล้ว แต่ถ้าใช้ทั้งหน้ากับทุก element ก็อาจจะหน่วงบ้าง

จริงๆ แล้วในเรื่องนี้นั้น CSS filter ก็ยังทำงานได้เร็วกว่า JavaScript แต่สาเหตุที่บางคนเลือกใช้ JavaScript (เช่น grayscale.js) ก็เพราะตัว Internet Explorer ยังรองรับ CSS filter ได้ไม่เต็มที่

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

ตัวอย่าง CSS filter ที่ใช้กันมาก

[*|html|body|Element] {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url('grayscale.svg#grayscale');
    filter: gray;
}

คุณ Fufu Dogu สรุปปัญหาที่พบบนเบราว์เซอร์ต่างๆ ไว้ดังนี้

  • Chrome – แสดงผลขาวดำได้ มีปัญหาเรื่อง z-index จะคำนวณผิดไปจากเดิม
  • Safari – แสดงผลขาวดำได้ อาจมีหน่วงบ้างถ้าเว็บใหญ่
  • Firefox – แสดงผลขาวดำได้ มีปัญหาเรื่อง position, z-index, ถ้าใช้ * เว็บหน้าเสียเลย
  • IE <= 9 แสดงผลขาวดำได้ มีปัญหาเรื่อง pseudo Element จะไม่ขาวดำ, IE 10-12 ใช้งานไม่ได้, IE 13-14 ใช้งานได้

z-index ในที่นี้คือเลขระบุตำแหน่ง “แกนลึก” หรือระดับชั้นของหน้าเว็บ นึกถึงว่าหน้าเว็บก็เหมือนกระดาษ และเราเอากระดาษมาซ้อนกันได้หลายๆ แผ่น วิธีระบุว่าเรากำลังพูดถึงกระดาษแผ่นไหนอยู่ ก็คือเลข z-index นั่นเอง (เลขยิ่งมากยิ่งอยู่บน, เลข 0 คือแผ่นหลังสุด) การอ้างอิง z-index ผิด จะทำให้อินเทอร์เฟซบางส่วนทำงานผิดพลาดได้ และส่งผลต่อการใช้งาน (เช่นโปรแกรมอาจจะสั่งให้เปลี่ยนการแสดงผลข้อความที่อยู่บนกระดาษแผ่นที่ 3 แต่พอใช้ filter ปุ๊บ โปรแกรมมันหากระดาษแผ่นที่ 3 ไม่เจอแล้ว ก็เลยเปลี่ยนข้อความไม่ได้)

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

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

ปรับสีแบบงานละเอียด

“งานละเอียด” ที่ว่า มี 2 ระดับความละเอียด (ไม่มีหลักอะไร แบ่งเอาเองนี่แหละ)

แบบแรกคือ ใช้ CSS override ทำ stylesheet ขึ้นมาใหม่อีกชุด แล้วแก้ไข CSS เพื่อแสดงผลขาวดำเป็นจุดๆ ไป (ไม่ได้สั่งให้ทำแบบครอบจักรวาลทุกจุด) เช่น แก้เฉพาะตัว img หรือกำหนด class ขึ้นมาเฉพาะอันหนึ่งแล้ว element ไหนต้องการให้เป็นขาวดำก็เพิ่ม class ดังกล่าวเข้าไป จากนั้นก็ไปประกาศใช้หลัง stylesheet หลัก เพื่อให้ค่าต่างๆ ตัว stylesheet ที่ประกาศทีหลังนี้ ไปทับ (override) ค่าเดิมของตัว stylesheet หลัก

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

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

ท้องฟ้าเรียงเป็นชั้นสีคล้ายธงชาติไทย

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

W3C แนะนำไว้ใน Web Content Accessibility Guidelines (WCAG) ว่า contrast ratio ของสีตัวอักษรขนาดเล็กและพื้นหลังควรอยู่ที่อย่างน้อย 4.5:1 และตัวอักษรขนาดใหญ่ (14 pt bold หรือ 18 pt regular ขึ้นไป) ควรมี contrast ratio ที่อย่างน้อย 3:1

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

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

ทั้งหมดนี้ควรคำนึงถึงสาระที่ต้องการจะสื่อหรือประโยชน์ใช้สอย รวมถึงประโยชน์ของสาธารณะ โดยเฉพาะเรื่องที่เกี่ยวกับความปลอดภัยสาธารณะ

bw-map

bw-js100

แปลงรูปเป็นขาวดำทีละเยอะๆ

สำหรับผู้ที่ต้องการแปลงรูปจำนวนมากให้เป็นขาวดำ บน Windows มีโปรแกรมฟรีอย่าง IrfanView และ XnView ช่วยได้ (สามารถปรับขนาด ตัดภาพ แปลงฟอร์แมต เปลี่ยนสีรูป เปลี่ยนชื่อรูป ได้ทีละเยอะๆ) ดูตัวอย่างการใช้ฟังก์ชัน batch processing จากคลิปนี้

สำหรับคนใช้ OS X (หรือ macOS .. ฮ่วย) และถนัด Automator (มากับโอเอสอยู่แล้ว) ลองทำ Workflow ตามรูปนี้ (กล่องล่างสุดคือ Apply ColorSync Profile: Gray Tone ถ้าไม่มี ใช้ Apply Quartz Composition Filter: Black and White แทนก็ได้ แต่มันจะออกแนวทำรูปเก่า ไม่ใช่ปรับสีเทาอย่างเดียว)

Convert to B&W Automator Workflow

เรียนรู้ร่วมกันเรื่องการใช้สีกับ UI

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

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

ตัวอย่างคำแนะนำจากแอปเปิลในการใช้สีในอินเทอร์เฟซของ iOS:

Be aware of colorblindness and how different cultures perceive color. People see colors differently. Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness. Also consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red is used to communicate danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.

ถอดความได้ดังนี้

“ให้คำนึงถึงภาวะตาบอดสีและการที่สีถูกรับรู้ต่างกันในต่างวัฒนธรรม

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

ตัวอย่างเช่น แทนที่จะใช้วงกลมสีแดงและวงกลมสีเขียวเพื่อบ่งบอกถึงสถานะออฟไลน์และออนไลน์ ให้ใช้สี่เหลี่ยมสีแดงและวงกลมสีเขียวแทน

ซอฟต์แวร์แก้ไขภาพบางตัวจะมีเครื่องมือที่ช่วยให้คุณตรวจสอบการใช้งานในภาวะตาบอดสี

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

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

ดูเพิ่มเติมเรื่องนี้ได้ที่ Understanding WCAG 2.0: Contrast และถ้าอยากทดลองว่าคนตาบอดสีเห็นสีอย่างไร มีซอฟต์แวร์จำลองให้ใช้ฟรีทั้งบน Windows และ Mac ชื่อว่า Color Oracle หรือถ้าจะลองกับหน้าเว็บไซต์แบบไม่ต้องลงโปรแกรมอะไรในเครื่อง ไปที่เว็บ Colorblind Web Page Filter

สรุป/ตัดจบ

  • พิจารณา ประโยชน์ใช้สอย+ความปลอดภัย ว่าเหมาะสมไหมที่จะปรับสีของทั้งเว็บไซต์ (ด้วยการแทรกโค้ดที่ยังไม่ได้ทดสอบผลกระทบ) หรือจะใช้วิธีอื่นแทน (เช่น ปรับสีเฉพาะโลโก้ หรือขึ้นแบนเนอร์เอา)
  • การบังคับปรับสีด้วยโค้ดลัดแบบ “หว่านแห” อาจทำได้หากเป็นการทำเฉพาะหน้าไปก่อน แต่ควรตรวจสอบตามหลังด้วย เพื่อซ่อมปัญหาที่น่าจะเกิดตามมาแน่ (โดยเฉพาะเรื่อง contrast) และหากทำได้ก็ควรเปลี่ยนไปใช้โค้ดที่เฉพาะเจาะจง ปรับสีเฉพาะจุด เลือกปรับสีด้วยมือจะดีกว่า
  • การใช้สีให้คำนึงถึงการใช้งาน
    • แผนภูมิ แผนภาพ แผนที่ หรือภาพถ่าย ที่สีมีความสำคัญ ให้พิจารณาคงสีเดิมไว้ หรือปรับลดสีลงให้ยังอยู่ในระดับที่ยังแยกแยะและใช้ประโยชน์จากภาพได้
    • ตัวอักษร ให้มี contrast ที่เหมาะสมเมื่อเทียบกับพื้นหลัง contrast ratio ที่แนะนำคือ 4.5:1 ขึ้นไป (สำหรับตัวอักษรขนาดเล็ก) และ 3:1 ขึ้นไป สำหรับตัวอักษรขนาดใหญ่ (14 pt bold หรือ 18 pt regular ขึ้นไป) – ลองดูตัวอย่างคู่สีโทนขาวดำ ที่คุณ Fufu Dogu ทำมา และดูตัวอย่างคู่สีอื่นๆ เพิ่มเติมที่ Color Contrast for Better Readability
    • ปุ่ม ป้ายแจ้งเตือน UI อื่นๆ ให้ตรวจสอบว่า หลังจากปรับสี ยังสามารถแยกแยะปุ่มที่อยู่ใกล้เคียงกันได้หรือไม่ โดยเฉพาะคำถามที่ให้ผู้ใช้เลือก 2 ทาง หากแยกลำบากให้เพิ่ม visual element เช่นสัญลักษณ์ต่างๆ เข้าไปเป็นตัวช่วย
  • ถ้าทำได้ ควรมีโหมดปกติให้ผู้ใช้สลับกลับมาได้ด้วย (เช่นที่เว็บไซต์ Jeban.com ทำ)
  • หากมีเวลา ลอง(ขอเวลาจากบอส)ศึกษา Web Content Accessibility Guidelines เพื่อการทำเว็บที่ทุกคนเข้าถึงได้

 

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

 

(“โลกของเราขาวไม่เท่ากัน” เป็นชื่อหนังสือที่ ม.ล.ปริญญากร วรวรรณ และ วรพจน์ พันธุ์พงศ์ เขียนร่วมกัน – สำนักพิมพ์ openbooks)

ถนนร้องเพลงที่เกาหลี

ลดอุบัติเหตุบนทางหลวงด้วยการออกแบบ.. ให้ถนนร้องเพลง

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

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

#MRT และ #BTS ต้องมีจุดขายตั๋วนอกสถานี — เพิ่มความเร็ว ลดความ #fail

ทั้ง MRT และ BTS (รวมไปถึงขนส่งมวลชนอื่นๆ) ควรจะมีจุดซื้อตั๋วที่อยู่นอกตัวสถานีได้แล้วครับ

ซื้อตั้งแต่หน้าสถานีชั้นผิวถนน ซื้อที่ร้านสะดวกซื้อ ซื้อทางไปรษณีย์ เติมเงินตั๋วที่ตู้เอทีเอ็มหรือทางออนไลน์ ฯลฯ

ทำไงก็ได้ให้คนไปต่อแถวในสถานีน้อยที่สุดครับ เรื่องง่ายๆ แค่นี้ก็ช่วยได้มากแล้ว

ปล่อยให้สถานีอย่างอโศกมันวายป่วงแบบทุกวันนี้มาหลายปีได้ยังไง ไม่เข้าใจ

แล้วถ้ามันไม่ไหวแล้ว ต้องโฟลว์คนให้ได้มากกว่านี้ จัดผังใหม่ครับ เพิ่มประตูเข้าออก เอาตู้ขายตั๋วไปวางตรงอื่นได้ไหม เอาร้านค้าไปไว้ที่อื่นได้ไหม ทำไงให้หน้ากว้าง (=bandwidth) ที่คนจะเคลื่อนเข้าออกได้ มันกว้างที่สุด

ถ้าระยะเวลารอซื้อตั๋วรอเข้าระบบ มันนานกว่าการเดินไปอีกสถานี ก็ #fail แล้วครับ