คลังเก็บป้ายกำกับ: USER_INTERFACE

Netflix เผยวิธีจัดการภายใน เพื่อลดปัญหา UI เวลาแปลข้อความเป็นภาษาต่าง ๆ

Tim Brandall หัวหน้าทีม Internationalization ของ Netflix เขียนบล็อกเล่าถึงวิธีการจัดการภายใน ที่ทำให้การแสดงผลเนื้อหาบน Netflix ในภาษาต่าง ๆ แสดงผลได้ดีไม่เกิดตัวอักษรล้น UI ซึ่งเป็นเรื่องท้าทายหลังจาก Netflix ขยายตลาดไปสู่ 190 ประเทศ ทำให้การแสดงผลต้องเพิ่มจากภาษาอังกฤษภาษาเดียว ไปสู่ภาษาอื่นรวม 26 ภาษา

ปัญหาส่วนใหญ่ที่เจอคือในภาษาอื่นบนคำเดียวกัน จะมีความยาวตัวอักษรที่มากกว่าภาษาอังกฤษ บางภาษายาวมากกว่า 40% ตัวอย่างเช่นในภาษาเยอรมัน คำว่า Don’t miss out เมื่อแปลออกมาจะยาวมากเป็น Lassen Sie sich nichts entgehen พอนำไปใส่ในหน้าแอปจะเกิดการล้นหน้าจนอ่านไม่รู้เรื่องตามภาพด้านล่าง ซึ่งที่ล้นก็เพราะการออกแบบ UI แต่แรก คิดบนกรอบภาษาอังกฤษ แต่พอ Netflix จะต้องรองรับ 26 ภาษา เรื่องนี้จึงกลายเป็นปัญหา

alt="Netflix "

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

alt="Netflix"

ผลลัพธ์คำแปลที่ได้ออกมา มีลักษณะเพื่อให้ไปแก้ปัญหาโดยเฉพาะ โดยกำหนด […] เพื่อบอกจุดเริ่มต้นและสิ้นสุด แปลว่าการแก้ไข UI ต้องเห็นถึง ] ตัวสุดท้าย นอกจากนี้ยังแปลงเป็นตัวอักษรใน ASCII หรือภาษาอื่นที่กินพื้นที่ขึ้นไปด้านบนและด้านล่างด้วย (ตามตัวอย่าง จะเห็นภาษาไทยคำว่า กี้ ใช้ในการทดสอบนี้ด้วย) และสุดท้ายใช้วิธีขยายความยาวคำด้วยการใส่ one two three four แปลว่าขยายออก 40% เป็นต้น

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

ที่มา: Netflix Tech Blog

from:https://www.blognone.com/node/104528

Advertisements

ไมโครซอฟท์เปิดตัว Windows UI Library, เพิ่ม UI ใหม่ให้แอพ UWP โดยไม่ต้องอัพเดตระบบปฏิบัติการ

เมื่อปลายเดือนที่เพิ่งผ่านมา ไมโครซอฟท์ได้เปิดตัว Windows UI Library (WinUI) ชุดรวม UI สำหรับใช้พัฒนาแอพ UWP โดยมีจุดประสงค์เพื่อช่วยเพิ่มความยืดหยุ่นให้กับการสร้างแอพ UWP ให้รองรับ Windows 10 หลายเวอร์ชัน

นักพัฒนาจะสามารถเรียกใช้ XAML control บน WinUI เพื่อใช้สร้างส่วนติดต่อผู้ใช้ของแอพ ไม่ต่างอะไรกับการใช้ XAML control บน SDK มาตรฐานที่มากับ Windows 10 แต่ละเวอร์ชัน

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

โดยตัวไลบรารี WinUI จะมากับ XAML control ที่มีความเข้ากันได้กับ Windows 10 เวอร์ชันเก่า (backward-compatible) ย้อนไปถึง Anniversary Update (v1607) เลยทีเดียว

ภาพรายละเอียดเพคเกจ Windows UI Library จากเว็บ NuGet
No Description

การเปลี่ยนแปลงนี้ทำให้นักพัฒนาสามารถเพิ่มฟีเจอร์ให้กับแอพ UWP ด้วย UI แบบใหม่ (ซึ่งเดิมมาพร้อมกับ Windows 10 เวอร์ชันใหม่) ได้โดยไม่ต้องรอให้ผู้ใช้งานอัพเดต Windows 10 ตาม

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

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

ที่มา – Windows Blog via MSPoweruser

from:https://www.blognone.com/node/104519

ไมโครซอฟท์ปรับดีไซน์ Office ครั้งใหญ่ กลับสู่สามัญ ลดขนาด Ribbon เหลือแถวเดียว

ไมโครซอฟท์ประกาศปรับเปลี่ยนดีไซน์ UI ของ Microsoft Office ครั้งใหญ่ในรอบหลายปี การเปลี่ยนแปลงสำคัญเกิดขึ้นที่แถบเครื่องมือ Ribbon ที่ใช้มาตั้งแต่ Office 2007 โดยจะลดขนาดของ Ribbon ลงเพื่อเพิ่มพื้นที่แสดงผลบนหน้าจอ

