В последнее время всё чаще и чаще возникает вопрос о доступности, если раньше скрытиеoutlineдля элементов страницы было общим правилом, то теперь хороший сайт должен иметь outline у элементов, как минимум:focus-visible.Основная проблемаoutline- это их стилизирование.

Я пришел к своему решению, которое изложено в этой статье.

Большой gif

Работая над своим pet проектом мне нужно было сделать один и тот же стиль обводки (при наведении и фокусе) для элементов визуализаций и всех фокусируемых элементов DOM.

Моё решение

Вставляемdivповерх всего остального контента вdocument.body, и отключаем ему обработку событий черезpointer-events: none, растягиваем в размер документа,z-indexдолжен быть больше всех остальных на странице.

Добавляем еще 4-edivс абсолютными позициями в ранее добавленный родительский:

их стили (scss):

Добавляем подписку на события дляdocument:pointerenter,pointerleave,focus,blur:

Не забудьте отписаться если вы делаете какое то React приложение, и вюшка может быть отмонтирована.

В функциях слушателей фильтруем все события поtabIndex > -1уevent.target. При этом также проверяем что у ссылок естьhref, и кроме того что у элементов нет атрибутаdisabled. Когда происходитblurможет оказаться, что элемент оказался в контейнере, который тоже может иметь фокус (тут конечно можно задаться вопросом семантики, но такое бывает почему вbuttonнаходитсяa):

В методеshowполучаем размерыtargetс помощьюgetBoundingClientRect. А затем перемещаем, наши 4-ediv, каждый в свой угол:

Собственно, всё!

Описанный выше код вы можете найти здесь.

Заключение

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

Кроме того,overflow: hiddenне влияет на нашoutline, но иногда нам нужно следить за формой элемента и размерами (к примеру ResizeObserver) , поэтому вы можете улучшить этот подход, все в ваших руках.

Спасибо за прочтение!

Если вам нужна дополнительная информация, дайте мне знать об этом DMartzub.online.

P.S.: английская версия моей статьи здесь

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

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

• убедиться, что именно твой телефон сейчас сопряжён с колонками;

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

• запустить какое-то приложение;

• выбрать какую-то музыку;

• а если тебе ещё на это устройство позвонят, а если телефон жены быстрее твоего подключится?!...

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

Железо, софт

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

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

Сборка и установка железа заняла у меня минут 20 и несколько часов я потратил на написание сайта-web-приложения-интерфейса, который в последствии менялся, обрастал функционалом и принял более-менее окончательный вид. Об этом хочу рассказать подробнее...

Web-приложение, UI/UX

Требуемый функционал мне был хорошо понятен и применив знания по UI/UX я реализовал интерфейс. В интерфейсе отображён необходимый минимум информации: время, погода и несколько радиоканалов. Всё лаконично, просто и надёжно. В любой момент времени можно подойти, ткнуть в кнопку радио, и оно заиграет.

Казалось бы, Цель достигнута, но мне хотелось большего, а именно:

• сайт должен запускаться не как окно браузера, а как обычное приложение из иконки с рабочего стола;

• должно быть плавное переключение каналов (кроссфэйд);

• автоматическое переподключение при потере аудио-потока;

• отображение активности радио при фактическом проигрывании звука (визуализация);

• и некоторые другие плюшки.

Далее было несколько познавательных циклов разработки...

Цикл 1.

Web App Manifest дал возможность реализации сайта, как веб приложения со своим значком на рабочем столе устройства.

Web Audio Api позволил делать визуализацию и анализ аудио, микширование нескольких источников и многие другие вещи. При помощи этой технологии я решил основные вопросы связанные с аудио. Каналы переключались плавно (правда для этого пришлось проигрывать сразу несколько потоков в бэкграунде, чтобы иметь возможность в любой момент времени переключиться на любой источник без ожидания предзагрузки). Визуализация показывала наличие реального воспроизведения и к ней же я подключил дополнительный анализ "молчания" потока.

После тестирования выявлено:

• планшет "засыпает" при отсутствии активности пользователя;

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

• из-за одновременного воспроизведения нескольких источников в бэкграунде необоснованно использовалось достаточно много трафика;

• оказалось, что на Mobile Safari есть очень серьёзные ограничения на работу с многопотоковым аудио и на работу с громкостью. На начало 21го года эти ограничения звучат примерно так: допускается одновременное воспроизведение только одного потока, программная регулировка громкости недоступна.

Цикл 2.

Wake Lock Api решил вопрос засыпания устройства.

Пришлось потратить какое-то время на дебаг для поиска причин нестабильной работы через большой промежуток времени, однако всё привело к тому, что проблема кроется не в клиентской программной части, а где-то на уровне браузера-системы. Т.к. сайт заточён в свою песочницу, я сделал определённые выводы и провёл определённый ресёрч в сторону настроек Web Audio Api, работы с каналами, битрейтом, буферами и пр. Скорректировал настройки.

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

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

Добавил адаптивную вёрстку под любое устройство.

После тестирования выявлено:

• Проблемы воспроизведения потоков через Web Audio Api не пропали. Они стали проявляться значительно реже. Через несколько суток работы браузер мог начать значительно "подвисать" или выключался.

Цикл 3.

Т.к. я так и не смог найти решения для полноценной работы всего функционала построенного на Web Audio Api на mSafari, сделал выдох, перенёс весь функционал работы с аудио через Web Audio Api в отдельную настройку и вернул первоначальную ветвь с простой работой через html5 audio.

Провёл оптимизацию клиентской части. Как инструмент диагностики использовал Lighthouse (pagespeed от google). Если ставить перед собой цель 100 баллов, то можно узнать много полезного используя этот инструмент.

В итоге получилось рабочее веб-приложение, которое отправилось в бой.

После тестирования выявлено:

• В обычном режиме работы с аудио, приложение работает более стабильно. Решением пользуется вся семья (простота и надёжность сделали своё дело).

Эволюция интерфейса

Выводы

1. Идея и реализация были верны, чему я лично очень рад. Принцип "Чем проще - тем лучше" работает практически всегда!

2. Web Audio Api - классная штука, но если её использовать, то необходимо проработать вопрос совместимости и определиться с режимом работы (короткая сессия, длинная сессия (несколько суток), бесконечная сессия). По моим выводам, на начало 21го года, я бы не стал делать на его основе web-приложений для длинных или бесконечных сессий.

3. Так же, для длинных и бесконечных сессий связку андроид - хром - веб-приложение необходимо тестировать на целевых устройствах под актуальными версиями ПО. Я использовал в работе устаревший 8ой андроид, возможно мои проблемы со стабильностью работы уже давно решены, но я работал с тем что было на руках.

Что дальше

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

Вишенка

Многие web разработчики не знают как выглядят 100 баллов в Lighthouse. Вот так... :)

Сайт проекта

Буду рад, если мой опыт окажется полезным и вам. Всем удач!

Меня зовут Илона, я Senior Experience Designer в EPAM. Работа для меня удачно совпадает с хоббив EPAM я проектирую интерфейсы для зарубежных заказчиков, читаю лекции для сотрудников и студентов лабы, менторю дизайнеров. В свободное время преподаю проектирование интерфейсов в магистратуре Университета ИТМО и ведуТелеграм-канал о UX-дизайне.

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

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

Проект и дизайн-команда

Проект, на котором мы работаем крупная e-commerce платформа с большой командой (80+ разработчиков, менеджеров, аналитиков, тестировщиков) и быстро меняющимися требованиями. На таком крупном проекте логично образовалась дизайн-команда из 4 ролей:

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

