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

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

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

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

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

Телеграм-канал

Телеграм за неделю 2—8 октября 2017

25 сен — 1 окт

Среда, 4 октября

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

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

Зачем-то на термометре 4 кнопки, в том числе кнопка его включения. А я уже когда-то писал (но лень искать), что кнопка включения не нужна на приборах, включённость которых сама по себе ни для чего не нужна. Айпод был первым плеером без кнопки включения (просто жми плей и слушай музыку или стоп и не слушай), а эйрподы — первыми беспроводными наушниками без кнопки включения (просто засунь в уши и слушай). Но это, допустим, потребовало некоторой технологической продвинутости, ладно. Но тут-то что? Зачем мне сначала включать его, а потом жать Measure? Почему не жать просто Measure сразу?

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

Остаётся кнопка переключения объекта измерения. Я не знаю, почему она нужна, но предположим, что температура человека и куба измеряются технически по-разному. Эта кнопка вводит модальность. Вопрос: как избавиться от этой модальности?

Как будет работать этот термометр, если можно оставить только две кнопки? А только одну? Присылайте ответы в личку :-)

Костя у себя в канале «Дизайн и продуктивность» пишет про физическую активность (https://t.me/desprod/145). Насколько я знаю Костю, ему спорт в кайф, поэтому для него это — выбор, каким именно спортом заняться. А что делать тем из нас, кого бесит весь спорт вместе взятый? Ну вот взять меня, например.

Оказывается, дело в привычке. У меня два совета.

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

Во-вторых, внедряйте спорт маленькими дозами и прикрепляйте к другим делам, которые вы точно делаете и так. Это надо, чтобы не казалось, что вы тратите на спорт кучу времени. Даже пробежка — целая история: переодеться, побегать, сходить в душ. Это надо прям запланировать. А, например, сделать 10 приседаний и отжиманий точно не страшно. Если у вас есть какая-то ежедневная встреча, можно решить, что вы это делаете всегда после неё (привяжите к чему угодно). Сейчас я каждый день делаю десятиминутный комплекс йожных асан вечерком, вроде пока идёт хорошо.

Вот, Алексей Швачка без кнопок придумал:

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

Илья:

окей, а как без режимов?

Алексей:

показать для разных режимов значения на экране сразу
тогда непонятно зачем кнопка

А вот так делать не надо:

Виталий Бондарь:

Привет. Про термометр. Мне кажется, всё отлично будет работать с одной кнопкой: включение (в случае, если термометр не работал) и замер температуры сразу по нажатию, выбор типа обьекта для замера (если это необходимо) по быстрым последовательным нажатиям (не реже чем раз в секунду), тип отображается на дисплее. Выключать его не нужно — «засыпает» сам после таймаута.

Это решение такое: вместо четырёх кнопок мы сделаем одну, но навесим на неё четыре разных функции в зависимости от длительности нажатия и количества нажатий. Так получится кнопка хоум в Айфоне, а это самое неприятное место в его интерфейсе (кроме того случая, когда надо просто вернуться на десктоп).

Задача-то придумать одну кнопку с одной функцией и всё.

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

Илья Харитонов:

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

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

(Теперь я понял, зачем ведущие телеграм-каналов заводят собственные чатики.)

Картинка лучше, чем текст, поэтому сделаю исключение для Динара и покажу его решение, которое уже было. Надо как справа, конечно:

Четверг, 5 октября

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

Причём она не просто торчит из-за края, а как-то взаимодействует с содержанием страницы:

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

Но у неё есть пределы, и когда-то она кончится. Что делать после этого?

Можно, конечно, спрятать за градиент, но это выглядит фигово:

Если волшебный метод. Спрятать за плашку цвета фона И за градиент:

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

В режиме перетаскивания иконок на рабочем столе Айфон 10 показывает кнопку Done в ПВУ вместо статусбара:

Воскресенье, 8 октября

Есть такой приём представления информации — умножение элементов (Small multiples у Тафти). У меня это было вот тут в визуализации снукерного турнира:
https://ilyabirman.ru/projects/snooker-results-display/

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

А вот пример очень простого, но эффективного использования этого же приёма в интерфейсе — фильтры в камере на Айфоне:

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

А это просто швейцарский плакат, состоящий из швейцарских плакатов:

А это другой крутой плакат не по теме:

Дайджест подготовила Наталия.

 1 комментарий    828   9 мес   телеграм-канал

Телеграм за неделю 25 сентября — 1 октября 2017

18—24 сен ← → 2—8 окт

Вторник, 26 сентября

Люблю такие советы. Максим спрашивает, как починить вёрстку календаря на Айфоне. Пара движений — и всё вставёт на место:
http://bureau.ru/bb/soviet/20170926/

Не раз встречал в навигации такое — текст, набранный на торчащих перпендикулярных панелях:

Но тут между ними ещё что-то есть. Многослойность:

Олег Кóпыл спрашивает:

Добрый день) Нужен совет. Была задача сделать лендинг. Сделал. Теперь заказчик заявляет что должно подходить по валидатору wcag, который черкает сайт для слабовидящих. Кто должен оплачивать решение проблемы, если изначально требования не было?
То есть простыми словами должен ли исполнитель исправлять лендос фо фри?

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

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

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

