Про UX, UI и AI🧨
2.71K subscribers
534 photos
142 videos
2 files
185 links
На канале преимущественно авторский контент. Рекламы нет и не планируется

По остальным вопросам пишите: @nafanyah
Download Telegram
Все кто пришел и не понимает что тут творится - привет. Это просто маленький ламповый канальчик про UXUI выкладываю сюда всякое смежное с этой темой. Кста если есть интересные новости или мысли у вас пишите мне - @nafanyah добавлю с упоминанием вас.
🔥3👍1
Про UX, UI и AI🧨 pinned «Все кто пришел и не понимает что тут творится - привет. Это просто маленький ламповый канальчик про UXUI выкладываю сюда всякое смежное с этой темой. Кста если есть интересные новости или мысли у вас пишите мне - @nafanyah добавлю с упоминанием вас.»
Прошло около десяти лет и в Apple додумались, что уведомления нужно размещать ближе к пальцам..
«Зона большого пальца» - область дисплея, наиболее удобная при использовании смартфона одной рукой.
При проектировании мобильных интерфейсов желательно использовать это правило для удобства пользователей, при этом не забывайте про паттерны поведения каждой операционной системы. Это связано с большими экранами устройств.
В iOS есть функция «удобный доступ» (свайп внизу экрана), но не стоит на неё делать упор когда презентуешь заказчику своё решение, так как ей мало кто пользуется. В Android устройствах тоже есть походите функции.

P.S.
В ближайшее время хочу закинуть пару кейсов которые использовал в нашем приложении для решения похожих проблем 😊
🔥4
Оптимальная длина строки на вебе
Исследования от Baymard говорят, что оптимальная длина строки для основного текста — 50–75 знаков в строке, включая пробелы.

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

Если строка слишком короткая, взгляду придется слишком часто возвращаться назад, нарушая ритм читателя. Слишком короткие строки также вызывают стресс у читателей, заставляя их начинать со следующей строки, прежде чем закончить текущую.
https://baymard.com/blog/line-length-readability
#ux #web
👍4
Кейс, как и обещал. Burger menu - 99% ЗЛО.

Немного предыстории.
Мы разрабатываем приложение и CRM веб-сервис для выставок. Оно уже действует, работает, допиливается постоянно новый и новый функционал. Прила уже превращается в довольно серьёзную систему по функционалу.

Проблема
В нашем приложении нужно было сделать информационный раздел, где бы находилась различная информация о какой-либо выставке (её разделы, новости, календарь, интерактивный план и ещё много чего). Было решено всё это запихать в бургер меню. Сделали всё красиво были пожелания от ГенДира о зацикленности некоторых моментов, в общем серьёзная задача.
Поставили метрики. Проходит N количество дней, после добавления этого меню, прилой за дни выставок воспользовалось около 200к человек и самое ужасное, что могло произойти это 1% переходов в burger menu.
1% КАРЛ!😰

Решение
Сделали в нижней навигации отдельную вкладку "О выставке". Раскидали разделы, которые были в бургере в более информативный вид. По метрикам сейчас ничего не могу сказать, так как разработка ещё идёт, как будет готово отпишу о приросте.

Заключение
Проблемы с бургер меню из-за того что:
1. ЦА не имеет похожие паттерны в приложениях которыми пользуются (банки, мессенджеры), бургер меню в них вообще отсутствует. + люди боятся нажимать на то, что не понимают.
2. Бургер меню находится не в "зоне большого пальца".
Это и некоторые другие моменты связанные со спецификой нашего приложения дают 1% переходов в бургер меню...
#UXкейс #UXcase #UX
Ещё один кейс по поводу "Зоны большого пальца", которую реализовал в нашем приложении.
Это медиафайлы в чате которые были отправлены или получены. По нажатию на голосовое сообщение снизу открывается плеер.

В Telegram это отдельная вкладка в которой нет ползунка, что мне не особо понравилось
В WhatsApp это вообще отдельное окно с иконкой в центре, объясняющая, что это войс, а не видос... не очень как по мне

Сделал снизу под палец.
Можно быстро воспользоваться ползунком по аудио-дорожке, закрытие случайно не нажмёшь, пауза и плей не мешается, правши оценят😁
#UXкейс #UXcase #UX
Надо выделить время и почитать. Кстати чекайте постом ниже канал откуда репост, это самый большой каталог в телеге с книгами по дизайну.👇
«UX Buddy Workbook», Bojan Novakovic 🇺🇸

#дизайн_интерфесов #ux

UX Buddy Workbook – книга, которая пошаговым процессом демонстрирует подход дизайнера Bojan Novakovic к разработке логики (UX) мобильного приложения:
– с чего начинается исследование
– как понять кто такие "идеальные клиенты" и как им угодить
– как строится процесс проектирования интерфейса
– и т.д.

В общем если вы хотели посмотреть весь процесс разработки UX приложения от идеи до финального прототипа – это отличный вариант заглянуть "под капот" и понять как вообще в этом мире уи-дизигнеров все устроено :-)

💾 Скачать
Полистал книгу - не оправдала ожиданий 👆🤔
👏1
Принципы UX-текста от Apple

Давно мечтал узнать, как Apple работает с текстом. И вот они записали целый мастер-класс для нас. Оказывается, для UX-writing у них есть собственная система — PACE (Purpose, Anticipation, Context, Empathy):

Purpose: всегда думаем о предназначении любого экрана и элемента. Надпись «Айфону нужно остыть» не говорит ничего полезного (что надо убрать его от солнца или что экстренный звонок всё ещё доступен).

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

Context: понимать, в какой ситуации будут читать и давать соответствующую информацию. Ситуация может быть как офлайн (на бегу отвечаю на сообщение), так и само флоу — что пользователь видел и делал до этого с телефоном.

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

Посмотрите полностью, просто класс — https://developer.apple.com/videos/play/wwdc2022/10037/
Очень правильный подход я считаю 🍎
This media is not supported in your browser
VIEW IN TELEGRAM
Распознавание аудиосообщения в телеграм премиум. Все внимание на иконку распознавания. Такой я ещё не видел. А ещё она классно меняется на "свернуть" после распознавания.
This media is not supported in your browser
VIEW IN TELEGRAM
Я бы ещё в премиум функцию добавил возможность перевода сообщения на лету, как в твиттер.