Кирилл Беляев: заметки с тегом таблица

Копирование таблицы с финмоделью

Кирилл Беляев — Tue, 22 May 2018 14:41:27 +0300

Разбирался с экономикой аэротрубы. Какой порог входа в бизнес, какой возврат на инвестиции, через сколько возвращаются инвестиции, какие главные расходы и риски.

Нам дали экселевский файл, который помогает потенциальным клиентам примерить этот бизнес. Там пять вкладок, на которых ячейки ссылались друг на друга 773 раза без учёта ссылок на ссылки.

Как в таком разобраться? «Берёшь и разбираешься» — хороший ответ, но что делать непонятно. Можно посмотреть куда ведёт одна ячейка, потом вторая. С таким методом опасно что-то не понять и не заметить этого.

Как разобраться не придумали. Но придумали, как добавить пользы — передизайнить таблицу, чтобы повысить читаемости, и перенести в Гугл-таблицы, чтобы упростить доступ и связываться с ней через АПИ.

В итоге я сделал копию. Не копи-пейст, а повторил всё руками, убедившись, что цифры сходятся. Ну и как следствие — разобрался в работе модели.

Сергей Сурганов писал, что перерисовывал скриншоты Фейсбука, чтобы разобраться, как они делают дизайн. В классе рисунка и живописи копирование мастеров — тоже один из методов.

Похоже, копирование — универсальный способ познания.

Подзаголовки, ломающие переключатель

Кирилл Беляев — Fri, 11 May 2018 12:40:31 +0300

Встретил в магазине такой переключатель:

С первого раза не осилил. Тут вроде нормальная структура: подзаголовок + радиокнопка для каждого элемента. Но выбрать пункт, не читая его подзаголовок, не получится. Выписал проблемы, чтобы понять что мешает.

В тексте:

пара «подзаголовок — лейбл к радиокнопке» в разных пунктах согласована по-разному (2-й лейбл вообще выглядит ошибкой, как будто не оттуда скопировали);
в 1-м пункте повторяются «Самовывоз» и во 2-м — «Доставка», скорее всего, дубли навязывает структура.

В вёрстке:

подзаголовки ближе к предыдущим лейблам;
подзаголовок предполагает, что пункты внутри него не связаны с пунктами внутри других подзаголовков, но тут это не соблюдается.

Думаю последний пункт самый важный. Радиокнопки говорят, что это один переключатель, а подзаголовки разбивают переключатель на три. Из этого выходит, что починить текст, не трогая вёрстку, не выйдет.

После перевёрстки повторы и рассогласованность ушли сами:

Способ получения	Стоимость
Самовывоз	Бесплатно
Доставка в регионы РФ	Сообщает оператор
Доставка по Санкт-Петербургу	300 рублей

Предположение о часах работы

Кирилл Беляев — Thu, 03 May 2018 12:35:18 +0300

На странице заведения Форсквер показывает часы его работы. Если время не указано точно, сервис предполагает, опираясь на чекины. Я за такие штуки, потому что они добавляют пользы.

Проектируя похожие блоки, важно показывать, что это именно предположение и на основе всего оно сделано. С этим у Форсквера хорошо, но остальное в блоке подано слабо:

Он контекстно меняет порядок дней недели, что мешает сформировать привычку.
Не пушит, какой сегодня день недели, хотя это может помочь принять вспомнить, что сегодня сюда не нужно или ещё что-то в таком духе.
Каждому часу добавляет мусорные «:00», хотя все данные округлены до полных часов.
Отдельные приветы «Полудню» и диапазону «Сб — Вс».

Делал бы так. Если данные точные, заголовок будет просто «Открыто до 19:00».

Судя по чекинам, открыто:

	Пн	10...16
	Вт	11...15	17...18
	Ср	11...12	14...18
	Чт	11...13	15...16	18...19
Сегодня	Пт	11...19
	Сб, Вс	10...19

Уплотнение столбцов в таблице

