15 ошибок в UXUI-дизайне, которые встречаются до сих пор


Содержание

Тренды UX и UI дизайна в 2020

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

Мощные браузеры

Браузер — это не только средство доступа в Интернет, но и орудие влияния. Браузеры становятся быстрее, мощнее и привлекательнее.

  • Тестирование показало значительный прирост производительности большинства популярных браузеров.
  • Увеличение скорости за счет потоковой компиляции сильно влияет на развитие дизайна. Mozilla сообщили, что их новый компилятор будет работать в 10-15 раз быстрее, чем предыдущий оптимизирующий компилятор.
  • Все современные браузеры поддерживают WebGL 2, технологию, которая выводит 3D-текстуры и рендеринг, глубину фрагментов и VAO на новый уровень.

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

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

Целенаправленная анимация

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

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

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

Интерактивный дизайн гораздо глубже обычной презентации и заполнения пустоты. Сейчас это — часть брендинга. До сих пор мы воспринимали лого как идолов. Именно наше воображение и ощущения воплощают их в реальность. Так почему бы нам не заглянуть в это воображение поглубже и не направить его в нужную сторону?

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

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

3D в интерфейсах и глубина в плоском дизайне

3D-рендеринг и технология дополненной реальности давно у всех на слуху. Дизайнеры привыкли избегать сложных 3D-моделей в UI-дизайне ради скорости и производительности, а также ради удобочитаемости. Благодаря более продвинутым браузерам теперь эти предметы роскоши нам по карману. Мегасложные визуальные эффекты переносят эффекты, до сих пор существовавшие только в кино, на веб-страницы.

Эта тенденция особенно понравится компаниям-производителям, применяющим сложные, но не предназначенные для визуализации, технологические процессы. С помощью 3D-визуализации можно вникнуть в любой технологический процесс и сформировать понимание его сути на более глубоком уровне.

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

Мобильная индустрия с новыми мощными чипами позволила не только рендерить 3D-объекты, но и включать их в интерфейс. Маленький экран для этого идеально подходит.

Плоский UI-дизайн — уже на протяжении 5 лет главный тренд в проектировании, и с момента его появления ничего особо не изменилось. В последнее время можно заметить явный сдвиг в плоском дизайне в сторону глубины и прорисовки измерения, но основная концепция осталась прежней. Глубина важна, и именно поэтому появился плоский дизайн — люди обожают символизм, и все вокруг себя превращают в символы. А плоский дизайн — это самый что ни на есть символизм.

Сочетание Real 3D и CG показало, как пользователи реагируют на возможность взаимодействовать с правдоподобными визуальными объектами. Плоский дизайн открывает уникальные, ранее неизведанные, возможности для взаимодействия. Его даже прозвали «псевдо-3D». Плоские слои укладываются так, чтобы создавалось ощущение трехмерности. Основные средства, с помощью которых плоскости можно добавить глубины — это расположение теней и света, а также отражений.

Популярность набирает и фейковый 3D-тренд, в котором для симуляции движения используются привычные инструменты проектирования вроде Principle и After Effects. В 2020 году можно было наблюдать и возрождение обновленного скевоморфизма. Если плоскости можно придать глубины, то и можно сделать ее изометрической. Интересно посмотреть, как нам удастся сохранить символизм плоского дизайна, когда все вокруг пытаются придать изображениям реалистичности.

Однако, в конце концов, у нас просто не останется выбора. Уже сейчас сложно понять, в каком направлении развивается 3D-дизайн пользовательского интерфейса. Людей так просто уже не впечатлить, нужно все больше и больше технологий — а потому требуется особое мужество, чтобы отбросить в сторону сложные структуры и представить на суд свою безумную концепцию. Однако, если мы не сможем наполнить сложный интерфейс смыслом, он никому не будет нужен.

Сюрреалистичный дизайн

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

Несколько крупных примеров редизайна и связанные с ними иллюстрации получились максимально игривыми:

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

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

Градиент 2.0, кричащие цвета и тени

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

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

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

Однако удобочитаемость — не единственная проблема градиентов, цветов и темных тем. Яркие цвета всегда использовались для усиления акцента. А если все будет цветное — как тогда расставить акценты? Ведь не у всех пользователей есть OLED-дисплеи. Некоторые градиенты просто затеряются на общем ярком фоне. А излишний контраст не даст пользователю сконцентрироваться на изображении. Темные темы неудобно рассматривать на улице в солнечный день. Но вообще все эти штуки довольно интересные и полезные.

Вариативные шрифты

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

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

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

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

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

Figma

Сегодня рассмотрим древний вопрос: “А надо ли дизайнерам уметь кодить ?” И еще один: “А надо ли разработчикам знать UX?”. Суть проста — избежать головной боли и возникновения расхождений при выполнении проекта. Так что, если речь идет о цели, то стоит поговорить и о том, как ее достичь.

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

Еще один способ достичь этой цели – использовать и продвигать более качественные инструменты. Один из них — Figma. Раньше дизайнерам приходилось учитывать много переменных: операционные системы, интеграция, плагины, хранилища, синхронизация, взаимодействие, и, наконец, — как все это собрать в одном месте. Те, кто разработал алгоритм, достойны всяческого уважения. Но нам нужно меньше стресса.

Figma – инструмент проектирования, созданный пользователями для пользователей. Этот инструмент предвидел многие альтернативные сценарии и заткнул многих скептиков.

Figma уничтожила Sketch

Figma делает то же, что и Sketch, и Adobe XD, только в большем объеме и гораздо лучше. Что еще важнее, Figma нацелена на разработку продукта, которым будет легко и удобно пользоваться. Каждый компонент инструмента Figma можно превратить в компонент React при помощи базового интерфейса, и применить во внешней части интерфейса. Пока что Figma уделывает конкурентов по цене, скорости работы, взаимодействию, совместному пользованию, встраиванию, поддержке и прочему. При всем при этом, Figma по-прежнему развивается, и по состоянию на 2020 год, ожидать от нее можно еще многого.

Так-то оно так, но раз уж мы разрабатываем продукты более высокого качества и не можем обеспечить их этичное использование, то сами выроем себе могилу. Посмотрите-ка на Twitter, и его борьбу за возврат себе доброго имени. 2020 год выдался урожайным на дачу показаний в суде топ-менеджерами. Похоже, нельзя просто так взять и выложить инструмент в пользование, нужно еще и следить за тем, как люди им пользуются. Защитит ли Figma своих пользователей от мрачных тенденций UX, недобросовестного дизайна и дезинформации?

Голосовые интерфейсы

Чтобы работать, проект не должен быть визуальным или видимым. Набив не один десяток шишек, мы додумались, что для создания нетактильных ощущений инструменты не так важны. Логика проектирования – это психология работы. Создание голосового управления означает решение задач по обработке естественного языка.

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

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

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

Будучи дизайнерами, мы должны ставить во главу угла благополучие человечества. Если технология, даже великолепно спроектированная, служит кому-то одному в ущерб кому-то другому, то с таким положением дел следует неустанно бороться. А этого не происходит.

UX-тексты и UX-редактура

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

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

UX-тексты, или UX-writing, основываются на двух простых принципах: уважение и полезность. Все остальное растет из этих двух критериев. Лаконичность — признак уважения к людям, говорящий о том, что их время вы цените больше, чем свое. Корпеть надо над текстом, а не над привлечением потребителей. Простота означает, что нужно избегать двойственности, и, таким образом, представлять полезность для людей. Убедительность значит говорить правду и не скрывать недостатков продукта. Всегда фокусируйтесь на том, чтобы, в первую очередь, помочь пользователю, а не выставлять напоказ свое красноречие. Забудьте на время о SEO. И никогда не используйте маркетинговые клише. Хватит. Всему есть предел.

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

В 2020 году было очевидно, что крупные компании стали чаще обращаться к концепциям тона и голоса в дизайне. Они оставили стремления к изобретательности и сосредоточились на потребительской ценности. В 2020 году UX-редактура, или UX-editing, все еще не оформилась в четкую дисциплину.

Различие между UX-writing и UX-editing заключается в пропускной способности. UX-писатели создают текст, обращенный к пользователю. UX-редакторы этот текст анализируют, изменяют, переиначивают и выворачивают наизнанку, чтобы получить простой, удобоваримый, человеческий текст. Не существует ускоренного курса изучения UX-редактуры. Это сплошной опыт, наблюдение и внимательность.

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

В дизайне по-прежнему есть место для креативного письма. Но не там, где продукт встречается со своим пользователем. Например, Nike и Boeing платят научным фантастам за предсказания будущего.

Разработчик продуктов, как должностной статус

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

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

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

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

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

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

