ทฤษฎี UI เว็บนานาชาติ By uiblogaziner July 2, 20142584 views ShareTweet 0 ในการออกแบบเว็บไซต์ที่ต้องรองรับการแปลหลายภาษาทั่วโลกนั้น (เช่น เว็บ Agoda.com, Booking.com) มีหลายข้อจำกัดมากมายที่เราควรคำนึงถึง แม้ว่ามันจะเป็นการเพิ่มโอกาสที่เราจะสามารถสื่อสารและขายสินค้าให้กับคนทั่วโลก (หากเป็นเว็บ e-commerce) แต่ถ้าไม่รู้จักว่างานออกแบบที่ให้เกียรติทุกชนชาติเป็นอย่างไร ก็อาจจะสร้างผลเสียให้กับเว็บของเราได้ มาดูกันว่าเราต้องระวังเรื่องอะไรบ้าง 1. วัฒนธรรมและศาสนา แต่ละชนชาติมักมีความเชื่อ, สิ่งห้ามและสิ่งเคารพประจำถื่น การนำเอาสิ่งนั้นมาเป็นส่วนหนึ่งในงาน design จึงเป็นสิ่งที่ควรหลีกเลี่ยงเป็นอย่างยิ่ง ผมยกตัวอย่างเช่น ถ้าผมต้องการสื่อความหมายถึงเรื่อง “การประหยัด” หนึ่งในความคิดของเราอาจมีเจ้าตัวนี้อยู่ในใจใช่ไหมครับ ทาด้า กระปุกหมูออมสิน มันเป็นภาพที่สื่อสารออกมาได้ชัดเจนเลยทีเดียว แต่อย่าลืมว่า เรากำลังออกแบบเว็บนานาชาติอยู่นะครับ ดังนั้นถ้าคนแขกหรืออิสลามเข้ามาในเว็บแล้วเห็นภาพนี้ เราคงจะนึกออกใช่ไหมครับว่า แทนที่จะสื่อในทางที่ดี กลับเป็นว่าเหมือนเราไปโชว์รูปไม่ดีให้พวกเค้าดูแทนยังไงยังงั้น ยากเนอะ เห็นไหมล่า อ้าวแล้วอย่างงี้ จะเอาเป็นรูปอะไรดี ก็ลองค้นหาภาพดูภาพครับ เดี๋ยวนี้มีหลายเว็บไซต์ที่ขายภาพ มีตัวเลือกที่ถูกใจเราและไม่เป็นการลบลู่ชาติอื่นด้วยแน่นอนครับ อย่างเช่น เปลี่ยนจากหมูออมสินเป็น… ขวดโหลไงล่ะ แค่นี้ก็แก้ปัญหาได้แล้ว ดังนั้น พวกรูปวัว หรือสัญลักษณ์ทางศาสนา/ลัทธิ ไม่ควรนำมาพิจารณาในงาน design ของเราเลยนะครับ 2. ชนชาติและเผ่าพันธุ์ อันที่จริงรูปขวดโหล เราก็คิดว่ามันโอเคแล้วใช่ไหมครับ แต่ลองคิดละเอียดขึ้นอีกว่ามีอะไรที่ไม่เหมาะสมอีกหรือเปล่า ติ๊กต๊อกๆๆ หมดเวลา ผมเฉลยเลยแล้วกันนะครับ สิ่งนั้นก็คือ สีผิว เรื่องการเหยียดสีผิวเคยเป็นประเด็นร้อนที่เคยเกิดขึ้นอย่างรุนแรงในฝั่งประเทศตะวันตก อันเนื่องมาจากล่าอาณานิคม แม้ปัจจุบันจะไม่รุนแรงเหมือนก่อน แต่หากเราต้องการขจัดข้อเหลื่อมล้ำนี้ในงานเรา ก็ควรเลือกใช้สีผิวที่ออกไปทางน้ำตาลหรือออกสีเนื้อแดงๆ หน่อย หรือแสดงแค่ขวดโหลก็ยังได้ครับ 3. รูปแบบภาษาและสกุลเงิน ข้อนี้สำคัญมากครับ เพราะเราต้องเข้าใจก่อนเลยว่าคำแต่ละคำที่ใช้ในเว็บนั้น Interface ที่ออกแบบควรต้องรองรับความยืดหยุ่นในการแปลเป็นภาษาต่างๆ โดยเฉพาะภาษาที่มีคำค่อนข้างยาก เช่น ภาษาเยอรมันและรัสเซีย มาดูตัวอย่างกันครับ นี่เป็นเว็บ Roomkey ซึ่งเป็นเว็บที่ใช้ภาษาอังกฤษเป็นหลักในการแสดงผล ดังนั้นคำส่วนใหญ่ เราจะรู้ขนาดความยาวคงที่ การออกแบบก็จะง่าย และกำหนดขนาดของ Interface ได้อย่างลงตัวสวยงาม แต่ถ้าเกิดมีการแปลเป็นภาษาอื่นด้วยล่ะ เรามาดูที่บล็อคแผนที่กัน ผมจะลองแปลเฉพาะปุ่ม ‘View Map’ เป็นภาษาอื่นๆ ดูนะครับ จะเห็นเลยว่า จาก Interface ที่เราเคยกำหนดขนาดตายตัวได้ กลับต้องออกแบบเผื่อที่กรณีคำแปลในภาษาอื่นนั้นมีความยาว โดยเฉพาะภาษารัสเซียและเยอรมันตามที่ผมได้กล่าวไปแล้วครับ ทางแก้ก็คือ ทำปุ่มแต่ละอันให้กินเนื้อที่ทั้งแถวเลยครับ และจัดกลางตัวอักษรในปุ่มตามรูปด้านล่าง ด้วย Interface นี้ แม้จะมีการแปลเป็นภาษาที่มีความยาวมาก ก็ยังคงความสวยงาม และเป็นระเบียบอยู่ อาจพูดได้ว่ามันเป็น Interface ที่มีความยืดหยุ่นสูงกว่าแบบแรกก็ได้ครับ อีกเรื่องที่ต้องนึกถึงหากเว็บของเรารองรับการจ่ายเงินสกุลของประเทศเวียดนาม (ด็อง) หรือเกาหลี (วอน) เพราะด้วยเหตุผลเดียวกับการแปลภาษา Interface ที่ออกแบบต้องยืดหยุ่นพอที่จะรองรับการแสดงผลที่ยาวของหน่วยสกุลเงินเหล่านี้ครับ ข้อมูลต่อไปนี้ อ้างอิงอัตราแลกเปลี่ยน ณ วันที่ 4 ก.ค. 2557 หากเราแลกเงิน 1,000 บาท เป็นเงินเวียดนามด็องหรือเกาหลีวอน เราจะได้เงินมา 1,000 บ. = 657,664 ด็อง หรือ 1,000 บ. = 31,139 วอน มาดูตัวอย่างหน้าเว็บ Kayak.com กันว่า เค้าแสดงผลข้อมูลราคากันอย่างไร จะเห็นว่าราคาเปรียบเทียบที่เป็นสีน้ำเงินนั้น ได้เผื่อพื้นที่การแสดงผลจำนวนเงินได้มากสุด 6 หลัก (โดยประมาณ) ซึ่งโดยปกติแล้วหน่วยเงินในสกุลเวียดนามด็องจะมีอยู่ 7-8 หลัก สำหรับสินค้าราคา 2,000 บ. ขึ้นไป แต่เนื่องจากเว็บ Kayak.com ไม่ได้รองรับการจ่ายเงินด้วยสกุลเงินเวียดนามด็อง ปัญหานี้จึงไม่เกิด แต่ถ้าเราอยากจะแก้ปัญหานี้แล้วล่ะก็ เราก็ต้องยอมเสียพื้นที่การแสดงผลชื่อเว็บไซต์ทางด้านซ้ายให้แสดงผลด้วยจำนวนตัวอักษรที่น้อยลง และเพิ่มหลักการแสดงผลหน่วยสกุลเงินซึ่งมีความสำคัญกว่า ยังมีหน่วยสกุลเงินอื่นๆ อีกที่ใช้หลักในการแสดงผลที่ค่อนข้างยาว เช่น ลาว เป็นต้น ฉะนั้น Interface ของเราจะต้องมีความทนทานต่อการแปลทั้งภาษาและสกุลเงินด้วยนะครับ 4. วิธีการอ่าน ในโลกของมุสลิม พวกเขาจะอ่านข้อความจากขวาไปซ้าย และบนลงล่าง ซึงตรงกันข้ามกับวิธีการอ่านของเรา ดังนั้นหากเราทำภาพกราฟฟิคก็อย่าที่จะลืมเปลี่ยนทุกอย่างให้มันตรงกันข้าม มาดูตัวอย่าง Banner จากเว็บ Agoda.com ซึ่งรองรับภาษาอาหรับ เปรียบเทียบเราจะเห็นได้ชัดเลยว่า การจัดวางจะตรงกันข้ามหมด แต่รูปที่ใช้ประกอบไม่จำเป็นต้องตรงเปลี่ยนให้มันกลับซ้ายเป็นขวา กลับขวาเป็นซ้ายนะครับ (รูปซองจดหมาย) เพียงเปลี่ยนแค่ตำแหน่งเท่านั้นเองให้มันตรงข้ามกัน ซึ่งโดยปกติการเปลี่ยนให้เป็นรูปแบบสำหรับคนมุสลิมแล้ว จะกระทำผ่านโค้ด CSS (ภาษาที่ใช้สำหรับการรูปแบบและสไตล์ให้กับเว็บไซต์) ได้อย่างง่ายดายอยู่แล้ว เราไม่จะเป็นต้องทำภาพสองชุดให้เปลืองแรง แต่หาก Banner นั้นเป็นภาพทั้งหมด เราก็ต้องทำ Version สำหรับคนมุสลิมด้วยนะ การออกแบบเว็บให้คนทั่วโลกใช้งานเป็นสิ่งที่ท้าทายเอาการใช่ไหมครับ แต่มันก็แฝงเรื่องความรู้ความเข้าใจในวัฒนธรรมและวิถีการดำเนินชีวิตของคนต่างถิ่นให้เราได้ศึกษาเรียนรู้และพบกับโลกใหม่ที่เราไม่เคยเจอมาก่อน น่าสนุกเนอะ เห็นด้วยม่ะ (‐^▽^‐)