• UI-дизайнер (в EPAM эта роль также именуется Visual-дизайнер), который отвечает за то, чтобы интерфейс был красивым, эстетичным, хорошо смотрелся на разных разрешениях, соответствовал концепции бренда и возможностям разработки.

• Юзабилити-специалист, который регулярно проводит тестирования дизайна с настоящими пользователями системы, интерпретирует результаты и составляет список рекомендаций по улучшениям.

• Team Lead, который налаживает процессы и решает оргвопросы, обеспечивает команде комфортные условия работы и также занимается UX-дизайном.

Процессы в проекте построены вокруг Scrum: планирование спринта с оценкой задач, двухнедельный спринт, ревью и ретроспектива. Задачи команда оценивала в часах: сколько по времени успеваем столько и берём в следующий спринт. Звучит просто, но оценка в часах вызывала большие трудности у дизайн-команды.

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

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

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

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

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

Вот некоторые цитаты из ретроспектив, которые мы проводили внутри дизайн-команды:

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

Относительная оценка сложности

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

Согласно Scrum, для оценки задач используется абстрактная единица Story point. В одной команде ею могут измеряться часы, в другой дни, в третьей что-то ещё. Кому как удобно.

В нашей команде 1 Story point был равен 4 часам. И нам, по перечисленным ранее причинам, было крайне тяжело оценивать работу в таких Story points. Поэтому я решила наделить Story point другой мерой сложность.

Сложность (complexity) количество усилий, необходимых для выполнения задачи.

В нашем случае оценка сложности в Story points оказалась гораздо эффективнее, чем оценка часов, потому что:

• Оценка сложности помогает сконцентрироваться на создании ценности, а не погоне за временем. Мы перестали пытаться успеть хоть что-то в заявленные сроки.

• Проще включить обсуждения, подтверждения и брейнштормы в итоговую оценку.

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

• Исключаются обсуждения в формате Я бы сделал эту работу быстрее.

• Обычно мы тратим много времени на споры, сколько времени нужно для выполнения задачи, потому что время это очень личная мера. Мне нужно 5 часов, а моему коллеге может понадобиться 8. Оценка сложности не такая персональная и люди легче приходят к единой оценке.

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

Параметры сложности

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

1. Зависимости от других людей

2. Навыки дизайнера

3. Количество коммуникации в рамках задачи

4. Согласованность нового дизайн-решения с уже существующими

_{*хотя параметры описывают работу дизайнера, я думаю, они будут актуальны и для других специалистов.}

Для каждого параметра я подобрала шкалы от 1 до 4. Например, оценка параметра Зависимость (Dependency) выглядит так:

1 (нет сложности) никто кроме дизайнера не вовлечён в работу, нет зависимости от других людей;

2 (низкая сложность) 1 человек вовлечён и немного работы с стороны;

3 (средняя сложность) 2-3 человека и/или много работы со стороны;

4 (высокая сложность) более 3 человек и/или невозможно определить количество работы со стороны.

Подробные шкалы по всем четырём параметрам сложности можно найти в моём докладе для конференции Design Z Day:

Как понять, что сложно, а что нет

Всё познается в сравнении.

Если время можно определить конкретно (например, два часа), то с оценкой сложности возникают проблемы. Что значит сложно? Где грань между сложно и очень сложно?

Секрет относительная оценка. Задачи оцениваются не в вакууме, а относительно друг друга, в сравнении.

Чтобы измерить сложность задачи в абстрактных Story Points, нужно сравнить две задачи и понять, насколько одна сложнее другой.

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

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

Как наша команда начала использовать относительную оценку сложности

Нам было сложно перестроиться с абсолютной оценки часов на относительную оценку сложности.

Для начала я описала все параметры сложности во внутренней документации, привела примеры оценки. Мы обсудили это с командой. Далее мы проделали следующее упражнение:

Из прошлого спринта, который мы оценивали в часах, взяли 3 задачи. Мы их уже выполнили, поэтому всё про них знали. Для каждой задачи мы последовательно прошлись по 4 параметрам сложности (зависимости, навыки, коммуникация, согласованность) и дали новые оценки в относительных Story Points. Это было непросто, мы долго обсуждали каждую оценку и приходили к единой цифре. Вот что у нас получилось:

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

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

Результаты перехода на относительную оценку сложности

Хочу поделиться отзывами команды о первых спринтах с новым подходом относительной оценкой сложности.

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

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

• прозрачность задач;

• более точные оценки с меньшими усилиями;

• команда дизайнеров понимает, что мы должны знать перед выполнением задачи;

• лучшая декомпозиция задач;

• учитывается вся работа, включая согласования, генерацию идей и обсуждения;

• мы постоянно сравниваем задачи и видим общую картину.

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

Больше о проектировании интерфейсов и UX можно почитать в моём телеграм-канале Поясни за UX.

Что в сегодняшнем выпуске: различные генераторы, крутые источники для вдохновения, стильные иконки, топовые продукты из Product Hunt за 2020 год, инструменты для экспорта анимаций и гифок, и многое другое.

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

Погнали!

14. Vektors

Vektors это агрегатор коллекций с иллюстрациями. Все иллюстрации этого ресурса бесплатные (но на некоторые коллекции есть пользовательские лицензии).

В Vektors вы найдете иллюстрации от художников по всему миру и для самых разных проектов. Иллюстрации доступны в форматах PNG, SVG, Figma, Sketch.

На данный момент паки насчитывают 70+ единиц.

13. Pattern Generator

Браузерный генератор текстур позволяет создавать уникальные royalty-free текстуры.

УPattern Generatorгибкие настройки: выбрав базовый стиль, вы можете затем настроить свою текстуру с помощью цветов, фильтров и преобразований. Каждый стиль узора имеет свои уникальные преобразования. Кнопка Shuffle это та же кнопка Random, которая перемешивает стили и выдает рандомизированные элементы.

Экспортнуть файл можно не только в JPEG или PNG, но и в качестве кода для inline SVG и фоновой картинки CSS.

12. Gumaffiliates

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

Идеален как для креативщиков без аудитории, так и для affiliate-маркетологов с аудиторией, но без своей продукции.

Приобретя товар (Gumaffiliates стоит $1):

1) Креативщики получают таблицу людей с аудиторией;

2) Affiliate-маркетологи получают таблицы с продуктами, которые нужно продвигать.

В таблицы входят следующие данные: название продукта (в случае affiliate партнера это название аудитории), ниша, сайт, контактные данные.

11. Parametric Color Mixer

Parametric Color Mixerпозволяет генерировать цвета и затем настраивать палитру при помощи интерактивных эквалайзеров.

После того, как вы определились с выбором цвета, его можно регулировать посредством следующих параметров: Положение, Воздействие, Диапазон, Смешивание.

Количество цветовых гамм можно как добавлять, так и уменьшать.

Экспорт в SVG и CSS.

10. Game UI Database

Этот сайтсоздан специально для дизайнеров, специализирующихся на создании игр.На этом ресурсе вы найдете обширную базу самых разных элементов: от различных попап-меню до HUD элементов. Просто кладезь информации для игровых дизайнеров.Почти 13 000 скриншотов из 355 игр. Более 80 типов экранов.

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

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

9. GIFRun

GIFRunпозволяет создавать GIF-изображения без водяных знаков с разных соцсетей, типа YouTube, Facebook, TikTok, Vimeo, Twitter и многих других, где есть функция встроенного видео.

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

