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

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

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

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

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

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

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

Элементы

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

Наблюдения

Ещё теги

Позднее Ctrl + ↑

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

На этой неделе мы открыли первый раздел книги «Пользовательский интерфейс». Раздел называется «Принципы».

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

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

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

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

У тех, кто оформил предзаказ, время подписки пока не тикает, а первый раздел уже есть.

2017   Бюро   книга   пользовательский интерфейс

Поддельный интерфейс не катит

Это в первую очередь для студентов Школы стажёров, но вообще для всех.

Начинающие дизайнеры интерфейса порой рисуют подделки:

Вот что это за батарейка в ПВУ? Что за поле поиска такое невозможное? В нём всё не настоящее: размеры, углы, тень, расположение иконки и текста.

Или мишень в центре. Откуда она такая? Зачем?

Ещё и от самого телефона тень куда-то вбок падает.

Другой вариант:

Весь статусбар поддельный: не тот размер, не такие кружки, не тот шрифт, не та батарейка. Между статусбаром и тулбаром линейка, которой на настоящем Айфоне нет. В поле поиска тоже всё не настоящее, особенно стирающий крестик справа.

Тут сам телефон поддельный:

Откуда с правой стороны три фигулины торчат? Неужели трудно найти фотографию Айфона и вспомнить, с какой стороны у него что? Что творится с бликами по всему периметру?

Андроид:

В Андроиде я меньше понимаю, но шрифт точно поддельный, да ещё и порендерен чуть ли не на Виндоусе с «Клиртайпом». И поиск на Андроидах выглядит не так.

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

Ещё студентам:

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

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

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

Видосик:

Любимый разворот, где можно попробовать в действии «эффект бесконечных углов»:

Тоже любимый разворот:

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

Предзаказывайте книгу, будет круто.

2017   Бюро   книга   пользовательский интерфейс

Регистрация на рейс «Аэрофлота»

Как вы, возможно, слышали, «Аэрофлот» собирался сделать редизайн своего сайта, а потом рассобирался, сообщив, что не видит в этом необходимости:

Разница в голосах пассажиров между действующим дизайном и дизайном одного из новых вариантов оказалась незначительной — на уровне статистической погрешности (43 голоса или 0,6%). Принимая во внимание, что исследование не выявило явного лидера, а процесс обновления сайта дорогостоящий, «Аэрофлот» не видит необходимости в срочной смене текущего дизайна.

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

Но я вас собрал не за этим. Я хочу вам показать, как устроена регистрация на рейс «Аэрофлота» на существующем сайте, а потом признаться «Аэрофлоту» в любви.

Когда открывается регистрация, приходит письмо:

Здесь уродлива каждая деталь. Зачем-то мне показывают какой-то технический «код бронирования», который меня совершенно не волнует. Единственное, что мне нужно от этого письма — понять, о каком рейсе речь, и нажать кнопку «Зарегистрироваться». Как видите, в письме нет в явном виде ни того, ни другого. Чтобы найти, когда и куда я лечу, нужно внимательно прочитать гору текста. А кнопки «Зарегистрироваться» вообще нет. Зато есть десяток ссылок.

См. Принцип одной ссылки.

Глаз выхватывает «Онлайн регистрацию» (безграмотно написанную без дефиса). Переходим по ней и попадаем сюда:

Добро пожаловать на сайт «Аэрофлота», улучшение дизайна которого «Аэрофлот» (со ссылкой на пассажиров) считает нецелесообразным! Тут простыня текста, начинающаяся с заголовка «Преимущества Онлайн-регистрации» (на этот раз с дефисом, но зато с какого-то перепугу с большой буквы). Как будто мне нужно эту онлайн-регистрацию продавать сейчас, когда я и так пошёл за ней уже сам. Здесь есть и пример посадочного талона в виде ПДФ, с ума сойти.

Но эта страница прокручивается, тут целая гора мусора:

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

В конце — чекбокс с подписью, безграмотно сформулированной в повелительном наклонении (правильно — от первого лица пользователя: «Я ознакомился...»).

После нажатия на кнопку попадаем сюда:

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

(Позже я узна́ю, что если нажимать в письме на ссылку «страницу онлайн регистрации» — безграмотно написанную без дефиса — то сразу попадаешь на следующий шаг.)

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

См. Дизайн веб-форм: в какой момент выводить ошибки.

Ввожу код регистрации (возвращаюсь в письмо, чтобы его посмотреть). Потом ввожу фамилию:

Что значит «неверный формат»? А какой формат верный? Это блин моя фамилия, что тебе надо, тупой сайт!? Оказывается, надо написать фамилию латиницей. Почему не написать это, почему я должен гадать?

Следующий слайд, пожалуйста.

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

