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

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

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

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

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

Дизайн

Профессия

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

Как правильно

Наблюдения

Что-то там

Ворчание

Ещё теги

Позднее Ctrl + ↑

Новая схема челябинских трамваев

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

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

А потом к работе подключилась Полина Лесникова. Она перерисовала схему с учётом изменений в маршрутах, и вместе с Сашей они улучшили много деталей по результатам тестирования предыдущей версии. Получилась новая схема:

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

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

Что ещё посмотреть:

Замкнутость интерфейса: проверочные вопросы

Я вчера написал про замкнутость. Продолжаю в режиме черновиков.

Вот вопросы, которые дизайнер должен задать себе, глядя на каждый макет интерфейса:

  1. Для каждой нарисованной кнопки: что произойдёт, если нажать? Не обязательно должна быть прям картинка следующего состояния, но понадобится внятный ответ.
  2. Для каждой кнопки «Закрыть», «Скрыть» и подобных: как снова открыть, показать?
  3. Для каждой переменной величины: что, если значение будет отрицательным, нулём, единицей, в сто раз больше, в сто раз меньше, длиннее, короче? Что, если значение изменится в реальном времени?
  4. Для каждого переменного числа элементов (список, матрица иконок и т. д.): что, если элементов будет ноль, один; в сто раз больше, чем нарисовано. Что, если число элементов изменится в реальном времени?

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

Пример незамкнутости интерфейса

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

Замкнутость — это что-то вроде математически полной продуманности интерфейса, когда все случаи рассмотрены и противоречия разрулены. Может, не очень удачное слово, но пока такое. Я имею в виду, все пути в интерфейсе ведут в какие-то имеющиеся состояния внутри интерфейса.

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

Давайте вот разберём пример.

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

А потом где-нибудь в описании пишет:

В поле работает автодополнение. Оно помогает ввести значение, которое ранее уже вводили. Если подходящих значений несколько, подставляет в самом поле самое часто используемое, а снизу рисует выпадайку, в которой можно выбрать из них. Достаточно, чтобы совпало хотя бы одно слово, например если уже вводили «ремонт часов», предлагает этот вариант по «ча».

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

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

Дизайнер уходит думать и возвращается с уточнением в описании:

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

А сейчас видите дыру?

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

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

То есть выпадайки должны как-то по-разному себя вести, что ли, в зависимости от того, в первом ли слове нашлось совпадение? Или в первой выпадайке тоже можно как-то развыбрать?

Вот, например, в первом случае я могу нажать бекспейс, и тогда у меня останется просто «а».

А могу нажать на стрелку вниз, и получится такое:

Так ведь? А что тогда во втором случае, если нажать на стрелку вниз, будет?

Так что ли?

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

Тут дизайнер перестаёт писать описание и начинает латать дыры на лету. Говорит, «давай в этом случае сделаем, чтобы бекспейс стирал всё дописанное и возвращал исходное „ча“, и стрелка вверх тоже».

Но такой патч ничего не замыкает, а только сильнее размыкает. Теперь у нас появляется какое-то особое состояние интерфейса, когда бекспейс работает не как обычно. И надолго ли это состояние сохраняется? Например, если я введу „с“, будет ведь вот так:

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

Это не то, чтобы неразрешимые проблемы. Тут нет никакой проблемы всё аккуратно распутать. Но просто маловероятно, что дизайнер хотя бы увидел сам этот ворох вопросов, если ему показалось, что добавленная им к исходному описанию мысль всё объясняет.

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

Я на этом возьму паузу, а вам всем домашка: замкнуть этот интерфейс.

И ещё почитайте про автодополнение через выделение.

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

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

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

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

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

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

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

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

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

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

Вот:

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

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

Иконка человечка

Сим постом хочу призвать вас внимательнее относиться к иконкам человечка в ваших приложениях.

Вот что находит «Наун-проджект» по запросу user:

Самый правый в средней строке хоть на что-то похож.

Такая жесть повсюду вокруг нас. Яндекс-музыка:

Исполнитель имеет признаки человека, но пользователь — это почему-то круг с полукругом.

Виндоус:

Гайдлайны Андроида предписывают ставить жуткую иконку. Звучат слова human и best:

Ну не знаю. По-моему, не хьюман и не бест.

Любое упрощение имеет свои пределы. У Эпла головы людей похожи на головы — есть уши, причёска (слева):

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

Для «Секьюриджа» я нарисовал клёвых ребят с причёсками (посередине):

