Чтобы обратиться к какому-либо узлу, его сначала надо найти

Для этого есть разные методы, но в современном прототипировании чаще всего применяются два метода:

let el = document.querySelector(selector)
и
let elems = document.querySelectorAll(selector)

Оба метода получают на вход CSS-селектор элемента. Например:

let el = document.querySelector(".someClass b");

Отличие их в том, что querySelector вернёт один узел, который попался первым, а querySelectorAll вернёт список всех узлов на странице, соответствующих селектору.

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

Если же вам всё-таки нужен метод map, то вы можете преобразовать список узлов в массив при помощи конструкции [...nodeList]:

let arr = document.querySelecroAll("a");
[...arr].map(el => el.innerText);

Подробнее в видео: https://youtu.be/KIBv7QMToP4
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

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

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

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

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

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

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

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

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

7. Заявите о себе: напишите статью, распишите кейс, опубликуйте работу в портфолио.

https://designpub.ru/67ac0a28a732

Эдвард Скотт написал о сравнении товаров в интернет-магазине.

Прежде, чем добавить эту функцию:

1. Проверьте, что у вас есть данные о параметрах товаров и что они структурированы, то есть, например, размеры не указаны то в сантиметрах, то в миллиметрах.

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

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

Если вы уже добавили:

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

2. При наведении курсора на контрол «Сравнить» показывайте подсказку с кратким пояснением: что это за инструмент и как он работает. Так его не примут за функцию сравнения цен с другими магазинами.

3. Дайте легко перейти к сравнению выбранных товаров. Например, отобразите панель с кнопкой «Сравнить выбранные товары» и миниатюрами этих товаров, прикреплённую к нижней или верхней границе окна браузера.

https://ux.pub/ux-rekomendatsii-po-uluchsheniyu-instrumenta-sravnenie-tovarov/

Меньше шума

Меньше шума

Несколько лет назад в каком-то хипстерском медиа типа the Village вышла статья про странный эксперимент.

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

Она настолько упоролась, что отодрала этикетки со всего в ванной комнате.

«Вау» — подумал я, вот это настоящие проблемы первого мира → и пошёл их решать у себя.

С того момента, я периодически убираю этикетки с ёмкостей, если это несложно.

Сегодня вспомнил про это, когда наткнулся на твит дизайнера Твиттера — so meta — где она рассказывала: как закрашивала ДОВОЛЬНО БОЛЬШОЕ лого на велосипеде 🙃

Потому что она — дизайнер, и её сводят с ума мелкие детали, о которых не подумали в достаточной степени

После получения брифа и первичного общения с заказчиком мы отправились пробовать сервис на зуб.

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

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

Второе, что мы попробовали сделать — зарегистрироваться в качестве специалиста.

И у нас не получилось.

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

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

Но и это еще не все!

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

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

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

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

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

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

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

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

Обзор книги Runing Lean

Недавно прочитал Runing Lean от Ash Muraya поделюсь впечатлениями.

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

Внутри вам предлагают посмотреть на свой будущий продукт через Lean Canvas. Это таблица/шаблон, которая позволяет последовательно отвечать на ключевые вопросы. Ниже под постом положил сам канвас. Если читали Остервальдера с его бизнес моделями, то это версия немного с другого ракурса.

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

Как это работает

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

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