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

Для лучшей индикации текущей вкладки вы можете использовать цвета и микровзаимодействия.

Например, в приложении Google панель навигации выделяет текущую вкладку, меняя цвет иконки с серого на синий.

Вы можете указать текущую вкладку, используя разные стили, как в примере от Zsolt hutvagner на изображении выше.

Для веб-приложений также необходимо указать активную вкладку для лучшего понимания пользователем.

2. Добавьте немного анимации

Использование анимации или микроанимации внутри панели навигации сделает приложение более привлекательным. Поэтому смело используйте их.

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

Иконки, изменяющие цвет и анимированный текст, сделают вашу навигацию более привлекательной.

3. Не используйте слишком много анимации

В предыдущем совете я рекомендовал использовать анимацию, но, если вы будете использовать ее слишком часто, это повредит пользовательскому опыту.

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

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

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

4. Осторожно используйте текст с иконками

Иконки с текстом будут занимать много места на панели навигации, поэтому важно заранее определить, нужно ли вам использовать текст или нет. Для этого нужно понять свою аудиторию.

Если ваша аудитория обладает определенными техническими знаниями и может понимать иконки без текста – используйте только иконки, в противном случае добавьте текст.

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

Вы можете использовать текст и иконку с таким стилем, поскольку он позволяет пользователю видеть текст и значок одновременно.

Давайте рассмотрим реальный пример текста с иконками из приложения Spotify. Spotify использует простые иконки с коротким текстом под ними, это помогает пользователю легко понять навигацию.

5. Чем меньше, тем лучше

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

Остальные параметры можно скрыть в меню навигации или настройках профиля.

Spotify использует иконку настроек для других менее полезных элементов навигации. В то время, как все ключевые функции расположены непосредственно на панели навигации.

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

Старайтесь использовать, как можно меньше иконок и вариантов. Рекомендуется использовать максимум 5 вариантов.

Ряд дизайнеров любит концепцию, которую вы можете видеть на картинке выше. Она называется вложенные параметры (nested options), но следует учитывать, что такой подход может излишне усложнить панель навигации.

Сохраняйте простоту и используйте меньше иконок и текста, потому что чем меньше, тем лучше.

Эти 5 простых советов помогут вам создать лучшую панель навигации. В Интернете вы можете найти еще много других полезных рекомендаций, поэтому для лучшего понимания этой темы прочтите другие статьи.

Отдельное спасибо Junio Serroni и Gav Grayston за советы.

Спасибо за прочтение.

Перевод статьи uxplanet.org

1. Бездумное следование трендам

Если бы меня попросили назвать одну вещь, которая больше всего вредит индустрии продуктового дизайна, я бы выбрал бессмысленное использование трендов™.

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

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

• Неправильно добавлять популярный тренд только для того, чтобы быть похожим на остальных – вы легко затеряетесь в толпе клонов.
• Внешний вид целевой страницы должен определяться вашей целевой аудиторией, а не тем, что сейчас популярно на Dribbble.
• Подумайте о характеристиках вашего продукта. Какой стиль, цвета и образы подойдут ему больше всего? Может быть, настоящая рука, держащая настоящий телефон, лучше соответствует вашему продукту, чем пухлая мультяшная 3D-модель?

2. Слишком много текста

Независимо от того, насколько хорош ваш продукт и сколько вы хотите рассказать о нем миру, вы должны помнить одну вещь:

Большинство людей не очень любят читать.

Вот почему вы должны уметь описать идею или основное преимущество вашего продукта в одном предложении. Вам нужно привлечь внимание пользователя и пробудить его интерес за первые несколько секунд сеанса.

Человек, посетивший вашу страницу, скорее всего, будет скроллить контент, а не просматривать каждый абзац, и, скорее всего, покинет страницу, если текста будет слишком много.

• Постарайтесь передать самое важное короткими понятными предложениями, а не писать длинные абзацы. Разделите длинные куски текста (например, отзывы) пополам.
• Убедитесь, что общая пропорция текста и изображений на целевой странице составляет не менее 50:50. Текст должен сопровождаться изображениями или визуализацией данных, иначе он будет казаться слишком скучным и тяжелым.

3. Изобилие призывов к действию

Популярное правило «лучше меньше, да лучше» также касается призывов к действию.

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

• Чем чаще повторяется элемент, тем меньше внимания он привлекает. Люди склонны не обращать внимание на вещи, лишенные индивидуальности.
• Вместо того, чтобы размещать 15 кнопок призыва к действию на целевой странице, подумайте об одной кнопке, закрепленной вверху страницы, когда пользователь прокручивает ее вниз. Таким образом, призыв к действию всегда виден и легко доступен, но не слишком агрессивен.

Сложная навигация.

Одно из основных правил, которым я следую:

Не пытайтесь изобретать велосипед. Если что-то отлично работает, зачем это усложнять?

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

Поэтому меня удивляет, когда после входа на страницу я автоматически пытаюсь скроллить вниз, но ничего не происходит. Вместо того, чтобы сосредоточиться на продукте, я трачу время, чтобы выяснить, как работает навигация. Это горизонтальный скролл? Должен ли я нажать на какую-либо ссылку, чтобы появился контент? Или мне просто нужно ждать?

• Сколл вниз – лучший вариант для навигации по целевой странице. Не изменяйте этот UX паттерн ради того, чтобы сделать свой сайт более креативным или индивидуальным. Это того не стоит.
• Люди привыкли прокручивать страницу вниз и делают это автоматически, только попав на нее – не нарушайте этот естественный юзерфлоу.

5. Отказ от пользовательских тестов

