Основы ux ui: 🎨 Принципы и основы UX-дизайна — Блог Live Typing

1. UX и UI дизайн для пользователей.

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

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

2. Ключевое правило UX. Знайте свою аудиторию.

Исследование привычек и предпочтений пользователей – первый шаг в проектировании сайта.

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

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

3. Вы – не пользователь.

Тестирование с реальными пользователями – важная часть процесса проектирования.

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

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

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

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

4. Адаптируйте UI/UX дизайн для кратковременной концентрации внимания.

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

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

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

5. Дизайн UX — это процесс не высечен на камне.

Адаптируйте процесс проектирования к разрабатываемому вами продукту.

Ясный и лаконичный процесс разработки пользовательского интерфейса позволяет создавать потрясающие впечатления для посетителей сайта.

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

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

6. Создавайте прототип, прежде чем работать с настоящим продуктом.

Этап проектирования цифровых продуктов должен включать этап прототипирования.

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

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

7. Используйте реальный контент при разработке.

Избегайте использования Lorem Ipsum и фиктивных заполнителей.

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

8. Делайте дизайн простым и последовательными.

Особенности отличного пользовательского интерфейса – простота и последовательность.

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

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

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

9. Узнаваемость UI элементов важнее оригинальности.

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

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

10. Сделайте UI/UX дизайн удобным и доступным.

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

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

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

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

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

11. Не пытайтесь решить проблему самостоятельно.

Дизайн – это командный вид спорта. Не работайте изолированно.

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

12. Не пытайтесь решить все сразу.

UX-дизайн — это не линейный процесс.

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

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

13. Лучше предотвращать ошибки, чем исправлять их.

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

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

14. Информируйте посетителей о ходе их работы на веб-ресурсе.

Приложение или веб-сайт всегда должны держать пользователей в курсе происходящего.

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

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

15. Избегайте резких изменений дизайна.

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

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

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

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

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

Вывод: не бойтесь ошибаться.

Все делают ошибки — это единственный способ чему-то научиться.

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

По материалам сайта: https://xd.adobe.com.

✔️ Что такое Lorem Ipsum?

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

❤️ Что такое 10 эвристик Якоба Нильсена?

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

✔️ Как создать «быстрое прототипирование»?

Использовать для этого специальные инструменты и веб-ресурсы.

❤️ Как еще можно получить пользовательский опыт?

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

❤️ С чего начинать делать UI/UX дизайн?

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

✔️ Что наиболее важно понимать в процессе проектирования UX?

Принципы UX.
Удовлетворение потребностей пользователей. Главный из всех принципов дизайна UX — сосредоточение внимания на пользователях на протяжении всего процесса проектирования.
Правильное определение этапа проектирования.
Соблюдение чёткой иерархии.
Последовательность решений и действий.
Понимание доступности.
Понимание ключевого значения контекста.
Удобство использования.
Меньше — больше.

✔️ Почему UI важен?

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

Что такое UX? | Урок 1 курса «Основы UX» – UxJournal

Привет. Перед вами — базовых курс UX, который включает 31 основной принцип UX-проектирования — UX Crash Course: 31 Fundamentals.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

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

Что такое UX?

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals)

Любой процесс подразумевает наличие опыта взаимодействия (user experience). Наша задача не в том, чтобы создавать опыт взаимодействия. Наша задача — сделать его хорошим.

Что же я подразумеваю под «хорошим» опытом взаимодействия?

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

Цель UX-дизайнера — чтобы пользователи были эффективными.

Пользовательский опыт — это лишь верхушка айсберга:

Многие ошибочно думают, что под UX подразумевается «a user’s experience», т. е. опыт пользователя. Но на самом деле UX — это скорее процесс проектирования пользовательского опыта.

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

«Делаем» UX:

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

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

А завтра мы узнаем два типа целей в UX, которые должны кардинально поменять ваш дизайн… →

Recommend

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле

10 золотых правил UI дизайна

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

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

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

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

1. Проектируйте для плотности, а не для пикселей

Если вы не знаете, плотность – это количество пикселей на один дюйм экрана или PPI. Единица измерения «dp» – это сокращение от выражения «независимый от плотности экрана пиксель», иногда можно встретить сокращение «dip».

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

