Toggl मेरे dock में छह महीने एक icon की तरह रहा, फिर मैंने उसे delete कर दिया।

यह delete करना कोई principled decision नहीं था। बात बस यह थी कि हर बार जब मैं cmd-tab करता और मेरी नज़र Toggl के badge पर पड़ती, मैं सोचता "क्या मैंने timer start किया था?" और जवाब आमतौर पर नहीं होता, और फिर मैं अगले नब्बे सेकंड उस पर switch करके जो भी कर रहा था उसका timer start करने में गँवा देता, और फिर भूल जाता कि मैं क्या कर रहा था। Dock icon उस tool के लिए एक attention sink था जिसे असल में गायब हो जाना था।

Timex का जो पहला version मैंने बनाया वह भी एक dock app था। मैंने उसे अपने ही dock से दो दिन में delete कर दिया। Menu bar version ने अगले हफ़्ते उसकी जगह ली और फिर कभी नीचे वापस नहीं आया।

यह कोई छोटा design choice नहीं है। "Dock" और "menu bar" के बीच का फ़र्क़ वही है जो ध्यान माँगने वाले tool और वहाँ बैठे रहने वाले tool जहाँ तुम पहले से नज़र डालते हो के बीच होता है। एक tracker के लिए, इन दोनों में से सिर्फ़ एक ही सही है।

Dock पूछता है। Menu bar बताता है।

macOS dock एक launcher है। उसमें रहने वाले icons वे applications हैं जिन पर तुम switch करने का इरादा रखते हो। Visual weight ज़्यादा होता है। Hit target बड़ा होता है। Cmd+Tab list में वे शामिल होते हैं। वे सब expectation से भरे होते हैं।

Menu bar इसका उल्टा है। यहाँ छोटा-सा status रहता है — clock, battery, Wi-Fi, और वे utilities जिन्हें तुम बिना सोचे check करते हो। Visual weight कम होता है। तुम menu bar app पर switch नहीं करते। तुम उस पर नज़र डालते हो।

एक time tracker एक glance होना चाहिए। यह सवाल "मुझे जिस active app के रूप में track किया जा रहा है वह क्या है" का जवाब बिना context switch के मिलना चाहिए। Dock placement एक switch के लिए मजबूर करता है। Menu bar placement नहीं करता।

इसीलिए हम dock icon भेजते ही नहीं। न option के तौर पर। न किसी togglable preference के तौर पर। Timex principle के तौर पर एक menu-bar-first app है — Today view तब एक window में खुलता है जब तुम माँगते हो, लेकिन Timex खुद तुम्हारी Cmd+Tab list में नहीं बैठता। तुम्हारे ध्यान के लिए कम competition।

Pill: 220 pixels और एक काम

Timex जो menu bar slot घेरता है उसे हम pill कहते हैं। यह active app name के हिसाब से लगभग 220 pixels चौड़ा होता है। इसके अंदर रहता है:

  • एक colored dot (strip से per-app color)
  • अभी focused app का नाम
  • तुमने उस पर कितनी देर बिताई, वह duration

बस इतना ही पूरा status है। जब तुम Xcode से Slack पर switch करते हो, pill green-Xcode-12m से blue-Slack-0s तक animate होती है। Dot का color उसी palette से आता है जो Today view में इस्तेमाल होती है, तो menu bar इस बात का एक one-pixel preview है कि तुम strip पर कहाँ दिख रहे हो।

तीन constraints ने इसे मुश्किल बना दिया।

Width budget असली है। एक long-running session ("Visual Studio Code · 2h 14m") को बग़ल वाले AirPlay या battery icons को भीड़ में डाले बिना fit होना पड़ता है। ज़रूरत पड़ने पर हम window titles को aggressively truncate करते हैं, लेकिन app name पवित्र है — अगर pill में "Cursor" दिखता है, तो तुम्हें "Cursor" पढ़ पाना चाहिए।

Pill को 1 Hz पर बिना flicker redraw होना पड़ता है। हर सेकंड duration आगे tick करती है। अगर redraw लापरवाह हो, तो menu bar visually हिलती है। macOS इस region में sub-pixel-stable text के लिए ज़्यादा tools नहीं देता, तो हम rendered text को cache करते हैं और सिर्फ़ तब re-render करते हैं जब digit सचमुच बदलता है।

Dark mode और light mode का feel एक जैसा होना चाहिए। Dot palette को दोनों backgrounds पर काम करना था। Text color को system label color होना चाहिए, कोई custom value नहीं, वरना accent-color बदलने के दौरान वह जगह से बाहर लगेगा। Apple की HIG इस बारे में एक वजह से सख़्त है।

