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

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

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

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

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

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

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

Элементы

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

Наблюдения

Ещё теги

Напомнить о прошлом

Я сразу с примерами. В интернет-магазине нужно выбрать, какой карточкой платить. А ты им пользуешься уже много лет, и там уже забито несколько этих карточек. Было бы классно, если бы напомнили, которой я платил в прошлый раз:

Можно даже около каждой указать, когда последний раз ей платили.

А вот Гугль, когда вводишь неправильный пароль, напоминает, что ты поменял пароль 35 дней назад:

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

У Юли Кондратьевой ещё пара хороших примеров: напоминать, через что пользователь авторизовался в прошлый раз, какие были требования к безопасности пароля.

 Нет комментариев    427   5 дн   пользовательский интерфейс   студентам   человечность

Интерфейсный нюанс: якорь выделения и анду

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

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

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

Но и в тексте на Маке до сих пор есть глюк: анду всегда сбрасывает якорь на левый. По крайней мере, в Мохаве. Выделите какой-нибудь текст справа налево, попробуйте поизменять выделение Шифт-стрелками — всё будет работать нормально, будет меняться левый край. Потом удалите текст и верните через ⌘Z. Теперь Шифт-стрелки изменяют правый край выделения! Какого чёрта, Эпл?

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

См. ещё про выделение текста:

 5 комментариев    1375   1 мес   Мак   пользовательский интерфейс

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

Нас несколько лет просили, и мы наконец сделали!

Теперь наш плакат о синтаксисе элементов интерфейса можно купить на Принтдиректе.

В Коворкафе уже висит пару месяцев:

Что это? Вот цитата из моей книги «Пользовательский интерфейс», главы «Синтаксис»:

В какой форме должны быть названия и подписи элементов интерфейса? [Призыв использовать глаголы на кнопках] — чуть ли не единственный кусок из гайдлайнов Мака, где затрагивается эта тема.

Но в английском начальная форма и повелительное наклонение глагола не отличаются. А по-русски «Сохранить», «Сохрани» и «Сохраните» — разные слова. Здесь речь только о кнопках, и только о тех, что отдают команды, а этот фрагмент даже нельзя однозначно перевести на русский.

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

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

...

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

В прошлом году плакат перевестал Серёга Фролов.

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

Вот кусочек крупнее:

Если закажете и повесите у себя, присылайте фотки!

 3 комментария    1654   1 мес   пользовательский интерфейс

Подкаст АТП про интерфейс многозадачности на Айпаде

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

Разговор про Айпад начинается с 1:24:55. Особенно здорово Джон Сиракьюса объясняет, почему неверно мнение, что «это просто вы привыкли к классическим окнам и не привыкли к айпадовой модели», это где-то с 1:31:25.

Noöne would see someone on a Mac with two windows open goes, “Wow, you must be a Mac expert”, but you someone with three things with split screen on iPad and a slideover, and you assume they are an iPad expert.

Ну и вообще этот выпуск клёвый, можно слушать целиком с удовольствием.

 2 комментария    1288   2 мес   Айпад   подкасты   пользовательский интерфейс

Отмена начатого драг-н-дропа

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

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

Это полный кретинизм и непростительное непонимание Фиттса и принципа «Анду». Но никто с этим ничего не делает и, скорее всего, никогда не сделает.

 5 комментариев    1302   3 мес   Виндоус   Мак   пользовательский интерфейс

Автоматические коробки передач и «автостоп»

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

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

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

Это пример дебильного дизайна интерфейса.

 9 комментариев    1729   6 мес   автомобиль   интерфейс бытовых приборов   пользовательский интерфейс

Валидация форм и незаполненные поля

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

Подкаст-версия для тех, кто в дороге:

Сначала — догонка, а тема начинается с 4:56.

Ссылки из выпуска:

Кстати, на подкаст-версию теперь можно подписаться по РСС и слушать в подкастных программах:

https://ilyabirman.ru/meanwhile/tags/podcast/rss/

В Айтюнс-каталог пока не добавил — там надо ещё доработать разное, но по прямому урлу добавляется и работает, попробуйте!

 2 комментария    1662   6 мес   веб-дизайн   веб-разработка   видеоблог   подкаст   пользовательский интерфейс

Ховер и клик должны совпадать

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

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

Вот некоторые ошибки, которые мне встречались:

  • Меню на сайте состоит из ссылок, завёрнутых в некоторый контейнер. У контейнера в стилях прописана подсветка при наведении. Вокруг текста ссылки остаются некоторые поля до краёв контейнера, где контейнер подсвечивается, но ссылка не работает.
  • Подчёркивание ссылки реализовано как-то так, что клик в саму линию подчёркивания не вызывает перехода по ссылке, хотя ховер есть. Бывает наоборот: ховера нет, а клик срабатывает.
  • Модальный попап закрывается кликом за его пределами. Ховеры элементов вокруг попапа продолжают работать, хотя клик по ним не вызовет связанное с ними действие, а только лишь закроет попап.
  • Функция элемента заблокирована скриптом, а ховер остаётся. Например: главная кнопка на форме отключена из-за ошибки в заполнении, но продолжает подсвечиваться при наведении, как будто работает.
  • Большой контейнер с картинкой и подписью нажимается целиком и реагирует на наведение каким-то эффектом. В углу контейнера есть маленькая иконка, которая делает что-то другое, например, добавляет объект в «Избранное». При наведении на иконку эффект наведения на контейнер сохраняется, хотя клик в этом месте не вызовет действия, связанного с контейнером целиком.

Эта мысль относится к теме «Обратная связь».

 4 комментария    2482   9 мес   обратная связь   пользовательский интерфейс

Интерфейс приложения «Совести»

Я публиковал отзыв Антона Вольных о консультации. После той консультации Антон решил обратиться ко мне за дизайном нового приложения «Совести». А я позвал в помощники Ивана Звягина.

В результате нашей работы получился интерфейс:

Главная идея — вместо форм и условий приложение встречает журналом товаров, которые можно купить в рассрочку по карте «Совесть». Читайте рассказ о проекте.

 1 комментарий    2414   10 мес   пользовательский интерфейс   портфолио   релиз

Истории Танского про флекс

Миша Танский показал видос своего доклада с 404феста:

Там четыре истории, которые полезно послушать начинающим дизайнерам. Прокомментирую.

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

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

Просто запомните как принцип: в первую очередь рассматривать решение в виде плейнтекста, а уже потом в виде специально придуманного под задачу интерфейса.

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

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

Третья история про «анду без анду». Типа люди иногда по ошибке делали в приложении Y и просили анду (правильно просили). Но технически реализовать анду было суперсложно (я в это, конечно, не верю, но это сейчас не важно), поэтому перед действием сделали подтверждение. Фишка в том, что вместо текста «Точно сделать? Да / Нет» в окне подтверждения написано «Готово! Завершить / Отменить». Подтверждение вместо анду — нормально как флекс, но, конечно, это плохой интерфейс. И замена одних слов другими в этом ничего не меняет, потому что проблема подтверждений не в словах, в чём легко убедиться, представив, что интерфейс на венгерском.

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

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

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

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

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

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

 5 комментариев    2964   10 мес   видео   пользовательский интерфейс   студентам
Ранее Ctrl + ↓