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

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

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

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

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

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

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

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

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

В тексте:

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

В вёрстке:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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