Следующий слайд:

(Ой, вёрстка поехала.)

Тут есть кнопки «Регистрация» и «Выберите место» (правильно: «Зарегистрироваться» и «Выбрать место»). Но они не работают. Видимо, потому что не стоит чекбокс напротив моего имени сверху? А он не ставится, потому что ниже написано «Введите информацию». Но какую информацию? Куда ввести?

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

См. Синтаксис элементов интерфейса.

Жмём, открывается окно:

Тут мне надо выбрать, мужчина я или женщина (или бесполый ребёнок), при том, что «Аэрофлот» это знает про меня: я это указывал, когда покупал билеты, а также когда регистрировался на рейс предыдущие сто раз. Заодно обратите внимание на то, насколько чудовищно уродская кнопка про ребёнка. Я уж молчу, что всё написано заглавными буквами.

Выбрать пол недостаточно, окно не пропадёт:

Нужно ещё «Сохранить» (странно, что не написали «Сохраните»). А можно отменить! Ну, вдруг я передумал сообщать «Аэрофлоту» информацию о своём поле?

Но это мне ещё повезло. Иногда в этом окне заставляют ввести полные паспортные данные — все из которых «Аэрофлот» тоже знает и так!

Сохраняю:

Божечки, я готов к регистрации! К десятой картинке достиг готовности! Наконец-то можно перейти к регистрации, ура. Даже можно простить вылезшие непойми откуда синие полосы.

Жму в зелёное «Готов к регистрации», но оно не нажимается. Это уже не кнопка! Хотя красное «Введите информацию», расположенное в том же месте, было кнопкой. Тогда жму «Выберите, дорогой сайт, место»:

Ёлки. Это ещё что? Я уже нажал, зачем мне это показывают? Ну а потому что надо же где-то написать «Для Вашего удобства Вы». Самое время рассказать мне о пользе выбора места, когда я уже сам выразил желание его выбрать.

Снова жму «Выберите, дорогой сайт, место». Попадаю в окно прогресса:

Какой-то дизайнер решил, что надо сделать такое окно, а программист не стал возражать. И пофиг, что у этого процесса в принципе нет понятия процентов завершения и после 0% сразу загорается 100%, пусть будет крутилка.

У крутилки перхоть:

И вот, торжественный момент! На тринадцатом шаге мы видим салон самолёта:

(Ну я не знаю. Тут плохо вообще просто решительно всё, каждый экран нарисован жопой, весь текст тоже написан жопой, и всё запрограммировано жопой.)

Но я отвлёкся. Видите, написано «Нет сиденья назначен»? И я вижу.

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

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

(И зачем-то влепили буквы «Х» на занятых креслах, которых, видите, в старой версии не было.)

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

Во-вторых, нажать «Вернуться»:

Почему я выбрал именно место 11F? См. Выбор мест в самолёте.

В-третьих — убедившись, что я выбрал место(-а) — нажать на «Регистрацию»:

Теперь ЭВМ может спокойно всё обдумать:

(Я фиг знаю, что за говно про варианты полёта снизу вылезло.)

И вот, я зарегистрирован:

Теперь осталась самая малость. Нужно отправить себе посадочный по почте. Разумеется, «Аэрофлот» не может просто молча сделать это сам, нужно меня измучить этим обязательно. Снизу есть две кнопки: «Посадочный талон по email» и «Печать посадочного талона» (эти кнопки отчего-то в именительном падеже).

Но что же скрывается за кнопкой «Посадочный талон» со стрелкой вниз? Любопытно!

Смотрите, это же «Печать посадочного талона» и «Посадочный талон по email»! Ну как, как? Почему? Зачем?

Жму «Посадочный талон по email», но хрен мне! «Аэрофлот» говорит:

«Аэрофлот», родной, ну ты знаешь мой адрес электронной почты. Очнись! Ты же только что прислал мне на него письмо, с которого всё это началось! Помнишь? Ну вспоминай! Нет?..

Пишу почту:

И вы видите, что происходит? Эта дура за каким-то хреном пишет заглавными буквами. То есть просто представьте. Само так делаться не будет. Значит какой-то программист сидел и писал скрипт, который превращает все нормальные буквы в адресах электронной почты в заглавные.

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

Как живётся этому человеку? Почему он писал этот код? Как он сам себе объяснял свои действия?

Короче, дописываю, жму «Отправить». И получаю:

Имеющийся, мать его, в наличии посадочный талон (-ы) отправлен.

* * *

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

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

Дорогой «Аэрофлот»! Ты такой клёвый! Давай сделаем тебе нормальную регистрацию?

2017   полёты   пользовательский интерфейс   студентам

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

