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

парни собрали данные на примере продуктов, которыми мы все пользуемся каждый день: tinkoff, ios, spotify (по методу first click, который базируется на простом ключевом показателе эффективности интерфейса — это то, насколько успешно пользователь начинает решать задачу".)

Попробуйте пройти небольшой тест перед прочтением статьи

По результатам исследований, если первый клик был верным, то вероятность успешного завершения пользовательского сценария составляет 87%. Те, кто при первом нажатии попадают не туда, выполняли задачу лишь в 46% случаев.

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

Да, что уж там, у парней и сервис есть душевный для проверки креативов, интерфейсов. Будем пробовать.

и сегодня нам подвезли очередную порцию #trendwatching
как раз в обед к десерту

1▪️https://juanmora.co/ - сайт бесконечного скролла (хотя он все-таки не бесконечный). Просто очень прикольная идейка, ховеры, анимация и копирайт.

2▪️https://kffein.com/en - простой и понятный сайт агентства в Монреале. Классическая черно-бело-красная цветовая гамма, приятные ховеры. Нравится идея с курсором в виде боксерской перчатки (появляется внизу в блоке с вакансиями). Предлагаю заглянуть в меню и посмотреть также другие странички их сайта.

3▪️https://menudurable.ca/en/ - очень красочный гайд по сбалансированному питанию. Каждая страничка – своего рода глава гайда с описанием продуктов, интересными фактами и даже рецептами.

и вновь начинаем утро с #trendwatching под кофе

1. http://nuro.co/
Тут на мой взгляд визуальный образ сайта идеально соответствует предмету, который он продвигает. Типографика, цвета, продукт - все говорит о минимализме. При всей простоте нам заботливо рассказывают как определять время на часах.

2. https://guide.so-edinenie.org/audio
Студия Лебедева создала гайд по адаптации сайтов для людей с нарушениями слуха и зрения. Сайт дает не только правила по адаптации, но и возможность прочувстовать на себе каким образом люди взаимодействуют с сайтами. Очень рекомендую почитать для расширения кругозора)

3. https://www.pola.com/wecaremore/
Манифест производителя крема для рук. На довольно короткой страничке с зацикленным скроллом они с помощью иллюстраций и анимации передают свою философию. Как через продукт они заботятся о трех составляющих: человек, общество, планета. Интересно как с помощью центрального элемента (рук) передается настроение того или иного смыслового блока.

4. https://www.usedrop.io/
Слежу за вебфлоу и попался интересный сайтец. Маркетинговая платформа с новым подходом к маркетингу. Не оч понятно как это работает. Но мне понравилось как они ведут пользователя. Инверсия скролла будто ведет тебя наверх к чему то. Ты начинаешь восхождение где то в темном и надоевшем месте, потом ты как бы переходишь какую то черту и делаешь глоток свежего воздуха,а завершением твоего восхождения служит форма заявки. Оч понравился блок, где показано, какие бренды уже присоединились к ним.

как часто в брифах можно увидеть "хочу как у apple"? у нас это частая история, чаще, наверное, в какой-то момент было только "хотим как у пышечной" :)

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

для ленивых есть прямая ссылка на miro, где можно на какое-то время залипнуть и точно приблизить свои защиты/презентации к формату "как у эппл"

ps в комментах к статье, здраво заметили, что у советской пропаганды был фреймворк не хуже. если у кого-то под рукой есть подробные материалы на тему, то поделитесь плз :)

Нравится изучать подобные эксперименты и вообще всё, что связано с работой мозга. Не факт, что это "в лоб" поможет с интерфейсом, но точно поможет больше понимать людей и то, как они воспринимают все вокруг 🕷
#research #brain #yeahsciencebitch

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

🔸 Страдательный залог повышает когнитивную нагрузку
Суть: в 2012 году проверили, как предложения в страдательном и действительном залогах влияют на когнитивную нагрузку.
Людям за рулем автомобиля зачитывали разные сообщения и следили, как меняется качество вождения. Потом участников эксперимента также просили пройти тест на понимание полученной информации.
Результат: выяснилось, что качество вождения при восприятии предложений в страдательном и действительном залогах почти не отличалось. А вот в тестах водители допускали намного больше ошибок, когда речь шла именно про страдательный залог. Люди путались в событиях и не понимали, кто какие действия совершал.