Кирилл Беляев — Fri, 26 Jan 2018 13:19:31 +0300

Таблицы удобнее читать, когда столбцы стоят плотно и взгляд не перепрыгивает большие дыры, идя по строке. Второй плюс узких столбцов — их больше влезает в ширину экрана. Особенно это актуально в информационно насыщенных таблицах. Часто узкому содержанию мешают широкие заголовки, как в столбцах Е и F :

Скриншот с сайта университета Мэриленда

Столбцы А...F за 1990-й. Год можно вынести на строку выше и не повторять шесть раз. Этого хватит, чтобы сузить столбцы, но если оставшиеся заголовки будут длиннее подойдёт следующий приём. Показывать буду на таком кусочке:

Повторюсь: приём подойдет только для случаев, когда столбцы связаны по смыслу. Сначала собираю заголовки в один через запятую. И сбиваю содержание плотнее:

Заголовки связаны со столбцами только порядковым положением. Такой связи бывает недостаточно. Поэтому усиливаю связь цветом. Достаточно одного не крайнего столбца на каждые три-четыре столбца. Красить лучше со смыслом, но можно и механически через один:

Теперь нужно придумать, что делать с сортировкой. У исходной таблицы заголовки могли быть кликабельными. Теперь так не получится.

Добавляю линейку, отделяющую содержание от заголовка. Режу её на кусочки по ширине каждого столбца делаю повыше и превращаю в кнопки:

Тестируйте перед внедрением.

Криптовотч

Кирилл Беляев — Tue, 23 Jan 2018 15:48:20 +0300

Смотрите, какой сайт с котировками криптовалют — cryptowat.ch

Терминальный минимализм такой. Я бы побился за меньшее число линеек — много шума от них:

В карточке ещё интереснее:

В стакане одинаковые цифры гасят прозрачностью. Когда отличие в разряде, подсвечиваются всё отличные цифры, а потом «счётчик» обнуляется и только подсвечиваются отличия от последнего «разрядного отличия» (вторые строки снизу и сверху):

Таблицы титрами

Кирилл Беляев — Thu, 18 Jan 2018 15:59:16 +0300

Не верстайте так таблицы, потому что внешне это выглядят как текст с центральной выключкой и именно так начинает читаться. И только споткнувшись раз или два, читатель поймёт, что перед ним таблица:

Если очень хотите титры, раздвиньте колонки сильнее:

Когда первая колонка такая однородная по ширине, левые флаги ещё аккуратнее:

Комментарии к сущностям в системах

Кирилл Беляев — Thu, 21 Dec 2017 12:26:34 +0300

В системах бывают комментарии. Например в ЦРМ у клиента или заказа. Стыдно признаваться, что не жаловал эти поля. Видел их так: чёткого назначения нет, используются раз в сто лет, не укладываются в формат, ломают таблицы.

Крутой Анатолий Буров показал другую сторону. Одно поле комментария расширяет функциональность системы, как несколько полей сразу. Люди могут писать в комментарии что угодно, любые данные, для которых нет полей. С хорошим поиском совсем сказка.

А в таблице можно делать так:

Анатолий Буров добавляет
Комментарии — это дешёвый способ сделать систему устойчивой к изменениям в окружающем мире.

Когда мы выкатываем интерфейс, есть вероятность, что в ближайшие пару лет он будет работать в первозданном виде. При этом условия будут меняться: появятся новые сценарии и новая информация, которые сложно предусмотреть заранее (если б могли предусмотреть, предусмотрели бы :—)

Поля для записей в свободной форме дают людям возможность и дальше использовать старую систему в новых условиях, не страдая от того, что она никак не дорабатывается. Они между собой договорятся, что и как туда записывать — ну, например, хэштегами, — а поиск не даст заблудиться.

А когда разработчики-таки добавят в систему нужные поля, можно будет скриптом перенести хештеги из комментариев в соответствующие структуры. И всем будет счастье.