ฉันมี Toggl เป็น icon ใน dock อยู่หกเดือนก่อนจะลบมันทิ้ง
การลบนี้ไม่ใช่การตัดสินใจเชิงหลักการ มันแค่ว่าทุกครั้งที่ฉัน cmd-tab แล้วสายตาไปสะดุดที่ badge ของ Toggl ฉันจะคิดว่า "เริ่ม timer ไปหรือยังนะ?" และคำตอบมักจะเป็นยัง แล้วฉันก็เสียเวลาเก้าสิบวินาทีถัดไปไปกับการ switch ไปหามันเพื่อ start timer สำหรับสิ่งที่กำลังทำอยู่ แล้วก็ลืมว่ากำลังทำอะไรอยู่ Dock icon คือหลุมดูดความสนใจสำหรับ tool ที่ควรจะหายตัวไป
Timex version แรกที่ฉันสร้างก็เป็น dock app เหมือนกัน ฉันลบมันออกจาก dock ของตัวเองภายในสองวัน Menu bar version เข้ามาแทนที่ในสัปดาห์ถัดมาและไม่เคยกลับลงไปอีกเลย
นั่นไม่ใช่ design choice เล็ก ๆ ความต่างระหว่าง "dock" กับ "menu bar" คือความต่างระหว่าง tool ที่เรียกร้องความสนใจ กับ tool ที่อยู่ตรงที่คุณเหลือบมองอยู่แล้ว สำหรับ tracker มีแค่อย่างเดียวเท่านั้นที่ถูก
Dock ถาม Menu bar บอก
macOS dock คือ launcher Icon ที่อยู่ตรงนั้นคือ application ที่คุณตั้งใจจะ switch ไปหา น้ำหนักทาง visual สูง Hit target ใหญ่ List ของ Cmd+Tab รวมพวกมันไว้ ทุกตัวเต็มไปด้วยความคาดหวัง
Menu bar เป็นตรงกันข้าม มันคือที่ที่ status เล็ก ๆ อยู่ — นาฬิกา แบตเตอรี่ Wi-Fi ชุด utility หมุนเวียนที่คุณเช็คโดยไม่ต้องคิด น้ำหนักทาง visual ต่ำ คุณไม่ switch ไปหา app บน menu bar คุณแค่เหลือบมอง
Time tracker ควรเป็นแค่การเหลือบมอง คำถาม "app ที่ active และฉันกำลังถูก track ในชื่อนั้นคืออะไร" ต้องตอบได้โดยไม่ต้อง switch context การวางไว้ใน dock บังคับให้ต้อง switch การวางไว้บน menu bar ไม่ต้อง
นี่คือเหตุผลที่เราไม่ใส่ dock icon มาให้เลย ไม่ใช่ในฐานะ option ไม่ใช่ในฐานะ preference ที่เปิด-ปิดได้ Timex เป็น app แบบ menu-bar-first ตามหลักการ — Today view จะเปิดในหน้าต่างเมื่อคุณเรียกใช้ แต่ตัว Timex เองไม่อยู่ใน list Cmd+Tab ของคุณ การแย่งความสนใจน้อยลง
Pill: 220 pixel กับงานที่ต้องทำ
ช่องบน menu bar ที่ Timex ครอบครองคือสิ่งที่เราเรียกว่า pill มันกว้างประมาณ 220 pixel ขึ้นอยู่กับชื่อ app ที่ active ข้างในมี:
- จุดสี (สีประจำ app จาก strip)
- ชื่อ app ที่ focus อยู่ตอนนี้
- ระยะเวลาที่คุณอยู่กับมัน
นั่นคือ status ทั้งหมด เมื่อคุณ switch จาก Xcode ไป Slack pill จะ animate จาก green-Xcode-12m ไป blue-Slack-0s สีของจุดมาจาก palette เดียวกับที่ใช้ใน Today view ดังนั้น menu bar จึงเป็น preview ขนาดหนึ่ง pixel ว่าคุณกำลังปรากฏตัวอยู่ตรงไหนบน strip
มีสาม constraint ที่ทำให้เรื่องนี้ยาก
งบประมาณความกว้างเป็นเรื่องจริง Session ที่รันยาว ("Visual Studio Code · 2h 14m") ต้องใส่ให้พอดีโดยไม่ไปเบียด icon AirPlay หรือ battery ที่อยู่ข้าง ๆ เรา truncate ชื่อ window อย่างหนักเมื่อจำเป็น แต่ชื่อ app เป็นสิ่งศักดิ์สิทธิ์ — ถ้า "Cursor" ขึ้นใน pill คุณต้องอ่านคำว่า "Cursor" ออก
Pill ต้อง redraw ที่ 1 Hz โดยไม่ flicker ทุกวินาที duration เดินหน้าไปหนึ่งครั้ง ถ้า redraw ทำได้ลวก ๆ menu bar จะสั่นให้เห็น macOS ไม่ได้ให้ tool มากนักสำหรับ text ที่นิ่งระดับ sub-pixel ในบริเวณนี้ เราจึง cache text ที่ render แล้วและ re-render เฉพาะเมื่อตัวเลขเปลี่ยนจริง ๆ
Dark mode กับ light mode ต้องให้ feel เหมือนกัน Palette ของจุดต้องทำงานได้บนพื้นหลังทั้งสองแบบ สีของ text ต้องเป็น system label color ไม่ใช่ค่า custom ไม่อย่างนั้นมันจะดูไม่เข้าพวกตอนที่ accent-color เปลี่ยน HIG ของ Apple เข้มงวดเรื่องนี้ด้วยเหตุผล
รางวัลของการทำสามอย่างนี้ให้ถูกคือสุดท้ายแล้วคุณจะเลิกเห็น pill มันกลายเป็นส่วนหนึ่งของ menu bar ไปเลย — เหมือนนาฬิกา เหมือน battery — และคุณจะมองมันอย่างตั้งใจเฉพาะตอนที่รู้สึกว่ามีอะไรผิดปกติ
Dropdown: ทุกอย่างใน scroll เดียว
Click ที่ pill แล้ว panel จะหล่นลงมา การตัดสินใจว่าจะใส่อะไรลงใน panel นี้คิดเป็น 60% ของงาน design สำหรับ Timex 1.0
นี่คือสิ่งที่อยู่ในนั้น จากบนลงล่าง ตามลำดับที่คุณเห็นเมื่อมองที่ dropdown ของ menu bar:
- App ที่ active อยู่ตอนนี้ ตัวใหญ่ด้านบน พร้อม duration ของ session ที่กำลังรันอยู่ทางขวา ข้อมูลเดียวกับ pill ที่นำมาแสดงซ้ำตรงนี้เพราะ pill อยู่ในการมองด้านข้างของคุณ ส่วนตรงนี้คือที่ที่คุณมองจริง ๆ
- Label TODAY และเวลารวมที่ track วันนี้
- Next break in X พร้อมปุ่ม play เล็ก ๆ ไว้ start เองถ้าอยากพักตอนนี้
- ตัวนับ break ("1 breaks") และ ตัวนับ hydration ("2/12") พร้อมปุ่ม minus/plus แบบรวดเร็ว
- Stat icon เรียงเป็นแถว — ตา ยืดเส้น ขา ท่านั่ง เดิน หายใจ — แต่ละอันมีตัวเลขเล็ก ๆ ของวันนั้น
- App list ของวันนี้ เรียงตามเวลาที่ใช้ แต่ละแถวแสดงจุดประจำ app ชื่อ app และเวลารวม
- แถว action ด้านล่าง — ห้า icon สำหรับห้าสิ่งที่คุณจะทำจริงจาก panel นี้
ลำดับมีความหมาย สิ่งที่คุณกำลังทำอยู่ตอนนี้อยู่บนสุดเพราะนั่นคือคำตอบของคำถามที่พบบ่อยที่สุด ("ฉันถูก track ถูกต้องไหม?") ยอดรวมระดับวันตามมาเพราะนั่นคือคำถามที่พบบ่อยรองลงมา App list อยู่ท้ายสุดเพราะกว่าคุณจะมากวาดสายตาดู app list คุณก็อยู่ในโหมด "ดูทั้งวัน" แล้ว และก็อาจจะเปิด Today view เต็ม ๆ ไปเลยก็ได้
สิ่งที่เราตัดออก
คำถามที่ยากกว่าไม่ใช่ว่าจะใส่อะไร แต่คือจะตัดอะไรออก
เราไม่แสดง ค่าเฉลี่ยของสัปดาห์ที่แล้ว ใน dropdown เราไม่แสดง productivity score เราไม่แสดง goal หรือ target เราไม่แสดง notification เมื่อถึงหมุดหมาย เราไม่มี prompt แบบ "คุณควรทำอะไรดี"
ทุกอย่างที่ว่ามาถูกหยิบมาคุยและถูกตัดด้วยเหตุผลเดียวกัน: panel บน menu bar มีไว้ตอบคำถามที่คุณมีอยู่แล้ว ไม่ได้มีไว้สร้างคำถามใหม่ Dock คือที่ของ app ที่เรียกร้องว่า "มองฉันสิ" Menu bar คือที่ของ app ที่ตอบว่า "กี่โมงแล้ว" เมื่อคุณถาม
ที่ใกล้จะละเมิดกฎนี้ที่สุดคือแถว stat icon เราคิดจะตัดมันออกสำหรับ v1 — ตัวนับการยืดเส้นสายตาควรอยู่บน menu bar ไหม? — แล้วตัดสินว่ามันคู่ควรกับที่ทางของมันเพราะ ข้อมูลสุขภาพที่เหลือบเห็นได้เปลี่ยนพฤติกรรม ถ้าฉันเห็น "วันนี้ eye break 1/11" โดยไม่ต้องออกจาก panel ฉันจะทำ 20-20-20 ตรงนั้นเลย ถ้ามันต้อง switch หน้าต่าง ฉันจะไม่ทำ ต้นทุนของแถวนี้คือพื้นที่แนวตั้งสองบรรทัด ประโยชน์ หลังจากใช้มาสามเดือน มีความหมายจริง
แถว action ด้านล่าง
Icon ห้าตัวที่ด้านล่างของ panel ถูกใช้มากที่สุดรองจาก app list จากซ้ายไปขวา:
- Window — เปิด Today view เต็ม ๆ ในหน้าต่าง ตัวใหญ่ที่มี strip 24 ชั่วโมง
- Coffee — start break เอง มีประโยชน์ถ้าคุณรู้ว่าต้องการพักก่อนที่ timer จะ fire
- Gear — settings เราพยายามอย่างหนักที่จะใส่ไว้ตรงนี้ให้น้อยที่สุด ค่า default ควรใช้งานได้
- Runner — pause/resume การ track ใช้น้อยอย่างน่าแปลกใจ คนที่คิดว่าตัวเองต้องการมันมักจะ pause ไม่บ่อยจริง
- Building — switch data context สงวนไว้สำหรับ multi-profile support ในอนาคต (นึกถึง "work" vs "personal") v1 เป็น single-profile แต่ icon อยู่ตรงนั้นเพราะ data model รองรับไว้แล้ว
ลำดับเป็นแบบหลวมไปแน่น: action ที่ใช้บ่อยที่สุด (เปิด Today view) อยู่ซ้ายสุด ที่หายากที่สุด (switch context) อยู่ขวาสุด ไม่มีปุ่ม Quit ใน dropdown — Quit อยู่ใน context menu คลิกขวาของ pill การ quit time tracker เป็น action ที่ตั้งใจทำ ไม่ใช่ tap-target
Menu bar tracker เจ้าอื่น ๆ
มีคู่แข่งหลายเจ้าที่อยู่ในย่านเดียวกัน และการเทียบ design บอกอะไรเราบางอย่าง
Tyme มี pill บน menu bar ที่สวย แต่ตัว app เป็นแบบ project-driven — คุณเลือก project แล้ว start timer Menu bar มีไว้จัดการ manual timer คนละ product คนละแรงกดดันด้าน design
Timing มี element บน menu bar ที่แสดงชื่อ task ที่กำลัง track อยู่พร้อม live timer เล็ก ๆ สะอาดกว่าของ Toggl แต่ panel ด้านล่างแน่นและให้ความรู้สึกเหมือน desktop app ที่ถูกยัดลงใน dropdown
Toggl Track มี item บน menu bar ที่ส่วนใหญ่เป็นแค่ launcher ของ dock app คุณ click แล้วหน้าต่างใน dock ก็เด้งขึ้นมาด้านหน้า Menu bar เป็นของแถม ไม่ได้รับน้ำหนักอะไร
Screen Time ของ Apple เอง ไม่มี item บน menu bar เลย จะดูวันของคุณต้องเปิด System Settings เจาะลงไปสามชั้น แล้วอ่าน chart ที่ update วันละครั้ง
สิ่งที่แต่ละเจ้าขาดไป — อย่างน้อยในมุมของเรา — คือ glanceability ของ app ที่ active ไม่มีเจ้าไหนแสดงบน menu bar เองว่า "นี่คือ app ที่คุณกำลังถูก track ในชื่อนี้ และมันรันมานานเท่านี้" นั่นคือคำตอบแรกที่ pill ควรให้ เราทำให้มันเป็นสิ่งสำคัญที่สุดที่ pill ทำ
สิ่งที่ menu bar ทำไม่ได้
ฉันอยากบอกขีดจำกัดเองก่อนที่คนอื่นจะบอก
Menu bar ไม่ใช่ที่ที่คุณทำ analysis เชิงลึก Today view ในหน้าต่างปกติ คือที่ที่คุณ scrub timeline เจาะลงไปใน app ดูทั้งสัปดาห์ Panel บน menu bar คือการเช็คเร็ว ๆ อย่าพยายามทำ Today view ซ้ำใน dropdown — มันจะอึดอัด text จะเล็กเกินไป และ chart จะใส่ไม่พอดี เราลองมาแล้ว มันไม่เวิร์ค Dropdown แสดงสรุป หน้าต่างแสดงรายละเอียด
Menu bar ยังถูกจำกัดโดย macOS ในแบบที่ผู้ใช้ส่วนใหญ่ไม่ทันสังเกต คุณทำให้ item บน menu bar สูงกว่าตัว menu bar ไม่ได้ คุณมี content ที่ animate ตรงนั้นไม่ได้ (จริง ๆ ทำได้ แต่ OS จะซ่อน icon ของคุณไว้ใต้ "more icons" บ้างในกรณี menu bar แคบ) คุณแสดงรูปที่สูงเกิน ~22 pixel ไม่ได้ ทุก design decision ใน pill เกิดขึ้นภายใต้ข้อจำกัดเหล่านี้
รูปทรงที่ก่อตัวขึ้น
หลังจาก iterate มาหนึ่งปี รูปทรงของ menu bar tracker ลงตัวเป็นอะไรที่เรียบง่าย:
- pill หนึ่งอันที่บอกชื่อ app ที่ active ใส่สีให้มัน และจับเวลาให้มัน
- panel หนึ่งอันที่สรุปทั้งวันใน scroll เดียว
- ปุ่มห้าปุ่มสำหรับห้าสิ่งที่คุณจะทำจริง
- Today view เต็ม ๆ ในหน้าต่าง สำหรับตอนที่อยากดูแบบจริงจัง
งาน design ส่วนใหญ่คือการตัดสิ่งที่ไม่คู่ควรกับที่ทางออกไป Timex version ที่ ship ออกไปอยู่ห่างจาก version ที่ฉัน sketch ครั้งแรกไปหลายรอบของ "เราไม่ต้องการสิ่งนี้" การตัดออกแต่ละครั้งทำให้ menu bar ละเลยได้ง่ายขึ้นอีกนิด จนกว่าคุณจะต้องใช้มัน
นั่นคือบททดสอบ ถ้าคุณต้องเรียนรู้วิธีใช้ app บน menu bar แสดงว่า design ล้มเหลว ตัวที่ดีจะหายไปใน menu bar และกลับมาเฉพาะตอนที่คุณเรียกหา
เปิด pill แล้วดูว่ามันเกะกะทางคุณน้อยแค่ไหน