🔸 Когнитивная нагрузка делает нас недоверчивыми
Суть: эксперимент проводили с помощью экономической игры в доверие. Правила сложно объяснить кратко, но суть такая: два человека меняются друг с другом деньгами. Сумму перевода они определяют сами, интуитивно или на основании действий оппонента.
Одну группу игроков просили запомнить сложный пароль, а второй не давали никакой дополнительной нагрузки.
Результат: те, кто не получал дополнительной нагрузки, вели себя рационально — их решения были логичным ответом на ход соперника. На щедрость отвечали щедростью, а если соперник хитрил — начинали меньше ему доверять.
А вот поведение людей, которые держали в голове пароль, было импульсивным и со стратегией соперника не совпадало. И вообще эти люди меньше доверяли оппоненту, жадничали и не хотели делиться деньгами.

🔸 Разметка мешает восприятию текста
Суть: в рамках исследования студентов просили прочитать два текста о глобальном потеплении. Один текст был размечен (в нем было содержание, подзаголовки, списки и т.д.), а другой нет.
Потом участникам давали тест на понимание информации. А еще просили оценить сложность текстов, мотивацию их читать и предположить, насколько успешно они справились с проверочным заданием.
Результат: студенты ожидаемо отметили, что размеченный текст читать проще и приятнее, а результаты теста будут отличными. Со сплошным текстом все наоборот: сложный, читать не хотелось, тест завалили.
Но реальные результаты оказались противоположными. Сплошной текст усвоили хорошо, в заданиях по нему почти не было ошибок. Результаты по тексту с разметкой были намного хуже. То есть разметка создает дополнительную нагрузку и отвлекает от содержания.
Выходит интересный парадокс: сплошной текст воспринимают лучше, но читать его не хотят. Поэтому, при всех недостатках, разметку лучше использовать.

Веб-дизайн веб-дизайном, но когда ты подходишь к задаче проектирования UX/UI, то всегда сталкиваешься с моментом, в котором нужно влезть в шкуру пользователя и прочувствовать его опыт (на поздних стадиях, конечно, помогают оценить более объективно UX-тесты, но мы пока не про это).

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

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

А для знакомства с темой вот вам
"6 когнитивных искажений, которые влияют на выбор покупателя" от одного канала, на который стоит подписаться:
1. Эффект знакомства с объектом
2. Боязнь потери
3. Эффект компромисса
4. Эффект фрейминга
5. Эффект IKEA
6. Эффект Пельцмана

ps возможно, я доберусь до нашей старой серии постов от "Доктора Нейро" и реанимирую оттуда статьи, которые мы когда-то писали в еще досеттеровские времена (а может и нет) :)
#neuromarketing

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

#UX #research

кто-то помнит классный кейс игры про плохой UI: https://userinyerface.com/

нашел тут похожую игру, но про политики и соглашения. орать и пытаться отказать от подписки можно тут: https://termsandconditions.game

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

а сейчас можно почитать крайнюю статейку по нейросетям, которую мы решили выпустить под конец года, как результат нашего желания взять что-то в кулак и рассказать о возможностях, которые уже давно вышли за пределы «делаем сайты» :)

да-да, мы покорили и продолжаем изучать и внедрять разные технологии: цифровая одежда, ar, геймификация, nft и вот даже нейросети, но и про классику не забываем: реализовали 30+ проектов разной сложности, заимели руфера в одной из проектных команд, провели отчетное собрание ввиде пошаговой игры в gather.town и много чего еще, что вошло в контент план на следующие посты :)

всем лафки в этом чате, всех с наступающими и пусть наш следующий год будет. просто будет :)

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

Открываем рубрику "технологии" :)

