Принципы создания пользовательских интерфейсов: 24. Принципы создания пользовательского интерфейса ПО АСОИУ. Процесс разработки (дизайна) интерфейса

24. Принципы создания пользовательского интерфейса ПО АСОИУ. Процесс разработки (дизайна) интерфейса

Интерфейс — совокупность средств, при помощи которых
пользователь общается с различными устройствами.

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

Если говорить
о самых общих принципах проектирования пользовательских интерфейсов, то можно
назвать три основных положения:

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

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

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

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

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

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

Принципы построения интерфейсов

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

Кошелек Миллера — емкость памяти ограничена семью цифрами

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

Бритва Оккама

·        любая задача должна решаться
минимальным числом действий;

·        логика этих действий должна быть
очевидной для пользователя;

·        движения курсора и даже глаз
пользователя должны быть оптимизированы.

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

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

Процесс разработки ПИ разбивается на этапы жизненного
цикла:

1. Анализ трудовой
деятельности пользователя, объединение бизнес-функций в роли.

2. Формулировка требований к
работе пользователя и выбор показателей оценки пользовательского интерфейса.

3. Разработка обобщенного
сценария взаимодействия пользователя с программным модулем (функциональной
модели) и его предварительная оценка пользователями и Заказчиком.

4. Разработка макетов и
прототипов ПИ и их оценка в деловой игре, выбор окончательного варианта.

5. Имплементация ПИ в коде,
создание тестовой версии.

6. Разработка средств
поддержки пользователя (пользовательские словари, подсказки, сообщения, помощь
и пр.) и их встраивание в программный код.

7. тестирование

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

Принципы создания пользовательских интерфейсов — Luxoft Training — Учёба.ру

Я б в нефтяники пошел!

Пройди тест, узнай свою будущую профессию и как её получить.

Химия и биотехнологии в РТУ МИРЭА

120 лет опыта подготовки

Сервис онлайн-консультаций

Выбери профессию, о которой потом не пожалеешь

Международный колледж искусств и коммуникаций

МКИК — современный колледж

Английский язык

Совместно с экспертами Wall Street English мы решили рассказать об английском языке так, чтобы его захотелось выучить.

15 правил безопасного поведения в интернете

Простые, но важные правила безопасного поведения в Сети.

Олимпиады для школьников

Перечень, календарь, уровни, льготы.

Первый экономический

Рассказываем о том, чем живёт и как устроен РЭУ имени Г.В. Плеханова.

Билет в Голландию

Участвуй в конкурсе и выиграй поездку в Голландию на обучение в одной из летних школ Университета Радбауд.

Цифровые герои

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

Работа будущего

Как новые технологии, научные открытия и инновации изменят ландшафт на рынке труда в ближайшие 20-30 лет

Профессии мечты

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

Экономическое образование

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

Гуманитарная сфера

Разговариваем с экспертами о важности гуманитарного образования и областях его применения на практике.

Молодые инженеры

Инженерные специальности становятся всё более востребованными и перспективными.

Табель о рангах

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

Карьера в нефтехимии

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

Принципы разработки пользовательского интерфейса — CMS Magazine

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

— Пол Рэнд 

Больше не нужно искать и обзванивать каждое диджитал-агентство

Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Интерфейсы существуют для инициации взаимодействия 

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

Ясность — задача №1

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

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

Любой ценой удерживайте внимание

Мы живем в мире раздражителей. В наше время сложно погрузиться в чтение – что-то постоянно отвлекает нас и пытается привлечь к себе внимание. А оно бесценно. Не перегружайте боковые панели вашего приложения раздражающими материалами, помните, для чего предназначен экран в первую очередь. Если кто-то читает – дайте ему дочитать до конца, прежде чем показывать рекламу (если без этого нельзя). Уважайте внимание и тогда не только ваши читатели станут счастливее, но и улучшатся ваши показатели. Когда главная цель – побудить к взаимодействию, внимание становится обязательным требованием. Удерживайте его любой ценой.

Дайте пользователям контроль

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

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

Прямое взаимодействие является наилучшим

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

Одно основное действие на экран

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

Оставляйте второстепенные действия на втором плане

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

Делайте следующий шаг естественным

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

Функциональность важнее внешности (действие важнее формы) 

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

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

Рейтинг представляет собой топ-100 из самых креативных команд России, Украины и Беларуси, а также подрейтинги относительно побед, одержанных в каком-либо конкретном конкурсе из шести:  «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards и FWA.

