Мы учили продукт, продукт учил нас

Хорошо, когда ты пишешь с рождения продукта и можешь придумывать всё с нуля. Но чаще будет не так. Будут продукты, в которых кто-то уже годами писал до твоего прихода. Будет наследие, с которым придётся что-то делать. И если дать слабину, наследие победит. Чем больше продукт, тем сильнее его влияние.

Тут есть две крайности. Можно бросаться на амбразуру и менять всё на корню. Но тогда рискуешь поломать то, что было всё-таки ок. Допустим, кривоватые формулировки, к которым пользователи привыкли настолько, что не поймут, если написать по-другому. Другой вариант: сдаться и просто делать в том же духе, что и раньше. Но зачем тогда ты?

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

Брови заголовков

Исследования (https://www.nngroup.com/articles/first-2-words-a-signal-for-scanning/) показывают, что пользователи не читают заголовок полностью, а лишь первые несколько слов.

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

Как же тогда решать эту проблему? Используйте брови заголовков.

Брови заголовков — это описательное ключевое слово или фраза, расположенная над основным заголовком.

К примеру: у вас на главной странице банка есть слайдер, а в слайдере предложение с пониженной процентной ставкой по кредиту — добавьте к заголовку бровь «Кредиты». Время, которое пользователь потратит на принятие решения о том, интересна ему эта статья или нет, максимально сокращается.

Как сделать брови заголовков?
Сделайте их меньше основного заголовка, но все же читаемыми. Что бы их выделить, можно сделать жирнее, написать капсом или изменить цвет.

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

Брови заголовков
— достаточно короткие для сканирования
— используют понятные ключевые слова
— дают пользователю контекст
— легки для восприятия

Думай как Билл Гейтс

Смотрю сейчас на Netflix документальный сериал про Гейтса. Очень увлекательно! В последней серии зацепил диалог следующего содержания:
— Билл, как ты думаешь, Microsoft монополист?
— Если монополия это большая доля рынка и краткосрочная власть над ним, то ответ да. Если вы подразумеваете, что у нас непобедимая позиция и никакой более удобный и эффективный продукт не может её пошатнуть, ответ нет.

И ведь правда. У слова монополия очень сильная негативная составляющая. Но разве это плохо? На свободном рынке, если не рассматривать государственные и прочие нечестные монополии, большая доля рынка говорит о том ,что продукт хорошо решает проблемы пользователя. Да, он может быть кривой и показывать вам периодически "синий экран сметри". Но он, чёрт побери, работает! В сериале есть вставки из хрорники, где народ расхватывает коробки с Windows 95, буквально сметает её с полок :)

Сейчас модно ругать Windows. Но ведь именно эта ОС сделала революцию на рынке персональных компьютеров. Сначала её, конечно, сделал Apple в сфере железа. Именно два Стива сделали компьютер персональным (Джобс и Возняк). Но они были нацелены на определенную ЦА. А вот Майкрософт сделал ПК по-настоящему массовым.

Сейчас Гейтс много времени уделяет проблемам энергетики и климата. Они с женой потратили кучу денег (28 миллиардов долларов) на стартапы и инициативы, которые пытаются сделать жизнь лучше в масштабах планеты. Крутой сериал про крутого бизнесмена и просто очень умного человека. Советую!

Про eng UX-тексты

Про eng UX-тексты

Про eng UX-тексты — как сделать первый шаг к тому, чтобы писать microcopy нормально, а не с помощью гугол-транслэйта. Блин, ну это такое позорище, что фу — For signature, например.

Мы дизайн-студия, которая разрабатывает дизайн для финтеха: банки и фин.сервисы. И всё. Никаких тревелов, букингов, отелей и блокчейна(боже упаси).

В конце 19-го года начали проектировать сервисы на английском. Это когда у сервиса нет русскоязычных пользователей.

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

Итак, первый лайфхак — просто начните гуглить

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

1.Просто берите и гуглите картинки сервисов в вашей сфере. Современных и клёвых. Конкурентов и партнёров.
bank, finance, fintech, payment, chat, invoice, interface, n26, monzo

2.Просто заходите на Dribbble и ищите те же фин.сервисы не от индийских, СНГ-шных и русских студий а от локальных ребят.

3.Просто разберитесь с тем, что такое Invoice в менталитете и в mind map-е той страны, для которой вы делаете сервис.
А нет, это уже не просто. Но тогда нечего делать то, в чём вы ничего не понимаете — сначала разберитесь.

Два дня изучения картинок референсов с фокусом на тексты — и вы уже шарите.
Не ебите мозг команде и себе.

Потом расскажу про второй шаг, а то сейчас начнётся ))

Модель двойного алмаза

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

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

Если рассматривать этот процесс в рамках разработки продукта, то получится примерно такая история:

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

HTML-разметка — это просто текст, который делит страницу на смысловые (и не очень) блоки

Когда браузер получает HTML-документ, он на его основе создаёт древовидную структуру блоков, вложенных друг в друга. Каждый объект при этом называется узлом.

Потом к узлам применяются CSS-стили и получается та страница, которую мы видим в браузере.

К любому из узлов можно обратиться через JS как к объекту, чтобы узнать и изменить их свойства или содержимое, создать новые узлы или удалить старые. Структура этих объектов и называется DOM — Document Object Model. Она нужна для того, чтобы вы могли динамически менять содержимое документа после его загрузки в браузер.

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