Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Пользовательский интерфейс

Принципы и методы

Элементы

Хотелки и изобретения

Наблюдения

Ещё теги

Позднее Ctrl + ↑

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

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

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

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

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

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

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

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

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

 1 комментарий    655   2018   веб-дизайн   дизайн   Зерулс   пользовательский интерфейс   продукты   проекты

Покупка билетов на электричку в аэропорт Амстердама

Смотрите:

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

 1 комментарий    95   2018   Амстердам   видео   пользовательский интерфейс

Что почитать на выходных — 165

Вот:

  1. Designing Hebrew Type.
  2. Reachability by overscrolling. Написал в английском блоге о том, как делать интерфейс для Айфона ещё лучше.
  3. Software 2.0. Нейросети — это не просто ещё один инструмент в арсенале программиста, а вообще другой вид софта.
  4. Как объяснить дедушке веб-аналитику за 5 минут с картинками.
  5. «Я вижу в сети много эмоциональных комментариев на мою критику экономической программы Навального». Андрей Мовчан сильно про Навального.

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

 1 комментарий    160   2017   Айфон   дизайн   политика   пользовательский интерфейс   программирование   чтиво

Модальность и редактор «Вим»

Читатель книги «Пользовательский интерфейс» Валентин Немцев написал мне интересное письмо про модальность и редактор «Вим». С разрешения Валентина привожу его целиком:

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

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

Я пользуюсь исключительно vim (современная версия vi) для написания кода и хочу рассказать, почему я предпочитаю его всем другим редакторам кода, несмотря на модальность, надеюсь, это будет интересно.

Работа с кодом сильно отличается от работы с обычным текстом: программист редко пишет больше нескольких строчек кода подряд и постоянно вносит довольно сложные и разнообразные правки. В этой ситуации помогает интерфейс, в котором почти на каждую букву назначена команда, которая двигает курсор, меняет текст или делает что-то еще, а для ввода текста сделан отдельный режим. Команды vim вместе образуют что-то вроде языка редактирования текста, знание которого позволяет чувствовать себя свободно при правке кода. Кроме того, для ввода команд мне не нужно тянуться к стрелочкам или мышке, зажимать больше двух клавиш за раз, делать что-то с зажатой кнопкой или нажимать одну и ту же кнопку больше 2-3 раз подряд, как получается в обычных редакторах.

Теперь про модальность. Продвинутые пользователи vim очень редко совершают модальные ошибки. Дело в том, что режим вставки не является режимом в строгом смысле, согласно определению Раскина. Этот режим включают только на время ввода текста, а так как за раз вводится небольшое количество текста, переход в режим вставки, ввод текста и выход из него становятся одним жестом. Это все работает, если ты выучил vim, умеешь печатать вслепую, ну или достаточно уверенно, иначе ввод текста не становится частью жеста и все разваливается.

На самом деле в vim больше десятка режимов, они включаются по-разному, но все они отключаются возвратом в нормальный режим, часть автоматически, когда vim распознает конец команды по смыслу, часть — нажатием esc. Вставка текста ощущается как ввод чего-то в Spotlight, где ты не забываешь нажать enter после окончания ввода. Индикация режимов существует, но нет нужды ей пользоваться. В случае, если в ответ на команду происходит что-то не то (например, из-за опечатки), я нажимаю esc, чтобы вернуть редактор к известному состоянию, после чего отменяю последнюю правку, если она случилась и пробую еще раз.

Вот пример относительно частой операции: я хочу заменить строку в кавычках (включая кавычки), внутри которых сейчас стоит курсор, на имя переменной var. Для этого я набираю ca"var, что можно читать как change text around quotes to «var». Vim переходит в режим вставки после нажатия ", я нажимаю esc, чтобы вернуться в нормальный режим. Описанная выше команда (включая возврат в нормальный режим) вводится в один жест, я не задумываюсь над последовательностью кнопок, не смотрю на индикацию текущего режима и никогда не забываю нажать esc в конце.