Если вы не проводите пользовательские тесты, вы на самом деле не знаете, правильно ли работает целевая страница (индикатором может быть низкое количество продаж).

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

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

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

Помните, что недавно запущенный сайт – это только начало – на этом работа не заканчивается. Убедитесь, что целевая страница отражает дух вашего продукта, обладает индивидуальностью, сразу привлекает внимание и удобна для ваших посетителей. Используйте инструменты для наблюдения за поведением пользователей и постоянно адаптируйте свой сайт, чтобы он отвечал их потребностям!

Перевод статьи uxdesign.cc

За 21 с лишним лет своего существования целевая страница Google лишь немного изменилась. Цель этой страницы осталась неизменной предоставить людям быстрый и простой способ поиска информации в Интернете. Фактически, это было реализовано настолько эффективно, что сам поиск в Интернете стал синонимом названия компании. Основным фактором успеха поиска от Google является его простота. Страница состоит практически из одного поискового поля, которое расположено примерно в ее центре и по умолчанию всегда сфокусировано – готово для получения ключевого слова поиска. После того, как вы начнете вводить текст, ниже окна ввода появится список предполагаемых ключевых слов на основе того, что вы уже набрали. Этот список прогнозируемых ключевых слов продолжает обновляться по мере того, как вы вводите текст, и предназначен для того, чтобы показать ключевое слово, которое вы, вероятно, наберете, до того, как закончите ввод, тем самым экономя ваше время (и умственную энергию).

Психология UX

Ключевой психологической эвристикой, используемой на целевой странице Поиска Google, является закон Хика, который гласит, что время, необходимое для принятия решения, увеличивается с количеством и сложностью вариантов выбора. Google сводит к минимуму количество решений, необходимых для ввода ключевого слова, устраняя любой дополнительный контент, который мог бы отвлечь от ввода ключевого слова или потребовать принятия дополнительных решений. Дизайн служит этой единственной цели – удерживать фокус страницы на процессе поиска, размещая поле поиска на видном месте, автоматически фокусируя ввод поиска по умолчанию и убирая дополнительные параметры поиска. Еще раз Закон Хика используется, когда вы начинаете вводить текст и появляются прогнозируемые ключевые слова, устраняя необходимость писать слово целиком (при условии, что совпадение найдено). Цель Google – как можно быстрее инициировать поиск на основе запроса, и он следует этой цели, устраняя любые препятствия, которые могут привести к необходимости принятия дополнительных решений.

Результаты поиска

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

Психология UX

Закон Хика также переносится с предыдущей страницы на страницу результатов поиска. Именно тут вы найдете дополнительные параметры для изменения поиска, а не на целевой странице, цель которой – устранить как можно больше препятствий. Только после того, как вы ввели поисковый запрос, становятся доступными дополнительные параметры для фильтрации результатов и, следовательно, принятия дополнительных решений.

Еще одна важная особенность дизайна страницы результатов поиска, на которую следует обратить внимание – это то, что исходный поисковый запрос все еще отображается, что полезно, поскольку уменьшает нагрузку на нашу память. Рабочая память – это когнитивная система, которая временно хранит информацию и важна для рассуждений, управления поведением, и принятия решений. Ее емкость ограничена, поэтому, чем больше принимается решений, тем меньше вероятность того, что мы быстро вспомним элементы, ранее сохраненные в рабочей памяти. Вы можете думать о каждом элементе на странице как о потенциальной точке принятия решения: люди просматривают страницу в поисках информации, которая относится к тому, что они ищут, и мысленно оценивают, может ли контент помочь им в достижении их цели. Поэтому полезно видеть исходный поисковый запрос, если пользователи забыли, что изначально искали.

Следующая важная ключевая деталь поиска Google – это производительность. Поиск Google известен своей скоростью предоставления результатов – он даже отображает время, затраченное на получение этих результатов, вверху страницы. Это напрямую связано с порогом Доэрти, который гласит, что производительность возрастает, когда компьютер и его пользователи взаимодействуют в темпе (<400 мс), который гарантирует, что они не должны ждать друг друга. Если результаты поиска долго появлялись, вы могли начать думать о чем-то другом. Вместо этого Google ставит во главу угла производительность и предоставляет результаты как можно быстрее. Это гарантирует, что мы будем по-прежнему сосредоточены на поставленной задаче, и получим нужные результаты, чтобы узнать больше. Производительность – важная часть общего пользовательского опыта, и Google это понимает.

Теперь перейдем к визуальным аспектам страницы результатов поиска, которая оптимизирована для сканирования. Как уже упоминалось, все результаты представлены в виде списка, и каждый визуализируется в виде заметного фрагмента контента с большим интервалом между фрагментами. Это не только позволяет легко отличить один результат от другого, но также помогает людям быстро просмотреть список и определить, какой результат с наибольшей вероятностью содержит искомую информацию. Иерархия информации в каждом результате понятна, согласована и легко поддается сканированию. Это тесно связано с психологической концепцией разбивки на фрагменты, процесса, с помощью которого отдельные фрагменты информационного набора разбиваются на части, а затем группируются в значимое целое. Применительно к UX-дизайну разбивка на части помогает нам управлять группированием и организацией контента. Когда мы разбиваем контент, мы фактически упрощаем его понимание. Затем люди могут сканировать контент, определять информацию, которая соответствует их целям, и потреблять эту информацию, чтобы достичь своей цели.

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

