Представьте себе, что вы дизайнер и разрабатываете интерфейс какого-нибудь интернет-приложения. Чем вам может помочь наука психология? Конечно, своими исследованиями, посвященными проблеме человеческого внимания и его роли в процессе восприятия информации. Можно ли заниматься веб-дизайном, ничего не зная об этих исследованиях? Можно, но скорее всего, получится ерунда.
Поэтому лучше все же ознакомиться с тем, как устроено восприятие нашего мозга.
Восприятие человека целостно и неразделимо. В основном оно ограничено физиологическими характеристиками, однако психологи в качестве отдельного ограничивающего фактора выделяют также особенности внимания. Именно внимание выделяет из окружающей среды какую-то ее часть, которая и подергается дальнейшей переработке мозгом.
Это выделение не произвольно — оно задается значимыми для воспринимающей личности стимулами. Человек просто не может одновременно иметь дело с несколькими объектами внимания, сохраняя при этом заданный уровень эффективности. Это значит, что человеческое внимание ограничено, поэтому создателям интерфейсов необходимо руководствоваться некоторыми основными правилами психологии восприятия информации.
Как сделать удобный интерфейс программы. Главный принцип юзабилити #ux #ui #usability #design
Usability и UX
Для начало посмотрим на общие стандартные принципы проектирования интерфейса. Немаловажным фактором в разработке веб-дизайна является учет исследований психологии восприятия информации. Частично это осуществляется с помощью методов Usability (юзабилити) и User Experience, или UX (пользовательский опыт).
Нам понадобится выявить наиболее характерные черты UX и их содержательную составляющую. Но сперва необходимо разделить понятия Usability и User Experience и соотнести полученную информацию с данными о психологии восприятия гипертекста.
Юзабилити чаще всего используется для повышения привычности и удобства использования интерфейса, увеличения скорости выполнения задачи и т.д. Другими словами, метод юзабилити исходит из вопроса: «Насколько легко пользователь решает задачу?» А его главная цель — удержать клиента на сайте или в приложении.
Цель второго метода, UX, шире простой функциональности. Он охватывает такие аспекты, как удобство восприятия, вовлеченность клиента, интересность использования. При создании интерфейсов UX-специалисты используют подход аффективного проектирования [Hassenzahl M., Tractinsky N.] — это означает, что они создают дизайны не для пользователей, а для людей, испытывающих эмоции.
Такие продукты, как игры или социальные сети, направлены на то, чтобы вызвать у пользователя определенную эмоцию, доставить ему удовольствие [Saariluoma P., Jokinen J.]. В этом случае одного удобства интерфейса уже недостаточно, он должен обладать определенной эстетической ценностью. Метод UХ стремится вызвать у пользователя положительные эмоции. Именно поэтому для наилучшего понимания визуальных предпочтений субъекта и необходимо использовать исследовательские данные психологии восприятия.
Для наглядности сравним два этих метода на примере выбора маршрута: чем отличаются движение по бетонной магистрали (юзабилити) и езда по горной извилистой дороге (пользовательский опыт, UX)? Добираясь до пункта назначения по магистрали, вы, не прикладывая никаких дополнительных усилий, едете по прямой дороге на максимально установленной скорости. Юзабилити добивается того же эффекта — направить пользователя к конечной цели наиболее легким и удобным маршрутом. А вот горная дорога извилиста, и на ее преодоление уйдет больше времени, но зато ехать по ней намного интереснее и приятнее благодаря пейзажам и горному воздуху. Концепция пользовательского опыта учитывает именно те факторы, которые способны доставить удовольствие.
Как делают хороший UI в играх (а как плохой) — дизайн интерфейса в RPG, MMO, экшнах и платформерах
Эмоциональный интерфейс
Разобравшись с тем, чем пользовательский опыт отличается от юзабилити, вернемся к психологии и обратимся к базовым принципам восприятия информации, сопровождающим создание аффективно воздействующего интерфейса.
Опираясь на результаты эксперимента Томаса Саноки и Ноя Сульмана, посвященного выявлению связей между сочетаемостью цветов и способностью людей запомнить только что увиденное [Sanocki T., Sulman N.], можно сделать несколько полезных выводов для создания идеального сайта:
- старайтесь использовать не более трех цветов;
- создавайте контраст между фоном и воспринимаемой информацией;
- используйте гармоничные сочетания оттенков.
Все эти положения исходят из психологии восприятия цвета, насыщенности, формы, объема и т. д. Цвет влияет на подсознание человека, вызывая определенные ассоциации и эмоции. Известный швейцарский психолог Макс Люшер занимался исследованием эмоционального воздействия цвета на человека.
Он выявил, что предпочтение тех или иных цветов отражает направленность испытуемого, его настроение и сложившиеся черты личности. В результате Люшер разработал цветовой тест, который является одним из основных инструментов для оценки состояния человека. Исследования по восприятию формы показывают, что закругленные, плавные линии ассоциируются с безопасностью, а острые углы и ломаные линии воспринимаются как проявление агрессии и вызывают тревожные состояния. Знание особенностей человеческого восприятия поможет дизайнеру создать продукт, который будет вызывать положительные эмоции.
Еще одним средством визуального представления текстовой информации является типографика. Экспериментальные исследования [Larson K., Picard R.] позволили выявить, что необходимо наполнять интерфейс привычным и понятным для глаз шрифтом, учитывать совместимость различных его видов друг с другом, а также соблюдать необходимое пространство между абзацами.
Удобный интерфейс
Для упрощения восприятия информации пользователя, то есть для обеспечения функциональной стороны интерфейса (его юзабилити, как мы помним), следует обратиться к выводам следующих психологических экспериментов.
Исходя из теории Ричарда Грегори, наше визуальное восприятие информации основывается на том, что мы делаем некие предположения об увиденном на основе предыдущего опыта, наших знаний о предмете [Gregory R.]. Таким образом, для создания рабочих интерфейсов нам поможет следующее:
- сопровождение данных подходящим дизайном;
- «говорящий» заголовок для создания ключевых ожиданий пользователя;
- сопровождение визуальной информации содержательным текстом.
Нельзя забывать и об эффекте бинокулярного соперничества [Tong, F.], из-за которого мы не способны воспринимать комбинацию различных картинок одновременно. Добавим к этому результаты исследования восприятия сути целостного образа картины в зависимости от цвета [Sanocki T., Sulman N.] и таким образом получим следующие рекомендации:
- не перегружайте интерфейс второстепенной информацией и располагайте контент в правильной последовательности;
- используйте тематические, подходящие иконки для сопровождения текста;
- выделяйте важную информацию среди текста.
Таким образом, юзабилити определяет функциональную сторону взаимодействия в паре человек-технология, а исследования UX нацелены на анализ пользовательской стороны этого взаимодействия, создают установки на конкретную эмоцию у пользователя.
Виктория Баскакова
Анастасия Маринчева
Источник: nplus1.ru
Как создать удобный пользовательский интерфейс для классических приложений
Это руководство по проектированию было создано для Windows 7 и не обновлялось для более новых версий Windows. Большая часть руководства по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.
Отличное классическое приложение является мощным и в то же время простым. Благодаря тщательно сбалансированному выбору и представлению функций можно достичь как мощности, так и простоты.
Мощный:
Мощный и простой:
Идеальное приложение на основе Windows является мощным и простым. Конечно, вы хотите, чтобы ваше приложение было мощным и, конечно, вы хотите, чтобы оно было простым, но можете ли вы достичь и того, и другого? Между этими целями существует естественная напряженность, но эта напряженность далеко не непримирима. Вы можете достичь как мощности, так и простоты благодаря тщательно сбалансированному выбору функций и представлению.
Что делает приложение мощным?
Что на самом деле означает «власть» с точки зрения программного обеспечения? Приложение может считаться мощным, если оно содержит множество функций, обладая огромным набором функциональных возможностей в попытке быть всем для всех пользователей. Такая разработка вряд ли будет успешной, так как нецелевой набор функций вряд ли удовлетворит потребности кого-либо. Это не тот тип власти, за которыми мы работаем.
Приложение обладает мощными возможностями, если оно имеет правильное сочетание следующих характеристик:
- Включение. Приложение удовлетворяет потребностям своих целевых пользователей, позволяя им выполнять задачи, которые они не могли бы выполнить иначе, и эффективно достигать своих целей.
- Эффективная. Приложение позволяет пользователям выполнять задачи с таким уровнем производительности и масштабом, который был невозможен ранее.
- Универсальный. Приложение позволяет пользователям эффективно выполнять широкий спектр задач в различных обстоятельствах.
- Прямой. Приложение чувствует, что оно напрямую помогает пользователям достичь своих целей, а не путается или требует ненужных действий. Такие функции, как сочетания клавиш, доступ к клавиатуре и макросы, улучшают чувство прямоты.
- Гибкость. Приложение обеспечивает пользователям полный, детальный контроль над своей работой.
- Интегрируемость. Приложение хорошо интегрировано с Microsoft Windows, что позволяет ему обмениваться данными с другими приложениями.
- Расширенный Приложение обладает необычными, инновационными, новейшими функциями, которые не встречаются в конкурирующих решениях.
Некоторые из этих характеристик зависят от восприятия пользователя и зависят от текущих возможностей пользователя. То, что считается мощным, может измениться со временем, поэтому сегодняшняя функция расширенного поиска может стать обычным явлением завтра.
Все эти характеристики можно объединить в наше определение власти:
Приложение является мощным, когда оно позволяет целевым пользователям эффективно реализовать свой потенциал.
Таким образом, конечной мерой мощности является производительность, а не количество признаков.
Разные пользователи нуждаются в помощи в достижении полного потенциала по-разному. То, что позволяет некоторым пользователям, может повредить универсальность, прямоту и контроль для других. Хорошо спроектированное программное обеспечение должно соответствующим образом уравновесить эти характеристики.
Например, классическая система публикации, предназначенная для непрофессиональных пользователей, может использовать мастеры для выполнения сложных задач. Такие мастеры позволяют целевым пользователям выполнять задачи, которые они в противном случае не смогли бы выполнить. В отличие от этого, классическая система публикации для профессионалов может сосредоточиться на прямолинейности, эффективности и полном контроле. Для пользователей такого приложения мастера могут быть ограничивающими и раздражающими.
Если вы делаете только одно.
Изучите цели целевых пользователей и создайте набор функций, который позволит им эффективно достичь этих целей.
Что упрощает взаимодействие с пользователем?
Удобный интерфейс: 5 правил юзабилити
Всем привет! За пять лет работы в мобильной разработке мы сделали 40 проектов. Кроме написания собственно кода, мы также разрабатываем дизайн приложений, а точнее UX-дизайн. А это, честно говоря, похоже на магию. В хорошем приложении дизайн должен работать на руку владельца ресурса. Он должен быть не только привлекательным для глаза, но и способствовать целевым действиям.
Об это все знают, уже сто раз об этом говорено. Однако часто креатив побеждает холодный рассудок. В этой статье мы выделили 5 основных правил, которые помогут создать добротный фундамент для интерфейса приложения. Итак. Вот наши правила:
1. Думайте как пользователь
На начальном этапе важно понять, кто ваш пользователь (точнее, для кого вы делаете приложение), и какие задачи он будет с помощью вашего приложения решать. Именно от задач и стоит отталкиваться при создании пользовательского интерфейса. Иными словами, выводить их на первый план. Если задача — оплата услуг, то во главе угла должна быть кнопка оплаты. Если вы помогаете пользователю контролировать какие-то процессы, то важны категории, графики, визуализация, удобный ввод данных.
В каждом проекте «главное» определяется индивидуально, но важно исходить из конкретных жизненных задач пользователя, который существует не только в вашей голове, но и где-то на этой планете
Дальше нужно записать эту задачу и повесить у всей команды на виду, чтобы никогда не забывать. Это курс вашего корабля. Отклонения от курса чреваты потерей ориентиров и, как следствие, нарушением концепции приложения.
2. Ничего лишнего
По последним исследованиям человек может без стресса воспринимать только 3-5 объектов сразу. Видели светофор? Очень удобная штука, которая помогает нам безопасно передвигаться по городу. А теперь представьте, что в светофоре не 3 цвета, а десять, каждый из которых что-то означает. Или представьте, что вы ведете автомобиль, и перед вами вырастает десять дорожных знаков.
Скорее всего, ваш мозг закипит. При создании интерфейса приложения это правило тоже действует, правда, с поправками. Нужно сокращать количество элементов до минимума пока это возможно, но не в ущерб задачам, которые решает пользователь.
3. Контекст использования тоже важен
Контекст — это условия, в которых пользователь будет обращаться к приложению. Мы поставили этот пункт на третье место, потому что про него часто забывают, а он может разрушить все ваши идеи насчет дизайна. Поэтому подумать об этом стоит очень заранее.
Этот пункт может разрушить все ваши идеи насчет дизайна
Хорошо, если приложение будут использовать в спокойной домашней обстановке на большом экране. Тогда у вас нет преград. Но если это приложение для заказа такси, то часто его будут использовать на улице, в темноте или на ходу, а значит стоит подумать о минимизации действий, о цвете и размере кнопок, о таком расположении кнопок, чтобы можно было жать на них на ходу. Или приложение с кнопкой «SOS». Логично, что у пользователя не будет столько времени, сколько есть у человека, который вечерком решил повыбирать книжку в интернет-магазине.
4. Все взаимосвязанные элементы логически соединены
У большинства людей холодильник стоит на кухне. И это правильно, там ему самое место. Почему? Потому что в холодильнике хранится еда, а еду мы готовим на кухне. Это суперюзабильное решение всех времен и народов.
И этот опыт, накопленный веками, важно переносить в цифровое пространство, ведь там мы так же живем и ходим, пытаясь решить все те же задачи. Например, логично в приложении по оплате неких услуг рядом со счетом располагать кнопку оплаты. И нелогично заставлять пользователя сначала смотреть счет, а затем искать способ оплаты. Логично на моменте оплаты предлагать пользователю выбирать способ, и нелогично прятать возможность выбора в настройки, тем самым заставляя пользователя возвращаться в меню.
5. Иерархия по важности
Если элементов больше, чем один, и один из них главнее других, то разместить его лучше в левом верхнем углу. Именно там наш взгляд ищет то, с чего следует начать посещение ресурса. Привычка идет из детства — именно так нас приучили читать, ничего не поделаешь. Дизайнеры и разработчики могут креативить, но мозг среднестатистического пользователя не откажется от привычки.
И если действительность не совпадает с привычным представлением о ней — мозг взрывается. Однако не стоит путать «важное» с «главным». Важное, это то, к чему пользователь обращается, чтобы начать решать задачу — к примеру, меню. Наименее важное располагается в противоположном углу.
Таким образом, степень важности элементов нисходит с верхнего левого угла к нижнему правому.
Это не единственный способ выделить важное. В каждом проекте мы разрабатываем индивидуальный UX-дизайн. Однако необходимо помнить, что важное все-таки выделять стоит, чтобы помочь пользователю решить задачу быстро. И не взорвать ему мозг.
Резюмируем:
- В приложении должна быть цель — та задача, которую решает пользователь
- Нельзя отвлекать внимание от цели лишними элементами
- Элементы располагаются так, чтобы ими было удобно пользоваться в обычном для приложения контексте
- Связанные по смыслу элементы располагаются рядом друг с другом
- Элементы имеют иерархию по важности и располагаются согласно этой иерархии
Следуя этим правилам, можно создать логичную архитектуру и понятный дизайн приложения.
Источник: spark.ru