วิธีสร้าง UI เริ่มต้นของ Firefox ที่ดีกว่า

• Proton UI ของ Firefox v89 หลังเปิดตัวในปี 2021 ได้ก่อให้เกิดข้อถกเถียงเกี่ยวกับแท็บ ระยะขอบ และไอคอน และ Firefox-UI-Fix ซึ่งเป็นธีมที่ปรับปรุงจุดเหล่านี้ ก็ถูกนำไปใช้กับธีมเริ่มต้นของ Waterfox และ Floorp ด้วย
• การตัดสินใจด้านการออกแบบไม่ได้อาศัย A/B testing แต่พึ่งพาทฤษฎีและกรณีศึกษาด้าน UX เช่น Jakob’s Law, จิตวิทยา Gestalt, Fitts’s Law และงานวิจัยของ Nielsen Norman Group
• แท็บที่ดูเหมือนปุ่ม padding ที่กว้าง และเมนูที่เน้นข้อความ อาจทำให้การรับรู้สถานะที่เลือก ประสิทธิภาพการคลิก การแสดงเนื้อหาบนหน้าจอขนาดเล็ก และ accessibility ลดลง
• Lepton Theme แสดงสถานะของแท็บอย่างสอดคล้องกันภายในช่วง 36px~240px และปรับปุ่มปิด ไอคอน padding สีของธีม และพื้นที่ title bar แยกตาม OS
• เป้าหมายไม่ใช่การปฏิเสธ Proton UI แต่เป็นการ ปรับปรุงโดยเคารพ Proton UI และยังมีบางส่วนที่ทำได้ยากเนื่องจากข้อจำกัดของ CSS เช่น พฤติกรรมของ page action button

---

ข้อถกเถียงเรื่อง UI หลัง Firefox v89 และขอบเขตของโปรเจกต์

• เอกสารนี้เน้น UI ตาม Firefox v89 เป็นหลัก โดยตั้งสมมติฐานว่าหลังจากนั้นมีการปรับปรุงบางส่วนแล้ว
• หลัง Firefox v89 เปิดตัวในปี 2021 ข้อถกเถียงเกี่ยวกับ Proton UI เกิดขึ้นอย่างมากบน Reddit และ Hacker News
• repository Firefox-UI-Fix ได้รับความนิยมอย่างรวดเร็วจากการปรับปรุงปัญหาหลายอย่างของ Proton UI และ Waterfox กับ Floorp ก็ใช้ธีมนี้เป็นค่าเริ่มต้นด้วย
• Mozilla ตัดสินใจยุติการรองรับ Windows 7 และ Windows 8 โดย Firefox v115 เป็นเวอร์ชันสุดท้ายที่รองรับ Windows รุ่นเก่า
  • Firefox v115 มีกำหนดให้บริการจนถึงเดือนกันยายน 2024
  • ทั้ง Mozilla และโปรเจกต์จำเป็นต้องจัดระเบียบโค้ดและฟีเจอร์ที่เกี่ยวข้องกับ Windows รุ่นเก่า และเอกสารนี้จึงกล่าวถึง UI ของ Windows รุ่นเก่าด้วย

เกณฑ์ในการตัดสิน UI/UX

• เกณฑ์การออกแบบสรุปได้เป็นสามอย่างใหญ่ ๆ คือ ความเป็นธรรมชาติในการใช้งาน, ประสิทธิภาพ และ ความยืดหยุ่น
• เนื่องจากไม่มีข้อมูลหรือสภาพแวดล้อมที่จำเป็นสำหรับ A/B testing จึงคาดการณ์พฤติกรรมผู้ใช้และใช้ทฤษฎีหลายแขนงเพื่อตัดสินแบบนิรนัย

• ความเป็นธรรมชาติในการใช้งาน

  • Simplicity: ลดภาระทางการรับรู้ด้วยการตัดองค์ประกอบที่ไม่จำเป็นออกหรือทำให้เรียบง่ายขึ้น
  • Visibility: ทำให้ฟังก์ชันหลักมองเห็นได้ เพื่อให้ใช้งานได้ง่าย
  • Accustomably: ลดสิ่งที่ต้องเรียนรู้เพื่อให้ปรับตัวได้เร็ว
  • Consistency: ลดข้อยกเว้นเพื่อให้จดจำได้ง่าย
  • Predictability: ลดความกังวลด้วยการทำให้ผู้ใช้รู้สึกว่าควบคุมได้
  • Affordance: ให้เบาะแสเกี่ยวกับวิธีใช้งาน

• ประสิทธิภาพ

  • Clearly: ต้องรับรู้ความแตกต่างได้ชัดเจน
  • Proximal: ต้องอยู่ใกล้พอให้เลื่อนไปหาได้รวดเร็ว
  • Bulky: ขนาดที่ใหญ่ช่วยให้รับรู้หรือเลื่อนไปหาได้ง่ายขึ้น
  • Snappy: ต้องตอบสนองอย่างลื่นไหลและไม่สะดุด

• ความยืดหยุ่น

  • Accessibility: รองรับผู้ใช้ในวงกว้างโดยไม่ขึ้นกับอายุ ความพิการ ฯลฯ
  • Functional: รองรับฟังก์ชันหลากหลายเพื่อให้ตอบสนองความต้องการได้
  • Contextual: ต้องอยู่ในแต่ละสถานการณ์อย่างเป็นธรรมชาติ
  • Harmonious: ต้องเข้ากับองค์ประกอบแต่ละส่วนอย่างเป็นธรรมชาติ
  • Pleasure: มุ่งให้เกิดความพึงพอใจเพื่อความสนุกหรือความสร้างสรรค์
  • Compatibility: คำนึงถึง API เวอร์ชันต่ำ roadmap เวอร์ชันสูง upstream, OS, RTL ฯลฯ

สามประเด็นที่มองว่าเป็นปัญหาใน Proton UI

• ความประทับใจแรกของ Firefox v89 Developer Edition คือดูสะอาดตา แต่ในการใช้งานจริงมองว่ามีความไม่สะดวกมาก
• ปัญหาหลักสรุปได้เป็นสามข้อ
  • Tab: แท็บดูเหมือนปุ่ม
  • Padding: ระยะขอบกว้างเกินไป
  • Icons: อ่านได้ยากเมื่อมีแต่ไอคอน หรือการเอาไอคอนออกก่อให้เกิดปัญหาอื่น

ปัญหาของแท็บที่ดูเหมือนปุ่ม

• สมดุลระหว่างความคุ้นเคยกับการเปลี่ยนแปลง

  • ตาม Jakob’s Law ผู้ใช้คาดหวังว่าแอปใหม่จะทำงานเหมือน UX ที่ตนรู้อยู่แล้ว
  • UI แท็บใหม่ของ Firefox ดูขัดกับความคาดหวังนี้ ทำให้ปรับตัวได้ยาก
  • อย่างไรก็ตาม หากขัดขวางการเปลี่ยน UI เพียงเพราะไม่คุ้นเคย ก็อาจขัดขวางพัฒนาการและทำให้เป็นเพียงการตามเทรนด์
  • อาจเป็นผู้ตามที่รวดเร็วได้ แต่ต้องระวังไม่ให้ขัดขวางนวัตกรรม

• การรับรู้แท็บจากมุมมองจิตวิทยา Gestalt

  • จิตวิทยา Gestalt ถูกใช้เพื่ออธิบายว่าทำไมแท็บจึงให้ความรู้สึกเหมือนเป็นกลุ่มอื่น
  • Law of Proximity: แท็บอยู่ห่างจาก toolbar จึงรู้สึกเหมือนเป็นคนละกลุ่ม
  • Law of Similarity: แท็บมีสีต่างจาก toolbar จึงดูเหมือนเป็นคนละกลุ่ม

