Ментальная модель и модель реализации

В подкасте несколько раз мелькали термины «Ментальная модель» и «Модель реализации». Давайте разберёмся, чтобы дальше говорить на одном языке.

Ментальная модель

— основанное на опыте представление человека об устройстве чего-либо

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

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

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

А вот модель реализации это как раз реальное устройство чего-либо. Недооценить их сложно: знать их надо надо любому специалисту своего дела, чтобы действительно ничего плохого не вышло. Главное, что надо знать дизайнерам: пользователи не должны быть специалистами во всём, чего касаются, иначе жизнь была бы слишком сложной. В наших силах её упрощать 💫

#articles #ux_frameworks

Комьюнити здорового человека и курильщика

Давайте поразмышляем:
— комьюнити это бравая стая волков или кучка шакалов, нападающих друг на друга?
— зачем существуют профессиональные сообщества? Что они дают участникам и бизнесу?
— какие у комьюнити есть критерии качества? Спойлером вывели в обложке эпизода 😁

Слушаем и размышляем в треде!
Яндекс.Музыка
VK
Apple Podcasts

#leadership #soft_skills

Библия дизайнера в 12 томах

Пост для книжных червей и тех, кто хочет узнать о профессии из первых рук, от создателей профессии и их последователей.


Для тех, кто хочет освоить базу

➡️ Алан Купер «Интерфейс. Основы проектирования взаимодействия» (четвёртое издание)
Единственный учебник по проектированию, прямо база-база. В ней вы узнаете про метод персон, разные типы интерфейсов и элементов.

➡️ Дон Норман «Дизайн привычных вещей» (пятое издание)
Книга, с которой стоит начинать погружение в дизайн. Она знакомит нас с первыми терминами, (привет ментальная модель!), а также заставляет иначе посмотреть на мир.

➡️ Джеф Раскин «Интерфейс»
Кому интересно перенять мудрость ведущего дизайнера Apple, вам сюда. За фокусами и локусами внимания, за крепкой теорией.

➡️ Влад Головач «Искусство мыть слона» и «Культура дизайна 2»
Не можем не гордиться, что наши соотечественники вносят вклад в дизайн. Влад вводит нас в профессию как с культурной, так и с прикладной стороны, приводит много актуальных примеров. Сам Влад просит не читать «Культура дизайна 1», он её переосмыслил во второй части.

➡️ Робин Уильямс «Дизайн для недизайнеров»
Самая первая книга по визуалу, где с кучей иллюстраций рассказываются главные принципы дизайна: правило близости, ритмы дизайна, контраст... Это классика, на которую можно опираться не только на старте профессии.

➡️ Уэншейк «100 новых главных принципов дизайна»
Сборник исследований по дизайну. Поможет быстрее находить решения и укрепить вашу аргументацию.

➡️ Стив Шогер «REFACTORING UI»
Книга-коллаборация дизайна и разработки. Помимо советов по дизайну помогает понять язык разработчиков.


Для уже преисполненных дизайнеров есть свой, PRO-уровень

➡️ Роберт Брингхерст «Основы стиля в типографике»
Если вы хотите страдать не только от кривого дизайна в окружающем мире, но и от ужасных шрифтов, обязательно читайте эту книгу. Название книги не обманывает: после книги типографика перестанет быть зубастой и сложной.

➡️ Дон Норман «Дизайн вещей будущего»
Интересное размышление о том, когда появятся вещи будущего, какими они будут и какие они уже сейчас. Может быть, будущее уже пришло? Прочитать можно за вечер, а гордиться прочтением труда автора профессии — вечно :)

➡️ Морвилль, Розенфельд «Информационная архитектура»
Зубодробительная теория, которая поможет организовать навигацию и лейаут приложения

➡️ Е. А. Климов, О. Г. Носкова, Г. Н. Солицына «Психология труда, инженерная психология и эргономика»
Учебник от МГУ с базой психологии труда и эргономики. Сюда за пониманием работы мышления, взаимодействия человека с предметами реального мира на когнитивном и механическом уровне.

➡️ И конечно всем рекомендуем сёрфить базу исследований Нильсен Норман Групп

#articles

Вредные советы по дизайну

Как дизайнеру потерять в работе смысл, репутацию и себя? Как добиться того, чтобы вас не взяли ни в одну компанию? Вредные секретики в этом эпизоде 🙂

А теперь серьёзно: в этой серии мы рассуждаем о крайностях в работе и истине, которая всегда где-то посередине. О том, как не заваливаться ни в одну из сторон и что будет, если завалитесь. И конечно о том, что не надо никуда заваливаться, даже в теорию и аналитику, будет очень плохо...

