Многие из нас уже интуитивно понимают, какой интерфейс будет удобным и приятным для пользователей, а какой нет. Однако вкус у всех разный, поэтому и мнение тоже. Например, я утверждаю, что сайт для продажи камазов нужно сделать розовым, потому что мне нравится розовый цвет, а мой коллега голосует за синий, потому что ему нравится синий. Пример довольно примитивный, но демонстрирует, что при создании продукта нам нужно оперировать общими принципами, чтобы оценивать юзабилити интерфейса и понимать, что удобно и приятно для пользователей, а что вызывает раздражение и почему. Чтобы создать хороший интерфейс, нужно быть немного психологом, дизайнером, маркетологом, копирайтером и главное, простым пользователем. Эти направления дают ответы на вопросы: как пользователи думают, как принимают решения, что им нравится и как привлечь их внимание.
Мое знакомство с термином юзабилити было в 2016 году в университете.
Курс по проектированию пользовательских интерфейсов был одним из тех предметов, которые пригодились в жизни.
За полгода мы напроектировали много примеров интерфейсов, попутно улучшая дизайн своих проектов, а так же попробовали разные инструменты прототипирования. А потом пошли на продолжение курса по доброй воле, потому что останавливаться уже не хотелось.
В дальнейшем мне приходилось применять полученные навыки на работе, где-то ошибаться и даже принимать тот факт, что мои коллеги, которые не знают даже слова юзабилити, предлагают более лучшие интерфейсные решения, основываясь на своем понимании удобства и чувстве прекрасного, поэтому я слушаю не только пользователей, но и своих любимых идейных коллег. Также, к сожалению, пришлось понять, а далее и найти официальное подтверждение тому, что многие факты из того прекрасного курса по проектированию устарели очень давно, но это не самое главное. Здесь важно знать основы поведения пользователей. А исследования, подтверждающие те или иные особенности поведения пользователей, всегда будут обновляться, так как люди меняются, меняются поколения. Чтобы лучше понимать психологию пользователей и их восприятие, рекомендую хотя бы немного изучить, какие поколения выделяют исследователи в современном мире.
Предыстория закончилась.
Применяемое сокращение UI - user interface (пользовательский интерфейс)
В данной статье речь больше будет о сайтах, хотя общие принципы юзабилити схожи для любого инструмента. К мобильным приложениям я вернусь немного позже и так же подготовлю отдельную статью.
Здесь, возможно, будет немного копипаста, но я буду указывать источники, если кого-то забыла, извините, данный материал не предназначен для коммерческого использования.
1. Аудитория
При создании приложения наша основная цель - сделать инструмент для людей, поэтому нам нужно четко понимать, кто наши пользователи. Начну с простых, возможно, кому-то неизвестных общих фактов о пользователях, которые всегда нужно держать в голове:
- Пользователи ленивые (они не хотят читать большие тексты, не хотят переводить с английского языка ваш сайт, если плохо его знают и нет мотивации, они не хотят запоминать 5 каких-то ненужных цифр, в идеале они хотят, чтобы система прочитала их мысли и сама решила все задачи)
- Пользователи глупые (они сами не догадаются, что нужно сделать, им нужно подсказать). Здесь имеется в виду большая часть обычных пользователей. Однако, встречаются довольно умные и нечестные пользователи, поэтому когда речь идет о безопасности ПО - думайте, что ваши пользователи очень способные
- У пользователей нет времени (если ваш сайт грузится долго - пользователь откроет следующий, если за пару секунд ваш сайт не понравился - он откроет следующий)
- Пользователи уходят к конкурентам (если ваше приложение будет непонятным или раздражать пользователя, он также обрадуется более удобной альтернативе без угрызений совести)
Таким образом, относится к пользователям нужно как котятам: искренне любить, не напрягать, не доверять, не тянуть за хвост и смотреть, чтобы соседи не увели.
Далее стоит учитывать, как ведут себя именно ваши пользователи. Вы должны знать, чего они хотят, что умеют, учитывать их уровень владения компьютером, вы должны стараться помочь им выполнить свои задачи с помощью вашего продукта.
Поэтому для начала нужно составить полный портрет своих пользователей: их возраст, пол, привычки, умения, профессиональные навыки, национальность и т д. Какие-то из этих характеристик будут иметь важное значение при проектировании интерфейса приложения.
2. Критерии качества пользовательского интерфейса
Для того, чтобы в целом оценить насколько ваш UI удобен для пользователя, были выделены критерии качества пользовательского интерфейса:
- скорость работы пользователей
- количество ошибок пользователей
- скорость обучения
- субъективное удовлетворение пользователей.
2.1. Скорость выполнения работы
Скорость выполнения работы является важным критерием эффективности интерфейса. Любое увеличение производительности труда всегда плюс.
Длительность выполнения работы пользователем состоит из следующих составных частей:
- длительность восприятия исходной информации (насколько быстро пользователь собрал информацию)
- длительность интеллектуальной работы насколько быстро пользователь понял, что нужно сделать дальше)
- длительность физических действий пользователя (как быстро пользователь совершил требуемые действия)
- длительность реакции системы (как быстро система возвращает пользователю результат)
2.1.1 Длительность восприятия исходной информации
Здесь все время уходит на считывание показателей системы.
Чтобы уменьшить это время информация должна быть представлена в самом понятном и удобной виде. Вот основные положения, которые стоит соблюдать:
- текста должно быть как можно меньше, никаких лишних слов (пользователи не любят читать и у них мало времени). Это целая наука. Научиться писать кратко и привлекательно мне помогли книги У. Зинсер "Как писать хорошо" и Дж. Шугерман "Искусство создания рекламных посланий"
- текст должен быть максимально понятным (не стоит использовать заумные фразы, непонятный жаргон, непопулярные сокращения и профессиональные термины (иногда можно, если вам нужно поразить пользователей наличием профессиональных компетенций)
- понятные иконки (еще их называют метафоры), навигация, кнопки, значки - желательно использовать популярные и привычные для пользователей интерфейсные элементы. Например, иконка корзина - все привыкли, что это переход в корзину или удаление. Если вы применяете новую иконку, то лучше сделайте к ней подсказку или подпись, чтобы пользователи постепенно обучились ее назначению.
- создавайте такой интерфейс, чтобы пользователю не приходилось пользоваться подсказками или вызывать справку по работе с приложением. Хотя использовать подсказки тоже хорошо, многие пользователи наводят на элементы, в поисках дополнительной информации, но не стоит сильно надеяться на это.
*Шрифт
Отдельно стоит обсудить тему шрифта. Некоторое время считалось, что шрифт без засечек читается быстрее.
Например, на устройствах Apple некоторое время использовался шрифт Helvetica Neue, далее его сменили на шрифт San Francisco. Основанный на рисунках группы шрифтов DIN, San Francisco проще читается с маленьких телефонных экранов за счёт более грамотного использования пространства.
Однако некоторые последние исследования показали, что нет разницы в удобочитаемости шрифтов с засечками и без. Но пользователи уже привыкли к сайтам со шрифтами без засечек и будет странно если у вас появятся засечки, это будет выглядеть очень старомодно.
Но однозначно известно, что неудобен курсив и различные варианты витиеватых и необычных шрифтов.
Есть исследования, описывающие две ситуации: людям дают текст физического упражнения, напечатанный обычным шрифтом, и они оценивают время выполнения на 8 минут; и также дают то же упражнение, напечатанное витиеватым шрифтом, и люди оцениваю его более сложным – на 15 минут. То есть более сложный шрифт делает информацию в нем более сложной и пользователю сложнее следовать этой информации.
Выбирая шрифт, нужно учесть, как он будет показываться на различных устройствах, как будет выглядеть каждая цифра, буква, как будут сочетаться буквы. Например, в шрифтах без засечек легко можно спутать латинскую большую букву I и маленькую букву l. В некоторых шрифтах стоящие рядом буквы могут искажаться при чтении.
Но можно экспериментировать. Один из трендов в дизайне на 2019 год - использование комбинации шрифта с засечками и без.
Как легче читать текст? Когда он написан только заглавными буквами или когда первая буква заглавная, а остальные прописные? Конечно лучше второй вариант, но лишь потому что пользователи привыкли к такой модели. Но если потренироваться, то мы сможем одинаково быстро и легко читать в обоих случаях, но у пользователей нет времени на тренировку, поэтому лучше использовать второй вариант, а написание только заглавными буквами можно использовать для привлечения внимания, так как такой вариант воспринимается пользователем как кричащий.
Основные выводы по теме шрифта:
- Не существует разницы в удобочитаемости между шрифтами с засечками и без (но без засечек привычнее)
- Не используйте курсив
- Не используйте витиеватые шрифты
- Желательно не более 2-3 вариантов шрифтов
- Используйте достаточно большой шрифт (удобный для чтения без увеличения масштаба)
- Написание ЗАГЛАВНЫМИ БУКВАМИ используйте только для привлечения внимания
- Продумайте, как будет выглядеть ваш шрифт в различных ситуациях
*Абзацы и строки
Огромные полотна текста без переносов воспринимаются как серьезное чтиво. Делите большой текст на абзацы - так это выглядит гораздо легче.
Выводы из интересных исследований Мэри Дайсон на тему строк:
- Пользователи больше хотят читать короткие строки (от 45 до 72 символов)
- Но быстрее читают длинные строки (100 символов в строке)
Из этого можно сделать вывод: если вы хотите, чтобы текст читался быстрее – сделайте колонки подлиннее, а если хотите, чтобы его хотели читать, сделайте колонки покороче.
*Иконки
Здесь вспоминается графическая загадка про мексиканца на велосипеде.
Чтобы не было ситуаций, когда пользователь не может понять, что нарисовано на иконке - предмет стоит изображать в канонической перспективе.
Проводились исследования, в которых выяснилось, что люди лучше распознают объекты, изображенные в виде сверху под углом.
2.1.2 Длительность интеллектуальной работы
Длительность интеллектуальной работы оценивается тем, что взаимодействие пользователя с системой (не только компьютерной) состоит из семи шагов:
1. Формирование цели действий
2. Определение направленности действий
3. Определение конкретных действий
4. Выполнение действий
5. Восприятие нового состояния системы
6. Интерпретация состояния системы
7. Оценка результата
Из этого списка становится видно, что процесс размышления занимает почти все время, в течение которого пользователь работает с компьютером, во всяком случае, шесть из семи этапов полностью заняты умственной деятельностью. Соответственно, повышение скорости этих размышлений приводит к существенному улучшению скорости работы.
Таким образом, появляется задача - повысить скорость мышления пользователей - чтобы они додумывались до того, что нужно, как можно быстрее.
Есть несколько способов как это сделать:
- Сделать концепт, соответствующий ментальной модели пользователя
Ментальная модель - это наши собственные предположения о каком-то явлении и предмете.
Концептуальная модель - это действующая модель, которая используется в пользовательском интерфейсе.
Иными словами говоря, пользователь должен на основании своего жизненного опыта догадаться, что нужно сделать. Если его ментальная модель - совпала с вашей концептуальной - отлично, вы победили. Хороший пример соответствия этих моделей - перемещение документа в корзину.
- Давать информацию о контексте
Пользователи постоянно отвлекаются. Таким образом, необходимо максимально облегчить их возвращение к работе и проектировать интерфейс так, чтобы пользователи как можно меньше о нем думали.
Итак, для продолжения работы пользователь должен знать:
- на каком шаге он остановился;
- какие команды и параметры он уже дал системе;
- что именно он должен сделать на текущем шаге;
- куда было обращено его внимание на момент отвлечения.
Предоставлять пользователю всю эту информацию лучше всего визуально.
Способы: показать на каком шаге находится пользователь, на какой странице, показать, какие поля уже заполнены, какие еще нужно заполнить, сохранить фокус на нужном поле.
- Уменьшить количество моментов, в которых нужно выбирать
Здесь стоит упомянуть известный закон Хика: для принятия того или иного решения требуется время; для принятия сложных решений требуется больше времени, чем для принятия простых решений.
Таким образом, можно сделать вывод: чем меньше элементов в меню, тем меньше занимает выбор одного их них.
Долгое время считалось, что оптимальное количество элементов меню - 7 элементов, но позже было выявлено, что пользователи держат в уме не более 4 вариантов. Я считаю, что это зависит от поколений, со временем запоминать нужно все меньше и навык запоминания теряется. Мне уже и 4 цифры запомнить сложно.
По последним исследованиям пока считаем, что оптимальное количество элементов меню - 4.
Но в плане каталога вопрос очень спорный. В некоторых интернет-магазинах, например, достаточно сложно найти определенную категорию товаров через дерево каталога, потому что ее положили в неочевидную для пользователя категорию/подкатегорию.
Главное помните, принятие решения - один из самых энергозатратных процессов для человека, поэтому чем меньше вариантов для выбора, тем пользователю проще.
- Дайте пользователю возможность не думать
Между думать и кликать пользователи выбирают кликать. Например, если напротив товара будет написано 45 % скидка - дайте пользователю возможность получить этот расчет, пользователи не хотят рассчитывать сумму со скидкой в уме.
2.1.3 Длительность физических действий
Длительность физических действий пользователя прежде всего зависит от степени автоматизации работы и степени необходимой точности работы. Об автоматизации что-либо конкретное сказать сложно. Понятно, что чем больше работы делает компьютер, тем лучше. Непонятно только как это можно универсально описать, поскольку степень автоматизации очень сильно зависит от автоматизируемого процесса. С точностью все гораздо проще.
Любое физическое действие, совершаемое с помощью мускулатуры, может быть или точным, или быстрым. Вместе точность и быстрота встречаются исключительно редко, поскольку для этого нужно выработать существенную степень автоматизма. Объясняется это сугубо физиологическими факторами: при резком движении невозможно быстро остановиться, соответственно, точное движение должно быть плавным и замедленным. Таким образом, чтобы физическое действие пользователя было быстрым, оно не должно быть точным. Пользователь, как правило, управляет компьютером двумя способами, а именно мышью и клавиатурой. Клавиатура не требует особой точности движений – неважно, быстро нажали клавишу или медленно, равно как сильно или слабо. Мышь, напротив, инерционна – есть разница между медленным её перемещением и быстрым, сильным приложенным усилием и слабым. Именно поэтому оптимизация использования мыши в системе может существенно повысить общую скорость работы.
Еще в 1954 году Поль Фитс (Paul Fitts) сформулировал правило, в наиболее практичной формулировке ставшее известным как Закон Фитса.
В результате эксперимента ученый выявил интересную закономерность: чем больше расстояние и чем меньше размер цели — тем больше времени требуется для ее достижения.
С момента открытия этого закона прошло более 60 лет, но сейчас он активно применяется при проектировании и дизайне интерфейсов.
При проектировании интерфейса, руководствуясь законом Фитса, можно определить оптимальные размеры и взаимное расположение кнопок, ссылок и других элементов страницы
Существует интересный прием, который называется бесконечные кнопки.
Так как экран ограничен по размерам, элементы интерфейса, которые находятся на границах имеют условно бесконечный размер, потому что при попытке попасть в такие элементы курсором он просто упрется в край экрана и нам не нужно дополнительное время, чтобы попасть в элемент по ширине
Кнопка "Пуск" в Windows расположена в левом углу экрана - это бесконечная кнопка, в нее легко попасть, так как слева и снизу она ограничена только экраном.
2.1.4 Длительность реакции системы
Пользователи не любят ждать, поэтому система должна реагировать на их запросы как можно быстрее. Если нужно подождать, покажите пользователю, как долго осталось (чтобы пользователь, зная, что установка ПО займет 15 минут, может пойти попить чай), а также развлеките его - займите чем-то другим (пример, простенькая игра, меняющиеся картинки с историями, комиксы).
Важно: перед запуском длительного процесса задайте все вопросы до начала отсчета. Будет странно, если пользователь отправил 300 страниц текста на печать, пошел пить чай, а через 5 секунд появилось сообщение: “Подумайте о деревьях, вы действительно хотите напечатать это?” Пользователь пришел на место, а там вместо 300 страниц этот вопрос.
*Количественный анализ скорости работы пользователей
Количественные методы помогают свести спорные вопросы в оценке качества интерфейса к простым вычислениям.
Одним из лучших подходов к количественному анализу моделей интерфейсов является классическая модель GOMS (the model of goals, objects, methods and selection rules) - модель целей, объектов, методов и выбор правил.
Эта модель основана на оценке скорости печати. Время, требуемое для выполнения какой-то задачи системой пользователь-компьютер, является суммой всех временных интервалов, которые потребовались системе на выполнение элементарных жестов, составляющих данную задачу.
Лабораторным путем установлены стандартные средние интервалы для некоторых жестов, выполняемых различными пользователями:
K = 0.2 c - время, необходимое для нажатия клавиши клавиатуры
P = 1.1 с - время, необходимое для перемещения указателя мыши к определенной позиции на мониторе
H = 0.4 - время, необходимое для перемещения руки пользователя с клавиатуры на мышь
M = 1.35 - ментальная пауза, т.е. время, необходимое пользователю на обдумывание следующего шага
R – ответ (время ожидания ответа компьютера).
Конечно, временные показатели различных жестов могут сильно отличаться, ведь все люди разные. Но с помощью этих временных значений мы можем сравнивать интерфейсы между собой по скорости работы.
Из этого можно подтвердить вышесказанное: мыслительная деятельность занимает больше всего времени.
Как можно применять этот подход? Можно количественно сравнивать два вариант пользовательского поведения. Например, у вас есть вариант № 1 последовательности поведения пользователя для входа в личный кабинет:
1. Ввести логин из 5 символов (Р + Н + К*5)
2. Ввести пароль из 5 символов (Р + Н + К*5)
3. Нажать "Войти" (P + R)
Итого затраченное время: 1,1 + 0,4 + 0,2*5 + 1,1 + 0,4 + 0,2*5 + 1,1 + ~1 = 7,1 с.
также есть вариант № 2:
1. Ввести логин из 5 символов (Р + Н + К*5)
2. Нажать tab для перехода на следующее поле ввода (К)
3. Ввести пароль из 5 символов (К*5)
4. Нажать "Войти" (P + R)
Итого затраченное время: 1,1 + 0,4 + 0,2*5 + 0,2 + 0,2*5 + 1,1 + ~1 = 5,8 с.
Таким образом, с помощью интерфейса, который используется в варианте №2, задача входа в личным кабинет выполняется гораздо быстрее.
2.2 Количество человеческих ошибок
Под термином «человеческая ошибка» нужно понимать действие пользователя, не совпадающее с целью действий этого пользователя.
Лучший пользовательский интерфейс тот, в котором количество человеческих ошибок минимально.
Выделяют 4 основных типа таких ошибок:
- ошибки, вызванные не знанием предметной области; эти ошибки лечатся обучением и справочной документацией
- опечатки; возникают, когда не все внимание уделяется выполнению текущего действия или когда в мысленный план выполняемого действия вклинивается фрагмент плана из другого действия (происходит преимущественно в случаях, когда пользователь имеет обдуманное текущее действие и уже обдумывает следующее действие)
- ошибки, вызванные не считыванием показаний системы; одинаково охотно производят как опытные, так и неопытные пользователи. Первые не считывают показаний системы потому, что у них уже сложилось мнение о текущем состоянии, и они считают излишним его проверять, вторые – потому что они либо забывают считывать показания, либо не знают, что это нужно делать и как
- моторные ошибки; сущностью этих ошибок являются ситуации, когда пользователь знает, что он должен сделать, знает, как этого добиться, но не может выполнить действие нормально из-за того, что физические действия, которые нужно выполнить, выполнить трудно.
Выводы:
- помогайте пользователям обучаться
- повышайте разборчивость и заметность индикаторов
- давайте возможность отменить действия
- не делайте опасные кнопки кнопками по умолчанию
- блокируйте потенциально опасные действия до получения подтверждения правильности действия
- лучше сделать так, чтобы система проверяла все действия пользователя перед их принятием
*Каким должно быть сообщение об ошибке?
Когда пользователь видит, что появилось ошибка, он чувствует себя дураком, или сильно раздражается, что система не понимает его и не дает совершить действие.
Идеальное сообщение об ошибке должно отвечать всего на три вопроса:
- В чем заключается проблема?
- Как исправить эту проблему сейчас?
- Как сделать так, чтобы проблема не повторилась?
Помните, что сообщение об ошибке должно быть выражено как можно более вежливым и понятным способом.
2.3 Скорость обучения
Для бизнеса важно, чтобы пользователь из целевой аудитории мог быстро обучиться работе в системе и осваивать новый функционал вне зависимости от уровня владения ПК. Однако целенаправленное обучение пользователей работе с системой производится очень редко.
Как же тогда обучить пользователей работе с приложением?
Лучший способ - сделать так, чтобы они сами захотели обучиться.
Существует непреложный закон природы: люди делают что-либо только при наличии мотивации, при этом тяжесть действия пропорциональна силе стимула.
Наличие стимула к обучению наблюдается, например, для тех пользователей, которые вынуждены использовать ПО на работе. В таком случае, система может быть очень неудобной и непонятной, но другого выбора нет, поэтому они будут стараться.
В тех случаях, когда есть приложения конкуренты, нужно прилагать усилия для того, чтобы помочь пользователям обучаться: делать систему понятной и создавать обучающие материалы.
С обучающими материалами все достаточно ясно - придумайте лучшую форму изложения новой информации, чтобы пользователи быстро и легко освоили ваш инструмент: можно добавлять справки, подсказки, гайды, видео уроки, обучение в игровой форме и др.
А вот как сделать систему понятной? Термин «понятность» включает в себя 4 составляющих, а именно ментальную модель, метафору, аффорданс и стандарт
Ментальная модель. Зачастую или, точнее, почти всегда, чтобы успешно пользоваться какой-либо системой, человеку необходимо однозначно понимать, как система работает. При этом необязательно точно понимать сущность происходящих в системе процессов, более того, необязательно правильно их понимать. Это понимание сущности системы называется ментальной моделью. Иначе говоря, пользователи ожидают увидеть определённую последовательность действий в соответствии с их прошлым опытом и ожиданиями. Ментальные модели никогда не дают абсолютно точное представление об объекте, зато они представляют сложные явления в упрощенном виде. Например, если вы представите новый функционал, используя модель бинарного дерева, в приложении для врачей, то они навряд ли поймут как этим пользоваться, потому что они не знают такой модели поведения.
Метафора. Чтобы научиться пользоваться системой, пользователю нужно построить ментальную модель этой системы. Избавить его и от этой работы можно применением метафоры, которая позволяет пользователю не создавать новую модель, а воспользоваться готовой моделью, которую он ранее построил по другому поводу. Пример про удаление объектов с помощью корзины был описан ранее.
Аффорданс. В современном значении этого термина аффордансом называется ситуация, при котором объект показывает субъекту способ своего использования своими неотъемлемыми свойствами. Например, надпись «На себя» на двери не является аффордансом, а облик двери, который подсказывает человеку, что она открывается на себя, несет в себе аффорданс. Примером аффорданса является кнопка в UI: она имеет такую форму и тени, что всем своим видом говорит "нажми на меня".
Польза аффорданса заключается в том, что он позволяет пользователям обходиться без какого-либо предварительного обучения, благодаря этому аффорданс является самым эффективным и надежным средством обеспечения понятности.
Стандарт. Это самый мощный, но зато и самый ненадежный способ обучения. Дело в том, что если что-либо нельзя сделать «самопроизвольно» понятным, всегда можно сделать это везде одинаково, чтобы пользователи обучались только один раз. Коротко говоря - это стандартные приемы во всех программах - отменить, удалить и прочее.
2.4 Субъективное удовлетворение пользователей
Все знают, что значительно легче и приятнее пользоваться эстетически привлекательными объектами. Это наблюдение породило весь промышленный дизайн, включая дизайн одежды, интерьеров и так далее.
Самое первое впечатление о чем-либо у человека формируется за 0,2 секунды.
Аккуратность. Человек сам того не подозревая замечает малейшие изъяны в интерфейсе. Асимметрия буквально в пару пикселей будет замечена пользователем и повлияет на общее впечатление о продукте, а человек просто скажет: "Не знаю, но что-то тут не так - следующий".
Неровности, поехавшая верстка и тому подобное не просто режут глаз. Неаккуратность еще и вызывает недоверие к продукту: пользователь думает, что если они неровно сделали кнопку, значит и в остальном могли допустить халатность, поэтому не стану доверять им деньги или личные данные.
Фотографии. Человеческий взгляд всегда привлекает внимание, поэтому с ним нужно быть осторожным. Во-первых, нужно продумать место для размещения фотографии таким образом, чтобы не увести внимание пользователей не туда. А также люди на фотографиях однозначно должны быть красивыми и приятными. Фотографии и прочий контент обязательно должны быть качественными, то есть для создания контента нужно использовать современные технологии (иначе пользователь может подумать, что ваши компетенции застряли в прошлом).
Модный дизайн. То же самое что с людьми - встречают по одежке. Если сайт красивый и удобный, но выглядит так, как будто его делали 10 лет назад - пользователь подумает, что здесь ему точно не предложат самый новый и самый лучший продукт.
Цвет. Большое значение для субъективного удовлетворения имеет цвет - об этом поговорим ниже.
Пропорции. И одним из самых важных моментов является пропорция. Аналогично, как с внешностью человека - если сделать лицо с красивыми губами, глазами, носом, кожей, но не соблюдать пропорции, получится не очень привлекательно для окружающих.
В сети можно найти использование правило золотого сечения, а также есть инструменты, которые накладывают сетку, для того чтобы визуально разбивать интерфейс на области. Но здесь можно действовать так же интуитивно.
Форма элементов. Избегайте острых режущих элементов, наши глаза любят природные формы - более скругленные. Однако не всегда, иногда использование квадратов делает дизайн более привлекательным.
Все спорные моменты, которые касаются вкуса. достаточно субъективны и угодить всем не получится, одна стоит соблюдать основные принципы:
- Используйте красивые качественные фотографии. Если на фотографии есть люди, пусть они будут красивыми.
- Используйте цветовую гамму, которая дает ожидаемую эмоцию - например, сайт по продаже тортов должен иметь аппетитную цветовую гамму, а не космическую
- Избегайте острых углов
- Делайте все аккуратно
- Делайте все пропорционально
3. Цвет
Для тех, кто различает цвета, цвет является важным моментом в пользовательских интерфейсах. Однако стоит помнить, что некоторая часть людей (8% мужчин и 0,4% женщин) не различает цветов, поэтому не стоит использовать только лишь цвет для обозначения чего-либо (например, для обозначения ошибок).
Часто говорят, что с определенным цветом у людей примерно одинаковые ассоциации. Однако на самом деле, у каждого человека свои ассоциации с каждым цветом. Например, кого-то в детстве сбил голубой автомобиль и теперь у него голубой цвет вызывает неприятные ассоциации.
Очень здорово, если вы умеете работать с цветом. Об этом есть отдельная наука - колористика. С помощью цветовых сочетаний можно произвести невероятное впечатление на наблюдателя.
Однако все-таки в силу того, что во множестве областей красный используется в случае опасности, а зеленый в случае успеха – лучше использовать такие цвета, так как это привычно для пользователя.
Также стоит учитывать, что в каждой культуре свои цветовые ассоциации. Например, на западе белый цвет считается продающим, имеет признак чистоты, а в Индии это цвет траура. Так же на западе голубой цвет ассоциируется с чем-то положительным, а на востоке может ассоциироваться даже с чем-то злым, когда красный у них наоборот цвет положительный.
Также следует помнить, что стоит ограничивать набор цветов, так как большое разнообразие может отвлекать пользователя от выполняемых задач.
Для меня цвет играет большое значение, даже симпатия к людям зависит от тех цветов, которыми представлен человек. Часто лишь на основе цвета одежды я принимаю решение о ее покупке, даже если вижу, что вещь на мне не сидит. Недавно я добавила в соцсеть опрос на фотографию в ярко синей куртке: купить или нет. Цвет шикарный, но видно, что мне вещь не подходит - рукава короткие и талии нет. Я готова была приобрести ее просто потому, что от этого цвета мне "радостно в душе". И большинство моих друзей и подписчиков также голосовали за покупку и присылали мне реакцию "огонь". Конечно, некоторые (буквально 3 человека) критично видели ситуацию и писали, что для меня нужен вариант по свободнее. Но получается: какая разница как на мне сидит вещь, если мне и большинству она нравится просто из-за цвета? Выходя на улицу в ярких красивых цветах, я замечаю, что на меня чаще смотрят люди. Вывод: яркий, красивый цвет может привлечь внимание. Но осторожнее, он также может и оттолкнуть.
При выборе цветовой гаммы интерфейса также стоит учитывать, что если приложение предназначено для одноразовых или редких покупок, то есть когда нужно привлечь внимание нового клиента - то цвета могут быть очень яркими и броскими. А если приложения предназначено для каждодневного использования, то яркие цвета будут раздражать пользователя, поэтому здесь в качестве основных цветов лучше выбирать базовые спокойные варианты.
4. Звук
Вспомните, как при появлении звука с одной из открытых вкладок браузера, мы спешно вычисляем ее и тут же закрываем, даже не разбираясь, что там было открыто. Поэтому не используйте запуск звука автоматически, это раздражает пользователя.
Использовать звук оправдано, например, для предотвращения потенциально опасных действий.
5. Модальные окна
Модальные окна:
- раздражают пользователей, так как все идет не по плану и нужно прочитать и что-то нажать, чтобы окно закрылось
- модальные окна с оповещениями просто требуют дополнительного действия (нажать закрыть), это отнимает время.
Используйте такие окна для защиты от опасных действий, то есть только тогда, когда от пользователя действительно что-то зависит, и когда от него требуется выбрать.
Вместо модальных окон с оповещениями, лучше использовать всплывающие сообщения, которые исчезают через определенное время. Обычно они располагаются где-то сбоку или внизу, чтобы не отвлекать пользователя от основной задачи.
6. Кнопки
Часто мы ждем от пользователей какого-то конкретного действия: совершить покупку, заказать звонок и так далее, поэтому нужно сделать способ его совершения понятным и легкодоступным.
До сих пор часто встречаются сайты, где кнопку "Купить" найти достаточно сложно. Не надо так.
Основные советы работы с кнопками:
- Действия называть в активном залоге (“Купить”, “Сохранить”), так как кнопки должны отражать действие, которое свершится
- Если пользователь после прочтения и обработки определенного блока информации должен щелкать на кнопках, то такие кнопки лучше разместить справа от блока информации или под этим блоком справа. Это соответствует присущей нашей культуре тенденции - читать слева направо
- Изменение при наведении - тень, рамка (кнопки должны выглядеть как кнопки в реальной жизни - вызывать желание нажать на нее)
- Кнопки целевого действия всегда должны быть на виду
Нет кнопкам с названием “ОК”, так как непонятно, что произойдет после того, как на нее нажать.
10. Не всегда все просто
Часто встречаются проекты, в которых юзабилити уделяется мало внимания. Иногда на это есть адекватные причины: например, в приоритете может быть стоимость разработки и возможность разделять продукт на версии. Таким образом, набор возможностей в каждой версии разный, но использовать это нужно как-то однообразно, поэтому большинство действий идет через контекстное меню, огромные списки пунктов в главном меню - все это в первое время наводит страх даже на опытных пользователей. Пользователи, конечно, потерпят, но когда-нибудь выберут более удобное ПО от конкурентов, которые рано или поздно появятся.
Поэтому всегда стоит работать над качеством интерфейса, это поднимает продукт на новый уровень.
11. План
Составим наш базовый план при проектировании UI:
1. Провести анализ целевой аудитории: нужно составить полный портрет наших будущих пользователей.
2. Продумать пользовательские сценарии (все запланированные сценарии на этом будет строится пользовательский опыт)
3. Продумать структуру интерфейса начиная приоритетных функций (проще создавать UI начиная с самых важных элементов, если начинать продумывать с мелочей, можно в итоге получить совсем не то, что действительно нужно пользователям)
4. Определиться со стилем (стиль должен соответствовать продукту)
5. Создать дизайн концепцию
6. Отрисовать все экраны
7. Приготовить тексты, фотографии и прочий контент
8. Проверить интерфейс на соответствие 4 критериям качества UI - если улучшать больше нечего, значит интерфейс (пока) качественный
9. Показать интерфейс пользователям и спросить, удобно ли им, что можно улучшить?
Улучшение интерфейса - процесс постоянный, основанный на информации о поведении пользователей и обратной связи о них.
Всем удачи! Любите пользователей, и они ответят взаимностью :)