3 заметки с тегом

сделал

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

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

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

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

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

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

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

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

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

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

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

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

¯\_(ツ)_/¯

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

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

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

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

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

9 февраля   js   вёрстка   сделал   типографика