Напиши мені інтерфейс

Обіцяний звіт🫡 Всі отримані кошти полетіли у Фонд Притули.

Accessibility в UX copy: робимо текст доступним для всіх Мене дуже цікавить тема accessibility в інтерфейсах. І дуже круто, що існують стандарти доступності. Для України вже зараз це дуже важливо. Інтерфейси мають бути зручні для всіх. З цим у нас були проблеми і так, а враховуючи, як багато людей вже скалічила війна, проблема росте. Усім хто працює над додатками та сайтими слід про це пам'ятати. Тож як зробити текст більш доступним? • Розмір і контрастність. Ось тут критично важливо пам'ятати про норму кегля в не менше 14-16px і контрастність на рівні 4.5:1. Перевірити можна, наприклад, сервісом WebAIM Contrast Checker або WAVE Web Accessibility Evaluation Tool. Люди з поганим зором просто не розберуть текст або матимуть з цим значні складнощі, якщо ми забудемо про ці стандарти. • Шрифт. Краще використовувати шрифти без засічок, для більшості людей з вадами зору такі шрифти легші для сприйняття. • Більше часто вживаних слів і менше специфічного сленгу. Короткі слова, які часто зустрічаються у повсякденному житті, створюють менше когнітивне навантаження, займають менше часу для прочитання і легші для сприйняття в цілому. А ще їх легше сприймати на слух. • Короткі речення, списки і заголовки та підзаголовки. По-перше, структурованість спрощує читання тексту абсолютно для всіх. По-друге, люди, які користуються голосовими помічниками, зможуть легше навігувати у просторі вашого інтерфейсу. • Корисні даркпаттерни. Я зазвичай виступаю проти того, щоб перепитувати людей "Ви впевнені, що хочете видалити/скасувати підписку/тощо?", але тут відступлюся від свого переконання. Люди з вадами опорно-рухового апарату можуть мати проблеми з тим, щоб керувати інтерфейсом, тому місклікінг і небажані дії - можлива і поширена історія. Ми маємо давати людині шанс скасувати дію, яку вона зробила випадково. Тому не забуваємо ще і про кнопку "Скасувати". • Підказки + іконки. Люди з дислексією вам подякують, якщо до пунктів меню ви також додавтимете просту іконку, яка буде передавати суть конкретного пункту. А підказки допоможуть орієнтуватися та зменшать рівень тривожності - люди з підвищеним її рівнем можуть боятися клікати на незрозумілі кнопки та розділи. • Додаткові пояснення. Наприклад, коли запитуєте у людини дані її картки, можна додати під полем уточнення, що ніякі кошти поки не зніматимуться. Так само можна додавати приписку про те, що особисті дані людини не передаватимуться третім особам і потрібні для таких-то і таких-то цілей. Інтерфейс має бути прозорим. Загалом, тут має відбуватися дуже тісна співпраця з дизайнером. Бо важливо усе: форма, зміст і подача контенту на сторінці. Важливо, щоб інтерфейсом додатка можна було користуватися однією рукою, кнопки були достатньо великого розміру, а поля і помилки малі коректні зрозумілі підписи з достатнім рівнем контрастності. Попрацювати справді є над чим) Але я дуже мрію про момент, коли українські інтерфейси враховуватимуть потреби усіх категорій користувачів. Нам це справді дуже потрібно.

