วิธีทำให้ Firefox UI เริ่มต้นดียิ่งขึ้น

 (github.com/black7375)
1 คะแนน โดย GN⁺ 2024-02-21 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

วิธีปรับปรุง Firefox UI พื้นฐาน

  • หลังเวอร์ชัน Firefox v89 เป็นต้นมา มีประเด็นโต้แย้งเกี่ยวกับ UI และ repository นี้จึงได้รับความนิยมเนื่องจากตอบโจทย์สิ่งนั้น
  • เว็บเบราว์เซอร์ Waterfox และ Floorp ก็เลือกตั้งธีมนี้เป็นค่าเริ่มต้นเช่นกัน
  • ในปี 2023 Mozilla ตัดสินใจยุติการสนับสนุน Windows 7 และ Windows 8 โดยเวอร์ชัน v115 เป็นเวอร์ชันสุดท้ายที่ยังได้รับการสนับสนุนและสามารถใช้งานได้ถึงเดือนกันยายนปี 2024

หลักการ

  • มีกรอบคิดการออกแบบ UI/UX ขนาดใหญ่ 3 ข้อ และขนาดเล็ก 16 ข้อ
  • เนื่องจากไม่สามารถทำ A/B test ได้ จึงสำคัญมากในการคาดคะเนพฤติกรรมผู้ใช้
  • พิจารณาเรื่องความเป็นธรรมชาติ ความเรียบง่าย ความสามารถในการมองเห็น การปรับตัว ความสม่ำเสมอ ความสามารถในการคาดการณ์ ความสามารถในการควบคุม ประสิทธิภาพ ความชัดเจน ความใกล้ชิด ขนาด ความรวดเร็วในการตอบสนอง ความยืดหยุ่น การเข้าถึง ฟังก์ชันการทำงาน ความสัมพันธ์เชิงบริบท ความกลมกลืน ความสนุก และความเข้ากันได้

ปัญหา

  • ระบุปัญหาระหว่าง Firefox v88 Photon UI และ v89 Proton UI
  • ปัญหาหลักได้แก่ แท็บดูเหมือนปุ่ม การเว้นระยะ (padding) ที่ใหญ่เกินไป และไอคอนที่อ่านได้ยากเมื่ออยู่ลำพัง

ปัญหาเกี่ยวกับแท็บ (การปรับตัว การควบคุม)

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

ปัญหาพื้นที่มากเกินไป (การมองเห็น ความใกล้ชิด ขนาด บริบท)

  • อธิบายว่าทำไมพื้นที่ที่มากเกินไปจึงเป็นปัญหาโดยพิจารณาจากการมองเห็น ความใกล้ชิด ขนาด และความสัมพันธ์เชิงบริบท
  • อธิบายวิธีการออกแบบ UI ที่กดได้ง่ายโดยอิงกฎของ Fitts
  • วิเคราะห์ปัญหาผ่านการเปรียบเทียบระยะห่างของ UI ระหว่าง Google Chrome

ความช่วยเหลือของไอคอน (ความชัดเจน การเข้าถึง)

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

การออกแบบแท็บใหม่

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

การกระจาย

  • แม้ว่าเกณฑ์ที่เป็นส่วนตัวเกี่ยวกับ UI ที่ดีมีความสำคัญ แต่บางส่วนก็เป็นเรื่อง "รสนิยม"
  • เปรียบเทียบแท็บของ Lepton, Photon และ Proton โดยเลือกตัวอย่างให้ตรงกับแนวคิดของแต่ละแบบ

เพิ่มไอคอนและปรับ padding

  • แก้ไขข้อร้องเรียนเดิมโดยการเพิ่มไอคอนและปรับการเว้นระยะ padding
  • เปรียบเทียบไอคอนเมนูของ Edge, Chrome และ Lepton เพื่อแสดงถึงความโดดเด่นของงานออกแบบไอคอนของ Lepton

ธีม

  • มี UI ที่ปรับตัวให้เข้ากับระบบปฏิบัติการและการตั้งค่าต่าง ๆ
  • อ้างอิงการออกแบบของ OS ต่าง ๆ ตั้งแต่ Windows 7 ถึง macOS

ปฏิสัมพันธ์

  • ออกแบบปฏิสัมพันธ์ที่ช่วยให้ผู้ใช้เข้าใจสิ่งที่กำลังเกิดขึ้น และปฏิสัมพันธ์ที่ทำให้การใช้งานสนุกยิ่งขึ้น

บทสรุป

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