8. Doodle Strudel

Если вы работаете художником или иллюстратором то попробуйтеDoodle Strudel. Этот генератор задач от Пабло Стэнли отличная вещь для тех, у кого кризис идей.

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

7. Scale

Scale отличный сайт с красивыми иллюстрациями, которые подойдут как для дизайна приложений или сайтов, так и для различных промо-материалов или презентаций.

Нужную иллюстрацию можно найти в поисковой строке, или профильтровать по полу, а при настройке можно подбирать цветовую схему в поле HEX-кода.

Иллюстрации доступны в SVG и PNG форматах.

Ресурс совсем новый, но коллекция эффектных иллюстраций насчитывает уже более 120 единиц.

Авторы гарантируют каждый день выкладывать что-то новое.

6. UX Database

Каталог UX-ресурсов, который мы заслуживаем.

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

Сортировать можно по следующим категориям: исследования, анализ, визуальный дизайн, дизайн интерфейсов, продукты нового поколения (AR / VR, чат-боты и т. д.), продуктивности, обучению, мультимедиа.

База данных также удобна тем, что каждый ресурс помечен доступностью: платный, бесплатный или с лицензией Freemium.

5. Pattern Collect

Pattern Collect это своеобразный Dribbble для художников, создающих узоры и текстуры.

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

Ресурс содержит шаблоны в 45 категориях, включая: абстракцию, лица, геометрические фигуры, краски, ретро и многое другое.

4. Flow

Flow это новый игрок на рынке моушн-дизайна. В арсенал инструмента входит:

Импорт файлов Figma, Sketch, XD, Illustrator, Affinity и т.д. (в будущем обещают добавить поддержку Instagram и Dribbble);

Большой ассортимент самых разных функций для крутого анимирования;

Прямой экспорт ваших анимаций из Sketch / Figma в чистый код для Swift, React, SVG и др.

Анимации onboarding экранов, кнопок, рекламного контента и промо-роликов Flow станет отличным помощником в добавлении изюминки вашему продукту.

К тому же, интерфейс Flow интуитивно понятен, т.к. вобрал в себя лучшие практики интерфейса дизайн-инструментов последних лет. Поэтому, если вы умеете работать в Figma или Sketch значит вы быстро разберетесь и с Flow.

3. Byte Dance Icons

Byte Dance Icons крутая коллекция иконок из Figma community, содержащая

почти 3000 элементов для самых разных проектов. Иконки доступны в стилях outlined, filled и two-tone.

Для использования иконок в коде доступна документация дляVueиReact.

Коллекция постоянно обновляется.

2. Best of Product Hunt

Один энтузиаст собрал в Notionтаблицу с лучшими продуктами на Product Hunt за 2020год. Здесь вы найдете коллекцию из более чем 360 продуктов.

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

На 1-ом месте у нас статьяThe State of Design Systems: 2020. Это очень информативный материал, где Google провел исследование касательно использования дизайн-систем в 2020 году. В этом исследовании Google опросил более 1000 дизайнеров.

1. The State of Design Systems 2020

Делимся с вами основными результатами.

UI киты, по мнению 83% опрошенных одна из главных составляющих дизайн-системы. Что в очередной раз подтверждает эффективность его использования.

Figma лидер в таких компонентах, как:

1) Инструменты для дизайна цифровых продуктов;

2) Инструменты дизайн-документации и передачи файлов разработчикам;

3) Инструменты, используемые для управления дизайн-системами.

Material Design с отрывом на первом месте в сегменте используемых дизайн-систем. Далее идут Apples Human-Interface Guidelines и Bootstrap (неожиданно!).

Все больше компаний предпочитают создавать собственные дизайн-системы. 80% респондентов сообщили, что они разрабатывали собственные дизайн-системы внутри компаний. Основная причина своя дизайн-система лучше соответствует бренду компании.

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

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

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

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

1. Проблемы

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

Порядок при первом использовании

- Понять что нужно делать
- Найти сканер или нечто похожее
- Отсканировать чек с qr-кодом
- Найти куда вносить купюры
- Внести купюры
- Найти куда вносить монеты
- Внести монеты
- Найти откуда брать сдачу
- Взять сдачу
- Найти откуда брать чек
- Взять чек об оплате (а почему их два?)
- Понять какой чек нужен на выходе
- Выйти

Ура! так выглядел обыденный процесс покупки пакета молока после работы.

"Почти на каждом этапе покупатель должен что-то искать и в чем-то разбираться"

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

2. Проблемы оформления

• На кислотном красном нормально читаться будет только белый

• Белые подложки усиливают общую контрастность, выделяя все и не выделяя ничего

• Текст у сканера закрывается корзинкой для сдачи мелочи при виде сверху

• Нет привычной структуры, акцентов, иерархии, линии считывания. Глаз вынужден скакать

• Инструкция на мониторе показывает схематически неправильный терминал,
  несуществующий штрих-код, и указывает на несуществующий сканер

3. Возможное решение

Меньше шума, больше информации

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

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

Направляющие и подсказки

Второй по важности этап оплата.

Добавим акцент на купюроприёмник,
но гораздо слабее, чем на чек.

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

Добавим стрелку к оплате монетами. Этот этап происходит одновременно с оплатой купюрами,
но менее важен.

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

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

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

такое оформление не требует никаких технических изменений

"Это решение уже завтра можно напечатать на плёнке и расклеить на каждый терминал"

4. Варианты без привязки к цвету корпуса

Белый вариант

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

Зеленый вариант

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

можно придумать еще несколько вариантов оформления цифр, чека, стрелок

(почти)Идеальные варианты в сферическом вакууме

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

Чек на выходе

После пробивания товаров, кассир дает чек с qr-кодом, это чек для терминала. Сам терминал выдает стандартный чек об оплате, который обычно сразу сминается и летит в урну. Однако на дверцах на выходе стоит сканер без подсказок, какой чек из двух нужно отсканировать. Вдобавок к этому руки покупателя заняты в этот момент покупками, сдачей, и двумя чеками, а возможно и тростью, ребенком, рюкзаком.

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

В некоторых магазинах вместо первого qr-кода дают обычный чек со штрих-кодом, который, однако, также не сработает на сканер на выходе и создаст еще больше путаницы внешней идентичностью со вторым чеком

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

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

Про культурный шок

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

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

Likee, LiveMe, Mico, Hakuna и другие приложения недалеко ушли от Bigo Live, предлагая практически идентичный интерфейс и сценарии взаимодействия, при этом все также, имея огромную аудиторию и внушительные цифры дохода.

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

Про аудиторию и контент

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

Так вот, Bigo Live, Likee, LiveMe, Mico, Hakuna и подобные позволяют этим людям не только купаться в лучах славы 24/7, но еще и зарабатывать реальные деньги.

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

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

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

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

Естественно, эти приложения предлагают разные варианты трансляций: с видео или без, одиночные или групповые. Но особенно популярен формат PK (батлов). Это когда в рамках одной трансляции участвуют сразу два стримера, а сам батл сводится к тому, чтобы за ограниченное время получить как можно больше цифровых подарков. Кто получил больше тот и выиграл.

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

Наиболее старательные стримеры могут получать еще и зарплату при выполнении плана по количеству/длительности трансляций и объему собранных подарков.

И как вы уже догадались, основные зрители всех этих трансляций дети и подростки.

Про монетизацию

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

Вот основные из них:

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

