Позднее Ctrl + ↑

Дважды двусмысленная навигация на Павелецкой

Иду на днях по переходу в Москве, вижу такое:

Читаю на бегу, сам продолжаю идти прямо. Уже пройдя, думаю: что я сейчас увидел? Во-первых, на красном фоне написано, что вход закрыт, но меня зачем-то всё равно в него ведут стрелкой вперёд. Во-вторых, меня ведут туда ещё и стрелкой вправо. Куда в итоге идти, прямо или направо? И зачем мне вообще туда идти, если вход закрыт, открытый-то где?

Возвращаюсь обратно, чтобы сфоткать пример дебилизма в коллекцию. Замечаю, что сверху под загибом мелко написано, что вход закрыт не всегда, а только с 8 до 9 по будням. Окей, с первым противоречием разобразились, просто дизайн тупой.

Но две стрелки по-прежнему противоречат друг другу. Я это называю итальянской навигацией. В Италии на дорогах я не раз встречал рядом знаки типа «Римини прямо» и «Римини направо» — можно ведь и так и так доехать! Это взрывает мозг.

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

На интерфейсном курсе: когда нужны моноширинные цифры

Рассказываю на курсе, что моноширинные цифры нужны в таблицах и в случае динамических данных, показываю примеры. 3 минутки:

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

До 22 декабря идёт запись на курс, который пройдёт с 23 декабря по 21 января.

Дед Мороз принесёт вам мешок новых знаний!

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

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

Заклейка йогурта рвётся вместо того, чтобы отклеиваться

Заклейка йогурта рвётся вместо того, чтобы отклеиваться

Каждый раз, когда такое происходит, я удивляюсь. Вот кому-то поручили придумать, из какого материала должна делаться эта закрывающая заклейка. Как этот сотрудник понял задачу? Какими свойствами должен обладать материал? Когда он сделал, как он сам себе объяснил, почему его решение — удачное?

На интерфейсном курсе: как сделать сетку в форме

Показываю, как навести порядок в размерах полей в форме. Это есть у меня в книге «Пользовательский интерфейс», поэтому показываю прямо из неё. А потом ещё показываю, как это же работает в Эгее. 3 минуты:

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

Книга: «Пользовательский интерфейс»

До 22 декабря идёт запись на курс, который пройдёт с 23 декабря по 21 января.

Дед Мороз принесёт вам мешок новых знаний!

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

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

Классическая проблема настройки пиццы

В Школе бюро есть задание — нужно сделать интерфейс для заказа пиццы с определёнными условиями. В частности, пользователь может настраивать начинку. Половина студентов допускают одну и ту же логическую ошибку — делают настройку прямо в меню.

Вот первая попавшаяся работа. Это главная страница, меню пицц:

Здесь сразу можно убрать мешающие ингредиенты, добавить собственные, выбрать размер и тесто. Видите ли вы проблему?

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

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

То есть какую бы логику вы тут не реализовали, часть пользователей будет ожидать противоположной.

Иногда бывает, что в таком же контексте кнопку «Добавить в корзину» превращают в какую-то считалку типа − 1 + после добавления первой пиццы. Тут мозг окончательно взрывается. Если нажимать плюс несколько раз попеременно с изменением начинки, а потом нажать пару раз минус, невозможно даже предположить, что в итоге окажется в заказе. При этом сценарий «заказать две пиццы с курицей, но одну из них без шампиньонов» — достаточно нормальный, чтобы про него подумать.

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

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

Та же проблема встречается в недавнем интерфейсе с исчезновением при наведении

Проблема решается, если убедиться, что вы даёте настраивать только ту пиццу, которая уже или находится в заказе пользователя, или хотя бы явно «на пути» туда. Первый вариант — пицца сразу добавляется в заказ, состав которого отображается в панели сбоку; там же можно нажать «Изменить начинку» у любой пиццы. Второй вариант — при выборе пиццы она не сразу добавляется в заказ, но сначала появляется промежуточный с настройкой начинки. Кстати, если этот промежуточный экран — попап, то с ним обычно другая проблема: ингредиентам тесно.

