Позднее Ctrl + ↑

Бесплатный Жуэль обновился до третьей версии

Жуэль

Недавно появился новый крутой платный Жуэль-про 3.0 с кастомными элементами управления. С тех пор он уже 3.0.4 — поправили несколько помарок.

Для третьей версии код пришлось взорвать и переписать заново, а бесплатная оставалась в версии 2.3.4 со старым кодом.

Теперь Женя синхронизировал бесплатную и платную ветки. Бесплатная версия стала тоже 3.0.4, и теперь отличается от платной только поддержкой элементов управления. Все АПИ стали одинаковыми и работать стало лучше. Обновляйтесь!

Пример незамкнутости интерфейса

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

Замкнутость — это что-то вроде математически полной продуманности интерфейса, когда все случаи рассмотрены и противоречия разрулены. Может, не очень удачное слово, но пока такое. Я имею в виду, все пути в интерфейсе ведут в какие-то имеющиеся состояния внутри интерфейса.

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

Давайте вот разберём пример.

Скажем, надо сделать поле с автодополнением. Дизайнер рисует поле и показывает, как работает автодополнение:

А потом где-нибудь в описании пишет:

В поле работает автодополнение. Оно помогает ввести значение, которое ранее уже вводили. Если подходящих значений несколько, подставляет в самом поле самое часто используемое, а снизу рисует выпадайку, в которой можно выбрать из них. Достаточно, чтобы совпало хотя бы одно слово, например если уже вводили «ремонт часов», предлагает этот вариант по «ча».

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

На самом деле их несколько, но разберём главный. Что конкретно будет в поле, когда я введу «ча»? Если автодополнение просто дописывает кусок в конце, то «ремонт часов» в поле никак не может появиться.

Дизайнер уходит думать и возвращается с уточнением в описании:

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

А сейчас видите дыру?

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

Судя по добавленной к описанию мысли, выпадайка может появиться, даже если подходящий вариант — один, «ремонт часов». Получается, в выпадайке может быть ничего не выбрано:

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

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

А могу нажать на стрелку вниз, и получится такое:

Так ведь? А что тогда во втором случае, если нажать на стрелку вниз, будет?

Так что ли?

Но это же странно. Он мне как бы с двух сторон дописал, но при этом с одной стороны предвыделил, а с другой нет. И сейчас если нажать бекспейс, уже не останется исходный текст. А могу ли я нажать стрелку вверх, и что при этом произойдёт, вернётся ли «ча» или останется «ремонт ча»? А если я стрелку влево нажму, выпадайка останется или пропадаёт?

Тут дизайнер перестаёт писать описание и начинает латать дыры на лету. Говорит, «давай в этом случае сделаем, чтобы бекспейс стирал всё дописанное и возвращал исходное „ча“, и стрелка вверх тоже».

Но такой патч ничего не замыкает, а только сильнее размыкает. Теперь у нас появляется какое-то особое состояние интерфейса, когда бекспейс работает не как обычно. И надолго ли это состояние сохраняется? Например, если я введу „с“, будет ведь вот так:

И это согласно исходному описанию, безо всяких поправок — ведь сейчас уже начало введённой строки совпадает с началом единственного подходящего варианта, и выпадайка не нужна. Но посмотрите ещё раз на предыдущую картинку. Какого хрена там делала выпадайка в точно такой же на вид ситуации? И почему выпадайка пропала при вводе буквы „с“? Уже совсем трудно предсказать, что сделает бекспейс. Помнит ли он ещё, что слово «ремонт» тут «ненастоящее»?

Это не то, чтобы неразрешимые проблемы. Тут нет никакой проблемы всё аккуратно распутать. Но просто маловероятно, что дизайнер хотя бы увидел сам этот ворох вопросов, если ему показалось, что добавленная им к исходному описанию мысль всё объясняет.

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

Я на этом возьму паузу, а вам всем домашка: замкнуть этот интерфейс.