Наконец, невозможно анализировать визуальную информацию, не вспомнив гештальт психологию , и результаты поиска Google демонстрируют ее принципы. Один очень заметный закон гештальта – это закон близости, который гласит, что объекты, которые находятся рядом или близко друг к другу, имеют тенденцию группироваться вместе. Интервал между каждым результатом способствует общей сканируемости страницы, но также помогает эффективно сгруппировать каждый результат, как связанный кластер информации. Кроме того, закон связности можно также увидеть с помощью границы, окружающей определенные элементы, такие как видео и «блоки с ответами» (featured snippets). Эта граница помогает визуально связать контент, а также отделить его от других результатов, придав ему немного большего приоритета. Это дополнительный уровень иерархии, который снова помогает сканировать страницу.

За более чем 21 год своего существования поиск Google был постепенно улучшен, чтобы повысить способность людей быстро получать информацию на основе поискового запроса. Этого удалось добиться за счет устранения препятствий, определения приоритетов производительности и обеспечения легкости сканирования результатов. Они превратили этот опыт в науку и в результате сделали Google Search повсеместной утилитой, которая помогает бесчисленному количеству людей ежедневно находить информацию на бескрайних просторах Интернета.

Перевод статьи jonyablonski.com

Преимущества платформы

Если вы хотите найти вдохновение, Dribbble – лучшее место для вас. Здесь не составит труда найти хорошие проекты, интересных людей и крутые идеи. Это хороший способ отвлечься, особенно если вы работаете над какой-то проблемой и не можете найти решение.

Сообщество огромно: компания сообщает, что количество пользователей в прошлом году стало почти в 2 раза больше. В 2018 году дизайнеры загрузили 1,2 миллиона шотов, которые получили 35 миллионов лайков и 1 миллион комментариев. По оценкам, количество пользователей во всем мире составляет 4,5 миллиона.

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

Всё, что связано с Dribbble, несет в себе дух сообщества.

Приятно, что дизайн платформы, созданной для дизайнеров, выглядит хорошо. Каждая страница выглядит просто, но при этом захватывает. Проекты легко увидеть – спасибо, предварительный просмотр. Юзабилити очевидна. С первого входа в систему все в Dribbble легко понять, найти и изучить.

Вы можете получить фидбек от других дизайнеров. Обратная связь от вашего босса, клиентов или команды – это здорово, но что думает огромное сообщество? Это место для тестирования дизайна.

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

Тема сайта не изменилась с первого дня, и это мило. Любители баскетбола явно довольны.

Недостатки платформы

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

Загрузки несколько ограничены. Хотя в конце прошлого года Dribbble исключил правило 400 на 300 пикселей (спасибо!), максимальный размер для загрузки составляет 10 МБ. Вам не нужно использовать определенное соотношение сторон, но система предложит обрезать изображение для предварительного просмотра.

Приглашения. Кажется, это крутая идея – определенно в самом начале это работало. Но действительно ли приглашения нужны 10 лет спустя? Если кто-то не играет по правилам, выгоните его.

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

Иногда Dribbble выглядит неправильным местом для начинающих дизайнеров. Нет, очень круто, что ребята из Adobe и Apple выкладывают свои работы. Но иногда это пугает. Если вы новичок на платформе или в дизайне в целом, постарайтесь не сравнивать себя с легендами. Делайте свое дело, найдите свою нишу и будьте собой.

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

Реклама повсюду. Конечно, сайту нужен источник дохода, но некоторых людей количество рекламы может раздражать. (Если вы один из этих людей, то можете перейти на платный план).

Если вы действительно хотите получить весь функционал, придется платить. Это может окупиться, если вы используете сайт для продажи товаров или поиска работы (или реклама сводит вас с ума). Dribbble Pro стоит 12 долларов в месяц или 60 долларов в год.

Заключение

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

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

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

Просто знайте меру и не позволяйте комментариям сбить вас с толку. Когда Dribbble перестает быть веселым, займитесь чем-нибудь другим. Если вы еще не присоединились, сейчас самое время попросить приглашение у сотрудника.

Источник: webdesignerdepot

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

Одно из самых интересных воздействий цвета на UX связано с полом. Исследования показали, что мужчинам и женщинам нравятся и не нравятся определенные типы цветов.

Мужчины склонны больше взаимодействовать с веб-сайтами, выполненные в темных схемах и использующие насыщенные цвета. Например, сайт VLNC Studio (выше). Женщины, как правило, предпочитают взаимодействовать с веб-сайтами со светлыми схемами и приглушенными цветовыми палитрами. Такие как Tally (ниже).

Некоторые мужчины могут резко реагировать на сайты, использующие отчетливо женские цвета, такие как пастельный розовый, пурпурный и желтый. Так же реагируют женщины на страницы с резкими цветовыми схемами.

Промежуточные палитры подойдут для обоих полов.

Цветовые ассоциации и значения

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

• Красный: сила, опасность, любовь / страсть, голод
• Желтый: энергия, счастье, свет, тепло
• Оранжевый: творчество, решительность, стимулирование, поощрение
• Зеленый: природа, рост, гармония, свежесть
• Синий: уверенность, доверие, спокойствие, спокойствие
• Фиолетовый: магия, королевская власть, амбиции, независимость.

Создание узнаваемости бренда

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

Цвет – важный элемент в брендинге, потому что создает особую связь между пользователем и дизайном. Цвет рассказывает пользователям о бренде. Он рассказывает о том, с чем они собираются взаимодействовать.

Измените цвет – и пользовательский опыт пострадает. Посетители сайта начинают с первой же секунды сомневаться в отношении бренда, который знают.

Пользовательские шаблоны

Вы заметили, сколько сайтов используют красные или оранжевые кнопки? Для этого есть причина.

Яркие цветные кнопки, которые контрастируют с фоном сайта – красный и оранжевый часто выделяются на светлом или темном фоне – могут помочь пользователям взаимодействовать с элементами, потому что они сразу знают, что ожидают от этой кнопки.