ВДНХ и Московский зоопарк

Редкий герой фоторубрики — Москва. Сегодня покажу несколько навигационных штук и наблюдений.

Во-первых — навигация по ВДНХ:

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

Вот кафе «Оттепель»  — тут есть фотка и какой-то багровый фончик:

А вот штука, если зайти в «Москвариум» (глуповатое название океанариума):

Экспонат интересен тем, что сделан очень тупо — пять параллелограммов с иконками и легенда на четверть ширины — но при этом смотрится вполне нормально. Пользы мало, но иногда задача навигации просто «быть» и создавать иллюзию порядка и продуманности. При этом чтобы такое запилить, никакой иллюстратор не нужен. Берём приём на заметку!

Во-вторых, Московский зоопарк. Какой-то приятный широкий гротеск, и градиент этот чёрно-зелёный сверху:

Жираф на диете:

Не мог пройти мимо:

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

Тут комбо разных элементов, все они используются то там, то сям:

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

А тут вообще на какой-то ламинированной штуке:

Вот этот элемент смотрится кайфовее всего, и типографика радует:

Очень люблю, когда на одном фоне используется и чёрный, и белый сразу.

Вот почти оно же, но типографика уже поддельная:

А может просто в исходном шрифте кириллицы не было?

Фотографии из поездки в октябре 2021 года.

Не надо скрывать элементы при наведении

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

Тут тоже почти исчезла:

А тут пропала цена и название:

Видимо, дизайнерам кажется ловким, что они как бы переиспользовали место, но на самом деле это же ужасно раздражает. Люди водят мышкой по странице просто так, причём часто наводят как раз на тот элемент, которым заинтересовались. Очень тупо, что он в этот момент становится невидимым.

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

Хочу подкаст

Я хочу регулярный подкаст, но сам сделать его не могу.

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

Во-вторых, я не представляю себе подкаст в режиме монолога: я воспитан на всяких классических подкастах Дэна Бенджамина — с Джоном Грубером, Марко Арментом, Джоном Сиракьюсой. Все эти ребята в итоге стали делать свои подкасты, но до этого много лет формат был другой. Дэн был не просто интервьюером, который задавал вопросы, а полноценным собеседником, который мог и поспорить с чем-то, и рассказать свою историю в качестве примера, и выбрать тему для обсуждения. Получался полноценный диалог.

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

Вдруг вы такое захотите? Давайте попробуем! Если вдруг пойдёт и станет достаточно популярным для рекламы, то рекламные доходы будем как-нибудь делить. Но даже если нет, по-моему это просто интересно. Пока мне кажется, что записываться раз в две недели было бы самое то.

Эгея 11.3

Вышел очередной апдейт 11-й версии.

Что изменилось

Теперь с Эгеей идёт новый прекресный Нисден 3.0, см. ниже.

Также добавлен автосброс кеша при смене домена, об этом тоже см. ниже.

Ещё ранее в версии 11.2 добавилось переименование файла:

Роберт Блинов обратил моё внимание на то, что это меню сделано буквально так, как я сам учу не делать: в нём кнопка удаления находится предательски близко к часто используемой кнопке «Вставить», из-за чего можно случайно удалить только что загруженный файл.

В 11.3 я сделал минимальное движение, чтобы проблема была не настолько острой — отодвинул удаление за черту:

А ещё теперь картинку вставляет даблклик по ней, чтобы вообще в это меню не ходить.

Что ещё изменилось:

  • видосы с пометкой @loop автозапускаются с большей надёжностью;
  • размер и качество юзерпика теперь можно настроить в конфиге (userpic_size, userpic_jpeg_quality) — для Ильяхова пришлось добавить, а то он здоровенный юзерпик вывел, и ему пикселей не хватало;
  • Лайкли обновились до 3.1;
  • Эгея теперь проверяет наличие библиотеки GD в одной из первых строк, и сразу останавливается, если её нет, вместо того, чтобы удивлять пользователя тем, что с картинками что-то ничего не работает;
  • другие проблемы с обработкой изображений логируются более подробно, чтобы можно было, если что, раскопать, почему не работает.
  • подкрутились цвета тегов в некоторых темах.

