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

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

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

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

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

Дизайн продуктов

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

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

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

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

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

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

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

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

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

Кнопка «Купить» всегда доступна

Мы рисовали страницу машины для Энви, и там справа есть жёлтый блок, который мы называли «ценником» — на нём кнопка «Арендовать»:

Кнопка «Купить» всегда доступна

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

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

Пошёл я презентовать дизайн Илье Синельникову (один из создателей Энви). Рассказываю, значит, про тот ценник.

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

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

Тут Илья перебивает:
— Что-то ты усложняешь, пусть кнопка просто всегда доступна, пофиг на даты.

Что? Машины же может не быть в эти даты.

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

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

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

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

Принцип: кнопка «Купить» всегда доступна.

2016   Бюро   веб-дизайн   дизайн продуктов   дизайн сайтов   работа

Дизайнерские скидки

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

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

2015   дизайн   дизайн продуктов   дизайн сайтов

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

Вот:

  1. Как создавать продукты, формирующие привычки? «Клиентам выдавали карточки, по которым можно было получить бесплатную мойку, как только вся карточка будет заполнена. Для заполнения карточки требовалось 8 моек. Первой половине клиентов выдали карточку с 8 пустыми ячейками, второй группе выдали карточку с 10 ячейками, но 2 из них уже были заполнены. По итогам эксперимента доля тех, кто сделал 8 моек во второй группе, была на 82% выше, чем в первой!».
  2. Как сбить цену на что угодно. Илья Синельников: «Торговля — это не соревнование в силе, это соревнование в заботе».
  3. Транспорт в Будапеште. Саша Зайцев рассказывает.
  4. Анализ письма сенатора. Любопытные нюансы английского языка.
  5. This is why you shouldn’t believe that exciting new medical study. «Everything we eat both causes and prevents cancer».
2015   английский язык   дизайн продуктов   жизнь   переговоры   транспорт   чтиво

Срок против совершенства

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

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

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

Но — пять лет! Настоящий перфекционист должен быть недоволен. Это провал, так нельзя.

Ссылки по теме:

2015   дизайн продуктов   управление собой

Поддержка Мака обязательна для хорошего дизайна

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

У вас не будет хорошего дизайна.

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

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

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

2015   дизайн   дизайн продуктов   работа

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

Вот:

  1. Blend if. Очередное чудо Фотошопа: оказывается, двигунки в Blend If можно таскать с нажатым альтом.
  2. История о пишущей машинке Киллиана. Я не уверен, что журналисты не понимали, но они определённо пользовались тем, что многие люди не понимали.
  3. Privacy vs. User Experience. Дастин Кертис про слабое место Эпла.
  4. Содержание улиц в чистоте. Фрагмент дореволюционной книги у Тёмы в Же-же.
2014   дизайн продуктов   дореволюционная орфография   Фотошоп   чтиво   Эпл

Главный недостаток систем веб-аналитики

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

Вот посещаемость моего сайта за год в «Метрике» Яндекса:

Посещаемость моего сайта за год

Какой вопрос сразу возникает, когда видишь эту картинку? Правильно: «Что там такое было в мае?». Но хрен Яндекс ответит на этот вопрос. Нельзя нажать на торчащий столбик и спросить «Почему». Зато можно изменить способ отображения графика или посмотреть ещё сто других таких же загадочных графиков!

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

2014   дизайн   дизайн продуктов

Система стилей Ангстрема

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

Когда мы с Шуриком делали Ангстрем, наш мегаконвертер для Айфона (поставьте, если ещё не), мы придумали технологию Ångström Style System, которая ловко сокращается до слова ÅSS.

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

Курсор

Любимая заморочка в Ангстреме — анимация текстового курсора:

Это гифка, лучше смотреть в настоящем приложении (бесплатно).

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

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

В итоге после нескольких часов подбора цифирок получилось вот так:

"cursor": {
  "showTime": 0.2,
  "hideTime": 0.2,

  "color": "@colors.textNumberColor",

  "period12": 0.4,
  "timingType12": "linear",

  "period21": 0.2,
  "timingType21": "easeOut",

  "height1": 48.0,
  "width1": 2.0,
  "delay1": 0.3,
  "alpha1": 1.0,

  "height2": 78.0,
  "width2": 1.0,
  "delay2": 0.1,
  "alpha2": 0.33
},

Это примерно 3% всей «таблицы стилей» Ангстрема.

Синхронизация через Дропбокс и шейк-ту-рефреш

Это две главных радости.

Вообще вынести переменные, связанные со стилем, в отдельный файл — само по себе хорошая идея. Уже так я мог бы играть с разными параметрами и пересобирать программу, не вникая в код Шурика. Как я понимаю, так работает ДБ5 Брента Симмонса.

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

  1. Открываю Ангстрем на телефоне и иду в экран, который хочу подкрутить.
  2. Открываю файл стилей из Дропбокса Сублайм-текстом на Маке.
  3. Меняю параметры, которые хочу подкрутить и сохраняю файл.
  4. Трясу телефоном и сразу вижу, как всё выглядит с новыми параметрами.

То есть прямо запущенное приложение тюнится вживую. Это очень круто.

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

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

Вайрлесс-диджей со встроенной покупкой

Как вы, может быть, знаете, мы с Женей Бодуновым сделали крутой диджейский контроллер для Айпада, который называется Вайрлесс-диджей. Это МИДИ-контроллер, то есть ему нужно хост-приложение на компьютере (мы рекомендуем «Трактор»). Он соединяется по вайфаю, там прямо в проге мануал пошаговый, который рассказывает, как подключить — ну и миксуешь короче.

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

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

Обратите внимание на эклектичное сочетание скеоморфизма и септоиосизма в интерфейсе. На эту тему можно было бы написать докторскую, но мы не стали. Зато иконку привели к новым канонам.

Кнопка:
Взять в Апсторе

2014   Вайрлесс-диджей   дизайн продуктов
Ранее Ctrl + ↓