• интерфейсная мотивация приглашение отправить подарок после определенного времени просмотра трансляции.

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

• мотивация от ведущего трансляции часто, сами стримеры активно просят отправлять им подарки, чтобы увеличить рейтинг трансляции, либо достичь какой-то цели и др.

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

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

• социальный статус активное дарение подарков растит социальный статус пользователя внутри приложения. Такие пользователи особенно выделяются на фоне обычных.

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

Цифровые подарки основной, но не единственный способ монетизации. Многие приложения также предлагают покупку цифровых товаров (украшения профиля, эффекты входа) и особые VIP-статусы.

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

Про вовлечение

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

Автоматический запуск трансляций

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

Барьеры при выходе из трансляции

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

Легкий переход к следующей трансляции

Позволяют пользователям переходить между трансляциями с помощью свайпа вверх-вниз. Это поведение очень похоже на привычный способ взаимодействия с телевизором и позволяет дольше удерживать пользователей в состоянии потребления контента.

Покупки без разрыва контекста

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

Про удержание и возврат пользователей

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

Чекины

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

Ежедневные задания

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

Игры

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

Уровень профиля

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

Push-уведомления

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

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

Про деньги

Если вы все еще думаете, что это какая-то дичь, то я с вами соглашусь. Однако это не просто дичь, это золотая дичь. iOS и Android версии Bigo Live, самого главного игрока на этом рынке, только за январь принесли суммарно 27 млн долларов по данным Sensortower. Это на 12 млн долларов больше чем у Tik-Tok, аудитория которого значительно превосходит Bigo Live.

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

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

Постскриптум

Эта статья очень сжатая выжимка из большого юзабилити исследования 13 популярных iOS-приложений, которое я провел несколькими месяцами ранее для одной продуктовой компании. Знакомство с этими приложениями было интересным открытием, которое безусловно расшило мою картину мира. Теперь, возможно, и вашу тоже.

Уже более 10 лет я помогаю разным бизнесам достигать большего за счет удобных пользовательских интерфейсов для любых цифровых продуктов. Если у вас есть какие-либо вопросы по UX напишите мне в ЛС. С удовольствием помогу советом.

Меня зовут Илона, я Senior Experience Designer в EPAM. Я проектирую сложные интерфейсы для зарубежных заказчиков, выступаю с докладами, менторю дизайнеров. В свободное время преподаю проектирование интерфейсов в магистратуре Университета ИТМО и ведуТелеграм-канал о UX-дизайне.

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

Множественные данные, которые, в принципе, можно считать Big Data, представляют из себя набор информации (цифры, процентные соотношения, статусы, параметры, текст и пр.), на основании которой пользователь может делать определённые выводы.

Любимые дизайнерамидашбордырезультат визуализации таких данных.

Но раскидать цветастые графики по экрануещё не значит хорошо визуализировать информацию.

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

В первую очередь вам понадобятся знания основ инфографики.

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

Инфографика зародилась в 18 веке с изобретением столбчатой, линейной и круговой диаграмм шотландским экономистом по имени Уильям Плейфей, которые он опубликовал в книгеCommercial and Political Atlas and Statistical Breviary.Его, по моему скромному мнению, гениальные наработки послужили базисом визуализации данных и до сих пор активно используются для отображения информации.

Большое влияние на современную визуализацию данных оказал профессор Йельского университетаЭдвард Тафти, написавший несколько книг об отображении информации, в том числеThe Visual Display of Quantitative Information.Книга содержит множество примеров и я крайне рекоммендую её к прочтению, для расширения кругозора.

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

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

Косметическое украшение никогда не компенсирует ошибки отображения данных, зато может их исказить.
Э. Тафти

Способы визуализации информации

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

1. Точка индикатор положения данных. Может находиться на оси графика, точке окружности и т.д.

2. Линия соединяет две точки и отображает тенденцию изменения данных.

3. Цвет инструмент выделения качества данных (например, хорошо зеленый, плохо красный). Имейте в виду, что около 4% людей в силу физиологических или национальных причин могут трактовать значение цвета по-разному. Например, многие дальтоники видят и красный и зеленый цвета как коричневый.

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

На основе этих простых элементов можно построить множество визуализаций. Перечислю лишь основные и самые распространённые типы в зависимости от целей отображения.

Инструменты визуализации

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

  

• Круговая диаграмма, пончик отображение количества чего-либо от общей массы.
  Примеры применения: количество гостей/зарегестрированных/регулярных покупателей от общего числа пользователей интернет-магазина, отношение затрат на развлечения/здоровье/путешествия в онлайн-банке, процент любителей белого/красного/розового вина в винном бутике.

  

• Солнечные лучи похожа на круговую диаграмму, но бонусом содержит иерархическую структуру (внешнее кольцо дочерние элементы внутреннего).
  Примеры применения: количество продаж за разные кварталы по месяцам, количество жильцов в субьектах по федерациям.

  

• Вертикальная (столбчатая), горизонтальная диаграмма/гистограмма сравнение значений. Могут быть сгруппированными и сегментированными. Горизонтальный вариант лучше в случае длинных заголовков.
  Примеры применения: сравнение количества продаж разных товаров по месяцам, сравнение количества сотрудников разного уровня в компании, сравнение количества посетителей на разных сайтах.

  

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

  

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

  

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

  

• Временной график линейное отображение событий.
  Примеры применения: отображение опыта работы, план выполнения проекта.

  

• Диаграмма Ганта вариация временного графика для отображения нескольких слоев информации.
  Примеры применения: отображение опыта работы в разных областях, план выполнения разных частей проекта.

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

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

  

• Граф отображение связей и структуры данных.
  Примеры применения: связи сущностей в базе данных, связи в рабочем коллективе, визуализация нейросети.
  

  

• Ящик с усами и Японские свечи два похожих, но совершенно разных графика, которые лучше не путать. Ящик с усами используется для отображенияраспределения вероятностейи применяется статистами в ответах на вопросы симметричны ли данные, насколько плотно они сгруппированы и т.д. Японские свечи (совмещение интервального и линейного графиков) больше применим акционерами и помогает следить за биржевыми котировками, ценами и пр.

  

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

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

• Блок-схема, дорожки бассейна визуализация процесса.
  Примеры применения: сценарий работы устройств на конвейере, процесс взаимодействия разных департаментов во время работы над проектом.

  Пример дорожки бассейна. Если убрать департаменты получится блок-схема

• Таблица простое отображение большого объёма однородной информации для детального изучения. Убедитесь, что таблицы отображают только нужную информацию, достаточно читаемы и интерактивны. Отличный гайд по оформлению таблиц можно найтитут.

  

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

  

Проектирование интерфейса

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

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

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

Анализ актуального состояния

Анализом актуального состояния занимаются, к примеру, сотрудники АЭС, производства, аэропорта, тот самый админ в серверной.

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

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

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

Анализ статистики

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

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

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

Десять советов дизайнеру дашборда

1. Начните проектирование с анализа потребностей пользователя. Определите цель пользователя и какую информацию он анализирует: актуальную или статистическую.

2. Подберите способ визуализации данных исходя из того, что пользователь хочет оценить (сравнить объём данных, соотношение, увидеть иерархию и т.д.).

3. Не перегружайте интерфейс эстетическими рюшами. В погоне за красивым UI и богатыми градиентами можно исказить восприятие данных.

4. Группируйте разные данные в отдельные блоки.

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