इन तीनों को सही कर लेने का इनाम यह है कि आख़िरकार तुम pill को देखना बंद कर देते हो। यह बस menu bar का हिस्सा बन जाती है — clock की तरह, battery की तरह — और तुम इसे consciously सिर्फ़ तब देखते हो जब कुछ गड़बड़ लगता है।

Dropdown: एक ही scroll में सब कुछ

Pill पर click करो और एक panel नीचे गिरता है। इस panel में क्या डालना है यह decision Timex 1.0 के design work का 60% था।

यहाँ क्या है, ऊपर से नीचे, उसी order में जो तुम menu bar dropdown देखते समय पाते हो:

  1. अभी active app, ऊपर बड़ा, दाईं ओर running session duration के साथ। Pill जैसा ही data, यहाँ दोहराया गया क्योंकि pill तुम्हारी peripheral में है और असल में तुम यहाँ देखते हो।
  2. TODAY label और आज का total tracked time।
  3. Next break in X, एक छोटे play button के साथ अगर अभी break चाहिए तो manually start करने के लिए।
  4. Break counter ("1 breaks") और hydration counter ("2/12") quick minus/plus buttons के साथ।
  5. एक row में stat icons — eye, stretch, legs, posture, walk, breathing — हर एक के साथ दिन का एक छोटा count।
  6. आज की app list, बिताए गए time से sorted, हर row में per-app dot, app name और total time।
  7. नीचे action row — पाँच icons उन पाँच कामों के लिए जो तुम असल में इस panel से करोगे।

Order मायने रखता है। जो तुम अभी कर रहे हो वह सबसे ऊपर है क्योंकि वही सबसे आम सवाल ("क्या मुझे सही track किया जा रहा है?") का जवाब है। Day-level totals उसके बाद आते हैं क्योंकि वह अगला सबसे आम सवाल है। App list आख़िर में आती है क्योंकि जब तक तुम app list scan कर रहे हो, तुम पहले ही "दिन देखो" mode में हो और तुम पूरा Today view भी खोल सकते हो।

हमने क्या बाहर रखा

मुश्किल सवाल यह नहीं था कि क्या डालें। मुश्किल यह था कि क्या छोड़ें।

हम dropdown में पिछले हफ़्ते का average नहीं दिखाते। हम productivity score नहीं दिखाते। हम goals या targets नहीं दिखाते। हम milestone hits के लिए notifications नहीं दिखाते। हमारे पास "तुम्हें किस पर काम करना चाहिए" वाला कोई prompt नहीं है।

इनमें से हर एक पर बात हुई और एक ही वजह से काट दी गई: menu bar panel का काम उन सवालों का जवाब देना है जो तुम्हारे पास पहले से थे। उसका काम नए सवाल खड़े करना नहीं है। Dock उस app की जगह है जो "मुझे देखो" माँगती है। Menu bar उस app की जगह है जो "टाइम क्या हुआ" का जवाब तब देती है जब तुम पूछते हो।

इस rule को तोड़ने के सबसे क़रीब हम stat icons row पर पहुँचे। हमने इसे v1 के लिए काटने पर सोचा — क्या eye stretch count की जगह menu bar में है? — और तय किया कि यह अपनी जगह कमाती है क्योंकि glanceable wellness data behavior बदलता है। अगर मैं panel छोड़े बिना "आज 1/11 eye breaks" देख सकता हूँ, तो मैं वहीं 20-20-20 कर लूँगा। अगर इसके लिए window switch चाहिए, तो नहीं करूँगा। इस row की क़ीमत vertical space की दो lines हैं। फ़ायदा, तीन महीने इस्तेमाल के बाद, meaningful है।

नीचे का action row

Panel के नीचे के पाँच icons app list के बाद सबसे ज़्यादा इस्तेमाल होते हैं। बाएँ से दाएँ:

  • Window — पूरा Today view एक window में खोलता है। वही बड़ा वाला 24-hour strip के साथ।
  • Coffee — एक break manually start करता है। उपयोगी अगर तुम्हें पता है कि timer fire होने से पहले एक break चाहिए।
  • Gear — settings। हम बहुत कोशिश करते हैं कि यहाँ बहुत कम रखें। Defaults काम करने चाहिए।
  • Runner — tracking pause/resume। हैरानी की बात है कि यह बहुत कम इस्तेमाल होता है। जो लोग सोचते हैं कि उन्हें यह चाहिए, वे आमतौर पर ज़्यादा pause नहीं करते।
  • Building — data context switch करता है। भविष्य के multi-profile support के लिए reserved (सोचो "work" vs "personal"); v1 single-profile है लेकिन icon यहाँ है क्योंकि data model पहले से इसे support करता है।

