Добрый вечер!
Публикую четвертую часть (пункты 31-40) переведённой мной статьи от 1990 agency по принципам разработки UX., как обещал (пока укладываюсь в график :D).
Ссылка на 1-ю часть (пункты 1-10) - клик.
Ссылка на 2-ю часть (пункты 11-20) - клик.
Ссылка на 3-ю часть (пункты 21-30) - клик.
Дисклеймер: поставил себе цель переводить по 10 пунктов из адекватных (:D) источников (пока взял 1990 agency) каждый день и публиковать их здесь. Пока перевел 10 пунктов. На литературный перевод не претендую: иногда старался подгонять под русский язык, иногда делал упор на важность донесения контекста. Ссылка на оригинальный источник будет в конце статьи (все изображения так же взял из оригинального источника).
Ссылка на оригинал - в конце поста.
31. Используйте визуальную иерархию вместо беспорядка.
Грамотная визуальная иерархия может быть использована для отделения главных элементов интерфейса от менее важных. Визуальная иерархия складывается из таких вещей как выравнивание, близость/дальность расположения, тона, глубины, размера шрифта, отступов, пробелов и т.д. Если данные инструменты использованы корректно, они могут помочь “направлять” взгляд человека и, в целом, увеличивают читаемость страницы.
Визуальная иерархия благодаря таким “зацепкам” для глаза помогает пользователю не просто поскорее пролистать страницу и немного замедлиться, что нам идёт только плюсом. Итог – пользователь проведёт больше времени на страницы и с большей вероятностью может чем-то заинтересоваться. Посмотрите на это как на путешествие: можно погнать по шоссе, чтобы добраться до места как можно быстрее (как можно быстрее пролистать страницу), а можно выбрать маршрут с хорошими видами и получить побольше положительных впечатлений и воспоминаний.
32. Попробуйте группировать связанные по какому-либо признаку элементы вместо беспорядка.
Группировка связанных между собой элементов – простой путь увеличения базовой usability (удобства и пользы). Большая часть из нас в курсе, что нож и вилка или, например, функции “Открыть” и “Сохранить” могут быть найдены +- в одном месте. Связанные друг с другом элементы буквально напрашиваются на то, чтобы расположить их в относительной близости друг с другом: мы уважаем здравый смысл и логичность пользователя и, в целом, снижаем на него когнитивную нагрузку. Тратить время на бессмысленное вождение глазами по странице – не самое весёлое занятие.
33. Попробуйте использовать встроенную проверку вместо оттягивания моментов о получении сообщения об ошибке.
Когда мы имеем дело с заполнением форм и ошибками, лучше, как правило, обнаружить, что что-то заполнено неверно и показать сообщение об ошибке. И чем раньше, тем лучше. Показывая сообщение об ошибки сразу после её возникновения в том же месте (или рядом), мы помогаем пользователю сразу понять, где он совершил ошибку и как её сразу исправить.
Если же мы отложим этот вопрос и покажем ошибку постфактум (например, после нажатия кнопки “Зарегистрироваться”), мы дополнительно нагружаем пользователя и вынуждаем его вспоминать, какие шаги он проходил до этого и как это исправить.
34. Попробуйте быть менее категоричными относительно точности заполнения ваших форм.
“Прощая” пользователю некоторые ошибки при вводе данных в поля форм, мы можем “очеловечить” пользовательский опыт и скорректировать этот недочёт через компьютерные технологии: предусмотрите в полях ввода введение разных вариаций одного и того же типа данных. Это позволит сделать интерфейс вашего продукта более дружелюбным по отношению к пользователю.
Прекрасный пример – поле в форме, где нужно ввести свой номер телефона: есть немалое количество способов, в каком формате это можно сделать (со скобками, пробелами, с/без кодом страны/города и т.д.). Немного поднапрягитесь с написанием кода, которые будет предусматривать эти моменты, чтобы вашим пользователям не нужно было совершать дополнительную работу.
35. Попробуйте немного поторопить пользователя вместо того, чтобы никогда этого не делать.
Срочность – это тактика убеждения, которая может сподвигнуть человека на то, чтобы действовать “здесь и сейчас”, а не попозже (т.е. почти наверняка – никогда). Эта тактика работает, т.к. подразумевает под собой определённую степень дефицитности (продукт, который доступен сегодня, завтра может быть уже недоступен).
Еще одна причина, по которой данная стратегия работает – страх человека упустить возможность или потерять (иными словами – страх потери, о котором мы говорили ранее). Мы, как люди, не любим что-то терять (в т.ч. – возможности). Можно так же посмотреть да данную тактику и как на что-то не очень чистое и этичное, т.к. она вынуждает человека действовать. Как бы вы на это не смотрели, эта тактика имеет место быть (если, конечно, не она не подразумевает обмана человека). Будьте осторожны при применении подобной стратегии: если ваши пользователи обвинят вас в ней, это может вам дорого обойтись.
36. Попробуйте использовать “нехватку/ограниченность” вместо избытка.
Мы склонны больше ценить то, что есть в меньшем количестве. Нехватка подразумевает под собой следующее: вчера этого было много, сегодня это меньше, завтра – может вообще не быть. Представьте себе оптовый магазин и бутик, сравните их цены. Теперь снова подумайте об оптовике и обратите внимание на то, как они используют одну интересную стратегию, опирающуюсь на “нехватку” (это при том, что количество доступного товара у оптовика значительно больше, чем у бутика). Что они делают? Некоторые оптовики и “мега”- ритейлеры выпускают на полки ограниченное количество определённого продукта (т.е. пока не разберут до последнего экземпляра) с расчётом на то, что возобновлять поставки этого товара на полки они не будут.
В сфере разработки программных продуктов мы часто забываем об “ограниченности”, т.к., в подавляющем большинстве случаев, биты и байты просто можно легко дублировать/скопировать. Несмотря на это, “ограниченность” может затрагивать сферу разработки, как и любую другую сферу. Например, подумайте об ограничениях, которые стоят за продажей мест на посещение вебинара; количество клиентам в месяц, которым вы можете предоставить сервис; количество продукта у вас в наличии здесь и сейчас, пока не будет произведена и поставлена следующая партия. Все эти нюансы могут быть продемонстрированы пользователю (т.е. он будет информирован) и сподвигнуть его к совершению действия.
37. Используйте “узнаваемость” вместо “припоминания”
Это классический принцип дизайна, плотно опирающийся на психологию. Данный принцип подразумевает, что легче узнать что-либо сейчас существующее, чем что-то исключительно “по памяти”. “Узнаваемость” опирается на подсказки и намёки, которые помогают нам пощупать наш прошлый опыт. “Припоминание” же опирается на попытку что-то достать из памяти без подсказок, позволившим бы нам вспомнить наш прошлый опыт.
Описанное выше может быть одной из причин, почему экзаменах вопрос, подразумевающий выбор из нескольких готовых вариантов ответа, требует меньше времени на решение, чем открытый вопрос (без вариантов ответа).
Рассмотрите возможность дать пользователю возможность узнавать что-то в вашем продукте. Не ожидайте, что пользователь будет сам всё прекрасно помнить.
38. Попробуйте использовать бОльшие площади для кликов вместо маленьких.
Ссылки, формы и кнопки – клик по ним можно сделать проще для пользователя, если увеличить их размер. Согласно закону Фиттса, чем дальше или точнее выполняется движение (в нашем случае – клик), тем больше коррекции необходимо для его выполнения, и соответственно, больше времени требуется для внесения этой коррекции. Проще говоря, нам проще кликнуть на что-то большое, чем маленькое
Именно по этой причине рассмотрите возможность увеличить в размере ваши поля форм, призывы к действию и ссылки. Альтернативный вариант - можно не менять размер элемента, но увеличить область клика вокруг него. Хорошим примером являются ссылки в приложениях на мобильных устройствах или навигационных меню (область клика увеличивается за счёт создания визуально понятной области клика и увеличения внутренних отступов).
39. Уменьшайте время “прогрузки” элементов, не заставляйте пользователя ждать.
Скорость имеет значение. Будь то, как быстро загружается страница/экран приложения или как быстро интерфейс реагирует и отвечает на действия пользователя. Эти факторы влияют на итог: будет пользователь ждать или нет. Предполагается, что каждая дополнительная секунда загрузки – это потенциальная потеря пользователя и снижение конверсии.
Есть одна тактика, направленная на снижение времени прогрузки путём оптимизации вашего кода и веса изображений.
Еще один вариант (психологический) - снизить уровень концентрации пользователя на ожидании завершения загрузки.
Оба эти способа могу применяться вместе. Они позволяют пользователю не испытывать ощущение, что он ждёт слишком долго. Один из вариантов – показывать прогресс-бары (индикаторы загрузки, визуально отображающие процесс загрузки). Еще один вариант – занять пользователя чем-нибудь во время процесса загрузки.
40. Попробуйте использовать в вашем продукте горячие клавиши вместо только кнопок (речь идёт о клике мышкой на каждый инструмент).
Когда ваш продукт используется много и часто, хорошей идеей будет учитывать интересы продвинутых пользователей вашего IT-продукта (здесь речь идёт только о ПК продуктах, НЕ мобильных). Люди часто ищут способы выполнять частые повторяющиеся задачи более быстро, и горячие клавиши на клавиатуре – один из способов обеспечить вашим пользователям такую возможность. Горячие клавиши (когда их сочетание пользователь запомнил) могут значительно увеличить скорость работы относительно того же постоянного выбора каждого инструмента вручную (т.е. выбор инструмента вручную и клик по нему мышкой).
Хорошим примером здесь послужит использование на клавиатуре клавиш J и K для выполнения функций “Предыдущий” и “Следующий” соответственно: они были популяризированы такими продуктами, как Gmail, Google Reader (уже канул в лету), Twitter и Tumblr. Сами по себе обычные кнопки – это не плохо. Просто они могут быть дополнены горячими клавишами для тех самых пользователей с быстрыми пальцами.
Ссылка на оригинал статьи: https://www.1990.agency/en/77-things-to-remember-when-designing-ui/
Любые конструктивные замечания по переводы приветствуются!
