о подаче информации, айдентике, интерфейсах и жизненной среде.
Посмотреть работы · Поддержать · Подписаться

Позднее Ctrl + ↑

Что почитать про инфографику и какой софт нужно изучать

Борис Веркс спрашивает:

Подруга-ученый спрашивает, что почитать про инфографику и какой софт нужно изучать. Посоветовал Тафти, но, очевидно, нужно и что-то более быстрое. Посоветуй, пожалуйста :-)

Попробую помочь.

У меня с инфографикой беда, писал об этом в заметке «Главное различие визуализации данных и инфографики»:

Визуализация данных и инфографика — это разные вещи. Слова говорят сами за себя, если задуматься. Инфографика — это информационная графика. Графикой иллюстрируют, оформляют и развлекают. «Информационная» тут характеристика, свойство. А визуализация — это отображение, представление чего-то. Это «что-то» — контекст, определяющий о чём речь. Получается, что тут главное — данные. Графика и данные — чувствуете разницу? :—)

И в «Главное различие визуализации данных и инфографики»:

Визуализация данных — инструмент анализа. Она помогает делать выводы. (Поэтому так важно снабжать её органами управления, превращать в интерфейс.)

А инфографика — готовые выводы. Оформленные и структурированные показатели и закономерности.

Из этого следует, что визуализация подходит «анализирующей» аудитории, а инфографика — любой (охват второй шире).

Метафора для закрепления: визуализация — топор, инфографика — дрова.

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

Для меня это комплексная дисциплина. Состоит:
1) из графдизайна и вёрстки с типографикой в небольшой степени,
2) интерфейсов,
3) организации и кодирования элементов, чтобы их можно было сравнивать,
4) и немного статистики и анализа, чтобы, например, понимать, какие данные опустить, чтобы не потерять смысл и улучшить читаемость.

Для первых двух подойдёт всё базовое (Мюллер-Брокман, Чихольд, Харровер, Норман, Раскин и прочие). Тафти я тоже отношу к графдизайну и вёрстке частично.

Для третьего пункта полезно понимать, что это просто сравнение. Если все объекты одинаково значимые, визуализация мало что даст. Книг на эту тему, кроме Тафти, я не знаю, увы. Посоветую серию статей, которые писала Таня Бибикова об алгоритме Δλ. Плюс расшифровку мастер-класса на Хабре, там есть классная сводная таблица:

Ещё тут могут помочь гештальт принципы (и другое из психологии о восприятии зримых образов). Вот заметка Жени Арутюнова восприятии, чтобы понять, о чём это вообще.

Для с четвёртого пунктом у меня совсем туго, лучше у Ромы спросить.

Инструменты вроде все знают. Приложение «Табло», в нём можно почти всё посмотреть, для анализа, который проводят учёные его может хватить с запасом. Но в нём не сделать «красивую» визуализацию для статьи в Нью-Йорк Тамс. Для тех, кто пишет код, может быть интереснее D3.js, на нём можно всё, что захочешь. Ещё знаю о языке R, но на практике не сталкивался.

Удаление выборочных символов при вводе в поле

В интерфейсах бывают специфичные поля, которые не принимает какие-то символы. Например, в телефонном номере или пин-коде не будет букв.
 
Если из лейбла (подписи к полю) очевидно, какие символы не подойдут, незачем разрешать их ввод. Лучше нагрузили компьютер уборкой лишнего и не просить человека что-то стирать.
 
Беспокоить сообщениями о неправильном вводе при этом не нужно. Какой шанс, что человек хотел ввести в номер букву? Подсказка «В номере телефона допустимы только цифры...» только отвлекает. Все знают, что букв там быть не должно: «Спасибо, кэп!»
 
Для таких полей в техзадании для разработчика пишут «нельзя ничего, кроме цифр, скобок, тире и дефисов». Это двусмысленно. Не реагировать на нажатия клавиш, или вводить, а потом стирать?
 
Предлагаю разрешать вводить всё, а после ввода неподходящего символа, сразу его стирать. Сначала кажется, что будет дёргающаяся ерунда. Но она даст пользователю обратную связь. Покажет, что и поле, и клавиатура работают. Ещё покажет, что человек ввёл что-то не то. Вряд ли он хотел писать буквы в телефонный номер, скорее промахнулся. Заметить стирающуюся букву проще, чем не введённую.

Линейки сами по себе не отделяют и не объединяют

Линейки работают вместе с отступами. Сейчас покажу на примере.

На Стандартс-мануал линейки отделяют заголовки, цены, кнопки и прочее от изображений и цитат своего блока. А сами блоки отделяются отступами. Но то ли отступы малы, то ли линейки слишком активные, то ли я прокручиваю быстрее положенного, мне сложно фиксировать границы блоков.

Если просто убрать линейки, блоки собираются и отлично отделяются от соседей:

Если поставить линейки в конце или начале блоков — тоже работает:

Ранее Ctrl + ↓