Даже на пропуске (справа снизу) у головы и плечей человеческая форма.

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

Читаются мальчик и девочка, но если оставить только одного персонажа, вполне можно и использовать независимо от пола.

Ещё в программах часто пол можно угадать по имени и подсунуть подходящую иконку.

Для «Бёрдвью» мы когда-то придумывали генератор юзерпиков для тех, кто не загрузил фотографию:

Получались всякие такие:

А вот иконка «Иконверка»:

Вот ещё. Хоть какая-то форма:

Правда, он даже если просто круг рисует, получается хорошо:

Но тут снова масштаб почти всего тела. И прекрасно подобраны пропорции и форма остального тела.

Симпатичный чувак с Иконфайндера:

А у «Вконтактика» — фигня:

Короче. На иконке человека должен быть человек, а не снеговик.

 9 комментариев    1330   2017   дизайн   иконки   студентам

Словари и таблицы спряжений

Когда словари печатали на бумаге, её экономили, для чего изобрели кучу приёмов. Пользоваться словарём нужно было уметь. Потом словари переехали в интернет, но лучше не стало: остались и бесчеловечные сокращения («треб. to+pass. inf.») и ссылки вместо объяснения на месте (надевать: «см. надеть» — про это я тоже где-то писал, но не могу найти).

Не найдёшь в словарях и таблицы спряжений. Вот нашёл я в словаре, например, что «спать» по-французски — это dormir, ну и что с того? Это никак не помогает сказать «я сплю» (je dors). Чтобы это сказать, нужно сначала найти dormir в словаре, а потом загуглить «dormir conjugate» (для этого ещё нужно знать, что conjugate — это «проспрягать» по-английски). Тогда попадёшь в таблицу спряжений.

Та же петрушка с ивритом. Вот нашёл я, что «предпочитать» — это להעדיף (лехаадиф). Я могу предположить, что «я предпочитаю» — это что-нибудь вроде «ани маадиф» или «мэадиф», как бы это ни писалось, потому что я уже знаю насколько глаголов на леха-, у которых в первом лице единственного числа оно превращается в ма-. Но нафига мне гадать, почему не показать всю парадигму сразу?

Есть волшебный сайт pealim.com, где можно проспрягать любой глагол. О, угадал:

להעדיף

Вот эта таблица целиком должна быть в словаре, а не на отдельном сайте.

Наверное, когда-нибудь издательству бюро придётся взяться и за словари.

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

Вот:

  1. Как стать дизайнером. Женя Арутюнов объяснил.
  2. Вероломные методы хедхантинга в соцсетях.
  3. Courage. Марко Армент комментирует форму экрана Айфона 10: «This is the new shape of the iPhone. As long as the notch is clearly present and of approximately these proportions, it’s unique, simple, and recognizable».
  4. Thoughts and Observations on the Products Announced at This Week’s iPhone X Introductory Event. Грубер: «They stopped pursuing Touch ID under the display not because they couldn’t do it, but because they decided they didn’t need it».

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

 Нет комментариев    52   2017   Айфон   дизайн   чтиво

Как работает обучение

Умники всё время победоносно приводят примеры хорошего дизайна, в котором нарушаются правила: «А вот крутой плакат, где не соблюдается правило внутреннего и внешнего! А вот удобный сайт, где ссылки не подчёркнуты! А вот красивая и понятная таблица с чересполосицей!»

Это как прийти на занятие по карате, и начать рассказывать: «А я видел, как во дворе один чувак другого сильно побил, не крича „кия“!» Причём рассказывать с искренней убеждённостью, что тренер не в курсе, что так бывает.

Задача преподавателя — научить и повысить разрешение. Для этого и нужны законы и правила. А если объявить: «Можно делать всё, что угодно, лишь бы был хороший результат», будет честно, но совершенно бесполезно.

См. также:

 1 комментарий    34   2017   дизайн   студентам

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

30 окт — 5 ноя

Вот как выглядела прошедшая неделя в моём канале в телеграме:

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

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

Я сто лет назад сказал, что магия будет тогда, когда телефон будет картины и без куаркода узнавать, и вот оно, наконец, случилось:
https://smartify.org/

Вторник, 24 октября

Остроумно: чуваки используют камеру на айпаде в качестве кнопки —
https://medium.com/astro-hq/camera-button-ba3d8c493cbd