Распространённые ошибки в UX и UI

Термины – штука сложная. Причём, не только для простого обывателя, для которого вся веб-кухня, это некая «магия», но и для самих разработчиков и дизайнеров. Взять, хотя бы, такие понятия, как UX и UI. Этими понятиями оперируют тысячи людей, но многих из них понятия не имеют, что на самом деле обозначают эти двухбуквенные комбинации. Из этой статьи вы узнаете, что такое UX-дизайн и UI-дизайн. А это две совершенно разные вещи.


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

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

  1. UX и UI — это одно и то же. Нет, хотя это понятия, которые не взаимоисключают друг друга и связанны межу собой. При этом распространенные ошибки в UX и UI одни и те же. Работая над опытом взаимодействия, учитывайте пользовательский интерфейс и наоборот. Пример:
    Рассмотрим ситуацию с мотоциклом, который добирается из одного пункта в другой. UX определяет, что при каких условиях событие свершится. Нам нужны: начало движения, конечный пункт, руль. UI работает с условиями использования продукта: материал изготовления сидения, подходящего весовой категории пользователя и дорожному покрытию. Добивайтесь союза, который требуется для сохранения фокусировки с первого до последнего этапа.
  2. Боязнь затронуть рабочие тренды. Тренды – явление временное. Анализ, помогающий развивать и улучшать тренд не повредит. Поэтому не бойтесь прислушиваться к пользователям. Они знают, когда тренд себя исчерпал и подскажут, куда двигаться дальше.
  3. Выкладывание информации сразу. Не впихивайте контент на главную страницу, в опасении, что пользователь уйдет, не найдя то, что ему интересно. Пусть клиент сам разберется в структуре сайта и исследует страницы. Но сильно ударяться в минимализм тоже не стоит. Краткость и понятное изложение — вот что важно.
  4. Лишние вау-эффекты. Не нужно лишних наворотов. Если анимация, то не раздражающая. Привлекать внимание надо ненавязчиво и аккуратно.
  5. Желание угодить. Взвешивайте решения и анализируйте: требования клиента, это сиюминутное желание или необходимость. Не засоряйте сайт лишним. Сделайте, чтобы информация сочеталась и использовалась на своем месте.

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

6 ошибок в UX, которых нужно избегать

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

В сегодняшней статье мы рассмотрим 5 самых распространенных UX ошибок и способы их избежать.

1. Нагромождение идей

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

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

2. Непонимание разницы между UX и UI

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

Как избежать: теперь вы знаете, в чем разница между UX и UI. Как убедиться в последовательности UI? При нажатии на эту кнопку пользователь попадет на эту страницу. Как убедиться в последовательности UX? Текст должен не только по содержанию соответствовать концепции бренда, но и его размер цвет и шрифт должны соотноситься со стилем компании. При создании сайта начните с качественной карты сайта (UI) и только потом переходите к элементам дизайна (UX). Для получения наилучшего результата нужно одинаковое внимание уделять двум этим направлениям, а не концентрироваться только на одном.

3. Использование всплывающих сообщений

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

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

4. Игнорирование данных

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

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

5. Слишком частые изменения

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

Tumblr – отличный пример. Если вы постоянно используете сайт и тут на нем что-то неожиданно исчезло или появилось, причем без особой на то причины, то вы, скорее всего, разозлитесь. А Tumblr делает это довольно часто, чем и сводит с ума своих пользователей. В итоге они просто не захотят возвращаться.

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

6. Бесполезное обучение

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

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

Заключение

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

Семь распространённых мифов о UX-дизайне

Первый миф: UX = UI

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

Цукерберг рекомендует:  Основы тест-дизайна техники и особенности их применения

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

UX означает User Experience и подразумевает взаимодействие конечного пользователя с компанией, её продуктами и услугами. Другими словами, это процесс определения проблем пользователей и их решения до того, как они осознают это.

UI означает User Interface и подразумевает под собой цветовые коды, кнопки, формы, шрифты, визуальную иерархию. Он отвечает за визуальное восприятие продукта, делая интерфейс более привлекательным, эстетичным и иногда «модным».

Итак, как видите, UX — это больше наука, а UI — больше искусство.

Картинка ниже демонстрирует моё видение UX и UI дизайна.

Вы конечно же можете спросить, что означает CX. Фактически, это Customer Experience, но это не совсем нужная нам тема для обсуждения в этой статье.

Некоторые люди могут подумать: «Почему UX перекрывает UI? Это разные дисциплины, которые взаимодействуют друг с другом, а не являются вложенными». И они будут правы. Однако давайте рассмотрим основные этапы процесса разработки UX (вкратце):

Понимание

Если у вас есть четыре часа, чтобы срубить дерево, потратьте первые три часа на заточку своего топора.

Что ж, это этап, на котором вы пытаетесь определить свой бренд, целевую аудиторию и конечные результаты. Вы должны понять, с какими проблемными моментами столкнётся пользователь, ответив на следующий вопрос: что с ними не так?

Исследование

Эта стадия станет «кровью» вашего проекта. Вещи, которые вы обнаружите, обнаружите и бросите им вызов, станут фундаментом для жизни вашего продукта.

Вот несколько отличных инструментов для исследования пользователей:

  1. Интервью.
  2. Обследования.
  3. Юзабилити-тесты.

Анализ

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

Несколько способов сделать анализ:

  1. карта пути клиента;
  2. User Personas.

Дизайн

Здесь начинается «художественная» часть. Это этап, когда вы буквально «сталкиваете пиксели», чтобы достичь желаемого результата. Иными словами это строительство:

  • притока пользователей;
  • макетов;
  • цветов;
  • кнопок;
  • иконок;
  • изображений;

  • компонентов.

Похоже на вещи, относящиеся к UI, не так ли? Весь этот этап о дизайне пользовательского интерфейса и его принципах. Здесь вы должны разработать дизайн с точки зрения вашего продукта или услуги, руководящих принципов бренда и некоторых «модных вещей».

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

Запомните: это итеративный процесс, что означает, что вы не получите идеального решения с первого раза. Вам придётся создавать, перепроектировать, стирать и начинать всё заново.

Запуск

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

К этому времени вы можете легко определить разницу между UI и UX, их конечными результатами, процессами и видением.

Давайте перейдём ко второму мифу.

Второй миф: пользователи не скролят

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

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

Люди скролят! И почти половина из них — даже до конца страницы!

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

Третий миф: вы такой же, как и ваши пользователи

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

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

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

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

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

  1. Опросы — набор конкретных вопросов, распространяемых среди большого числа респондентов с целью выявления проблемных ситуаций.
  2. Интервью пользователей — проведение беседы с текущими (или потенциальными) пользователями с целью получения результатов с точки зрения их предпочтений, поведения и видения продукта.
  3. Юзабилити-тестирование — набор конкретных задач, предоставляемых пользователю для определения проблем пользователей.

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

Четвёртый миф: дизайн = хороший внешний вид

Многие люди по всему миру определяют дизайн как нечто визуально привлекательное и элегантное. Они склонны считать дизайн скорее украшением, визуальным результатом, чем самим процессом. Это естественно не правильно. Дизайн, это скорее то, как сайт работает, а не выглядит и чувствуется. UX-дизайн не только визуально привлекателен (например, иллюстрации и графика), но и функционален.

Что дизайнеры говорят о том, как они понимают дизайн:

Что для меня дизайн? Это понимание того, что лучше решить проблему до того, как найдёте простейшее решение.

Дизайн — это план размещения элементов таким образом, чтобы наилучшим путём достичь определённой цели.

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

Пятый миф: больше вариантов выбора = больше удовлетворения

Нет. Это ещё одно заблуждение. Да, выбор — это хорошо, и пользователи точно удовлетворены, если они контролируют то, что делают.

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

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

Давайте сделаем шаг назад к основам. Закон Хика гласит, что «время, необходимое для принятия решения, увеличивается с увеличением количества и сложности выбора». Таким образом, дизайнеры должны предоставить оптимальное количество вариантов, чтобы максимизировать результат.

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

Шестой миф: пользователи совершают оптимальный выбор

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

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

Заходит однажды тестировщик в бар и заказывает: кружку пива, две кружки пива, ноль кружек пива, 999999999 кружек пива, ящерицу в стакане, –1 кружку пива, qwertyuip кружек пива.После всего этого в бар заходит первый реальный пользователь и спрашивает, где тут туалет. Бар взрывается, все мертвы.

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

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

Седьмой миф: люди читают в Интернете

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

Но когда же на самом деле люди читают? Во-первых, когда они действительно заинтересованы в содержании. Во-вторых, когда интерфейс хорошо структурирован и организован.

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

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

Подведение итогов

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