Согласованность имеет значение

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

Сильная визуальная иерархия – лучший вариант

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

Продуманная организация снижает когнитивную нагрузку

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

Непредопределенное выделение цветом

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

Прогрессивное раскрытие

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

Помогайте людям на лету

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

Решающий момент: точка входа

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

Важнее всего существующие проблемы

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

Лучший дизайн незаметен

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

Развивайте навыки в других дисциплинах

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

Интерфейсы существуют, чтобы ими пользовались

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

Оригинал статьи: http://bokardo. com/principles-of-user-interface-design/

Принципы веб-дизайна интерфейса пользователя

Эффективный интерфейс пользователя объединяет в себе две составляющие: приятный внешний вид и удобство использования. Чтобы создать такой интерфейс, нужно понимать основы: как пользователь взаимодействует с UI, чего он ожидает и что может стать источником потенциальных проблем. В этой заметке мы рассмотрим принципы проектирования графического интерфейса пользователя, без которых невозможно создание удобного и красивого UI для web’а.

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

1. Знайте своего пользователя

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

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

2. Используйте уже известные модели

Об этом легко забыть, но пользователи уже проводят кучу времени в других интерфейсах, будь то Facebook, Gmail или Flickr. Разберитесь, как они устроены и не придумывайте колесо. Используя уже известные модели, вы поможете пользователям быстро разобраться в новом продукте и завоюете их доверие.

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

3. Будьте последовательны

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

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

4. Создавайте визуальную иерархию

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

5. Предоставляйте фидбек и защищайте пользователя от случайных действий

Говорите пользователю, что происходит. Отправилось ли письмо? Загрузился ли файл? Поддерживается ли этот формат изображений? Убедитесь, что нельзя удалить все данные одним нажатием. Пользователю важно знать, что он не остался один на один со своими проблемами. Позаботьтесь, чтобы ему было комфортно.

6. Не показывайте все элементы управления сразу

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

7. Предоставляйте больше возможностей опытным пользователям

Поверьте, те, кто уже в сотый раз использует сервис, будут благодарны за возможность выполнять рутинные действия с помощью горячих клавиш. Такая функция доступна во множестве известных сервисов — от Google Docs до Github. А вот пример панели с горячими клавишами в сервисе по созданию интеллект-карт Coggle:

8. Не показывайте пользователю пустую страницу

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

В своей книге «Don’t Make Me Think» Стив Круг утверждает: интерфейс должен быть самодостаточным и объяснять сам себя. Если чтобы понять, как пользоваться навигацией, нужна инструкция, — на лицо пример плохого UI.

9. Не усложняйте

Прежде, чем добавить еще один элемент UI, спросите себя, облегчит ли он жизнь пользователя или только заберет у него ценное время. Вот как изменился сайт American Airlines после редизайна (справа):

10. Тестируйте

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

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

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

Поэтому на «тяжелых» сайтах важная информация размещается слева, там, где ее ожидает увидеть пользователь. Этот паттерн используют CNN и New York Times.

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

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

Мы, студия stfalcon.com, разрабатываем пользовательские интерфейсы для MVP, сайтов и мобильных приложений и с удовольствием создадим UI, который будет радовать ваших пользователей.

1.

1. Основные принципы разработки пользовательского интерфейса

Создание качественного
интерфейса предполагает реализацию
принципа «интересы пользователя превыше
всего» т соответствующую методологию
разработки всего программного продукта.
В англоязычной литературе для описания
такого подхода используется термин
User-centered
Design
(«Разработка, ориентированная на
пользователя»). Эта технология, кроме
всего прочего, предполагает как можно
более раннее проектирование интерфейса
с последующим его развитием в процессе
разработки самого программного продукта.

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

ЕСТЕСТВЕННОСТЬ
ИНТЕРФЕЙСА

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

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

СОГЛАСОВАННОСТЬ
ИНТЕРФЕЙСА

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

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

Согласованность
в пределах продукта

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

Согласованность
в пределах рабочей среды

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

Согласованность
в использовании метафор

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

ДРУЖЕСТВЕННОСТЬ
ИНТЕРФЕЙСА

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

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

1.2 Основные принципы разработки ПИ » СтудИзба

1.2. ОСНОВНЫЕ ПРИНЦИПЫ РАЗРАБОТКИ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА

Создание качественного интерфейса требует значительно большего, чем просто соблюдение некоторых инструкций. Оно предполагает реализацию принципа «ин­тересы пользователя превыше всего» и соответствующую методологию разработки всего программного продукта. В англоязычной литературе для описания такого под­хода используется термин User-centered Design —UCD («Разработка, ориентированная на пользователя»).   Эта технология, кроме всего прочего, предполагает как можно более раннее Проектирование интерфейса с последующим его развитием в процессе разработки самого программного продукта.

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

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

ЕСТЕСТВЕННОСТЬ ИНТЕРФЕЙСА

Естественный интерфейс — такой, который не вынуждает пользователя суще­ственно изменять привычные для него способы решения задачи. Это, в частности, означает, что сообщения и результаты, выдаваемые приложением, не должны тре­бовать дополнительных пояснений. Целесообразно также сохранить систему обо­значений и терминологию, используемые в данной предметной области.

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

СОГЛАСОВАННОСТЬ ИНТЕРФЕЙСА

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

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

Согласованность в пределах продукта

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

Согласованность в пределах рабочей среды

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

Согласованность в использовании метафор

Если поведение некоторого программного объекта выходит за рамки того, что обычно подразумевается под соответствующей ему метафорой, у пользователя мо­гут возникнуть трудности при работе с таким объектом. Например, если для про­граммного объекта Корзина определить операцию Запуск, то для уяснения ее смыс­ла пользователю, скорее всего, потребуется посторонняя помощь.

ДРУЖЕСТВЕННОСТЬ ИНТЕРФЕЙСА (ПРИНЦИП «ПРОЩЕНИЯ» ПОЛЬЗОВАТЕЛЯ)

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

Даже при наличии хорошо спроектированного интерфейса пользователи могут делать те или иные ошибки. Эти ошибки могут быть как «физического» типа (слу­чайный выбор неправильной команды или данных) так и «логического» (принятие неправильного решения на выбор команды или данных). Эффективный интерфейс должен позволять предотвращать ситуации, которые, вероятно закончатся ошибка­ми. Он также должен уметь адаптироваться к потенциальным ошибкам пользовате­ля и облегчать ему процесс устранения последствий таких ошибок.

ПРИНЦИП «ОБРАТНОЙ СВЯЗИ»

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

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

ПРОСТОТА ИНТЕРФЕЙСА

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

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

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

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

ГИБКОСТЬ ИНТЕРФЕЙСА

Гибкость интерфейса — это его способность учитывать уровень подготовки и производительность труда пользователя. Гибкость предполагает возможность изменения структуры диалога и/или входных данных. Концепция гибкого (адаптивного) интерфейса в настоящее время является одной из основных облас­тей исследования взаимодействия человека и ЭВМ. Основная проблема состоит не в том, как организовать изменения в диалоге, а в том, какие признаки нужно использовать для определения необходимости внесения изменений и их сути.

ЭСТЕТИЧЕСКАЯ ПРИВЛЕКАТЕЛЬНОСТЬ

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

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

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

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

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

3. Скорость решения задачи с помощью данного приложения; при этом должно оцениваться не быстродействие системы и не скорость ввода данных с клавиатуры, а время, необходимое для достижения цели решаемой задачи. Исходя из этого, крите­рий оценки по данному показателю может быть сформулирован, например, так: пользо­ватель должен обработать за час не менее 20 документов с ошибкой не более 1%.

4. Субъективная удовлетворенность пользователя при работе с системой (кото­рая количественно может быть выражена в процентах или оценкой по n-бальной шкале).

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

• Интерфейс пользователя необходимо проектировать и разрабатывать как от­дельный компонент создаваемого приложения.

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

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

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

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

Основные принципы разработки пользовательского интерфейса

1. Основные принципы разработки пользовательского интерфейса

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

4. ЕСТЕСТВЕННОСТЬ ИНТЕРФЕЙСА

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

5. СОГЛАСОВАННОСТЬ ИНТЕРФЕЙСА

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

7. ДРУЖЕСТВЕННОСТЬ ИНТЕРФЕЙСА

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

8. ПРИНЦИП «ОБРАТНОЙ СВЯЗИ»

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

9. ПРОСТОТА ИНТЕРФЕЙСА

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

10. ГИБКОСТЬ ИНТЕРФЕЙСА

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

11. ЭСТЕТИЧЕСКАЯ ПРИВЛЕКАТЕЛЬНОСТЬ

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

4 золотых правила дизайна пользовательского интерфейса

Пользовательский интерфейс (UI) является важной частью любого программного продукта. Когда все сделано хорошо, пользователи этого даже не замечают. Когда что-то сделано плохо, пользователи не могут обойтись без этого, чтобы эффективно использовать продукт. Чтобы увеличить шансы на успех при создании пользовательских интерфейсов, большинство дизайнеров следуют принципам проектирования интерфейсов. Принципы проектирования интерфейсов представляют собой высокоуровневые концепции, которые используются для разработки программного обеспечения. В этой статье я поделюсь несколькими фундаментальными принципами.Они основаны на «10 эвристиках юзабилити для дизайна пользовательского интерфейса» Якоба Нильсена, «Восьми золотых правилах дизайна интерфейсов» Бена Шнейдермана и «Принципах дизайна взаимодействия» Брюса Тоньяццини. Большинство принципов применимо к любым интерактивным системам — традиционным средам графического интерфейса пользователя (таким как настольные и мобильные приложения, веб-сайты) и интерфейсам без графического интерфейса пользователя (например, системам голосового взаимодействия).

Принципы разработки пользовательского интерфейса:

1. Предоставьте пользователям возможность управлять интерфейсом
2. Сделайте удобное взаимодействие с продуктом
3. Снизьте когнитивную нагрузку
4. Сделайте пользовательский интерфейс согласованным

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

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

Сделайте действия обратимыми — прощайте

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

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

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

Создание удобного интерфейса

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

• Обеспечить визуальные подсказки . Визуальные подсказки служат напоминанием для пользователей. Позвольте пользователям легко перемещаться по интерфейсу, предоставляя ориентиры при перемещении по интерфейсу продукта. Заголовки страниц, выделение выбранных в данный момент параметров навигации и другие наглядные пособия позволяют пользователям сразу увидеть, где они находятся в интерфейсе.Пользователь никогда не должен задаваться вопросом: «Где я?» или «Как я попал на этот экран?»
• Предсказуемость . Пользователям должны быть предоставлены подсказки, которые помогут им предсказать результат действия. Пользователь никогда не должен задаваться вопросом: «Что мне нужно нажать, чтобы выполнить свою задачу?» или «Для чего эта кнопка?»

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

Обеспечьте информативную обратную связь — будьте признательны

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

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

Обратная связь подтверждает, что действие выполнено успешно.
GIF от Колина Гарвена.

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

Пользователь видит зеленую галочку, когда требование пароля удовлетворено.
GIF от Эммануэля Торреса

Показать статус системы

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

Хороший интерфейс
может утешить пользователей, показывая прогресс, пока система выполняет задачу.
Dropbox показывает статус загрузки документа: текущий прогресс и
количество оставшегося времени.

Для пользователей с разным уровнем квалификации

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

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

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

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

Удалите все элементы, которые не помогают вашим пользователям

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

Хорошим примером приложения, которое следует подходу «меньше значит больше», избегая перегрузки интерфейса контентом или функциями, является iA Writer.

Изображение от iA Writer

Интерфейс приложения iA Writer представляет собой чистый лист для набора текста без отвлекающих факторов.Это позволяет пользователям сосредоточиться на том, что они пишут, и скрывает все остальное.

Не запрашивать у пользователей данные, которые они уже ввели

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

Избегайте жаргона и системных терминов

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

Используйте повседневный язык, а не язык систем или разработчика.
Изображение от Think With Google

Применение закона Фиттса к интерактивным элементам

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

D — расстояние от начальной точки курсора; W — ширина цели (закон Фиттса). Изображение от Apple

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

Конструкция доступных интерфейсов

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

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

Использование метафор реального мира

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

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

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

Изображение Рамакриша

Инженер для ошибок

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

Хороший интерфейс содержит точные, вежливые и конструктивные сообщения об ошибках.

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

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

Защитить работу пользователя

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

3. Снизить когнитивную нагрузку

Когнитивная
нагрузка — это количество умственной вычислительной мощности, необходимое для использования продукта. Его
Лучше не заставлять пользователей слишком много думать / работать, чтобы использовать ваш продукт.

Разделение на части для последовательностей информации или действий

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

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

Проще сканировать и вводить фрагменты чисел вместо целого числа.

Уменьшить количество действий, необходимых для выполнения задачи

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

Признание превыше отзыва

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

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

Изображение предоставлено Google Hangouts

Повышение четкости изображения

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

При разработке макетов:

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

4. Обеспечьте согласованность пользовательских интерфейсов

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

Визуальная согласованность (стиль)

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

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

Функциональная согласованность (поведение)

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

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

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

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

Корзина — это привычная терминология; Торговый центр не является и может запутать интернет-покупателей.

Заключение

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

Основные принципы проектирования пользовательского интерфейса

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

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

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

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

Эти 14 принципов дизайна пользовательского интерфейса порадуют ваших пользователей — людей, которые используют ваш продукт, веб-сайт или приложение.

1. Поместите пользователя в центр

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

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

2. Стремление к ясности

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

3. Минимизируйте действия и шаги на экране

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

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

4. Простота

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

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

5. Будьте последовательны

Согласованность создает знакомство, и знакомые интерфейсы, естественно, более удобны.Насколько неприятно было бы сесть за руль автомобиля, когда тормоз находится справа, а акселератор — слева? Или заполните веб-форму, нажав красную кнопку «Отправить» и зеленую кнопку «Удалить».

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

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

Дизайн-система — отличный способ обеспечить единообразие дизайна пользовательского интерфейса.

6. Ваша цель: сделать дизайн пользовательского интерфейса невидимым

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

7. Обеспечьте полезную обратную связь

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

Обратная связь помогает ответить на вопросы в четырех областях:

1. Расположение: Вы здесь.
2. Статус: Что происходит? Это все еще продолжается?
3. Будущий статус: что дальше?
4. Результаты и результаты: Эй, что случилось?

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

8. Снижение когнитивной нагрузки

Многие из этих принципов проектирования пользовательского интерфейса служат для снижения когнитивной нагрузки на пользователей. По сути, не заставляйте пользователей думать (тоже полезный принцип UX-дизайна). Есть несколько распространенных способов снизить когнитивную нагрузку и упростить использование вашего веб-сайта или приложения:

• Действия и информация с фрагментами. Большинство людей могут обрабатывать семь плюс-минус два фрагмента информации при их обработке.Например, разделение телефонных номеров обычным способом 3-3-4, а не 10-значной последовательностью, приводит к меньшему количеству ошибок.
• Помните правило трех щелчков мышью — для поиска любой информации не требуется более трех щелчков мышью
• Минимизируйте отзыв в пользу распознавания — общие изображения и значки в контексте помогают пользователям определять функциональные возможности, думать о мусорной корзине и колокольчике значки (обычно используются для уведомлений) и другие часто используемые значки, которые запускают уже существующую память. Это также означает, что не следует брать широко используемый значок, который понимает большинство людей, а затем использовать его для обозначения чего-то еще, вы просто запутаете людей.

9. Сделайте его доступным

Дизайн пользовательского интерфейса должен учитывать проблемы доступности. В сети это часто означает обеспечение доступа к продукту и его использования для лиц с нарушениями зрения. Не забывайте и о дальтонизме. Примерно 1 из 12 мужчин (это примерно 8%) и 1 из 200 женщин (примерно 0,5%) в той или иной степени страдают дальтонизмом. Используйте цвет, чтобы подчеркнуть и подчеркнуть, но не полагайтесь исключительно на цвет для передачи информации.

10. Включите отзывы пользователей в пользовательский интерфейс

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

11. Гибкость

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

12. Визуальная структура

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

13. Диалоги должны завершиться

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

14. Обеспечьте четкий следующий шаг

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

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

Принципы разработки пользовательского интерфейса

10 принципов хорошего (UI) дизайна | Крис Р Беккер

Обсуждение 10 принципов хорошего дизайна Дитера Рамса применительно к пользовательским интерфейсам.

Ознакомьтесь с принципами здесь: http://www.manifestoproject.it/ten-principles-for-good-design/

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

http://www.zmescience.com/other/leap-motion-user-interface-revolution-0525423/

Релевантно для пользовательских интерфейсов

• Слово «I»: инновации широко используются в пользовательском интерфейсе Дизайн. Цель состоит в том, чтобы рассмотреть новые интерфейсы и взаимодействия, которые являются инновационными для вашего пользователя, что может означать «Меньше пользовательского интерфейса» или вообще не «пользовательский интерфейс».
• Ручка для кружки инновационна из-за ее доступности, аналогично пользовательский интерфейс должен «исчезать» на заднем плане, а не привлекать внимание к себе.
• Прочтите статью Марка Визера: Компьютер для 21 века. https://www.ics.uci.edu/~corps/phaseii/Weiser-Computer21stCentury-SciAm.pdf

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

https://uxplanet.org/small-elements-big-impact-types-and-functions-of-ui-icons-87c6a74d366e

В отношении пользовательских интерфейсов

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

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

http://www.fromupnorth.com/user-interface-inspiration-623/

Релевантно для пользовательских интерфейсов

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

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

http://megsnotplural.tumblr.com/page/3

Релевантно для пользовательских интерфейсов

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

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

http: // mindsparklemag.com /? sites / sans-form_html

Релевантно для пользовательских интерфейсов

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

https://www.behance.net/gallery/7196565/Authentic-Weather

Релевантно для пользовательских интерфейсов

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

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

http://cl.ly/image/0U1W0h09383Q

Релевантно для пользовательских интерфейсов

• Пользовательский интерфейс — это система, которую можно улучшать сверхурочно, а не разрушать, и перестраивать каждые 6 месяцев. (Я смотрю на вас, UBER)
• Функции пользовательского интерфейса должны быть протестированы, чтобы убедиться, что они актуальны для пользователей.Используемые функции пользовательского интерфейса — это функции пользовательского интерфейса, которые могут работать сверхурочно, но только в том случае, если их можно использовать.

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

https://dribbble.com/shots/1423171-Some-Analytics/attachments/208613

Релевантно для пользовательских интерфейсов

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

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

https://crudo.nl/

Релевантно для пользовательских интерфейсов

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

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

https://www.awwwards.com/websites/minimal/?page=2

Релевантно для пользовательских интерфейсов

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

Продолжайте разрабатывать хороший (UI) дизайн, и вот несколько способов продолжать это делать.

1. https://uxdesign.cc/good-design-vs-bad-design-examples-from-everyday-experiences-18a7d1ba002c
2. https://blog.usejournal.com/great-interfaces-are-made- of-good-typography-765f550493b2
3. https://uxdesign.cc/the-power-of-good-user-interface-and-how-it-enhances-engagement-the-new-currency-in-the-digital -43a59bcd9bda

Следуй за мной Chris R Becker
Twitter: https: // twitter.com / cbecker
Моя книга:

Поделитесь этим с друзьями.

Принципы разработки пользовательского интерфейса | by Aman Sahota

«

Проектировать — это гораздо больше, чем просто собирать, заказывать или даже редактировать; он должен добавлять ценность и смысл, освещать, упрощать, уточнить, модифицировать, возвеличивать, драматизировать, убеждать и, возможно, даже развлекать. ”- Пол Рэнд

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

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

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

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

Мы живем в мире отвлекающих факторов.

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

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

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

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

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

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

Взаимодействие должно быть частым.

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

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

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

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

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

https://dribbble.com/bazentalks

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

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

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

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

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

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

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

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

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

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

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

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

https://blog.prototypr.io/@justinramedia

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

Что делает хороший пользовательский интерфейс? 13 принципов дизайна пользовательского интерфейса | by Inkbot Design

Что делает хороший пользовательский интерфейс? 13 принципов дизайна пользовательского интерфейса

Креативная графика, привлекательный дизайн логотипа или замысловатая анимация? Что отличает хороший пользовательский интерфейс?

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

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

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

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

UI — это не привлекательная графика и дизайн элементов. Пользовательский интерфейс определяет взаимодействие между пользователем и продуктом.

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

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

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

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

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

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

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

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

Вам также может понравиться: The Ultimate Guide to Color Psychology in Branding

Хорошо продуманный пользовательский интерфейс ставит во главу угла взаимодействие с пользователем.

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

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

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

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

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

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

Проблема согласованности постоянна при хорошем дизайне пользовательского интерфейса.

Это касается всего: от цветов, иконок и шрифтов до размещения меню и кнопок.

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

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

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

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

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

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

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

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

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

Вот почему иерархия — это внутренняя часть успешного пользовательского интерфейса.

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

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

Вам также могут понравиться: 7 проверенных стратегий для создания изображений, оптимизированных для SEO

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

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

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

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

Более того, визуальный аспект пользовательского дизайна должен усиливать функциональность.

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

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

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

Пользователь случайно удалил важный файл? Предложите способ его быстрого восстановления.

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

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

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

Возьмем, к примеру, электронную коммерцию.

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

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

Превратить упреждающий подход в обледенение тщательно разработанного пользовательского интерфейса — всегда хорошая идея.

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

Такие элементы делают интерфейс более интуитивным и удобным.

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

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

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

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

Вам также могут понравиться: Лучшие приложения для рисования для iPad и iPhone

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

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

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

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

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

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

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

Следование основным и хорошо известным стандартам дизайна для Android от Google и iOS от Apple — хорошая идея.

Например, возьмем строку поиска.

Перемещать его сверху вниз — не лучшая идея.

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

Создать красивый пользовательский интерфейс просто.

Создание функционального и удобного интерфейса — это совсем другая история.

Итак, повторим все, что вы узнали.

В хорошем пользовательском интерфейсе используются следующие принципы:

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

Эти советы и подходы используются ведущими цифровыми компаниями, такими как Apple и Google.

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

Автор Биография: Ана Ластовецкая — технический писатель в компании MLSDev, украинской компании по разработке мобильных и веб-приложений. Она занимается исследованиями в области технологий для создания обучающего контента по различным темам, включая разработку приложений, дизайн UX / UI, технические и бизнес-консультации и т. Д. Возможность предоставлять информацию людям, которые хотят больше узнать о процессах разработки приложений и ИТ. это то, что вдохновляет Ану.Вы можете связаться с ней через LinkedIn или написать по адресу [email protected].

15 принципов проектирования пользовательского интерфейса для улучшения веб-сайтов

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

Слушайте этот пост и подпишитесь с помощью Apple Podcasts, Google Play, Spotify или RSS

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

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

Tweet this

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

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

Мы начинаем с рассмотрения основ удобства использования.

1. Не заставляйте пользователя думать

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

2. Дело не в дизайне

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

Веб-сайт — это контент и функциональность, а не дизайн.

Расскажите об этом

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

3. Держите пользователя под контролем

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

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

4. Дизайн для взаимодействия

Важно помнить, что в конечном итоге Интернет — это интерактивная среда, и наши проекты должны это учитывать. Кнопки должны выглядеть и вести себя как кнопки. То же самое относится и к ссылкам.

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

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

5. Сосредоточьтесь на одном действии за раз

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

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

См. Также — 30 убедительных примеров успешного призыва к действию

6. Разбейте плотный контент на блоки

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

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

Как отмечает Джефф Дэвидсон в своем посте «Самое важное правило в UX-дизайне, которое все нарушает, фрагменты могут помочь быстрее обрабатывать информацию.

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

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

8. Создайте сильную визуальную иерархию

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

Размер, цвет и положение — все это играет роль в создании визуальной иерархии и ориентировании пользователя по странице.

9. Будьте предсказуемы

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

Мой совет: если вы хотите поэкспериментировать (а вам следует), делайте это на сторонних проектах или на определенных веб-сайтах, где уместно исследование.

См. Также: «Конвергенция дизайна» — это не ругательство

10. Используйте эстетику, чтобы настроить пользователей в нужное русло

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

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

Дизайн игрового автомата

— хороший пример роли эстетики в формировании пользовательского опыта.

11. Изображение должно иметь четкую цель

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

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

12. Поддержка инклюзивности

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

Делать предположения о нашей аудитории и ее потребностях в доступности опасно.

См. Также: «Доступность — это не то, что вы думаете»

13. Соответствие ментальной модели пользователя

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

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

14. Тестирование и повторение

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

См. Также — Лучшие инструменты UX-дизайна, необходимые для тестирования

Хороший дизайн не возникает полностью из головы дизайнера.Вместо этого он развивается посредством тестирования и итераций.

Напишите в Твиттере об этом отличном дизайне

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

15. Приоритет производительности

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

Низкая производительность существенно влияет на конверсию и просмотры страниц.

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

См. Также — Почему производительность — лучший способ улучшить взаимодействие с пользователем?

Являются ли принципы проектирования пользовательского интерфейса ограничивающими?

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

Ограничивают ли принципы дизайна пользовательского интерфейса? Абсолютно. Однако они не сдерживают творчества или инноваций. Творчество и инновации n происходят из-за ограничений, а не вопреки им.

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

.