Илья Александров написал о дизайне предсерийного прототипа «Симкомата Х».

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

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

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

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

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

«Стенки корпуса и стойку сделали с помощью фрезерования из МДФ. Для прототипа этого достаточно, но было понятно, что на серии нужно будет делать из металла».

https://vc.ru/design/80772

Иногда нужно обойти дерево узлов

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

Для этого есть набор методов:

let el = document.querySelector(".someClass")
el.childNodes // дочерние элементы
el.nextSibling // сосед справа
el.parentNode // родительский элемент

Подробнее в видео: https://youtu.be/MoEWUWIDFDs

И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO


✨Домашнее задание ✨

Взять пример из урока: https://codepen.io/detepr/pen/rQYYbx
1. Посчитать сумму цен всех подарков и вывести её в консоль
2. Отсортировать подарки по цене

Адам Сильвер написал о всплывающих подсказках (tooltip).

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

Проблемы:
1. Пользователи не всегда замечают, что подсказки есть.
2. Пользователь должен что-то сделать, чтобы получить подсказку. Плохо, если в ней находятся, например, требования к паролю. Скорее всего, пользователю придётся их посмотреть.
3. Подсказки могут частично закрывать содержимое и элементы интерфейса. Чтобы заполнить поле, пользователю придётся запомнить текст подсказки.
4. Подсказки могут обрезаться на маленьких экранах.
5. Элементом, с которым пользователь взаимодействует для отображения подсказки, может быть иконка без подписи. В этом случае не всегда бывает понятно, как указать на этот элемент при голосовом взаимодействии с интерфейсом. «Нажми на колокол, нажми на уведомления…»
6. Отображение подсказки при наведении курсора — не самый удобный способ взаимодействия: курсора нет на тачскринах, ховер может быть отключен, сложно прицелиться, пользователь может навести курсор случайно, нельзя взаимодействовать с текстом подсказки (например, скопировать).

Решения:
1. Переделайте дизайн. Если для работы с интерфейсом пользователю нужны подсказки, это плохой интерфейс.
2. Подпишите иконки или замените их на текстовые ссылки.
3. Сделайте важные пояснения видимыми по умолчанию.
4. Для подсказок используйте inline toggle, который активируется кликом и не скрывает содержимое с элементами управления.

https://ux.pub/problemy-s-podskazkami-tooltips-kak-ih-razreshit/

Перефраз в интерфейсе

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

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

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

Выбор категории
Выберите категорию расхода

Выбор категории
Какого типа был расход?

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

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

Двигать метрики – это не стратегия

За последний год я пообщалась не с одним десятком стартапов на тему роадмапа и стратегии – а точнее, их отсутствия. В лучшем случае, было что-то вроде "+x% DAU" или "+x% conversion to y".

"А почему DAU, а не MAU? – спрашиваешь их. – Почему количество пользователей, а не частота использования? А что если мы нарастим DAU в России, а просядем в Китае, это ок?".

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

Продакт отвечает за стратегию развития продукта. Что значит "стратегия":

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

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

  • Но что если мы, например, Avito – количество пользователей растет, но количество покупок не увеличивается;
  • Но что если цикл использования нашего продукта – месяц, а не день;
  • Но что если мы выходим на новый рынок;
  • Но что если мы, например, заспамим всех нотификациями – количество пользователей в краткосрочной перспективе вырастет, удовлетворение от продукта упадет.

Метрики помогают следить за прогрессом; стратегия помогает принимать решения – что, особенно в долгосрочной перспективе, намного важнее.

Самое главное правило сдачи работы

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

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

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

Не хочешь слить в трубу результаты работы — презентуй её лично.