Причина, по которой мы это делаем, заключается в том, что, если мы создадим актив кнопки, например, с разрешением 200 x 50 dp, он будет отображаться 200 x 50 px на экране 160 ppi и 400 x 100 пикселей на экране 320 ppi (в 2 раза больше первоначального размера актива).

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

Например, размеры экрана iPhone XS Max составляют 414 x 896. Но это не пиксели, а количество точек. В пикселях это 1242 x 2688 px. Учитывая это, при проектировании для iPhone XS Max я бы выбрал размер 414 x 896 точек, а затем масштабировал активы в @ 3x.

2. Используйте шаг 8dp

Зачем проектировать с шагом 8? Ну, этому есть простое объяснение. Причина, по которой мы используем магическое число 8, а не 5, заключается в том, что, если устройство имеет разрешение 1,5x, оно не будет правильно отображать нечетное число.

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

Проектируя с шагом 8 на сетке 8-pt ваши дизайны будут выглядеть согласованными. Больше не надо угадывать интервал, и все идеально согласуется с обозначенными вами интервалами.

Если хотите подробнее узнать об этой теме, прочтите эту статью.

3. Уберите линии и рамки

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

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

4. Обращайте внимание на контраст

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

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

Правила доступности веб-контента (WCAG) требуют контрастности не менее 4,5: 1.

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

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

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

Например, если вы создадите кнопку в виде круга и разместите на ней текст «Start Free Trial», то он займет слишком много вертикального пространства.

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

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

6. Используйте цветовой вес, чтобы установить иерархию

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

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

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

7. Старайтесь не использовать больше двух шрифтов

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

Выходом может быть использование семейств шрифтов.

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

При выборе шрифта найдите семейства, которые имеют различные веса (light, regular, medium, bold, extra bold, а также такие стили, как сжатый, расширенный и курсив). Это даст вам больше возможностей для изучения различных стилей без добавления дополнительных шрифтов.

8. Узнавать знакомое, а не пытаться вспомнить

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

Страницы оформления заказа, почтовые ящики, история поиска, кнопки «Назад» и т. д. являются хорошими примерами.

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

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

«Минимизируйте нагрузку на пользователя, делая объекты, действия и параметры видимыми. Пользователь не должен помнить информацию из одной части диалога в другой. Инструкции по использованию системы должны быть видимыми или легко доступными при необходимости» — Nielson Norman Group

9. Не замедляйте меня

Полное руководство по правильному использованию анимации в UX

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

«Я хочу двигаться быстро» – Рики Бобби

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

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

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

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

«Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Эти цифры основаны на конкретных качествах человеческого мозга. Любая анимация короче 100 мс является мгновенной и не распознается вообще. Между тем, анимация продолжительностью более 1 секунды вызовет ощущение задержки и, следовательно, будет скучной для пользователя» — Руководство по правильному использованию анимации в UX

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

10. Меньше значит больше

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

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

Одна из моих любимых цитат: «Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать». – Антуан де Сент-Экзюпери

Спасибо за прочтение!

Подписывайтесь на автора на Dribbble и Medium.Пишите ему в LinkedIn.

Основы дизайна UI. Часть 1.. Часть 1 | by МИР

Часть 1

Введение

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

Когда я писала эту книгу, параллельно я работала над Airstory, новым приложением, которое помогает авторам писать. Какое удивительное совпадение.

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

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

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

Давайте начнём.

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

Начнём с определения терминов «пользовательский интерфейс» и «дизайн пользовательского интерфейса».

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

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

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

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

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

–Wikipedia

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

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

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

Вот что происходит: пользовательский опыт (UX) предоставляется через пользовательский интерфейс (UI). Пользовательский опыт — это активность, а пользовательский интерфейс — среда этой активности. Как дизайнеры UI и UX, мы создаём одно и то же: программный продукт. Мы просто сосредоточены на различных аспектах процесса создания (пользовательский опыт или пользовательский интерфейс).

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

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

Дизайн взаимодействия (IxD) больше фокусируется на аспекте поведения пользователей. Слово «взаимодействие» относится к предмету дизайна: взаимодействие с цифровыми продуктами, системами или услугами.

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

Информационная архитектура (IA) — дисциплина дизайна, касающаяся структуры и представления информации. Эксперты IA обычно работают с самыми сложными информационными системами и продуктами. Основными задачами являются: организация, маркировка, поиск и навигация.

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

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

