Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

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

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

Элементы

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

Наблюдения

Ещё теги

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

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

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

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

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

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

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

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

31 декабря   Бюро   книга   пользовательский интерфейс

Что почитать на выходных — 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2016   вопрос   пользовательский интерфейс
2016   Мак   пользовательский интерфейс   скриншоты

Кнопки включения-выключения

Кнопки включения-выключения

Смотрите, на этой посудомоечной машине слева — кнопка включения-выключения. Дурдом! Такая же есть на стиральной машине.

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

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

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

Кнопки включения-выключения

См. также:

2016   интерфейс бытовых приборов   пользовательский интерфейс   техника

Как подчеркнуть ссылку пунктиром

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

Я называю такие ссылки «недоссылками», а Артём говорит «дыдыдышка» (изображает прерывистость линии словом dash).

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

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

Остальные варианты на этой картинке не годятся.

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

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

Опытным путём установлено, что идеальный паттерн — это чередование трёхпиксельных штрихов и двухпиксельных пробелов (это как раз то, около чего галочка):

Непунктирные ссылки по теме:

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

Фейсбук снова поднял большой палец вверх

Фейсбук вернул поднятый большой палец на кнопку лайка.

Было-стало:

Фейсбук снова поднял большой палец вверх

Их исследования показали, что на него больше жмут, чем на логотип Фейсбука.

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

В Лайкли пока остаётся сверхтонкая разделительная линеечка между глаголом и числом. Но, видимо, она когда-то тоже отвалится.

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