UX copy в мобільних інтерфейсах Мобільний дизайн вкрав моє серце, тому тема текстів у апках мені особливо цікава і відгукується. А ще вона якраз про те, як райтерам слід взаємодіяти з дизайнерами. Тому що у мобільному інтерфейсі мало місця - тож тут лише якісно продуманим сенсом точно не обійдеться. Рідко це кажу, але: це той випадок, коли форма тексту йде мало не на вищому рівні, ніж його суть. Почну з основ. Має бути: • Якісно продумана типографіка. Шрифт не менше 16 px, нормальні міжрядкові інтервали, чітка ієрархія та структура: заголовки, підзаголовки, списки (якщо мова про великі шматки контенту). Короткі речення і рядки. • Контрастність і колір. Мобільні девайси часто використовують на ходу, надворі, коли часу мало, незручно, треба терміново. Останнє, чого хоче людина - витрачати час, щоб знайти тіньочок, бо на екрані нічого не видно. Не забуваємо про те, що текст має бути видно навіть за яскравого денного світла. І авжеж про людей, які погано бачать в принципі. • Менше тексту. Less is more на практиці. Залишаємо лише суть, бо все інше немає, коли читати - і ще й незручно. Все, що менш важливе, але потрібно, переміщаємо в блок FAQ, наприклад. Про форму поговорили. А як бути з суттю? • Суть - вперед. Це спільне правило для всього UX copy, але тут воно важливе, як ніколи. Перші 2-3 слова мають відповідати на запитання юзера "Що я бачу перед собою?" ще до того, як він його собі поставить. Ще краще, якщо 2-3 слова - це і буде увесь текст. • Не відволікайте людину. Щоб не стати додатком, який людина сприймає за білий шум, не слід слати сповіщення частіше, ніж... Просто робіть це якомога рідше і лише якщо ці сповіщення мають цінність для користувача. • Пам'ятайте про те, що ✨мало місця✨ Пуш із заголовком, який не вміщується у рядок і йде в три крапки за екран, викличе реакцію на кшталт:🤨🤨🤨 Скорочуємо, скорочуємо, скорочуємо. І буде щастя - нам і юзерам:) • Велике розбиваємо на етапи. Progressive disclosure - штука, яка реально працює, коли мова про мобільні інтерфейси. Замість того, щоб читати за раз 5 параграфів тексту або заповнювати 10 різних полів, людині буде значно простіше прочитати один абзац за раз і заповнити 2-3 поля. Розбийте інформацію на блоки і розмістіть їх на різних екранах. І зробіть прогрес-бар, щоб людина розуміла, як довго їй ще терпіти ці борошна 🙂 Я обожнюю апки. Обожнюю, як вони виглядають, як вони спрощують наші життя, які можливості вони відкривають. Том коли в роботу приходять задачки на флоу в мобільному інтерфейсі - це мої улюблені задачки. А з якими інтерфейсами вам більше подобається працювати - з веб чи мобайл?

Приклад даркпаттерна in real life Вчора колега скинула цей скрін і я не могла не поділитися. На скріні - чудовий спосіб змусити люде почуватися винними:) Розумію, що швидше за все цього не було на меті. Але вишло саме так. Як можна було написати? Наприклад: Заголовок: Доставка - 75 грн Текст: Оформіть SMART-підписку, щоб зробити доставку безкоштовною або Заголовок: 0 грн за доставку зі SMART-підпискою Текст: Оформіть підписку, щоб витрачати 0 замість 75 грн за доставку І це тільки варіанти, які перші спали на думку. Завдяки підходу через перевагу замість звинувачення бренд може заробити більше лояльних користувачів і отримати більшу кількість підписників. Так що пишіть тести з повагою до користувачів і буде вам щастя❤️

Курси про UX Writing, на які я і сама хочу На мітапі зокрема говорили про те, що допоможе навчитися писати круті інтерфейсні тексти. Серед іншого, я говорила про курси і навчальні можливості, які для цього зараз існують. Ну так от:) У Projector незабаром стартує курс по UX Writing і чесно - якби не завантажений робочий графік, я б точно вписалась у цей потік. А поки тільки сумно дивлюсь у його сторону і думаю "Ну коли вже, Дарино, ти знову будеш вчитися?". Що буде на курсі? • Основи основ: хто такий UX Writer і що він робить • Про голос і тон продукту • Мікрокопі: що це таке? • Про нюанси написання інтерфейсних текстів, які працюють ...та багато іншого! Чим мені імпонує Projector, так це тим, що тут ти максимально залучаєшся у процес. Легко не буде, але цікаво і корисно - абсолютно точно) Мова курсу англійська, але це - крута перевага, бо це розкриває ширші горизонти зі старту. Курс підійде як копірайтерам, там і дизайнерам, які хотіли б писати тексти в інтерфейсах краще. Записуйтеся❤️ *Кошти з цієї реклами в кінці місяця надішлю на ЗСУ та виставлю звіт.

Курси про UX Writing, на які я і сама хочу На мітапі зокрема говорили про те, що допоможе навчитися писати круті інтерфейсні тексти. Серед іншого, я говорила про курси і навчальні можливості, які для цього зараз існують. Ну так от:) У Projector незабаром стартує курс по UX Writing і чесно - якби не завантажений робочий графік, я б точно вписалась у цей потік. А поки тільки сумно дивлюсь у його сторону і думаю "Ну коли вже, Дарино, ти знову будеш витися?". Що буде на курсі? • Основи основ: хто такий UX Writer і що він робить • Про голос і тон продукту • Мікрокопі: що це таке? • Про нюанси написання інтерфейсних текстів, які працюють ...та багато іншого! Чим мені імпонує Projector, так це тим, що тут ти максимально залучаєшся у процес. Легко не буде, але цікаво і корисно - абсолютно точно) Мова курсу англійська, але це - крута перевага, бо це розкриває ширші горизонти зі старту. Курс підійде як копірайтерам, там і дизайнерам, які хотіли б писати тексти в інтерфейсах краще. Записуйтеся❤️ *Кошти з цієї реклами в кінці місяця надішлю на ЗСУ та виставлю звіт.

