Шаблоны пользовательских интерфейсов

Димитров Вячеслав Михайлович, старший преподаватель кафедры ИМО, dimitrov@cs.petrsu.ru

UX/UI

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

UX/UI

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

Психология пользователя

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

Юзабилити

  1. Юзабилити работает на уровне сознания.
  2. Можно ли выполнить действие с меньшими усилиями со стороны пользователя
  3. Можно ли предотвратить возможные ошибки пользователя, используя интерфейс.
  4. Интерфейс прост или сложен.

Дизайн

  1. В UX под дизайном подразумевается вопрос “как это работает?”
  2. Это можно измерить и доказать вне зависимости от стиля.
  3. Падает ли взгляд пользователя в “правильные” места? Как вы это узнали?
  4. Цвета, фигуры, шрифты — эти элементы дизайна должны помогать пользователю получить желаемое, а также улучшать юзабилити каждого раздела.

Копирайтинг

  1. Между написанием “брендовых” текстов и написанием UX-текстов существует огромная разница.
  2. Брендовые тексты поддерживают имидж компании.
  3. UX-тексты направлены на максимально быстрое и простое решение задачи.
  4. Звучит ли текст достаточно уверенно? Поясняет ли он пользователю, что делать?

Анализ

  1. Анализ отличает UX от других видов дизайна и делает его особенно ценным.
  2. Использовать статистически данные для анализа решения.

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

  1. Никогда не вредно провести пользовательское исследование.
  2. Необходимо проводить его периодически.
  3. Важно не “когда”. Важно “что”.
  4. Информация двух типов: субъективная и объективная.

Субъективное исследование

  1. Подразумевает наличие мнения, воспоминания, впечатления от чего-то.
  2. Чувства, которое у вас возникает.
  3. Правильного ответа не существует.
  4. Например, “Какой ваш любимый цвет?”

Объективное исследование

  1. Под словом “объективный” понимается факт.
  2. Иногда правдивый. Иногда доказуемый.
  3. И как бы вам ни хотелось, ваше мнение никак не повлияет на этот факт.
  4. Например, “Как долго вы пользовались нашим приложением?”

Типы вопросов

  1. Открытый вопрос
  2. Наводящий вопрос
  3. Закрытый/прямой вопрос. Да или нет.

Типы субъективного исследования

  1. Интервью
  2. Наблюдение
  3. Фокус-группа
  4. Опрос (анкетирование)
  5. Сортировка карточек

Правила проведения исследования

  1. Задавайте каждому одни и те же вопросы одним и тем же образом.
  2. Старайтесь не растолковывать вопросы и не предлагать ответы.
  3. Ведите конспект или записывайте интервью на аудио/видео. Никогда не стоит полагаться на свою память.

Пользовательский профиль - это НЕ

  1. Тип личности
  2. Демография
  3. Стереотип, сформировавшийся из вашего опыта
  4. Поверхностное и одномерное существо
  5. Концепция

Пользовательский профиль

  1. Это то, что описывает цели, ожидания, мотивы и поведение реальных пользователей.
  2. Всю необходимую информацию вы должны получить из результатов исследований.
  3. Несколько “идеальных” пользователей.
  4. Несколько различных поведенческих групп.
  5. Каждая функция должна иметь пользовательский профиль.

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

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

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

  1. Шаг 3: Какие особенности у каждого устройства? (проектирование под разные устройства требует кардинально разных подходов.)
  2. Шаг 4: Учитывайте программное обеспечение.
  3. Шаг 5: Будьте адаптивны.
  4. Шаг 6: Думайте о нескольких экранах одновременно.

Некоторые принципы UX

Aesthetic Usability Effect

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

Choice Overload

  1. В большинстве случаев большой выбор не всегда приводит к лучшим результатам.
  2. По мере увеличения возможностей сложность увеличивается пропорционально.
  3. Удобство использования и производительность идут на спад.
  4. Больший выбор приводит к увеличению усилий и времени принятия решений.
  5. Меньше, но лучше

Consistency (согласованность)

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

Goal-gradient Effect

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

Ikea Effect

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

Jakob’s Law

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

KISS

  1. Keep It Simple Stupid
  2. простой дизайн работает лучше всего
  3. простые проекты, как правило, быстрее и дешевле создавать и внедрять.
  4. Они более надёжны и просты в обслуживании.

Recognition Over Recall

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

Social Proof

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

Шаблоны интерфейсов

  1. Дизайн системы http://designsystemsclub.ru
  2. UI Kit: https://materialdesignkit.com/templates/