Что на самом деле означает определение «интуитивно понятный» интерфейс — UXPUB
Время от времени я натыкаюсь на дизайн-документ, в котором упоминается словосочетание «интуитивно понятный». Это может быть краткое изложение проекта или документ с требованиями, в котором говорится, что «опыт должен быть интуитивно понятным и лучшим в своем классе для наших пользователей». Его можно найти в сборнике принципов дизайна компании, где-то рядом со словом «восхитительный» и оно оставляет много места для интерпретации.
Проблема словосочетания «интуитивно понятный» заключается в том, что каждый человек понимает его по-своему: продукт, который интуитивно понятен для меня, может быть не понятен для моего отца.
Никто не использует это словосочетание по своей наивности или, как альтернативу слову «хороший». Они используют его, как напоминание, что важно, чтобы на протяжении всего процесса проектирования простота опыта была приоритетом над менее важными вещами.
Конечно, до тех пор, пока не наступит дедлайн и ключевые показатели эффективности бизнеса не станут более агрессивными.
Интуитивность не должна быть целью дизайна
Вы видели хоть один документ с требованиями к продукту, в котором было четко указано, что определенный продукт не должен быть интуитивно понятным?
Для клиента или заинтересованной стороны, простота использования – это первое, что они ждут от продукта. Все, что не является интуитивно понятным в использовании, может повлиять на коэффициент конверсии, уровень вовлеченности и любой другой показатель, который делает продукт логически жизнеспособным.
Для дизайнера, простота использования должна быть показателем качества его работы, а не функцией, которую вы добавляете или убираете, в своих проектах.
Разбор значения определения «интуитивно понятный»
Проблема определения «интуитивно понятный» заключается в том, что каждый человек понимает его по-своему: продукт, который интуитивно понятен для меня, может быть не понятен для моего отца.
Определение интуитивно понятный зависит от слишком многих факторов, чтобы дизайнеры могли стандартизировать значение этого термина: возраст пользователя, пол, культурные особенности, техническая подкованность, предыдущий опыт работы с подобными продуктами – и этот список можно продолжать.
В общем, интуитивно понятный означает простой в использовании.
- Заметность: видны ли важные элементы на экране? Чем заметнее элемент, тем больше вероятность того, что пользователи узнают о нем и о том, как его использовать.
- Обратная связь: когда пользователь предпринимает какие-либо действия, ясно ли ему, какое действие было предпринято и что было достигнуто этим действием?
- Ограничения:
- Аффордансы: помогает ли дизайн людям понять, как взаимодействовать с определенными элементами? Суть заключается в том, чтобы дать пользователям «подсказки» о том, как работает каждый компонент.
- Очевидность: можно ли выяснить, как использовать объект, взаимодействуя с ним?
- Ориентация: знает ли пользователь, где он находится в структуре продукта в данный момент времени? Он знает, как двигаться вперед и назад?
- Ожидание: соответствует ли результат действия ожиданиям пользователей до выполнения этого действия?
- Эффективность: эффективен ли продукт, помогая пользователям выполнить задачу? Есть ли место для повышения эффективности, сокращения сценариев или ускорения результатов?
Для дальнейшего чтения по теме, прочтите книгу Дональда Нормана «Дизайн привычных вещей». Каждый цифровой дизайнер должен ее прочесть.
Надеемся, что в следующий раз, когда в разговоре всплывет словосочетание «интуитивно понятный», вы поймете, что на самом деле имел в виду собеседник.
Юзабилити или интуитивно понятный интерфейс
Многие начинающие веб-мастера и владельцы сайтов создают свои молодые сервисы так, как им удобно. И совсем не задумываются над тем, что посетителям их страниц это может показаться совсем с другой стороны. Речь идет о юзабилити сайтов.
Что такое юзабилити?
Юзабилити определяет, насколько удобно обычному пользователю сориентироваться на страницах того или иного ресурса.
Есть 5 основных факторов юзабилити сайтов:
- Обучаемость: насколько удобно и легко пользователь, который впервые попал на сайт, может выполнить простейшие задачи.
- Эффективность: насколько быстро пользователь сможет повторить выполненные действия снова.
- Запоминаемость: насколько быстро пользователь сможет сориентироваться на сайте, посетив его второй раз.
- Ошибки: какое количество ошибок делает пользователь, насколько эти ошибки серьезны, и как легко их можно исправить.
- Удовлетворенность: насколько пользователю в целом приятно пользоваться данным ресурсом.
Юзабилити – это одно из главных условий жизни и развития сайта. Если работа с сайтом ставит перед посетителем ряд трудностей, то, скорее всего, он поспешит покинуть такой сайт и вряд ли когда-то еще вернется. Вряд ли он станет изучать всевозможные курсы о том, как правильно работать с сайтами. В сети интернет еще множество ресурсов, которые также могут ему подойти.
Существует закон юзабилити – сайты должны быть простыми и удобными для всех пользователей, независимо от уровня подготовки. Как правило, владельцы ресурсов, в первую очередь, озабочены количеством своих продаж на сайтах, и только потом начинают думать о комфорте пребывания на них пользователей. А причиной успешного повышения продаж является именно дружеское отношение пользователя и удобство сайта.
Многие считают, что у каждого сайта найдется свой посетитель. Но, даже если сайт находится в верхних позициях поисковой выдачи и у него есть посещаемость, это еще не значит, что посетителям приятно на нем находиться.
Юзабилити сайтов можно оформить довольно просто. Походите по сайтам успешных конкурентов, сделайте выводы и придумайте что-то свое, что-то оригинальное. Это не сложно. Главное – правильно выбрать именно то, что действительно «работает на плюс».
Не надо размышлять о том, как удобно будет Вам находится на своем сайте. Поставьте себя на место посетителя. Вы ведь не собираетесь у себя что-то покупать? Но, не смотря на это, Ваше юзабилити должно быть настолько безупречным, чтобы Вы действительно захотели осуществить покупку у самого себя. Мы поможем вам справиться с подобной задачей – создать интересный и легкий в «обживании» сайт!
Почему интуитивно понятный интерфейс важен для веб-дизайна и разработки программного обеспечения
Каждый веб — дизайнер или разработчик программного обеспечения должны тщательно рассмотреть вопрос о пользовательском интерфейсе, потому что если вы намерены сделать успешным ваше приложение, вы должны спросить , как структурировать информацию и предоставить ее интуитивно понятным и простым способом.
Что отличает действительный пользовательский интерфейс?
В дизайне пользовательский интерфейс должен быть настроен в соответствии с целью . Как правило, прежде всего вам нужно сосредоточиться на графическом интерфейсе; функциональность, простота использования и эстетика являются решающими критериями для хорошего пользовательского опыта.
При разработке графического интерфейса вы никогда не должны упускать из виду фактор удобства использования : если приложение сложно использовать, привлекательного дизайна будет недостаточно, чтобы убедить пользователя в вашем предложении.
Чтобы оптимизировать веб-сайт или приложение, обычно необходимо провести подробные тесты. Исследования с пользователями могут обеспечить одинаково полезные результаты, такие как технические измерения, благодаря анализу с использованием тепловой карты . Таким образом отображается удобство использования: поведение пользователя восстанавливается с помощью отслеживания кликов, прокрутки, перемещения мыши или глаз и последующего отображения с хроматическими градациями.
Дизайн должен поддерживать функциональность графического интерфейса. Следовательно, структура должна быть ясной и хорошо организованной. Это не означает, что дизайнеры не могут эксперементировать: важно знать привычки использования цели, не ограничивая функциональность дизайном.
Почему интуитивно понятный интерфейс настолько важен
Попробуем прояснить это, используя пример: символ бабочки может быть красивым и с определенной вероятностью также понравится одной или другой целевой аудитории. Но если он используется как значок кнопки «Сохранить», непосредственность программы придется оплачивать последствия дизайна, так как практически никто не связывает бабочку с процессом запоминания. Вместо этого выбор диска как значка будет сразу понятен: поскольку даже если сам носитель устарел, он всегда будет использоваться в качестве символа для процесса запоминания.
Пользователи ожидают увидеть этот символ и искать его почти инстинктивно, как это происходит и с другими стандартными значками. Следовательно, для планирования хорошего пользовательского опыта и графического интерфейса, который может быть понят интуитивно, следует принимать во внимание символические условные обозначения.
Приведенный пример показывает, что веб-дизайнер или разработчик программного обеспечения всегда должны находить баланс между эстетикой и функциональностью, чтобы быть успешным. Оптимизация пользовательского интерфейса является основополагающим фактором, гарантирующим пользователю наилучший опыт . Наконец, в зависимости от ориентации веб-сайта или программного обеспечения это приводит к большему количеству конверсий, рекомендаций и маркетингу вирусного продукта, а затем поддерживается клиентом.
В дополнение к графическому интерфейсу также стоит интегрировать дополнительные интерфейсы : например, если вы можете использовать голосовое управление с помощью приложения или если ноутбук работает с сенсорным экраном, результат будет более доступным и приведет к лучшему пользовательскому опыту. Таким образом, пользователи имеют более широкий спектр возможностей для использования продукта. Это означает, что существует большая гибкость и увеличивается диапазон действий приложения и продукта.
Какую роль играет графический интерфейс в области seo?
Действительный графический интерфейс также оказывает положительное влияние на оптимизацию поисковых систем (SEO). Если пользователи могут перемещаться без проблем, просматривая ваш веб-сайт, то они будут хорошо и охотно тратить время на изучение : существенный фактор , поскольку поисковые системы учитывают время, проведенное пользователем на страницах сайта. По этой причине, когда вы разрабатываете графический интерфейс вашего сайта, вы всегда должны стараться поставить себя на место посетителя, который впервые видит ваш проект.
Если пользователю что-то не нравится при первом посещении ресурса, он сразу же оставляет страницу и начинает искать лучшую альтернативу. Таким образом, ключевая действующая концепция здесь, как и разработка программного обеспечения, — это интуитивная навигация.
Например, вставка полезных внутренних ссылок может помочь вам в создании хорошей навигации: таким образом посетители могут перемещаться с одной страницы на другую. Кроме того, за этими ссылками следуют поисковые роботы. Поэтому пути всегда должны быть ясными и не слишком длинными. Разумным положением является навигационная панель , которая делает интерфейс более удобным для пользователя, потому что посетитель всегда может держать под контролем, свое местоположение на сайте и знает, куда вернуться.
Для этой цели путь, сделанный на веб-сайте, указывается в дополнение к строкам меню, расположенным вверху или сбоку. Например, в интернет-магазине одежды может появиться следующее: Домашняя страница — Мода для женщин — Брюки — Джинсы. Обычно подобная навигационная панель находится в центральной части над содержимым.
Пользовательский интерфейс: лучшие примеры из мира веб-дизайна
Поскольку существует несколько типов пользовательских интерфейсов, список примеров для каждого из них не представляется возможным. Однако следующие примеры веб-дизайна содержат основные рекомендации для интуитивного интерфейса и показывают их конкретное использование.
Evernote
Evernote — это программа для создания заметок. Письменные заметки легко синхронизируются, чтобы пользователь мог использовать собственные аннотированные идеи с любого устройства. Графический интерфейс исходной страницы конденсирует очень элегантные функции, области применения и преимущества, что делает использование приложения легким.
Домашняя страница Evernote сводится к минимуму без пренебрежения эстетическим фактором. Такой ясный и приятный внешний вид сразу же вдохновляет на простоту и интуитивное использование приложения. Источник: https://evernote.com/intl/ru/
Регистрационная форма разработана трезво и существенно. Требуется только адрес электронной почты и пароль, после которого вы уже можете начать. Такая структура определенно более удобна для пользователя, чем километровая форма ввода. Еще удобнее зарегистрировать аккаунт Google без необходимости создания специального профиля. Еще одна важная функция, сразу видимая пользователю, — это доступ с любого устройства и в любое время.
Evernote доступен как родное приложение практически для каждой платформы. Графический интерфейс веб-приложения является отзывчивым, поэтому он отлично адаптируется к любому размеру экрана. Этот выбор для дизайна обеспечивает лучший пользовательский интерфейс, так как приложение может использоваться в любое время и с любого устройства.
Все знают об этом в Google: одна из многих причин его популярности заключается в том, что ее пользовательский интерфейс является простым и функциональным, но также визуально привлекательным. Панель поиска и две кнопки уже достаточно для одной из самых революционных технологий в истории компьютеров, которая выбрала чрезвычайно маленький и традиционно белый фон. Были исключены фривольные упражнения с излишним стилем, также как и меню, встроенные друг в друга. Несмотря на это, компания доказывает, что ей не хватает чувства юмора с ее творческими каракулями, применяемыми к слову «Google», что облегчает дизайн в особых случаях, конечно, без ущерба для удобства использования.
Дизайн пользовательского интерфейса Google минимален, значки приложений легко понять, а голосовые поиски даже были введены как часть пользовательского интерфейса. Источник: google.com
Значки приложений для YouTube, Новостей, Карт и т. д. Всплывают и легко доступны одним щелчком мыши. Они также сразу понятны, логичны и подчеркивают их основную функцию символом изображения, который их представляет. А с реализацией интерфейса VUI поисковая система становится образцом для подражания: таким образом, на самом деле, Google умеет понимать голосовые запросы, даже через мобильное приложение. Как только он откалиброван на вашем голосе, поиск работает с голосовыми записями, и вы активируете его, произнеся «OK Google».
Руководство по Dropbox
Инструкции для использования являются утомительными, сложными и иногда более запутанными, чем полезными: по крайней мере, это клише. Но есть способ для достижения эффективного обучения и показывает графический интерфейс руководства Dropbox, который в 2015 году был даже награжден общественным голосом с премией Webby за «Лучший пользовательский интерфейс». Причина, по которой руководство так приветствуется публикой, уже ясно видно на главной странице: цифровые инструкции структурированы четким и информативным способом.
Руководство Dropbox четко структурировано для разных пользователей. Таким образом, бизнес-пользователи и администраторы могут быстро найти правильные ответы.
Независимо от того, выбираете ли вы общий или конкретный путь для администраторов, каждому пользователю предоставляются соответствующие тематические области и параметры поддержки. Даже навигация понятна: чем больше вы вводите страницы, переходя от одной категории к определенной теме, тем больше страница прокручивается вправо. С помощью стрелок вы можете продолжить и вернуться, чтобы углубить тему или пропустить ее и перейти к следующей или предыдущей вкладке. Благодаря графической реализации в пастельных тонах и практической навигации графический интерфейс позволяет согласовать эстетику с удобством использования.
Создаем интуитивно понятный интерфейс для сайта
Чем проще сайт, тем больше у него пользователей. Простоту использования определяет интуитивно понятный интерфейс сайта.
Главное в интуитивном дизайне то, что он незаметен. Дизайн понятен, когда пользователи могут сосредоточиться на задаче, не останавливаясь ни на секунду. Такой дизайн направляет внимание людей на важные задачи.
Представьте, что вы находитесь в салоне проката автомобилей, и вам показывают машину, которую собираетесь арендовать. Вы подходите к ней и хотите сесть в салон, протягиваете руку, чтобы открыть дверь, но дверной ручки нет! Как попасть в автомобиль?
Это пример не интуитивного дизайна, который сбивает пользователя с толку. Он хотел сесть в машину, но этому процессу помешала незнакомая ситуация без очевидного решения проблемы.
То же касается веб-дизайна. Пока пользователи могут выполнять задачи без промедлений и раздумий — все в порядке. Интуитивный дизайн незаметен, а не интуитивный дизайн бросается в глаза.
Поскольку интуитивно понятный дизайн незаметен, поэтому люди не оценят, зато сразу заметят, если его отсутствие. Не интуитивный дизайн заставляет людей сосредоточиться на элементах, не связанных с их задачами.
Почему так много сайтов, которые вызывают у людей раздражение? Дело в том, что создать интуитивно понятный интерфейс сайта действительно трудно. То, что понятно для одного человека, для другого совершенно не ясно. Дизайн не может быть интуитивным, это пользователь может посчитать его таковым или наоборот.
Я верю, что большинство сайтов разрабатывались с хорошими намерениями. Ожидалось, что они будут интуитивно понятными, но обычно для дизайнера! Среднестатистический разработчик или дизайнер не тратит время на наблюдение за тем, как люди пользуются тем, что он создал.
Создание интуитивно понятного дизайна начинается с понимания ваших пользователей. Сначала нужно выяснить, что интуитивно именно для них. Важная концепция, в которой стоит разобраться, это текущие знания и целевые знания.
Разница между ними называется «пробелом знаний». Ваша задача — разработать интуитивно понятный интерфейс сайта, который минимизирует разрыв между знаниями уже имеющимися у пользователя на момент, когда он попадает на ваш сайт, и тем, что ему необходимо знать, чтобы успешно им пользоваться.
Трудность заключается в том, что у вас могут быть самые разные пользователи. Некоторые из них – технически продвинутые «гики», а некоторые – совершенно незнакомые с компьютером.
Если пользователи впервые зашли на сайт, это не значит, что их текущие знания о нем равны нулю. Скорее всего, они уже пользовались похожим сайтом или продуктом раньше. Допустим, вы никогда не делали онлайн-покупок, зато в реальном мире совершали их миллион раз.
В такой ситуации люди воспользуются концептуальной моделью покупок в реальной жизни и постараются воспользоваться имеющимся опытом. Их представление об онлайн-покупках происходит из ментальной модели обычных покупок – самого похожего опыта, который у них есть.
Но предположим, что они делали покупки в интернете раньше, только не на Amazon. В этом случае их концептуальная модель будет другой, как и их представление о покупках на сайте Amazon.
Если большинство пользователей никогда не пользовалось сайтом или онлайн-сервисом, похожим на ваш, то нужно опираться на концептуальную модель. Необходимо выяснить, какой наиболее приближенный к использованию вашего сайта опыт у них есть.
Если сайт не соответствует ментальной модели пользователя, он посчитает сайт сложным в использовании, не интуитивным.
Чтобы создать интуитивно понятный интерфейс сайта, который будет интуитивным для пользователей, нужно понять, каковы их текущие и целевые знания. Что пользователи уже знают и что им нужно знать.
Есть два отличных способа выяснить это:
Наблюдение. Обратитесь к своим клиентам и понаблюдайте за ними, как они используют сайт в привычной обстановке. Так вы получите представление об их текущих знаниях.
Юзабилити-тест «Стоя за плечом». Попросите людей воспользоваться сайтом, выполнить набор задач и прокомментировать свой мыслительный процесс. Это также можно сделать удаленно. Это определит целевые знания.
В обоих случаях вы наблюдаете и записываете, не вмешиваясь. Вы быстро определите основные проблемы. 10 испытуемых обычно дают представление о 90% трудностей.
Дизайн интуитивно понятен, когда текущие знания соответствуют целевым знаниям.
Существует два условия, при соблюдении которых пользователи говорят, что интерфейс веб сайта кажется им «интуитивным»:
- Текущие знания идентичны целевым. Когда пользователь видит дизайн, он знает все, что ему нужно, чтобы работать с ним и выполнить свою задачу.
- Текущие знания не совпадают с целевыми, но пользователь не осознает, что дизайн помогает ему преодолеть этот разрыв. Пользователь учится естественным образом.
Другими словами, вы либо делаете UI настолько простым, что не требует обучения, либо добавляете понятные инструкции, подсказки, которые легко заметить.
Лучший пример первого условия — поиск Google. Его невозможно использовать неправильно.
Хорошим примером второго условия является Wufoo . Когда начинаете создавать свою первую форму, инструкции помогают вам и процесс обучения кажется естественным.
Есть два варианта интуитивного дизайна. Можно уменьшить требования к целевым знаниям, чтобы они соответствовали текущим знаниям, упростив дизайн, или подтянуть текущие знания к целевым через инструкции.
76% пользователей говорят, что для них самое важное в дизайне сайта — это «чтобы я мог легко найти, что хочу».
Как они ищут то, что нужно? С помощью навигации, конечно. Тут возникает сложность: если на сайте много контента, как структурировать его таким образом, чтобы это имело смысл?
Отличный способ выяснить, какой контент, за каким пунктом меню должен следовать, является сортировка карточек. Это надежный и недорогой метод поиска шаблонов того, как пользователи представляют себе контент или функциональные возможности сайта. Он также поможет выбрать названия элементов меню при проектировании интерфейса сайта.
Важно называть пункты меню правильно, чтобы люди знали, что находится за ссылкой. Интересно, что 50% всех пользователей отказываются от покупок, потому что не могут найти то, что ищут. Вот почему поиск чрезвычайно важен. На вашем сайте должен быть поиск, который можно легко найти. У Amazon огромный перечень товаров, и они сделали поиск центральным элементом своего сайта.
И не забудьте подключить отслеживание сайта в Google Analytics. С его помощью вы обнаружите, что пользователи, которые используют поиск, имеют более высокий коэффициент конверсии.
Люди проводят большую часть времени на других сайтах. Поэтому они привыкли к тому, что сайт выглядит определенным образом (текущие знания). Если нарушаете это правило, то сами напрашиваетесь на неприятности.
Типичные привычные элементы:
- Клик по логотипу, расположенному в левом верхнем углу всегда должен возвращать на главную страницу.
- Последняя ссылка в горизонтальном меню или нижняя в вертикальном меню – это контакты.
- Контактная информация должна быть представлена в нижней части сайта.
- Будьте последовательны: навигация и другие важные элементы должны оставаться в одном и том же месте на любой странице сайта.
- Ссылки выделяются на фоне обычного текста.
- Если пользователи могут скролить вниз, полоса прокрутки должна быть хорошо видна.
- Текст с выравниванием по левому краю легче читать, чем выровненный по правому краю.
- Отображайте всплывающие справочные сообщения и уведомления,
- При проектировании веб интерфейсов сайта используйте понятные, которые пользователи могут понять.
Из любого правила есть исключения, но нововведения сложны и рискованны. Сделайте так, чтобы интерфейс сайта соответствовал ожиданиям людей.
20% пользователей тратят 80% своих доходов в интернете. И именно на этих людях отражается смена дизайна. Они привыкли к тому, как все работает, и когда вы переделываете сайт, то меняете его, в первую очередь, для них.
Люди ненавидят перемены, которые делают их текущие знания непригодными для дальнейшего использования. Интуитивный дизайн работает, когда вы не заставляете своих пользователей приспосабливаться к переменам.
Крупный продавец потратил 100 миллионов долларов на редизайн, в результате чего продажи упали на 20%. Юридической фирме пришлось закрыться. В расписании врача и авиакомпании серьезные задержки. Их сайты/приложения перестали быть интуитивными для большинства пользователей.
Нужно ориентироваться на самых важных покупателей. Интерфейс сайта должен быть наиболее интуитивным для них. Не пытайтесь угодить всем.
Мелкие изменения на сайте с течением времени часто являются лучшим подходом, чем крупные редизайны. Это позволит вам быстро оценить и понять, положительные или отрицательные результаты они принесли. «Успехом для нас будет, если в день запуска редизайна этого никто не заметит».
Это правило работает в случае, если у вас большая аудитория. Если на вашем сайте небольшой трафик из-за дизайна, смело меняйте его.
Стремитесь сделать сайт интуитивно понятным для основных пользователей, и в награду вы получите увеличение конверсии. Изучите поведение своих пользователей и регулярно проводите различные тесты интерфейсов.
Пожалуйста, оставляйте свои отзывы по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, лайки, подписки!
Пожалуйста, опубликуйте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, лайки, дизлайки!
ВЛВиктория Лебедеваавтор-переводчик статьи «Intuitive Web Design: How to Make Your Website Intuitive to Use»
Интуитивно понятный пользовательский интерфейс — Win32 apps
- Статья
- Чтение занимает 2 мин
- 2 contributors
Были ли сведения на этой странице полезными?
Да Нет
Хотите оставить дополнительный отзыв?
Отзывы будут отправляться в корпорацию Майкрософт. Нажав кнопку «Отправить», вы разрешаете использовать свой отзыв для улучшения продуктов и служб Майкрософт. Политика конфиденциальности.
Отправить
Спасибо!
В этой статье
в первый раз Windows 7 позволяет разработчикам и их конечным пользователям управлять своими компьютерами, касаясь экрана. Возможности сенсорного ввода и управления несколькими касаниями обеспечивают естественный и интуитивно понятный способ взаимодействия пользователей с ПК. Платформа разработчика включает интерфейсы API жестов высокого уровня, а также низкоуровневые сенсорные сообщения и API сенсорного ввода. элементы пользовательского интерфейса верхнего уровня, такие как меню « пуск » и панель задач, имеют большие целевые объекты, чем предыдущие Windows выпусках, что упрощает выбор с помощью пальца вместо мыши. Визуальная обратная связь предоставляется для касания и двойного касания. Windows обозреватель и Windows Internet Explorer 8 удобны и легко интегрируются с приложениями Windows 7.
Жесты с несколькими касаниями, API манипуляции и инерции
в Windows 7 реализована улучшенная поддержка сенсорного ввода и жестов, позволяющая разработчикам быстро и легко создавать уникальные возможности приложений, которые выходят за рамки простого указателя мыши, щелчка и перетаскивания. Новые многосенсорный API-интерфейсы поддерживают богатые жесты, такие как панорамирование, изменение масштаба и вращение. Все жесты обеспечивают прямую визуальную обратную связь и взаимодействуют с базовым содержимым естественным и интуитивно понятным способом. Например, жест масштабирования выравнивает представление по положению жеста. Интерфейсы API сенсорного ввода нижнего уровня также доступны для определения пользовательского жеста и расширенного взаимодействия с сенсорным реагированием. Windows 7 предоставляет платформу разработки, которая предоставляет разработчикам средства, необходимые для разработки творческих приложений для устройств ввода с несколькими сенсорными устройствами, путем обработки вводимых пользователем данных с устройств с несколькими сенсорными устройствами и улучшения пользовательского интерфейса. Результатом являются более интуитивно понятные среды, которые позволяют повысить эффективность взаимодействия с компьютером.
Windows 7 также обеспечивает поддержку платформ для обработки объектов и инерции. Широкий набор функций манипуляции позволяет растянуть, изменить размер или повернуть несколько объектов одновременно и в очень тонкой детализации. Например, несколько цифровых фотографий можно обрезать, изменить их размер и повернуть в одном сеансе с помощью жестов на основе сенсорного ввода.
Windows 7 включает api инерции, которые имитируют инерцию при перемещении объектов и работают с интерфейсами api манипуляции. Например, в приложении Photo можно использовать API манипуляции, чтобы позволить пользователям поворачивать, изменять размер и перемещать фотографии. Аналогичным образом, если пользователь «отменяет» фотографию, интерфейсы API инерции предоставляют естественное взаимодействие и позволяют проделать фотографию в побережье или воздержаться на границах окна приложения. (см. Windows руководство по программированию touch и Windows Touch: ресурсы для разработчиков).
Single-Finger панорамирование
Во многих распространенных приложениях функции сенсорного ввода более удобны для навигации, чем для выбора текста. С помощью расширенных API сенсорного управления приложение разработчика может включить панорамирование, а не перетаскивание. Например, если вы создали приложение, которое использует жесты с несколькими касаниями для пользователей, воспроизводящих музыку, эти пользователи могут просто сдвинуть палец вверх или вниз, чтобы настроить том, изменить песни или загрузить файл. Прокрутка не требуется.
Windows 7 предоставляет неограниченные возможности для разработчиков, заинтересованных в создании приложений для компьютеров следующего поколения. И, что самое главное, это затрудняет проверку полос прокрутки и реализацию семантики панорамирования. Приложения также получают более широкий набор событий и отзывов о настраиваемых элементах управления жестами, чем в предыдущих версиях Windows. (См. статью улучшение возможностей панорамирования Single-Finger.)
Необработанные входные данные сенсорного ввода
в Windows 7 новые сенсорные возможности поддерживаются моделями взаимодействия, которые обращаются к сообщениям с сенсорным входом низкого уровня и предоставляют настраиваемые ответы на сочетания сенсорных сообщений. Платформа поддерживает получение необработанных входных данных для таких сценариев, как приложения для рисования с несколькими касаниями и пользовательские жесты в приложении. Вы можете использовать поддержку платформы для сенсорного ввода или создания собственных оригинальных и многофункциональных возможностей. (См . _ сообщение WM Touch.)
Разработка UI | Web, Mobile & IoT — CimpleO
Что такое UI-дизайн
UI-дизайн — разработка всех элементов интерфейса, всего того, что видит юзер. Он создается на основе пользовательских предпочтений, и включает в себя: работу над анимацией, кнопками, меню, слайдерами, иллюстрациями и шрифтами. Каждый визуальный элемент и взаимодействие разрабатывается UI-дизайнером.
Помимо вышеперечисленного определяется цветовая палитра и расположение объектов в интерфейсе. Становится понятно: удобно ли нажать «Login», подходит и контрастирует ли палитра цветов, легко ли заполнить форму, видно ли все элементы и хорошо ли читается текст на каждой из страниц.
Главная задача UI-дизайнера — дать пользователю интуитивно понятный интерфейс, в котором легко разобраться. Всем должно быть с ходу понятно, как пользоваться сайтом, приложением или программой. Дизайнер следит, чтобы интерфейс был четко структурирован и соответствовал требованиям Техзадания.
Процесс реализации UI
Для начала нужно разобраться, кто и как будет пользоваться продуктом, чтобы сориентироваться в элементах будущего интерфейса. Такую задачу решает создание Мокапа, который позволяет быстро понять видение клиента и внести правки еще до начала разработки интерфейса. Дизайнер намечает примерное расположение кнопок, форм и других важных элементов, а после подбирает цветовую палитру, шрифты, картинки, собирая всё это в один цельный и информативный макет.
Затем создается User Flow Diagram — карта экранов. На этом этапе проектируется каждый экран, который увидит пользователь. Прогнозируется как будет вести себя человек при использовании будущего приложения и какое состояние принимает интерфейс при каждом взаимодействии пользователя с ним.
Клиент согласует разработанную структуру и пользовательские сценарии. Этап позволяет исключить будущие изменения в интерфейсе или сделать их более незначительными. Так как, потребуется глобальная переработка всего, при потери логики в структуре проекта.
Утверждение дизайна
На финальном этапе клиент оценивает результат, даёт свои комментарии и предложения, а разработчик при необходимости вносит мелкие правки.
К этому моменту между исполнителем и заказчиком должно быть разработано техническое задание, заключающее в себе всю информацию, с которой работали на этапе прототипирования и проектирования пользовательского интерфейса. Имея на руках готовый дизайн и ТЗ, можно приступать к разработке приложения.
Факторы, на которые влияет UI
Дизайн пользовательского интерфейса является фактором, оказывающим влияние на на три основных показателя качества продукта: его функциональность, эстетику и производительность.
Функциональность — фактор, который зачастую является основным для некоторых разработчиков. Они пытаются создавать программы так, чтобы пользователи могли выполнять свои задачи с удобством. Функциональность важна, но это не единственный показатель, который должен учитываться в ходе разработки.
Эстетичность — позволяет сформировать у потребителя положительное мнение о программе, благодаря презентабельному внешнему виду. Эстетические характеристики более субъективны и описать их количественно гораздо труднее, чем те же функциональные требования. Вся эстетика обычно сводится к простому набору: контрастируют ли между собой цвета, передают ли элементы интерфейса их назначение и смысл, что ощущает пользователь от использовании тех или иных элементов управления.
Производительность — действительно важный этап, влияющий на перспективы применения программы. Если приложение хорошо выглядит, имеет простое и удобное управление, но медленно прогружает интерфейс и регулярно зависает, у него, будет мало шансов на длительную эксплуатацию. В свою очередь, быстрая и стабильная работа приложения могут отчасти компенсировать его не самый стильный дизайн или отсутствие каких-то вторичных функций.
Доверьте нам дизайн своего проекта
Мы считаем, что каждая задача уникальна, и практикуем индивидуальный подход к каждому клиенту.
Дизайн — первое, на что обращает внимание ваш потенциальный клиент. Если сайт не заинтересовал посетителя в первые секунды, то он просто закроет вашу страницу и продолжит поиски. Когда приложение морально устарело, пользователь перейдет на конкурирующее, более современное и удобное приложение.
Наша команда занимается разработкой с 2012 года. Мы следим за тенденциями и трендами веб-дизайна для создания интересных и современных сайтов, способных заинтересовать ваших клиентов.
Как определить, что твой дизайн интуитивно понятен | by Olga Chernenka
С этой стороны нужно было просто убрать ручку. Ручка есть и человек за нее хватается и начинает тянуть, вместо того чтобы толкатьЕсли элементу интерфейса необходим лейбл, обьясняющий, как с ним взаимодействовать, доступность интерфейса храмает.
Конечно, элементы интерфейса требуют подписей, но они должны подсказывать цели, а не способ взаимодействовия.
Как протестировать?
Берем того же друга или коллегу и спрашиваем, как ты думаешь что это такое? Что с этим можно сделать?Если он не понимает что инпут это инпут и его можно заполнить, то сделайте его больше похожим на поле ввода.
3. ПрогнозируемостьМало просто понять как взаимодействовать с интерфейсом, пользователь должен понимать какой будет эффект от того или иного действия без эксперементов.Вот где нужны понятные подписи для иконок, кнопок, чекбоксов и тд.
Только не говорите, что вы дизайнер и не пишите тексты. Сделать понятную подпись, которая ведет к качественному юзер-экспириенсу это не придумать слоган для бренда, правда?
Обращайтесь к пользователю на понятном ему языке, коротко и ясно. Но не пытайтесь сократить тексты на столько, что смысл будет теряться, здесь нужна мера. Избегайте непонятный для ЦА жаргон, акронимы и аббревиатуры. Чтобы чувствовать себя более уверенно с текстами, почитайте книгу “Пиши, сокращай”.
Не старайтесь заменить тексты иконками полностью, это оправдано в редких случаях, при использовании стандартных иконок, таких как wi-fi.
Это похоже на злую шуткуКак протестировать?
Спросите у людей, что означает эта иконка и какое действие выполняет вот та кнопка, на их взгляд. Ответ вас может удивить.
4. ОтзывчивостьЭто понятная, точная, незамедлительная реакция на действие пользователя.
На любое действие пользователя должна быть реакция. Не поленитесь сообщить, что изменения сохранены, фотография загружается или уже загрузилась.
Прелоадеры и прогресс-бары
Если процесс займет меньше 10 секунд вы можете обойтись прелоадером, если больше, покажите юзеру прогресс-бар, чтобы он понимал, что страница не зависла и процесс выполняется.
Загрузка макетов в ZeplinОтображение статуса
Статус действия — успешный, внимание, ошибка; локация внутри сервиса/сайта/приложения. Часто, для отображения статусов используется цвет. Помните, что около 8% мужчин имеют нарушения восприятия цвета. Если вы работаете в Sketch, можете воспользоваться плагином Stark, вы сможете посмотреть, как люди с разными нарушениями восприятия цвета видят вашу страницу. Главное правило, все должно быть достаточно контрастно, переведите макет в чб и если текст на цветном фоне читается плохо, то добавьте контраст.
Как протестировать?
Сразу после выполнения действия спросите у пользователя, что на его взгляд, происходит или произошло.
5. ПредсказуемостьПользовательдолжен получить результат, которого он ожидал от своих действий.
Если человек удивился, тому к чему привели его действия, то возможные проблемы:
- поведение элемента не соответствует его обычному поведению. Команда “назад”, должна означать назад, а не начать с начала;
- недопонимание, которое может возникнуть из-за непонятных или вовсе непрочитанных лейблов;
- неожиданный, неприятный или даже раздражающий дополнительный эффект. Например, просматривая почту со смартфона вы переворачиваете телефон в горизонтальное положение, а потом возвращаете в вертикальное. При этом основной результат предсказуем — интерфейс подстраиваеться под положение экрана, но вы оказыветесь не в том месте в списке, на котором были изначально — это неприятный посторонний эффект.
Как протестировать?
Обращайте внимание, если пользователю приходиться что-то корректировать, отменять или переделывать. Самый явный признак того, что с предсказуемостью проблема — пользователь часто кликает на кнопку закрыть/отменить. Вы можете проверить предсказуемость на этапе дизайна, просто попросив людей описать, какой результат они ожидают от совершения разных действий.
6. ЭффективностьДизайн должен помагать пользователю выполняеть действие минимальными усилиями, без лишних телодвижений.
Неэффективное взаимодействие
Кнопка должна быть полностью кликабельна, а не только ее часть. Если цель маленькая, сделайте кликабельную область больше, чем она сама. Для ссылок используйте лейблы подлиннее.
Ненужное взаимодействие
Предзаполняйте данные в полях, которые вы можете предугадать или уже знаете. Локацию, имя, почту, день рождения и тп.
Запоминайте
Если вы уже спрашивали у пользователя какую-то важную информацию, то сохраняйте ее, чтобы в следующий раз не утруждать его повторным ее введением
Не давайте ошибиться
Если пользователю необходимо ввести номер телефона, покажите формат ввода, не давайте ему вводить ничего кроме цифр и ограничьте кол-во вводимых символов до количества цифр в номере телефона.
Не заставляйте думать, покажите в каком именно формате вы хотите получить данныеКак протестировать?
Во время тестирования, ищите ненужные повторяющиеся действия, перепечатывания неактуальных дефолтных данных.
7. Прощение ошибокНе будьте слишком оптимистичны, пользователи будут совершать ошибки, даже если интерфейс интуитивно понятен. Поэтому, обязательно прорабатывайте сценарии с ошибками, помагайте пользователю, минимальными усилиями, исправится. У вас было такое, что вы отправляли письмо а через секунду понимали что с ним что-то не так, а вернуть уже нельзя?
Интерфейс SparkДля таких действий можно использовать отложенный старт выполнения, например на 5 секунд. В течении этих 5-ти секунд, дать пользователю отменить действие или проигнорировать и позволить ему выполниться.
Но самое лучшее, это постараться предотвратить ошибки
- соблюдайте достаточное расстояние между кликабельными элементами, чтобы уменьшить вероятность случайного клика на что-то по соседству;
- прячьте деструктивные действия, такие как удалить или деактивировать подальше, чтобы на них нельзя было нажать случайно;
- требуйте дополнительного подтверждение для деструктивных действий.
Как протестировать?
Делайте акцент на ситуации, когда пользователь совершает ошибку. Как часто он это делает? На сколько просто отменить действие и исправить ошибку?
8. БезопасностьЧеловеку должно быть не страшно исследовать ваш интерфейс, без страха потеряться или совершить серьезную ошибку. Он должен чувствовать себя уверенно, понимать где он находиться и что ему делать дальше.
Самая распрастраненная причина отсутствия чувства уверенности у пользователя — нестандартная навигация, неясные сообщения и руководства к действию. Человек должен чуствовать, что он контролирует ситуацию. Это очень широкая тема, постараюсь донести самые главные тезизы.
Подтверждение деструктивных действий
Про прощение ошибок мы уже говорили выше. Но если речь идет о более серьезных последствиях некоторых действий, вы должны постараться предотвратить совершение ошибки в принципе.
Если действие повторяется часто, не просите у пользователя подтверждение действия, потому что он начнет подтверждать его автоматически (привет всем, кому я отправила письма, которые потом не смогла отменить).
Действие требуется только для отмены действия. В случае, если вы все сделали правильно, вы просто игнорируете сообщениеКогда пользователь удаляет альбом с фотографиями, заставьте его задуматься. Вместо того, чтобы спросить: “Удальть альбом Untitled?”, поставьте вопрос таким образом: “Вы уверенны, что хотите удалить альбом Untitled с 1366 фотографиями?”.
Если вероятные последствия слишком серьезные, дайте возможность отменить действие на протяжении еще какого-то времени. Например, сохраните этот альбом в удаленных на месяц, дайте возможность восстановить аккаунт после деактивации и тд.
Для мобильных приложений
Назначайте действиям, специфические жесты, чтобы их сложно было сделать случайно.
Не просто будет разблокировать телефон в кармане штанов своими ягодицами, правда?Просто держите в голове, что такие действия как тап, двойной тап, свайп, длинный тап, можно легко сделать случайно. Смоделируйте ситуацию, если такое происходит, к каким последствиям это приведет?
Пользователь контролирует ситуацию
Просто будьте осторожны с автоматическими действиями. Я пользуюсь несколькими аккаунтами в google, когда я была разлогинена и нажимала “Войти”, google сам принимал решение в какой аккаунт я хочу зайти (на данный момент, кажется, это уже не так). Это заставляло делать много дополнительных действий, чтобы войти туда, куда я хотела.
Если вы не уверенны в своих предположениях, лучше уточните у пользователя, дайте ему возможность самостоятельно принять решение. Последнее слово за пользователем!
Понятная модель навигации
Вы должны убедиться, что пользователь понимает как выполнить основные действия:
- переход на следующий шаг или подтверждение действия;
- возвращение назад или отмена действия;
- очевидный способ вернуться на главную или на стартовую точку текущего действия.
Для сенсорных экранов не обязательно, чтобы эта навигация была визуально показана, но она должна быть такой же как везде, с общепринятыми жестами.
Очевидная система сохранения и подтверждения действий
Просто сделайте очевидным текущий статус или возможность этот статус изменить. Худший сценарий, это заполнить несколько шагов регистрации, на последнем шаге нажать кнопку “пропустить” и осознать что все предыдущие данные не сохранились.
Очевидный статус о сохранении контентаРаботайте над уверенностью пользователя
Человек должен быть уверенн, что делает все правильно, особенно, если его действия могут иметь серьезные последствия. Например выставление будильника для раннего вылета.
На какой день выставлен будильник? На 6 am или 6pm?Как протестировать?
Обращайте внимание на частое использование “назад”, на общую неуверенность пользователя, страх нажать на подтверждение действия.
Интуитивность интерфейса — это не дело вкуса и не абстрактное понятие. Используйте эти атрибуты принимая решения, выявляя проблемы и эффективно аргументируя дизайн-решения коллегам.
Интуитивный интерфейс | User Experience Office
При разработке пользовательского интерфейса создание интуитивно понятного интерфейса часто является нашей главной целью. Все хотят этого. Но что на самом деле означает интуитивный? Как ты делаешь это? И как узнать, достигли ли вы этого?
Определить интуитивно понятный интерфейс довольно просто, хотя создать его может быть непросто. Вот определение:
Интуитивно понятный интерфейс работает так, как ожидает пользователь.
Другими словами, мы находим что-то интуитивное, когда нам не нужно об этом думать.
Думать, как вам скажет любой, готовящийся к экзамену, сложно. Это требует энергии и внимания. А думать о двух вещах одновременно особенно сложно. Вот почему отвлеченное вождение так опасно.
Когда кто-то использует программное обеспечение, он обычно усердно думает о проблеме, которую решает. Если они также должны думать о том, как работать с интерфейсом, им придется нелегко. Представьте себе, что вы пытаетесь написать важное письмо, изо всех сил пытаясь использовать программное обеспечение для обработки текстов.Это утомительно и может привести к плохо написанному письму.
Мы называем умственное усилие, необходимое для выполнения задачи, когнитивной нагрузкой . Интуитивно понятные интерфейсы имеют низкую когнитивную нагрузку. Чем ниже когнитивная нагрузка, тем больше пользователи могут сосредоточиться на выполнении своей задачи. Итак, интуитивно понятные интерфейсы имеют реальное преимущество с точки зрения эффективности и качества работы. Они также имеют то преимущество, что требуют меньше обучения и поддержки; если интерфейс работает так, как ожидают пользователи, им не нужно учиться его использовать.
Это больше, чем просто дизайн
Как создать интуитивно понятный интерфейс? Интуиция касается не только дизайна. То, что интуитивно понятно вам, может меня сбить с толку. Подобно прекрасному костюму или платью, интерфейс должен подходить пользователю. Портной будет использовать измерительную ленту и манекен, чтобы подогнать одежду под клиента. UX-дизайнер использует исследования и прототипы, чтобы понять ментальную модель пользователя, а затем разрабатывает соответствующий интерфейс.
Ментальная модель человека — это его внутреннее представление ситуации.Он состоит из всех концепций, знаний и убеждений, которые они используют для понимания мира. В той мере, в какой ваш дизайн соответствует ментальной модели пользователя, он найдет его интуитивно понятным.
Некоторые понятия, составляющие ментальную модель пользователя, являются базовыми знаниями. Если пользователь сталкивается с подсказкой, которая гласит «щелкните, чтобы обновить базу данных», пользователь должен иметь представление об идеях щелчка элемента управления, что такое база данных и что означает операция «обновить».
Другой формой концепции является сценарий .Сценарий определяет ожидания пользователя в данной ситуации. Сценарии обычно включают в себя: актеров, реквизит, настройки и действия.
Например, представьте себе человека, идущего в ресторан. Наряду с аппетитом они привносят свою ментальную модель того, как будет проходить этот опыт. Ожидания:
Приветствую.
Я сяду.
Мне вручат меню.
Я выберу то, что хочу.
Мне принесут еду.
Я съем.
Я за это заплачу.
Это немного упрощено, но суть должна быть ясной. Если ресторан следует этому сценарию, процесс интуитивно понятен. Посетителю не нужно придумывать, что делать, потому что все совпадает с его или ее ожиданиями. Сценарий также позволяет пользователю идентифицировать отсутствующие элементы.Если клиент сидит за столиком, но никто не приносит меню, она будет знать, что нужно его попросить.
А теперь представьте, что в каком-то ресторане модель другая. Возможно, вы должны заплатить до того, как сядете.
Я помню, как много лет назад встречал такое место в Италии. Вы платили при входе, а затем вам подавали еду в стиле столовой. В первый раз, когда я пошел в этот ресторан, я был сбит с толку, потому что процесс не соответствовал моей ментальной модели; это было не интуитивно.Конечно, как только я узнал, как это работает, это стало легко. Но первое знакомство смутило.
Это указывает на еще одну особенность ментальных моделей — они могут меняться в зависимости от опыта. Вот почему с обучением и практикой пользователи приобретают навыки работы с инструментами, которые плохо спроектированы. Но это сильно нагружает пользователя. Крутые кривые обучения и затраты на обучение добавляют много напрасных усилий. И поскольку конечный результат может никогда не соответствовать рабочему процессу пользователя, инструмент никогда не будет эффективным.
Как создавать интуитивно понятные проекты
Дизайн, не соответствующий ментальной модели пользователя, вынуждает пользователя переходить в режим решения проблем и решать, что делать дальше. Это требует большой умственной обработки и приводит к высокой когнитивной нагрузке. Таким образом, цель дизайна состоит в том, чтобы создать интерфейс или опыт, который соответствует ожиданиям пользователя и, следовательно, будет иметь наименьшую возможную когнитивную нагрузку.
Если вы хотите создавать интуитивно понятные дизайны, вам нужно начать с понимания ментальной модели пользователя.Затем вы можете разработать дизайн, максимально соответствующий ожиданиям пользователя. Проблема, конечно, в том, что ментальные модели скрыты. Они существуют в голове пользователей, поэтому вам нужно сделать некоторые предположения о том, что происходит. Кроме того, у каждого пользователя своя ментальная модель, потому что у них разный опыт.
Существует два основных способа оценки ментальных моделей ваших пользователей:
Исследование пользователей
Общение с пользователями на собеседованиях один на один и наблюдение за пользователями во время их работы над соответствующими задачами может предоставить вам много информации о том, как они концептуализируют свой рабочий процесс и шаги, которые они представляют.
Другой мощной техникой является контекстное исследование , когда вы наблюдаете за своими пользователями в их собственной среде, работая над задачами, которые вы хотите понять.
Юзабилити-тестирование
Наблюдение за пользователями, работающими над макетами и прототипами, может помочь вам понять их ожидания, особенно если вы поощряете их «думать вслух» во время работы.
Вот несколько советов по созданию интуитивно понятного дизайна:
- Разделите пользователей на сегменты.Группируйте пользователей с похожим опытом и потребностями вместе. Тщательно выбирайте сегменты, чтобы у вас было как можно меньше групп пользователей. У всех не будет одинаковых ментальных моделей, но, сгруппировав их вместе, у вас будет шанс выявить общие черты в каждой группе.
- Постарайтесь понять их представления. Попросите их набросать шаги, которым они будут следовать, или напишите сценарии.
- Внимательно слушайте их терминологию. Интуитивно понятный интерфейс должен использовать те же слова, что и его пользователи.
- Подумайте об основных концепциях и знаниях, которые должен иметь пользователь, чтобы понять пользовательский интерфейс. Особое внимание уделите техническим терминам и понятиям, которые могут быть неочевидны для пользователя. При необходимости дайте им определение или объясните, чтобы пользователь мог принимать осмысленные решения.
- Организуйте задачи и информацию так, как их ожидает пользователь.
Заключение
Интуитивно понятный дизайн делает пользователей счастливыми. Создание интуитивно понятного дизайна требует усилий, но это сократит время обучения, снизит разочарование и повысит эффективность.Чтобы проектировать интуитивно, постарайтесь понять ментальные модели ваших пользователей — знания, убеждения, язык и сценарии, которые они привносят во взаимодействие. С помощью юзабилити-тестирования определите места, где ваш дизайн отклоняется от ожиданий пользователей, и измените дизайн, чтобы он соответствовал им.
Разработка интуитивно понятного пользовательского интерфейса | by Rizki Mardita
Иногда люди говорят, что работа дизайнера не тяжелая. Они предполагали, что дизайнеры Visual/UI всего лишь переводят концепцию продукта в визуальную форму (рисуют на бумаге и делают цифровые версии).Вот почему дизайн становится чем-то, что некоторые люди считают тривиальным.
Существуют различия между этими различными типами дизайна:
- Плохой дизайн пользовательского интерфейса, бесполезный и бессмысленный.
- Плохой дизайн пользовательского интерфейса, но интуитивно понятный, полезный, удобный для пользователя, осмысленный, решающий проблемы, понимающий потребности пользователей, понимающий потребности бизнеса.
- Хороший дизайн пользовательского интерфейса, но бесполезный, бессмысленный.
- Хороший дизайн пользовательского интерфейса, интуитивно понятный, полезный, удобный для пользователя, осмысленный, решающий проблемы, понимающий потребности пользователей и потребности бизнеса.
Интуитивно понятный пользовательский интерфейс — это удобный пользовательский интерфейс, в котором нет необходимости теряться, путаться, гадать, экспериментировать, читать руководство или даже спрашивать других.
Из приведенных выше типов дизайна, на самом деле ответили некоторые люди воспринимаются.
Чтобы сделать продукт, конечно же, мы хотим, чтобы наш продукт всем нравился и был любим. И правильный выбор — № 4 (хороший дизайн пользовательского интерфейса и интуитивно понятный, полезный, удобный для пользователя, осмысленный, решающий проблемы, понимающий потребности пользователей, понимающий потребности бизнеса и т. д.).) и отбросьте представление о том, что дизайн тривиален. Если вы не выберете вариант № 1, 2 или 3.
При проектировании интуитивно понятного пользовательского интерфейса есть некоторые вещи, которые становятся моим эталоном и становятся рутиной и обязательными для меня во время проектирования:
1. Знать 2 вещи (Цели)
- Бизнес-цели
- Пользовательские цели
2. Визуальная иерархия и приоритет
Создайте иерархию и приоритеты на основе визуальных элементов, понимая цель, поток, а также информацию и действия мы разместим в нашем дизайне.
3. Применение принципов гештальта
Гештальт — это теория, которая объясняет процесс визуального восприятия путем организации компонентов и связанных элементов, формирования паттернов или сходств в единое целое.
Теория гештальта — это фундаментальное знание, которое очень важно для визуального/UI-дизайнера. Вот несколько основных принципов гештальта, которые я всегда использовал в процессе дизайна:
- Рисунок Ground
- Близкость
- Сходство
- Непрерывность
- Общая область
- Закрытие
- Фокусные точки
Вышеуказанные принципы позволяют пользователю обнаруживать и чувствовать закономерность случайных закономерностей.Так что не забывайте об этой теории, если только вы не хотите, чтобы ваш дизайн выглядел нестандартным, неуловимым и брошенным пользователем 😁.
4. Эвристическая оценка
Эвристическая оценка — это теория измерения использования веб-сайта/приложения, разработанная Джейкобом Нильсеном и Рольфом Моличем в 1990 году и состоящая из 10 основных принципов:
- Видимость состояния системы
- Система и реальный мир
- Пользовательский контроль и свобода
- Согласованность и стандарты
- Предотвращение ошибок
- Распознавание, а не повторение
- Гибкость и эффективность использования
- Эстетичный и минималистичный дизайн
- Помощь пользователям в восстановлении после распознавания, диагностики и восстановления ошибки
- Справка и документация
Я не использовал эту теорию только для процесса оценки, я использовал эту теорию с самого начала процесса проектирования.
интуитивно понятный интерфейс в предложении
Эти примеры взяты из корпусов и из источников в Интернете. Любые мнения в примерах не отражают мнение редакторов Кембриджского словаря, издательства Кембриджского университета или его лицензиаров.
Это контрастирует с идеей интуитивного интерфейса , который можно использовать без предварительного обучения.
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Интуитивно понятный интерфейс позволяет пользователю относительно легко ориентироваться в программном обеспечении.
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Он был разработан для пользователей, которые ценят простоту, скорость и интуитивно понятный интерфейс .
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Цель состоит в том, чтобы инкапсулировать проблемы с производительностью внутри библиотеки и предоставить ученым интуитивно понятный интерфейс .
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Они сосредоточились на создании игры для двух игроков с интуитивно понятным интерфейсом и отзывчивым управлением.
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Текстовые приложения могут предоставлять менее интуитивно понятный интерфейс , но могут допускать более продвинутые формы настройки.
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Рецензенты высоко оценили интуитивно понятный интерфейс , сложные, но достижимые головоломки, четкий графический стиль и оригинальный увлекательный игровой процесс.
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Он использует интуитивно понятный интерфейс , позволяющий пользователю включать виджеты с помощью системы перетаскивания.
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Другая реализация может дать более интуитивно понятный интерфейс .
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Стремление к интуитивно понятным интерфейсам (основанное на повторном использовании существующих навыков с системами взаимодействия) может привести к тому, что дизайнеры откажутся от лучшего дизайнерского решения только потому, что оно потребует нового подхода.
ИзВикипедия
Этот пример взят из Википедии и может быть повторно использован по лицензии CC BY-SA.Эти примеры взяты из корпусов и из источников в Интернете. Любые мнения в примерах не отражают мнение редакторов Кембриджского словаря, издательства Кембриджского университета или его лицензиаров.
Что это за чертовщина? – Обучение и консультации по дизайну пользовательского интерфейса – Обучение и консультации по дизайну пользовательского интерфейса – UX Design Edge – UX Design Edge
Интуитивно понятный пользовательский интерфейс: что это, черт возьми, такое?
Для любого UX-проекта почти наверняка главной целью является «интуитивно понятный пользовательский интерфейс». Для пользователей описание пользовательского интерфейса как интуитивно понятного является одной из самых высоких похвал, которые они могут дать. Учитывая это, разумно спросить, что означает интуитивность пользовательского интерфейса. Удивительно, но никто толком не знает. По иронии судьбы, люди определяют интуитивность как интуицию, поскольку они изо всех сил пытаются определить этот термин конкретным, осмысленным образом. (Другие популярные цели пользовательского интерфейса разделяют эту проблему: «простота», «легкость в использовании» и «чистота» занимают второе место.)
Практический вопрос: как вы можете достичь цели проекта, если вы даже не знаете, что это такое? является?
Мой практический ответ: Вы не можете.Термин «интуитивный» не имеет смысла как характеристика пользовательского интерфейса, поэтому — за исключением случайных разговоров — нам следует избегать его использования, по крайней мере, без предварительного определения.
Борьба за определение
Раньше я работал в Microsoft и, как сотрудник Microsoft, люди нередко говорили мне (с некоторым ликованием), что, к сожалению, предпочитают использовать Mac. Хотя я в основном пользуюсь ПК, у меня тоже есть Mac, а его текущая модель уже несколько десятилетий. Мне нравится Mac и я ценю его преимущества (наряду с недостатками), но, зная, что отсутствие неодобрения меня разочарует, я всегда держу эту деталь при себе.Все предполагают, что сотрудники Microsoft ненавидят Mac.
С этого момента разговоры стали удивительно последовательными. Мой ответ: «Правда, почему это?» На это их ответ последователен и незамедлителен: «Я нахожу Mac гораздо более интуитивным». Мой ответ: «Интересно — не могли бы вы привести несколько конкретных примеров того, как это становится более интуитивно понятным?» С этим вопросом их ликование превращается в шок и ужас, как бы говоря: «Конечно, Mac более интуитивно понятен — как вы смеете сомневаться в этом!» С этого момента им будет сложно найти какой-то ответ, начиная от «это просто так» до «это просто работает», от «это проще» до «приложения Mac имеют более последовательный внешний вид».
Конечно, в этих ответах есть элемент «интуитивности», но нет четкого последовательного определения. Без поля искажения реальности, на практике интуитивный просто означает лучше . Но вернемся к нашему проекту UX. Представьте, что целью проекта является «улучшенный пользовательский интерфейс». Столь же бесполезна как цель, просто более очевидна.
Словарное определение
Начиная с определения интуиция из Википедии, я скажу, что «словарное определение» интуитивного :
использование разума, экспериментирование, помощь или специальное обучение.
Чтобы такая интуиция стала возможной, необходимы предварительные знания, полученные либо из реального мира, либо из другого программного обеспечения. Так, например, если что-то выглядит как кнопка, мы знаем из реального мира, что можем нажать на нее, чтобы что-то произошло. В качестве альтернативы, если что-то выглядит как ссылка, мы знаем, что нажимаем на нее из опыта работы с другим программным обеспечением.
Мы можем свести это определение к двум требованиям: доступность и последовательность, где доступность позволяет нам предсказать, что произойдет, основываясь на внешнем виде, и последовательность, чтобы сделать этот прогноз правильным. Маркировка и контекст также являются факторами, влияющими на предсказание.
Так интуитивный просто красивое слово для обозначения доступности, последовательности и предсказуемости? Возможно, но когда люди используют этот термин, я думаю, что они имеют в виду нечто большее.
Определение Эверетта
Мне нравится давать определения, поэтому я попробую. Пользовательский интерфейс является интуитивно понятным, если он имеет соответствующую комбинацию:
- Доступность Визуально пользовательский интерфейс имеет подсказки, указывающие на то, что он собирается делать.Пользователям не нужно экспериментировать или делать выводы о взаимодействии. Возможности основаны на реальном опыте или стандартных соглашениях пользовательского интерфейса.
- Ожидание Функционально пользовательский интерфейс дает ожидаемые, предсказуемые результаты без каких-либо неожиданностей. Пользователям не нужно экспериментировать или выводить эффект. Ожидания основаны на ярлыках, реальном опыте или стандартных соглашениях о пользовательском интерфейсе.
- Эффективность Пользовательский интерфейс позволяет пользователям выполнять действия с минимальными усилиями.Если намерение ясно, пользовательский интерфейс выдает ожидаемые результаты в первый раз , чтобы пользователям не приходилось повторять действие (возможно, с вариациями), чтобы получить то, что они хотят.
- Отзывчивость Пользовательский интерфейс дает четкую и немедленную обратную связь, чтобы указать, что действие происходит и было ли оно успешным или неудачным.
- Прощение Если пользователи совершают ошибку, либо все происходит правильно, либо они могут легко исправить или отменить действие.
- Возможность исследования Пользователи могут перемещаться по пользовательскому интерфейсу, не опасаясь наказания, непредвиденных последствий или потери.
- Нет разочарования Эмоционально пользователи удовлетворены взаимодействием.
Из этих элементов первые два отражают словарное определение, а остальные — это дополнительные атрибуты, выходящие за рамки буквального определения.
Достижение ваших целей
Если вашей целью является «интуитивный» пользовательский интерфейс, я думаю, что лучше всего явно указать, что именно вы хотите, используя приведенные выше атрибуты.Не используйте этот термин в спецификациях, предложениях или планах, если вы заранее не определили термин в деталях. При оценке пользовательского интерфейса всегда делайте это с точки зрения специфики. В противном случае интуитивный вместо этого станет расплывчатым синонимом хорошего . Это в лучшем случае. Самый запутанный пользовательский интерфейс в мире может быть правдоподобно описан его создателями как интуитивно понятный, если этот термин не определен конкретно.
Если вы делаете только одно:
Не используйте термин интуитивно понятный для описания пользовательского интерфейса без определения, потому что никто не понимает, что это значит. Вместо этого определите этот термин конкретно в своих документах или опишите свои цели, используя более конкретные термины.
Сноска
В моей библиотеке более 80 книг по пользовательскому интерфейсу, но только две удосужились дать определение этому термину. В The Humane Interface Джеф Раскин определяет интуитивный как знакомый. Я предпочитаю последовательный , потому что он более конкретный и действенный. В Программное обеспечение для использования Ларри Константин и Люси Локвуд определяют его как угадываемый и ведущий себя так, как ожидалось.
← Предыдущий пост Следующий пост →Что делает пользовательский интерфейс интуитивно понятным ⭐MonstersPost
Каждый, кто занимается дизайном или дизайном, постоянно сталкивается с термином Intuitive . Ну а если серьёзно, то как Интерфейс может быть интуитивно понятным, эту «черту» нельзя отнести к бездушной/безмозглой «вещи».
Слово «интуитивный» происходит от «Интуиции» — способности человека приобретать знания без умозаключений или использования разума.Интуитивность интерфейса во многом зависит от того, насколько глубоки знания человека. Мы не собираемся никого обижать, но каждый обладает разными знаниями, навыками, способностями, мотивацией, интересами, ценностями, убеждениями и стилями познания. В зависимости от объема знаний, которыми обладает человек, тем легче ему понять, «как все работает».
Успешный пользовательский интерфейс прозрачен для пользователя. Он ведет их туда, куда они хотят и когда хотят, — позволяет им построить интуитивное понимание пространства, в котором они находятся.Это чувство доверия бесценно — оно порождает лояльность.
Хороший пример — когда пользователь меняет свой смартфон. Если он пристрастился к Symbian, а потом перешел на Android, то первые пару часов могут показаться немного сложными, но он понимает, что с новой ОС не так сложно разобраться, так как Android — одна из самых «интуитивно понятных» операционных систем. . Вот где ментальная модель выходит на арену.
В UI-дизайне ментальная модель — это представление чего-либо (реального мира, устройства, программного обеспечения и т. д.).), что пользователь имеет в виду. Ментальная модель является отражением действительности. Мысленную модель создают очень быстро, еще до того, как пользователь сталкивается с пользовательским интерфейсом. Ментальная модель формируется из предыдущего опыта работы с подобными UI, предположений, которые у них есть , того, что они слышали от других, видео, просмотренных на YouTube, а также из их непосредственного опыта работы с продуктом или устройством (если он у них был). Пользователи обращаются к ментальным моделям, чтобы предсказать, что будет делать система, программное обеспечение или продукт или что они должны с ними делать.
Чтобы понять, почему ментальные модели так важны при разработке пользовательского интерфейса, нам нужно понять, что такое концептуальная модель . Это актуальная модель, которая дается пользователю через интерфейс продукта. Возвращаясь к примеру с Android/Symbian, у вас есть ментальная модель того, что такое ОС Android, поскольку у вас определенно есть друг и даже тот, у кого есть смартфон на базе ОС Droid, и вы понимаете, как он будет работать и что вы можете сделать. с этим. Но когда вы сядете за Galaxy, «система» покажет, какой на самом деле является концептуальная модель смартфона.Будут экраны, кнопки и все, что происходит. Фактический интерфейс представляет собой концептуальную модель. Кто-то разработал пользовательский интерфейс, и этот интерфейс сообщает вам концептуальную модель продукта.
Вот подходящий момент, чтобы сказать: «Зачем мне эти модели?!» И вот причины, почему вы должны. Все, с чем вы сталкиваетесь в сфере интерфейсов, касается «соответствия» и «несоответствия» между ментальными моделями пользователя и концептуальной моделью интерфейса.
Несколько примеров для пояснения представленных выше идей:
- Когда ментальная модель пользователя не соответствует концептуальной модели дизайна, пользователь будет озадачен интерфейсом;
- В процессе проектирования не учитывалась ментальная модель пользователя, что приведет к непониманию пользователя;
- Когда несколько групп пользователей используют интерфейс, предназначенный для конкретной концептуальной модели, пользователям другой модели может показаться, что интерфейс довольно сложен для понимания;
- Если концептуальная модель на самом деле не была разработана, то концептуальная модель не будет соответствовать ментальной модели пользователя, и пользователям будет сложно изучить и использовать устройство.
- Иногда вы знаете, что ментальная модель одной или нескольких групп пользователей не соответствует концептуальной модели, и вы хотите изменить ментальную модель пользователя, чтобы она соответствовала разработанной вами концептуальной модели.
Мы хотели бы предоставить вам минимальный набор руководств по разработке пользовательского интерфейса для устройств с целью максимально облегчить пользователям понимание всех основных функций и основного информационного содержимого устройств.
***
Мы начнем с очень простого правила — пользовательский интерфейс должен быть простым .Чтобы быть простым, типы и количество элементов пользовательского интерфейса должны быть минимальными; все элементы пользовательского интерфейса и их комбинации должны быть интуитивно понятны обычным пользователям; и должна быть согласованность между всеми элементами пользовательского интерфейса и их комбинациями. Кроме того, минимальные и интуитивно понятные рекомендации должны последовательно применяться во всем дизайне пользовательского интерфейса.
Минимум
По мере увеличения количества и типов функций дизайнеры пользовательского интерфейса могут легко увеличивать количество и типы элементов пользовательского интерфейса.Количество и типы элементов пользовательского интерфейса должны быть сведены к минимуму. В частности, количество символов, значков, меток, стилей шрифта, размеров шрифта, цветов текста, цветов фона, модальностей, количества элементов и глубины иерархии меню и т. д. должно быть сведено к минимуму. Если должна быть встроена некоторая избыточность, это должно быть сделано при очень тщательном рассмотрении бизнес-требований. Ниже объясняется, что значит минимизировать различные элементы пользовательского интерфейса.
Интуитивность
Все надписи, символы, значки, слова, фразы и предложения на многих устройствах и в меню часто трудно понять интуитивно.Иногда в меню появляются слова, фразы и предложения, понятные только инженерам, особенно в подменю «Настройка». Пользователям необходимо обращаться к руководствам, чтобы иметь возможность управлять устройствами или перемещаться по меню. Однако иногда даже меню не помогает разобраться в проблеме, потому что написано на нечеловеческом языке.
Консистенция
Согласованность затрагивает все аспекты каждого элемента пользовательского интерфейса. Как только конкретный символ выбран для конкретной функции, он должен последовательно применяться во всем пользовательском интерфейсе.Это, безусловно, должно быть сделано в конкретном устройстве, а желательно также между устройствами разных типов, которые выполняют одну и ту же функцию.
Принципы согласованности:
- Структура меню, навигация и выбор пунктов меню должны быть согласованными.
- Выбор стиля шрифта, размера шрифта, цветов и т. д. должен быть последовательным.
- Выбор значков, символов и меток должен соответствовать одинаковым или подобным функциям.
Обращение к эстетике и эмоциям
Один из наиболее важных аспектов пользовательского интерфейса, относящийся к элементам пользовательского интерфейса и обращающийся к эстетике и эмоциям пользователей. Эти параметры относятся как к физическим, так и к нефизическим аспектам пользовательского интерфейса. Есть пять аспектов, соответствующих пяти сенсорным функциям человека. Однако на практике имеют значение только три аспекта.
Внешний вид:
- Цвет, яркость, контрастность и т. д.;
- Форма, размер, расположение элементов пользовательского интерфейса PUI и NPUI;
- Графика, изображения, анимация, видео, символы и т. д.;
- Дизайн и внешний вид устройства.
***
Как только вы столкнулись с проблемой интуитивности, вам нужно провести серьезный мозговой штурм, чтобы понять, будут ли ваши идеи понятны всем пользователям. Как всегда, единственное, что вам поможет, — это тестирование, тестируйте как можно чаще, а самое главное — вовлекайте как можно больше людей.Потому что все люди воспринимают интерфейсы по-разному, кому-то может показаться, что это легко, кому-то может показаться, что это чертовски сложно. Следуя этим четырем правилам, вы сможете преодолеть разрыв непонимания и заставить всех пользователей пользоваться вашим интерфейсом с большим удовольствием.
***
Не пропустите эти фавориты всех времен
- Лучший хостинг для сайта WordPress. Нажмите на нашу ссылку, чтобы получить лучшую цену на рынке со скидкой 30%. Если Bluehost вас не впечатлил, попробуйте другие альтернативы.
- Услуга по установке веб-сайта — чтобы ваш шаблон заработал всего за 6 часов без лишних хлопот. Ни минуты не теряется, работа идет.
- ONE Membership — для загрузки неограниченного количества тем WordPress, плагинов, ppt и других продуктов в рамках одной лицензии. Так как больше всегда лучше. Услуга «Готовый к использованию веб-сайт
- » — это идеальное решение, которое включает в себя полную установку и настройку шаблона, интеграцию контента, внедрение обязательных плагинов, функции безопасности и расширенную SEO-оптимизацию на странице.Всю работу за вас сделает команда разработчиков.
- Обязательные плагины WordPress — чтобы получить самые необходимые плагины для вашего сайта в одном комплекте. Все плагины будут установлены, активированы и проверены на работоспособность.
- лучших стоковых изображений для веб-сайтов — для создания потрясающих визуальных эффектов. Вы получите доступ к Depositphotos.com, чтобы выбрать 15 изображений с неограниченным выбором темы и размера. Услуга создания SSL-сертификата
- — чтобы завоевать абсолютное доверие посетителей вашего сайта.Сертификат Comodo — это самый надежный https-протокол, обеспечивающий безопасность данных пользователей от кибератак.
- Служба оптимизации скорости веб-сайта — чтобы улучшить UX вашего сайта и получить лучший показатель Google PageSpeed.
Что такое пользовательский интерфейс? (Определение, типы и примеры)
- Развитие карьеры
- Что такое пользовательский интерфейс? (Определение, типы и примеры)
17 сентября 2021 г.
Бизнес и жизнь в целом становятся все более зависимыми от Интернета, веб-приложений и мобильных приложений.В результате компании пришли к выводу, что лучший способ конкурировать в Интернете — это уделять приоритетное внимание созданию привлекательного и эффективного пользовательского интерфейса (UI), который оптимизирует взаимодействие с пользователем (UX). В этой статье мы определяем, что такое пользовательский интерфейс, обсуждаем элементы пользовательского интерфейса и UX и даем советы по созданию интерфейса, который превращает пользователей в клиентов.
Что такое пользовательский интерфейс?
Пользовательский интерфейс (UI) — это точка, в которой люди взаимодействуют с компьютером, веб-сайтом или приложением.Цель эффективного пользовательского интерфейса — сделать работу пользователя простой и интуитивно понятной, требуя от пользователя минимальных усилий для получения максимально желаемого результата.
Пользовательский интерфейс создается на уровнях взаимодействия, которые обращаются к человеческим чувствам (зрению, осязанию, слуху и т. д.). Они включают в себя как устройства ввода, такие как клавиатура, мышь, трекпад, микрофон, сенсорный экран, сканер отпечатков пальцев, электронная ручка и камера, так и устройства вывода, такие как мониторы, динамики и принтеры. Устройства, взаимодействующие с несколькими органами чувств, называются «мультимедийными пользовательскими интерфейсами».Например, повседневный пользовательский интерфейс использует комбинацию тактильного ввода (клавиатура и мышь) и визуального и слухового вывода (монитор и динамики).
Другие типы пользовательских интерфейсов могут включать:
Пользовательский интерфейс на основе форм: Используется для ввода данных в программу или приложение, предлагая ограниченный выбор вариантов. Например, меню настроек на устройстве основано на форме.
Графический пользовательский интерфейс: тактильный пользовательский интерфейс с визуальным выходом (клавиатура и монитор).
Пользовательский интерфейс на основе меню: пользовательский интерфейс, который использует список вариантов для навигации по программе или веб-сайту. Например, банкоматы используют пользовательский интерфейс на основе меню и просты в использовании для всех.
Сенсорный пользовательский интерфейс: Пользовательский интерфейс посредством тактильных ощущений или касания. Большинство смартфонов, планшетов и любых устройств с сенсорным экраном используют тактильный ввод.
Голосовой пользовательский интерфейс: взаимодействие между людьми и машинами с помощью звуковых команд.Примеры включают устройства виртуального помощника, голосовое управление, GPS и многое другое.
Почему важен пользовательский интерфейс?
Пользовательский интерфейс важен для того, чтобы соответствовать ожиданиям пользователей и поддерживать эффективную функциональность вашего сайта. Хорошо выполненный пользовательский интерфейс способствует эффективному взаимодействию между пользователем и программой, приложением или машиной благодаря контрастным визуальным эффектам, чистому дизайну и быстрому отклику. При разработке пользовательского интерфейса для вашего сайта важно учитывать ожидания пользователя с точки зрения доступности, визуальной эстетики и простоты использования.Оптимальное сочетание эффективных визуальных элементов и эффективного отклика повысит коэффициент конверсии вашего сайта, поскольку он предвосхищает потребности пользователя и затем удовлетворяет эти потребности.
В частности, вот наиболее важные всеобъемлющие элементы отличного пользовательского интерфейса:
Информационная архитектура. Функциональность сайта построена в соответствии с IA. Логическое структурирование и организация содержимого веб-сайта важно для того, чтобы помочь пользователям перемещаться по сайту с минимальными усилиями.Компоненты ИА включают три основных типа организационных структур: иерархическую (уровень важности), последовательную (логический порядок шагов) и матричную (в которой пользователь выбирает организацию контента, который он видит).
Пример: элементы навигации (кнопки, вкладки, значки), метки (терминология), функции поиска (панель поиска) и системы организации (категории).Интерактивный дизайн. Элементы идентификации призваны превратить пассивных читателей в активных участников, представляя примеры пользовательского ввода.Учет пользователя при создании пользовательского интерфейса поможет улучшить интерактивность и выполнение определенных действий, которые удовлетворяют потребности пользователя. Кроме того, эффективно спроектированные интерактивные пользовательские интерфейсы могут «научиться» предвидеть и устранять любые проблемы, которые могут возникнуть, прежде чем они негативно повлияют на работу пользователя.
Пример: функции обмена в социальных сетях, переключатели, кнопки.Визуальный дизайн. Важность эстетической ценности вашего сайта нельзя недооценивать. Эффективный дизайн использует цвет, контраст, шрифт, видео и фото элементы, чтобы привлечь посетителей и облегчить им чтение и работу с контентом, а не вокруг него, чтобы создать логичный, интуитивно понятный поток функций.
Пример: контрастность, цвет, пустое пространство, типографика, оптимизация для мобильных устройств.
Связано: Узнайте о том, как стать разработчиком внешнего интерфейса
В чем разница между пользовательским интерфейсом и взаимодействием с пользователем?
Пользовательский интерфейс и взаимодействие с пользователем связаны и одинаково важны для выполнения проекта, но их особенности различаются. В основном пользовательский интерфейс разрабатывается с учетом предполагаемого внешнего вида сайта, приложения или программы, в то время как UX охватывает весь процесс концептуализации, разработки и доставки.Кроме того, на UX можно ссылаться практически по отношению к любому продукту, а на UI можно ссылаться только на цифровые продукты. Основные различия между UX и UI:
UX вращается вокруг цели и функциональности продукта, а UI фокусируется на качестве взаимодействия пользователя с продуктом.
UX включает в себя такие компоненты, как исследование рынка и выявление потребностей пользователей, в то время как пользовательский интерфейс имеет более художественные компоненты дизайна, связанные с внешним видом и ощущениями пользователя.
UX фокусируется на общем управлении проектом от идеи до разработки и доставки, а UI более конкретно фокусируется на дизайне готового продукта.
Разработка взаимодействия с пользователем начинается с определения болевых точек целевых пользователей и выяснения того, как удовлетворить потребности указанных пользователей. Это включает в себя такие детали, как логические потоки или шаги, которые необходимо предпринять для достижения цели. После того, как интерфейс запрограммирован так, чтобы быть полезным, прототип отправляется разработчику пользовательского интерфейса, где процессы делаются визуально привлекательными.
Разработка пользовательского опыта включает в себя:
Общее выполнение и цело-отслеживание
Координация с разработчиками и UI Designers
Интеграция и аналитика
Контент или стратегия продукта
Wireframing, планирование , Прототипирование, развитие, тестирование
Разработка пользовательского взаимодействия включает в себя:
Уведомление о сайте / Приложение / программа
Reading Branding и Design Исследования
Отзывчивая адаптация
интерактивность, анимация
Реализация
Связано: Узнайте о том, как стать UX-дизайнером
Советы по созданию хороших пользовательских интерфейсов
Идеальный дизайн пользовательского интерфейса должен основываться на UX. Он должен иметь привлекательный, неповторимый внешний вид; логическая структура; и быть простым для понимания пользователями. Это сложнее, чем кажется. Даже после того, как дизайн пользовательского интерфейса будет усовершенствован, неизбежно потребуется много отладки и тонкой настройки, когда он будет запущен. Следуйте этим советам для создания эффективного пользовательского интерфейса:
Дизайн для отзывчивости
Эксперимент с дизайном
Сосредоточение на удобство использования
Держите его в соответствии с
Держите актуальность в уме
знают свой целевой пользователь
поддерживать брендинг
сделать его легко на глаза
сделать его простым общим
Viewread
Предоставить логические следующие шаги
Оставаться предсказуемым
Разумно использовать динамические эффекты
1.
Помните о контрастеОбеспечение простоты и достаточного контраста между цветами текста и фона значительно облегчает чтение.
2. Адаптивный дизайн
Веб-сайт всегда должен быть адаптирован к экрану, на котором он просматривается, будь то 7-дюймовый мобильный телефон или 70-дюймовый телевизор.
3. Поэкспериментируйте с дизайном
Включите исследование во время выполнения проекта, чтобы дать себе возможность открыть для себя новые элементы дизайна, которые могут сделать ваш конечный продукт исключительно уникальным и приятным в использовании.
4. Сосредоточьтесь на удобстве использования
Убедитесь, что пользователи могут интуитивно использовать ваш сайт/приложение/программу, даже если они посещают вас впервые.
5. Придерживайтесь единообразия
Выберите дизайн и придерживайтесь его на протяжении всего проекта. Каждая страница сайта должна быть оформлена одинаково, чтобы избежать путаницы или разочарования пользователя.
6. Не забывайте о релевантности
Интерфейс должен быть приятным, простым и информативным.
7. Знайте своего целевого пользователя
Может быть легко потерять общую цель в мелочах процесса проектирования, но то, что вы разрабатываете, предназначено для пользователя и, следовательно, должно быть ориентировано на пользователя.
8. Поддерживайте брендинг
Ваш пользователь должен иметь возможность узнавать ваш бренд на каждой странице вашего сайта, а новые пользователи должны узнавать ваш бренд при первом посещении.
9. Сделайте так, чтобы было удобно для глаз
Обратите внимание на удобочитаемость макета.Например, выравнивайте текст по краям, придерживайтесь ограниченной цветовой палитры (вы хотите, чтобы она была красочной и привлекающей внимание, но не перегруженной и ослепляющей), выберите семейство шрифтов, которое легко читается, и оптимального размера.
10. Сделайте это проще в целом
Выполнение задач должно требовать минимальных усилий со стороны пользователя, и каждая страница должна выполнять одну основную функцию.
11. Вычитка
Вы хотите, чтобы готовый продукт был представлен вашим пользователям без каких-либо ошибок.
12.Предоставьте логические следующие шаги
Дизайн пользовательского интерфейса должен позволять пользователям интуитивно понимать, что делать дальше.
13. Оставайтесь предсказуемыми
Такие элементы, как кнопки, масштабирование и другие интерактивные элементы, должны функционировать должным образом. Каждый элемент должен иметь значимую функцию.
14. Разумно используйте динамические эффекты
Конечной целью является взаимодействие с пользователем, но чрезмерное использование интерактивных элементов может быть подавляющим. Если они даже не очень полезны, пользователя можно отключить от всего этого.Эти эффекты, скорее, должны использоваться для оптимизации взаимодействия с пользователем.
Связанный: узнайте, как стать веб-разработчиком
Проектирование интуитивно понятных сенсорных интерфейсов точек интереса и точек продаж
В недавно опубликованной статье в блоге UX Matters рассказывается о том, как создавать интуитивно понятные и привлекательные сенсорные интерфейсы — с точки зрения Ventuz!
В Ventuz мы годами бились над вопросом, что нужно для создания отличного сенсорного интерфейса, и разработали несколько передовых методов для создания эффективных, привлекательных, интерактивных инсталляций POI и POS. Мы поделились своими мыслями в статье блога о UX Matters. Вот небольшое резюме. Если вы хотите узнать больше и увидеть несколько примеров, посетите веб-сайт UX Matters.Каждая интерактивная технология, появляющаяся на рынке, вызывает огромный ажиотаж, и клиенты обычно с нетерпением ждут ее использования в своей следующей установке. Но следует тщательно выбирать интерактивную технологию — например, касание, мультитач, жест или голос, — которая лучше всего подходит для конкретной установки. Сложный, детализированный интерфейс лучше всего управляется с помощью чувствительного сенсорного экрана, в то время как более развлекательные, игривые инсталляции могут использовать системы управления жестами.Ключевым моментом является удобство использования, а быстрое обучение и возможность обнаружения должны быть центральной проблемой.
Естественно, интерфейс навигации должен быть удобным. Но что, если контент требует многоуровневой информации и большого количества категорий? Постарайтесь развлечь посетителя, пока он использует интерфейс. Предоставьте немного информации на каждом уровне, и пусть они сами решат, нужно ли им углубляться или хотят ли они.
Несмотря на то, что большое количество людей ежедневно используют сенсорные устройства, в интерфейсе должно быть четко указано, какие элементы сенсорные, а какие нет.Пользователи быстро разочаровываются, если интерфейс реагирует не так, как они ожидали. Таким образом, осязаемые предметы должны быть легко идентифицируемыми, возможно, по специальному дизайну, например по цвету или выделению.
В любом случае каждый интерфейс должен быть протестирован с группой людей, незнакомых с концепцией, которой вы придерживаетесь. Юзабилити-тесты очень важны, и о них слишком часто забывают или пропускают из соображений бюджета и времени. Тем не менее, во времена, когда каждый сенсорный интерфейс конкурирует с телефонами, планшетами и всеми теми повседневными устройствами, которые нравятся пользователям и с которыми они знакомы, вы должны быть уверены, что им понравится ваш интерфейс так же сильно.