6. Не перегружайте один экран множеством разнородных блоков данных. Человек не очень хорошо справляется с объемом более 57 блоков.

7. Используйте понятные заголовкидля всехданных и графиков.

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

9. Будьте осторожны с комбинированием разнородных данных в один график. Лучше протестировать получившуюся визуализацию на понятность.

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

Больше о проектировании интерфейсов и UX можно почитать в моём телеграм-канале Поясни за UX.

Усталость от принятия решений это популярный термин, описывающий случаи, когда человек за определенное время принимает слишком много решений. Исследования показывают, что причина этого явления в исчерпании когнитивных ресурсов именно поэтому после 30минут поисков на Нетфликсе чего-то нового вы в итоге смотрите давно знакомый Офис: ваша способность принимать решения снизилась, и мозг сдался (хотя это и неплохое шоу).

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

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

В этой статье рассматриваются шесть способов снизить когнитивную нагрузку в UX-проекте.

1. Чем реже нужно делать выбор, тем лучше

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

Если у пользователя слишком много вариантов выбора, он легко сбивается с толку и раздражается. У продукта могут быть все необходимые функции, но если интерфейс чересчур запутан из-за чрезмерного количества возможностей, он становится неудобным. В опубликованном в журнале Journal of Personality and Social Psychology исследовании говорится, что такая ситуация часто вызывает паралич принятия решений и раздражение. [1]

В погоне за повышением числа начальных (или повторных) продаж компании могут включать в свои продукты слишком много (или слишком мало) функций. Используя модель, предложенную в Harvard Business Review, можно найти золотую середину в зависимости от желаемого результата.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

При разработке пути пользователей я использую следующие рекомендации:

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

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

• Предотвращайте неправильный ввод данных: сохраняйте их до того, как ошибка испортит пользователю впечатление.

• Не показывайте сообщение на всю страницу укажите, в каких полях ошибка.

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

3. Визуальные подсказки для навигации

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

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

Правильно подобранное количество визуальных подсказок:

• Упрощает обзор и чтение страницы.

• Улучшает визуальную иерархию.

• Улучшает навигацию по странице.

• Существенно повышает коэффициент конверсии.

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

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

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

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

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

4. Снижение когнитивной нагрузки посредством знакомых шаблонов и условностей

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

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

Согласованная цветовая схема.

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

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

Повторение в шаблонах проектирования и условностях.

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

• вашим продуктом станет удобно пользоваться, потому что в нем не будет ничего нового (это снижает когнитивную нагрузку);

• на примере пользователи научатся быстрее, чем при помощи явных указаний (что тоже снижает когнитивную нагрузку).

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

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

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

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

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

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

5. Делайте интерфейс для пользователей, а не для себя или своей компании

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

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

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

При этом можно задавать такие вопросы:

• Что больше всего понравилось в нашем последнем продукте?

• Как бы вы отнеслись к изменению функции X?

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

Есть несколько методов исследования UX, которые помогут держать пользователей в центре внимания:

• Надлежащее исследование рынка.

• Использование персонажей пользовательских ролей.

• Макеты и прототипы для получения быстрой обратной связи.

• Регулярное общение с собственной службой поддержки.

И этот список, конечно, далеко не полный

6. Стремитесь к простоте не перегружайте пользователей большим количеством вариантов и функций одновременно

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

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

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

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

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

Заключение

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

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

Помогли ли вам приведенные в статье советы? Расскажите в комментариях ниже или напишите мне на почту alexander@radahl.no.

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

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

Я постаралась систематизировать в этой статье свой опыт подбора множества дизайнеров на проекты самой различной сложности: от пакета баннеров, лэндинга до интерфейса No-code платформы без ТЗ. Материал будет полезен тем, кто впервые подбирает дизайнера на проект или получает дизайн не того качества, которого хотелось бы.

Поймите - кто конкретно вам нужен

Дизайнеры, как и программисты все - разные. Как 1С-программист не напишет вам CMS на Python, так и дизайнер лэндингов не сделает прототип CRM, которым будет удобно пользоваться.

Запомним следующее:

• UX дизайнер/UX инженер/UX аналитик: занимаются разбором требований, пишут ТЗ, создают CJM и, иногда, прототипы.

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

• У дизайнера часто есть специализация. Мой коллега, который делает только интернет-магазины, прокачал себя в этом настолько, что конверсия его работ высока в любой тематике, за которую он бы ни взялся - практически без предварительного анализа. Однако, графический дизайн простой презентации способен отнять у него массу времени и энергозатрат.

В итоге, если вам нужен простой лэндинг - для него, как правило, хватит и UI дизайнера с ТЗ в зубах. Если нужен прототип CRM, упаковка стартапа - ищем жесткого аналитика, UX инженера с опытом разработки подобных решений.

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

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

Внимательно изучите портфолио дизайнера

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

Насколько работы похожи? Не раз видела портфолио дизайнеров, где 3-5-7 магазинов подряд являются просто перекрашенными версиями друг друга. С таким дизайнером новую кашу не сваришь.

Есть ли работы, схожие по направленности с вашей? Планируете делать магазин? Не поручайте его дизайнеру, у которого 10 баннеров, 3 лэндинга и 1 сайт услуг. И не верьте тому, кто скажет разберусь. Интернет-магазины подразумевают множество специфики, которую нужно сначала понять, прожить, выстрадать, а потом уже применять.

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

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

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

Как с адаптивностью работ? Удивительно, но в 2к21 некоторые дизайнеры делают мобильные версии по остаточному принципу, хотя мобайл - это отдельная и сложная разработка. Посмотрите, делает ли дизайнер мобильные версии своих сайтов, насколько они удобны в использовании, не грешат ли они слишком малым/слишком большим количеством информации на экран. Если мобильных версий нет вовсе - право слово, не стоит.

Что с цветами? Если в проекте больше 3-4 цветов, или цвета спорят за внимание - в 99% случаев перед вами колхоз. Также следует обратить внимание на то, выделены ли CTA элементы (например, кнопки Купить, Заказать, Перезвоните мне) отдельным, контрастным цветом? Если да - это хороший знак. Планируя проект на большую аудиторию - помните, что далеко не все люди умеют правильно различать цвета, и дизайнер с соответствующим опытом будет очень полезен в таком деле.

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

Попросите верстальщика посмотреть один из проектов дизайнера

Допустим, дизайнер прошел проверку по качеству работ и сейчас вы хотите понять - насколько быстро ваш верстальщик справится с выполнением проекта. Просто запросите у дизайнера доступ к Figma/PSD любого предыдущего большого проекта. Если откажется - это уже тревожный звоночек.

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

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

Не стесняйтесь спрашивать рекомендации

Конечно, если вам нужны баннеры или обложка для социальной сети - в рекомендациях нет никакого смысла. Однако, если вы планируете разработку сайта или корпоративного решения за сотни тысяч рублей - нет ничего зазорного в том, чтобы спросить рекомендации, телефоны, мессенджеры предыдущих заказчиков. У опытных специалистов, которые работают за адекватный бюджет (1500-4000р/час) и достаточно давно, с этим обычно не бывает проблем.

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

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

P.S. Если на той площадке, где вы нашли дизайнера, у него нет отзывов, спросите где они есть. Если их нет вообще нигде - лучше откажитесь. И помните что отзывы - не равно живые рекомендации.

Попросите показать готовые сайты

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

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

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

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

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

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

Оцените личное общение