7 ошибок в работе с UI/UX агентством, которые убивают любой проект

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

Больше 9 лет мы потратили на то, чтобы выстроить правильные бизнес-процессы внутри команды и максимально предотвратить ошибки со своей стороны. Но есть 7 наиболее распространенных ошибок, которые допускают и сами заказчики. О них я и расскажу в этой статье.

1. Неправильная формулировка вопроса о стоимости работ

Эту ошибку повторяют многие компании еще до начала сотрудничества с агентством. Они рассылают сразу в ряд фирм вопрос о стоимости работы над проектом.
И часто звучит такой вопрос примерно так: “Сколько стоит дизайн магазина, как у Rozetka?” или что-то в этом духе.
В стенах нашего офиса это уже стало крылатым выражением.

Разве можно адекватно ответить на такой вопрос?

Когда вы приводите в пример сайты уровня Amazon, Ebay или местных лидеров, как Rozetka, спросите себя, обладаете ли вы достаточными бизнес-ресурсами для воплощения такого проекта. Часто клиент видит только вершину айсберга и не осознает того объема работ, который скрыт от глаз.

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

Чем меньше информации о своем проекте вы донесете UI/UX агентству, тем больше цену вам назовут, и тем меньше она будет обоснована.

Поэтому, на этом этапе важно донести агентству как можно больше информации о своем проекте. И не обязательно оперировать при этом профессиональной лексикой Ui/UX специалистов. Просто расскажите о своем продукте своими словами, спрашивайте и объясняйте.

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

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

2. Отсутствие внутри компании единого видения своего продукта

В нашей практике часто встречаются такого рода ситуации:

В офисе заказчика присутствует 5-7 топ-менеджеров от компании, идет активное обсуждение, что требуется создать. Мы со своей стороны задаем первый вопрос: “Расскажите о вашем продукте”, — и сразу же заводим заказчика в тупик, потому что каждый видит продукт по-своему. СЕО выделяет миссию и ценности компании, менеджер из отдела маркетинга говорит о том, что нужны баннеры, менеджер из отдела логистики просит об автоматизации, как о первоочередной задаче….

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

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

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

3. Не налажен процесс работы с агентством внутри компании


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

Кто в компании ЛПР (лицо, принимающее решения)

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

Какая компетенция у тех, кто будет вовлечен в работу над проектом

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

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

Как в компании проходит презентация проекта

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

Какие могут быть задержки в работе над проектом со стороны компании

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

Ограничено ли в компании общение по Skype или других мессенджерах

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

4. Отсутствие вовлеченности в проект

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

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

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

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

5. Неверное отношение к процессу создания дизайна

Если компания оценивает первый макет в 0% попадания, то часто не осознает, что это тоже отличный результат. Отличный с точки зрения правильного процесса, т.к. теперь агентство точно понимает, какой вариант дизайна не рассматривать. На следующей презентации макета нулевой результат обычно превращается сразу в близкий к 100%.

Не всегда 100% попадание получается с первого раза, и относиться к этому нужно как к процессу поиска идеального дизайн-концепта, а не как к окончательному результату.

Вот когда действительно стоит задуматься, это если после 3-ей презентации макета вы снова получаете 0% попадания.

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

В нашей практике была такая история:

Заказчику не понравился макет, но он не мог объяснить, почему. После двух часов общения с ним мы наконец выяснили, что всему виной была персональная антипатия к оттенку серого. Как только изменили цвет в макете, он сразу же был одобрен.
Вам нужно уйти от субъективных суждений “нравится — не нравится” и дать дизайнеру объективный фидбэк. Ведь реальная причина плохого макета кроется глубже неподходящего оттенка кнопки CTA.

6. Включение режима “дизайнер”

— Поиграйте пожалуйста шрифтами!

— Ага, мне на «Л». э. Леттер готтик!

— Каслон! Тебе на «Н»!

— Спасибо, спасибо! Оставим шрифт как есть.

“Тут надо тень поставить.”

“Тут на пару пикселей сдвинь.”

Фразы по типу “Поработайте с формой круга” или “Поиграйтесь со шрифтом” вообще становятся крылатыми в среде Ui/UX специалистов.
Ошибка здесь заключается в том, что заказчик не проблему выясняет, а пытается сам предложить решение.

После такого общения агентство и компанию ожидают не лучшие варианты развития событий:

  • Дизайн-студия отказывается от проекта,
  • Заказчик “рисует” сам, раздавая указания агентству.

Естественно шансы на успех такого проекта близки к нулю.

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

7. Неподготовленность к презентации со стороны компании

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

1. Не ограничивайте дизайн-студию во времени на подготовку презентации.

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

2. Возьмите на себя некоторые технические моменты.

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

Один курьезный случай был на нашей практике при работе с издательством.

Мы отправили первый макет и получили непонятную ремарку от заказчика, что “ваш синий недостаточно синий”. При этом скрины, которые пересылала нам компания в подтверждение своих слов, казались нам вполне неплохими. Заказчик продолжал говорить о странном переходе цветов, который мы не видели.
Тогда мы отправились в компанию, чтобы проверить, как на их экранах отображается наш макет. На месте мы поняли, что издательство использовало 4К монитор редкой модели, настроенный под работу с графикой. Отображение нашего концепта на нем действительно было иным. Недоразумение исчезло, как только мы развернули проект на обычном компьютере.

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

3. Прослушайте всю историю создания концепта от поиска идеи до результата.

Глядя на 2 страницы дизайн-проекта, созданные за 2 недели, заказчики часто не берут во внимание всю проделанную работу. Поиск идеи, мозговой штурм, пробы и ошибки, отвергнутые концепты не видны на готовом к показу макете.
Именно поэтому стоит выслушать всю историю работы агентства над проектом и увидеть, почему была выбрана именно эта идея. И вас не будет терзать ощущение, что “какой-то из оттенков синего они точно не пробовали”.

Как выстроить правильный процесс работы с дизайн-агентством

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

Тогда и студия будет жить вашим проектом, ответственно и вдохновенно подходить к работе.

Когда есть одна цель и задача, взаимоуважение и доверие, то и не будет места ошибкам, а даже синий всегда будет нужного оттенка.

Автор: Дмитрий Кукуруза, исполнительный директор студии «Турум-бурум»

7 ключевых ошибок в UX-дизайне

Рынок мобильных приложений перенасыщен различными продуктами — от мелких “недоприложений” до успешных “китов”. Обычно известные приложение “с деньгами” имеют большую команду разработчиков и дизайнеров, которые постоянно улучшают продукт как технически, так и с точки зрения удобства использования.

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

Интересно то, что большинство интерфейсов приложений содержат типичные ошибки.

1. Непродуманная архитектура и навигация

Или, другими словами, отсутствие этапа проектирования. Программирование сразу по ТЗ клиента и/или “скинам” от график-дизайнера — это то, что заставит вас потом переделывать ВСЕ.

Как нельзя построить дом без чертежа, так и нельзя создать хороший UX-дизайн без скетчей и прототипов.

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

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

2. Плохой onboarding или его отсутствие

Понятие “onboarding” (от англ ‘on board’) означает процесс погружения пользователя в приложение. Другими словами, это пошаговое обучение нового пользователя. Очень многие разработчики просто закрывают на это глаза и бросают пользователя один-на-один с программой после ее установки — пользуйся!

Самый важный опыт пользователя — опыт первого использования приложения.

В подавляющем большинстве случаев, именно в его рамках пользователь решает, будет ли он пользоваться приложением или нет. Очень важно в самом начала все ему разложить по полочкам — буквально взять за руку и провести по всем местам в приложении, шаг за шагом. Что бы у него, не дай Бог, не было в голове вопросов “Где?” “Куда?”, а самое главное — “Зачем?”

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

Кстати, поэтому многие современные и правильно разработанные приложения не имеют раздела HELP. В нем попросту отпадает необходимость — а вместо него появляется возможность RESTART TUTORIAL.

3. Слишком много “дизайна”

Уход в творчество и креатив — но не в решение задачи. Что-то уникальное, свой стиль и почерк — это, бесспорно, хорошо. Но часто дизайнеры поступают как плохие актеры — и очень сильно “переигрывают”. Куча объектов, цветовых схем, теней, несовместимость стилей, превращающая обычную иконку или кнопку в что-то сюрреалистическое (а иногда и попросту страшное), а то и вовсе возвращающее нас в лихие 90-ые, когда “мы создавали дизайн как могли”.

Один американский дизайнер сказал:


“Хороший дизайн виден сразу, отличный дизайн — незаметен”.

И это правда. При создании графики многие забывают про ее предназначение — помогать передавать информацию, но не отвлекать или запутывать. Если вы хотите создать удобный интерфейс — будьте проще.