Слушаем!
Яндекс.Музыка
VK
Apple Podcasts

#soft_skills #articles

Как убедиться в том, что UX хорош (или не очень)

Как понять, хорош UX в продукте или так себе? Очень просто: если вам нравится, и NPS высокий, то всё хорошо! Так вам ответит каждый четвёртый или даже третий специалист. Но конечно, всё не так просто, и останавливаться на универсальных метриках «нравится - не нравится» и NPS не надо.

Часто абстрактное понимание термина UX делает совершенно невозможным замер качества. Как можно замерить сферического коня в вакууме?

Есть рецепт: разделяй и властвуй! В первом эпизоде мы рассказывали, что UX можно замерить с помощью показателей Юзабилити: эффективность, продуктивность, удовлетворённость. С этими показателями всё намного понятней.

Продуктивность
Cчитается максимально просто: это процент пользователей, решивших свою задачу в продукте.

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

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

Удовлетворённость
Это уже задача со звёздочкой. Это показатель с наибольшей степенью неопределённости, т.к. он содержит субъективные оценки пользователей. Но и это тоже не беда: умные люди придумали для нас CSAT, в рамках которого можно проводить как качественные исследования, так и количественные.

#ux_frameworks

Страх и ненависть в продукте и агентстве

Где дизайнерам лучше живётся — в продукте или в агентстве?
Где эффективнее набираться опыта и зарабатывать?

Рассказываем про особенности работы как отдельно, так и коллаборации продукта и агентства

Слушаем!
Яндекс.Музыка
VK
Apple Podcasts

#soft_skills

Как забрать ответственность за дизайн

Представьте: вы приходите в команду, где долго (а может и никогда) не было дизайнера... Страшно?)

Вас могут встретить с распростёртыми объятиями:
❤️ С непониманием, зачем вообще нужен дизайнер. Без дизайнера хорошо жили, а теперь придётся натягивать непродуманные макеты на продукт
❤️ С кучей «не интуитивно понятно» и миллионом идей по UX
❤️ С желанием голосовать за дизайн

Что может быть лучше «одичавшей» команды? Что с этим можно делать? Уволиться, поплакать, пожаловаться руководству — можно, но неэффективно.

Самая плохая идея: уволиться, не попытавшись настроить работу в команде. Дизайнер без навыка постановки себя, будет встречать такие команды снова и снова.

Что можно сделать?

➡️ В первую рабочую неделю собрать с команды ожидания и опасения. Подумать, насколько опасения могут оправдаться и как это можно починить.
➡️ Сделать свою работу прозрачной: рассказать команде о своём процессе работы, привлекать команду на юзабилити-тестирования, на дейликах говорить о сделанных задачах чётко и подробно.
➡️ Составить командные соглашения по дизайну: о чём не надо договариваться каждый раз, как решать споры, как проводить авторский надзор, порядок внесения идей от команды.
➡️ Не опрокидывать идеи команды: часто у команды появляются отличные идеи по продукту. Если идея не самая хорошая, то рассказывать, почему так не будет, обучая команду. Если идея вам не нравится, но вы не можете объяснить, почему, то пробовать приземлить её и развить.
➡️ Не соглашаться на голосование за дизайн: таким образом количество голосов может влиять на качество интерфейса и ваша экспертиза будет обесценена.
➡️ Погружаться в предметную область, изучать пользователей и их задачи. Узнать о продукте и окружающей его мире как можно больше и обернуть знания в схемы и фреймворки.
➡️ Предлагать идеи, показывать команде макеты, рассказывать о заложенной логике и обрабатывать обратную связь.
➡️ Показывать экспертизу и делиться ей. Если вам кажется, что никакой экспертизы у вас нет, то слушать наш подкаст и делиться знаниями с командой :)

Ну и время, время вам поможет! «Разрабы» через время часто превращаются в «ребят и девчат», а на дейликах кроме обсуждения задач начинают мелькать шутки, и атмосфера заметно теплеет

#soft_skills

Тестовое иии ваааайтборд!

Вы просили и мы сделали!
➡️ Чего ждать от нанимающих при проверке тестовых?
➡️ Как проходят и оцениваются вайтборды?

Все наши секреты в очередном эпизоде

Слушаем!
Яндекс.Музыка
VK
Apple Podcasts

#soft_skills

Летние каникулы

В этой фразе запах бабушкиной стряпни, скошенной травы и дождя. А ещё в ней звонок велосипеда, ветер в листве и сверчки по вечерам. Помните, как было здорово?

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

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

Мы тоже решили немного отдохнуть и не красть у вас ни лучика этого лета. Мы вернёмся в сентябре со своими любимыми зубодробительными темами: Метод Персон, JTBD, OOUX и многое другое.

