Специальные организмы

UX_sturzaman Специальные организмы

Год назад мы перестроили процесс работы команды с китом в Figma и перестали проебываться с правками по десяткам экранов разом.

Для этого в общей теории атомарности мы вели специальные организмы.

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

В нашей дизайнерской вселенной живут пять сущностей, две из них — наша находка.

1. Атомы
Базовые элементы-одноклеточные. Отвечают за стиль и используются много раз. Атомом бывает фигура или иконка.

2. Молекулы
Сумма атомов, основа дизайна: это целостный элемент, например кнопка, инпут, меню или тапбар. Отвечает за разметку (расстояния).

3. Организмы
Это состояния молекулы, которые передают цвет и отображение атомов. Например, состояния кнопки: при наведении или при нажатии.

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

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

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

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

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

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

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

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

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

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

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

Как человек решает задачи в интерфейсе

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

1. Сформулировать задачу. Я подписан на один канал в Телеграме. Он хороший, но надоел оповещениями. Хочу их отключить.

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

3. Оценить результат. Кнопка изменилась: Mute → Unmute. Рядом с названием канала появилась иконка с перечёркнутым динамиком. Полагаю, оповещения выключены.

На каждом шаге интерфейс может помогать, а может вставлять палки в колёса. Вот как это бывает:
https://antonz.ru/user-actions/

Искусство задавать вопросы

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

История
В середине 60-х в США в маркетинговую компанию обратился магазин мебели с целью повысить свои продажи.
Маркетологи начали свою работу с того, что стали задавать вопросы:
Как происходит процесс продажи?
Продажа происходит по каталогам.
Как вы доставляете эти каталоги?
Их кладут в почтовые ящики
Что с ними происходит дальше?
Люди забирают рекламные каталоги и хранят их дома.
Чем ваша продукция отличается от конкурентов?
Особо ничем не отличается — у конкурентов представлен схожий ассортимент.
Тогда как покупатели выбирают, где сделать покупку?
Чаще всего люди просто берут первый попавшийся буклет и делают заказ.

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

Искусство задавать вопросы от Жени:
• Спрашивать только про опыт — как человек занимался чем-либо. Например, вместо вопроса — что вы думаете об этой функции, лучше спросить — когда вы в последний раз пользовались этой функцией?
• Если респондент обобщает — значит он врет. Маркерами могут являться такие фразы как: «в целом мне все нравится», «если разобраться, то ничего сложного нет» и т.д.
• Если человек не пытается решить проблему — значит её нет.
• Задать 5 почему подряд

Чем отличается результативность, продуктивность и эффективность друг от друга?

Если привести пример на человеке, которые изготавливает какую-либо продукцию, то получится следующая картина:

Результативность — это когда 100 гаек за 8 часов.

Продуктивность — это когда те же 100 гаек, но за 6 часов.

Эффективность — когда мастер, прежде чем браться за работу, анализирует и говорит — а зачем вам 100 гаек? — давайте лучше использовать сварку.

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

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

let el = document.querySelector(".someClass");
el.innerText // текстовое содержимое
el.innerHTML // HTML-разметка содержимого
el.outerHTML // полная HTML-разметка
el.offsetWidth // ширина, аналогично Height
el.offsetLeft // координата левого угла
// и так далее

Назначенные узлу стили можно узнать через свойство sytle:

el.style.color // цвет текста

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

getComputedStyle(el).color // цвет текста

Если захотите узнать более сложные свойства, то не забудьте преобразовать их названия в camelCase. Например: background-color → backgroundColor;

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

Британка у всех на слуху, что же она из себя представляет?

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

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

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

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

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