Интересно, как многие бренды и компании создают решения с виртуальными пространствами. Если помните, то во время первого локдауна, многие музеи стали рекламировать свои онлайн-выставки. При этом именно «пройтись» было возможно не везде. Выставочный зал будто говорит: «Слышь, стой тут, смотри и скролль или просто страдай от того, что все дергается и работает не на получение удовольствия, а на выработку кортизола. Ха, давай терпи!».
Некоторые виртуальные пространства оказались слишком привязаны к чувствительности мышки или не определились с механикой, экспериментируя. Это приводило к печальному пользовательскому опыту. Одно неверное движение, и картинка идет ходуном, чуть ли не вызывая головокружение или тормоза, которые возвращают тебя в диалаповские времена.
Осуждаем. Понимаем. Наслаждаемся качественными решениями:

https://oncyber.io/
Виртуальное пространство для художников и просто любителей-коллекционеров выставить свои NFT. Это своеобразная галерея с «залами» разных авторов. В каждый можно без проблем зайти и побродить, разглядывая картины.
Управляется все с помощью клавиш и мышки. Сайт тяжеловат и иногда долго грузится, но потом все идет как надо. Самое приятное, что во время «прогулки» обзор не дергается резко, движения «посетителя» плавные. Напоминает геймплей в играх. Удобно, комфортно.
К слову, все «галереи» сделаны в своем стиле и продаются за крипту. Некоторые похожи на модные музейные залы, где можно обследовать каждый угол. Некоторые – на фэнтезийные катакомбы. В общем, сравните сами и создайте свою выставку (если покупаете нфт)). это пока единственное масс. маркет решение с нормальным польз. опытом. Остальные полностью кастомной разработки и не дают открытых решений)

https://www.magische-spiegelungen.de/
Национальная галерея в Берлине. На главной странице тычем на иконку Discover the Experience и ныряем в мир искусства. Кажется не очень удобным, что все привязано именно к скроллу. Так что просто пройтись не получится, ограничиваемся созерцанием. Затем находим нужную картину и «ныряем» в нее.
В этом пространстве двигаться можно только мышкой. Кажется, что в картине есть свободное перемещение, но это не так. Хотя VR позволяет побродить среди людей, забраться на лестницу и оценить вид сверху. Добраться до какой-то дальней точки уже не получится.
Фишка этого пространства – возможность сделать фотографию в самой картине. Гулять можно с помощью одной мышки. «Прогулка» будет проходить под фоновую музыку, пение птиц, голоса людей и другой аккомпанемент городской площади.
Из минусов – не самая понятная навигация на первый взгляд.

https://virtual.plus-ex.com/showroom
Виртуальное пространство сразу с двумя режимами на выбор – обычным и легким. В первом случае можно передвигаться с помощью клавиш и мышки. Скролл здесь не работает. Очень удобно в таком режиме «гулять» по трем этажам виртуальной выставки и взаимодействовать с разными объектами (тем же кликом или с помощью клавиши). Плюс этот VR позволяет «телепортироваться».
Легкий режим – это мышка и скролл. «Гулять» здесь можно только с помощью колесика, что добавляет много интересных ощущений и позволяет в полной мере ощутить, как интересно меняется угол обзора и сама траектория.
Лучше с клавишами. Привычней, что ли. Но в любом случае интерфейс здесь очень понятный, к нему достаточно быстро привыкаешь. Само пространство минималистично стильное, в черных оттенках. В левом нижнем углу карта, где показаны ваши перемещения. А то вдруг вы заблудитесь.
Радуемся качественным решениям.
Чего и всем советуем.

Сейчас все меняется просто с катастрофически быстрой скоростью. Только моргнул, и все поломалось. Коллеги, мы понимаем, какие проблемы это может принести, поэтому напоминаем о непреложной истине – делайте бэкапы. Ребята, которые работают в Figma, этот пост для вас! И для нас, конечно же.
Огромное спасибо Денису Пушкарю и его команде – разработчикам из Ростелеком ИТ, которые сейчас развивают опенсорс инструмент Figma.Backup для резервирования файлов фигмы.
«Инструмент умеет автоматически сохранять все файлы .fig и .jam выбранной директории в вашей фигме с сохранением всей проектной структуры. Сейчас Figma.Backup можно подключать на своем сервере, а для сохранения бэкапов можно использовать свои локальный или сетевой диски», — пишет команда в своем канале.

