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

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

UX/UI

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

UX/UI

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

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

  1. Психология пользователя — это всё то, что происходит в его голове при взаимодействии с вашим дизайном.
  2. И незадолго до этого.
  3. И чуть позже тоже.
  4. 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: Думайте о нескольких экранах одновременно.

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

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