Ведь ключевая часть UX – предоставить пользователю возможности, которые им нравятся и понятны.

Cruise использует прозрачную кнопку с красной рамкой. Это не типичная полностью красная кнопка, но у юзера не возникает сомнений, что это именно то, что нужно.

Net Bluez Net Bluez использует ярко-оранжевую кнопку для самого важного элемента в меню навигации. Обратите внимание: этот элемент словно просится, чтобы его нажали.

Увеличение конверсии

Во время разработки проверяйте цвета в режиме A / B тестирования. Вы увидите, что на некоторые цвета публика реагирует лучше, чем на другие (и необязательно на те, которые вы считаете лучшими).

Коэффициент конверсии, как правило, увеличивается, когда цвет кнопок или ссылок резко контрастирует с остальным дизайном. Посмотрите на сайт ниже. Кнопка какого цвета с большей вероятность заставит вас кликнуть? (Оригинальный цвет синий.)

Обеспечение доступности для всех пользователей

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

Чтобы понять дизайн, человек должен легко видеть и читать его. Использование цветовых палитр и коэффициентов контрастности, которые соответствуют Рекомендациям по доступности веб-контента (WCAG 2.1), гарантирует, что каждый пользователь сможет понять ваш выбор цвета.

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

Заключение

Думайте о цвете как об инструменте, который поможет пользователям лучше взаимодействовать с контентом на вашем веб-сайте. Он влияет на пользовательский опыт на эмоциональном уровне и уровне юзабилити.

1. В некоторых заданиях звук обеспечивает обратную связь

Звук дает сигнал и обеспечивает немедленный фидбек. В качестве базовой механики игроки могут слышать шаги во время прогулки по космическому кораблю, что способствует еще большему погружению в игру. Звук также помогает игрокам выполнять задания. Например, игра будет воспроизводить звуки, чтобы помочь пользователям запомнить паттерны последовательности нажатия кнопок. Нажатие на отдельную кнопку запускает уникальный звук, дающий игроку звуковой фидбек, когда тактильные параметры недоступны на плоской поверхности iPad. Звук обеспечивает наглядность, потому что игра будет воспроизводить звуки, когда игрок выполняет задачу или делает что-то не так. В сочетании с визуальными элементами звук позволяет игроку лучше контролировать ситуацию.

2. Кнопки с ограничениями для навигации пользователей

Кнопки в игре используют физические ограничения, чтобы предотвратить ошибки и заставить пользователей действовать в соответствии с тем, как была запрограммирована игра. В игре кнопки с правой стороны используются либо для сообщения о месте преступления, либо для доступа к элементам на карте для выполнения задания. Игра сообщает, когда использовать определенные функции, потому что кнопки загораются, когда игрок стоит рядом с интерактивным элементом. Однако, если объект находится далеко, кнопка неактивна. Кнопка «Report» может быть нажата только, когда игрок обнаружит мертвое тело. Among Us имеет прекрасное юзабилити, потому что позволяет игрокам, особенно новичкам, легко узнать, с какими элементами они могут взаимодействовать, вместо того, чтобы пытаться угадать и нажимать кнопки, пока что-то не произойдет.

3. Креативное использование рабочей памяти – это весело

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

4. Не нужно регистрироваться

Игра имеет низкий барьер вхождения. Приложение для iPad можно бесплатно загрузить из App Store, и пользователям не нужно создавать учетную запись. Они просто вводят имя пользователя и могут играть.

5. Использование закона Фиттса для удобной навигации по элементам управления

Согласно закону Фиттса, время, необходимое пользователю для достижения цели на экране, зависит от: (1) расстояния от курсора до цели и (2) размера этой цели. Для сенсорных экранов курсор – это рука пользователя. Управлять игрой легко, если пользователь полностью контролирует движения своих рук. Игроки могут использовать большой палец для управления джойстиком в нижнем левом краю iPad. Таким образом расстояние до цели, управляющей движением, значительно сокращается. Расстояния практически нет. Игроки также могут увеличить размер джойстика в настройках. Одновременно правая рука нажимает кнопки, расположенные в нижнем правом углу, которые также являются относительно большими целями с минимальным расстоянием.

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

Минусы

1. Проблемы с аффордансами в некоторых задачах

Иногда из-за того, как представлены задачи, трудно понять, с чего начать их выполнение – причина в плохих аффордансах. Например, эта задача доставила мне много проблем, пока я не посмотрел видео, как стример просто перетаскивает свет по лабиринту. Кроме того, в игре нет справочника, который научил бы игроков выполнять каждую задачу, поэтому им приходится искать ответы на сторонних площадках. Это может нарушить игровой процесс. Хотя для некоторых игроков отсутствие аффордансов не является проблемой, новичков это может обескуражить.

2. Информация, вводящая в заблуждение, из-за большого количества игроков

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

3. Неэффективное использование периферии

Периферийное зрение – это тип зрения, при котором объекты находятся вне фокуса. Оно охватывает область, на которую пользователи обычно не обращают внимания, если только там нет больших ярких объектов или сильного движения. Периферией в игре часто являются края экрана, потому что игрок остается сосредоточенным на движении своего персонажа. Например, когда кто-то входит в комнату на карте, игра сообщает, как называется комната, но это едва заметно. Белый текст с тонким черным контуром трудно увидеть, особенно пользователям с проблемами зрения. Запоминание того, в какой комнате находился игрок – важная информация, которая поможет выиграть игру, ведь ее можно использовать для формирования алиби в попытке выявить предателя или, для его фальсификации предателем. Доступность важна не только для создания инклюзивной среды, но и для получения более приятного опыта.