• Насколько внимателен дизайнер? Например, вы задаете 2 вопроса в одном сообщении. Если вам отвечают на один, причем такое повторяется не раз - думайте сразу о том количестве правок, которое будете писать, и сколько раз будете просить их исправить.

• Не боится ли он задавать вопросы, не строит ли из себя мачо, говоря что все понятно? Чем сложнее проект - тем больше вопросов заказчику я задаю, чтобы убедиться, правильно ли я его поняла. Неправильно понятое ТЗ = реальный шанс на то, что половину проекта придется переделывать.

• Предложил ли дизайнер заполнить бриф, передать ему подробности проекта? Если брифа нет, как и других документов - один тревожный звоночек у вас есть.

• Насколько грамотно и адекватно он общается? Если со второго сообщения в вас тыкают и говорят на сленге - стоит задуматься.

Работайте по адекватным ценам и соблюдайте договоренности

С моей точки зрения, в ценовой категории 200-1000 рублей в час непрофессиональных и откровенно странных дизайнеров гораздо больше, чем в категории 1500-2500 рублей в час. В первом случае, вы можете делать проект за 100.000 рублей 3 месяца, а во втором за те же деньги проект будет готов через 2 недели. В общем, попытка сэкономить часто будет стоить долгих поисков, большей вероятности возможных проблем, обильного списка правок и увеличения сроков.

И наконец, очевидное: соблюдайте договоренности и не заваливайте дизайнера десятками далеких от дизайна вопросов. Лучше изучить его анкету, работы, обсудить с понравившимся кандидатом 30 минут по Zoom и принять решение: работать или нет.Для найма на постоянную основу, критерии, конечно, другие, однако никто не мешает попробовать сделать с дизайнером 1-3 проекта, а затем, рассмотреть в качестве постоянного сотрудника.

Буду рада услышать о вашем опыте подбора дизайнера на проект!

Мы все любим ПО с открытым кодом. Журналисты и ученые визуализируют и обрабатывают данные с FOSS (Free and open-source software), государства переводят спонсируемые ими разработки на свободные лицензии, активисты приватности постоянно совершенствуют безопасность технологий потому, что в код смотрит много глаз. Базы данных, серверное обеспечение и прочая инфраструктура на открытом коде обеспечивает работу миллионам серверов по всему миру. На FOSS держится весь наш любимый интернет. И я не говорю о том, что на FOSS основана экосистемы крупнейших движков сайтов: WordPress, Joomla и Drupal. С помощью FOSS миллионы людей могут перевести ПО на самый редкий язык и не дать этому языку умереть под влиянием экспансии мировых языков. Наконец, идеология FOSS дает ответ и монополизации социальных сетей с помощью ActivePub/Fediverse.

Можно достаточно долго перечислять преимущества ПО с открытым кодом, но, по какой-то причине, мы видим, что FOSS повсеместно встречается с противодействием, часто откуда не ждали. В преддверии онлайн-конференции Админка, которая пройдет завтра и послезавтра, я постарался проанализировать нетехнические вызовы Open Source разработки.

Растущие требования пользователей к UX

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

Но даже если UX-еров пригласили, то как поставить процесс так, чтобы UX-разработка не превратилась в мучительную долгоиграющую драму, как например, с Gutenberg в WordPress'e? Можем ли мы говорить о том, что человечество вообще достигло определенных ограничений того, что волонтерские самоорганизованные группы могут разработать? Т.е. есть ли какой-то физический когнитивно-организационный предел open Source разработки? Я верю, что нет, но вопрос, так или иначе, оставлю.

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

Многие платформенные решения глубоко внутри опираются на Open Source инфраструктуру, но постоянно бравируют тем, что мол "нас не надо устанавливать, зачем вам маяться с OS". И действительно, FOSS часто сложен в установке и поддержке.

Я не говорю тут о каких-то пользовательских FOSS-продуктах (например, Tor и VLC). А вот когда у вас предприятие малого или среднего бизнеса (МСБ), но нет тех.образования (и желания его получать тоже нет) в 90% вы не выберете Open Source.

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

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

Программирование это новый алфавит и новый стандарт нормы грамотности или все-таки специализированное знание и дорога к преумножению скорби?

Финансовая устойчивость разработчиков OS-приложений

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

Корпорация зла, пособники капитализма, продажные разработчики, негодяи, технология двойного назначения и т.д. каждый из этих эпитетов легко словить даже за намек на freemium или какой-то более креативный подход к заработку с использованием Open Source.

А те, кого сообщество готово превозносить, вынуждены согласиться на (или полностью принять) аскезу, чтобы не вызвать огонь критики. Вернер Кох, создатель GnuPG, должен сначала признаться о плачевном положении вещей, чтобы получить донаты со всего мира и сохранить место в пантеоне FOSS.

FOSS это только для гуру, аскетов и святых? Или для простых людей с семьями и долгами тоже?

Эпилог

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

Модератор конференции Олег Северов, Computer Vision Developer, один из создателей проекта Lacmus.

Организатор блистательная Алиса Цветкова, Теплица социальных технологий.

Участники: Дмитрий Винокуров, координатор Linux сообщества города Пермь; Антон Булычев, создатель проекта Amnezia VPN; Олег Понфиленок, основатель Copter Express; Элина Ахманова, Associate Software Engineer в Red Hat; Ксения Ермошина, PhD (Mines ParisTech), сотрудница Центра Интернета и Общества (CNRS, Франция), UX-исследователь в Delta.Chat; Святослав Игуана, мейнтейнер проекта NewsViz; Дмитрий Якимчук, веб-разработчик; Ваш покорный слуга, Николай Лебедев, Ион Бурдианов (команда разработки Теплицы); Анна Ладошкина (Foralien Bureau); Dr. Quadragon, евангелист Mastodon; Георгий Перевозчиков, проект Lacmus; Ивана Бегтин, директор АНО Информационная культура; Вадим Мисбах-Соловьев, технический консультант РосКомСвободы и др.

Привет! Меня зовут Гера, я продуктовый редактор вАвито. Пишу тексты для интерфейсов ирассылок, аещё чейнджлоги дляGooglePlay иAppStore. Это тексты, вкоторых рассказывается, что появилось вновой версии приложения. По-английски их ещё иногда называют what'snew или releasenotes.

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

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

А зачем оно всё

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

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

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

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

Процесс в Авито

Сжатые сроки

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

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

Неуловимые изменения

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

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

Есть и ещё одна сложность. Почти все фичи сначала тестируются начасти пользователей всреднем наАвито одновременно крутятся 80экспериментов. Даже если изменение решают катить, отследить этот момент непросто. Фичу могут включить безрелиза набэкенде, тогда отдельной задачи и не появится.

Кто виноват? Что делать?

Детективная работа

Чтобы собрать информацию, нужно превратиться в сыщика идипломата.

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

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

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

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

Формальности

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

Затем записываю текст в файлик систорией чейнджлогов он ведётся сиюля 2018года иотдаю релиз-инженеру, который заливает новую версию приложения встор.

И так подва раза каждую неделю. Не считая майских и новогодних каникул.

Советы по написанию

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

Главная цель такого текста подсветить значимое дляпользователей изменение. Это может быть новая возможность, редизайн или исправленная ошибка.

Соблюдайте законы сторов

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

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

Также помните олимитах. Это актуально скорее дляGooglePlay: внём ограничение 500символов. ВAppStore 4000, нужно ещё умудриться столько написать: это четверть этой статьи.

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

Помните, очём икак уже писали