Как всегда в переговорах, стопроцентных путей нет. Но для начала надо получить побольше информации, то есть задать много вопросов. Сейчас мы даже не знаем, в какой момент и почему возникло это требование, как клиент к этому пришёл. Возможно, для клиента всегда была очевидна необходимость такой проверки, а мы просто не врубились. А может, клиенту просто знакомый сказал, мол, а чё у тебя не проходит проверку-то? И он решил во что бы то ни стало сделать. И именно в этот момент он решил, что мы его кинули тем, что не сделали изначально. А может он до сих пор внутренне не считает, что мы ему что-то должны, но просто надеется убедить нас сделать нахаляву, потому что ну а чё.

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

Если выяснится, что он хочет, чтобы мы это сделали бесплатно (мы пока даже не знаем, хочет ли он этого!), полезно задать простой вопрос: «А почему вы хотите, чтобы мы сделали бесплатно?» Это не обидный вопрос.

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

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

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

Бесплатную работу хорошо делать только по собственной инициативе. Увидели, как помочь клиенту, и нам не сложно? Сделали и показали, все счастливы.

Тем временем, в твиттере показывают такое:

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

Упаковка крема от загара:

Ещё хороший тюбик, зубная паста:

Среда, 27 сентября

Гугль-док средизайнил иконки, и тепень они все выглядят одинаково. Вот эти, нижние:

Сразу беру в курс в качестве примера говна. Задача иконок — отличаться и узнаваться, а тут везде три полоски, вокруг которых изредка какие-то мошки. У меня даже в книге про это разворот специальный есть:

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

Это из Пингвин-офиса, который мы делали в бюро. Я, правда, не делал. Но знаю проект хорошо, потому что я делал карточки в портфолио про него :-)

http://bureau.ru/projects/pingwin-office-writer/

Почитайте там, что к чему.