4. Неинтуитивный интерфейс

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

Следствие закона Мерфи для мобильных приложений звучит приблизительно так: “Если пользователь может что-то понять не так — он это сделает”.

Если дизайнер думает: “О, это же очевидно!”, то для пользователя это может быть сложно или совсем по-другому. Самый лучший сервис или продукт по-настоящему интуитивно понятен.

Чтобы избежать этой ошибки, вам нужно использовать в интерфейсе узнаваемые и устоявшиеся символы, которые будут иметь однозначную асоциацию. Например все мы ассоциируем зеленый цвет с “ДА”, “вперед”, “разрешить”, а красный — с “НЕТ”, “стоп”, “запретить”; иконку “+” с “добавить”, “-” — отнять и т.д. Старайтесь избегать недостаточно очевидных символов на элементах интерфейса и максимально эффективно использовать уже известные паттерны восприятия пользователей.

5. П — Последовательность

Очень распространенная ошибка — использовать в рамках одного стиля много разных шрифтов, цветовых схем и “дизайнерских решений”.

Легенда рекламы Лео Бернетт как-то сказал:

“Если вы хотите быть оригинальным ради оригинальности, то каждое утро можете являться на работу с носком во рту.”

Согласитесь, отлично сказано! Любой креатив решает определенные задачи. Но пользовательский интерфейс абсолютно не то, чем приложение должно выделятся.

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

6. Неустановленные приоритеты

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

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

Определитесь, с какими объектами пользователь будет взаимодействовать чаще всего, и выделите их на фоне других. Пользоваться таким интерфейсом будет гораздо комфортнее.

7. Отсуствие анализа и исправления ошибок

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

Важно понимать, не ошибается только тот, кто ничего не делает. Если вы хотите создать хороший интерфейс, нужно обязательно хотя бы раз провести анализ своих наработок по UX-дизайну с best practices на рынке и любыми данными по поведению пользователя. Так вы обязательно найдете и исправите возможные ошибки.

Самые удобные интерфейсы создаются долго и постоянно переделываются. Любой интерфейс можно сделать еще удобнее, а потом и еще удобнее. Избегание вышеперечисленных ошибок — это залог и основа для создания качественного и хорошего UX. Любая качественнная работа требует немалых затрат сил; если делать “побыстрее”, то и период использование вашего приложения возможно будет “покороче”.

Узнать о последних трендах игровой индустрии из первых рук, лично встретиться и обсудить рабочие вопросы с ведущими компаниями на рынке разработки и издания игр — можно будет на White Nights Helsinki 2020, которая пройдет 11-12 февраля.

6 UX-ошибок, которые вы вероятно совершаете (и как их исправить)

Приходилось ли вам когда-либо неудачно нажимать на кнопку звонка на мобильной версии сайта? А может, вы пытались (и не смогли) открыть крошечную ссылку? Задавались ли вы вопросом, что произойдет после того, как вы провзаимодействуете с каким-то элементом? Или, еще хуже, что дальше делать на сайте?

Если вы положительно ответили хотя бы на один из этих вопросов, то вы столкнулись с UX-ошибкой. Они куда более распространены, чем думает большинство разработчиков. Почему? Возможно, это недостаток знаний, самомнение или лень. Что бы это ни было, главное — научиться избегать подобных ошибок.

Потому что плохой UX ведет к меньшим конверсиям. Неоспоримо.

Что же такое UX?

Если вы читаете эту статью, велик шанс, что вы уже знаете: UX означает пользовательский опыт. Согласно данным Google Trends, интерес к пользовательскому опыту стабильно растет в последние годы.

Цукерберг рекомендует:  Быстрый старт с CountUp.js

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

Первый шаг — это изучение ключевых принципов UX. К сожалению, сейчас ведется множество споров о том, какие же это принципы. Вот пять UX принципов от Джордана Джулиена из Hostile Sheep Digital Experience Lab:

  • Используйте контекст — часто проще думать о пользовательском приключении, как о книге рассказов. Если вы откроете большинство книг на какой-либо случайной странице и выберите какое-либо слово, то на этой странице вам встретится еще множество контекста для него. Скорее всего, вы увидите название книги, название главы, номер страницы, и выбранное слово будет контекстно связано с предложением, параграфом и страницей. Убедитесь в том, что пользователи контекстно понимают где они сейчас находятся в своем путешествии.
  • Будьте человечнее — доступнее, честнее и понятнее. Предпочитайте человеческое взаимодействие машинному.
  • Будьте легконаходимыми — создайте мощный информационный след. Предоставьте путеводные указатели.
  • Будьте проще — уменьшайте познавательную рабочую нагрузку на пользователя там, где это возможно. Будьте непротиворечивы и ясны, создайте сильную визуальную иерархию.
  • Будьте просты — установите мощное соотношение сигнал-шум. Избегайте отвлекающих факторов, жаргона и долгого времени загрузки. (по материалам UXmatters)

С другой стороны, Лео Фришберг из Phase II описывает три основных принципа UX, используя терминологию, введенную римским инженером, жившим в 1 веке до н.э.:

«Основа всех великих проектов восходит к Витривиусу, римскому инженеру, который определил три основных принципа ведения архитектурного проекта:

Venustas (Красота, или восхищение)
Firmitas (Устойчивость, или разумность)
Utilitas (Полезность, или ценность)

Мы можем легко отобразить эти три принципа на модели BTU — Бизнес (Товар), Технология (Разумность), Пользователь (Восхищение), очень распространенная сейчас. Как только вы обратитесь к каждой из этих областей, вы достигнете того уровня, на котором вам будет требоваться тратить минимум ресурсов для достижения максимального результата. UX дизайн мирового уровня основывается и синонимичен дизайну систем мирового уровня — до тех пор пока, система охватывает и основу технологии, и людей, которые получают от нее выгоду».

Хотя разные эксперты используют разные слова для определения UX, большинство говорят одно и то же:

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

В чем разница между UX и UI?

Часто можно видеть, как понятия UX и UI (пользовательский интерфейс) используются взаимозаменяемо. Это плохо, поскольку это два разных термина. Вот как Дон Норман и Джейкоб Нильсен из Norman Nielsen Group описывают эту разницу:

«Очень важно полностью различать пользовательский опыт и пользовательский интерфейс, несмотря на то что пользовательский интерфейс — это очень важная часть проекта. Как пример, возьмем веб-сайт с обзорами фильмов. Даже если UI прекрасен, UX будет плох для пользователей, которые ищут информацию о малоизвестных релизах, если база данных состоит только из фильмов от основных киностудий».

Поэтому UI — это лишь малая часть UX.

Левый столбец — из чего состоит UX, правый столбец — как он обычно воспринимается (дизайн интерфейса и визуальный дизайн)

Ошибка #1: Проектирование для себя

Эта ошибка противоречит принципу о проведения исследования.

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

Вот как Джерри Као из UXPin объясняет эту проблему:

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

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

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

Без тестов юзабилити и других форм традиционного исследования вы бросаете деньги на ветер. В лучшем случае, вы будете выдвигать предположения о своем UX. Вот как это объясняет Адам Феирхед из Fairhead Creative:

«Пользователи iPhone испытывали проблемы с клавиатурой сразу после релиза iOS7. Многие из них были расстроены слишком маленьким размером кнопки «пробел» и сложностью ее использования.

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

Начните раньше. продолжайте всегда. Нет идеального UX.

  • Проведите количественный анализ, чтобы идентифицировать проблемные области. В какой момент пользователи уходят? Где они проводят больше времени? На каких страницах они нажимают «назад»?
  • Проведите качественный анализ, чтобы определить почему. Почему пользователи уходят? Почему они останавливаются на определенных страницах? Зачем им нужна кнопка «назад»?
  • Расположите проблемы по приоритетам, основываясь на их влиянии и простоте исправления. Потребуется ли тестирование (например, улучшение результатов поиска) или проблемы можно будет сразу исправить (например, сделать кнопку больше контрастной)?
  • Создайте гипотезы для проблем, которые необходимо проверить, и начните тестирование.
  • 8 эффективных способов измерения пользовательского опыта

Ошибка #2: Искусность за счет ясности

Эта ошибка противоречит принципу ясности.

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

Как утверждает Адам Феирхед из Fairhead Creative, ясность должна быть приоритетнее креативности:

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

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

Это может быть очень креативно. Но пользователи не поймут».

Разница между ожиданиями и реальностью велика. Ваши пользователи нажимают на кнопку, ожидая одного, но получают совсем другое. Они ожидают, что значок сделает X, но он делает Y.


