Позднее Ctrl + ↑

На интерфейсном курсе: так это форма или мастер?

Участница курса сделала форму, но не даёт заполнять её поля в том порядке, в котором я хочу. Я объясняю, что так нельзя, даже если это и оправдано сценарием, потому что это нарушает базовые ожидания человека от «физического мира» интерфейса. 3 минутки:

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

До 28 октября идёт запись на курс, который пройдёт с 29 октября по 27 ноября.

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

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

Схема автобусов Дербента

Готова новая транспортная схема. На этот раз — Дербент:

Сделали ещё зимой с Никитой Дубровиным. Главная жесть тут была, что большинство маршрутов ходят очень запутанными трассами. Но при этом началась транспортная реформа и всё это начали распутывать. 3, 4, 7 и 10 — распутанные хорошие маршруты. Сморите и шарьте везде!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Аудио по четвергам: Dark Spectral

Хорошо:

Arnaud Le Texier: Dark Spectral

Саундклауд

Если вам нравится музыка, которую я публикую, подписывайтесь на меня на Саундклауде, у меня там живой профиль. Если вы не в теме Саундклауда, это такая первая в истории музыкальная соцсеть, которая реально работает. Рекомендую зарегистрироваться и фоловить тех исполнителей и те лейблы, которые вам нравятся. Поскольку там выкладывают не только своё, но и репостят чужое, в результате вы постепенно узнаёте много новой хорошей музыки. Плюс Саундклауд изучает, что вам нравится, и подбирает ещё и ещё. И у него есть приложение для Айфона, конечно.

Выбор из одной сим-карты на Айфоне

Раньше когда меняешь симку, айфон более-менее сразу спрашивал пинкод от неё. А теперь он зачем-то показывает вот такой интерфейс, где можно и отменить, и пропустить, но при этом даже чтобы ввести чёртов пинкод, нужно сначала выбрать симкарту из списка! Из единственного элемента:

У меня гипотеза, что это появилось, когда появились двухсимочные телефоны, типа теоретически ты можешь вставить сразу две новых симкарты, и надо будет ввести пины от обеих. (Всё равно непонятно, почему я их должен сначала выбрать из списка, но это ладно.)

На днях мы рассказывали об обновлениях вводных лекций в курсе об интерфейсе, и там одна из новых тем в лекции «Технозависимость» как раз называется «1, 10, 100, 1000».

Это про то, что плохие разработчики делают интерфейсы сразу исходя из того, что в нём будет N элементов, не обращая внимания на то, что для разных N будет удобен разный интерфейс. Вот для N=1 данный интерфейс вообще неуместен, а ведь это наиболее верояное значение N.

Идиотская работа «Читать дальше» в Фейсбуке

Ругать отдельные решения в интерфейсе Фейсбука странно, ведь там вообще всё сделано ужасно. Но вот об эту чушь запинаюсь каждый раз и просто не могу понять: как, почему?!

Длинные посты Фейсбук обрезает в случайном месте (дебил) и ставит туда штуку See more. Если её нажать, он разворачивает пост, но не вниз, а вверх! То есть та строчка, которую ты читал и не дочитал, улетает в неизвестном направлении, а перед твоими глазами оказывается что попало:

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

Плитка, баланс и гармония

У меня, как и у всех нормальных людей, ОКР на тему тротуарной плиточки. Типа, наступать на швы надо одинаковое количество раз разными ногами. Или там, если перешагнул ливнесточный жёлоб левой ногой, то потом надо перешагнуть следующий уже правой. В моей жизни царит баланс и гармония.

Сегодня бегал, и особенности в узоре плитки встречались где-то раз в десять метров. Понятное дело, они должны были попадаться в равной степени под разные ноги. Но когда бежишь, не станешь же специально запинаться из-за этого. Хочется, чтобы всё было плавно и естественно, иначе какой тут баланс и какая гармония?

И я заметил, что для этого мне совершенно не нужно думать или что-то рассчитывать! Моё тело идеально само корректирует длину шага так, чтобы всё шло как по маслу. Я просто вижу очередную полоску красных плиток в семи метрах и откуда-то знаю, как бежать, чтобы на следующую наступить другой ногой. Получается, баланс и гармония даются мне легко.

Видео по вторникам: сегментные дисплеи

Чувак интересно рассказывает про семисегментные индикаторы и другие варианты сегментных дисплеев:

Никогда не обращал внимание на то, что ССИ иногда делают с несимметричными сегментами хитрой формы (см. 3:27 в видео).

Выбор страны при вводе телефона

Пример дебильного интерфейса — когда нельзя просто ввести полный номер телефона, а надо обязательно выбрать страну из списка:

Особенно тяжело, когда у тебя там +44. Я не знаю, что искать: UK? United Kingdom? Britain? Great Britain? England?.. Даже если есть правильный ответ на этот вопрос, не факт, что у авторов формы такие же представления.

Отдельная дичь, что тут кастомная выпадайка вместо стандартной, а значит — конечно же — на поддержку клавиатуры все забили и приходится скролить туда-сюда в этой амбразуре.

Что за +44? Спасибо, что спросили! Это Дримсим.

Знак о выделенной полосе

Запилили с Никитой Дубровиным дорожный знак:

В городах, где общественному транспорту только начинают уделять должное внимание, водители ещё не привыкли к «выделенкам», поэтому могут игнорировать знак 5.14 «Полоса для маршрутных транспортных средств». Наш знак объясняет смысл выделенки словами, и заодно обучает стандартным знаку и разметке.

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

Ранее Ctrl + ↓