Что понравилось в картинке (https://t.me/ponravu/)

Интересная находка с материалом. Сразу появляется ассоциация меда с молоком

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

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

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

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

Эплы прочитали и в 4-м Вотч-осе починили:

Пятница, 29 сентября

Интерфейс управления телетрапом в Шереметьеве

Суббота, 30 сентября

Я недавно писал, что аккордеон — это отстой, и призывал вас не использовать его. И говорил, что недаром у Эпла нет такого элемента среди стандартных. А вот читатель Иван говорит, что в Ай-ОСе 11 он появился в приложении Files:

Если вы уже обновились, вы можете убедиться в том, что это полностью неудобная хрень. Заметка остаётся в силе:
https://ilyabirman.ru/meanwhile/all/no-accordion/

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

Дайджест подготовила Наталия.

 2 комментария    799   10 мес   телеграм-канал

Телеграм за неделю 18—24 сентября 2017

11—17 сен ← → 25 сен — 1 окт

Понедельник, 18 сентября

Даша Засыпкина принесла таблицу и спрашивает, как её сверстать для телефона нормально:

Тут некие тарифы, и ничего не влезает. Чтобы было удобнее сравнивать, пришлось разделить на несколько таблиц. Была версия переключать тарифы «биатлоном»:

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

Лучше как-то так:

Я не особо придумал, что именно происходит слева — надо додумать; но идея в том, что таблица крутится горизонтально, а боковик залипает, но не целиком, а как-нибудь так, чтобы хватило огрызков слов, чтобы понять, о чём речь.

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

Юрий Афанасов:

Для волонтеров сделали отрывные схемы, чтобы выдавали участникам по пути.
t.me/ilyabirman_channel/999

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

Иконка фейс-айди — наследница иконки Мака из древних версий Макоса:

А это иконка современного Файндера, как вы знаете:

Среда, 20 сентября

Алексей Проворов показывает знак достопримечательности в Рейкьявике:

Знак достопримечательности выглядит так, потому что это типа за́мок, вид сверху:

Об этом я узнал из доклада Сюзан Кер:
http://ilyabirman.ru/meanwhile/all/susan-kare-on-her-work/

Вот это Мак слева — её рук дело, кажется.

Попалось на каком-то сайте:

Правило рисования теней простое. Тень должна быть или темнее того, что её отбрасывает:

Или светлее:

Иначе получается не тень, а размазня.

О важности неразрывных пробелов. Новость на «Ленте» выглядит так, будто выпилили целых 11 функций. Я даже кликнул почитать, какие именно:

iOS 11 надо было склеить.

Также в новостях:

Совпадение?

Пятница, 22 сентября

H&Co. клёво продают свои шрифт (я ни одного не купил, понятное дело). Вместо задолбавших скучных таблиц начертаний — примеры использования, сгруппированные по темам:
https://discover.typography.com/

Этикетки. Овальная особенно клёва:

Цитаты:

Приборные панели:

Чуваки в Челябинске решили превратить серые шкафы городского оборудования в арт-объекты. Вот такие:

И сделали уже несколько. Самый крутой:

Дизайнер Женя Арутюнов здорово рассказывает про настройку ожиданий через метафору синхронизации:

Воскресенье, 24 сентября

Видали рекламу Яндекс.Такси «Не зацикливайтесь на своём» (там несколько роликов)?

Напомнило анонсы хит-парада «20» на Муз-ТВ (последние два ролика):
https://ilyabirman.ru/meanwhile/all/muz-tv-20/

Дайджест подготовила Наталия.

 Нет комментариев    981   11 мес   телеграм-канал

Вкладка с каналами в телеграме

Самое тупое пожелание к Телеграму, которое я регулярно слышу — сделать отдельную вкладку с каналами.

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

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

Если в вашей голове сейчас звучит «Но как-то же надо!», для вас есть заметка. См. также про фиды в Телеграме.

Ну и подписывайтесь на мой канал.

 8 комментариев    716   11 мес   Телеграм   телеграм-канал

Телеграм за неделю 4—10 сентября 2017

28 авг — 3 сен ← → 11—17 сен

Понедельник, 4 сентября

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

Крутилка прилипла к звёздочкам от пинкода. Как будто пять звёздочек, но пятая какая-то не такая. Заменить звёздочки точками, оторвать крутилку подальше.

Ну и ноль с бекспейсом надо поставить как-то более привычно.

Написал по-английски про иерархию заголовков:
http://ilyabirman.net/meanwhile/all/headings-hierarchy/

Про то, что вот так не надо делать:

Вторник, 5 сентября

Интерфейс нового Пиксельматора-про выглядит очень круто:

Смотрите:
http://www.pixelmator.com/pro/

Электросамолёт прилетел:
https://lilium.com/

Опубликовал железнодорожные фотографии из Берлина:
http://ilyabirman.ru/meanwhile/all/berlin-railroad/

Любимая штука — расписание, конечно:

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

Четверг, 7 сентября

Красота:

Это паттерны для некоего «Лаки 21» (что это — я так и не понял):
http://www.gooddesignmakesmehappy.com/2014/06/project-love-lucky-21.html

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

Этим можно пользоваться. Например, сделать не просто визитку, а разрешить ей быть разных цветов из набора:

Полочка с баночками:

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

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

У меня на курсе в блоке о представлении информации есть тема «Умножение элементов», которая частично связана с этим. Там я среди прочего показываю Чака Норриса:

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

А, ну и вот ещё крутая вещь — раскадровка:

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

Серёга Чикин выложил свою версию пиктограмм о стирке и глажке:

Тут:
http://sergeychikin.ru/icons/

Видео наглядно объясняет, как работают кривые Безье (4 мин):

Это шапка на странице митапа «Реакт — Израиль»:

Повезло чувакам с логотипом Реакта:

Пятница, 8 сентября

У нас вышла половина последней главы книги «Пользовательский интерфейс»:
http://bureau.ru/projects/book-ui/

Я вам как-то показывал черновик такого разворота. А вот как он выглядит в релизе:

Это из главы «Окна». А вот из главы «Формы», но тоже со ссылкой на попапы:

Суббота, 9 сентября

С ума сойти. Транспорт-фор-Лондон провели исследование и выяснили, что люди едут на метро от Кингс-кросса до Ватерлоо 18 разными способами:

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

Кстати, в паре вариантов там фигурирует бирюзовая Waterloo & City Line — вот уж где неочевидное, но вполне неплохое решение, если не в самый час пик. Эта линия состоит всего из двух остановок. Когда я рисовал свою самую первую схему московского метро, я делал Каховскую линию такой же формы:

Но в релизе уже стало так:

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

Схема линии Ватерлоо — Сити над дверью в поезде выглядит так:

Оказывается, у меня про это заметка была, а я и забыл:
http://ilyabirman.ru/meanwhile/all/waterloo-and-city-line/

Дайджест подготовила Наталия.

 2 комментария    978   11 мес   телеграм-канал

Телеграм за неделю 28 августа — 3 сентября 2017

21—27 авг ← → 4—10 сен

Среда, 30 августа

Паша Омелёхин дополнил схему московского метро:

Инстаграм Эпла — отличный пример умной рекламы в соцсетях. Вместо того, чтобы лепить на айфоны подписи с фичами, они просто публикуют клёвые фотки и видосы, снятые на айфон:
https://www.instagram.com/apple

Ещё, если не видели, посмотрите страницу «Как снимать на Айфон»:
http://apple.com/iphone/photography-how-to/

Вот такими штуками должен заниматься современный веб-дизайнер.

Пятница, 1 сентября

Я уже показывал, но покажу ещё. Любая схема метро превращается в арт, если выключить случайный набор слоёв:

Вот так было сначала, и меня парило, что рядом с примером про поиск стоит поиск от самой книги:

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

Вот пример из другой области на эту же тему. Ворд:

Есть стандартный элемент: выпадающее из тулбара меню со списком стандартных опций и пунктом «Больше...» в конце, за которым прячется диалоговое окно, где можно ввести точное значение. Но в этом контексте он читается совсем по-другому, как будто там продолжится прогрессия: 3,5 · 4,0 · 4,5 и так далее. Надо было сделать исключение и написать «Другое значение...», например.

В интерфейсе «Мимика», который я делал, есть слева список моков. Там можно добавлять и удалять моки и есть поиск:

Подробнее о проекте:
http://ilyabirman.ru/projects/mimic/

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

Сразу исказился смысл: лупа с такии соседями стала читаться скорее как зум, чем как поиск. Пришлось их отодвинуть подальше и вместо минуса поставить корзинку. Не пропускайте такое.

А вот что обращает на себя внимание в Ютюбе:

(Не знаю, может, ваше не обращает.)

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

У Ютюба на днях случился ребрендинг, кстати. Фиг знает почему — может, просто эффект новизны — но есть реальное ощущение, что стало круче и взрослее. Вся петрушка тут:
https://www.youtube.com/yt/about/brand-resources/

Заодно: терпеть не могу, когда говорят или пишут «Ютуб» (просто тупо, в буквальном смысле) или «Ютьюб» («миньет»).

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

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

Суббота, 2 сентября

Теперь в последних четырёх миксах не просто показан плейлист, а по нему бежит курсор, пока играет музыка, ну и можно тыкать, чтобы прыгнуть в нужный трек. Это так умеет пока не выпущенный Жуэль. Зацените:

http://ilyabirman.ru/mixes/catch-my-flow/
http://ilyabirman.ru/mixes/loophole/
http://ilyabirman.ru/mixes/design/
http://ilyabirman.ru/mixes/use-me/

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

Воскресенье, 3 сентября

Вот я зашёл на сайт подкаста, мне нужен 138-й выпуск. Что мне делать? Из каких соображений показаны последние два, а не сто? Ну ладно, жму снизу на «архив» (интерфейсное стоп-слово: откуда я должен знать, начиная с какого выпуска уже «архив»?)

Попадаю на страницу, где последние несколько, а не все! В подвале этой страницы листалка с цифрами, не имеющими никакой связи с номерами выпусков. Жму куда попало (потому что у меня нет причин тыкнуть на конкретное число и листалки по цифрам делают только мудаки и роботы)

Мимо. Перебирать неохота. Замечаю, что на странице 10 выпусков. Раз на первой был 169-й, а мне надо 138-й, то мне на четвёртую страницу.

Ура, нашёл!

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

У кучи людей ощущение, что проектирование интерфейсов — это «просто здравый смысл», и любой нормальный человек справится, нужно же просто подумать. Но проблема в том, что думать нужно совсем не так, как думал автор этого сайта. И чтобы понимать, как, нужно учиться.

Варламов опубликовал подборку клёвых пешеходных переходов:
https://varlamov.ru/2542161.html

Дайджест подготовила Наталия.

 Нет комментариев    730   11 мес   телеграм-канал

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

14—20 авг ← → 28 авг — 3 сен

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

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

Читатели жалуются, что непонятно, что я тут имел в виду.

Речь о проблеме кириллической К, о которой я писал несколько дней назад, промотайте наверх, где «Лужники». В этом шрифте буква K сделана так: боковые штрихи сначала соединяются друг с другом, а потом уже втыкаются в вертикальный штрих. Из неё получается сделать нормальную Ж: в середине получается соединение четырёх, а не шести лучей, и это выглядит чисто — не приходится искажать ничего, и поэтому не приходится менять кириллическую К для дружбы с Ж. Не знаю, стало ли понятнее, но мне пора идти обедать :-)