До встречи в сентябре! ❤️

Персоны... Всему голова?

Мы отдохнули, набрались сил. Пришло время их тратить!) Начинаем наш второй сезон ✨

Метод персон — универсальный фреймворк или очередной дедовый пережиток? Рассказываем, как всегда на пальцах:
➖ Что это, как создавать
➖ Когда использовать и когда нет
➖ Чем можно заменить

Что где
00:00 Приветствие
03:00 Что такое персоны и зачем они нужны
10:50 Из чего состоят персоны
15:06 С чем путают персоны
17:45 Типы персон
26:00 Как делать персон
36:40 «А можно попроще?»
41:06 «Персоны не работают»
54:50 Заключение

Слушаем!
Яндекс.Музыка
VK
Apple Podcasts

Полезные материалы:
1⃣ Vanilla Thunder «Ещё одна статья о персонах»
2⃣ Алан Купер «Интерфейс», третий параграф

#ux_frameworks

Давайте пошатаем наше понимание элементов интерфейса

Вот, к примеру, табы. Вроде бы понятный элемент. Интуитивно понятный. Переключай себе вкладки, работай с тем, что они в себе прячут. Но! У табов есть своя история, варианты использования, особенности и даже брат: аккордеон! Давайте присмотримся.

Почему они выглядят так?

Прабабка табов — папка для бумаг с вкладышами. Папка одна, а вкладок несколько, они разделяют бумаги так, чтобы до нужных можно было быстрее добираться. Ещё есть теория про картотеку. Ящик с карточками один, но со вкладышами, которые разделяют карточки по какому-то признаку. Например, по алфавиту. Чисто навигационная функция.

Из чего состоят табы? Без чего табы — не табы?

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

🚫 Без этих составляющих табы превращаются в заголовки, выделенный текст — что угодно, но не табы.

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

Для чего табы используют, а для чего — нет?

Можно и полезно использовать для навигации и сегментации контента на странице: в открытом по умолчанию табе самое важное. Если табов много, можно уводить их в карусель или сворачивать в таб “Ещё”. Не рекомендуем использовать во всех остальных случаях: как фильтры, часть формы ввода (вместо чипс, например)

Сколько табов за раз лучше ставить в линию — есть ли ограничения? Можно разместить табы в несколько линий?

Минимум два. Максимума нет, но мы стремимся делать не слишком много табов. Сколько это — не слишком много? Определяет контекст, у нас в среднем эффективно показывают себя 3-7 табов, остальные свёрнуты в “ещё”. Если пользователь выбирает вариант из “ещё”, он подменяет таб перед “ещё”.

🚫 В две и более линий ставить табы не стоит — они будут занимать место на экране и усложнять выбор между собой.

Показывать задизейбленный таб — моветон?

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

Можно ли заменить табы аккордеоном?

Можно! Но не всегда. Он тоже сворачивает контент, работает как картотека, более гибко работает с длинными метками. В мобилке встречается чаще, т.к. разворачивается по вертикали, а не по горизонтали, как табы.

🚫 Он не так хорош для навигации по приложению и не может включать в себя сильно отличающийся контент, в отличие от табов.

Вот так табы из бездушных “каких-то там” превращаются в хороших ребят с прабабкой, братом и своими ништяками. Держите клёвую статью NNG о них.

#ux_frameworks #articles

JTBD: великий и прекрасный

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

Однако, с ним не всё ясно:
➖ Что за тёрки между эмоциональным и функциональным видами?
➖ Правда ли Job Story почти тоже самое, что и User Story?
➖ А при чём тут проектировщики? Это же инструмент для оунеров...

Что где
00:00 Приветствие
02:48 Что такое Jobs-to-be-Done
09:50 Формула Job Story
19:10 Формула Job Statement
22:30 Джон стори и юзер стори
31:28 Как собирать инфу для JTBD
35:20 Где можно использования JTBD
43:30 «JTBD не работает»
55:00 Заключение

Разрушайте мифы вместе с нами в этом эпизоде!
Яндекс.Музыка
VK
Apple Podcasts

Полезный материал, который обещали в эпизоде:
Канвас Тони Ульвика

#articles

Ещё раз про «Не интуитивно понятно»

Посолим наши раны. Многие из вас уже встречались с ситуациями, когда кто-то говорит, что интерфейс не интуитивно понятный. А если нет, то обязательно встретитесь, это мы вам гарантируем! Как на это реагировать? Тренироваться в злословии?

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

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