Вишов запис розмови з моєю участю на мітапі Kyiv UX Design Community😍 Говорили про криітерії якісного тексту, чому не варто називати користувача "користувачем" в обличчя, даркпаттерни та купу-купу іншого🥰 Дивитися отут: https://www.youtube.com/watch?v=yj1x9B2Kftg

Вибачте😂 Взяла звідси

Як змусити людину зачекати в інтерфейсі Коли ми готувалися до інтерв'ю для мітапу Kyiv UX Design Community, Таня сказала, що хотіла б обговорити тему, яка давно цікавить персонально її. А саме - як змусити людину зачекати в інтерфейсі, коли нам треба 5-10 хвилин на якийсь процес. Обговорити цю тему ми так і не встигли, але як на мене вона чудово підходить для п'ятничного вечора. Вона коротка і не складна. Перше, що треба зрозуміти - змусити людину дивитися в екран загрузки 5-10 хвилин у вас не вийде. Можливо, існує певний невеликий відсоток людей, які на це готові (згадайте себе в підлітковому віці, коли зачаровано дивилися на прогрес-бар встановлення Sims 3 на комп'ютер😅). Але він настільки малий, що я б не стала на нього покладатись. Але є речі, які ми таки можемо зробити: 1️⃣Пояснити людині скільки і чому потрібно чекати. Чесніть - потужний інструмент у роботі з користувачем. Коли ми не приховуємо інформацію і прямо говоримо, наприклад, "Нам треба 5-10 хвилин, щоб обробити ваш запит" - це викликає довіру і відчуття прозорості. Одразу ясно, скільки чекати і чому. 2️⃣Додайте прогрес-бар. Мені подобається, як це зроблено в додатках/на сайтах доставки їжі. Якщо операція займає понад 5 хвилин, розбити її на прозорі зрозумілі етапи - чудовий спосіб залучити увагу користувача і дати йому впевненість у тому, що щось таки відбувається, а не просто зависло. 3️⃣Надіслати пуш, коли все готово і людина може повертатися. Лагідно нагадайте користувачу про себе (тільки ніколи не пишіть "Нагадуємо!" - це може викликати негативну реакцію). Скажіть, що акаунт/документ/підписка готові і чекають, щоб людина ними скористалася. Ну і так: Прозорий простий копірайт - наше все, якщо ми хочемо, щоб люди довіряли нам найцінніше, що у них є: свій час.

Дослідження UX текстів: які методи можна застосовувати Я щира фанатка досліджень. Вони допомагають покращити продукт і зробити його більш юзер-орієнтованим. До того ж, з ними значно простіше писати тексти. Які дослідження допомагають мені? 1️⃣Глибинні інтерв'ю Це просто невичерпне джерело інсайтів про те, як люди говорять, сприймають інформацію і почуваються в інтерфейсі. Їхні бажання, страхи, місця, де їм складно - усе як на долоні. Це корисний метод і для підготовки до написання текстів, і для покращення вже написаного копі. 2️⃣Персони Щоб "влучити" у цільову аудиторію, треба знати, хто ця цільова аудиторія. Коли я дивлюсь на персони, я розумію, для кого я пишу. Це дуже допомагає налаштувати свій внутрішній радар. 3️⃣A/B тестування Старий-добрий метод, який дозволяє перевірити гіпотези щодо текстів. Якщо є суперечки в команді, як назвати кнопку/підписати заголовок/розписати попап - чудовий спосіб зібрати дані і ухвалити рішення на кількісних показниках. Крім того, мені часто допомагають менш очевидні рішення: ☑️Аналіз конкурентів Не знаєш, як написати і з чого почати? Сміливо можеш піти пошерстити сайти/додатки конкурентів, щоб набратися натхнення. Часто це допомагає сформувати приблизну карту робіт - а це вже початок, з цим вже можна працювати далі. ☑️Дослідження соцмереж, записів дзвінків у колцентр тощо Тут може ховатися дуже багато інсайтів. І цей метод - один з найдешевших, майже безкоштовний (якщо не рахувати час на збір і опрацювання інформації - точно безкоштовний). Метод корисний, бо люди телефонують у підтримку зазвичай з проблемами - тобто одразу можна дізнатися, що не зрозуміло, що не вдалося (читайте = де ми провтикалися і треба покращити флоу і тексти). Та і у соцмережах люди частенько тегають бренд/продукт, щоб поскаржитись. Дослідження необхідні, якщо ви хочете створювати зручний і зрозумілий продукт. Тому і тестувати інтерфейси треба з написаним UX райтером копі, і не соромитися проводити окремі дослідження саме текстів. Від цього виграєте ви, ваш продукт і, головне, користувачі❤️

Як райтерам працювати з дизайнерами Текст, візуал та інтерфейс — майже нероздільне тріо. Тому в командах продуктів й існують водночас такі позиції, як райтер і дизайнер. Побудувати процес взаємодії в цій команді вкрай важливо. Будь то графічний дизайн чи розробка інтерфейсів, допомогти можуть такі поради: 1️⃣Домовтеся про інструменти. Зберігати тексти простіше у Google Docs, але працювати з інтерфейсами — у Figma. Я зазвичай роблю так: поки взаємодію з дизайнерами і текст та макет ще в роботі, ми обмінюємось коментами саме у Figma (а іноді і доєднуємось там до аудіочатів). Але коли макет затверджено, роблю копію текстової частини в Google Docs — і тим самим створюю “базу знань” для кожного продукту. 2️⃣Розберіться в термінології. Загалом, словники інтерфейсного райтера й інтерфейсного дизайнера зазвичай дуже сильно перегукуються. Але є деякі інструменти і підходи, якими користуються тільки дизайнери або тільки райтери. Бачите незнайоме слово? Уточнюєте, що це за звір і як його використовувати. 3️⃣Брейншторміть підготовленими. Для мене немає нічого більш контрпродуктинвого, ніж спроби писати тексти на зідзвонах, коли до цього не було часу накидати власні варіанти. Є сенс збиратися на дзвінку і думати над оптимальними рішеннями тільки тоді, коли всі учасники процесу мали час ознайомитися з проєктом і обдумати власне бачення. 4️⃣Пропонуйте ідеї. Райтер+дизайнер — команда, яка може зробити разом майже неможливе: задовольнити потреби і користувача, і бізнеса, і при цьому лишитися в колії айдентики бренду. Але для того, щоб це стало можливим, усім учасникам процесу важливо навчитися висловлювати свої ідеї (аргументовано і конструктивно) і ухвалювати найкраще рішення для продукту — навіть якщо воно не вашого авторства. Ще кілька порад про взаємодію райтерів з дизайнерами читайте на каналі Тексти про тексти у Діани 😎 Ми вирішили розкрити тему кожна зі своєї точки зору та досвіду подібних взаємодій.

Почнімо ранок з трешової реклами?🥴 Я навіть не буду перераховувати, що саме тут не так. Бо доведеться перерахувати просто ВСЕ.

Дякую усім, хто сьогодні був на мітапі🥰 Це так круто — говорити однією мовою на цікаві теми. Ви любов❤️

Лагідне нагадування, що у неділю виступатиму на мітапі і розповідатиму про UX-райтинг❤️ Сьогодні вже не планую нічим вас грузити (я думаю, робота за тиждень і так встигла вас нагрузити). Тому класної п'ятниці і вихідних❤️

До рееечі, знайшла ще один канал про UX-райтинг: “Як назвати кнопку?“ І виявляється, що Ілона (авторка) зараз працює в Київстарі - в моїй "альма-матері" як UX-райтерки🥰 Канал поки невеликий, але дуже перспективний. Підписуйтеся❤️ Я вже🙂 Будемо популяризувати якісні інтерфейсні тексти🔥 https://t.me/whatthebutton

Даркпаттерни в UX-райтингу Сьогодні хочу розповісти про тему, яка сильно цікавить мене саму. А ще - дратує, коли продукти нею користуються. Даркпаттерни - це способи писати текст так, щоб змусити людину зробити дію, яку вона не збиралась робити. Загалом, у дизайні їх існує досить багато, але я намагалась виділити кілька основних, які стосуються саме текстів: • Змушувати людину сумніватися в своїх діях Ви точно натрапляли на екрани на кшталт "Ви точно хочете відмовитись/відписатись/скасувати підписку" або "Ви впевнені..?". Це один з найпоширеніших даркпаттернів - і часто продукти використовують його несвідомо. Змушувати людину сумніватися - погано, тому що у неї виникає відчуття, що вона робить щось не так. Якщо копати глибше, у кожного з цим може бути пов'язана своя історія з дитинства. Але загалом: всі ми любимо бути впевненими в собі, а доводити щось інтерфейсу - кому це треба? Як краще писати? Просто спитайте у заголовку: "Скасувати підписку?". А у підзаголовку напишіть коротке речення про те, яку саме підписку або переваги людина відключає. • Називати кнопку з негативом Ось це мене дратує до чортиків. Коли кнопка замість "Підписатися" називається чимось типу "Стати успішним", а поряд з нею замість "Скасувати" - чимось на кшталт "Лишитися невдахою". Або продавати продукт посилом "Це не для вас, якщо ви не готові змінити своє життя і стати нарешті класною людиною". На вас може і підпишуться, але будуть вас ненавидіти) • Писати заплутаний текст+підміняти механіку компонентів Це тоді, коли замість простої галочки "Отримувати новини" ставлять "Не отримувати новини" (якщо її не поставиш - ти їх отримуватимеш), або взагалі пишуть на цій галочці полотно тексту "Якщо ви не хочете отримувати новини, вам не слід натискати сюди". • Ховати важливий текст Робити функцію відписки не кнопкою, а сірим гіперпосиланням в якомусь неочевидному місці особистого кабінету. Або ховати цю можливість так глибоко, що доводиться звертатися в сапорт, щоб скасувати свій план. Щоб людина, поки знайде цю можливсіть, зненавиділа вас, ваш продукт і все на світі. • Викликати почуття провини Писати щось про те, що якщо людина відпишеться, "ми будемо плакати день і ніч, поки ви не повернетесь" або ще краще "без вас у нас тут усе розвалиться" та інші, часто жорсткіші, варіації. Чи працюють даркпаттерни? На людей, які легко піддаються впливу - так. Але навіть якщо ці люди піддадуться такому жахливому способу затримати їх у вас на сайті/в додатку, вони точно не будуть вашими лояльними постійними користувачами, які б рекламували ваш продукт друзям. Завжди можна знайти способи заохотити людину замість того, щоб її зневажати. Тримайте це в голові❤️ *у коментарі додала кілька скрінів-прикладів даркпаттернів в інтерфейсах

Що було спочатку - курка чи яйце дизайн чи текст? Підходів до роботи і побудови процесу безліч. Здебільшого, спочатку робиться дизайн сторінки/інтерфейсу/будь-чого, а вже потім в процес залучають райтера. А як має бути? Це суперечлива тема і виходити варто з конкретної ситуації. Але я вірю, що команда має працювати над таскою разом від самого початку. Бо моменти, які знає дизайнер, навряд врахує райтер, так само як і моменти, які знає райтер, навряд врахує дизайнер. Є певні принципи роботи з текстами, якими я керуюся в роботі. І зазвичай вони дещо ширші, ніж "тут треба кома, а ось тут можна обійтися двома словами замість трьох". Наприклад: • Речення має складатися з 5-8 слів в ідеалі. • Краще за все запам'ятовується інформація на початку і в кінці списку, тому важливі поінти слід розміщати сами в цих місцях (але краще таки на початку). • Люди не читають тексти підзаголовків без крайньої необхідності. Вони їх сканують і око помічає лише певні слова з загального масиву інформації. • Додавати текст, щоб заповнити порожнє місце - погана практика. І це тільки те, що найперше спало на думку. Загалом, робота UX письменника часто полягає в тому, щоб ставити купу-купу запитань і концентрувати інтерфейсний текст з отриманих відповідей про паттерни поведінки людей у флоу. Тому тут справді потрібна командна робота. І важливо, щоб усі учасники процесу були залучені у нього від початку. Завдяки цьому і можна буде вирішити, чи потрібен вам у конкретному випадку content first.

Трохи душний розбір😅 Загалом, дуже подобаються ці екрани про історії в Телеграмі: • Простий текст: і заголовок, і підзаголовок класні • Кнопка зрозуміла і з дієсловом • Нічого зайвого • Приємний і легкий тон - все зрозуміло і не вичурно Але є одне маленьке запитання: Чому на першому екрані є крапка, а на другому ні? І там, і там одне речення, досить коротке. Тобто логічно було б писати в обох випадках або з крапкою, або ні. Ну і проситься малесенька правка для екрну з кнопкою "для показу у вашому профілі" я б замінила на "які показати у вашому профілі" або щось таке - щоб було з дієсловом, коротше. Та загалом - справді дуже якісно. Побачила вчора і не могла не запостити) А ви що думаєте? Ви звертаєте увагу на такі невеликі розбіжності в інтерфейсах?

Смішного на ніч. Виявляється, це реальний кейс, така помилка (чи таки успіх?) справді існувала😅

UPD: Лекцію перенесли на 17 жовтня