Дмитрий Караневский

Работаю продуктовым дизайнером в av.by. Проектирую интерфейс для веба и приложений. Пишу о типографике, эмоциях, интерфейсах и профессии.

Телеграм · Инстаграм · Фейсбук · Линкедин · Пинтерест

Интерфейс звонка в браузере

Ко мне обратился друг с просьбой спроектировать интерфейс виджета звонка через браузер. Я назвал его «Браузерная звонилка». Через звонилку менеджер мог позвонить посетителю сайта и убедить купить товар. Агрессивный, непривычный и неприятный инструмент для продаж. Стало интересно, что можно сделать, чтобы не получился очередной онлайн-консультант.

Виджет уже работал, прошёл тесты и держал связь лучше чем Телеграм. Инструмент есть, а задачи нет. Я предложил команде, сформировать цель, миссию, собрать FIRE и завести документацию. Это помогло определить первую версию.

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

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

Звонилка в свёрнутом виде, по-умолчанию в нижнем правом углу

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

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

Виджет можно свернуть во время звонка и дозвона. Пригодится на адаптивной версии.

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

Зелёный индикатор подсказывает, что разговор начался:

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

¯\_(ツ)_/¯

23 марта   интерфейс   сделал

The Work

Для тренировки эмпатии.

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

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

Интерфейс приёма к врачу

Пикассо, «Знание и милосердие». Для красоты и настроения

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

Я написал в саппорт поликлиники и они решили проблему: спрятали блок на фронтенде. Теперь записаться в субботу нельзя даже через отладчик. Фантастика.

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

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

Как выглядит и работает сейчас:

Экран выбора даты

Сложно заскриншотить весь тернистый путь. Попробуйте самостоятельно заказать талон на вымышленную фамилию.

Что норм

Авторизоваться можно в любой момент сценария. Жаль, что обратная связь выглядит как ошибка и ругается на человека.

Анду — запись можно отменить. Но на момет написания поста эта функция не работала. Заказал талон и не смог отменить запись. Придётся сходить к терапевту :)

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

Что можно улучшить

Сделать процесс выбора врача, даты и времени бесшовным.

На первом шаге открытая навигация покажет принцип работы и избавит от лишнего клика. Пускай активной будет самая востребованная категория — терапевты:

Предусматриваем прелоадеры и плейсхолдеры
«Открытый», нативный скроллбар подскажет неопытным пользователям, что можно скроллить вниз

Сразу: врач, день и время. Осталось найти специалиста в поиске или скролить вниз.

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

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

Календарь показывает даты по неделям, порционно
Псевдоссылка — переход к другому специалисту

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

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

Только авторизованный пациент может заказать талон. Эти два шага можно совместить:

А в «спасибо» добавить капельку заботы:

Заказанный талончик хочется сделать осязаемым, словно его распечатали в регистратуре. Моноширинный шрифт и «оторванный» контур:

Время приёма выделено и отмечено галочкой

Кликабельный прототип

Экраны загрузки, пустые состояния, валидации, спасибы и остальные «что если».

Целостность системы

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

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

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

Какие технические ограничения стоят на пути? И как увеличить полезное действие?

  • Фитнес-трекеры предсказывают инфаркт.
  • Фейс-айди определяет симптомы инсульта.
  • ИИ в соцсетях ловит суицидальные мысли.

Куда же завела фантазия! А всё из-за бага в календаре.

17 марта   интерфейс   сделал

Скрипт для приводности

ds-steelline.by — проект, на котором удалось применить приводность

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

Однажды мне удалось убедить команду использовать приводность на проекте. Аргументы: что-то про дисциплину дизайнера и верстальщика, согласованность, дизайн-система и т. д. Но мой истинный мотив был: попробовать как у Бюро. Интересно же.

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

Чтобы победить рутину, написал скрипт:

(function() {
  var body = document.body;
      gridCreate = document.createElement('div');

  gridCreate.id = 'overlay-grid';
  body.appendChild(gridCreate);

  var grid = document.getElementById('overlay-grid');
      gridPosition = 0;
      gridSize = 10;
      bodyHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight);

  grid.style.cssText = 'display: none; position: absolute; top: 0; width: 100%; pointer-events: none;'
  grid.style.height = bodyHeight + 'px';
  grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
  grid.style.backgroundColor = 'rgba(255, 0, 0, 0.05)';
  grid.style.backgroundImage = 'linear-gradient(180deg, #777 0.5px, transparent 0)';

  document.onkeydown = function(e) {
    if (e.keyCode == 71 && e.ctrlKey) {
      if (grid.style.display == 'none' ) {
        e.preventDefault();
        grid.style.display = 'block'; }
      else {
        e.preventDefault();
        grid.style.display = 'none'; }
    }
    if (e.altKey && e.key == 'ArrowUp') {
      e.preventDefault();
      gridSize++;
      grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
    }
    if (e.altKey && e.key == 'ArrowDown') {
      e.preventDefault();
      gridSize--;
      grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
    }
    if (grid.style.display == 'block' && e.key == 'ArrowDown') {
      e.preventDefault();
      gridPosition++;
      grid.style.top = gridPosition++ + 'px';
    }
    if (grid.style.display == 'block' && e.key == 'ArrowUp') {
      e.preventDefault();
      gridPosition--;
      grid.style.top = gridPosition + 'px';
    }
  }
})();

Запускается в консоле. Создаёт скрытый блок с сеткой. Сочетание ctrl + G показывает и скрывает сетку. Стрелки ↓↑ опускают и поднимают её на один пиксель. Alt + ↓↑ меняет интерлиньяж. По-умолчанию стоит 10px, поменять можно в переменной gridSize.

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

Движение вперёд на экране

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

В экранизации «Властелина колец» оператор использовал простую и эффективную композицию. На протяжении всей трилогии герои идут к цели, двигаясь в кадре слева направо:

Движение чётко ощущается на общих, длинных планах

Несколько шагов назад, когда выбор сложный:

Слева уютный дом, а справа пугающая неизвестность

После победы над злом меняется направление движения:

Хоббиты возвращаются домой

Юрий Быков в фильме «Дурак» возвёл приём в абсолют. Протагонист три минуты просто шагает по пустой улице. Кажется, что это только для красивого сайндтрека, но сцена не случайна: дальше герой будет двигаться только налево.

«Те, кому нечего ждать, отправляются в путь»

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

Сомнение, преодоление, движение.

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

Логин в Гугл-аккаунт, отправка сообщения в Телеграме, лайк в Тиндере. Ну, вы поняли.

Это я к чему. Попробуйте поставить кнопку «далее» в правой части модуля. Даже если это нарушает вектор чтения или конструкцию. Смотрите кино, следите за работой оператора.

Слова и образы

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

Вначале было слово

Большинству вещей нужно объяснение или подпись. Уберите текст с плаката Лисицкого и он превратится в хаос геометрических фигур:

Глагол

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

Дело не только в лаконичности и простоте. Сердечко в знаке Вирджинии — лишь буква, часть существительного без которого образ потеряет смысл. У Нью-Йорка сердечко — глагол. Если слово вызывает картинку в голове, то глагол заставляет её двигаться.

Любовник < Любить.

Контекст

В 1949 Пабло Пикассо нарисовал голубя для плаката к «Всемирному конгрессу сторонников мира». Художник любил вино, женщин и рисовать голубей. Поэтому на плакате появилась птица. С тех пор это символ мира.

К 50-летию окончания Второй Мировой войны Лекс Древински нарисовал плакат:

Метафора очень проста: чёрное-белое, движение назад и вперёд, силуэт голубя на небесном фоне. Но с каждым годом всё меньше людей узнают уродские усики и чёлку в фигуре слева. Гитлер, как символ зла, стирается. И плакат становится не таким эффектным, как 20 лет назад.

Слово + движение + контекст — формула крепкого образа.

Положить фотографию на паттерн

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

«БОРЩ» с кругами

С кругами нужно быть аккуратнее — это самая заметная точка на макете. Особенно, когда внутри круга ещё один круг — голова.

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

Незаметно и аккуратно:

Шумно и ярко, если хочется привлечь внимание:

Закон Теслера

Закон Теслера ещё называется: «Законом сохранения сложности».

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

Закон Якоба Нильсена

Люди предпочитают, чтобы ваш сайт работал так же как и другие ресурсы. Потому что проводят на них больше времени, чем на вашем. Конечно, если ваш ресурс это не Инстаграм, Ютуб и Порнхаб.

Порог Доггерти в интерфейсах

Чем дольше отвечает компьютер, тем сложнее человеку сохранять фокус на задаче.

Запуск Фотошопа, переключение треков в Айтюнсе и создание задачи в Джире длятся целую вечность. А вечность равна 0,4 секунды — столько нужно времени, чтобы человек устал ждать следующего шага.

Скорость обратной связи тоже подчиняется этому наблюдению. Если анимация длится дольше чем 0,3 секунды, то это — самая важная анимация в сценарии.

Ранее Ctrl + ↓