• แท็บแบบปุ่มที่ Safari ย้อนกลับ

  • Apple ประกาศเบราว์เซอร์ Safari ใหม่ของ macOS 12 Monterey ที่ WWDC
  • เมื่อผู้ใช้ไม่พอใจมากขึ้น จึงเสนอทางประนีประนอมสำหรับแท็บที่ดูเหมือนปุ่มใน Beta 3
    • macOS Monterey Beta 3: Apple Redesigns Safari Tab Interface Following Complaints
    • macOS Monterey beta 3 brings redesigned Safari tab interface to address complaints
  • ทางประนีประนอมก็ล้มเหลวเช่นกัน และสุดท้าย Apple ย้อนกลับไปใช้ดีไซน์แท็บแบบคลาสสิกทั้งหมด
    • Apple Releases Safari 15.1 for macOS Big Sur and macOS Catalina
    • Apple reverts to more traditional Safari tab design in macOS Monterey RC following controversy
  • ไม่ได้หมายความว่า Apple ถูกต้องเสมอไป แต่เมื่อพิจารณาว่าเรื่องนี้ไปไกลถึงขั้นยากจะย้อนกลับหลายครั้ง button-like tab จึงเป็นสิ่งที่ถูกวิจารณ์ได้

ลบพื้นที่ว่างและไอคอนที่มากเกินไป

• พื้นที่ว่างและการมองเห็นคอนเทนต์

  • เว็บเบราว์เซอร์เป็นตัวแสดงคอนเทนต์เว็บ จึงไม่ควรรบกวนการแสดงคอนเทนต์
  • Proton UI เสียเปรียบด้านการแสดงคอนเทนต์เพราะมี padding มาก
  • บนอุปกรณ์จอเล็กอย่างโน้ตบุ๊ก 13 นิ้ว ปัญหานี้ถือว่าร้ายแรง

• ประสิทธิภาพการคลิกในมุมมองของ Fitts’s Law

  • Fitts’s Law มองว่าเวลาที่ต้องใช้ในการเคลื่อนที่ไปยังพื้นที่เป้าหมายอย่างรวดเร็วขึ้นอยู่กับอัตราส่วนระหว่างระยะทางไปยังเป้าหมายกับความกว้างของเป้าหมาย
  • สมการหลักคือ MT = a + b · ID = a + b · log₂(2D/W)
  • MT คือเวลาเฉลี่ยในการเคลื่อนที่ให้เสร็จสิ้น, a และ b คือค่าคงที่ตามอุปกรณ์อินพุตที่เลือก, ID คือดัชนีความยาก
  • D คือระยะทางจากจุดเริ่มต้นถึงกึ่งกลางของเป้าหมาย, W คือความกว้างของเป้าหมายที่วัดตามแกนการเคลื่อนที่
  • หากตัดค่าคงที่และลอการิทึมออก อัตราส่วน 2D/W คือสิ่งสำคัญ
  • ก่อนอื่นต้องลดระยะทาง และเพิ่มความกว้างให้มากที่สุดโดยไม่ทำให้ระยะทางเพิ่มขึ้น
  • ต้องป้องกันไม่ให้ padding ใหญ่เกินไปจากการเติมพื้นที่ว่างที่เหลือด้วย
  • Photon(v88) ถูกประเมินว่าเป็น UI ที่กดได้ง่ายกว่าที่ไอคอน Amazon และเมนู
    • ไอคอน Amazon มี W ใหญ่กว่า
    • เมนูมี W เล็กกว่าเล็กน้อย แต่ D เล็กกว่ามาก
  • หากไอคอนดูเล็กกว่าพื้นที่คลิกจริงจะเกิดความเสียเปรียบ ดังนั้นควรเติมพื้นที่ padding ให้ไอคอนดูใหญ่ขึ้น

• ปัญหาที่ความแตกต่างของ Compact UI แทบหายไป

  • Mozilla ได้ ยกเลิกการสนับสนุน compact UI
  • มองว่า Compact UI, Normal UI, Touch UI ใน v89 ต่างกันเพียงความสูงของแถบแท็บและ toolbar เล็กน้อย จนแทบไม่มีความหมาย

• UI ที่มีแต่ข้อความและการเข้าถึง

  • เมื่อดู Content design considerations for the new Firefox ของ Mozilla แล้วเกิดคำถามว่าการเอาไอคอนออกเป็นทางเลือกที่ดีหรือไม่
  • งานวิจัยเรื่องไอคอนของ Nielsen Norman Group สรุปว่ารูปแบบที่มีแต่ข้อความให้ผลลัพธ์แย่ที่สุด
  • UI ใหม่ของ Chrome ที่ออกมาในปี 2023 ก็มีไอคอนด้วย

การออกแบบแท็บใหม่ของ Lepton Theme

• แสดงสถานะแท็บอย่างสอดคล้องกัน

  • การออกแบบแท็บไม่ใช่แค่เรื่องรูปร่าง แต่เป็นปัญหาที่ต้องจัดการหลายสถานะ
  • แท็บอาจมีสถานะดังต่อไปนี้
    • Selected, Multiple Selected, Hover, Text overflow, Tab overflow, Reaching tab resizing
    • Sound & Muted, Autoplay Block, PIP, Pinned, Container, No favicon
    • Changed title, Loading, Unloaded, Crashed, Shared, Theme, UI Density ฯลฯ
  • สถานะเหล่านี้ต้องแสดงอย่างสอดคล้องกันภายใน 36px~240px

• เปรียบเทียบสถานะที่ถูกเลือกของ Photon, Proton, Lepton

  • Photon และ Lepton ทำให้รู้ได้ง่ายเพราะแท็บที่ถูกเลือกเชื่อมต่อกับ toolbar
  • Lepton ทำให้ตัวบ่งชี้ Container ของแท็บพื้นหลังสั้นลง เพื่อลดความแน่นเกินไปทางสายตา
  • Proton แยกได้ยากว่าแท็บใดถูกเลือก ระหว่างสีพื้นหลังที่ถูกเน้นกับแถบบน
  • แถบบนเป็นตัวบ่งชี้แท็บ Container แต่ให้ความรู้สึกคล้ายกับแท็บที่ถูกเลือกของ UI เดิมอย่าง Photon
  • การเปรียบเทียบสถานะ Selected, Multiple selected, Hovered, General สรุปได้ดังนี้
    • Photon รับรู้ Selected ได้จากการเชื่อมกับ toolbar และแยก Multiple selected กับ Hovered ด้วยสีของเส้น context ด้านบน
    • Proton ทำให้ Selected กับ Multiple selected ดูแทบเหมือนกัน
    • Lepton แยกสถานะด้วยการเชื่อมกับ toolbar และสีพื้นหลังที่ต่างกัน