Починилась разная эзотерика:

  • если поисковый запрос буквально совпадает с существующим тегом, Эгея показывает этот тег в начале выдачи поиска; так вот, этот тег выводился в том регистре, как было введено в поиск (например, «италия»), а не в том, в котором он реально записан (например, «Италия»);
  • если изменить время публикации заметки, которая была опубликована не в том часовом поясе, где вы находитесь сейчас, оно сохранялось неправильно как раз с разницей между этими часовыми поясами (точнее, оно сохранялось «правильно» в текущем вашем часовом поясе, и съезжало при отображении в часовом поясе заметки);
  • надёжнее отображается информация о сроке действия платной лицензии;
  • теги, которые были запинены в платной или старинной версии Эгеи, продолжали выделяться в списке сильнее даже после перехода на бесплатную версиях, и это никак нельзя было победить.

Нисден 3.0

За обработку форматирования текста в Эгее отвечает форматтер Нисден. Я его написал для Эгеи, но использую кое-где ещё. Это он превращает текст в звёздочках в жирный шрифт, имена загруженных файлов в настоящие адаптивные картинки и играющие песни; умеет узнавать и красиво оформлять списки, таблицы, ссылки; расставлять правильные кавычки и тире, неразрывные пробелы, оживлять ссылки на таймкоды в видео и аудио.

С Эгеей 11.2 шёл Нисден версии 2.87. За время своего существования он оброс кучей хаков и костылей, что мешало его развивать. А мои задумки на 12-ю Эгею потребуют от него намного больше разных умений. Поэтому я взялся переписать его.

С Эгеей 11.3 идёт Нисден версии 3.0. Особых новых фич вы не заметите, они будут потом. Но зато вы можете заметить катастрофическое ускорение обработки текста — иногда в десятки раз. Конечно, обработку одной заметки нормальной длины вы и раньше не замечали: даже если она длилась 0,1 с, это всё равно мгновенно на фоне задержки интернета. Но вообще-то это было очень медленно.

Чтобы убедиться, что новый Нисден ничего не сломает, я протестировал его на одиннадцати тысячах заметок: всём своём блоге и всём блоге Болка — мы оба ведём блоги по двадцать с лишним лет.

Есть и несколько приятных побочных эффектов переписывания более прямыми руками:

  • типограф теперь типографит текст в подписях аудиотреков (да, раньше не умел);
  • если нумерованный список начать с «0.», то он отображался как маркированный, а теперь станет нормальным нумерованным с нуля;
  • если написать два подряд заголовка одинакового уровня, теперь они корректно определяются как два заголовка, а не как один с переносом внутри (а если вы как раз имели в виду перенос строки внутри заголовка, теперь придётся его сделать явно через <br />);
  • таймкоды заработали в загруженном на сервер Эгеи видео (раньше, оказывается, работали только с Ютюбом и Вимео).
  • джаваскрипт для обработки таймкодов в видео теперь подгружается только если вы их используете (раньше подгружался всегда, так как был неотъемлемой частью модуля видео);
  • саммари заметок (отображаются на страницах тегов; передаются в качестве метатега description) стали чище: туда стало попадать меньше мусора, не являющегося текстом заметки, например те же таймкоды.

Это изменения автоматически случатся во всех уже опубликованных заметках. Я считаю их все правильными, но если для вас какие-то из них нежелательны, придётся подкрутить вручную.

Автосброс кеша при смене домена

Также теперь Эгея автоматически сбрасывает весь кеш, если вы запрашиваете её по новому имени домена. Зачем это?

Некоторые пользователи ранее сталкивались такой проблемой. Если хреново настроен сервер так, что одна и та же Эгея открывается по разным доменам (например, с www и без), без редиректа, то Эгея может закешировать свои внутренние ссылки с одним доменом и использовать этот кеш на другом. Например, вы зашли на example.com, потом переходите на конкретную заметку, а она открывается уже с www.example.com. Это выглядело неожиданно и некрасиво.