4. Для более быстрого общения нужны дополнительные приложения

Игроки могут использовать для общения с друзьями или другими игроками сервисы голосовой связи, поскольку они позволяют общаться намного быстрее и эффективнее, чем внутриигровой чат. Набор и чтение текста занимает больше времени. Таким образом, во время игры нужно будет запустить другое приложение, например, Discord, Zoom, Skype или Facetime. Это может быть неудобно, поскольку пользователям придется отслеживать сразу несколько приложений.

Размышления: социальное влияние

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

Популярность Among Us может дать большой толчок в использовании мобильных устройств для кроссплатформенных игр. Все, от про геймеров до новичков, играют на разных устройствах: на компьютере, планшете или телефоне. Подключиться к игре могут самые разные люди. Минимальные барьеры для входа способствуют популярности игры. В прошлом про геймеры и стримеры играли только в сложные компьютерные или видеоигры, для которых требовались дорогие ПК и консоли. Теперь игры могут быть более инклюзивными.

Кроме того, нельзя не отметить, как видеоигры способствуют социализации. Эта игра предоставляет друзьям еще один способ общения, когда во время пандемии люди ищут новые способы развлечения с сохранением социальной дистанции. Игра позволяет быстро создавать сообщества. Люди могут заводить здесь новых друзей. Я слышал истории как люди, обмениваются контактами в социальных сетях, чтобы созваниваться, планировать игры и заводить друзей. Было ли так задумано или нет, но в Among Us можно найти новых друзей.

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

Among Us становится все популярнее, и будет интересно увидеть траекторию его развития.

Перевод статьи uxdesign.cc

Это действительно очень важно для дизайнеров. С годами мы попали в типичную компьютерную ловушку – чем больше мощности у нас было (и использовалось), тем больше мы понимали, что ее всегда недостаточно.

Давайте я приведу пару примеров:

Эра проектирования в Photoshop

Когда я только начал проектировать веб-сайты, у нас в распоряжении был только Photoshop. Тогда вы могли одновременно работать только над одним «артбордом» или проектом. Конечно, можно открыть больше «файлов», но для работы вам придется переключаться между ними. Таким образом, вы просто перемещали растровые прямоугольники на одном «артборде».

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

Конечно, эти в основном растровые проекты были довольно тяжелыми. Средний размер экрана мобильного приложения в 2009 году составлял около 50 МБ. Это всего лишь один экран, а теперь представьте, что в приложении их 50.

Сейчас целые файлы Figma или Sketch, полные экранов и библиотек, могут занимать те же 50 МБ.

Ограниченная емкость как дисплеев, так и компьютеров начала 2000-х годов не могла удовлетворить потребность в проектировании сложных многоэкранных продуктов.

Поскольку в любой момент времени был виден только один «артборд», это приводило к множеству несоответствий, в том числе к проблеме «скачущих пикселей» при прокрутке списка похожих экранов.

Экран 1 был в порядке, но на аналогичном экране базовые объекты с него были на пиксель или два смещены. Перемещение между ними производило впечатление небрежного дизайна (так и было) – вы можете увидеть это на GIF-файле выше.

Клиенты ненавидели это так же, как и дизайнеры.

Дни Sketch

Когда более 10 лет назад появился Sketch, он радикально изменил наше представление о дизайне. Было две особенности, которые, на мой взгляд, стали определяющими: векторные фигуры и наличие нескольких артбордов.

Когда в 2013–2014 годах я впервые начал работать в Sketch, меня поразила возможность просматривать и редактировать все экраны одновременно. К примеру, вы можете выбрать один объект на нескольких экранах и изменить его цвет или положение на всех экранах одновременно. Эта особенность навсегда избавила нас от проблемы скачущих пикселей.

Вы даже не можете представить, насколько мы были счастливы, когда InVision вошел в наш рабочий процесс! Наконец, мы смогли создать сложные многоэкранные прототипы внутри Sketch, связать экраны вместе с помощью переходов и тестировать юзерфлоу.

Craft – плагин для Sketch, который позволял интегрировать InVision, часто работал довольно медленно при создании синих соединительных стрелок. Это было особенно заметно на загруженных страницах со множеством визуально сложных экранов.

Стрелка будет немного лагать, прежде чем достигнет целевого артборда. Но тогда это было лишь незначительным неудобством.

Это было в новинку, и это было очень весело.

(Конечно, Axure позволяла создавать прототипы задолго до этого, но это не был инструмент проектирования интерфейса, поэтому мы создали вайрфреймы в Sketch).

Символы

Еще одной революцией стали символы. Это общий элемент интерфейса, который можно многократно вкладывать и создавать повторно используемые согласованные компоненты дизайна. Но в некоторых случаях, как ячейка таблицы (вверху) с портала Analizy.pl, у нас было несколько уровней вложенности с довольно высокой плотностью данных, и проект с, как минимум, сотней экранов и их версий.

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

Это привело к тяжелой вложенности и множеству экземпляров ячейки на выбор. Учитывая, что на типичном экране каталога / результатов поиска одновременно было 20 или более таких элементов – кулера моего Macbook Pro 15″ 2017 начинали гудеть, как дрон, который вот-вот взлетит.

Загрузка всех этих данных сильно нагружала CPU / GPU топового Mac. Конечно, я мог бы оптимизировать файл Sketch, но, когда у вас появляется возможность построить сложную структуру, вы редко можете сказать «нет».

Сложность возрастает

Моя книга по UI дизайну также была собрана в Sketch. Поверьте, 450 артбордов на одной странице тоже иногда могут замедлить работу ноутбука, хотя и не так сильно, как я ожидал.

