ทฤษฎี UI

เว็บนานาชาติ

0

coverpic

ในการออกแบบเว็บไซต์ที่ต้องรองรับการแปลหลายภาษาทั่วโลกนั้น (เช่น เว็บ Agoda.com, Booking.com) มีหลายข้อจำกัดมากมายที่เราควรคำนึงถึง แม้ว่ามันจะเป็นการเพิ่มโอกาสที่เราจะสามารถสื่อสารและขายสินค้าให้กับคนทั่วโลก (หากเป็นเว็บ e-commerce) แต่ถ้าไม่รู้จักว่างานออกแบบที่ให้เกียรติทุกชนชาติเป็นอย่างไร ก็อาจจะสร้างผลเสียให้กับเว็บของเราได้ มาดูกันว่าเราต้องระวังเรื่องอะไรบ้าง

1. วัฒนธรรมและศาสนา

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

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

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

137894111_476x290

ขวดโหลไงล่ะ แค่นี้ก็แก้ปัญหาได้แล้ว

ดังนั้น พวกรูปวัว หรือสัญลักษณ์ทางศาสนา/ลัทธิ ไม่ควรนำมาพิจารณาในงาน design ของเราเลยนะครับ

2. ชนชาติและเผ่าพันธุ์

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

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

stock-photo-hand-putting-penny-in-a-coin-jar-saving-money-71567908

3. รูปแบบภาษาและสกุลเงิน

ข้อนี้สำคัญมากครับ เพราะเราต้องเข้าใจก่อนเลยว่าคำแต่ละคำที่ใช้ในเว็บนั้น Interface ที่ออกแบบควรต้องรองรับความยืดหยุ่นในการแปลเป็นภาษาต่างๆ โดยเฉพาะภาษาที่มีคำค่อนข้างยาก เช่น ภาษาเยอรมันและรัสเซีย มาดูตัวอย่างกันครับ

roomkey-01

นี่เป็นเว็บ Roomkey ซึ่งเป็นเว็บที่ใช้ภาษาอังกฤษเป็นหลักในการแสดงผล ดังนั้นคำส่วนใหญ่ เราจะรู้ขนาดความยาวคงที่ การออกแบบก็จะง่าย และกำหนดขนาดของ Interface ได้อย่างลงตัวสวยงาม แต่ถ้าเกิดมีการแปลเป็นภาษาอื่นด้วยล่ะ เรามาดูที่บล็อคแผนที่กัน ผมจะลองแปลเฉพาะปุ่ม ‘View Map’ เป็นภาษาอื่นๆ ดูนะครับ

translate

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

translate-02ด้วย Interface นี้ แม้จะมีการแปลเป็นภาษาที่มีความยาวมาก ก็ยังคงความสวยงาม และเป็นระเบียบอยู่ อาจพูดได้ว่ามันเป็น Interface ที่มีความยืดหยุ่นสูงกว่าแบบแรกก็ได้ครับ

อีกเรื่องที่ต้องนึกถึงหากเว็บของเรารองรับการจ่ายเงินสกุลของประเทศเวียดนาม (ด็อง) หรือเกาหลี (วอน) เพราะด้วยเหตุผลเดียวกับการแปลภาษา Interface ที่ออกแบบต้องยืดหยุ่นพอที่จะรองรับการแสดงผลที่ยาวของหน่วยสกุลเงินเหล่านี้ครับ

ข้อมูลต่อไปนี้ อ้างอิงอัตราแลกเปลี่ยน ณ วันที่ 4 ก.ค. 2557 หากเราแลกเงิน 1,000 บาท เป็นเงินเวียดนามด็องหรือเกาหลีวอน เราจะได้เงินมา

1,000 บ. = 657,664 ด็อง  หรือ 1,000 บ. = 31,139 วอน

มาดูตัวอย่างหน้าเว็บ Kayak.com กันว่า เค้าแสดงผลข้อมูลราคากันอย่างไร

kayak-01

จะเห็นว่าราคาเปรียบเทียบที่เป็นสีน้ำเงินนั้น ได้เผื่อพื้นที่การแสดงผลจำนวนเงินได้มากสุด 6 หลัก (โดยประมาณ) ซึ่งโดยปกติแล้วหน่วยเงินในสกุลเวียดนามด็องจะมีอยู่ 7-8 หลัก สำหรับสินค้าราคา 2,000 บ. ขึ้นไป แต่เนื่องจากเว็บ Kayak.com ไม่ได้รองรับการจ่ายเงินด้วยสกุลเงินเวียดนามด็อง ปัญหานี้จึงไม่เกิด แต่ถ้าเราอยากจะแก้ปัญหานี้แล้วล่ะก็ เราก็ต้องยอมเสียพื้นที่การแสดงผลชื่อเว็บไซต์ทางด้านซ้ายให้แสดงผลด้วยจำนวนตัวอักษรที่น้อยลง และเพิ่มหลักการแสดงผลหน่วยสกุลเงินซึ่งมีความสำคัญกว่า

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

4. วิธีการอ่าน

languearabe2

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

translate-03

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

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

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

Interface เจลลี่ดึ๋งๆ

Previous article

เลเบลลอยล่ะล่อง

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *