В большинстве приложений для расходов есть маленький, но постоянный налог, и со временем вы перестаёте замечать, что его платите.
Вы идёте по списку из сорока расходов после поездки и сверяете каждый с банковской выпиской. Нажимаете на один. Приложение уводит вас на другой экран. Вы проверяете сумму, жмёте «Назад» — и снова оказываетесь в начале списка, на сорок строк выше, чем были, и уже не помните, какую строку только что проверили. Умножьте это на сорок.
Решение — не более быстрая страница. Решение — вообще никуда не уходить.
Что на самом деле должен уметь просмотр деталей
Когда вы открываете счёт из списка, должны выполняться сразу четыре условия, а большинство реализаций справляются с двумя:
Вы не теряете место. Список остаётся где был и прокручен так же, а открытая строка выделена, чтобы было видно, где вы.
«Назад» делает очевидное. Закрывает то, что вы открыли, а не уводит с экрана.
У того, что вы смотрите, есть адрес. Обновили страницу — оно на месте. Отправили адрес кому-то — он видит то же, что и вы.
По цепочке можно пройти. В счёте есть человек, у человека есть другие счета. Пройти по этой цепочке можно, не вылетая из списка, который вы читали.
Модальное окно даёт первые два, и то плохо, а третье — никогда. Отдельная страница даёт третье и жертвует первым. Нужно и то и другое, и чтобы получить оба, надо перестать считать «что сейчас открыто» тем, что приложение помнит про себя и никому не показывает.
Положите это в адресную строку
В HiBill всё, что открыто в боковой панели, записывается в URL страницы: транзакция — как ?peek=, человек — как ?person=. Ничего хитрого здесь нет. Просто открытая панель — часть того, где вы находитесь, а где вы находитесь, должна показывать адресная строка.
Всё приятное следует из одного этого решения само собой:
Обновление страницы её сохраняет. Не реконструкция и не догадка, а тот же счёт в том же списке на том же месте прокрутки.
Ссылка — это ссылка. Скопируйте адрес, отправьте тому, с кем делили перелёт, — и у него откроется ровно тот счёт, на который смотрели вы. Правила доступа при этом не меняются: тот, кого нет в транзакции, по-прежнему ничего не увидит, — так что, чтобы отправить счёт человеку без аккаунта, есть другой способ — поделиться транзакцией по публичной ссылке.
«Назад» значит назад. А не «уйти со страницы». Браузер и так хранит историю всего, что вы открывали, поэтому кнопка «Назад» идёт по ней обратно, по одному счёту, и уводит со страницы, только когда история закончится.
Из-за последнего пункта у панели есть и своя кнопка Назад — в самом начале шапки панели. Она не делает ничего сверх того, что делает «Назад» в браузере. Она нужна потому, что на ноутбуке рука лежит на тачпаде, панель — справа, и заставлять человека тянуться к кнопкам браузера, чтобы отменить то, что он сделал в приложении, — маленькая невежливость.
Как пройти по цепочке, не уходя из списка
Четвёртое требование — самое интересное.
Откройте ужин из ленты активности. В разделении четыре имени. Нажмите на одно — и панель не закроется и не отправит вас куда-то ещё, а покажет этого человека: его баланс и ваши общие транзакции. Нажмите на одну из них — и в панели откроется этот счёт.
Можно пройти по цепочке на три-четыре шага — счёт, кто-то из его участников, другой счёт этого человека, — а список, с которого вы начали, ни разу не сдвинется. Потом «Назад», «Назад», «Назад» — и вы ровно там, где были, уже с ответом на вопрос, ради которого всё затевали. Вот и вся функция. Остальное — отделка.
Впрочем, отделка того стоит. Когда открыта транзакция, в шапке панели есть стрелки к предыдущей и следующей: они идут по списку, из которого вы её открыли, в том порядке, в каком он показан. Клавиши ↑ и ↓ делают то же самое. Просмотр расходов за месяц сводится к тому, чтобы держать клавишу и читать, — таким просмотр и должен быть. А на компьютере левый край панели — это ручка, за которую её можно растянуть: 520 пикселей — в самый раз для ужина в две строки и мало для чека на тридцать позиций. Вашу ширину приложение запомнит до следующего раза.
Почему не модальное окно
С модальным окном работы было бы меньше. Мы от него отказались по двум причинам.
Модальное окно убивает список. Он затемнён, не прокручивается и не нажимается. Но список — это контекст: часто хочется сравнить открытый счёт с тремя соседними или прокрутить дальше и открыть что-то ещё. Здесь затемнения нет. Список под панелью остаётся живым, и нажатие на него не захлопывает панель.
Модальное окно перехватывает клавиатуру. Escape в модальном окне может значить только что-то одно, и обычно это «выбросить всё». В панели Escape, пока вы пишете комментарий, выводит вас из поля, а панель закрывается только вторым нажатием. Escape в фильтре на странице за панелью панель вообще не трогает. Мелкие правила, но именно они отличают клавиатуру, которая помогает, от клавиатуры, с которой страшно работать.
Модальное окно уместно в одном месте — на телефоне, где двум вещам рядом не поместиться. Поэтому на телефоне панель занимает весь экран, но адрес всё так же хранит то, что открыто, — значит, ссылка, отправленная с телефона, откроет то же самое у кого-то на ноутбуке.
Посмотрите сами
Это уже работает у всех: на главной, в ленте активности, в разделе «Люди» и в истории на двоих на странице человека. Нажмите на что угодно.
Как всё устроено, подробно описано в статье о транзакциях и людях в боковой панели, а если вы здесь впервые, обзор пошире — в статье о том, как работает HiBill.
Читайте также
Как работает HiBill: простой учёт денег между друзьями — вся модель за одно прочтение: люди, балансы и два вида транзакций.
Как быстро найти общий расход: поиск в группе и у человека — как сузить длинный список до одного счёта, который нужно открыть.
Как исправить общий расход, если он уже сохранён — что можно изменить прямо из панели и что увидят остальные, когда вы это сделаете.