Хуже всего, если там вместо домена вдруг возникал айпи-адрес, потому что у кого-то сервер открывается прямо по нему! Мне жаловались: «Эгея ставит ссылки на айпи-адрес вместо домена!» А Эгея ничё не ставит, она даже не знает, какой у вас айпи-адрес. Это вы или кто-то зашёл по этому айпи-адресу, а Эгея закешировала ссылки.

Долгое время я считал, что такая кривая настройка сервера — проблема пользователя. Не должно по разным адресам открываться одно и то же! Потом оказалось, что некоторые пользователи пользуются такими хостингами, где настроить редирект невозможно или сложно. Тогда, ещё много версий назад, в конфиге Эгеи добавился параметр preferred_domain_name, чтобы Эгея хотя бы сама могла редиректить на тот домен, который вы считаете каноническим. Но кто ж пойдёт настраивать? Проще пожаловаться мне.

У меня была мысль попробовать как-то переписать кеширование так, чтобы в кеш адреса всегда попадали без домена, а домен к ним пририсовывался уже после вытаскивания их из кеша, но оказалось, что это слишком дофига работы. Поэтому я плюнул и сделал в Эгее тупое правило: если тебя открывают не по тому домену, по которому открывали в прошлый раз, убей все кеши и генерируй все страницы заново.

Это решение никак не меняет того факта, что сервер настроен плохо. Более того, если он у вас настроен плохо, Эгея теперь будет неэффективно использовать кеш, удаляя его каждый раз, когда домен сменился. Нагрузка на ваш неправильно настроенный сервер возрастёт. Но зато снизится нагрузка на меня, связанная с необходимостью разруливать такие ситуации вручную!

Приятный побочный эффект — если вы реально переехали с одного домена на другой, просто перенеся все те же файлы с собой, кеш сбрасывать не придётся.

Как обновиться

Если Эгея у вас оплачена, напишите мне, и я дам вам полную версию 11.3. Если вы пользуетесь сервисом, подождите, пока мы обновим его.

Свежий дистрибутив лайт-версии — в конце страницы «Стать пользователем». Замените папку /system/ новой.

См. также: Что изменилось в файлах с версии 11.2 (или любой другой).

Прошёл первый курс с усиленной практикой

В начале ноября я анонсировал усиление практики на своём интерфейсном курсе. Сейчас закончился первый курс с этими нововведениями. Получилось классно!

Курс идёт четыре недели. Каждую неделю вы получаете порцию лекций, которые смотрите самостоятельно, и делаете набор заданий, которые мы разбираем на общем семинаре в Зуме. Каждый семинар проходит в конце очередной недели. Ну и плюс есть чатик.

Что я изменил:

  1. Теперь тем, кто сделал очередное задание не к семинару, а за первые три дня, я выдаю шпаргалки для самопроверки. Можно сделать ещё одну итерацию работы, и тогда на семинаре обсуждение будет интереснее.
  2. Добавились задания для самостоятельной работы — к ним после сдачи тоже выдаются шпаргалки для самопроверки. Вопросы по ним можно задавать и на семинаре, и в чате, просто мы специально не выделяем время, чтобы все их разбирать.
  3. Тем, кто сделал все задания, включая самостоятельная, а также получил и применил все шпаргалки, выдаются сертификаты с отличием.

Это фрагмент шпаргалки к одному из заданий третьей недели:

Там есть ещё общие соображения и наводящие вопросы, относящиеся ко всем заданиям сразу.

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

Всё сработало отлично! В конце третьего дня каждой недели ко мне приходили друг за другом участники курса за шпаргалками, а на семинарах ссылались на них: «В шпаргалке было то-то, и я подумала сделать вот так...» Ну и в итоге — как минимум трое претендентов на сертификаты с отличием.

Если вы были на курсе больше пяти лет назад, теперь даже есть смысл прийти ещё раз. С тех пор не только все лекции обновились и дополнились, но и вот практика тоже существенно обновилась.

До 22 декабря идёт запись на курс, который пройдёт с 23 декабря по 21 января. Сейчас экономия 10% из-за ранней записи.

Дед Мороз принесёт вам мешок новых знаний!

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

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

Ранее Ctrl + ↓