Scott
Сокращать название безопасно только тогда, когда оставшийся текст позволяет узнать нужный объект, а полное значение можно прочитать при необходимости. Если три документа начинаются одинаково, многоточие в конце может сделать их неразличимыми. Аккуратный столбец бесполезен, если скрывает именно то отличие, ради которого человек открыл список.
Начните с продуманной системы типографики интерфейса, затем определите, какие части названия важны для задачи. Уменьшать шрифт, пока всё не поместится, — значит заменять проблему представления информации проблемой читаемости.
Найдите часть названия, от которой зависит выбор
Представим окно выбора материалов проекта с тремя файлами:
- Northstar_customer-onboarding_research-notes.pdf
- Northstar_customer-onboarding_flow-v03.pdf
- Northstar_customer-onboarding_flow-v04-approved.pdf
Пользователю нужна утверждённая схема. Начало имени указывает на проект, а окончание отличает нужный файл. Если узкая панель показывает все три как «Northstar_customer-on…», она скрывает как раз ту информацию, без которой нельзя сделать выбор.
Прежде чем выбирать способ отображения текста, определите, какая часть значения помогает узнавать, сравнивать и использовать объект. Название клиента бывает узнаваемо с первых слов; в имени файла могут быть важны расширение и обозначение версии в конце; идентификатор записи иногда нужно видеть целиком. Одно положение многоточия не подойдёт для всех трёх случаев.
Возьмите для макета реальные крайние варианты: короткое значение, обычное, необычно длинное и несколько значений, различающихся только ближе к концу. Случайный длинный текст выявит переполнение, но может совсем не выявить проблему распознавания.
Дайте переносу строк оправдать занимаемое место
Если названия — основное содержимое, перенос часто оказывается самым понятным решением. Две строки сохраняют больше отличительных признаков, не превращая список в сплошной текст. В окне выбора материалов перенос имени файла может быть полезнее декоративной миниатюры рядом с ним.
Разная высота строк влияет на весь список. Продумайте выравнивание дополнительных сведений, сохраните понятную связь действий с нужным объектом и не позволяйте длинному названию вытолкнуть единственный элемент управления за пределы панели. Проверяйте несколько длинных строк подряд, а не одну среди удобных коротких.
Ограничение числа строк не отменяет правила раскрытия полного значения. Если третье имя файла не помещается и в две строки, определите, где его можно целиком прочитать и скопировать. «Две строки» — ограничение макета, а не гарантия, что значимая часть текста уместится.
Для значений без естественных мест разрыва, например идентификаторов и длинных строк без пробелов, согласуйте перенос с разработчиками. Разбиение отображаемого текста на строки не должно добавлять символы в копируемое значение.
Ставьте многоточие там, где оно скрывает наименее важный фрагмент
| Способ | Когда полезен | За какой проблемой следить |
|---|---|---|
| Перенос строк | Значение важно, а дополнительная высота помогает выполнить задачу. | Действия отрываются от своего объекта или список из длинных строк становится трудно просматривать. |
| Многоточие в конце | Начальные слова обычно различают объекты, а полное значение остаётся доступным. | Одинаковые начала скрывают значимые окончания, версии или уточнения. |
| Многоточие в середине | И начало, и конец содержат признаки, по которым можно узнать объект. | С каждой стороны остаётся слишком мало текста или реализация разрывает важную последовательность символов. |
| Короткое название и подробности | У объекта действительно есть понятное человеку название, отдельное от полного идентификатора. | Автоматическое сокращение делает разные записи одинаковыми или выглядит как изменение исходного значения. |
Для нашего окна выбора вариант «Northstar_…_flow-v04-approved.pdf» сохраняет указание на проект и отличительное окончание. Его стоит проверить, но нельзя заранее считать правильным. При ещё меньшей ширине окончание может занять столько места, что проект станет неузнаваем. Тогда перенос или отдельное представление подробностей могут оказаться понятнее.
Справочник MDN по text-overflow объясняет, как обозначить обрезанный текст. Само свойство не создаёт переполнение и не даёт способ прочитать значение целиком. Для сокращения в середине также нужна подходящая реализация: нельзя нарисовать произвольный вырез по центру и считать, что его воспроизведёт одна настройка CSS.
Используйте многоточие как сигнал пропущенного текста, а не украшение после полного значения. Сохраняйте исходное имя. При копировании имени файла обычно нужно копировать его целиком, а не сокращённый вариант с экрана.
Откройте доступ к полному значению не только по наведению мыши
Подсказка при наведении может дополнить короткое название на устройстве с указателем, но не должна быть единственным способом прочитать важный текст. На сенсорном экране нельзя надёжно рассчитывать на наведение, а при работе с клавиатурой нужен доступный элемент управления. В зависимости от задачи полезнее могут быть раскрываемая строка, панель подробностей, явно подписанное действие или страница самого объекта.
Если нажатие на имя открывает файл, у него уже есть основное действие. Не делайте так, чтобы первое касание неожиданно показывало подсказку, а второе открывало файл. Когда это важно, разделяйте открытие, выбор и раскрытие сведений. В нашем примере строка может выбирать материал, а понятное действие «Подробности» — показывать полное имя, тип и версию.
Если дополнительное содержимое появляется при наведении или фокусе, пояснения WCAG к критерию 1.4.13 описывают возможность скрыть его, навести на него указатель и удерживать его видимым, с оговорёнными исключениями. Подсказка, которая исчезает по пути указателя к ней или перекрывает следующий элемент управления, не подходит для надёжного чтения.
В реализации обеспечьте доступ к полному тексту через подходящую семантику и проверьте, как его озвучивают вспомогательные технологии. Не добавляйте без проверки вторую доступную подпись, из-за которой название будет прочитано дважды. Визуальное и программное представления должны однозначно указывать на одну и ту же выбираемую запись.
Сравните одинаковые названия на двух ширинах в Pixso
Создайте в файле Pixso набор примеров содержимого: панель выбора шириной 280 px и таблицу шириной 640 px. Это тестовые размеры для упражнения, а не универсальные контрольные точки. Разместите все три имени файла в обоих макетах. Сравните перенос, многоточие в конце и предложенное сокращение в середине, не меняя сами строки ради более красивого варианта.
Рядом с компактным списком покажите выбранное состояние и подробности с полным именем. Попросите коллегу найти утверждённую схему и скопировать её полное имя. Если для различения приходится открывать каждый файл, компактное представление не решает задачу, даже когда текст нигде не выходит за границы.
Отметьте, какие фрагменты должны оставаться видимыми и где доступно полное значение. Предлагаемую логику сокращения в середине опишите в примечаниях для разработки. Статичный фрейм показывает желаемый результат, но реальную обработку текста нужно проверять в реализации.
Сравнить макеты с длинным текстом в Pixso →
Иногда нужно изменить макет, а не сократить текст
Не скрывайте полезную часть сообщения об ошибке ради карточек одинаковой высоты. Текст «Нельзя отправить, пока…» не помогает действовать, если условие исчезло. Дайте сообщению перенестись на следующую строку или переместите его в подходящую постоянно видимую область.
То же относится к суммам, предупреждениям о безопасности, уточнениям статуса и названиям действий. «Удалить выбранные…» может скрыть, что именно будет удалено. Пропущенный знак минуса или единица измерения делают значение неверным по смыслу. Сначала определите приоритет информации и только потом решайте, безвредно ли многоточие.
Если компактный интерфейс постоянно требует больших всплывающих блоков для объяснения собственных подписей, пересмотрите плотность. Уберите второстепенные сведения, осознанно вынесите подробности на следующий уровень или дайте больше ширины тексту, по которому узнают объект. Сравнение подсказок, всплывающих панелей и диалогов (на английском) поможет, когда дополнительному содержимому действительно нужно отдельное пространство, но не должно становиться обходным решением для каждой тесной строки.
Повторите проверку, когда изменится текст
Количество символов не определяет ширину строки для разных шрифтов, языков и письменностей. Переведённое название может переноситься иначе, отсутствующий шрифт — менять размеры, а увеличение текста пользователем — занимать запас места, на который рассчитывал исходный макет. Проверяйте поддерживаемые письменности и более длинные локализованные значения в том же взаимодействии, а не только в отдельном образце типографики.
Проверьте список на узком экране и с увеличенным текстом, затем откройте полные значения с клавиатуры и на сенсорном устройстве. Убедитесь, что индикаторы фокуса и действия остаются видимыми, а копирование возвращает исходные данные. Для окна выбора материалов итоговый вопрос прост: можно ли без догадок отличить утверждённую схему от исследовательских заметок и старой версии?