Майк Озорнин:

Илья!

В тему твоих заметок про К и Ж в канале. В посте Александры Корольковой были разные примеры не очень кириллицы, секция была про Ж.
Вот пост: http://leksandra.livejournal.com/114663.html

Вдруг читателям пригодится.
Вот про Ж:

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

Нарисовал афишу и буду играть техно в субботу в Челябинске:

Среда, 23 августа

Ваня Звягин рассказал немного о том, как мы делали схему метро Минска:
http://ivanzviahin.by/all/minsk-metro-history-1/

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

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

Помимо проблем с размером этих кнопок (закон Фиттса; хрен попадёшь) и тем, что вообще не факт, что корзина должна работать именно так, тут вместо минуса — дефис. И если в тексте, когда пишут «температура опустится до -3», дефис вместо минуса — это ещё куда ни шло, то в таком контексте это совсем никуда не годится. Вместо дефиса должен стоять настоящий минус:

Настоящий минус находится на той же высоте, что и плюс, и имеет ту же ширину:

Чего не скажешь ни о дефисе, ни о тире, ни о коротком тире:

Потому что эти все знаки рассчитаны на высоту строчных букв и должны смотреться хорошо среди них:

А у минуса свой круг друзей:

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

Серёга Чикин учит Яндекс рисовать иконку электричек:

Суббота, 26 августа

Женя Арутюнов рассказыват об очень важном методе обучения — «делать как говорят» (три минуты видео):

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

Разбираю работы студентов школы редакторов по моей дисциплине «Интерфейс и информация». Смотрите что тут:

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

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

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

Кавычки — неприятный знак препинания, из-за которого непонятно, как что выравнивать. Как ни поставь, получается криво:

Это тот случай, когда нужно вынуть название из кавычек. Заодно: нижний текст не разбит на абзацы — для редактора это вообще грех. См. заметку про опрятные письма:
http://ilyabirman.ru/meanwhile/all/neat-mail/

Дайджест подготовила Наталия.

 Нет комментариев    771   11 мес   из США   телеграм-канал

Телеграм за неделю 12—18 марта 2018

5—11 мар

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

Если вы хотите помогать с такими дайджестами, напишите мне: @ilyabirman. В конце каждого поста будет ваше имя со ссылкой на сайт, если захотите.

Вторник, 13 марта

Продолжение многосерийного совета про принципы построения схем. Соответствие линий маршрутам:
https://bureau.ru/bb/soviet/20180313/

Стокгольмская схема на чёрном фоне — красивая:

Четверг, 15 марта

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

«Но польза была, конечно, большая. Повторюсь, сейчас альтернативы этой книге просто нет»