И ещё почитайте про автодополнение через выделение.

Ещё штуки в Зерулсе 2.0

Хочу ещё рассказать про пару дизайнерских фокусов в новом Зерулсе.

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

Во-вторых, у сайта нет ни логотипа, ни даже заголовка. Кто бы мог подумать, что так можно? Роль логотипа-заголовка играет поле поиска сверху, в котором написано «Поиск по правилам русского языка». Этот текст работает и как подпись к полю, и как название сайта. Подобные подписи в полях обычно пишут бледно-серым, но мы тут сделали исключение именно из-за второй функции этого текста. Сравните со старым сайтом — там я ещё не догадался, что заголовка можно не делать.

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

В-четвёртых, смотрите, как ведёт себя этажик ссылок на Эгею-Раскладку-Главред снизу. При растягивании окна он не тянется, а выравнивается по центру. Но в окне 1024 он левым краем выравнивается строго по левой колонке оглавления. Если бы мы просто оставили так, то при ширине, скажем, 1038, этажик бы «почти, но не совсем» выравнивался с левой колонкой, а это отстой. Поэтому на самом деле он выравнивается с ней строго до некоторой ширины, а после этого уже резко прыгает в центровку. Попробуйте поизменять ширину окна.

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

Наверняка что-то забыл.

См. также страничку о проекте.

Отзыв о рекламе канала Никиты Лялина

Мне написал Никита Лялин, который недавно рекламировал здесь свой канал:

Привет, Илья!

Делюсь результатами рекламы своего канала у тебя в блоге на прошлой неделе.

В первый день я получил 130 подписчиков на канал в телеграме и ещё 40 за пять дней. Люди продолжают подписываться, правда уже понемногу — 1-3 человека в день. В итоге, подписчик мне вышел в 47 рублей и сумма постепенно уменьшается. Для моей тематики и канала — это средняя сумма, но благодаря большому охвату я получил сразу много новых подписчиков.

Хочу ещё отметить качество аудитории, сравниваю по отпискам с другой рекламы. Обычно в течение недели отписывается 10% аудитории, пришедшей по рекламе, а из твоего блога отписалось не больше 3% — это приятный бонус.

Теперь планирую заказать у тебя рекламу в телеграм-канале. Скажем, в марте.

Добро пожаловать!

Напоминаю, что кроме обычной рекламы в блоге и в телеграме можно ещё стать спонсором рубрики «Что почитать на выходных», «Аудио по четвергам» или «Видео по вторникам».

Обратите внимание, что прислав отзыв, Никита бесплатно получил дополнительное упоминание. Если вы размещали у меня рекламу и ещё не присылали отзыв, присылайте, я буду рад его опубликовать. Я опубликую его независимо от того, как вы оцениваете результат — мне важно показать будущим рекламодателям полную картину для принятия решения.

Предыдущий отзыв рекламодателя

Второе издание правил русского языка

Запущена вторая версия сайта «Зерулс» — лучшего веб-издания правил русского языка.

Вместе с Вадимом Юмадиловым мы сделали новый дизайн. Аня Данилова нарисовала прекрасные знаки параграфов. А Виктор Корейша всё сверстал и запрограммировал:

Под капотом по-прежнему умный поисковый движок, который мы с Романом Парпалаком сделали в 2010 году (с ума сойти, как давно это было).

Пользуйтесь на здоровье.

Приём кредитов
Фотография Романа Баранова

Ссылки на всех, у кого есть куда:

На Аню некуда поставить ссылку, поэтому ей просто большое спасибо.

Смотрите также страничку проекта.

Ну и заодно напоминаю, что работает приложение «Зерулса» для Айфона, которое мы сделали с Шуриком Бабаевым.

Стокгольм: аэропорт и связь с городом

Я вам подробно показал стокгольмское метро.

Но в Стокгольме не только метро, у меня ещё дофига всего. Сегодня — аэропорт и связь с городом.

Прибытие:

Прекрасная идея — указать рядом с туалетом в узком коридоре, что дальше есть ещё туалеты:

В зале получения багажа висит красивая реклама автобусов-экспрессов в город:

Шведский белый, английский — жёлтый. У таможни два пробела:

Переход в другой терминал:

Лестница к выходам на посадку. Любопытно, что стрелки и номера выходов — жёлтые, а не белые:

Но мне надо было в город, и автобус-экспресс меня не входновил. Оказалось, что дешевле и интереснее — добраться на перекладных. На обычном автобусе до некоей «Мэшты», и оттуда на электричке.

Улица:

Остановка автобусов:

Автобус 583 до Мэшты:

Почти-селфик из автобуса:

Остановка в Мэште:

Станция электричек — рядом:

Поезда ждут на платформе:

Табличка:

Дверь сама не открывается. Персонажик указывает на кнопку сверху:

Внутри:

Тут тоже реклама в стиле транспортной системы, как я уже показывал в поездах метро. Красиво:

Иконка «не сидеть с ногами на другом кресле»:

Я вышел на центральной станции Стокгольма, а какие-то люди поехали дальше. Персонажик указывает на кнопку снизу:

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

Вылет:

Схема терминала 5:

Фотографии из поездки в июне 2016 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Стокгольм!

Ещё посмотрите:

Про фиды в Телеграме

Пишут, что скоро в Телеграме появится возможность объединять каналы в общий фид. Это фигово по двум причинам.

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

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

Поэтому не забывайте, что самый нормальный способ подписываться на что бы то ни было — это РСС.

Обработка фотографий

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

Вот просто пример того, как фоточка становится веселее от нескольких действий в Лайтруме (это остановка в аэропорту Стокгольма).

Было:

Стало:

Не вижу никаких причин не делать лучше.

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

Телеграм за неделю 14—20 августа 2017

7—13 авг ← → 21—27 авг

Восстанавливаю архив своего канала в телеграме. Сегодня — неделя 14—20 августа.

Понедельник, 14 августа

Безумная крутота — фирстиль пикника Афиши рук Иры Ивановой:
http://afishapicnic.iraivanova.com/

Особенно шрифт:

Дайджест телеграма за неделю 14—20 июля 2017

Вторник, 15 августа

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

Дайджест телеграма за неделю 14—20 июля 2017

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

Дайджест телеграма за неделю 14—20 июля 2017

Бургерный киоск на Флаконе:

Дайджест телеграма за неделю 14—20 июля 2017

Чтобы понять, что все бургеры отличаются только цветом булки, нужно много времени. И то я переспросил. Нужно выносить общее за скобки (если, конечно, нет задачи запутать человека).

То есть просто написать, мол, бургер с тем-то. Булка на выбор: белая, чёрная, красная. Кстати, чем примечательна красная булка (она с вялеными томатами вроде как) можно узнать только у девушки. То есть в меню именно об отличиях бургеров — ни слова

Даже в съёмной квартире первым делом нужно обустроить стоячее рабочее место:

Дайджест телеграма за неделю 14—20 июля 2017

Четверг, 17 августа

Дайджест телеграма за неделю 14—20 июля 2017

Тот случай, когда Оксфордская запятая (перед and) не повредит, а то английский текст можно прочитать и как «пассажирам с беременными женщинами». В русском проблемы нет благодаря падежу.

Пятница, 18 августа

Зачем в этом шрифте отличаются латинская и кириллическая К?

Дайджест телеграма за неделю 14—20 июля 2017

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

Дайджест телеграма за неделю 14—20 июля 2017

Когда в тексте вообще не встречается Ж, можно смело писать в нём латинскую K вместо русской. Разумеется, речь только о заглавной — k в русском тексте писать нельзя.

Воскресенье, 20 августа

Решение проблемы букв Ж и К выглядит так:

Дайджест телеграма за неделю 14—20 июля 2017

Дайджест подготовил Вениамин Векк.

Ранее Ctrl + ↓