Ясность убирает эту разницу.

  • Используя модель ResearchXL, Вы проводите эвристический анализ. Окиньте объективным взглядом свой сайт и определите то, что неясно.
  • При проведении пользовательского тестирования, попросите, чтобы юзеры выполняли ключевые задачи в вашей области конверсий (например, залогиньтесь, найдите продукт Х, добавьте продукт Х в корзину) Какой путь они берут? Насколько он отличается от намеченного вами пути? Почему?
  • Где пользователи колеблются? Это указывает на то, что могут быть проблемы, связанные с ясностью. Есть определенный комфорт в точном понимании того, что произойдет, когда определенные меры будут приняты. Если пользователи не будут уверены, то они вероятно будут колебаться.
  • 6 способов достичь «ясности» лендинга и повысить конверсию

Ошибка #3: Ограничение кликов и скролинга

Эта ошибка противоречит принципу интуитивности.

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

Вот скриншот из Quick Sprout Нила Пателя:

Всплывающие окна занимают весь экран. Больше ничего не видно. И это находится в центре статьи.

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

  • Если вы планируете выстраивать свой бренд и долговременные отношения с клиентами (а вам так и следует делать), не жертвуйте опытом ради email или применения чего-то «крутого».
  • Хороший UX означает, что пользователь осведомлен о наиболее желаемых действиях без того, чтобы вы наседали на них.
  • Если вы зайдете слишком далеко в обратном направлении, вы также не добьетесь ничего хорошего. Сделайте ваши наиболее желаемые действия яснее, а возможность скролинга — очевиднее… но не жертвуйте ради этого пользовательским опытом.
  • Почему проектировать пользовательский опыт (UX) так сложно?

Ошибка #4: Игнорирование прототипов

Эта ошибка противоречит принципу интуитивности.

Вероятно, вы уже сталкивались с определенными прототипами. Например, вот три сайта от Landingfolio:

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

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

Иногда люди хотят избавиться от этих прототипов. Адам Феирхед из Fairhead Creative объясняет, почему это не обязательно плохо:

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

Проблема стандартов в том, что они стандартны. В стандартах есть та ясность, которая нравится пользователям».

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

Почему это имеет такое значение? Как отмечает Хэйдон Пикеринг из The Paciello Group, сложность — главный враг UX:

«Сложность — самый большой враг хорошего пользовательского опыта, портящий все взаимодействие. Также сложность — это одна из самых трудных для исправления вещей.

Единственный способ «исправить» сложность — убрать некоторые свойства, поэтому чтобы быть гуру анти-сложности, вам надо говорить людям, что их работа должна быть разрушена. Это нелегко. Хорошее планирование и готовность сказать «нет» на ранних этапах жизни продукта — это лучший способ уменьшить сложность».

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

Пример: Дверь Нормана

Дверь Нормана определяется как «дверь, которая заставляет вас делать обратное тому, что на самом деле вы собирались сделать; дверь, дающая неверный сигнал и требующая сигнала для корректировки этого».

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

Vox недавно объяснил это на YouTube в деталях:

В видео Дон Норман из Nielsen Norman Group продолжает разговор о понятности:

«Есть несколько действительно простых, базовых принципов проектирования. Один из них я называю понятностью. Когда я смотрю на что-то, я должен иметь возможность определить, какие операции я могу сделать с этим. Это невероятно, учитывая количество компьютерных систем сегодня, вы смотрите на них и не можете понять, что же нужно делать. Требуется ли нажать на кнопку один, или два, или три раза? Так, «понятно», что абсолютно не ясно, как можно что-либо использовать.

Так много случаев, так мало отзывов. У вас нет понимания того. что происходит и почему это происходит».

Понятность (discoverability) имеет непосредственное отношение к простоте. Прототипы делают все проще. К примеру, как вы думаете — вам стоит толкнуть или потянуть на себя эту дверь?

Есть подсказки, которые говорят вам о том, что дверь надо толкать. Когда этих подсказок (или прототипов) нет, вы сталкиваетесь с Дверью Нормана.

Почему простота так сложна?

Люк Бровлевски из Google предлагает объяснение того, почему KISS принцип «делайте это проще и примитиввнее» (keep it simple, stupid) может быть таким сложным:

«Есть множество причин, почему сохранение простоты — это сложно; я сталкивался с тремя наиболее часто встречающимся: Воспринимаемая простота часто может находиться в противоречии с фактической простотой использования. Действия, которые имеют реальную ценность (и увеличивают прибыль) часто более сложны.

Постепенное развитие — наиболее подходящее решение для решения проблемы сложности — в действительности очень трудно для проектирования и разработки».

  • Процесс Дона выглядит примерно так: наблюдение за людьми, использующими что-либо; создание прототипа; тестирование; повторение. Вы можете делать что-то подобное во время пользовательского тестирования.
  • Вы также можете обратить внимания на другие сайты в вашей индустрии (или любые другие сайты, которые посещают ваши пользователи) ради прототипов.
  • Никто не говорит, что вы должны бездумно копировать ваших конкурентов. Но вы должны знать о шаблонах, которые существуют в мозгу ваших пользователей.
  • Простота может быть сложнее, чем кажется

Ошибка #5: Считать, что на мобильных устройствах действуют те же правила

Эта ошибка противоречит принципу релевантности.

Несомненно, потребление медиа на мобильных устройствах сейчас находится на подъеме:

Вам не понадобится отдельная статья о том, что трафик на мобильных устройств функционирует отлично от трафика на ПК, или о том что длинные формы являются плохой идеей. или что маленькие ссылки/кнопки убивают конверсию.

Но есть, однако, несколько вещей, которые вам необходимо знать о мобильных устройствах:

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

Также важно обращать внимание на четкость текста для мобильных версий. На маленьких устройствах могут возникать проблемы с читабельностью. Боян Джанжанин из Yesterdayishere объясняет почему маленький шрифт может саботировать ваш UX от мобильных версий:

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

При проведении тестирования мобильной версии необходимо, чтобы пользователи посещали ваш веб-сайт при дневном освещении. Ваши реальные клиенты не всегда имеют идеальные условия для просмотра. Если вы когда либо читали что-то на мобильном устройстве в солнечный день, вы, вероятно, знаете как это бывает трудно сделать».

Таким образом, UX на мобильных устройствах отличается от UX на ПК. Даже ваш UX на iPhone может отличаться от вашего UX на Android. Не думайте что исследование и тестирование может быть обобщено на все устройства.

  • Изучите пользовательский опыт для каждого устройства отдельно. Это означает отдельное исследование, отдельный анализ, отдельные решения, отдельная приоритезация, отдельные тесты и т.д.
  • Сфокусируйтесь на оптимизации UX для каждого отдельного устройства. Ваша цель состоит в том, чтобы создать самый релевантный опыт для каждого устройства. Это значит, что побуждение к действию может измениться, процесс оформления покупки может изменится и т.д.
  • Гарантия качества — ключевое свойство. Протестируйте ваш UX на всех устройствах. Где есть ошибки? Грузится ли страница медленно? Не пропадают ли изображения? Не слишком ли они большие? Заметен ли призыв к действию? Для лучших результатов тестировать надо не только самые современные операционные системы, не все слишком быстро делают апгрейды.
  • Измерение и оценка омниканального пользовательского опыта

Ошибка #6: Забыть о производительности

Эта ошибка противоречит принципу проведения исследования.

Когда вы думаете о UX, можно поспорить, что последняя вещь, о которой вы думаете — это производительность вашего сайта. Это весьма плохо, поскольку, как объясняет Бред Фрост из Brad Frost Web, это может иметь очень серьезные последствия:

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

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

Скорость загрузки имеет особенно сильное влияние на конверсию.

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

Вам необходимо исправлять даже то, что вы не можете увидеть, потому что в UX ощущается то, что нельзя увидеть.

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

Заключение

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

Вот несколько принципов, которым вам стоит следовать:

  1. Разрабатывайте для ваших реальных пользователей, а не для себя или неких идеальных юзеров.
  2. Не жертвуйте ясностью ради индивидуальности и креативности.
  3. Не забрасывайте пользователей призывами к действию и введением «новых крутых штук» без тестирования их юзабилити.
  4. Изучите прототипы, существующие в индустрии, и используйте их для собственного преимущества. Простота — это главное.
  5. Мобильные версии сильно отличаются от версий для ПК. Ваш UX на мобильных устройствах отличается от десктопного UX. Ваш UX на iPhone также может отличаться от вашего UX на устройствах с Android. Действуйте соответствующе.
  6. Не игнорируйте скорость сайта и сообщения об ошибках. Если ваш сайт работает медленно или ваши пользователи сталкиваются с большим количеством ошибок, вы ответственны за их обнаружение и быстрое исправление.

