Toggl провисел у меня иконкой в доке полгода, прежде чем я его удалил.
Удаление не было принципиальным решением. Просто каждый раз, когда я делал cmd-tab и взгляд цеплялся за бейдж Toggl, я думал «а я запустил таймер?», ответ обычно был «нет», и тогда я терял следующие девяносто секунд, переключаясь на него, чтобы запустить таймер для того, чем занимался, а потом забывал, чем занимался. Иконка в доке была стоком внимания для инструмента, который должен был исчезать.
Первая версия Timex, которую я собрал, тоже была приложением в доке. Я удалил её из собственного дока через два дня. Версия для строки меню заменила её на следующей неделе и больше вниз не вернулась.
Это не мелкое дизайн-решение. Разница между «доком» и «строкой меню» — это разница между инструментом, который требует внимания, и инструментом, который сидит там, куда вы и так бросаете взгляд. Для трекера правильный только один из них.
Док спрашивает. Строка меню сообщает.
Док macOS — это лаунчер. Иконки, которые там живут, — это приложения, на которые вы намерены переключиться. Визуальный вес высокий. Зона нажатия большая. Список Cmd+Tab их включает. Все они нагружены ожиданием.
Строка меню — противоположность. Это место, где живёт небольшой статус — часы, батарея, Wi-Fi, сменный набор утилит, которые вы проверяете не задумываясь. Визуальный вес низкий. Вы не переключаетесь на приложение в строке меню. Вы бросаете на него взгляд.
Трекер времени должен быть взглядом. На вопрос «как называется активное приложение, под которым меня сейчас трекают» нужно отвечать без переключения контекста. Размещение в доке вынуждает переключение. Размещение в строке меню — нет.
Именно поэтому мы вообще не поставляем иконку в доке. Ни как опцию. Ни как переключаемую настройку. Timex — приложение menu-bar-first из принципа: вид «Сегодня» открывается в окне, когда вы его запрашиваете, но сам Timex не сидит в вашем списке Cmd+Tab. Меньше конкуренции за ваше внимание.
Пилюля: 220 пикселей и работа, которую надо сделать
Слот строки меню, который занимает Timex, — это то, что мы называем пилюлей. Она примерно 220 пикселей шириной в зависимости от имени активного приложения. Внутри живёт:
- Цветная точка (цвет приложения из полосы)
- Имя приложения, на котором сейчас фокус
- Длительность, которую вы на нём провели
Это весь статус. Когда вы переключаетесь с Xcode на Slack, пилюля анимируется из зелёного-Xcode-12m в синий-Slack-0s. Цвет точки берётся из той же палитры, что и в виде «Сегодня», так что строка меню — это однопиксельный предпросмотр того, где вы появляетесь на полосе.
Три ограничения сделали это трудным.
Бюджет ширины реален. Долгая сессия («Visual Studio Code · 2h 14m») должна поместиться, не тесня иконки AirPlay или батареи рядом. Мы агрессивно обрезаем заголовки окон, когда нужно, но имя приложения свято — если «Cursor» появляется в пилюле, вы должны суметь прочитать «Cursor».
Пилюля должна перерисовываться на 1 Гц без мерцания. Каждую секунду длительность тикает вперёд. Если перерисовка неаккуратная, строка меню визуально дёргается. macOS не даёт много инструментов для субпиксельно-стабильного текста в этой области, поэтому мы кэшируем отрендеренный текст и перерисовываем только тогда, когда цифра действительно меняется.
Тёмная и светлая темы должны ощущаться одинаково. Палитра точек должна была работать на обоих фонах. Цвет текста должен быть системным цветом метки, а не кастомным значением, иначе он будет смотреться чужеродно при смене цвета акцента. HIG Apple строг на этот счёт не просто так.
Награда за то, что эти три сделаны правильно, — в том, что со временем вы перестаёте видеть пилюлю. Она просто становится частью строки меню — как часы, как батарея — и вы сознательно смотрите на неё только тогда, когда что-то ощущается не так.
Выпадающая панель: всё в один скролл
Кликните по пилюле — и опустится панель. Решение о том, что положить в эту панель, составило 60% дизайн-работы над Timex 1.0.
Вот что там есть, сверху вниз, в том порядке, в котором вы видите, когда смотрите на выпадающую панель строки меню:
- Текущее активное приложение, крупно сверху, с длительностью идущей сессии справа. Те же данные, что и в пилюле, повторённые здесь, потому что пилюля в вашем периферийном зрении, а сюда вы действительно смотрите.
- Метка СЕГОДНЯ и общее отслеженное время за сегодня.
- Следующий перерыв через X, с маленькой кнопкой play, чтобы запустить его вручную, если хотите перерыв сейчас.
- Счётчик перерывов («1 breaks») и счётчик гидратации («2/12») с быстрыми кнопками минус/плюс.
- Иконки статистики в ряд — глаз, растяжка, ноги, осанка, ходьба, дыхание — каждая с небольшим счётчиком за день.
- Список приложений за сегодня, отсортированный по затраченному времени, в каждой строке точка приложения, имя приложения и общее время.
- Ряд действий внизу — пять иконок для пяти вещей, которые вы действительно будете делать из этой панели.
Порядок важен. То, чем вы заняты прямо сейчас, наверху, потому что это ответ на самый частый вопрос («меня трекают правильно?»). Дневные итоги следуют, потому что это следующий по частоте вопрос. Список приложений идёт последним, потому что к моменту, когда вы просматриваете список приложений, вы уже в режиме «посмотреть на день» и с тем же успехом можете открыть полный вид «Сегодня».
Что мы оставили за бортом
Более трудным был вопрос не что положить. А что выбросить.
Мы не показываем среднее за прошлую неделю в выпадающей панели. Мы не показываем оценку продуктивности. Мы не показываем цели или таргеты. Мы не показываем уведомления о достижении вех. У нас нет подсказки «над чем тебе стоит поработать».
Каждое из этого обсуждалось и было вырезано по одной причине: панель строки меню должна отвечать на вопросы, которые у вас уже были. Она не должна вводить новые вопросы. Док — место для приложения, которое требует «посмотри на меня». Строка меню — место для приложения, которое отвечает «который час», когда вы спрашиваете.
Ближе всего к нарушению этого правила мы подошли с рядом иконок статистики. Мы рассматривали вырезать его для v1 — место ли счётчику растяжки глаз в строке меню? — и решили, что он заслуживает своё место, потому что данные о самочувствии с одного взгляда меняют поведение. Если я вижу «1/11 перерывов для глаз сегодня», не покидая панель, я сделаю 20-20-20 прямо там. Если это потребует переключения окна — не сделаю. Цена ряда — две строки вертикального пространства. Польза, после трёх месяцев использования, ощутима.
Нижний ряд действий
Пять иконок внизу панели используются больше всего после списка приложений. Слева направо:
- Окно — открывает полный вид «Сегодня» в окне. Тот большой, с 24-часовой полосой.
- Кофе — запускает перерыв вручную. Полезно, если знаете, что он вам нужен, до того, как сработает таймер.
- Шестерёнка — настройки. Мы изо всех сил стараемся положить сюда очень мало. Значения по умолчанию должны работать.
- Бегун — пауза/возобновление трекинга. Используется на удивление редко. Те, кто думает, что хочет этого, обычно на деле паузят немного.
- Здание — переключает контекст данных. Зарезервировано под будущую поддержку нескольких профилей (думайте «работа» vs «личное»); v1 — однопрофильная, но иконка здесь, потому что модель данных это уже поддерживает.
Порядок от свободного к плотному: самое используемое действие (открыть вид «Сегодня») — крайнее слева; самое редкое (переключение контекста) — крайнее справа. В выпадающей панели нет кнопки «Выход» — «Выход» в контекстном меню по правому клику на пилюле. Закрыть трекер времени — намеренное действие, а не цель для нажатия.
Другие трекеры в строке меню
Несколько конкурентов живут в том же районе, и сравнение дизайна кое-что вам говорит.
Tyme имеет красивую пилюлю в строке меню, но приложение проектно-ориентированное — вы выбираете проект, запускаете таймер. Строка меню — для управления ручным таймером. Другой продукт, другое дизайн-давление.
Timing имеет элемент в строке меню, который показывает имя текущей отслеживаемой задачи с маленьким живым таймером. Чище, чем у Toggl, но панель ниже плотная и ощущается как настольное приложение, втиснутое в выпадашку.
Toggl Track имеет элемент в строке меню, который в основном лаунчер для приложения в доке. Вы кликаете — и окно из дока выпрыгивает на передний план. Строка меню второстепенна, не несущая.
Собственный Screen Time от Apple вообще не имеет элемента в строке меню. Чтобы увидеть свой день, вы открываете Системные настройки, спускаетесь на три уровня вглубь и читаете график, который обновляется раз в день.
Чего не хватает каждому из них — по крайней мере с нашей точки зрения — это обзорности с одного взгляда активного приложения. Ни один из них не показывает, в самой строке меню, «вот приложение, под которым тебя трекают, вот сколько это длится». Это первый ответ, который должна давать пилюля. Мы сделали это самым важным, что делает пилюля.
Чего строка меню не может
Хочу назвать пределы, прежде чем это сделает кто-то другой.
Строка меню — не место для глубокого анализа. Вид «Сегодня», в обычном окне, — это место, где вы прокручиваете таймлайн, углубляетесь в приложения, смотрите на неделю. Панель строки меню — быстрая проверка. Не пытайтесь воспроизвести вид «Сегодня» в выпадашке — будет тесно, текст будет слишком мелким, а график не поместится. Мы пробовали. Не вышло. Выпадашка показывает сводки. Окно показывает детали.
Строка меню также ограничена macOS способами, которых большинство пользователей не замечает. Нельзя сделать элемент строки меню выше самой строки меню. Нельзя иметь там анимированный контент (ну, можно, но ОС иногда спрячет вашу иконку под «больше иконок» в узкой строке меню). Нельзя показывать изображения выше ~22 пикселей. Каждое дизайн-решение в пилюле принимается под этими ограничениями.
Форма, которая проступила
После года итераций форма трекера в строке меню устоялась в нечто простое:
- Одна пилюля, которая называет активное приложение, окрашивает его и считает его время
- Одна панель, которая сводит день в один скролл
- Пять кнопок, чтобы сделать пять вещей, которые вы действительно будете делать
- Полный вид «Сегодня» в окне — для тех случаев, когда хочется присмотреться
Большая часть дизайн-работы была вырезанием вещей, которые не заслуживали своего места. Версия Timex, которая вышла, отстоит на несколько раундов «нам это не нужно» от версии, которую я набросал первой. Каждое удаление делало строку меню чуточку легче игнорировать — пока она не понадобится.
Это и есть тест. Если приходится учиться пользоваться приложением в строке меню — дизайн провалился. Хорошие исчезают в строке меню и возвращаются только тогда, когда вы спрашиваете.
Откройте пилюлю и посмотрите, как мало она путается под ногами.