• สถานะผสม เช่น ปิดเสียง, PIP, แท็บปักหมุด

  • การผสมกันของ Muted, Hover, PIP มีความแตกต่างกันมากในแต่ละเบราว์เซอร์
    • Photon แยก Muted กับ Muted + Hover ไม่ออก และถ้ามีตัวบ่งชี้ PIP ตำแหน่งของ Muted จะเปลี่ยนไปมาก
    • Proton English แสดง Muted ด้วยข้อความเท่านั้น และรู้ได้ว่ามี PIP เฉพาะในสถานะ hover
    • Proton Korean ทำให้ UI แตกต่างตามภาษาที่แสดง, Muted ซ่อน favicon และไม่ได้ตัวบ่งชี้ PIP
    • Lepton แสดงข้อมูลทั้งหมด รักษาตำแหน่งของ Muted และ PIP ให้คงที่ และส่งสัญญาณว่าเมื่อ hover แล้วสามารถควบคุมได้
  • ในการผสมที่ซับซ้อนยิ่งขึ้น มองว่า Proton แทบใช้งานได้ยากในสภาพแวดล้อมภาษาเกาหลี
  • Lepton จัดการสถานะผสมด้วยวิธีต่อไปนี้
    • แสดงข้อมูลทั้งหมดเสมอ
    • หากไม่มี favicon จะเพิ่มขนาด Muted ให้ใช้แทน
    • แม้ในสถานะ Pinned ก็รักษาตำแหน่งให้เหมือนเดิมเสมอ
    • หากตำแหน่งซ้อนกัน เช่น Container กับ Titlechanged จะแสดงโดยรวมเข้าด้วยกัน

• การใช้พื้นที่ตามความกว้างของแท็บ

  • Lepton ปรับพฤติกรรมตามความกว้างของแท็บ
  • เมื่อมีความกว้างเพียงพอ จะแสดงปุ่มปิดทั้งหมดเหมือน Proton
  • เมื่อแท็บเต็มจนความกว้างไม่พอ จะซ่อนปุ่มปิดของแท็บพื้นหลัง
  • ลดขนาดปุ่มปิดเพื่อลดการคลิกผิด แต่ยังสามารถปิดได้เมื่อ hover บนแท็บพื้นหลัง
  • ชื่อแท็บปรับ padding และ gradient เพื่อให้ดูมีประสิทธิภาพขึ้น
  • ประหยัดพื้นที่เพื่อให้เห็นข้อความ New ในแท็บสุดท้าย
  • ปรับเฉพาะเมื่อความกว้างไม่พอ เพื่อให้เห็นคำว่า wiki ได้ชัดเจน
  • Lepton แสดงคอนเทนต์เว็บได้มากขึ้น และ Photon กับ Lepton มีเส้นแบ่งแท็บ

• รูปแบบการแจกจ่ายและรสนิยม

  • มาตรฐานของ UI ที่ดีแตกต่างกันไปในแต่ละคน และในระดับหนึ่งเป็นเรื่องของ รสนิยม
  • มีแนวคิดแท็บให้ 3 แบบ
    • แท็บ Lepton แบบปกติที่ปรับให้เข้ากับ Proton
    • แท็บ Photon ที่มีเส้น context มุมฉาก
    • แท็บ Proton ดั้งเดิม
  • ธีมนี้เป็นที่รู้จักเป็นพิเศษจากการรองรับ Photon tab UI

การปรับไอคอนและ padding

• Panel และ context menu

  • ลดข้อร้องเรียนเดิมด้วยการเพิ่มไอคอนและปรับ padding
  • ประเด็น unbalanced strokes ได้รับการแก้ไขโดยผู้ร่วมพัฒนา @zapSNH ทำให้มีชุดไอคอนที่สอดคล้องและจดจำได้ทั่วทั้งเบราว์เซอร์

• เปรียบเทียบเมนูของ Edge, Chrome, Lepton

  • Edge มีเมนูที่เว้นไอคอนว่างไว้โดยไม่มีเหตุผลพิเศษ และไอคอนโดยรวมคล้ายกันมากเกินไปจนกวาดตามองได้ยาก
  • มองว่า metaphor ของไอคอน Edge บางรายการ เช่น New InPrivate window ทำให้สับสน
  • Chrome มีสไตล์ไอคอนที่ไม่ทันสมัย เป็นเหลี่ยมเมื่อเทียบกับ UI ทรงมน และไอคอนดูเล็กเกินไปเมื่อเทียบกับขนาดตัวอักษร
  • Lepton ให้ชุดไอคอนที่สอดคล้องกัน มีสไตล์ทันสมัยและขนาดเหมาะสม
  • ใช้ไอคอนแบบเติมสีเฉพาะกับไอคอนสำคัญเพื่อเพิ่มความสามารถในการกวาดตามอง และใช้ metaphor ที่แยกรูปลักษณ์ออกจากกันได้

• Context menu และกลุ่ม shortcut

  • มองว่าไม่ทราบเหตุผลที่ Edge ไม่มีไอคอนให้ Add all tabs to favorites
  • Chrome ไม่มีไอคอนใน context menu เลย
  • Lepton วางไอคอนให้แยกแยะได้ชัดเจน
  • ใน context menu ของหน้าเว็บ มีเพียง Firefox ที่วางกลุ่ม shortcut ไว้ด้านบน ทำให้ได้เอฟเฟกต์เข้าถึงเร็วคล้าย pie menu

• ใช้ไอคอนมากขึ้น

  • เพิ่มไอคอนในเมนู global และ panel ต่าง ๆ
  • เมื่อโฟลเดอร์ในคลังบุ๊กมาร์กถูกเปิด ไอคอนเมนูก็ตอบสนองด้วย
  • ขนาดเมนูและ panel เล็กลง และตำแหน่งเริ่มต้นของข้อความถูกจัดให้อยู่แนวเดียวกัน
  • เพิ่มไอคอนให้เข้ากับกรณี layout หลายแบบ

การรองรับ OS, ธีม และสี

• ธีมเริ่มต้นของระบบ

  • Lepton ปรับ UI ให้เข้ากับ OS และการตั้งค่าที่แตกต่างกัน
    • Windows 7: ทำตามดีไซน์หน้าต่าง Aero ให้ใกล้เคียง
    • Windows 8.1: ทำให้แถบชื่อหน้าต่างเข้ากันได้ดีเหมือน Windows 7
    • Windows 10 Light: ทำตามสี Legacy Edge ของ Windows 10
    • Windows 10 Dark: ใช้มาตรฐานเดียวกัน
    • Windows 10 Dark + Accent titlebar: หากเปิดการตั้งค่าสีเน้นของแถบชื่อหน้าต่าง ก็จะทำตามค่านั้น
    • MacOS Light/Dark: ทำตามสีของ Mac
  • ผู้ใช้ Windows 11 สามารถใช้ตัวเลือก userChrome.compatibility.os.win11 เพื่อใช้สี Windows 11 ที่คล้ายกับ Edge ได้
  • ใช้งานได้บน Linux ด้วย และแก้ปัญหาสีรวมถึงปัญหาปุ่มแถบชื่อหน้าต่างที่ไม่ใช่แบบเนทีฟ

• พื้นที่ปุ่มแถบชื่อหน้าต่าง

  • ในกรณีอย่าง Tabs on bottom หรือ One Liner ต้องเผื่อพื้นที่ปุ่มแถบชื่อหน้าต่างไว้ภายในทูลบาร์
  • ค่าและตำแหน่งแตกต่างกันตาม OS
    • Win7, Win8: 105px, ด้านขวา
    • Win10: 138px, ด้านขวา
    • Mac: 72px, ด้านซ้าย
    • Linux: 84px และอาจแตกต่างกันตามธีมของระบบ
  • ในโหมดเต็มหน้าจอจะใช้ UI แบบเนทีฟ จึงต้องจัดการเป็น 0px
  • รองรับได้ทั้งด้านซ้ายและด้านขวา และปุ่มอาจมีสามปุ่มหรือไม่ก็ได้

• การเสริมธีม Proton

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

การโต้ตอบและแอนิเมชัน

• การโต้ตอบที่ช่วยบอกใบ้

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