Человек видит чейнджлоги примерно водном итомже месте авAppStore даже может полистатьисторию версий. Поэтому начинайте иструктурируйте текст по-разному всоседних релизах.

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

Непишите отестах

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

Рассказывайте омасштабных изменениях

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

Иллюстрируйте пользу

Если позволяет место, добавьте наглядных примеров, чтобы ценность изменения стала более явной.

Аккуратно говорите обошибках искорости работы

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

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

Если шутите, то без кринжа

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

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

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

Однажды у нас вышел милый чейнджлог опопулярной породе собак:

Но пользователей Авито так много, что кто-то всё равно непонял:

Непревращайтесь вроботов

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

Что делать, если писать неочем

В Авито в 2020году на Android вышло 46релизов, и 16 то есть треть были счейнджлогами-пустышками. На то есть причины: иногда редактору не удаётся найти интересную тему, а иногда их действительно нет.

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

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

Или об интересном исследовании:

Можно написать что-то ситуативное например, привязаться кчемпионату мира пофутболу:

Или рассказать очём-то, что можно найти наАвито:

Если соблюсти формальности и сказать обисправлениях, можно аккуратно прорекламировать икакой-то свой проект:

Кратко: как писать симпатичные чейнджлоги

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

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

• Не преувеличивайте. Если приложение нестало работать быстрее уабсолютного большинства пользователей, не стоит говорить, что всё внезапно начнёт летать.

• Будьте последовательны. Чейнджлог ещё одна точка соприкосновения пользователя спродуктом. Если обычно общаетесь навы и,вообще, деловито, нестоит писать Зацени, обновление пушка!

• Приносите пользу. Представьте, что вам нужно объяснить изменения бабушке, пока выедете влифте. Важно подсветить, что вобновлении интересного, как оно улучшит жизнь.

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

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

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

Например, для всех кардиомониторов, систем вентиляции легких и прочих жизненно важных штук есть стандарт по звукам. На странице ISO/IEC 60601-1-8 можно послушать сигналы (но вы, наверное, и так примерно их представляете, если смотрели хоть один медицинский сериал).

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

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

У некоторых сигналов есть история. Например, сигнал аппарата искусственного кровообращения был смоделирован на основе песни охранников ведьмы из Волшебника изстраны Оз (реально похоже).

Звук для инфузии медикаментов имитирует звук падающих капель.

В какой-то момент популярную мелодию Я оставил свое сердце в Сан-Франциско хотели использовать как сигнал о проблемах с сердцем, но передумали.

Но, несмотря на все это веселье, и волшебников из страны оз, текущий набор работает плохо.

Йоко Сен музыкант. В 2012 году она оказалась в реанимации. Медицинские приборы постоянно пищали около уха. Когда к ней пришла медсестра, Йоко спросила, нормально ли это, что машина так орет. Да, она просто постоянно пищит, ответила медсестра.

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

Более того, несколько приборов, которые работали в палате Йоко Сен, образовывали дьявольский тритон.

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

После выздоровления Йоко Сен будет помогать компании Sen Sound, которая пытается изменить шумовой фон в больницах.

Шум в больнице

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

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

Новые сигналы. Распознаваемость

Группа Эдворти, профессора прикладной психологии из Плимутского университета, провела эксперимент. Сравнила несколько наборов звуков: те, которые соответствуют стандартам, иальтернативные наборы.

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

В каждом наборе было десять мелодий: general, perfusion, cardiovascular, drug administration, oxygen, power down, temperature, ventilation, medium priority, и low priority.

Обидно, но в статье не приложены аудиофайлы, только текстовое описание звуков, типа трезвучие G4-C5-F4 в нерегулярном ритме.

Первый набор IEC

Это стандартные сигналы, которые используются сейчас.

Второй набор Word Rhythms

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

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

Третий набор Auditory Icons

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

Четвертый набор Auditory Icons + Ident

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

Пятый набор Resilient

Этот набор акустически более простой и обладает

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

Участники

В исследовании участвовало 194 человека.

Половина участников были в возрасте до 21 года, четверть до 25 лет, а остальные старше 25 лет, равномерно распределены по возрастному диапазону до 72 лет.

44 из них слушали стандартные сигналы, 24 второй набор, 45 третий, 44 четвёртый, 38 пятый.

Эксперимент

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

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

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

Результат

Все экспериментальные наборы звуков показали себя лучше, чем стандартный набор IEC. Проще всего респондентам было узнать звуки из набора Auditory Icons, где использовались метафоры из обычной жизни.

Новые сигналы. Локализация

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

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

Частично IEC это учитывает. Там есть требование, что сигналы тревоги должны иметь не меньше четырех гармонических составляющих в диапазоне от 300 до 4000 Гц, но это все еще довольно мало.

Участники

В эксперименте учавстовали те же 124 человека, что и в первом.

Эксперимент

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

Участники слышали 64 сигнала в одном блоке каждый из восьми сигналов звучал в случайном порядке из каждой из 8 колонок. Всего блоков было 3, то есть каждый участник услышал 192 сигнала.

Ответить нужно было в течение 8 секунд после начала звучания и ответ можно было дать только один раз. Промежуток между сигналами был по 2 секунды.

Видно, что хорошие результаты показывают наборы Auditory Icons (и Auditory Icons + Ident) иWorld Rhythms. Пользователи допускают меньше ошибок и гораздо быстрее распознают направление сигналов.

Cо временем в целом возрастает точность (пропорция правильных ответов) и падает скорость распознавания (люди устают) во всех наборах.

Логично, что тяжелее и дольше всего распознавались звуки из колонок, которые стояли заспиной у человека 4, 5, 6.

Результаты

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

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

Выводы

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

У SenSound, кстати, в итоге получилось вот так

Источник
The Recognizability and Localizability of Auditory Alarms: Setting Global Medical Device Standards Judy Edworthy, Scott Reid, Plymouth University, Devon, UK, Sin McDougall, Bournemouth University, Poole, Dorset, UK, Jonathan Edworthy, Stephanie Hall, Danielle Bennett, James Khan, Ellen Pye, Plymouth University, Devon, UK

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

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

Откуда берутся стопиццот вкладок

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

Учиться и ещё раз учиться

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

Работать и ещё раз работать

Часто по работе приходится смотреть на однотипные представления различных элементов выборки. Например, когда открыто много различных графиков или таблиц. Бывает, что некоторые из них представляют особый интерес, и их надо отложить для более подробного обследования. Так может накапливаться по паре-тройке десятков вкладок. Конечно, немного дисциплины и ручное складирование урлов в специальный документ может решить проблему, но... специальный документ - это тоже вкладка, по которой надо попасть мышкой, кликнуть в поле ввода, вставить урл, повторить процесс заново. Размещение этой вкладки первой и использование Ctrl+1 может слегка ускорить процесс, но не настолько, чтобы сделать его полностью безболезненным.

Потом почитаю

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

Всё вместе

Совмещаем все сценарии вместе (а лучше перемешиваем) - вуаля! Коктейль "взрыв в картотеке" готов! Полоска со вкладками превращается в частокол из иконок шириной по 5 пикселей каждая, и вот вы уже перемещаетесь по вкладкам, используя Ctrl+Tab, потому что в иконку теперь хрен попадёшь.

Почему мы вообще решили, что стопиццот вкладок - это плохо?

Ну очевидно же! Отнюдь. Давайте я проговорю очевидные для меня недостатки вслух, и вы либо скажете "а об этом я и не подумал", либо "а главного ты так и не сказал". (Либо что-то ещё, о чем я не подумал). Пожалуйста, поделитесь в комментариях своими ответами на этот вопрос.

