Аврора Харли написала о непредсказуемой работе крестиков, закрывающих окна с формами.

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

Чтобы продукт вёл себя предсказуемо:

1. Запрашивайте подтверждение перед деструктивным действием, когда могут пропасть пользовательские данные. Например, если пользователь закрывает фильтр, не применив его, отобразите диалоговое окно: «Вы хотели бы применить фильтр перед возвращением в список товаров? Да / Нет».

2. Замените крестик на текстовую кнопку, которая чётко даст понять, что произойдёт: отмена или закрытие.

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

https://ux.pub/otmenit-ili-zakryt-dizayn-neodnoznachnyh-deystviy/

Блок продукта. Продолжение

Блок продукта продолжился занятиями с Женей Бондаревым, арт-директором Redmadrobot. С Женей мы провели около 4 занятий. Одна из основных целей его занятий — научить нас выходить за рамки привычных паттернов поиска идей.

Дивергентное мышление

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

Далее мы проверили этот подход на себе:

Шаг первый. Женя попросил нас выписать на бумаге 5 проблем, с которыми мы сталкивались последнее время. Всё что угодно от длинной очереди в магазине, до простуды. Потом из 5 проблем мы выбрали одну наиболее интересную для себя.
Шаг второй. Необходимо было открыть Яндекс Дзен, рандомно проскроллить ленту и остановиться на случайной новости.
Шаг третий. Соединить эти истории вместе.

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

Проблема, которую я выписал — цена на Uber от метро до дома неприятно повысилась, а Яндекс Дзен выдал мне статью о том, что власти Москвы хотят создать департамент одиночества.

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

как-то так 🙂

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

Энтони из UX Movement написал о таком состоянии кнопки как «загрузка».

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

Если между нажатием кнопки и ответом системы проходит больше 2 секунд, показывайте индикатор загрузки:
— Его лучше расположить на кнопке, так как на ней сосредоточено внимание пользователя при нажатии;
— Он не должен менять размер кнопки;
— И не должен перекрывать текст кнопки. Если индикатор не влезает, вся кнопка или её грань может стать индикатором, постепенно заполняясь цветом.

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

Чтобы пользователь лучше понимал, что происходит, текст на кнопке можно менять, например: «Отправить» → «Отправка…»

https://ux.pub/v-kakih-sluchayah-neobhodimy-knopki-s-indikatorom-zagruzki/

Наблюдения

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

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

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

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

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

По методологии, на наблюдения выходят обычно 4 полевика. Они работают в разные дни, делается это для того, чтобы каждый из них дал свою оценку и увидел то, что мог не увидеть другой (поэтому так важен опыт и внимательность). Иногда только на четвертом проходе обнаруживается какая-то важная пробема..
Получается, работу наблюдателя можно разделить на две части — работа в поле, где он собирает информацию, и обработка полученной информации за программой.
Благодаря этому, исследователям и аналитикам передается уже готовый проект — файл QGIS, где каждая проблема привязана к координатам, имеет индекс, описание и фотографию. Таким образом, информация уже готова для обработки.

Три правила организации процесса дизайна

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

4 правила хороших видео

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

Когда хочется продемонстрировать баг, нужно показать результат работы по задаче, показать как работает интерфейс — лучше говорить, чем писать. Чтобы передать мысль быстро, а не ждать назначенной встречи, мы прибегаем к «лумам» — коротким видео, записанным при помощи https://useloom.com.

Чтобы лум сэкономил время тебе и коллегам — соблюдай простые правила:

— Не молчи. Хороший лум — это не урок из скучного курса, а живой рассказ живого человека. Когда ты молча возишь мышкой по экрану — это понятно только тебе.
— Включи камеру. С живым человеком гораздо приятнее общаться, чем с его экраном. И пофиг, что на фоне любимая рюмочная — живое общение всё компенсирует.
— Не тяни время. Если твое видео можно уместить в минуту — не записывай пятиминутный сериал. Цени время коллег.
— У готового видео обязательно укажи заголовок. Когда твоя проблема называется «HTTP://LOCALHOST:3000», её не очень хочется решать. Клёво — когда тема понятна сразу: «Не отправляется заказ с дробной ценой», «тормозит загрузка картинок» и т.д.