UX Notes
23K subscribers
59 photos
3 videos
1 file
1.03K links
В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Download Telegram
Игорь Штанг написал о современной русской пунктуации на примере упаковки умной розетки Яндекса.

— Название компании написано кириллицей, но не в кавычках. Яндекс может себе это позволить: название на слуху, это имя собственное, упаковка — не юридический документ;
— Нет точек в конце отдельно стоящих предложений (что нормально). Но при этом точек нет и в конце пунктов списка, состоящих из нескольких предложений (внутри там точки есть);
— Переносы стоят только там, где необходимо. Это позволяет контролировать форму текста, и правый край набора получается аккуратным.

#typography
Игорь Штанг написал, что делать с текстом в скобках (например).

— Скобки — парный знак препинания. Они больше шумят и занимают места, чем запятая или иной одинарный символ;
— «Аренда телеги (за час)» → «Аренда телеги, за час» или «Аренда телеги / за час»;
— Можно убрать знаки препинания и выделить текст кеглем, цветом или начертанием и таким образом создать визуальный слой. Скобки на такое не способны;
— Если примечаний много или они однотипные, их стоит сгруппировать в отдельной колонке или в другом отдельном блоке.

#typography
Дарья Райт написала о кернинге.

— Кернинг — изменение интервала между двумя символами в зависимости от их размера и формы. При наборе текста между парой символов может появиться неправильное расстояние. Кернинг позволяет скорректировать пространство между ними, чтобы улучшить читаемость текста;
— Леттер-спейсинг в отличие от кернинга применяется ко всей строке, а не выбранной паре букв;
— Чтобы успешно выполнять кернинг, текст на экране надо увеличивать. Чем больше масштаб, тем точнее изображается шрифт и пробелы между буквами;
— При этом для достижения желаемого результата (одинаковые пробелы во всём фрагменте текста) желательно видеть весь фрагмент;
— Каждая буква должна находиться точно по центру между двумя соседними, то есть она должна занимать пассивную позицию между соседями;
— Также в статье много ссылок на дополнительные материалы и инструменты.

Канал Оди, для блога которого Дарья подготовила материал. #typography
Илья Бирман написал об обрезании текста.

— Обрезание длинного текста в случайном месте (например, для анонса) — неуважение к автору и тексту. Обрезание по определённому числу символов даже не позволяет получить ровный прямоугольник текста, так как ширина символов может отличаться в разы (iii — ЮЮЮ);
— Иногда это приводит к искажению текста и появлению нежелательного смысла. «Илон Маск начнёт продавать каменный анал…», «Чипсы со вкусом горя»;
— Число символов, в которое надо уложиться, стоит считать примерным ориентиром;
— Если текст немного длиннее, его можно не трогать;
— Если заметно длиннее — разделить на предложения и попытаться взять столько полных предложений, сколько влезет;
— Если в результате получилось слишком мало или предложение не влезло целиком — поискать другие признаки безопасных мест: точки с запятой, тире, запятые, скобки;
— Если ничего этого нет — ориентироваться на пробелы;
— Если и пробелов нет, тогда можно резать по символам;
— Если надо уложиться в определённый прямоугольник, можно наложить на последнюю строку градиент. Важно, чтобы он был достаточно большим — так не будет разрыва на конкретной букве.

Канал Ильи. #typography
В Альфа-Банке поделились результатами исследования, как форматирование текста влияет на восприятие и эмоции читателя. И подробностями дизайна исследования.

— Когнитивная нагрузка бывает внутренней (связана со сложностью материала) и внешней (связана с его подачей). Последней мы можем управлять;
— Респонденты читали один из двух текстов с условиями обслуживания: первый был без форматирования, второй — с подзаголовками, списками и таблицами;
— Чтение неформатированного текста вызвало более высокую когнитивную нагрузку. Респонденты больше концентрировались на чтении и меньше прокручивали текст. И посчитали его более тяжёлым для восприятия;
— Содержание какого текста лучше запомнилось? Статистически значимой разницы не было, но можно осторожно предположить, что форматированный текст запоминается лучше;
— Оба текста вызвали негативные эмоции, но сплошной текст вызвал намного больше злости.

Ставьте 👍 если у вас теперь есть аргументы наконец-то отформатировать тот самый текст. А 🫡 отвечает сегодня за реакцию «Спасибо, Кэп». #typography
Игорь Штанг (уже давно) написал о висячей пунктуации из 120-го параграфа «Ководства».

— Оптическое выравнивание — когда вы слегка свешиваете дефисы, запятые, точки и прочую мелочь, чтобы граница текста казалась ровной;
— Вынос на поле — когда вы ставите буллиты или цифры на поле, чтобы обозначить особые части текста. С вынесенными буллитами сразу понятно, что перед нами список;
— Висячая пунктуация — вынос за линию набора налево кавычек, скобок, буллитов — ни то, ни другое. Для оптического выравнивания знаки слишком тяжёлые, а для выноса — указывают на случайные, а не особые части текста;
— Сама студия давно отказалась от висячей пунктуации в своих книгах и новой версии сайта. Странно, что параграф 120 ещё не исчез из «Ководства».

Канал Игоря. #typography
Илья Кретов написал об интерфейсном тексте и типографике. Некоторые советы:

— Сокращайте использование кавычек. Например, названия разделов можно писать с заглавной буквы или выделять полужирным начертанием: «Ищите треки в разделе Коллекция»;
— Разделяйте узким пробелом разряды числа, сумму и знак рубля, числа и среднее тире в диапазоне;
— Чтобы написать −25%, используйте знак минуса (а не дефис) и не отделяйте его от числа пробелом;
— Написанный только заглавными буквами текст слишком эмоционален, кричит. Лучше использовать его максимум в кнопках или бейджах;
— Связывайте текст кнопки с заголовком: «Подключить услугу? [Подключить]». Если любите Conversational Design, когда вместо «Подключить» пишут «Да, хочу!», убедитесь, чтобы кнопка была рядом с заголовком, иначе смысл может потеряться;
— Пишите эмоционально нейтрально: «Вы не можете продолжить без регистрации» → «Для продолжения необходимо авторизоваться»;
— Учитывайте адаптивность. Самая важная информация должна вмещаться на самые маленькие экраны;
— Текст на экране должен быть понятен без контекста. Лучше строить его на именительном падеже: «Какого настроения соберём плейлист? [Весёлого] [Грустного]» → «Под какое настроение соберём плейлист? [Весёлое] [Грустное]».

Канал Ильи. Копия статьи на VC. #writing #typography
Роб МакКоган написал о влиянии типографики на восприятие и поведение.

— Более контрастный цвет повышает разборчивость текста и делает его более убедительным;
— Более сложный для восприятия шрифт (Brush Script против Arial) усложняет чтение и стимулирует критичное отношение к написанному, что помогает заметить подвох. Если таким набрано задание, оценка времени его выполнения будет больше (в эксперименте — почти в 2 раза);
— Есть ассоциативная связь между словами и формой. Слово «Кики» — угловатая форма, «Буба» — обтекаемая. Используя подходящую или неподходящую форму, можно создать гармонию или конфликт;
— Когда шрифт соответствует смыслу, такой текст читают быстрее. Например, Truck и шрифт Impact, Flower и шрифт Snell Roundhand;
— Если типографика оптимизирована, человек меньше устаёт и лучше потом решает задачи на сообразительность;
— При рецензировании научных материалов положительные оценки чаще получали статьи с иллюстрациями, подготовленными графическими дизайнерами (а не учёными).

In English. #typography