Трудно найти страницу по заголовку

При открывании кучи вкладок они скукоживаются в размерах, убивая всю пользу, заложенную в каждый тег <title>. Если у вас достаточно терпения - можно заняться пиксель-хантингом в ожидании всплывашки по наведению мышки на вкладку. Чуть лучше, если вы листаете аккордеон со вкладками в мобильном Safari. В смысле, чуть лучше с прочтением заголовков страниц, потому что пиксель-хантинг заменяется остервенелым тереблением мехов виртуального баяна.

Правило7 2

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

Почему существующие решения не работают?

Как всегда, попрошу вас поделиться мнением в комментариях. Мои догадки таковы:

Переключение контекста

Иногда я порываюсь систематизировать отложенные вкладки путём добавления их в закладки. Казалось бы, Ctrl+D, Ctrl+W - и вкладка в закладках, и закрыта, и потом почитаю. На практике мы просто превращаем горизонтальный бардак (в иконках) в вертикальный (в менеджере вкладок). Конечно, можно создавать вкладки в разных папках, но это требует промеж двух быстрых рефлекторных хоткеев отвлечься на выбор папки из выпадушки, а если нет нужной - ещё и на её создание. Естественно, такое переключение контекста на каждую открытую вкладку не понравится ни одному обленившемуся мозгу, включая мой. Эта проблема будет преследовать вас при использовании любого инструмента - будь то добавление одиночной страницы в закладки штатными средствами, перетаскивание вкладки между цветными группками Chrome, использование стороннего расширения.

Чтобы не потерять, нужно систематизировать.

Чтобы систематизировать, нужно переключить контекст.

Переключение контекста обходится дорого.

Линейность полосы вкладок

Когда я был настолько молод, что печатал двумя пальцами и совсем не вслепую, мне хотелось, чтобы изобрели голосовой ввод - ведь это я умею делать быстро и учиться этому не надо. С тех пор голосовой ввод изобрели, но им не пользуются, если в комнате больше одного человека - чтобы не шуметь и чтобы не палиться. Однако если бы я им пользовался для поиска открытых вкладок, это было бы что-то вроде "Хабр -> Паяем ардуины" или "Работа -> График продаж за сентябрь 2015". Возможно, у вас получилось бы по-другому, но моя старая доинтернетная привычка раскладывать файлы по папочкам на локальном компьютере привела к тому, что я мыслю о файлоподобных сущностях как о (минимум) двухуровневой структуре. Закладки браузера могут иметь произвольную вложенность, и вы даже можете ею пользоваться в таком стиле, если в браузере отображается панель закладок, но это сущность совершенно отделена от панели вкладок, которая всегда линейна.

Ограниченная функциональность

Всё, что мне доводилось видеть в деле организации вкладок, в лучшем случае напоминает хромой explorer.exe. (Я - жертва виндового импринтинга, поэтому буду использовать данное название как синоним привычного файлового навигатора, даже если Nautilus выглядит так же.) Помните, как выглядит менеджер закладок?

Слева - древовидная структура папок, справа - список фавиконок и названий страниц (ну или урлов, если тег <title> на странице отсутствовал), сверху - текстовый поиск (удобная вещь, по правде говоря, если помнишь вкладки по имени). Можно на миг представить, что закладки - это файлы на локальном компьютере. Многие привычные базовые операции доступны - навигация по дереву, открыть/выделить/копировать/вставить/переименовать/удалить. Однако до полноценной файловой оболочки здесь очень далеко:

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

• отсутствие панели задач. Да, её роль в браузере выполняет собственно панель вкладок, но в ней нет ни возможности открыть папку как одиночную сущность, ни возможности автоматически группировать вкладки с одного сайта в стопку, как это было придумано для разных окон одной и той же программы в Windows 7;

• возможность добавлять ссылку на одну и ту же страницу в одну и ту же папку множество раз. Если в этой папке уже много ссылок, это вносит свою лепту в захламление;

• невозможность добавить новую закладку, не покидая страницы менеджера закладок;

• exlporer.exe позволяет открыть одну, две, три папки и использовать drag'n'drop. Это могло бы решить проблему из предыдущего пункта, а также помочь в сортировке закладок на холодную голову, если до этого когда-нибудь дойдут руки.

Какими свойствами должно обладать решение моей мечты?

• Наличие логической иерархии, хотя бы двухуровневой;

• долгосрочное хранение (переживать закрытие браузера);

• файлоподобное управление вкладками (групповое выделение, перетаскивание из/в папки);

• наличие визуальной иерархии (вместо одномерной панели - подобие файлового менеджера с плиткой);

• удобные хоткеи к этому всему.

Одним предложением: мой идеал - explorer.exe в браузере.

Погодите, похоже, что миллениалы изобрели...

группы вкладок в Chrome 85. Ну почти. Судите сами:

• логическая иерархия - двухуровневая, группа -> вкладка;

• долгосрочное хранение - флажок "восстанавливать вкладки после закрытия";

• файлоподобное управление - насколько оно возможно в однострочной панели; вкладки можно выделять, совершенно привычным образом, зажав Shift или Ctrl для выбора диапазона или отдельных вкладок соответственно;

• визуальная иерархия - группа выделяется цветом, её вкладки подчеркиваются этим же цветом;

• в конце концов, это доступная из коробки ванильная функциональность.

В данный момент за неимением лучшего решения я пользуюсь этим. Конечно же, у этой штуки есть и недостатки, и немалые:

• нет аналога кнопки "добавить все вкладки в закладки" - придется выделить весь желаемый диапазон вкладок и затем добавить их в группу;

• нет горячих клавиш. Новая вкладка по Ctrl+T всегда будет открываться вне группы. Можно щелкнуть правой кнопкой по группе и выбрать "новая вкладка в группе", но это дополнительное время на прицеливание;

• представление вкладок так и осталось визуально одномерным;

• двухуровневной иерархии может быть недостаточно;

• даже в свёрнутом виде группа занимает место на панели вкладок.

Let the holywar begin!

Давайте вместе пофантазируем на тему: как эффективно управлять вкладками? Приглашаю в комментарии!

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

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

Вот почему никто ещё не скопировал

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

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

Может быть, переключатель просто низко-приоритетная штука: большинство пользователей звонит не так часто (по результатам нашего опроса). Хотя вы, безусловно, чаще выключаете телефон, чем звоните, это и было одной из причин, почему их вообще сделали. Apple сделала переключатель на оригинальном iPhone в 2007 году, когда приложения и мобильная сеть были на втором плане и люди чаще звонили. Но многое изменилось за эти 14 лет.

но вот, почему все равно следует это сделать

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

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

Физический переключатель решает проблемы. Если телефон вдруг начинает звонить или приходит уведомление ты можешь просто моментально выключить звук. Это станет привычкой очень быстро. Еще, вы включите звук, когда ждете важное сообщение, когда не боитесь забыть его потом выключить.

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

От переводчика

Это мой первый перевод, буду рад вашим комментариям, если что-то не так.

Я сам третий месяц пользуюсь 1+8T, а раньше у меня был Samsung A50, совсем не флагман. Он заметно тормозил и, когда в школе вдруг мне звонили, приходилось судорожно пытаться разблокировать телефон: датчик отпечатка пальцев под экраном лагает, потом лагает интерфейс Теперь руку в карман, и все дела.

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