6 ошибок UX дизайна, которые дорого обходятся компаниям

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

Наконец-то всё больше компаний начинают понимать важность UX дизайна. Однако, это не значит, что те же компании перестали тратить миллионы, на повторение старых ошибок.

Хотя спрос на UX дизайн растет, это поле всё еще не до конца развито. В результате, нет железных стандартов, и рабочий процесс меняется от компании к компании, и от дизайнера к дизайнеру. Мы считаем, что всем, кто занят в продуктовом дизайне, и процессе разработки будет полезно научиться распознавать самые распространенные ошибки, и иметь возможность предотвращать их еще на начальных стадиях.

1. Отсутствие первичного пользовательского исследования

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

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

Например, правительство Великобритании потратило £12 млрд. на попытку централизации записей пациентов всей страны. Проект длился девять лет, но был отменен в 2011 году. Секретарь по вопросам здравоохранения Эндрю Лэнсли возложил ответственность за неудачу на правительство, которое вместо того, чтобы принять решение, основанное на пользовательском исследовании, использовало IT-систему, не соответствующую требованиям местной службы здравоохранения.

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

2. За пользователями нужно наблюдать, а не слушать их

То, что пользователям нужно, и то, что им нужно по их словам – две разные вещи.

Полагаться на слова пользователей в опросах и интервью – очень распространенная ошибка как на этапе тестирования, так и на этапе пользовательского исследования. Еще в 2001 году, Якоб Нильсен говорил о том, что первое правило юзабилити – «не слушайте своих пользователей». Он говорил, что люди часто не знают, чего хотят, и скорее всего скажут вам то, что вы хотите услышать.

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

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

3. Чрезмерное усложнение дизайна

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

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

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

4. Чрезмерное упрощение дизайна

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

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

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

5. Следование трендам, которые не приносят результатов

Помните гамбургерные меню? А карусели? Иногда, тренд еще не успеет начаться, как все уже его подхватили. Эти тренды не всегда хороши, но Боже упаси вам стать той компанией, которая не пошла у всех на поводу!

В случае с гамбургерным меню, есть сотни статей, ругающих его за то, что оно скрывает элементы навигации, или за его низкую эффективность. Впервые оно было применено компанией Xerox в 1981 году, но прославилось только в последние 10 лет, когда дизайнеры искали способ по максимуму использовать экранное пространство на мобильны устройствах.

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

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

6. Не исчерпывающее юзабилити тестирование

Тестирование – это, обычно, первое, от чего отказываются если люди слишком заняты, или если бюджет слишком мал. Однако, проведение тестирования — это одна из самых важных задач UX дизайнера. Джордж Брукс, основатель Crema пишет:

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

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

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

Четыре правила интуитивного UX

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

(Серьёзно, поищите «дизайн-мышление». 100500 результатов!)

Для кого эта статья?

  • Разработчики. Вы создали собственное приложение, но каждый пользователь мучается с ним. И вы знаете: если они говорят вам это в лицо, то дело действительно плохо.
  • Графические дизайнеры. Изучать UX по статьям в интернете — это какой-то… очень болезненный способ умереть.
  • Менеджеры проектов. Вы уже на четверть UX-дизайнер. Было бы неплохо освоить остальные навыки.
  • И остальные проходимцы. Все, кто корпит над своими проектами по вечерам и выходным. Вам тоже пригодится.

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

Этот навык — «понимать язык интерфейса».

В начале карьеры меня поражало, как часто клиенты передавали первоначальные наброски (или живые, рабочие прототипы) с совершенно очевидными ошибками UX. Я не говорю об ошибках, которые можно выявить после длительного A/B-тестирования. Я говорю о простых, самых глупых ошибках.

За неимением лучшего примера:

Somewhere out there, there’s a team that knows HTML, but doesn’t know the difference between a radio button and a checkbox. pic.twitter.com/VBwk8Jxekd

Где-то есть группа разработчиков, которые знают HTML, но не знают разницы между переключателем и флажком

Мои клиенты не настолько плохи, но чёрт побери, не нужно быть семи пядей во лбу, чтобы понять: если можно выбрать только ОДИН элемент из списка, то нужны ПЕРЕКЛЮЧАТЕЛИ, а не флажки. Чтобы понять это, нужно просто знать язык интерфейса. И для меня это самое безумное. Свободное владение интерфейсом доступно каждому. Вам не нужен колледж, не нужны курсы и так далее.

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

Постоянно повторяйте эту процедуру — и станете профессионалом в кратчайшие сроки.

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

(Именно тогда начинайте прослушивать лекции других дизайнеров UX о новейших академических методах исследований пользователей!)

Вот что мы осветим:

1. Закон локальности

Размещайте элементы интерфейса там, где они вызывают изменение.

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

Допустим, у вас список элементов. Где разместить кнопку «ДОБАВИТЬ НОВЫЙ ЭЛЕМЕНТ»?

Вопрос: Ну и где происходит изменение?

Ответ: В конце списка.

Отлично, поставьте кнопку в конце списка.

ПОДОЖДИТЕ. Вы думаете, что это довольно просто. Но есть искушение.

Искушение состоит в том, чтобы просто поставить её там, где есть свободное место.

Например, если у вас меню, то вы можете подумать: «У нас есть меню! Почему бы просто не поставить его в меню!?»

Нарушение закона локальности в музыкальном интерфейсе

Ответ очевиден: потому что там её никто не будет искать.

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

Думаете, что я шучу? Когда-нибудь встречали этот интерфейс?

Нарушение закона локальности в интерфейсе Evernote

Столь же плохая и распространённая альтернатива — просто взять решение, которое вы видели в Уважаемой Технической Компании, не задумываясь о том, имеет ли это смысл для вас. «Нужна кнопка „Добавить”? Не вопрос. Я видел одну такую кнопку. Подержи-ка пиво!»


Смотрите. Ещё одна кнопка там, где пользователи никогда не будут её искать. Вообще говоря, они будут подозревать, что эта кнопка добавляет что-то новое на большом пустом белом пространстве. Потому что именно там она находится.

Ваши пользователи хотят, чтобы вы следовали закону локальности.

Итак, теперь давайте использовать его.

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

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

Блестяще! Именно так сделал Spotify.

Для бонуса (1) используйте встроенную кнопку, пока она не выйдет за пределы экрана, и в этот момент переключитесь на закреплённый элемент и (2) сделайте его более заметным, чем кнопка Spotify, которую лично я заметил только через несколько месяцев, беспомощно щёлкая правой кнопкой мыши, чтобы добавлять в плейлисты отдельные песни!

Другой вариант — признать, что мы не можем надёжно и последовательно показывать кнопку в нижней части списка. Где самое близкое подходящее место для неё?

И ответ, (я думаю, довольно очевидный) — в верхней части списка.

Это моё пожелание

Чёрт возьми! Именно так сделал Rdio, конкурент Spotify, прежде чем его купила Pandora.

Реконструкция по памяти (как и вся реальность, если подумать)

Вывод ясен. Никогда не продавайте свою компанию и всегда, всегда соблюдайте закон локальности.

(На самом деле есть три закона локальности, и «размещать элементы UI там, где они влияют на изменение» — только первый. Если интересно, читайте здесь).

2. Что угодно, только не выпадающие списки

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

Один неочевидный урок проектирования UX заключается в том, что выпадающие списки обычно худший вариант.

Добро пожаловать в ад!

Они не всегда плохи, но против вас играют следующие факторы:

  • Выпадающие списки требуют слишком много кликов/нажатий. Один для открытия, ещё несколько, чтобы прокрутить до нужного варианта (на мобильном телефоне), ещё один для выбора правильного варианта и (на мобильном телефоне) последний, чтобы закрыть (сравните с одним щелчком мыши для выбора из перечисленных вариантов).
  • Выпадающие списки не показывают варианты! Чтобы их увидеть, нужно сначала нажать на список, а на мобильном телефоне часто отображается не весь список за раз.
  • В длинных выпадающих списках трудно ориентироваться. В выпадающем списке стран может быть более 195 элементов. В какой-то момент практически любой другой вариант UI будет быстрее, чем прокручивать выпадающий список.

Это довольно просто, поэтому давайте рассмотрим основные альтернативы выпадающему списку.

Если выбор между двумя вариантами…

У нас есть несколько фантастических способов для выбора одного из двух вариантов. Все они (а) сразу показывают варианты и (б) требуют меньше нажатий/кликов.

Для вопросов, на которые нет ответа «по умолчанию», попробуйте сегментированную кнопку.

Если есть состояние по умолчанию, которое соответствует ‘OFF’, попробуйте установить флажок. Он также хорош для настроек, которые не влияют на изменение, пока пользователь не нажмёт «Сохранить» или «Отправить».

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

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