Цитируем:
1. Сделать в скриптах обработку внештатных ситуаций;
2. Реализовать регулярный бэкап по расписанию;
3. Включить проверку изменения файлов (чтобы не сохранять файлы, которые не изменялись);
4. Настроить синхронизацию с Яндекс.Диском и Мэйл облаком;
5. Выстроить продуктовый процесс с мониторингом логов и выпуском хотфиксов;
6. Юзер-френдли интерфейс. Веб-панель, и, возможно, чат-бот.

Как скачать? Специально для вас запилили подробнейшную инструкцию:

0) Открываем терминал

1) Устанавливаем nvm (установщик node)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

2) Устанавливаем ноду
nvm install --lts

2.1) Проверяем, что node установлена
node -v && npm -v

3) Настраиваем nvm alias default node

4) Создаем каталог в Finder (куда будут бэкапится все проекты с Figma)

5) в Терминале пишем cd*пробел* и перетягиваем на терминал каталог из Finder — строка дополнится путем до этого каталога. Нажимаем <Enter>.

6) Копируем проект в каталог
git clone https://github.com/ritds/figma_backup.git ./

7) Устанавливаем зависимости
npm i

Должно выдать что-то вроде
v16.14.0
8.3.1

8 ) В файле manage.sh`на 67 строке добавляем `python3 чтобы получилось
python3 ./get_figma_files_list.py 2>&1 | tee ${get_list_log_name}

9) Запускаем команду логинации в Figma
./manage.sh <логин> <пароль>

Внимание! Проекты больше 500мб могут не выгружаться, при этом терминал ошибки не выдает. Потому их точно надо проверить и выкачать ручками.

Обязательно переходите на каналы самого проекта:
https://t.me/backupfigma – сам чат, где можно резервировать фигма файлы

@figma_backup – канал проекта
@ds_rt – сам проект команды ребят

Обратите внимание на код на гитхабе с обновлениями:
https://github.com/ritds/figma_backup

Передаем космически огромное спасибо нашему другу – разработчику Роме Ганину @Realetive (лучший мужчина), который очень сильно помог в этом деле. Без него не разрулили бы.
Как говорится, настоящие герои плащей не носят.

бесит
БЕСИТ

Всегда приятно поговорить о том, что бесит. Например, тренд на ностальгию, который проник во все сферы – это визуал, культура (мода, кино и так далее) и, к сожалению, дизайн. Народ пытается обыграть тренды, которые были популярны еще лет 20 назад. Но получается это плохо.

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

К примеру, люди просто так лепят какие-то окошки вроде Windows XP и называют это дизайном. Нет. Это какой-то невнятный метамодернизм, это арт, который раздражает. Он вроде как опирается на ностальгию, но рушит самое понятие дизайна. Люди просто берут то, что было раньше, кое-как переделывают, не соблюдая канонов и законов, и выкатывают в мир. Дизайн, говорят. Не дизайн это.

И вот почему. Многие новички делают какой-то невнятный арт, вообще не являясь дизайнерами и не зная банальных основ. Среди них очень часто такой этот грешок встречается. Такое явление сильно засоряет рынок, так как человек сделал пару похожих проектов в Behance и говорит, что он дизайнер. Это все путает понятия арта и дизайна.

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

Многие путают арты с отсылками на ностальгию и дизайн как понятие. Дизайн – это не простой рисуночек, он выполняет определенные задачи и требования для пользователя. Он помогает ему взаимодействовать с продуктом и контентом. Дизайн – это помощник. Он должен решать проблемы бизнеса. А не это вот все.

Знаете, есть хорошее сравнение. Вот есть художники-портретисты, которые за пятнадцать минут могут сделать смешной шарж или карикатуру на человека. У них есть для этого нужный скилл – обратить внимание на определенные черты лица, подчеркнуть их нарочито смешно, выделить. Для того, чтоб так рисовать, нужно знать базу – академический рисунок, строение лица, анатомию, надо уметь работать со светом и не только. Нельзя сделать классную карикатуру без основ.
Так вот. Чтобы стебаться над дизайном и ностальгией, надо знать базу. Без этого ничего не получится.


Извините.
Ностальгией накрыло.