Order loose-to-tight है: सबसे ज़्यादा इस्तेमाल होने वाला action (Today view खोलना) सबसे बाएँ है; सबसे दुर्लभ (context switch) सबसे दाएँ। Dropdown में कोई Quit button नहीं है — Quit pill के right-click context menu में है। एक time tracker को quit करना एक deliberate action है, कोई tap-target नहीं।

बाक़ी menu bar trackers

कुछ competitors उसी मोहल्ले में रहते हैं, और design comparison तुम्हें कुछ बताती है।

Tyme की menu bar pill ख़ूबसूरत है लेकिन app project-driven है — तुम एक project चुनते हो, एक timer start करते हो। Menu bar manual timer manage करने के लिए है। अलग product, अलग design pressure।

Timing का एक menu bar element है जो अभी tracked task का नाम एक छोटे live timer के साथ दिखाता है। Toggl के मुक़ाबले cleaner, लेकिन नीचे का panel dense है और एक desktop app जैसा लगता है जिसे dropdown में ठूँस दिया गया हो।

Toggl Track का एक menu bar item है जो ज़्यादातर dock app का launcher है। तुम click करते हो और dock window सामने आ जाती है। Menu bar incidental है, load-bearing नहीं।

Apple का अपना Screen Time का कोई menu bar item है ही नहीं। अपना दिन देखने के लिए तुम System Settings खोलते हो, तीन levels गहराई में जाते हो, और एक chart पढ़ते हो जो रोज़ एक बार update होता है।

इनमें से हर एक में जो चीज़ कम है — कम से कम हमारे नज़रिए से — वह है active app की glanceability। इनमें से कोई भी menu bar में ही यह नहीं दिखाता कि "यह वह app है जिसके रूप में तुम्हें track किया जा रहा है, यह इतनी देर से चल रही है"। यह पहला जवाब है जो pill को देना चाहिए। हमने इसे pill का सबसे ज़रूरी काम बनाया।

Menu bar क्या नहीं कर सकती

मैं limits ख़ुद बता देना चाहता हूँ, इससे पहले कि कोई और बताए।

Menu bar वह जगह नहीं है जहाँ तुम deep analysis करते हो। Today view, एक regular window में, वह जगह है जहाँ तुम timeline scrub करते हो, apps में drill करते हो, हफ़्ते को देखते हो। Menu bar panel एक quick check है। Today view को dropdown में replicate करने की कोशिश मत करो — वह तंग होगा, text बहुत छोटा होगा, और chart fit नहीं होगा। हमने कोशिश की। नहीं चला। Dropdown summaries दिखाता है। Window detail दिखाती है।

Menu bar macOS से भी ऐसे तरीक़ों से limited है जिन्हें ज़्यादातर users notice नहीं करते। तुम menu bar item को menu bar से ऊँचा नहीं बना सकते। तुम वहाँ animated content नहीं रख सकते (वैसे रख सकते हो, लेकिन OS कभी-कभी एक छोटी menu bar में तुम्हारे icon को "more icons" के नीचे छिपा देगा)। तुम ~22 pixels से ऊँची images नहीं दिखा सकते। Pill में हर design decision इन्हीं constraints के तहत होता है।

जो shape उभरा

एक साल की iteration के बाद, menu bar tracker का shape कुछ simple-सा बन गया:

  • एक pill जो active app को name करती है, उसे color देती है, और उसका time गिनती है
  • एक panel जो दिन को एक scroll में summarize करता है
  • पाँच buttons उन पाँच कामों के लिए जो तुम असल में करोगे
  • एक window में पूरा Today view, उन मौक़ों के लिए जब ध्यान से देखना हो

ज़्यादातर design work उन चीज़ों को काटना था जो अपनी जगह नहीं कमा रही थीं। Timex का जो version ship हुआ वह उस version से कई "हमें इसकी ज़रूरत नहीं" rounds दूर है जो मैंने पहली बार sketch किया था। हर removal ने menu bar को थोड़ा और आसान बना दिया ignore करने के लिए — जब तक कि तुम्हें इसकी ज़रूरत न पड़े।

यही test है। अगर तुम्हें menu bar app इस्तेमाल करना सीखना पड़े, तो design fail हुआ। अच्छे वाले menu bar में गायब हो जाते हैं और सिर्फ़ तब वापस आते हैं जब तुम पूछते हो।

Pill खोलो और देखो यह तुम्हारे रास्ते में कितना कम आती है।