Представление информации на мобильных устройствах

Andre Revin
4 min readNov 24, 2014

Как правильно переносить данные из таблиц на экран смартфона.

Очевидно, что сначала все данные были на бумаге. Люди пытались анализировать собранные данные, чтобы увидеть общую картину или динамику изменений. Во всех данных интересны пиковые значения, максимальные и минимальные. Люди составляли таблицы данных и графики на бумаге с учетом её особенностей.

Особенности восприятия информации с бумаги

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

Эту таблицу нужно перенести в приложение на экран айфона в портретном режиме. Очевидно, что она не помещается, да и читать её в таком виде трудно.

У человека тоже есть особенность, он может воспринимать в единицу времени ограниченное количество данных. Человек не может охватить всю таблицу сразу, состоящую из 7 строк и 3 колонок, поэтому он использует палец, как указку. Чтобы читать таблицу нужно приложить усилие и самому искать нужные значения. Для удобства восприятия вся информация разбита на части, посмотрите любую газету, например «Нью-Йорк Таймс». Колонка и абзац оптимальная для восприятия человеком часть информации.

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

Особенности экранной графики мобильных устройств

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

Реальная бумажная таблица слева и результат переноса справа. Есть разница?

Как правильно перенести таблицу на экран смартфона?

Очевидно если мы перенесем её, как есть, то данные будет прочитать ещё сложнее, так как размер таблицы должен соответствовать размеру экрана телефона. Будет очень высокая информационная плотность и мелкий шрифт, что затрудняет восприятие.

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

Оптимальный блок данных

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

Исходная таблица не помещается, но строка или оптимальный блок данных великолепно вписался в экран айфона.

Строки и столбцы

Определяем, где лучше поставить ключевые значения строки или столбцы. В данном случае годы с 2000 по 2013 располагаются вертикально и уходят вниз это не правильно. Шкала времени традиционно располагается горизонтально слева направо по оси Х посмотрите проигрыватель Ютуб, прогресс бар загрузки и другие примеры. Используем этот приём.

Мы сделали ещё одно улучшение наглядно представив сухие данные и столбца, теперь нам видна динамика и пиковые значения.

Один год это один экран в нашем случае, где мы спокойно показываем статистику в 1 столбце. Название и значение. Таким образом мы можем добавлять бесконечное количество лет в ось Х и перемещаться между ними жестом свайп, и можем добавлять бесконечное количество названий и значений в столбец и скроллировать вниз и вверх.

Динамика

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

Делаем ещё одно полезное улучшение и показываем маленький график в каждой строке.

Итог

Мы сделали простой для восприятия и удобный график учитывая особенности человека и мобильного интерфейса. Выбрали и показали самое интересное и важное в нашей таблице.

Статья в блоге и проект на Бихенсе