Другие интерфейсные решения vim-а позволяют мне отменить операцию из примера выше целиком, одной кнопкой повторять эту же операцию в других местах с другими строками (не вводя опять имя переменной), вставить замененный текст с кавычками куда-нибудь еще, скажем, в присвоение переменной.

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

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

Последний на сегодня интересный факт про vim — его первую версию, vi, создали 40 лет назад для терминалов, у которых появился монитор вместо принтера (отсюда название, visual), а на клавиатуре не было стрелок. Современные версии vim до сих пор используют текстовый программный интерфейс, сделанный для терминалов тех лет. Несмотря на то, что этот интерфейс с тех пор получил поддержку мыши и другие обновления, по своей сути этот интерфейс ближе к телеграфу, чем к современным графическим интерфейсам. MacOS и встроенный в нее Terminal с запущенным vim, работающий на современном макбуке, до сих пор во многом эмулирует клавиатуру и принтер, подключенные по телефонному проводу к мейнфрейму с UNIX.

Спасибо за отличную книгу!

Это всё мне напомнило мои рассуждения про интерфейс пионеровских «Сидиджеев». В заметке я писал, что их интерфейс модален и рассказывал про разные его режимы. Но позже я понял, что на самом деле модальности там нет, потому что в каждый момент времени режим является непосредственным предметом моего внимания, а для модальности необходимо, чтобы режим я не осознавал. Я про такое ещё писал в заметке про прокрутку.

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

 2 комментария    289   2017   книга «Пользовательский интерфейс»   пользовательский интерфейс

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

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

Про последовательность:

Про фильтры:

Про Паскаль:

Про Андроид:

Подписаться на книгу

 3 комментария    126   2017   книга «Пользовательский интерфейс»   пользовательский интерфейс
 1 комментарий    175   2017   доклады   из Тель-Авива   пользовательский интерфейс   студентам
 1 комментарий    77   2017   Андроид   пользовательский интерфейс   портфолио   релиз

Просмотр картинок в браузере

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

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

А вот у Гугля какой-то принтер, скачивалка, многоточие — нахрена это всё? Снизу целых три кнопки для зума, хотя и на компьютере, и на телефоне и так для этого есть все элементы управления.

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

Дроплер всегда вёл себя лучше всех, но в последнее время стал картинку показывать не тегом img, а фоном, поэтому я теперь не могу её из браузера затащить в Фотошоп или сохранить по правой кнопке. Спрашивается, нахрена было ломать то, что работает?

Мало того, что это всё полное говно, так это ж ещё куча человеко-часов потрачена на то, чтобы весь этот ад запрограммировать.

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

 7 комментариев    671   2017   бесит   пользовательский интерфейс

Лекция по теме «Модальность»

Для школ бюро снял лекцию «Модальность»:

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

Только в моём предмете («Интерфейс и информация») таких лекций пара десятков, а самих предметов у нас восемь. Ну и кроме лекций есть ещё литература, тесты и задания. Это на первой ступени. А потом ещё вторая и третья ступень.

Ну короче, смотрите видос.

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

Сейчас идёт набор в наши школы.

 4 комментария    130   2017   видео   лекции   пользовательский интерфейс   студентам   Школа стажёров

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

Недавно мы открыли часть четвёртого раздела электронного учебника «Пользовательский интерфейс». Четвёртый раздел называется «Экраны», а новые главы — «Окна» и «Формы».

Разработчики нередко злоупотребляют окнами, но управление ими не относится к задаче пользователя. Пользователи вынуждены раздвигать их туда‑сюда, чтобы добраться до нужного или увидеть то, что они ищут. Значительная часть главы «Окна» посвящена тому, как не плодить их.

В работе над интерфейсом читателю поможет подборка типовых шаблонов организации окон и варианты их комбинирования.

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

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

 153   2017   книга «Пользовательский интерфейс»   пользовательский интерфейс
Ранее Ctrl + ↓