На интерфейсном курсе: форма слишком сложная

Илья Бирман — Thu, 14 Nov 2024 12:21:04 +0500

Разбираем интерфейс ввода адреса в форме. Получилось слишком сложно: от пользователя требуется огромная внимательность при заполнении. Смотрим на золотой стандарт: поле поиска по всему интернету. 4 минуты:

Также есть на ВК-видео.

Это фрагмент № 154 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 17 ноября 2023 года.

Идёт запись на курс, который пройдёт 7 декабря — 5 января. Сейчас −20% из-за ранней записи.

Почитать о курсе

Программа, отзывы, запись

Как нормально обрезать текст

Илья Бирман — Sun, 23 Oct 2022 00:38:11 +0500

Илья Бирман:

На днях я рассказывал, как хреново работает Фейсбук с длинными постами: обрезает в случайном месте, теряет место чтения при разворачивании. А как надо? Давайте сначала разберёмся с обрезанием.

Обрезать в случайном месте — это неуважение к автору и тексту и лишнее подтверждение тому, что Фейсбуку плевать, что вы там пишете. И это пример лютой технозависимости: машине проще всего резать по определённому числу символов, вот она и режет. За этим даже нет эстетического резона вроде «вместиться в определённый элемент дизайна» (что тоже было бы неуважением к автору и тексту, но хотя бы имело бы гуманистические корни), потому что физический размер строк одинаковой длины в символах в общем случае может отличаться в разы (iii — ЮЮЮ). Даже в моём примере из Фейсбука до конца строки влезло бы ещё несколько слов:

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

Почему-то анал в этом случае — главный чемпион:

Больше примеров — у меня в телеграме.

Соответственно, если без обрезания не обойтись, то обрезать надо аккуратно. Как делает Эгея?

Число символов, в которое нужно уложиться, считается примерным ориентиром, а не точным значением. Если нужно уложиться в 140 символов, а текст имеет длину 143, то Эгея просто не будет его трогать. Если текст заметно длинее предела, то Эгея разделит его на предложения и постарается взять столько полных предложений, сколько влезет. Вот, например, сниппет этой заметки:

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

В общем Эгея будет стараться сделать как можно ближе к нужной длине, но так, чтобы смысл не пострадал.

Казалось бы, если я могу такое напрограммировать, то что мешает Фейсбуку? Да то, что никому даже в голову не приходила идея, что есть хоть какой-то смысл стараться сделать хорошо, просто нет такого понятия в мире Фейсбука даже.

Но что же делать, если у вас дизайн, и вам ну вот прям надо уложиться в определённый прямоугольник, плюс-минус слово никак нельзя?

Тогда вместо многоточия можно прятать не влезающие штуки под градиент. Например, наложить его на последнюю строчку текста, как сделано в бюролекциях:

Важно, чтобы градиент был достаточно длинным, чтобы не было разрыва на конкретной букве.

Блоги: заметки с тегом технозависимость

На интерфейсном курсе: форма слишком сложная

Как нормально обрезать текст