9 августа прошла наша встреча на тему «Подружи пользователя со своим интерфейсом». Мы обсудили основные моменты, а также ваши примеры, их ошибки и особенности. Кратко расскажем вам в этой статье, о чем же мы говорили.

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

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

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

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

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

Сейчас уже не стоит ограничивать себя в количестве пунктов меню если их просто необходимо сделать больше 7 по смыслу. Не забывайте о здравом смысле. Разбивайте на более мелкие части контент, чтобы упростить восприятие. Тут же можно вспомнить о белом пространстве, иерархии за счет расположения и приближенности. Например, разбивка номера телефона +375 (29) 123-45-67.

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

Наше зрение воспринимает не отдельные линии, а готовые формы, поэтому следующие принципы можно назвать гештальт-принципами:

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

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

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

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

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

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

А также…
Readability — Сервис readability.io позволяет проверить, насколько читаемым и простым для понимания получился напечатанный или опубликованный текст. Текст оценивается по балльной шкале и ее пересчету на возраст аудитории, которой будет удобно его читать. Уровень читаемости показывает не то, насколько комфортно читается тот или иной текст, а то, насколько высоким должен быть уровень его потенциального читателя.

Лучше всего мы различаем красный, зеленый, желтый, синий, черный и белый цвета (работа колбочек). А вот очень похожи для нас (а для дальтоников вообще одно и то же, а их 8% мужчин и 0,5% женщин) темно-красный, темно-синий, темно-фиолетовый, темно-зеленый и черный. Также близки светло-зеленый с белым, фиолетовый с синим и синий с любыми оттенками синего. Лучше таких сочетаний избегать.

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

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

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


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


Ярко-красным не стоит увлекаться по другим-причинам — это должен быть только цвет ошибок и критичных сообщений (кровь, опасность, и как следствие, повышенное внимание). На разных мониторах и в случае ЖК, под разным углом цвета выглядят по-разному — тестируйте на нескольких.


В идеале нужно отличать элементы не только цветом, а, например, их формой или некой иконкой на них.

Пользователь увидит только то, что ищет и зачем пришел. Поэтому если вы рассчитываете, что он придет покупать у вас ДИВАН, то четко и жирно в заголовках он должен вдеть именно это слово.

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

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

Представьте, если бы вы задумывались над тем, как нужно напрячь мышцы, чтобы сделать очередной шаг. Вы бы тут же забыли, куда вообще идете и замедлились бы. А чего хуже так и повалились бы. НО этот процесс у нас доведен до автопилота. Также и вы доводите процессы пользователя до автопилота. И пожалуйста, СЧИТАТЬ никогда не заставляйте. Например, ввод года рождения — не просите вводить возраст (не только свой, иногда действительно сложно посчитать).

В общем — хороший интерфейс как говорится не заметен как и хороший слуга. Он является лишь СРЕДСТВОМ достижения других целей, призван упрощать нам жизнь и улучшать другие процессы.

Пользуйтесь тем, что мозг экономит ресурсы и показывайте ему знакомые образы. Если ваш ресурс заставить думать пользователя не о цели прихода, а о том КАК до нее дойти, он и вовсе забудет зачем пришел. Поэтому лучше 10 раз подумайте прежде чем заменять 10 знакомых пользователю шагов на 2, но таких, на которых нужно еще подумать. Самая короткая дорога — знакомая дорога.

Как отключить мозг пользователя от всего ненужного и дать ему сконцентрироваться на определенной цели?

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

Единообразие — залог той самой простоты. Добивайтесь единообразия как в логике, так и в визуале. Все, что связано должно быть похоже. Одни и те же действия должны называться везде одинаково. Если у вас есть похожие действия, например, связанные с товаром, выделите их как-то вместе. Одни и те же действия везде должны происходить одинаково. Иначе (вернемся назад) вы заставляете пользователя думать (почему в прошлый раз я нажал на эту кнопку, и произошло нечто другое, может я что-то не так сделал? — он задумался о мышцах во время ходьбы — он потерян).

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

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

Он должен чувствовать: чуть что — ему кто-то поможет (предположительно сама система), чтобы он не боялся ошибаться и вообще пользоваться вашим ресурсом.

Пользователь и система — фактически это общение в одну сторону, от пользователя. Это быстро его утомит. Давайте ему обратную связь, сигналы. Если пользователь произвел клик, то интерфейс должен как-то отозваться, чтобы человек понял, что клик ПРОИЗОШЕЛ.

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

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

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

Индикаторы должны соответствовать реальности. В случае индикатора прогресса следует показывать реальное оставшееся время, а в случае индикатора загрузки хотя бы не шевелиться, когда процесс реально встал. Например, у Apple он крутится медленнее при медленном соединении. Индикаторы должны показывать, сколько сделано из общего количества. Плюс, именно сделано, а не осталось – какой-никакой, а позитив (кроме времени, понятно – там нужно понять именно оставшееся его количество). С 0% не начинайте – растревожите пользователей, если надолго застрянет на нуле.

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

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

Помните о доступности.

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

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

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

НЕ ПОТЕРЯЙТЕ СВЯЗЬ С НАМИ

файл не найден

Я согласен на обработку персональных данных

Отправить