Но с выросшей мощностью

Когда мне было поручено разработать продукт, который работал бы на нескольких платформах (от iOS до Android ТВ-приставок и игровых консолей), я не думал дважды.

Создал внешнюю библиотеку стилей (еще одно отличное нововведение Sketch) и начал создавать компоненты, руководства и общие стили для интерфейса, которые останутся знакомыми на каждой платформе.

Через некоторое время мне пришлось разделить основной файл проекта на отдельные файлы (по одному для каждой платформы) и подключить к каждому из них внешнюю библиотеку с «основами».

Но представьте себе, если бы это было не так. Представьте себе машину, достаточно мощную, чтобы с легкостью справиться с этим.

Я надеюсь, что новые устройства Apple наконец-то дадут нам подобную мощь.

Непрерывность… но теперь и в работе с инструментами дизайна

Одна из самых удивительных особенностей продуктов Apple – это возможность запускать что-то на одном устройстве и плавно продолжать работать на другом.

Они просто работают вместе.

Отправка текстовых сообщений с телефона, но набор текста на компьютере – это то, от чего очень трудно отказаться при переходе на Android.

А теперь давайте посмотрим на это с другой стороны

Если новые Macbook будут работать на ARM процессорах (линейка Apple A-chip), это означает, что они будут иметь разновидность тех же процессоров, что стоят в ваших iPhone и iPad.

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

Со всей этой мощью у вас будет больше артбордов, больше вложенных символов и больше способов прототипирования. Все работает без проблем на ЛЮБОМ устройстве, которое у вас есть.

Это похоже на режим Samsung Dex, но с действительно полезными (для дизайнеров) приложениями.

Будущее будет быстрым. И я уже заказал свой MacBook Pro с процессором M1.

Перевод статьи uxdesign.cc

Большинство интерфейсов ограничены жесткими системами, которые безукоризненно выравнивают элементы по сетке, создавая ощущение ритма и единства. Однако в дизайне интерфейсов «веселье» часто возникает из отсутствия порядка. Например, iMessage, позволяет пользователям оставлять стикеры в любом месте чата, или старый приятель MySpace позволяет пользователям редактировать CSS на своих страницах. Эти продуктовые решения считаются забавными, потому что они хаотичны. Они апеллируют к детской надежде, что мир на самом деле не является набором взаимосвязанных систем и правил, а представляет собой обширный ландшафт неоткрытых возможностей, которые можно исследовать, казалось бы, бесконечное количество времени.

Компромисс заключается в том, что веселье неэффективно. На самом деле веселье – это противоположность эффективности. Веселье – это то, что происходит, когда вы теряете из виду пункт назначения. Если мы думаем о цифровых продуктах как об инструментах, которые должны быть оптимизированы для наиболее быстрого и интуитивно понятного способа выполнения задачи, то мы говорим о принесении в жертву удовольствия и необычности в пользу эффективности и продуктивности.

Это парадокс Fun Designer. Чем более эффективным и масштабируемым является продукт, тем более предсказуемым, скучным – а зачастую и успешным – он становится. Как же достичь баланса между весельем и эффективностью?

Пожалуй, хорошим аналогом веселья в продуктовом дизайне является ваби-саби (Wabi-Sabi). Если вы никогда раньше не слышали о нем, то это японское мировоззрение, которое резко контрастирует с чрезмерно вылизанной современной эстетикой, которую сегодня любят большинство дизайнеров. Оно основано на признании мимолетности и несовершенства.

К характеристикам эстетики и принципов ваби-саби относятся асимметрия, грубость, простота, экономия, строгость, скромность, близость, а также признание сил природы.

В контексте дизайна интерфейса «сила природы» – это человек, контролирующий интерфейс. Если пиксели – это люди, населяющие Землю, большой палец пользователя – это всемогущая погода. «Признание сил природы» в интерфейсе означает избавление от жесткости систем, управляющих ее пикселями. Это может привнести в «сухой» опыт ощущение непредсказуемости и веселья.

Брутализм – еще один претендент на добавление веселья в продуктовый дизайн. Как и ваби-саби, брутализм не извиняется за свои недостатки, а упивается создаваемым им хаосом. Хотя изначальная цель брутализма заключалась в том, чтобы отдать приоритет функции над формой, она настолько контрастирует с сегодняшним подходом к проектированию интерфейсов, что оказывает практически противоположный эффект.

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

В бруталистском дизайне форма играет ведущую роль, но делает это без каких-либо попыток совершенствования. Напротив, она настолько сырая и доступная, что приглашает любого поэкспериментировать с ней. Это качество совместной работы в дизайне привносит элемент исследования, удивления и… веселья!

Продукты, которые дают пользователям право создавать хаос – это весело. Это касается и виртуальной реальности. Во время моей работы в Facebook VR мы потратили бесчисленное количество часов на проектирование тщательно организованных систем для взаимодействия с виртуальными объектами, а затем регулярно приглашали людей для тестирования полученных результатов. Что в первую очередь делали люди при взаимодействии с виртуальным объектом в VR? Они хватали его, бросали и смеялись. Если он ломался, они делали это снова, но, возможно, с большим энтузиазмом. Они создавали хаос, вероятно, как протест против порядка в реальном мире, и при этом их скептически нахмуренные лица озаряла радостная ухмылка.

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

Если серьезный продукт – это молоток, то забавный продукт – это пластилин Play-Doh. Дайте пользователям возможность выразить себя, манипулируя всем вокруг – вот настоящее веселье.

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