Ribbon แบบใหม่เรียกว่า Simplified Ribbon จะมีพื้นที่เหลือแค่แถวเดียวเหมือนกับทูลบาร์ทั่วไป (จากเดิม 3 แถว) การเปลี่ยนแปลงจะเริ่มกับ Word, Excel, PowerPoint เวอร์ชันเว็บก่อนในวันนี้ (ผู้ใช้บางกลุ่มเริ่มได้ใช้แล้ว) จากนั้นจะตามมายัง Outlook for Windows ในเดือนกรกฎาคม

ไมโครซอฟท์บอกว่าสำหรับ Word, Excel, PowerPoint เวอร์ชันบนวินโดวส์ที่มีฟีเจอร์มากที่สุด จะยังใช้ Ribbon แบบเดิมไปก่อนเพราะผู้ใช้คุ้นเคย และผู้ใช้ทุกคนสามารถเปลี่ยนกลับไปใช้ Classic Ribbon ได้เสมอ

No Description

นอกจากการลดขนาด Ribbon แล้วการเปลี่ยนแปลงอื่นมีดังนี้

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

ที่มา – Microsoft

from:https://www.blognone.com/node/103082

หัวหน้าทีม Android บอก Navigation แบบใหม่ของ Android P ไม่ได้มาแทนปุ่ม Home

ฟีเจอร์ใหม่ของ Android P ที่ถูกพูดถึงกันมากคือ Navigation แบบใหม่ ที่เปลี่ยนจาก 3 ปุ่มมาตรฐาน ไปใช้ท่า gesture ปัดขึ้นแทน ประเด็นนี้เป็นที่ถกเถียงกันอย่างมาก ทั้งในโลกของผู้ใช้ Android เอง และในแง่ว่าลอก iPhone X หรือไม่

ผมมีโอกาสได้พูดคุยกับ David Burke หัวหน้าฝ่ายวิศวกรรม Android (คนที่ออกมาเดโม Android P) และได้ฟังเขาอธิบายถึงที่มาที่ไปในประเด็นนี้

No Description

David บอกว่าไม่อยากให้มองที่ท่า gesture อย่างเดียว แต่อยากให้ดู UI ที่เปลี่ยนไปด้วย ถ้ามองจากระบบ 3 ปุ่มด้านล่างในปัจจุบัน มันให้ความรู้สึกเหมือนเป็นประตู 3 บานที่พาเราไปยังสถานที่แตกต่างกัน หากเราเข้าหน้า Overview (รายการแอพ ปุ่มสี่เหลี่ยม) ก็เหมือนเข้าไปยังอีกโลกหนึ่งของมันเลย และถ้าเรากดปุ่ม Home ก็จะเหมือนออกจากโลกของ Overview ก่อน แล้วค่อยกลับมาเข้าหน้าโฮมใหม่อีกครั้ง

Navigation แบบใหม่ออกแบบมาเพื่อแก้ปัญหานี้ ให้ทุกประตูรวมเป็นหนึ่งเดียว เพราะทันทีที่เรา “ปัดขึ้น” เราจะเห็นทั้งหน้า launcher ของแอพที่ยังอยู่, แถบค้นหาก็ยังอยู่ แต่จะมีรายการแอพโผล่ขึ้นมาให้เห็นรวมกันในหน้าจอเดียว การสลับแอพจึงเป็นธรรมชาติมากขึ้น นอกจากนี้ แอพล่าสุดที่โผล่ขึ้นมาไม่ได้เป็นแค่ภาพ screenshot แต่เป็นแอพจริงๆ ซึ่งเราสามารถกดปุ่ม ลากข้อความได้เหมือนแอพปกติ (แค่ว่าแอพขนาดเล็กลงมา)

David ยังย้ำว่า Navigation แบบใหม่ไม่ได้มาแทนปุ่ม Home เพราะปุ่ม Home ที่เป็น soft button ก็ยังอยู่ที่ตำแหน่งเดิม ไม่ได้ตัดออกให้หายไปแบบ iPhone X แค่ว่าเปลี่ยนวิธีสั่งงานมันเท่านั้น

from:https://www.blognone.com/node/102190

ไมโครซอฟท์ออก Adaptive Cards เฟรมเวิร์คสำหรับแสดงผลข้อมูลรูปแบบการ์ดข้ามแพลตฟอร์ม

ในงาน Windows Developer Day ที่เพิ่งผ่านมา ไมโครซอฟท์ได้ประกาศออก Adaptive Cards เวอร์ชัน 1.0 เฟรมเวิร์คสำหรับแสดงผลข้อมูลในรูปแบบการ์ดซึ่งสามารถใช้งานข้ามแพลตฟอร์มได้

Adaptive Cards เปิดตัวครั้งแรกในงาน Microsoft Build 2017 มีจุดประสงค์เพื่ออำนวยความสะดวกให้กับนักพัฒนาที่ต้องการแสดงผลข้อมูลต่างๆ ในรูปแบบการ์ดภายในผลิตภัณฑ์ของไมโครซอฟท์ อย่าง Windows notifications / Timeline, Bot Framework ไปจนถึง Cortana