Якоб Нильсен сказал это в 1997 году:

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

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

Якоб Нильсен, «Различия между веб дизайном и дизайном GUI»

(1 мая, 1997)

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

Я бы сказала, веб дизайн — это небольшой подраздел дизайна UI, в котором основное внимание уделяется контенту, публикуемому в сети.

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

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

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

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

Вот ключевой вопрос: стоит ли работать непосредственно с кодом или можно отправлять изображения?

Создание личных проектов в HTML и CSS и даже разработка прямо в браузере является для веб дизайнеров обычным делом.

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

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

Демонстрация UI — это как ловить и накалывать красивую бабочку.

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

Доступны десятки продуктов для дизайна UI. Только от вас зависит: какие инструменты и каким образом использовать в своём рабочем процессе. Мы все преследуем одну цель — потрясающий дизайн и потрясающий пользовательский интерфейс.

В определении дизайна UI указано, что он касается взаимодействия человека и машины. Интересующая нас часть — человек. Мы создаём UI, предназначенный для обычного человека.

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

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

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

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

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

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

–Nick Disabato, «Cadence & Slang»

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

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

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

Это требует больших знаний и это подразумевает большую ответственность.

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

· Будьте себе самым главным судьёй — никогда не отправляйте неполную или несовершенную работу.

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

· Развивайте свои бизнес-навыки и задавайте бизнес-вопросы вместо сверления техническими деталями.

· Будьте честно готовы много работать и помогать бизнесу своих клиентов.

· Подходите к каждой сложной задаче с умом и любопытством.

· Не бойтесь делиться и документировать свои процессы и соображения.

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

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

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

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

О чём волнуется предприниматель? Что на кону? Давайте посмотрим, что выбрал средний самодостаточный предприниматель:

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

· Достал определённую сумму денег

· Создал качественный и хорошо выглядящий продукт (и оплатил услуги всех вовлечённых сторон)

· Создал маркетинговую компанию для стимуляции продаж (и платит за неё)

· Наблюдает за единичными клиентами (почти всегда меньше, чем ожидалось) и подсчитывает жалкую прибыль

· Убеждается, что ПО работает бесперебойно, запросы поддержки обрабатываются качественно, а данные клиентов в безопасности

· Заботится о непрерывном движении денежных средств, чтобы своевременно оплачивались банковские счета

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

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

Вам всегда нужно балансировать между требованиями клиента и вашим желанием отправить потрясающую работу.

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

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

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

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

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

–Дрю Уилсон и Джош Лонг, «Исполнить»

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

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

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

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

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

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

С тех пор я изучала принципы с особой тщательностью и интересом.

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

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

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

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

· Что сейчас произошло

· Где я нахожусь

· Что я могу сделать

· Что произойдёт, когда я это сделаю

· Что только что произошло и т. д. — сбросить и повторить

Ясность идёт бок о бок с простотой.

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

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

Создайте что-нибудь, что хорошо выглядит во всех ситуациях.

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

И затем он используется на старом ноутбуке с низким разрешением экрана вашего любимого дедушки.

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

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

· Используйте непробиваемую типографику (чёрный на белом, большой, читаемый шрифт)

· Продумайте все возможные случаи с контентом (без контента, мало контента, ужасный контент, странный контент). Нарисуйте самые важные.

· Учитывайте все устройства и разрешения.

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

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

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

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

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

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

Эти вещи должны быть абсолютно знакомы пользователю:

· Иконки

· Навигация

· Призывы к действию — ссылки, кнопки и т.д. Использует простые, популярные глаголы

· Распространённые цветовые ассоциации: красный для срочного, зелёный для готового и т.д.

· Всё, что связано с обработкой платежей

Пользователь будет рад увидеть знакомые предметы и шаблоны в неизведанном мире вашего приложения.

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

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

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

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

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

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

Вот что вы можете сделать:

· Ввести чёткую визуальную иерархию, приём самые важные вещи большие и заметные

· Располагайте всё по сетке или введите любой другой язык визуального расположения

· Соблюдайте согласованность навигации на всех экранах сайта или приложения

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

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

А это всё, чего мы хотим.