Хотите наклеить стикер в середине сообщения? Не проблема! Хотите использовать блестящий фон, чтобы украсить домашнюю страницу? Действуйте! Не знаете, как чего-то добиться в приложении? Поищите вокруг и посмотрите, что произойдет, пока не найдете то, что ищете!

Так как же нам создавать забавные продукты? Уловка состоит в том, чтобы спроектировать системы, которые учитывают хаос: познакомить пользователей с несвязанным взаимодействием, а затем вернуть их в систематический порядок. Если ваша цель – сделать продукт интересным, как вы будете учитывать хаос?

Чтобы получить ответы на следующие вопросы:

• Во-первых, сколько сейчас времени?
• Входящий звонок, хотите знать кто звонит?
• Пришло сообщение; его стоит открывать?
• Сколько калорий я сегодня сжег?
• «Привет, Сири. Сколько стоит 1 доллар в Индии? “

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

Давайте теперь перейдем к рекомендациям по проектированию интерфейса смарт-часов.

Рекомендации

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

1. Полезное пространство экрана и макет

Размер экрана Apple Watch 40 мм, что на 40,2% меньше, чем дисплей iPhone8. Проектирование для такого небольшого разрешения и обеспечение четкости изображения критически важная задача для любого дизайнера. Тем не менее, компании по всему миру используют эту возможность, чтобы облегчить людям жизнь (и заработать на этом деньги, но это отдельная тема).

2. Жесты

Единственное, чего все ожидают от такого маленького экрана – это «легкий доступ», но как нам этого добиться?

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

Apple

3. Действие «Назад»

Как было сказано выше, «Смахните, чтобы вернуться» – это решение, облегчающее жизнь пользователя. Вдохновившись жестом Apple для возврата назад, Android реализовал этот жест как замену программным клавишам в нижней части интерфейса своей ОС. Не понимаете, о чем я говорю? Посмотрите на изображение ниже.

Наличие похожих жестов на смарт-часах может помочь легко переключаться между страницами или приложениями. Это также сократит количество физических нажатий кнопок (если они есть).

4. Ограниченные действия на экране

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

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

«Пользователь не будет жаловаться, если отображаемая на экране информация не соответствует его ожиданиям, но ему определенно будет жаль, если какая-то информация есть, но она недоступна».

5. Избегайте сложных функций или юзерфлоу

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

6. Непреднамеренные действия

Учитывая место расположения часов на теле человека, велика вероятность непреднамеренных действий на экране. Чтобы избежать таких действий или позволить пользователю исправить их, рекомендуется использовать такие жесты, как «Нажать и удерживать» для выполнения критически важных действий. В некоторых случаях может помочь простое действие «Отменить».

7. Поля и отступы

«Закон близости, один из гештальт принципов группирования, гласит, что объекты, находящиеся рядом или близко друг к другу, имеют тенденцию группироваться вместе и восприниматься как родственные».

Группировка помогает пользователям быстрее и эффективнее понимать и систематизировать информацию. В интерфейсе это может быть достигнуто с помощью полей и отступов между компонентами.

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

8. Кнопки и действия

При проектировании кнопок избегайте использования цвета, в качестве единственного способа демонстрации интерактивности. WatchOS использует форму прямоугольника с закругленными углами в качестве основного способа обозначения интерактивности кнопок и списков. Это гарантирует, что люди с дальтонизмом будут воспринимать информацию так же, как и любой другой пользователь. Кроме того, использование более ярких элементов на экране снижает время автономной работы девайса.

9. Типографика

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

Лучше не использовать причудливые шрифты или шрифты с засечками, поскольку они хуже читаются на маленьких экранах. Попробуйте выбрать семейства рубленых шрифтов, такие как Roboto, SF Text, Helvetica, которые обеспечивают лучший трекинг и размеры. Они предлагают множество стилей, которые удовлетворят все ваши потребности.

Вы должны проявить свою креативность в типографике, когда надо создать циферблаты.

10. Цвета

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

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

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

Google использует монохромные цветовые палитры, которые помогают различать элементы на экране. Google говорит: «Более темный фон больше подходит для социальной среды, так как делает экран менее навязчивым». А с OLED-дисплеями темные цвета экономят заряд батареи.

11. Микровзаимодействия

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

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

Исследователи обнаружили, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Анимация короче 100 мс является мгновенной и вообще не распознается пользователем.

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

12. Тактильные ощущения (виброотклик)

Наличие микровзаимодействий на экране делает интерфейс безупречным, но что, если пользователь дальтоник или ему нужны специальные возможности?

Именно тогда на сцену выходит «тактильный отклик», чтобы придать устройству индивидуальности. Apple уже создала набор тактильных ощущений. Вы можете проверить их здесь. Если вы хотите узнать больше о тактильных ощущениях, ранее я писал об этом в отдельной статье.

Убедитесь, что ваше тактильное поведение не конфликтует с поведением системы.

13. Уведомления

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

На изображении выше Apple считает, что это самая важная информация, которую нужно знать при получении уведомления:

• Из какого приложения?
• От кого?

В то время как на мобильном телефоне мы можем захотеть увидеть

• Из какого приложения?
• От кого?
• Когда оно было отправлено?
• Что говорится в сообщении?
• Действия и т. д.

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

Всегда создавайте интерфейс оповещений как можно проще. Потому что мы фокусируемся на контенте, а не на дизайне.

14. Ввод данных

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

15. Циферблаты

Проектируя циферблат, вы не можете ограничить свое творчество, но должны ограничить объем данных, который необходимо отображать на циферблате. Информация должна быть сосредоточена на том, что пользователь хочет увидеть с первого взгляда. Вот несколько вещей, которые Apple и Google показывают на своих циферблатах.