Большой отзыв, с критикой:
https://cuiet.livejournal.com/499970.html

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

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

Пятница, 16 марта

Читатели показывают, что в метро появляются новые указатели следующих станций. Их по-прежнему приходится читать справа налево, но они хотя бы красивые. А главное — здравый смысл победил, написано «На север», «На юг»! Я очень рад:

Суббота, 17 марта

В специальном канале «Бирман смотрит» смотрю работы прошедшей недели студентов Школы стажёров. За сегодня, завтра и послезавтра надо проверить около тридцати работ. Задание было — показать интерфейс мобильного приложения на нескольких экранах. Это учебный процесс, а не развлекаловка, но если хотите, можно подсматривать: https://t.me/ilyabirman_smotrit

Там кстати пришлось показать свой домашний экран («Так люди организуют себе домашний экран айфона: всё редкое наверх, всё частое — вниз»). Вот держите и вы. Карты, Оверкаст и Музыка — в самых удобных местах, потому что они нужны на ходу чаще остального:

Лёша Леняшин показывает замечательный тупняк:

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

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

У Эпла, кстати, такая же хрень есть в Айтюнсе. Бывает, подключишь телефон к компьютеру, Айтюнс говорит «этот телефон corrupted, давайте его ресетнем полностью и переустановим на него Ай-ОС?». Телефон при этом лежит и чувствует себя прекрасно, просто айтюнс в очередной раз тупанул и почему-то не смог соединиться с ним чисто.

Добрался до проверки задания Вани Звягина. Он нарисовал красоту:

Подробно всё смотрю тут:
https://t.me/ilyabirman_smotrit

Воскресенье, 18 марта

Лев Владов обнаружил герб Мюнхена. Лев поясняет:

«Молись или пошёл нахуй!»

А Катя Долгова прислала обозначение туалета для тех, кто не определился с полом (ботсад Тель-Авива):

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

Кто-то нарисовал такой стильный чистенький экран. Явно хороший дизайнер со вкусом. И такое ощущение, что на нижний абзац текста он другими глазами смотрел, которые не видят, какой со ссылками ад.

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

Каким-то образом я должен выбрать: или отписаться от того, на что я не подписывался, или подтвердить то, что он меня скрыли и что мне размазали. Как рассуждал программист?

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

Дайджест подготовил Шамиль.

 1 комментарий    906   1 год   телеграм-канал

Телеграм за неделю 5—11 марта 2018

26 фев — 4 мар ← → 12—18 мар

Это забытая рубрика «дайджест телеграма». Если хотите помогать с дайджестами, напишите мне. Вот как выглядела неделя 5—11 марта в моём канале в телеграме:

Понедельник, 5 марта

Красота

Вторник, 6 марта

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

Хотя казалось бы. Ясно же, что есть люди с которыми я шарю документы чаще, чем с другими, и Артём Горбунов явно входит в их число. Гугль прекрасно знает это всё. Не понимаю, почему в этом окне нет его фоточки, чтобы просто кликнуть и документ стал доступен ему. А если я хочу расшарить документ, кому-то, кому я хоть раз расшаривал в прошлом, непонятно, почему мне не показывают его фотку после ввода 1-2 букв имени. Чё сложного? Непонятно, нафига нужна вот эта выпадайка:

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