Дизайн UI является производственным процессом. Но по своей сути это услуга. И вам платят за обслуживание клиента.

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

Со временем вы отполируете процесс, и он станет отражением части вашей личности.

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

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

Вы думаете: «Конечно, они полезны. Но я знаю, что делаю, и я отлично умею правильно рисовать в Photoshop».

Но преимущества вайрфреймов не ограничиваются только подготовительной работой:

· Вы полностью отделяете мыслительный процесс и рассмотрение UX от визуального дизайна, это значительно облегчает мышление

· Это делает дальнейший дизайн совершенно беззаботным, с акцентом на эстетику

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

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

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

Посмотрите на этот фрагмент вайрфреймов мобильной версии Planscope для Brennan Dunn. Мало того, что вы задаёте основы для будущих точных макетов, но вы также объясняете свой образ мышления клиенту.

Вот во что в итоге превратилось эти вайрфреймы. Превосходные и очень точные макеты было намного проще спроектировать (и подписать).

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

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

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

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

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

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

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

Что ж, открывайте Photoshop и запачкайте свои руки.

Я не рекомендую вам представлять более двух вариантов «стиля на выбор». Одного недостаточно, потому что у клиента просто должен быть выбор, а три варианта делают выбор слишком сложным. Помните о парадоксе Буридана? Бедное мифическое животное умерло от голода, потому что оно не смогло сделать выбор между двумя одинаковыми грудами сена.

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

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

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

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

Почему так происходит?

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

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

–Пол Боаг, Почему нужно задействовать ваших разработчиков в процессе дизайна»

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

Что такое UX/UI дизайн на самом деле? / Хабр

Очень много недопонимания в среде дизайнеров и разработчиков. Также много глупых вопросов, связанных с UX и UI у новичков. Часто просто из-за того, что люди не знают сути понятия UX/UI и, не зная о чем говорят, называют вещи не своими именами.

Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».

_{Разные типы интерфейсов для заточки лезвий.}

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

Цель UI/UX дизайнера — довести пользователя до какой-то логической точки в интерфейсе. Сделать так, чтобы пользователь достиг своей цели.

Что такое UX/UI, прямым текстом

UX — это User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

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

UX/UI дизайн — это проектирование любых пользовательских интерфейсов в которых удобство использования так же важно как и внешний вид.

Что такое UX и UI дизайн, другими словами

Прямая обязанность UX/UI дизайнера — это, например, «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?» Нравится или не нравится. Купить или не купить.

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

Более того, профессия UX/UI дизайнера существовала с незапамятных времен. Просто раньше она так не называлась. Точнее, раньше она вообще никак не называлась, а была частью других профессий.

Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.

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

Ещё один более древний и примитивный пример — точильный камень (колесо). Уже даже в раннем средневековье было много разновидностей и механизмов такого колеса:

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

Всё это были разные типы интерфейсов.

Так вот, когда изобретатель очередного точильного камня думал:

• будет ли он сидеть и сам нажимать педаль
• или он упростит механизм, но приставит раба который будет раскручивать колесо рукой,

то в тот момент он был

.

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

И тот способ, каким бы вы затачивали меч — назывался бы интерфейс.

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

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

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

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

Разделение на веб-дизайнеров и UX/UI дизайнеров появилось с развитием интернета. Со временем понадобились более узкие специалисты, которые делали бы интерфейсы именно для веб-сайтов.
Да, UI/UX дизайн — это более широкое и емкое понятие чем веб-дизайн.

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

основные понятия дизайна цифрового продукта

В июне 2017 года корреспонденты Теплицы будут подробно рассказывать о двух формах дизайна цифровых продуктов: опыта пользователя (UX – User eXperience) и пользовательских интерфейсов (UI – user interface). Также мы поговорим о дизайн-мышлении, юзабилити сайта, человек-ориентированном дизайне (human-centered design), сервис-дизайне (service design) и посоветуем, как улучшить сайт некоммерческой организации. В этой статье мы разберем основные понятия, которые стоит знать при изучении UX и UI дизайна.

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

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

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

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

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

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

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

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

2. Контекст анализа использования (Context of Use Analysis) – сбор и анализ подробной информации о потенциальных пользователях. Для этого проводятся интервью, семинары, опросы, работа с фокус-группами.