ความคิดเห็นของ GN+

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

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-02-21
ความคิดเห็นจาก Hacker News
  • ปัญหาหลักของ UI ใหม่คือทุกอย่างดูใหญ่เกินไป ซึ่งอาจเหมาะกับหน้าจอมือถือ แต่บนหน้าจอเดสก์ท็อปทั่วไปกลับกลายเป็นการใช้พื้นที่อย่างสิ้นเปลือง แม้ว่าจะมีส่วนหนึ่งจากการเพิ่มระยะขอบเหมือนที่บทความกล่าวถึงก็ตาม การตัดตัวเลือก "compact" UI density ออกก็มีส่วนสำคัญเช่นกัน อย่างไรก็ตามยังสามารถย้อนกลับมาได้โดยตั้งค่า browser.compactmode.show ใน about:config ตัวเลือกนี้ถูกแสดงว่า "ไม่รองรับ" แต่ก็ถูกเก็บสถานะนี้มาหลายปีแล้ว
  • ในฐานะผู้เขียนธีม Firefox ที่ได้รับความนิยมอย่าง Lepton คุณสามารถเห็นการตัดสินใจหลายอย่างที่ฉันทำเพื่อแก้ไขข้อผิดพลาดการตัดสินใจของ Mozilla และเห็นว่ามันกลายเป็นที่นิยมได้อย่างไร บทความนี้เป็นส่วนหนึ่งของชุดบทความ
  • ผมเชื่ออย่างแรงว่า การพัฒนา UX ของเบราว์เซอร์ควรเริ่มจากแท็บแนวตั้งเสมอ ในแท็บแนวนอน เมื่อเปิด 6-8 แท็บขึ้นไปก็เริ่มจัดการและติดตามได้ยาก การใช้แท็บแนวตั้งแบบซ้อนจะทำให้ลิงก์ที่เปิดในแท็บใหม่กลายเป็นแท็บลูกโดยอัตโนมัติ มันจึงทำให้เข้าใจโครงสร้างและบริบทได้ง่ายกว่าการใช้แท็บแนวนอน เพิ่มสีที่แทนตัวเว็บไซต์แต่ละไซต์อีกชั้น จะช่วยให้เห็นกลุ่มแท็บได้ง่ายขึ้น แถมยังสามารถบุ๊กล์ก์ "ต้นไม้" ของแท็บได้เพื่อบันทึกความคืบหน้าของงานวิจัยหรือเอกสารได้ ไฟล์ CSS และสกรีนช็อตบางส่วนอยู่ที่นี่
  • บทความนี้พยายามโน้มน้าวให้เชื่อว่าผู้เขียนธีมซึ่งมีพื้นฐานจากหลัก UX ได้สร้างธีม Firefox ที่ดีขึ้นในเชิงวัตถุ แต่การเปลี่ยนแปลงส่วนใหญ่กลับดูเป็นรสนิยมส่วนตัว พวกมันถูกออกแบบและดูแลอย่างแน่นหนาอย่างแน่นอน แต่ส่วนตัวแล้วฉันรู้สึกว่าไม่ค่อยน่าดูและดูซับซ้อนขึ้นบ้าง ผู้ใช้แต่ละคนก็ชอบต่างกัน และ Firefox ได้เลือกการออกแบบเดียวแล้ว แต่ก็ควรเปิดโอกาสให้รองรับการปรับเปลี่ยนเหล่านี้ ซึ่งถือว่าเป็นเรื่องดี อย่างไรก็ตาม การที่ผู้เขียนพยายามพิสูจน์ว่ารสนิยมของตัวเองคือสิ่งที่ถูกต้องทางประสบการณ์ดูเหมือนจะโง่เขลาเกินไป
  • ตั้งแต่ Firefox ทำให้แท็บเละ ฉันก็เลิกใช้เป็นเบราว์เซอร์หลักไปแล้ว ถึงจะคอยเปิดตรวจเช็คเป็นครั้งคราว แต่ถึงก็ใจในใจไว้ว่าหลังผ่านไปหกเดือนจะลองอีกครั้ง โดยเฉพาะธีมโหมดสว่าง มันยิ่งดูดูหมิ่นมากขึ้นเมื่อพื้นหลังสีเทาอ่อนไปกับปุ่มสีขาว และยังไม่คำนึงถึงการตั้งค่าธีมระบบของ Windows อีกด้วย Edge อาจเข้าใจแต่ Chrome ไม่ อย่างน้อยก็มีคอนทราสต์เพียงพอ ส่วน Firefox กลับไม่ใส่ใจการแสดงผลเลย
  • มีคนบางคนที่ไม่สนใจเรื่องแท็บที่ถูกทำให้เหมือน "ปุ่ม" เลยจริงๆ พวกเขาไม่รู้สึกไม่สะดวกหรือไง ต่อคนที่ใช้ครั้งแรก มันจริงๆ แล้วไม่รบกวนไหม? บางครั้งฉันก็คิดว่าอาจเป็นความคิดของตัวเองล้วนๆ
  • ทุกคนต่างเล่า "pet peeves" ของตัวเองได้ ดังนั้นนี่คือของผม:
    • เมื่อมีโครงสร้างต้นไม้โฟลเดอร์บุ๊กมาร์กที่ใหญ่ขึ้น การเพิ่มบุ๊กมาร์กใหม่จากหน้าเด่นเล็กๆ ของ "เพิ่มบุ๊กมาร์ก" ทำให้รู้สึกแย่มาก
    • แถบข้างบุ๊กมาร์กสามารถค้นหาได้ด้วยชื่อ แต่ไม่สามารถหาตำแหน่งที่เก็บไว้ได้ ฟีเจอร์เสริม Bookmark search plus 2 อาจแก้เรื่องนี้ แต่ไม่ควรจะต้องต้องอาศัยมัน
    • ไม่สามารถมีแถบข้างหลายอันได้ ดังนั้นจึงไม่สามารถเปิด Tree Style Tabs เพื่อจัดการแท็บแนวตั้งพร้อมกับโฟลเดอร์บุ๊กมาร์กและการค้นหาได้พร้อมกัน มันเป็นเรื่องไร้เหตุผลไปหมด
    • จริงๆ แล้วมันมีเท่านั้น ทั้งหมดส่วนใหญ่เกี่ยวกับการจัดการบุ๊กมาร์ก! ส่วน UI อื่นๆ ไม่แน่ใจว่าดูโอเคดีหรือว่าตัวฉันชินจนมองไม่เห็นอะไรที่แปลกไปจากเดิม แต่ผมค่อนข้างพอใจกับ Firefox และไม่รู้สึกว่าจำเป็นต้องโวยวายเรื่องรีดีไซน์แบบตัวเองเหมือนคนอื่นๆ
  • ข้อร้องเรียนที่ "ไม่จำเป็น" ต่อการเปลี่ยน UI ของ Firefox ที่รุนแรงที่สุดคือการลบ browser.urlbar.clickSelectsAll เมื่อประมาณ 4 ปีก่อน อย่างที่คาดไว้ Mozilla ก็ไม่สนใจ ด้านรายงานบั๊กก็อ่านแล้วเห็นได้ชัดว่าเป็นการออกแบบที่ขัดกับผู้ใช้โดยสิ้นเชิง ไม่มีฟิลด์ข้อความตัวไหนในระบบที่ทำแบบนี้ Mozilla แพ้ไปทำไมถึงปล่อย "ฟีเจอร์" นี้ออกมา แต่กลับถอดตัวเลือกไม่ใช้แล้วออกไปด้วย
  • ฝันร้ายจริงๆ ของ UI/UX Firefox คือสิ่งตกค้างจากยุคเก่า คุณสมบัติพื้นฐานทั้งหมดของเบราว์เซอร์เปิดในมุมมองอื่นกันไปตามตัวเอง การตั้งค่าเปิดในแท็บของเบราว์เซอร์ ส่วนประวัติเคลื่อนไหวในแถบข้าง แต่เมื่อจะจัดการประวัติ ต้องเปิดในหน้าต่างแยก บุ๊กมาร์กและการดาวน์โหลดก็เปิดในหน้าต่างนั้นเช่นกัน มี popup เล็กๆ สำหรับดาวน์โหลด แต่การจัดการดาวน์โหลดกลับต้องไปทำในหน้าต่างนั้นอีกเช่นเดียวกัน สำหรับบุ๊กมาร์ก กด ctrl+shift+o เพื่อเปิดหน้าต่างนั้น แต่ ctrl+b จะเปิดแถบข้าง โปรไฟล์? ไม่มีฟีเจอร์โปรไฟล์ที่เป็นมิตรกับผู้ใช้ อย่างไรก็ดี มันดูเหมือนอินเทอร์เฟซแบบเรือนเก่าแอบซ่อนอยู่ใน about:profiles รหัสผ่าน? เปิดในแท็บของเบราว์เซอร์ด้วยหน้าตาที่ไม่สอดคล้องกับองค์ประกอบอื่น
  • จุดแย่ที่สุดของ Proton UI ที่แทบไม่มีใครพูดถึงคือ หากมองแบบวัตถุ มันเป็นการอัปเกรดที่ใหญ่โตอย่างชัดเจนยิ่งเมื่อไม่ได้ใช้จอ 1080p สมัยใหม่ (หรือสูงกว่า) มากเกินไป โน้ตบุ๊กของผมคือ ThinkPad X220 รุ่นเก่าจึงการเปลี่ยนแปลงเหล่านี้ไปกินพื้นที่หน้าจออย่างไร้ประสิทธิภาพ ซึ่งกระทบความสามารถในการทำงานอย่างมีประสิทธิผลในแบบที่ช่วยได้ต่อเนื่อง ช่างเป็นเรื่องที่ไม่ต้องการทำให้ทุกอย่างบวมคล้ายแอป Electron หรือ React หากไม่ใช่จำเป็น และทำให้ดูเหมือน Mozilla ยังตั้งใจพัฒนาต่อสำหรับ Firefox ขณะที่ความจริงแล้วไม่เข้าใจ ในขณะที่ฉันเกลียด Proton มากจนต้องรัน userchrome ที่ปรับแต่งเอง