Если выбор между 2−5 вариантами…

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

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

Для подробного отображения нескольких вариантов хорошо подходят карточки.

Мне нравится трюк с отображением визуальных вариантов буквально, а не списком.

Видимо, «Тесле» тоже это нравится

Если выбор между многими вариантами…

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

Если выбираете дату…

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

Какая альтернатива? Ну, это зависит от обстоятельств. Первый вопрос: какой тип даты вы выбираете?

  1. Пуассоновы даты. Сначала более вероятные даты, а далее по списку — менее вероятные. Например, дата запланированной встречи или авиарейса.
  2. Даты с высокой изменчивостью. Даты, у которых примерно одинаковая вероятность в широком диапазоне времени. Например, день рождения.

(Да, я назвал «пуассоновы даты» в честь математического распределения :-)

Для различных типов подходят разные элементы управления.

Для пуассоновых дат мы хотим сделать МАКСИМАЛЬНО УПРОСТИТЬ выбор дат в наиболее вероятном диапазоне (например, для планирования встречи это может быть следующие, скажем, 14 дней). Совершенно нормально, если выбрать дату вне этого диапазона будет чуть сложнее.

Элемент управления «календарь» вполне отвечает этим требованиям для пуассоновых дат. Если вы знаете, что дата с высокой вероятностью попадает на ближайшие 2-4 недели, вы в шоколаде.

Довольно креативно, Google Flights по умолчанию предлагает вам рейс примерно через две недели, что иногда вызывает путаницу («Я этого не выбирал!»), но это, наверное, самый вероятный выбор по распределению Пуассона.

Текстовое поле даты, вероятно, лучший вариант для дат с высокой вариативностью, где (А) нет причин отдавать предпочтение какой-то одной дате перед другой, то есть (Б) все варианты одинаково трудно выбрать.

Помните, что input[type=date] — это ваш друг… по крайней мере, на десктопе

Если выбираете число…

Числа бывают разных видов. Cкорее всего, у вас появится соблазн поставить выпадающий список для количества чего-то: билетов, людей, комнат и т. д.

Как часто вам нужен 1 билет? Очень часто.

Как часто вам нужно 10 билетов? Не слишком.

Как часто вам нужно 10 000 билетов? Это какая-то жестокая шутка?

Здесь мы опять имеем дело с распределением Пуассона и должны использовать элемент управления, смещённый к более низким числам: например, степпер.

Для чисел в широком диапазоне (например, номера социального страхования) вы же всё равно не собирались использовать выпадающий список… я надеюсь.

Можно хоть где-то использовать выпадающие списки?

Помните, что они нормально работают, когда…

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

Возможно, самые наблюдательные среди вас заметили, что в интерфейсе Google Flights, который я хвалил выше, на самом деле три заметных выпадающих списка!

Что примечательно, в мобильном интерфейсе нет выпадающего списка ‘Economy’

Они на самом деле хорошо здесь поработали. Потенциальные проблемы юзабилити быстро смягчаются за счёт следующего:

  • Специальные элементы управления, которые по нажатию показывают все параметры (в том числе на мобильном телефоне) — и заменяют собой четыре выпадающих списка (взрослые, дети, младенцы в сиденье, младенцы на руках) четырьмя степперами в одном раскрывающемся списке.
  • Удаление выпадающего списка ‘Economy’ в мобильном интерфейсе
  • Мало вариантов и умные значения по умолчанию для каждого элемента

Ладно. Поехали дальше.

3. Тест на прищур

Если вы прищуритесь, то самое важное должно первым бросаться в глаза, а наименее важные элементы — в последнюю очередь.

Контрольный вопрос: что должен сделать пользователь, чтобы использовать эту страницу?

(Примечание: я её заблюрил, поэтому следуйте инстинктам, но могу дать подсказку: это форма ввода данных)

Я бы предположил две вещи:

  1. Установить все соответствующие флажки (??) в жёлтой области
  2. Нажать синюю кнопку «Отправить»

Вы тоже так подумали?

Ошибка и ошибка.

  1. «Флажки» на самом деле представляют собой очень маленькие поля для ввода текстовых данных (если вы прочитали предыдущий раздел, то знаете, что здесь должны быть степперы).
  2. Самое главное («Найти варианты» — кстати, это очень запутанный способ сказать «Отправить») оформлено серой и незаметной кнопкой. Гораздо менее важная вещь («Помощь») находится непосредственно рядом, но больше по размеру и лучше заметна.

Тест на прищур говорит, что самая важная вещь должна быть самой заметной. Что здесь самое важное? Это текстовое поле (или степпер ;) и кнопка «Отправить».


Если вы пройдёте дальше, то следующая страница ещё хуже.

Что вы нажмёте: серую кнопку слева или такую же серую кнопку справа?

Надеюсь, вы выбрали левую!

В спешке на этой форме я на самом деле сначала нажал кнопку «Помощь». Ой. Зайдя второй раз, я нажал «Вернуться», даже бегло просканировав названия обоих кнопок, потому что на 99,999% других сайтов (с направлением письма слева направо) кнопка «Вернуться» всегда слева

Опять же, если прищурить глаза, я не могу сказать, что важно.

Как закон локальности и исключение выпадающих списков, тест на прищур довольно простой. Исправление схемы за 30 секунд.

В реальном редизайне я хотел бы поместить выбор количества билетов на ЭТОЙ ЖЕ СТРАНИЦЕ. Но это другой закон для другого времени

Сами скажите. Четыре переключателя и кнопка. И крошечная ссылка снизу.

Я не пытаюсь придираться к сайту AlaskaTrain.com, такое встречается повсюду.

Вот экран регистрации в моей любимой социальной сети на основе рекомендаций Foursquare (заблюреный, конечно).

Как в реальности отправить введённые данные (самое главное)?

Подсказка: кнопка скрыта за обычным текстом в правом верхнем углу.

Но Foursquare здесь просто следует стандартам дизайна Apple. К сожалению, нарушение теста на прищур часто встречается даже у лидеров отрасли.

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

На каждые сто просмотренных карточек я затем перейду к…

  • Показать ответ (примерно 95 раз)
  • Вернуться к списку карточек (дважды)
  • Начать добавлять карты (дважды)
  • Некоторые другие функции (очень редко)

Такой анализ действительно намекает, какой интерфейс здесь лучше будет работать.

  • Акцентируйте наиболее часто используемые функции (в первом приближении «наиболее используемые» равняется «наиболее важным»)
  • Ослабьте, скройте или удалите менее используемые функции

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

Для дополнительной информации о тесте на прищур можете посмотреть моё видео с демонстрацией редизайна веб-приложения Timezon.es. Или, если у вас нет десяти минут, вот иллюстрированная статья в блоге с тем же пошаговым редизайном.

4. Обучение на примерах

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

У нас есть странная тенденция пытаться объяснить всё словами, когда примеры намного яснее.

Возьмём новый стартап Teeming.ai, который недавно обратился ко мне, чтобы проконсультироваться по дизайну главной страницы. Заголовки на этой странице:

  • «Teeming избавляет от изоляции в удалённой работе»
  • «Teeming помогает с удалённым тимбилдингом», это также «обучение, решение проблем, получение удовольствия и мотивация друг друга»
  • «Teeming и видео для синхронной [связи]»
  • «Работает со всеми вашими любимыми видеоплатформами»

Но вот вопрос. Что на самом деле делает Teeming?

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

(Извините, Teeming, вы знаете, я вас люблю).

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

  • Автоматически осветить дорогу парню с доставкой пиццы (Dominoes+Hue)
  • Публикуйте свои фотографии везде и смотрите их отовсюду (Instagram+Twitter)
  • Сделайте свой голосовой помощник более персональным (Google Assistant+iOS Calendar)

Не нужно перечислять много примеров, чтобы нарисовать довольно чёткую картину: IFTTT соединяет приложения вместе, чтобы они делали то, на что не способны по отдельности.

Сумасшедшая вещь в том, что на главной странице они сначала объясняют это текстом:

IFTTT помогает вашим приложениям и устройствам работать вместе по-новому. IFTTT — это бесплатный способ заставить все приложения и устройства разговаривать друг с другом. Не всё в интернете хорошо работает, поэтому наша миссия — построить более связанный мир.

Вопрос: что лучше объясняет идею приложения? Примеры или описание?

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

Но примеры нужны не только на целевой странице. Вот что мы видим при первом входе в инструмент управления проектами Basecamp.

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

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

Есть даже дружелюбная… гора?… которая говорит, что я могу посмотреть двухминутное пояснительное видео об этом обучающем проекте.