3. Легко обучаемый (Easy to Learn) – аспект удобства использования. Он призван облегчить пользователям взаимодействие с интерфейсом, при этом потратив минимальное время на его изучение.

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

Еще по теме: 60+ полезных инструментов и ресурсов для дизайнеров

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

6. Фокус-группа (Focus Group) – группы потенциальных пользователей вашего продукта, которые формируются, чтобы получить от них обратную связь. Мнение фокус-групп важно на этапе планирования продукта, сбора всех требований к нему. Участники высказывают свое мнение о прототипах, задачах, стратегиях, выбранных для создания продукта.

7. Информационная архитектура (Information Architecture) – процесс организации информации, который включает структуру, дизайн, макет и навигацию. Он позволяет сотрудникам и пользователям находить нужную информацию и управлять ею. Например, информационная архитектура определяет размещение элементов на странице, их навигацию, связь самих страниц.

8. Интерфейс (Interface) – неотъемлемая часть любого продукта. Это объект, среда, набор инструментов, с помощью которых пользователь взаимодействует с готовым продуктом. Например, кнопки, галочки, текстовые поля, подсказки, переключатели на сайте. По сути, интерфейс ведет за собой пользователя.

9. Совместная разработка (Participatory Design) – процесс, в который включены разработчики, представители бизнеса и пользователи. Все они работают вместе для создания решения. Например, разработчики активно привлекают пользователей к процессу проектирования, чтобы быть уверенными в востребованности функций продукта.

10. Плюралистический подход к юзабилити (Pluralistic Usability Walkthrough) – метод тестирования юзабилити, который используется для оценки дизайна на ранней стадии. В этом тестировании участвуют пользователи и разработчики интерфейса.

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

12. Раскадровка (Storyboard) – способ иллюстрирования взаимодействия человека и продукта в описательном формате. Раскадровка может состоять из серии рисунков, эскизов и описания к ним. Она рассказывает историю о том, как пользователь тестирует и оценивает продукт.

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

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

2. Каскадные таблицы стилей (Cascading style sheets, CSS) – так называется формальный язык. Он используется для описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML. CSS используется, например, для того, чтобы задать шрифт, цвет и расположения отдельных блоков на веб-страницах.

Еще по теме: Александр Христолюбов: дизайн-мышление – методология поиска новых решений

3. Система управления контентом (Content management system, CMS) – программа, которая позволяет совместно создавать, редактировать и управлять контентом на сайте.

4. Анимация (Animation) – моделирование движения путем быстрого появления изображений в последовательности.

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

6. Пустое пространство (Negative Space) – часть страницы, которая не содержит текста или изображения.

7. Метки (Labels) – названия для кнопок и других элементов для навигации по сайту.

8. Путь (Path) – маршрут, который проходит пользователь на веб-сайте.

9. «Что видишь, то и получишь» (What you see is what you get) – это свойство веб-интерфейсов или программ, в которых макет выглядит похожим на конечную продукцию и может быть представлен в виде печатной версии или презентации. Такую функцию выполняют «визуальные редакторы».

Основные термины UX дизайна перечислены в справочнике Usability Body Knowledge, а UI – на образовательном сайте Usability.gov

Основы UX | Основы Интернета | Разработчики Google

Адвокат по дизайну в Google • Материальный дизайн, пользовательский интерфейс и дизайн-спринты

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

Это руководство во многом заимствовано из методологии Design Sprint, команды Google используют для устранения неполадок и решения таких проблем, как Самостоятельное вождение автомобиля и Project Loon.

Двойной алмаз

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

Подготовка сцены

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

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

Это несколько реальных примеров продуктов, над которыми я работал в мимо;

• Разработать систему для управления лечением и последующим уходом за пациентами с косолапость.

• Создайте приложение, которое упрощает сложные финансовые системы и сокращает их до Основы.

• Создайте единое мобильное приложение для разных платформ, не жертвуя бренд.

Обновление вашего запроса

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

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

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

Подтверждение проблемы

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

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

Внутренние интервью с заинтересованными сторонами

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

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

Lightning переговоры

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

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

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

Пользовательские интервью

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

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

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

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

Полевые этнографические исследования

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

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

Собираем вместе

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

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

Карта проекта

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

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

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

Каркас и раскадровка

Crazy 8s

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

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

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