No Description

โดยมีหลักการคือเฟรมเวิร์ค Adaptive Cards จะเป็นมาตรฐานกลาง ที่จะช่วยให้นักพัฒนาสามารถนำข้อมูลที่ต้องการไปเรนเดอร์เป็นการ์ดบนแอพต่างๆ ได้โดยง่ายเพียงแค่จัดข้อมูลให้อยู่ในฟอร์แมท JSON เมื่อแอพที่รองรับ Adaptive Cards ดึง JSON ที่เตรียมไว้มาแสดงผลก็จะเรนเดอร์ข้อมูลออกมาเป็นการ์ดที่มีดีไซน์สอดคล้องกับ UX และแบรนด์ของแอพนั้นๆ ให้เอง

No Description

ภาพจากวิดีโอ Keynote ในงาน Windows Developer Day (เนื้อหาในส่วนของ Adaptive Cards เริ่มต้นที่ประมาณนาทีที่ 10:10)

และในโอกาสเดียวกันไมโครซอฟท์ยังได้ปล่อย SDK ให้นักพัฒนานำ Adaptive Cards ไปใช้ภายในแอพของตัวเองอีกด้วย โดยในขณะนี้ SDK ดังกล่าวรองรับทั้ง JavaScript, Android, iOS, UWP และ .NET

ตัวโปรเจ็กต์ Adaptive Cards เป็นโครงการโอเพ่นซอร์สมาตั้งแต่ต้น นักพัฒนาท่านสนใจนำไปใช้งานสามารถเข้าไปศึกษาต่อได้ที่ GitHub และที่เว็บ AdaptiveCards.io ครับ

No Description

ภาพตัวอย่างการใช้ Adaptive Cards บนแฟลตฟอร์มต่างๆ จากเว็บ AdaptiveCards.io

ที่มา – AdaptiveCards.io, Adaptive Cards GitHub, Windows Developer Blog

from:https://www.blognone.com/node/100492

โปรแกรมปรับแต่ง Start Menu ชื่อดัง Classic Shell ยุติการพัฒนาพร้อมประกาศเปิดซอร์ส

Classic Shell โปรแกรมปรับแต่ง Start Menu สำหรับระบบปฏิบัติการ Windows ซึ่งเป็นที่นิยมในหมู่ผู้ใช้ที่ยังต้องการ Start Menu ในแบบเดิมๆ ที่คุ้นเคย ประกาศยุติการพัฒนาแล้ว

ทาง Ivo Beltchev ผู้พัฒนาได้ให้เหตุผลของหยุดพัฒนาไว้บนฟอรั่มว่าเขาต้องการใช้เวลาว่างกับงานอดิเรกอื่นๆ การที่ต้องตามอัพเดต Classic Shell ให้สามารถใช้งานกับ Windows 10 รุ่นใหม่ที่ออกอัพเดตใหญ่ถึงปีละสองครั้งนั้นกลายเป็นงานที่หนักเกินไปสำหรับเขา

โดยเฉพาะอย่างยิ่งเมื่อ Windows เวอร์ชันใหม่ๆ มีการเปลี่ยนแปลงโมเดลการพัฒนาที่ฉีกไปจากเขียนโปรแกรม Win32 แบบเดิม งานของ Ivo ก็ยิ่งทวีความยากขึ้นอย่างมาก

นอกจากนี้ Ivo ยังได้ตัดสินใจเปิดซอร์สโค้ดของ Classic Shell ทั้งหมดไว้บน SoureForge และ GitHub เพื่อสนับสนุนเกิดการ fork และพัฒนาต่อโดยผู้อื่นอีกด้วย

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

ที่มา – MSPoweruser

ภาพตัวอย่าง Start Menu ที่ถูกปรับแต่งด้วย Classic Shell

No Description

from:https://www.blognone.com/node/98604

Sets ฟีเจอร์ใหม่ Windows 10 เปิดหลายโปรแกรมในหน้าต่างเดียวกัน แยกคนละแท็บ

ไมโครซอฟท์โชว์ฟีเจอร์ใหม่ของ Windows 10 โดยยังมีชื่ออย่างไม่เป็นทางการว่า “Sets” มันคือการรวมแอพหลายๆ ตัววไว้ในหน้าต่างเดียวกันผ่านอินเทอร์เฟซแบบ “แท็บ” ที่เราคุ้นเคย

ในตัวอย่างของไมโครซอฟท์เริ่มต้นจากการเปิดเอกสาร Word ขึ้นมาตามปกติ จากนั้นเปิดแท็บใหม่ขึ้นมาในหน้าต่างเดียวกัน ในแท็บมีไอคอนให้เราเลือกเปิดโปรแกรม-เอกสารอื่นบน OneDrive จากนั้นก็เปิด OneNote, Edge, PowerPoint ขึ้นมาตามลำดับ (อธิบายเป็นข้อความอาจยากหน่อย ดูวิดีโอเข้าใจง่ายกว่าครับ)

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

No Description

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

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

ที่มา – Windows Insider

from:https://www.blognone.com/node/97654