➡️ Расскажите, в чем разница между ментальными моделями пользователя и говорящего. Объясните на примерах, чтобы не показаться невыносимой всезнайкой, бросающейся умными словами :) То, что понятно пользователю, может быть не понятно команде. И наоборот! Вроде бы очевидная и абсолютно понятная вещь. Однако, люди склонны подменять опыт пользователя своим. Нинада так.

➡️ Договоритесь с командой, что сомнения и идеи это нормально, но эффективнее обсуждать их с пониманием пользователя.

➡️ Чтобы команда поняла пользователя, сделайте персон. Нет времени на персон? Предложите А/Б-тесты и метрики. На это тоже времени нет? Зовите команду на исследования слушателями. Познакомьте их.


Для пользователей
Cтоит выяснять, что смущает КОН-КРЕТ-НО. Мы собрали для вас частые причины «неинтуитивности»

➡️ Неконсистентный дизайн отностельно других приложений в группе: как по стилям, так и по паттернам

➡️ Революционный дизайн. Даже если новый дизайн является прорывом, в первое время он может пугать пользователя

➡️ Интерфейс перегружен. Избыток информации, акценты неверные или их слишком много

➡️ Наоборот, интерфейс слишком лаконичный. Мало афордансов, нет акцентов, подсказок

➡️ Интерфейс сделан не по по ментальной модели, а по модели реализации, то есть содержит в себе непонятные пользователю элементы и текст (зато этот интерфейс будет идеален для понимания команды))

Как вы обычно реагируете на эти слова? Напишите в комментариях!)

#articles

ООUX — тот самый мост между исследованиями и макетами

Ещё один артефакт дизайнерской аналитики. Если вы хотите задать вопрос «А макеты-то когда рисовать?», то обещаем: после этого фреймворка макеты потекут рекой.

Да какие... учитывающие особенности предметной области и восприятия пользователей! Ну кайф же ✨

Что где
00:00 Приветствие
04:20 Что такое OOUX и чем он полезен
12:30 Как готовить OOUX
18:55 Подводные камни и типичные ошибки
34:48 Варианты использования OOUX
49:56 «OOUX не работает, а можно попроще?»
01:00:26 Заключение

Слушаем!
Яндекс.Музыка
VK
Apple Podcasts

#articles

Чекбоксы, радио, чипсы, сегмент-контрол

Все мы знаем, что
👍 Пользователь должен выбрать что-то одно из группы? Ставь радио-кнопки
👍 Пользователю нужен мультивыбор? Ставь чекбоксы

Делов-то! Но почему тогда
🤔 Мы привыкли использовать чекбокс для соглашения с правилами и политиками? Он же один)
🤔 Радио-кнопки не дают отменить выбор. Нет права на ошибку?
🤔 Группа радио-кнопок никогда не должна отмечатья как обязательное поле?

И ещё вдогоночку
🤔 Что это у нас за новый-старый зверь сегмент-контрол? Это что, замена радиокнопкам? Или это элемент навигации?
🤔 А чипсы тоже элемент навигации или это ещё одна замена.. Чекбоксам? Радиокнопкам? Шта?)

Давайте разбираться.

Чекбоксы
Как и люди, иногда держатся вместе и тем самым создают группу, в которой можно выбрать несколько вариантов за раз. А иногда держатся как одинокие волки. Это нормально. Чекбокс-интроверт имеет право запрашивать у пользователя согласие с правилами использования приложения.

Радиокнопки
Всегда стадные животные. У них всегда есть лидер. Вариант, когда в группе радио-кнопок ничего не выбрано — невозможен. Мы много раз видели (и да, делали так сами), как дизайнеры кастомили радио-кнопки таким образом, чтобы по-умолчанию все кнопки были пусты. Но тогда приходится кастомить и отмену выбора, то тоже не заложено в изначальный компонент. Радиокнопки не отмечаются признаком обязательности, потому что среди них по умолчанию что-то выбрано (если не нарушать требования элемента). Если вам ну никак нельзя выбирать за пользователя вариант — вам не подходят радиокнопки.

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

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

А как вы используете эти элементы? Приглашаем обсуждать и спорить в комменты)

Метрики

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

Гидом будет наш гость, Андрей Одокиенко, автор канала Design Twist.
Держите бонусом исследование Андрея о работе с метриками среди дизайнеров в продукте и студии

Что где
00:00 Приветствие
02:55 Что такое метрики
16:08 Как работать с воронками
24:35 Экономические и продуктовые метрики
37:11 Интерфейсные метрики
47:42 Как встроить метрики в рабочий процесс
01:01:10 «Метрики не работают»
01:12:00 Заключение

Слушаем!
Яндекс.Музыка
VK
Apple Podcasts

#articles #ux_frameworks