Усовершенствуйте свой дизайн

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

Раскадровка идеи

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

Создание прототипа

Создание прототипа — это не создание идеального фрагмента кода, а создание то, во что можно поверить, когда кто-то его использует. Инструменты, используемые для создания прототип варьируется от человека к человеку. Некоторым нравится Keynote или Powerpoint, так как они заставляет думать о потоке, а не о деталях дизайна. Возможно, вы захотите инвестировать уделите время обучающим инструментам, таким как Balsamiq, Marvel или Framer, которые могут дать вам больше поведенческий контроль. Какой бы инструмент вы ни использовали, убедитесь, что он сосредоточьтесь на потоке и выглядит реально.Прототип нужно протестировать на реальных людях поэтому он должен быть как можно более правдоподобным, но в то же время не должен потребуются недели работы, чтобы создать.

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

Тестирование дизайна на удобство использования

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

Вопросы, которые нужно задать

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

Вам нужно узнать:

• Что им нравится в прототипе?
• Что им не нравится в прототипе?
• Какие болевые точки?
  • Почему сработал поток
  • Почему не работал поток
• Что бы они хотели улучшить?
• Удовлетворяет ли общий дизайн / поток их потребностям?

Пересмотр конструкций и еще один раунд испытаний

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

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

Сделай это!

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

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

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

Обратная связь

Была ли эта страница полезной?

Есть

Что было самым лучшим на этой странице?

Это помогло мне выполнить мои цели

Там была информация, которая мне была нужна

Имеет точную информацию

Легко читалось

Что-то еще

№

Что было хуже всего на этой странице?

Это не помогло мне выполнить мои цели

Отсутствовала необходимая мне информация

Он имел неточную информацию

Трудно было прочитать

Что-то еще

Основы проектирования пользовательского интерфейса | Usability.gov

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

Выбор элементов интерфейса

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

Элементы интерфейса включают, но не ограничиваются:

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

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

Лучшие практики для проектирования интерфейса

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

• Сделайте интерфейс простым. Лучшие интерфейсы практически незаметны для пользователя. Они избегают ненужных элементов и ясно говорят на языке, который они используют на этикетках и в сообщениях.
• Обеспечьте единообразие и используйте общие элементы пользовательского интерфейса. Используя общие элементы в пользовательском интерфейсе, пользователи чувствуют себя более комфортно и могут выполнять задачи быстрее. Также важно создавать шаблоны в языке, макете и дизайне по всему сайту, чтобы повысить эффективность. Как только пользователь узнает, как что-то делать, он сможет передать этот навык другим частям сайта.
• Будьте целенаправленны в макете страницы. Учитывайте пространственные отношения между элементами на странице и структурируйте страницу в зависимости от важности. Тщательное размещение элементов может помочь привлечь внимание к наиболее важным фрагментам информации, а также улучшить сканирование и удобочитаемость.
• Стратегически используйте цвет и текстуру. Вы можете направлять внимание или отвлекать внимание от предметов, используя цвет, свет, контраст и текстуру в ваших интересах.
• Используйте типографику для создания иерархии и ясности. Внимательно подумайте о том, как вы используете шрифт. Различные размеры, шрифты и расположение текста для повышения удобства сканирования, разборчивости и читаемости.
• Убедитесь, что система сообщает о том, что происходит. Всегда сообщайте своим пользователям о местоположении, действиях, изменениях состояния или ошибках. Использование различных элементов пользовательского интерфейса для сообщения статуса и, при необходимости, следующих шагов может уменьшить разочарование вашего пользователя.
• Подумайте о значениях по умолчанию. Тщательно обдумывая и предвидя цели, которые люди ставят перед вашим сайтом, вы можете создать настройки по умолчанию, которые снизят нагрузку на пользователя.Это становится особенно важным, когда речь идет о дизайне форм, где у вас может быть возможность предварительно выбрать или заполнить некоторые поля.

Список литературы

Справочник по основам UX для начинающих. Брэдли Найс, менеджер по контенту… | Брэдли Ницца | Уровень повышен!

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

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

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

В основе UX лежит обеспечение того, чтобы пользователи находили ценность в том, что вы им предоставляете. Питер Морвилл представляет это в своей работе User Experience Honeycomb.

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

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

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