• Очевидно, что первое – это время и дата.
• Количество пропущенных уведомлений.
• Элементы управления плеером, если играет музыка.
• Частота пульса
• Погода
• Фитнес-показатели, такие как калории, пройденное расстояние, шаги и т. д.
• Возможность подключения устройства.
• Заряд батареи.

Простое неформальное исследование в кругу ваших друзей или коллег может дать вам больше информации о том, что обычно ваши пользователи ожидают от своих часов. Если это не поможет, вы всегда можете вдохновиться Google или Apple, которые уже провели для нас достаточно исследований.

16. Характеристики экрана

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

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

Протестируйте свой дизайн

Еда на вашей тарелке может выглядеть восхитительно, но можете ли вы гарантировать ее вкус?

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

Исходя из личного опыта рекомендую вам следующее. В инструменте дизайна всегда старайтесь поддерживать уровень масштабирования 100%. Это связано с тем, что при проектировании мы сохраняем масштаб окна на уровне 200% или 300%, из-за чего нам кажется, что все, что мы проектируем, разборчиво и прекрасно выглядит, но это не так.

Перевод статьи uxdesign.cc

При знакомстве с приложением пользователи предпочитают сразу же начать его использовать, даже если оно очень сложное. Люди хотят сразу решать свои задачи, а не тратить время на обучение или чтение документации. Это называется «Парадокс активного пользователя».

При реализации обучения через действие очень важно сделать всё так, чтобы пользователи могли учиться, не теряя при этом важные данные. Например, можно ограничить возможность выполнять чересчур длинную последовательность действий без видимого результата. То есть, нужно разбить длинный процесс на много коротких и визуализировать изменения на каждом шаге. Все это должно быть в режиме реального времени. Грубо говоря, потянул за ползунок – сразу увидел результат. Тогда пользователи успеют вернуться назад, если что-то пойдет не так.

Совет 2. Рассказывайте обо всем, что умеет приложение

Часто пользователи работают только с привычным набором функций приложения. В итоге получают меньше производительности, чем могли бы. При этом пользователи довольны – приложение работает, задачи выполняются, никаких претензий. Люди могут даже не знать, что используют ваше приложение в пол силы. Если не рассказать об этом – производительность так и будет падать (вы будете пилить новые функции, а пользоваться ими никто не будет).

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

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

Совет 3. Обеспечивайте пользователям гибкий и плавный путь

Одна из основных особенностей сложных приложений – неструктурированные цели в нелинейных рабочих процессах. Это значит, что пользователи могут не знать своей конечной цели, она определится в процессе выполнения задач после анализа данных. Например, дата-иллюстратору надо закрасить на карте мира все страны, где есть недостаток питьевой воды. У него нет конкретной цели, например, закрасить конкретную страну. Чтобы прийти к конечной цели, иллюстратору нужно вначале собрать, а потом проанализировать данные.

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

Например, в ситуации с иллюстратором, в приложение можно будет загрузить данные, там же их можно будет проанализировать, а потом в этом же приложении закрасить на карте все страны, где мало питьевой воды. Это будет плавный путь.

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

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

Совет 4. Помогайте пользователям отслеживать действия и мыслительные процессы

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

Чтобы помочь пользователям, разгрузите их рабочую память. Не заставляйте их запоминать свои действия и мыслительные процессы – пусть это делает приложение. Это можно реализовать с помощью заметок и комментариев. Возвращаясь ко второму совету этой статьи, подскажите пользователям, зачем нужны заметки и как оставлять комментарии.

Совет 5. Делайте так, чтобы все нужные инструменты и среды были доступны

Пользователи сложных приложений часто работают с несколькими инструментами и средами. Даже если основное приложение одно (например, 1С), другие тоже очень нужны (например, Excel). Если основное приложение не поддерживает обмен данными с другими нужными инструментами и рабочими пространствами, скорее всего это будет раздражать пользователя. Чтобы всё что нужно работало вместе, внедряют программные надстройки и специализированные функции.

Как это реализовать? Чтобы снизить нагрузку на переключение инструментов, надо поддержать переход из одной среды в другую как внутри, так и за пределами основного приложения. Для этого проектируют точки подключения между главным приложением и сторонними инструментами.

Совместимость – это очень важно. Чтобы выгрузить прайс-лист на 1000 позиций из Excel в 1С понадобится две секунды. Если забивать данные вручную – несколько дней.

Совет 6. Упрощайте без потери функциональности

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

Используйте поэтапное раскрытие функций. Показывайте дополнительные (расширенные) возможности, только если они нужны для решения текущей задачи или работе над текущим элементом. Например, если человек анализирует один пакет данных, не надо показывать ему инструменты для анализа нескольких потоков – сейчас это ни к чему, только запутает.

Отличный пример поэтапного раскрытия информации – доступ в документы Google. Пока не кликнешь «Доступ есть у всех по ссылке» – не увидишь выбор уровня разрешения: «читатель» или «редактор».

Совет 7. Упрощайте переход между главной и второстепенной информацией

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

Как сделать правильно? Раскрывайте вторичную информацию в главном окне или в той же среде, где находится основная. Если придется переключаться между вкладками – будет неудобно.

Совет 8. Выделяйте важную информацию визуально

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

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

Самое важное

Упрощайте без потери функциональности

Создавайте точки входа с полезными инструментами сторонних разработчиков

Помогайте пользователям сканировать важную информацию, давайте контекст там, где это необходимо

Приложение должно уметь отслеживать действия и мысли пользователей

Путь пользователя должен быть плавным и гибким (и не забывайте сохранять данные на каждом шаге)

Проектируйте с учетом Парадокса активного пользователя.