• การออกแบบแอนิเมชัน

  • แอนิเมชันทำให้ UI นุ่มนวลและเป็นธรรมชาติมากขึ้น แต่บางครั้งก็ทำให้รู้สึกว่าการทำงาน ช้า
  • เกณฑ์การออกแบบมีดังนี้
    • ทำตาม easing curve ของ Photon โดยเร่งความเร็วอย่างรวดเร็วในช่วงต้น และชะลออย่างนุ่มนวลในช่วงท้าย
    • ลดระยะเวลาแอนิเมชันเริ่มต้น เพื่อให้รู้สึกว่าตอบสนอง รวดเร็ว
    • เพิ่มระยะเวลาแอนิเมชันสิ้นสุด เพื่อให้รู้สึก นุ่มนวล
    • วัตถุขนาดใหญ่มีระยะเวลานานกว่าวัตถุขนาดเล็ก
    • ระยะเวลาภายในวัตถุที่ซ้อนกันก็ควรยาวขึ้นด้วย
  • ใช้หลักการเดียวกันกับสีพื้นหลัง การหมุนลูกศร แท็บคอนเทนเนอร์ เสียงและแท็บที่ปักหมุด รวมถึงแถบด้านข้าง
  • ใช้หลักการเดียวกันกับฟีเจอร์ทางเลือกที่ไม่ใช่ค่าเริ่มต้นด้วย
    • Autohide Back Button
    • Autohide Page Action
    • Autohide Tab Bar

• การกู้คืนภาพประกอบ

  • มองว่า ภาพประกอบที่เป็นมิตรของ Photon ช่วยลดความสับสนเมื่อเกิดสถานการณ์ผิดพลาด
  • ธีมนี้กู้คืนภาพประกอบเหล่านั้น
  • ตัวอย่างการนำไปใช้คือหน้าจอ Welcome back, DNS error, Session restore และ Search result

สรุปและข้อจำกัด

• ธีมนี้คำนึงถึงธรรมเนียมปฏิบัติ จิตวิทยา และผลการวิจัย พร้อมสืบทอดจุดแข็งของธีมเดิม
• รองรับ OS, ดาร์กโหมด, ธีมคัสตอม และการโต้ตอบตามบริบท
• เนื่องจากข้อจำกัดของ CSS จึงมีบางอย่างที่ไม่สามารถทำได้ เช่น page action button behavior
• เป้าหมายคือ “🦊 I respect proton UI and aim to improve it.”

[GN⁺]

ความคิดเห็นจาก Hacker News

• สิ่งที่ไม่สะดวกที่สุดใน UI ใหม่คือ ทุกอย่างใหญ่เกินไป
  ถ้าเป็นหน้าจอโทรศัพท์ที่ต้องกดด้วยนิ้วก็พอเข้าใจได้ แต่สำหรับเดสก์ท็อปทั่วไปถือว่าเปลืองพื้นที่มาก
  สาเหตุมาจากการเพิ่ม padding ตามที่บทความพูดถึงก็จริง แต่การเอาตัวเลือก compact UI density ออกก็มีผลมากเช่นกัน
  สามารถเปิด browser.compactmode.show ใน about:config แล้วไปที่ เมนู > เครื่องมือเพิ่มเติม > ปรับแต่งแถบเครื่องมือ > “density” ด้านล่าง เพื่อกลับมาใช้ได้อีกครั้ง
  ถึงตัวเลือกจะมีป้ายว่า “not supported” แต่ก็เป็นแบบนั้นมาหลายปีแล้ว

  • ผมชอบอินเทอร์เฟซที่มี padding กว้าง ๆ มากกว่าเยอะ
    เมื่อมี padding เพียงพอ จะช่วยลดความรกทางสายตาและความซับซ้อน ทำให้องค์ประกอบต่าง ๆ มีพื้นที่หายใจ
    อาจไม่มีข้อดีเชิงปฏิบัติที่ชัดเจน แต่แค่มองดูก็รู้สึกกังวลน้อยลง
  • ฝั่งหนึ่งก็บอกว่า “อย่าเปลืองพื้นที่ด้วย padding” ขณะที่ทุกครั้งที่พูดถึง KDE ก็จะมีคนบอกว่า “มันยัดข้อมูลกับข้อความแน่นเกินไปจนอ่านยากเพราะไม่มี padding”
    ทำก็โดนด่า ไม่ทำก็โดนด่า
  • สงสัยว่ามีใครรู้เบื้องหลังไหมว่าทำไมถึงติดป้ายว่า “not supported”
  • นั่นแหละคือปัญหาของผม เดี๋ยววันนี้จะลองใช้แฟล็กนั้นดู
  • “not supported” ดูเหมือนเป็นการ ประชด คนที่วิจารณ์ทางเลือกการออกแบบที่ “ทันสมัย”

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

  • https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
  • สงสัยว่าจะหา Lepton ได้จากที่ไหน
    ค้นในหมวดธีมของร้านส่วนเสริมแล้วก็ไม่เจออะไรในชื่อนั้นเลย
    หรือว่า Lepton เป็น UI Firefox แบบเก่า เลยเหลืออยู่แค่ในรีลีสเก่า ๆ ก็ไม่แน่ใจ
    ผมอ่านบทความแล้ว แต่อาจพลาดอะไรบางอย่างไป
  • ปกติแล้วผมจะไม่ค่อยปรับแต่ง UI มากนัก และพยายามชินกับค่าเริ่มต้นไปเลย
    เพราะมันเสียดทานน้อยกว่า และดีที่พอติดตั้งเสร็จก็ปรับตัวเข้ากับค่ามาตรฐานได้ทันที
    แต่การปรับแต่ง UI ของ Firefox เป็นข้อยกเว้น เพราะ ตั้งค่าง่ายและคุณภาพก็ดี
    ความรู้สึกว่ามีการดูแลรักษาอยู่ก็เป็นข้อดีสำคัญเหมือนกัน
    ไม่รู้มาก่อนว่าเขาเขียนเรื่องนี้ต่อเนื่องมายาวขนาดนี้ ดูน่าสนใจและเอกสารก็ดูดีมาก เลยคิดว่าจะลองอ่านดู
  • น่าสนใจเป็นพิเศษที่มีการใช้ telemetry มาอ้างความชอบธรรมในการลบองค์ประกอบของอินเทอร์เฟซ
    ส่วนตัวผมรู้สึกว่าแถบที่อยู่ใหญ่เสียจนเหมือนจะใส่ปุ่มได้อีก 10 ปุ่มแล้วยังเหลือที่
    เพราะงั้นนอกจากเหตุผลว่าอยากลบทุกอย่างออกไปจนไม่มีอะไรให้ลบแล้ว ก็แทบจินตนาการไม่ออกว่าทำไมถึงต้องเอาองค์ประกอบออกอีก
    ดูเหมือนคุณจะรู้เรื่อง UI/UX ดี เลยมีคำถามว่า ผมมีทฤษฎีว่า ไอคอนขาวดำ แย่กว่าไอคอนสี อยากรู้ว่ามีงานวิจัยหรือฉันทามติอะไรเกี่ยวกับเรื่องนี้ไหม
  • ขั้นตอนการติดตั้งง่ายมาก
    แต่แนะนำให้เรียบเรียงขั้นตอนพื้นฐานไว้ก่อน แล้วค่อยย้ายส่วนขั้นสูงลงไปไว้ด้านล่างทั้งหมด

    1. รันสคริปต์จากบรรทัดคำสั่งของ OS  
    2. ไปที่ `about:support` แล้วคลิกเพื่อล้าง startup cache  
    