И спасибо вам, мистер Гора, за руководство: демонстрационные видеоролики — это ещё один способ обучения на примерах! Примеры показывают, как будут выглядеть мои проекты, а видео показывает, как использовать программное обеспечение.

Если ваше приложение даёт пользователям что-то создавать, то демонстрация — отличный способ показать возможности на примере.

Замечательное приложение для рисования Procreate выиграло Apple Design Award, «Выбор редактора» App Store и App Store Essential, а Джон Грубер назвал его «новаторским» и т. д. — но никакие награды не восхищают так, как реальные примеры работ, созданных в этом редакторе.

Это не обычное приложение для рисования

Это вам не MS Paint.

Демонстрация на примерах — мощный инструмент, чтобы понять возможности вашего приложения.

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

Вкратце, мои любимые способы сделать это:

  1. На любой странице, которая пытается предложить пользователю функцию/приложение и т. д., покажите примеры, что можно сделать с этим инструментом.
  2. Используйте метод «первоначальной загрузки», покажите образцы данных и пример, как будет выглядеть правильно работающее приложение.
  3. Стратегически внедряйте справочную информацию (например, статьи, видео или подсказки) вместе с примерами использования.
  4. Ваше приложение позволяет создавать что-то творческое? Покажите галерею работ, чтобы подстегнуть воображение.

Есть смысл? Давай на этом и закруглимся.

Срочно учите UX: почему простые дизайнеры скоро станут не нужны

Может быть, мы несколько преувеличиваем: спрос на логотипы никуда не исчезнет, да и простой корпоративный сайт можно сделать без знаний юзабилити. Но вот создавать интернет-магазин или CRM простого дизайнера уже вряд ли позовут. Даже с лендингами будут проблемы. Рассказываем, что такое UX и UI, в чем разница и как их освоить, а значит, остаться востребованным.

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

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

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

Свою новую дисциплину эти люди назвали юзабилити. Со временем юзабилисты стали называть себя проектировщиками пользовательских интерфейсов — UI-designers. Вы же понимаете разницу между употреблением русского «дизайн» и понятием design в остальном мире, где оно включает в себя и инженерно-проектировочную работу?

Путь от создания просто удобных интерфейсов к полноценному проектированию пользовательского опыта — именно так наиболее полно можно объяснить по-русски значение аббревиатуры UX — занял около десяти лет. В дороге юзабилистам встретились маркетологи, которые научили их лучше понимать заказчиков и слышать пользователей, аналитики и тестировщики. Первые принесли с собой методы количественной оценки и навык извлечения требований, вторые научили не полагаться на самих себя и проверять гипотезы на практике. В стороне не остались и дизайнеры. Вот только в ту пору, придя в юзабилити, они обычно откладывали в сторону привычный Photoshop и начинали использовать более специализированные инструменты: MS Visio, а позже — Axure и другие.

Это объяснялось с одной стороны правилами, которые диктовал рынок: дизайн стоит дорого и не следует занимать специалиста проектированием, а с другой — законами психологии. Довольно быстро удалось заметить: когда заказчику приносишь интерфейс, выполненный в полноценном графическом редакторе, он видит перед собой как бы свой сайт, — и предъявляет к нему соответствующие высокие требования. Напротив, прототип — выполненная в оттенках серого схема расположения элементов воспринимается клиентом как набросок. А значит, обсуждая его, куда проще не отвлекаться на частности и говорить именно об интерфейсе, а не о том, что «нужно вот тут чуть-чуть другой цвет взять».

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

Так проектирование интерфейсов снова стало дизайном. И именно на таких дизайнеров-проектировщиков до сих пор растет спрос, отнимая хлеб у тех, кто до сих пор не изучил правила построения хорошего user experience. Нынешний UX-дизайнер должен уметь объединить в себе навыки работы с графическими пакетами и опыт, пришедший из области проектирования пользовательского опыта.

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

UX-процесс: почему юзабилисту стоит работать с проектом от первых переговоров до запуска и даже после него

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

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

Извлечение требований

Этот человек часто имеет довольно смутное представление о том, какой именно результат он хочет получить. Многие предпочли бы всем изыскам белый экран с красной кнопкой «Получить деньги сейчас». Но у него есть идея и он готов инвестировать в ее реализацию. На этом этапе задача юзабилиста — помочь руководителю проекта понять идею.

Ему нужно уточнить, насколько возможно, то видение ее реализации, которое есть у клиента. А при необходимости (которая возникает, надо сказать, очень часто) — вместе с бизнес-аналитиком провести процедуру с не слишком лицеприятным названием «извлечение требований».

Не стоит забывать: обзаведясь UX-инженерами, многие компании не озаботились нанять аналитиков и научить project-менеджеров взаимодействовать с заказчиками, удовлетворившись тем, что они умеют контролировать процесс работы. Если вы окажетесь в одной из таких фирм, вам предстоит выполнять все эти функции самостоятельно. Без этого создание интерфейса и построение пути, по которому в нем будет двигаться пользователь, осуществить не удастся.

Но вот вы тщательно расспросили (а порою и мягко допросили заказчика). Однако что-то проектировать еще рано: теперь пора пообщаться с потенциальными пользователями. Заказчик и пользователи — это заинтересованные лица. Вместе они называются стейкхолдерами и именно их совместные интересы должен представлять в проекте UX-проектировщик.

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

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

Персоны и сценарии

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

Но очень важно, чтобы юзабилист не забывал и про работу с аналитическими данными. Та информация, которую можно почерпнуть из отчетов Google Analytics и Яндекс.Метрики, способна очень хорошо продемонстрировать, каким путем движется посетитель сайта. Где для него все понятно, а где он останавливается в нерешительности или даже уходит, бросив попытки разобраться в запутанных интерфейсах.

Кроме чисто числовых данных, в ход могут идти и тепловые карты, показывающие движения курсора. Если у вас есть такая возможность, можно использовать и eye-tracking-системы, которые позволят узнать, куда человек смотрит и где находятся слепые зоны экранов вашего сайта или приложения.

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

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

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

Для того, чтобы относиться к своим героям человечнее, а также для облегчения коммуникации в команде в процессе обсуждения создаваемых решений, советуем дать этим персонажам имена и даже подобрать фотографии. Проверено: аргумент «Как к этому отнесется Линда?» работает куда убедительнее, чем «Что подумает об этой возможности наша карьеристка?».

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

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

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

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

Именно прохождение сценариев станет одной из первых частей ручного тестирования проекта. Поэтому тестировщиков можно привлечь уже на этапе их формирования. Возможно, они смогут посоветовать что-то полезное.

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

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

Создаем интерфейс

Наконец-то! На самом деле создание user interface — едва ли не самая простая часть работы юзабилити-инженера. Обычно именно на нем сосредоточиваются все руководства. Поэтому здесь мы ограничимся тремя простыми советами про проектирование пользовательского интерфейса.

Помните про законы юзабилити

Их никто не отменял. Расположенные рядом элементы все еще ускоряют взаимодействие пользователя с интерфейсом, F-образное размещение контента до сих пор хорошо работает. А лишние клики (хотя теперь их оказалось больше трех) бесят клиентов, как и раньше.

Следите за технологиями и за своими коллегами

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

Не перегибайте с интерактивностью

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

Проверяйте разработанные экраны по возможности быстро

Если не можете привлекать к этому реальных пользователей, обращайтесь к коллегам. Объясните им, что это по-настоящему важно.

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

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

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

Тестируем, редактируем, снова тестируем и осуществляем авторский контроль

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

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

Вот путь, который проходит юзабилист от встречи с тем вызовом, который ставит перед ним заказчик до готового продукта.

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

Юзабилисты в дизайне и дизайнеры в юзабилити

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

Если сегодня вы хотите развиваться, а не стоять на месте, пора отставить в сторону Axure и браться за Figma или Sketch. В том, чтобы освоить новые инструменты, на самом деле нет ничего страшного. К тому же, они куда более юзерфрендли, чем Photoshop, необходимость взаимодействия с которым остановила не один десяток людей, задумывающихся об освоении дизайнерского софта. А то, что вам теперь предстоит работать с цветом, уделять куда большее внимание каждому пикселю и подбирать интересные типографические решения, на поверку окажется совсем не страшным. Скорее всего, ваших пассивных знаний, накопившихся за годы взаимодействия с дизайнерами и вращения в профессиональной среде, уже будет достаточно для старта.

Без UX теперь никуда — так что пора начинать мыслить его категориями. Но и степень универсальности в нем растет — так что не бойтесь новых инструментов. Только с ними вы сможете остаться востребованными рынком.

Цукерберг рекомендует:  1С Битрикс - система для успешной веб-разработки
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих