Интуитивно понятный интерфейс это: Интуитивно понятный интерфейс: 4 простых принципа

Интуитивно понятный интерфейс: 4 простых принципа

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

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

Принцип знакомого

1. Разные, но одинаковые
2. Когда мы заходим слишком далеко
3. Делаем интерфейс «знакомым»

Принцип единообразия

Принцип изучаемости

Принцип невидимости

Заключение

Принцип знакомого

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

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

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

1. Разные, но одинаковые

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

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

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

2. Когда мы заходим слишком далеко

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

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

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

3. Делаем интерфейс «знакомым»

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

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

Знакомые пользователям иконки музыкальных приложений

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

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

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

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

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

Пользовательские сценарии в UX-дизайне

Принцип единообразия

Второй принцип также прост. Интуитивно-понятный пользовательский интерфейс поддерживает единообразие. Каждый интерфейс должен иметь одно руководство по стилю (style guide) и постоянно следовать ему. Если вы где-то используете элемент с какими-то определенными визуальными (и функциональными) атрибутами, то вы должны и в дальнейшем использовать этот элемент с теми же самыми атрибутами. Не следует менять его стиль или функцию.

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

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

Принцип изучаемости

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

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

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

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

Интерактивные подсказки: как вывести онбординг на новый уровень

Принцип невидимости

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

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

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

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

Заключение

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

Очень часто мы игнорируем эти простые вещи и ищем нечто более сложное.  

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

Прокачайте свой онбординг!

По материалам: blog.alexdevero.com Изображение: freepik.com

Что на самом деле означает определение «интуитивно понятный» интерфейс

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

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

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

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

Интуитивность не должна быть целью дизайна

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

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

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

Разбор значения определения «интуитивно понятный»

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

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

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

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

• Заметность: видны ли важные элементы на экране? Чем заметнее элемент, тем больше вероятность того, что пользователи узнают о нем и о том, как его использовать.
• Обратная связь: когда пользователь предпринимает какие-либо действия, ясно ли ему, какое действие было предпринято и что было достигнуто этим действием?
• Ограничения: ограничивает ли интерфейс набор действий, которые может предпринять пользователь? Бесконечные возможности часто оставляют пользователя в замешательстве.
• Аффордансы: помогает ли дизайн людям понять, как взаимодействовать с определенными элементами? Суть заключается в том, чтобы дать пользователям «подсказки» о том, как работает каждый компонент.
• Очевидность: можно ли выяснить, как использовать объект, взаимодействуя с ним?
• Ориентация: знает ли пользователь, где он находится в структуре продукта в данный момент времени? Он знает, как двигаться вперед и назад?
• Ожидание: соответствует ли результат действия ожиданиям пользователей до выполнения этого действия?
• Эффективность: эффективен ли продукт, помогая пользователям выполнить задачу? Есть ли место для повышения эффективности, сокращения сценариев или ускорения результатов?

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

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

---

Перевод статьи Fabricio Teixeira

Интуитивный интерфейс | User Experience Office

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

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

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

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

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

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

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

Это больше, чем просто дизайн

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

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

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

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

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

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

1. Приветствую.

2. Я сяду.

3. Мне вручат меню.

4. Я выберу то, что хочу.

5. Мне принесут еду.

6. Я съем.

7. Я за это заплачу.

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

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

Помню, я встречал такое место в Италии много лет назад.

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

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

Как создавать интуитивно понятные дизайны

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

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

Существует два основных способа оценки ментальных моделей ваших пользователей:

Исследование пользователей

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

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

Юзабилити-тестирование

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

Вот несколько советов по созданию интуитивно понятного дизайна:

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

Вывод

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

Разработка интуитивно понятного пользовательского интерфейса | Ризки Мардита

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

Существуют различия между этими различными типами дизайна:

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

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

Из приведенных выше типов дизайна, на самом деле ответили некоторые люди воспринимаются.

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

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

1. Знать 2 вещи (цели)

• Бизнес-цели
• Цели пользователя

2. Визуальная иерархия и приоритет

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

3. Применение принципов гештальта

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

Теория гештальта — это фундаментальное знание, которое очень важно для визуального/UI-дизайнера. Вот некоторые основные принципы гештальта, которые я всегда использовал в процессе проектирования:

1. Фигура Основание
2. Близость
3. Сходство
4. Непрерывность
5. Общая область
6. Закрытие
7. Фокусная точка

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