7 заметок с тегом

таблица

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

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

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

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

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

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

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

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

22 мая   копирование   таблица

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

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

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

В тексте:

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

В вёрстке:

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

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

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

Способ получения Стоимость
Бесплатно
Сообщает оператор
300 рублей

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

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

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

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

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

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

Пн 10...16
Вт 11...15 17...18
Ср 11...12 14...18
Чт 11...13 15...16 18...19
Сегодня Пт 11...19
Сб, Вс 10...19
2018   интерфейс   информация   таблица

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

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

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

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

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

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

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

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

2018   интерфейс   компактность   таблица

Криптовотч

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

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

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

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

2018   интерфейс   разряды   таблица
Ранее Ctrl + ↓