Следующая засада — галочка Notify people, которая за каким-то хреном всегда по умолчанию стоит. Я её каждый раз снимаю, и эта тупица никак не может запонить, что мне не нужны её уведомления. Чаще всего я что-то шарю по чьей-то просьбе, и я всё равно отвечу на его письмо, мол, вот ссылка. Зачем его спамить? А если я сам решил кому-то что-то показать, то я тоже всё равно напишу ему, что я ему шарю и зачем.

Но это ещё полбеды. После того, как снимаешь галочку Notify people, Гугль пытается тебя переубедить:

Какая-то запредельная сложность на ровном месте. Не понимаю, почему вся эта дичь живёт годами и не меняется, хотя шаринг — главная польза Гугль-дока. (И это мы ещё в Advanced не заходили.)

Из канала «Иконки Чикина»:

Продолжение рубрики «Это очевидно, но вдруг вы об этом никогда не задумывались». Бегущая строка на иврите бежит в другую сторону (видео):
https://t.me/ilyabirman_channel/2243

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

Суббота, 10 марта

Как-то я вам показывал картину Теодора Жерико «Офицер конных егерей императорской гвардии, идущий в атаку».

А вот совсем другое. Герхард Рихтер, «Биркенау» (2014):

Это серия из четырёх картин. В прошлом году мне повезло оказаться в Москве, когда он выставлялся в Еврейском музее, и там они висели все четыре. Причём напротив них висели они же четыре, но распечатанные на бумаге. А они огромные (2,0 × 2,6 м). Любопытный эффект. Рассматривать можно до бесконечности. Я тогда любил более «весёлые» его картины, но вот проникся этой работой.

Страница первой из них на сайте Рихтера (можно листать дальше):
https://www.gerhard-richter.com/en/art/paintings/abstracts/abstracts-2005-onwards-69/birkenau-17974/?&categoryid=69&p=4&sp=32

Зафоловить Рихтера в Инстаграме:
https://www.instagram.com/gerhard.richter/

Что такое Биркенау:
https://ru.wikipedia.org/wiki/Освенцим

А ещё сегодня мне попался красивый плакат:

Воскресенье, 11 марта

Случайный красивый кусочек нашей схемы метро Екатеринбурга (дизайнер Паша Омелёхин):

Небольшой секрет выравнивания беджей на иконках. Вот таких красных:

Интуитивно всегда кажется, что центр кружка должен быть в уголке:

Но на самом деле так получается фигово. Нужно сдвинуть кружок левее и ниже, как на первой картинке.

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

Отец прочитал предыдущие сообщения, и спрашивает, не противоречит ли это всё теме «Почти, но не совсем»:
https://ilyabirman.ru/meanwhile/all/almost/

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

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

Разумеется, когда выравниваешь надписи на схеме метро, это тоже надо учитывать. У каждого пенька на моей схеме есть специальный гайд для выравнивания (щас отдельно расскажу ещё), и вот смотрите, как относительно него стоят слова. C и Т надо сдвигать руками:

Про пеньки. Каждый пенёк — это символ в Иллюстраторе. То есть такой объект, который можно поменять один раз, и он изменится везде. Это нужно, чтобы можно было экспериментировать с формой и смотреть сразу, как это повлияет на ощущение
от всей схемы. Вот, например, делаем так:

Видим эффект везде:

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

О, у «Блока» новый красивый стиль афиш (или это отдельное исключение). 16-го марта надо бы сходить на Атома:

Дайджест подготовил Миша.

 Нет комментариев    848   2018   телеграм-канал

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

Мне написал Никита Лялин рассказать о том, как сработала его реклама в моём канале в Телеграме:

Хоть и с опозданием, но пишу отзыв о рекламе в твоём телеграм-канале.

Реклама получила хороший охват, но дала мало подписчиков — 115 человек. В итоге, одна подписка мне обошлась в 70 рублей, что очень дорого даже для моей тематики.

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

Никита Лялин до этого размещал рекламу у меня в блоге и тоже присылал отзыв о ней (был доволен).

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

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

 Нет комментариев    832   2018   отзыв   телеграм-канал
Ранее Ctrl + ↓