Николай Лисов спрашивает в Советах: «На днях пересел за Мак с „ретиной“, и не могу разобраться с разрешением в Фотошопе. Делаю скриншот — макеты получаются в два раза больше. Какой ставить Resolution в макетах (72, 96, 144)? Или нужно где-то ещё в настройке Фотошопа что-то сделать, чтобы масштаб был 1:1 и у меня, и на других компах?»

Отвечаю:
http://bureau.ru/bb/soviet/20171024/

А ещё я продаю машину (в Челябинске):
https://auto.ru/cars/used/sale/opel/astra/1060254540-9568e/

Если вам понадобится нарисовать заглавную версию знака @, то можно так:

Дайджест телеграма за неделю 23-29 октября 2017

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

Вот мой прошлогодний совет об увеличении фоток. «Если бы я мог дать один универсальный совет веб-дизайнерам, который подойдёт наверняка, я бы дал такой: увеличьте фотографии» —
http://bureau.ru/bb/soviet/20160614/

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

А тут Макс Ильяхов подогнал отличный пример из своего диалога со студентом Школы редакторов:

«У тебя сейчас так:

Дайджест телеграма за неделю 23-29 октября 2017

А надо так:

Дайджест телеграма за неделю 23-29 октября 2017

С соблюдением теории близости, конечно:

Дайджест телеграма за неделю 23-29 октября 2017

В натуральную величину:

Дайджест телеграма за неделю 23-29 октября 2017

Блин, а вот это, кстати, шикарная идея:

Дайджест телеграма за неделю 23-29 октября 2017

Вот, охуенно»

Дайджест телеграма за неделю 23-29 октября 2017

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

Когда-то вышла очередная версия Эверноута под айфон, и выглядела она примерно так:

Дайджест телеграма за неделю 23-29 октября 2017

Я тогда отметил себе, что клёво смотрится, когда на цветном фоне что-то написано и белым, и чёрным (статус-строка тут чёрная).

Дайджест телеграма за неделю 23-29 октября 2017

(Это, кстати, очень крутой сайт https://work.co/.)

Вот подобную штуку мы использовали на «Квартирке» (чёрный крестик):

Дайджест телеграма за неделю 23-29 октября 2017

Вот какая-то картинка участника интерфейсного курса. Вроде ничё особенного, но эффект есть:

Дайджест телеграма за неделю 23-29 октября 2017

А вот не на цветном, а на сером. У меня на сайте в разделе «Музыка». Особенно мне нравится в мобильной версии с чёрными стрелочками:

Дайджест телеграма за неделю 23-29 октября 2017

Пятница, 27 октября

Илья Синельников справедливо напоминает ещё один пример чёрного и белого на цветном — обложку нашей Школы менеджеров:

Дайджест телеграма за неделю 23-29 октября 2017

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

Но есть одно свойство кнопки, которое пережило весь флет-дизайн: выравнивание текста по центру. Реально, если на плашке написать слово по левому краю, то за кнопку её уже никто не признает.

Дайджест телеграма за неделю 23-29 октября 2017

Суббота, 28 октября

Мой троюродный брат Дима Бирман прислал офигенное немецкое автобусное расписание. Оно очень красивое, но понять в нём нельзя вообще ничего:

Дайджест телеграма за неделю 23-29 октября 2017

Это скриншот «Медузы» с моего рабочего стола. Пример случайного совпадения, искажающего смысл:

Дайджест телеграма за неделю 23-29 октября 2017

Галочка читается как «выполнено», «готово», «успех». Закрыли тудушечку.

Это не упрёк «Медузе», конечно. Так бывает. У меня в курсе даже тема есть небольшая «Случайные искажения информации» про такие эффекты.

А вот Вика прислала безумную-прекрасную афишу из Будапешта:

Дайджест телеграма за неделю 23-29 октября 2017

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

Кстати, среда по-венгерски — «серда» (смотрите на картинке).

Папа привёз из Китая туалетные пиктограммы:

Дайджест телеграма за неделю 23-29 октября 2017

(Спасибо, пап!)

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

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

Дайджест телеграма за неделю 23-29 октября 2017

Олег Мохов пишет: «Невероятно, что в России так могут» —

Дайджест телеграма за неделю 23-29 октября 2017

В России могут очень круто. Если выгнать из России наших чиновников, то получится клёвая страна.

Вот московское архитектурное бюро спроектировало небоскрёб для Манхэттена.

С дайджестом помог Иван Ветошкин.

 2 комментария    40   2017   дизайн   телеграм-канал
Ранее Ctrl + ↓