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

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

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

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

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

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

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

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

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

Артур Абраров написал, чем отличаются нативные приложения на iOS и Android (Material Design).

Выжимки из части пунктов:

3. Общепринятый размер экрана для Андроида — 360 × 640 dp. Для Айоса проектируют под размеры iPhone 5 (320 × 568 pt) или iPhone X (375 × 812 pt).

5. В Андроиде есть встроенный инструмент для навигации назад — Android Navigation Bar. Стрелка «Назад» возвращает пользователя по пройденному пути на шаг назад как внутри приложения так и между ними.

6. В Material каждый компонент находится в конкретном месте на оси Z. Надо осознанно подходить к созданию теней.

8. Для верхнеуровневой навигации Айос рекомендует только Tab bar. Андроид — Navigation Drawer (если пунктов больше 5), Bottom Navigation Bar (от 2 до 5 пунктов) и Tabs.

10. В отличие от Segmented Controls в Айосе, между Tabs в Андроиде можно переключаться свайпами. Если используете Tabs, не добавляйте на экран элементы с похожими жестами: карусель картинок или карточки со взаимодействием свайпами.

12. В Андроиде пользователь может раскрыть Navigation Drawer жестом Edge Swipe слева вправо. Этот жест нельзя использовать для чего-то иного вместе с Navigation Drawer. В Айосе жест возвращает пользователя к материнской странице.

13. Поиск может быть в виде иконки. В Айосе она открывает отдельный компонент Search Bar. В Андроиде поле поиска отображается в Top App Bar. В Айосе поле поиска можно спрятать под Navigation Bar и отобразить его, сдвинув содержимое страницы свайпом вниз. Не стоит этим же жестом обновлять содержимое страницы.

15. В Айосе нет аналогов:
— Navigation Drawer — бургерное меню;
— Banner — сообщить важную информацию и предложить связанные действия;
— Snackbar — кратко сообщить о результате пользовательского действия;
— Chips — показать введённый пользователем контент вместе с дополнительными данными или элементами управления;
— Floating Action Button — закреплённая кнопка основного действия;
— Standard Bottom Sheet — страница, часть которой закреплена в нижней части экрана.

16. В Андроиде нет аналогов:
— Page Control — показать, на какой из страниц находится пользователь;
— Toolbar — панель с элементами управления;
— Steppers — кнопки увеличения и уменьшения чисел, например, количества копий для печати;
— Popover — всплывающая панель, например, для настройки текста в читалках и браузерах.

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

22. В Айосе дата выбирается с помощью барабана. В Андроиде — календаря или поля ввода.

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

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

30. В Айосе можно потрясти телефон, чтобы появился диалог отмены последнего совершённого действия.

Инсайты

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

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

Вторая часть занятия была посвящена лекции аналитика из redmadrobot — Сергея Ковтунова. Он рассказал про то, как устроен процесс сбора требований и формирование фич в роботах.

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

В итоге наш фичерлист принял такой вид:

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

Проблема:
Новичкам сложно адаптироваться, в сервисе огромная конкуренция.
Решение:
-Бесплатный безлимит на сутки для новых пользователей;
-Тарифные планы для специалистов, в том числе и безлимитные;
-Функциональный личный кабинет специалиста — показывать ачивки навыков и полученных достижений (пройденные тесты, курсы и т.д.);

Проблема:
Обман от мастеров, обман клиентов.
Решение:
-Оплата при помощи безопасной сделки (через сервис);
-При отклике мастер имеет возможность задать время действия своего предложения.

Меня тут спрашивают, зачем нужны шпаргалки, о которых я написал постом выше

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

Например, вы знаете основы JS, но всё чаще встречаете в примерах непонятный новый синтаксис — ES6. Вы можете прочитать про него длинную статью (например: http://babeljs.io/learn-es2015/), но, скорее всего, сразу всё забудете. Тут вам и придёт на помощь шпаргалка https://devhints.io/es6

Или вы установили себе модный редактор кода Visual Studio Code, но не знаете ни одного хоткея в нём. Вот шпаргалка с ними: https://devhints.io/vscode

Или вы решили научиться верстать флексбоксами, но постоянно забываете синтаксис. Шпаргалка вам его быстро напомнит: https://devhints.io/css-flexbox

Необратимые действия

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

  • отправка e-mail, СМС и прочего;
  • удаление чата;
  • удаление профиля и т.п.

Обычно перед таким действием система спрашивает: Вы уверены?
Но люди не читают, не думают наперёд, торопятся и всё равно делают необратимое действие, а потом ищут способ восстановить.
На одном b2b проекте представитель заказчика просил добавить в систему двойной вопрос на удаление:
- Вы уверены?
<Да>
- Вы точно уверены?

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

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

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

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

2. Если действие необратимо и вы решили спрашивать подтверждение — спрашивайте максимально чётко с донесением последствий действий. У меня есть отдельная мини-заметка (https://telegra.ph/UX-neobratimyh-processov--pro-udalenie-04-17) про это.

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