Вова Колпаков нарисовал клёвую обложку:

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

Книга «Пользовательский интерфейс» скоро выйдет в издательстве бюро, а пока там можно посмотреть оглавление и некоторые развороты.

Это про лечение технозависимости:

На примере Ангстрема (интерактивчик, справа показывается в динамике по мере чтения — обожаю эту фишку нашего книжного движка):

А это про следствия закона Фиттса:

Оставляйте там почту, чтобы мы вам сказали, когда откроется предзаказ. С наступающим!

2016   Бюро   книга   пользовательский интерфейс

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

Это как обычно, что я залайкал в «Инстапейпере»:

  1. Why Snapchat’s Design is Deliberately Confusing. «The machine assumes itself is a big enough deal that it’s your fault if you don’t know».
  2. Медузы и жопы. Красивый рассказ про множество Мандельброта.
  3. Летом Женя подарила мне получасовой полёт. Никита Иванов клёво описывает ощущения.
  4. How Apple Alienated Mac Loyalists. Марк Гурман.
  5. Как устроить свою работу, чтобы было интересно. Конспект недавней лекции Людвига.

А ещё отдельно хочу рассказать вам про блог Даниила Соколовского (Daniel Lesden). Даниил пишет что-то вроде бюрошных советов, но про дело электронного музыканта. В отличие от дизайна, эта тема вообще очень плохо освещена. Он рассказывает про всё, от нюансов настройки конкретных фильтров до отношений между музыкантами и лейблами. У нас к вопросам прикладывают макеты, а у Даниила — кусочки треков:

  1. Kick, bass, and missing drive. «Вот мой трек в фа-мажоре, и мне не нравится, как звучат бочка и бас. Как добавить драйва?»
  2. Psytrance bassline equalization. «У меня бас в ми-миноре с небольшим шумом, и я хочу понять, как правильно эквализировать нижние средние и срезать 12 дБ НЧ-фильтром на 30 Гц и ВЧ-фильтром на 800 Гц. Я немного добавил на уровне 82,4 Гц и уменьшил на уровне 164,8 Гц, и вроде звучит неплохо, но я не уверен, что делаю то, что надо».
  3. Making atmospheric effects. «Как известные пситрансовые музыканты делают спецэффекты?»
  4. Criteria of professional production. DJ-friendly arrangement. Крутые схемы устройства треков.
  5. Rhythm structure basics. Тыща примеров.
  6. What is sound. Энциклопедическая статья.
  7. Label re-released a track without my consent. Is it okay?

Подпишитесь обязательно.

Спасибо спонсору рубрики — брокерской компании Нэттрэйдер. Инвестиции на бирже это не ядерная физика. Попробуйте научиться на бесплатном демосчёте в удобном веб-терминале Tradernet.

2016   жизнь   Мак   математика   музыка   пользовательский интерфейс   пситранс   чтиво   Эпл

Доклад об анимации в интерфейсе

В сентябре рассказал в Екатеринбурге кое-что об анимации:

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

См. также страничку у Яндекса.

2016   анимация   доклады   Екатеринбург   пользовательский интерфейс   Яндекс

Вселенная знает

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

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

Одно из заданий на интерфейсном курсе — терминал оплаты мобильной связи. Каждый второй делает экран выбора оператора. Спрашиваю: зачем? Люди говорят, мол, ну а как? И начинают рассуждать: можно было бы по коду определять автоматически, но сейчас же можно номер поменять, так что это ненадёжно.

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

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

Многочисленные айпадные приложения с рецептами будут намного умнее, когда смогут предложить мне блюдо с учётом того, что есть в магазине за углом (вселенная и это знает). И если я выберу блюдо, приготовление которого занимает час, а у меня через час скайп, приложение подскажет мне это и предложит похожее блюдо, которое можно успеть приготовить и съесть.

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

«Вселенная знает» в таких случаях работает как стартовый толчок для размышлений.

2016   дизайн   дизайн продуктов   дизайнерская терминология   пользовательский интерфейс   технологии

Табы и радиокнопки

Максим Ильяхов обновил Главред: теперь он не только подсвечивает стоп-слова, но и проверяет синтаксис. Между режимами переключают табы:

Табы в Главреде

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

Радиокнопки в Главреде

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

Табы в настройке Мака

Табами их делает размещение на рамке переключаемой ими области.

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

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

2016   пользовательский интерфейс   студентам

Люди используют пробел для прокрутки страниц

Издревле в браузерах пробел прокручивает страницу на один экран вниз.

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

Cреди моей аудитории больше трети людей используют пробел

Даже среди моей продвинутой аудитории больше трети людей используют пробел!

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

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

2016   вопрос   пользовательский интерфейс
Ранее Ctrl + ↓