• พูดแบบแรง ๆ เลยว่า UX เบราว์เซอร์ที่ดีกว่าควรเริ่มจาก แท็บแนวตั้ง
  แท็บแนวนอนพอเปิดแค่ 6–8 แท็บก็เริ่มจัดการและติดตามได้ยากแล้ว
  ในแท็บซ้อนแนวตั้ง ลิงก์ที่เปิดเป็นแท็บใหม่จะกลายเป็นแท็บลูกโดยอัตโนมัติ ทำให้อนุมานโครงสร้างและบริบทได้ง่ายกว่าแท็บแนวนอนมาก
  ถ้าเพิ่มสีแยกตามเว็บไซต์เข้าไปอีก ก็จะมองเห็นกลุ่มแท็บได้ชัดขึ้น และยังบุ๊กมาร์กต้นไม้แท็บไว้เพื่อเก็บความคืบหน้าของงานค้นคว้าหรือทำเอกสารได้ด้วย
  ไฟล์ CSS และสกรีนช็อตบางส่วนอยู่ที่นี่: https://gist.github.com/aclarknexient/88673880d373864eee1927...
  ต้องเพิ่มสกรีนช็อตของแท็บซ้อนที่มีสีด้วย เลยจะใส่หลังจากโพสต์คอมเมนต์นี้

  • ฉันชอบแท็บแนวตั้ง และมันมีข้อดีมากกับวิธีท่องเว็บของฉันที่สลับไปมาระหว่างงานระยะยาวหลายอย่าง
    แท็บเหมาะกับการใช้งานแบบนี้มากกว่าบุ๊กมาร์ก เพราะแม้แต่ ตัวจัดการบุ๊กมาร์ก ของทุกเบราว์เซอร์ในปี 2024 ก็ยังไม่ค่อยพัฒนา ทำให้การจัดระเบียบบุ๊กมาร์กทำได้แย่
    ฉันไม่ได้รู้สึกดึงดูดกับแท็บซ้อนมากนัก แต่ความสามารถในการสลับกลุ่มแท็บในแถบด้านข้างได้ด้วยคลิกเดียว แบบ “panes” ของส่วนขยาย Firefox อย่าง Sidebery หรือ “spaces” ของ Arc นั้นทรงพลังมาก
    ยิ่งดีขึ้นไปอีกถ้าผูกพาเนล/สเปซเข้ากับโปรไฟล์เบราว์เซอร์
    ตัวอย่างเช่น สามารถสลับหน้าต่างเบราว์เซอร์เดียวให้ใช้สำหรับการท่องเว็บทั่วไป ช้อปปิ้ง เรียนมหาวิทยาลัยออนไลน์ หรือพัฒนาซอฟต์แวร์ได้ และถ้าจำเป็นก็แยกพาเนล/สเปซเฉพาะออกเป็นหน้าต่างใหม่ชั่วคราวได้
  • ฉันยอมรับว่าเป็นเรื่องรสนิยม แต่เชื่ออย่างแรงในทางตรงกันข้าม
    จริงอยู่ที่พอเปิดเกิน 6–8 แท็บบนแถบแท็บแนวนอนก็จัดการและติดตามยาก
    แต่ตลอด 6 เดือนที่ผ่านมา ฉันใช้ Arc และพบว่าบนแถบแท็บแนวตั้งเอง พอมี 6–8 แท็บเปิดอยู่ก็บริหารและติดตามยากไม่ต่างกัน
    สุดท้ายก็ลงเอยด้วยการปิดทั้งหมดแล้วเริ่มใหม่ทุก ๆ 4 ชั่วโมง
    มีสองประเด็นจากทั้งสองฝ่ายที่ฉันรู้สึกคล้อยตามมากกว่า
    อย่างแรกคือ ถ้าลองนับจำนวนพิกเซลที่แถบแท็บใช้ทั้งแนวนอนและแนวตั้ง ฉันยังไม่เคยเห็นแถบแท็บแนวตั้งที่ใช้งานได้จริงซึ่งกินพิกเซลเท่ากับหรือน้อยกว่าแนวนอนเลย
    อย่างที่สองคือ จอมอนิเตอร์แทบจะมีพิกเซลแนวนอนมากกว่าแนวตั้งเสมอ ดังนั้นจึงมีข้อโต้แย้งว่าแถบแท็บแนวตั้งใช้ประโยชน์จากอัตราส่วนหน้าจอของจอได้ดีกว่า
    สำหรับจอ 16:9 ขึ้นไปมันฟังดูจริง แต่สำหรับ 16:10 ที่พบบ่อยใน MacBook ส่วนตัวแล้วฉันรู้สึกว่าไม่ค่อยใช่
  • ถ้ามองสกรีนช็อต FF89 ที่กลายเป็น “ประเด็นถกเถียง” การเปลี่ยนแปลงใหญ่ที่สุดอย่างหนึ่งดูเหมือนจะเป็นการออกแบบแท็บใหม่ให้มี padding มากขึ้น
    แต่ฉันซ่อนแถบแท็บด้านบนไว้และใช้ Tree Style Tab ที่เข้ากับ Firefox ได้ดี เลยไม่ทันสังเกตการเปลี่ยนแปลงนั้นด้วยซ้ำ
    ฉันไม่ได้ชอบ Firefox เป็นพิเศษ แต่ข้อได้เปรียบด้าน UX ของต้นไม้แท็บมีมากพอจะกลบรายละเอียดเล็ก ๆ ที่ Chrome/Safari ทำได้ดีกว่านิดหน่อย จนไม่ต้องลังเล
    เพียงแต่ฉันใช้ Chrome สำหรับงานฟรอนต์เอนด์เพราะเครื่องมือสำหรับนักพัฒนา
  • ฉันไม่แน่ใจว่าการมาตอบคอมเมนต์ตัวเองผิดมารยาท HN หรือเป็นการจัดระเบียบข้อมูลที่ดี :)
    ในส่วนขั้นสูงของหน้า options ของ Tree Style Tab มีพื้นที่สำหรับใส่สไตล์ชีตผู้ใช้ที่รีโหลดแบบเรียลไทม์
    มันดีมากสำหรับลองทดสอบการเลือกฟอนต์โดยไม่ต้องรีสตาร์ตเบราว์เซอร์
    ฉันเปลี่ยนให้ใช้ฟอนต์แบบย่อของ SF Pro ของ Apple
    Iosevka Mono ที่ฉันใช้แทบทุกที่ตามปกติดูไม่ค่อยเข้ากับชื่อแท็บเท่าไร
    CSS มีดังนี้:

    :root.sidebar tab-item.unread .label-content {  
    font-style: italic !important;  
    }
    
    :root.sidebar tab-item {  
    font-family: "SF Pro" !important;  
    font-stretch: condensed !important;  
    font-weight: 300 !important;  
    }
    
    :root.sidebar tab-item.active .label-content {  
    font-weight: 500 !important;  
    }  
    

    ฉันได้เพิ่มสกรีนช็อตผลลัพธ์ของ CSS นี้ไว้ที่ลิงก์เดียวกับคอมเมนต์ก่อนหน้าแล้ว: https://gist.github.com/aclarknexient/88673880d373864eee1927...
  • บนโน้ตบุ๊ก แท็บแนวตั้งเริ่มไม่ค่อยเวิร์ก
    ใน Firefox วิธีแฮ็กให้แถบด้านข้างซ่อนอัตโนมัติพังไปแล้ว และฉันก็ขี้เกียจแก้ ตอนนี้เลยมีพื้นที่ว่างสีเทากว้างหลายนิ้วทั้งที่ไม่ได้เปิดแท็บเป็นร้อย ๆ
    ปกติฉันเปิดไว้แค่ราว 5–10 แท็บ
    ที่น่าหงุดหงิดกว่าคือทุกวันนี้หลายเว็บไซต์ตัดสินว่าเป็นมือถือหรือเดสก์ท็อปจาก ขนาด viewport ของเบราว์เซอร์ ไม่ใช่ user agent
    ฉันเสียความกว้างแนวนอนไป 1 นิ้วเพราะ tree style tab อยู่แล้ว จึงแทบไม่มีพื้นที่ให้ย่อได้ก่อนที่เว็บไซต์จะเข้าใจผิดว่าเป็น iPad
    เลยแทบต้องใช้เบราว์เซอร์แบบเต็มหน้าจอ ไม่อย่างนั้นก็จะเจอเมนูแฮมเบอร์เกอร์เต็มไปหมดพร้อมการตัดบรรทัดข้อความที่เละเทะ ทำให้ใช้งานยิ่งแย่ลง
    ส่วนใหญ่ฉันเลยต้องปิดแถบด้านข้างไปเลย ทำให้ทุกครั้งที่สลับแท็บต้องคลิกเพิ่มอีกหลายครั้ง

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

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

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

  • ฉันใช้ Firefox เป็นเบราว์เซอร์สำรอง แต่ทุกครั้งที่เปิด มันจะเข้ามารบกวนและคั่นจังหวะก่อนเสมอ เพื่อบอกการเปลี่ยนแปลงและฟีเจอร์ใหม่อย่าง Pocket หรือ VPN ที่เพิ่มเข้ามาตั้งแต่ครั้งก่อน
    ขอเถอะ เลิกทำแบบนั้น แล้วปล่อยให้ฉันเริ่มท่องเว็บในสิ่งที่ตั้งใจจะมาทำ
    อยากให้มันไม่ทำตาม dark pattern ของ Microsoft ที่ยัดเยียด Office 365 กับ Game Pass ระหว่างการอัปเดต
    โฆษณาฟีเจอร์แบบนั้นควรเอาไปบอกคนที่ยังไม่ได้ติดตั้ง Firefox มากกว่า ส่วนฉันเป็น “ลูกค้า” อยู่แล้ว ก็อย่ามากวนเลย
    เพราะงั้นฉันเลยใช้ Chrome เป็นหลัก
    มันอาจด้อยกว่าและสอดส่องฉันได้มากกว่า แต่อย่างน้อยก็ไม่มาขวางทางฉัน
  • ติดตั้ง Sidebery[1] แล้วซ่อนแท็บแบบปกติไว้[2] ก็พอ
    นี่แหละคือทางออก :)
    [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
    [2] https://superuser.com/a/1424494

• มีใครอีกไหมที่ไม่รู้สึกรำคาญเลยกับเรื่องที่แท็บ “ดูเหมือนปุ่ม”
  บางทีก็รู้สึกเหมือนมีแค่ฉันคนเดียว
  ไม่แน่ใจว่ามันรบกวนคนที่ใช้ครั้งแรกขนาดนั้นจริงไหม

  • ฉันใช้ Firefox ทุกวัน แต่ไม่เคยรู้เลยว่านี่ถูกมองว่าเป็น “ปัญหา”
    ก่อนจะมาเห็นคอมเมนต์พวกนี้ไม่เคยนึกถึงมันเลยสักครั้ง และรู้สึกว่าแถบแท็บในตอนนี้ก็ใช้งานได้ดีสมบูรณ์อยู่แล้ว เลยคงไม่คิดเรื่องนี้อีก
  • เรื่องที่แท็บดูเหมือนปุ่มเองไม่ได้รบกวนอะไรมาก
    ที่จริงมันก็เป็นทางเลือกที่พบได้บ่อยของรูปลักษณ์แท็บ และเท่าที่จำได้ ในตัวควบคุมแท็บของ Windows 95 ก็มีโหมดที่ทำให้แท็บดูเหมือนปุ่มด้วย
    เหมือนเดิมทีจะถูกใช้กับทาสก์บาร์ด้วย และตั้งแต่ยุค 90 ก็ถูกใช้ใน mIRC สำหรับสลับช่องหรือหน้าต่าง
    แต่หน้าตาของ “ปุ่มแท็บ” แบบนี้โดยเฉพาะ ฉันไม่ค่อยชอบเป็นการส่วนตัว
    มันดูเหมือนแคปซูลยาว ๆ จนเหมือนจะกลืนยาก แล้วก็เพราะคุ้นกับแท็บที่ดูเป็นแท็บอยู่แล้ว เลยไม่เห็นเหตุผลว่าทำไมต้องเปลี่ยน
    โชคดีที่ Firefox ปรับแต่งหน้าตาได้ ก็เลยใช้ userChrome.css ปรับให้ถูกใจมากขึ้น
  • มันไม่ได้ส่งผลต่อการใช้ Firefox
    แต่กำลัง เปลืองพิกเซล ด้วยการใส่ช่องว่างที่ไม่มีเหตุผลว่าทำไมต้องมี
    มาถึงจุดนี้ฉันชินกับการตัดสินใจด้าน UI ที่ไร้สาระแล้ว เลยปล่อยให้มันเป็นไปตามที่องค์กรต่าง ๆ ยื่นมาให้
    ดูเหมือนแทบไม่มีที่ไหนสนใจเรื่องความสม่ำเสมอหรือการค้นพบฟีเจอร์ได้ง่าย
  • มันน่ารำคาญเพราะดูต่างจากสิ่งอื่นที่มีแท็บมากพอสมควร ไม่ใช่แค่เบราว์เซอร์ แต่รวมถึงตัวจัดการไฟล์หรือเอดิเตอร์ด้วย
    ไม่เข้าใจว่าทำไมต้องโยนเรื่องเชิงความหมายทิ้งออกนอกหน้าต่างไปหมด
    มันดูเหมือนปุ่ม แต่ไม่ได้ทำงานแบบปุ่ม
  • ฉันไม่เคยสังเกตเลย และต่อให้มีคนชี้ให้ดูก็ยังไม่รู้สึกว่าเป็นปัญหา
    สำหรับฉันมันดูค่อนข้างเป็นการ จับผิดเรื่องเล็กน้อย สำหรับคนที่มองว่านี่เป็นปัญหา

• เห็นทุกคนบ่นกันคนละอย่าง งั้นฉันขอบ่นของฉันด้วย
  ถ้าต้นไม้โฟลเดอร์บุ๊กมาร์กใหญ่ กระบวนการไล่หาว่าจะเพิ่มบุ๊กมาร์กใหม่ไว้ตรงไหนในป๊อปอัปเล็ก ๆ ของ UI “Add Bookmark” นั้นแย่มาก
  แถบข้างบุ๊กมาร์กค้นหาตามชื่อได้ แต่หาว่าบุ๊กมาร์กนั้นอยู่ตรงไหนไม่ได้
  ส่วนเสริมค้นหาบุ๊กมาร์กอย่าง Bookmark search plus 2 ช่วยแก้ได้ แต่จริง ๆ ไม่ควรต้องพึ่ง
  แก้ไข: เพิ่งรู้จักคลิกขวา -> Show in Folder และอันนี้ยอดเยี่ยมมาก
  แต่มันก็ยังไม่ใช่ UI ที่ดีที่สุด และส่วนเสริมที่พูดถึงก็ยังใช้งานได้ตรงไปตรงมามากกว่าอยู่ดี
  ไม่สามารถมีหลายแถบข้างพร้อมกันได้
  เพราะงั้นเลยเปิด Tree Style Tabs สำหรับจัดการแท็บแนวตั้งพร้อมกับโฟลเดอร์/การค้นหาบุ๊กมาร์กพร้อมกันไม่ได้
  ไร้สาระมาก
  เอาจริง ๆ ก็มีเท่านี้ และส่วนใหญ่เป็นเรื่อง การจัดการบุ๊กมาร์ก
  ไม่แน่ใจว่าเป็นเพราะ UI ส่วนที่เหลือดีอยู่แล้ว หรือเพราะฉันชินจนมองไม่เห็นข้อบกพร่อง แต่โดยรวมฉันก็ใช้ Firefox ได้ค่อนข้างสบาย
  เลยไม่รู้สึกว่าจำเป็นต้องบ่นเรื่องการออกแบบสไตล์ใหม่มากเหมือนคนอื่น

  • ด้วยเหตุผลที่ไม่ทราบได้ บุ๊กมาร์ก ในทุกเบราว์เซอร์เหมือนจะถูกละเลยอย่างน่าเศร้า
    ต่อให้หยิบเบราว์เซอร์เมื่อ 20 ปีก่อนขึ้นมา การจัดการบุ๊กมาร์กก็แทบเหมือนเดิม หรือบางกรณีกลับดีกว่านิดหน่อยด้วยซ้ำ
    ดูเหมือนการปรับปรุงบุ๊กมาร์กจะไม่ใช่เรื่องหวือหวา เลยไม่มีใครสนใจ
  • สงสัยว่าคุณยังมีความจำของกล้ามเนื้อกับคีย์ลัด Ctrl+Shift+B ที่เคยเปิดแผงด้านข้างขนาดใหญ่ในสมัยก่อนหรือเปล่า
    ตอนนี้มันแสดงแค่แถบแนวนอนแคบ ๆ
    ฉันก็เลยรำคาญกับการออกแบบใหม่นี้เหมือนกัน แต่ไปเจอว่า Ctrl+Shift+O เป็นคีย์ลัด “จัดการบุ๊กมาร์ก”
    มันจะเปิดหน้าต่างป๊อปอัปที่ใหญ่กว่าซึ่งมีบุ๊กมาร์กอยู่ และจนถึงตอนนี้ก็ดูเกือบสะดวกพอ ๆ กับแผงด้านข้างแบบเก่า
    ค้นหาบุ๊กมาร์กได้ด้วย และถ้าคลิกขวาแล้วเลือก “show in folder” จากเมนูบริบท ก็จะบอกได้ว่ามันอยู่ตรงไหนในโครงสร้างลำดับชั้น
    แต่บุ๊กมาร์กของฉันทั้งหมดอยู่ใน “other bookmarks” เลยคงไม่ได้ใช้บ่อยนัก

• ข้อร้องเรียนที่ใหญ่ที่สุดเกี่ยวกับ “การเปลี่ยน UI ของ Firefox โดยไม่จำเป็น” คือการถอด browser.urlbar.clickSelectsAll ออกเมื่อ 4 ปีก่อน
  ซึ่งอย่างที่คาดไว้ Mozilla ไม่ได้ใส่ใจ
  พออ่านบั๊กรีพอร์ตแล้ว แทบอธิบายไม่ได้เลยนอกจากความเป็นปฏิปักษ์ต่อผู้ใช้: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
  ไม่มีช่องข้อความใน UI ไหนที่ทำงานแบบนี้
  จึงไม่เข้าใจว่าทำไม Mozilla ถึงปล่อย “ฟีเจอร์” นี้ออกมา และยังลบตัวเลือกสำหรับปิดมันไปพร้อมกันด้วย
  จะมีผู้ใช้บางส่วนที่ชอบก็ไม่เป็นไร แต่ไม่ควรยึดตัวเลือกของฉันไปแล้วบังคับยัดสิ่งนี้เข้ามา

  • จริง ๆ แล้วตรรกะของ Mozilla คือเบราว์เซอร์หลักอื่น ๆ ก็ทำงานแบบนี้กันหมด
    พอลองใน Chrome ก็พบว่าทำงานเหมือน Firefox จริง
    ในแง่ความเป็นปฏิปักษ์ต่อผู้ใช้ เหตุผลก็คือคนที่ไม่ชอบพฤติกรรมใหม่นี้มักจะไม่เปิด telemetry จึงไม่คู่ควรกับฟีเจอร์ที่ตัวเองต้องการ
    เมื่อคิดว่าจุดเด่นหลักของ Firefox คือ โมเดลที่เน้นความเป็นส่วนตัว ก็ยิ่งดูประชดประชันไม่น้อย
  • เห็นด้วยอย่างยิ่ง
    ผ่านมา 4 ปีแล้วก็ยังสะดุดกับมันทุกวัน
    ที่น่าขันคือวิธีที่ฉันพลาดบ่อยที่สุดกลับเป็นกรณีเดียวกับที่การเปลี่ยนนี้อ้างว่าจะช่วย
    ถ้าต้องการเลือก URL ทั้งหมด ฉันจะดับเบิลคลิกตามสัญชาตญาณ แต่คลิกแรกจะเลือกทั้งหมด และคลิกที่สองจะย่อช่วงที่เลือกให้เหลือแค่คำเดียว
    จากนั้นก็จะงงอยู่แวบหนึ่งแล้วเริ่มคลิกใหม่ ซึ่งตอนนี้ถ้าจะเลือก URL ทั้งหมดอีกครั้งต้องคลิกเพิ่มอีกสามครั้ง
    มันน่าหงุดหงิดอย่างน่าประหลาด
    คำอธิบายใน tracker ดูเหมือนจะประมาณว่า “สักวันในอนาคตเราอาจทำอย่างอื่นบางอย่างเพื่อทำให้เรื่องนี้สมเหตุสมผล”
    แต่ 4 ปีต่อมาก็ยังไม่เห็นอะไรแบบนั้น
  • ฉันย้ายไปใช้ Vivaldi หลังจากฟีเจอร์นี้ถูกถอดออกจาก Firefox
    Vivaldi ยังเปิดให้เลือกพฤติกรรมนี้ได้อยู่
    เลยสงสัยว่ามีเบราว์เซอร์บน Unix ตัวอื่นที่ปิดการเลือกทั้งหมดเมื่อคลิกได้หรือไม่
    โดยรวมก็พอใจกับ Vivaldi แต่ถ้ามีตัวเลือกมากกว่านี้ก็คงดี
  • มันยังพังอยู่จนถึงตอนนี้
    เพราะฟีเจอร์ “Paste and Go” ทำงานไม่ถูกต้อง
    ตามสามัญสำนึกแล้ว “Paste and Go” ควรเท่ากับการทำ “Paste” เพื่อแทรกข้อความจากคลิปบอร์ดลงที่ตำแหน่งเคอร์เซอร์อย่างถูกต้อง แล้วตามด้วย “ไปยังที่อยู่ในแถบ адрес”
    แต่ถ้ายกเลิกการเลือก URL ที่ถูกเลือกอัตโนมัติแล้ววางเคอร์เซอร์ไว้ข้างใน จากนั้นใช้ “paste and go” Firefox จะพยายามไปยังข้อความในคลิปบอร์ดทันทีโดยไม่สนใจ URL เดิม
    สิ่งนี้อาจเป็นความเสี่ยงด้านความปลอดภัย เพราะสามารถหลอกให้ผู้ใช้เข้า URL ที่ไม่ได้ตั้งใจได้
    ถ้าไม่อยากแก้ ก็ควรเปลี่ยนชื่อให้ตรงกับพฤติกรรมจริงเป็น “Clear, Paste, and Go”
  • มีคนบอกว่า “Mozilla ไม่ได้ใส่ใจ” แต่ตัวเลือกภายในก็คือตัวเลือกภายใน และถ้าไม่ใช่กรณีอย่างสัญญาซัพพอร์ตองค์กรใหญ่ ก็ไม่มีเบราว์เซอร์ไหนใส่ใจมากนัก
    ถ้าต้องเข้า about:config ด้วยเหตุผลที่ไม่ใช่งานพัฒนาหรือการจัดการอุปกรณ์พกพา ก็ยากจะคาดหวังได้ว่ามันจะยังทำงานต่อไปหลังอัปเดต
    ตัวเลือกทุกอย่างคือโค้ดที่ต้องบำรุงรักษา
    เดาว่าตอนเขียนโค้ดส่วนนั้นใหม่ พวกเขาคงเลือกทางที่เร็วและถูกกว่า คือไม่ทำฟีเจอร์ที่ไม่ได้รองรับอย่างเป็นทางการกลับมาอีก

• ฝันร้าย UI/UX ที่แท้จริงของ Firefox คือ เศษซากเลกาซี
  ฟังก์ชันพื้นฐานของเบราว์เซอร์แต่ละอย่างเหมือนจะเปิดด้วยมุมมองคนละแบบกันหมด
  การตั้งค่าเปิดเป็นแท็บเบราว์เซอร์ ส่วนประวัติเปิดเป็นแถบด้านข้าง
  แต่ก็เฉพาะตอนกด Ctrl+H เท่านั้น เพราะถ้าจัดการประวัติด้วย Ctrl+Shift+H จะเปิดเป็นหน้าต่างแยก
  บุ๊กมาร์กกับดาวน์โหลดก็ไปอยู่ในหน้าต่างนั้น หน้าต่าง Library ที่เหมือนหลุดมาจากยุค Firefox 3/4
  ดาวน์โหลดเองก็มีป๊อปอัปเล็ก ๆ แต่ Ctrl+J และการจัดการดาวน์โหลดจะเปิดหน้าต่างนั้น
  บุ๊กมาร์กก็เช่นกัน Ctrl+Shift+O เปิดหน้าต่างนั้น แต่ Ctrl+B เปิดแถบด้านข้าง
  โปรไฟล์แทบไม่มีฟังก์ชันที่ใช้งานได้จริงสำหรับผู้ใช้ทั่วไปแบบชวนขำ และมีอินเทอร์เฟซที่ดูเป็นเลกาซีซ่อนอยู่ใน about:profiles
  รหัสผ่านเปิดในแท็บเบราว์เซอร์ แต่หน้าตากลับแยกตัวจนไม่ค่อยเข้ากับอย่างอื่น
  สิ่งที่พอจะเรียกว่ามีความเป็นอันหนึ่งอันเดียวกันได้คือการตั้งค่ากับส่วนเสริมต่างก็เปิดในแท็บเบราว์เซอร์และลิงก์ถึงกัน
  นอกนั้นเป็นความยุ่งเหยิงของแท็บเบราว์เซอร์ หน้าต่าง แถบด้านข้าง ป๊อปเอาต์ และ UI คนละแบบที่ปนกันไปหมด
  มันเละแบบนี้มานานพอสมควรแล้ว และเพราะไม่มีวิสัยทัศน์เดียวหรือความพยายามจริงจังที่จะจัดระเบียบ ก็คงจะเป็นแบบนี้ต่อไป
  Firefox View ที่เพิ่งเพิ่มมาก็ดูเหมือนเป็นแค่อีกชิ้นหนึ่งที่ซ้อน UI แบบใหม่เข้าไปอีกชั้น
  ในนั้นก็มีประวัติด้วย เลยกลายเป็นว่ามีวิธีดูประวัติราวสามแบบ ซึ่งอย่างน้อยสักแบบหนึ่งก็มากเกินไปแล้ว
  มันอาจเป็นความพยายามจะย้ายความสามารถของหน้าต่าง Library ไปไว้ในแท็บ View ก็ได้ แต่ ณ ตอนนี้มีแต่เพิ่มความสับสน
  ยอมรับว่ามีการพูดเกินจริงอยู่บ้าง
  เบราว์เซอร์อื่นช่วงหลังก็ชอบแถบด้านข้าง และมีทั้งป๊อปอัปกับเมนูเหมือนกัน
  แต่สิ่งที่โดดเด่นเป็นพิเศษคือหน้าต่าง Library ที่ดูเป็นเลกาซีซึ่งโผล่มาจากทั่วทุกที่ เทียบกับฟังก์ชันอย่างการตั้งค่า/ส่วนเสริม/รหัสผ่านที่เปิดในแท็บเบราว์เซอร์
  สุดท้ายเวลาจะเปิดฟังก์ชันของเบราว์เซอร์ ก็เดาได้ยากว่าจะโผล่มาในรูปแบบไหน ตอนแรกยิ่งชัด และถึงจะคุ้นแล้วก็ยังรู้สึกว่า “มันก็เปิดกันคนละแบบมั่ว ๆ” อยู่ดี
  ถึงจะปรับตัวได้ แต่มันก็ยังเละอยู่ดี

  • ฉันคิดว่าบางฟังก์ชันจะมีทั้ง popover และหน้าต่างคู่กันก็ไม่เป็นไร
    เพียงแต่ต้องออกแบบให้ฉลาด
    ตัวอย่างเช่นใน Safari ดาวน์โหลดจะเป็น popover โดยค่าเริ่มต้น แต่สามารถ “แยกออกมา” เป็นหน้าต่างได้
    มันรองรับทั้งสองกรณีการใช้งานพร้อมยังรักษาความสม่ำเสมอไว้ได้
    Firefox น่าจะต้องการแนวคิดแบบนี้อีกมากพอสมควร

• สิ่งที่แย่ที่สุดของ Proton UI ที่คนไม่ค่อยพูดถึงคือ ถ้าไม่ได้ใช้จอ 1080p ขึ้นไป รุ่นใหม่ ๆ มันคือการถอยหลังครั้งใหญ่แบบวัดได้จริง
  โน้ตบุ๊กของฉันเป็น ThinkPad X220 รุ่นเก่า ทำให้การเปลี่ยนแปลงนั้นเปลืองพื้นที่หน้าจออย่างไร้ความหมายมาก จนกระทบประสิทธิภาพการทำงานจริง
  มันเป็นส่วนหนึ่งของกระแสวิศวกรรมซอฟต์แวร์ที่เป็นปฏิปักษ์ต่อผู้ใช้ ซึ่งทำร้ายคนที่ไม่มีเงินซื้อฮาร์ดแวร์ใหม่กว่า หรือไม่อยากใช้มันด้วยเหตุผลใดก็ตาม
  ในกรณีนี้ไม่ใช่การทำทุกอย่างให้กลายเป็นแอป Electron หรือ React ที่บวมเทอะทะด้วยซ้ำ แต่เป็นแค่การทำ UI ให้แย่ลงโดยไม่มีเหตุผล เพื่อสร้างภาพผิวเผินว่า Mozilla ยังดูเหมือนใส่ใจกับ Firefox อยู่
  Proton แย่มากสำหรับวิธีใช้งานของฉันจนต้องใช้ userChrome ที่ปรับแต่งเอง