Простой интерфейс: Простой полноэкранный интерфейс — это… Что такое Простой полноэкранный интерфейс?

Содержание

Простой полноэкранный интерфейс — это… Что такое Простой полноэкранный интерфейс?

Текстовый интерфейс пользователя (англ. Text user interface, TUI; также Character User Interface, CUI) — система средств взаимодействия пользователя с компьютером, основанная на использовании текстового (буквенно-цифрового) режима дисплея или аналогичных устройств — например, командная строка. Приложения, использующие текстовый интерфейс, называют консольными программами.

Особенности текстового интерфейса

На программном уровне для ввода и вывода информации консольные программы используют стандартные устройства ввода-вывода (stdin, stdout, stderr), хотя могут открывать и другие файлы, сетевые соединения и совершать иные действия, доступные в выполняющей их среде. Вывод печатных символов в stdout и stderr приводит к появлению этих символов на устройстве вывода, то есть к их получению пользователем.

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

Некоторые консольные программы пригодны лишь для определённой реализации текстового интерфейса, например, текстовые программы операционных систем, особенно библиотека

Реализация текстового интерфейса

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

Классической реализацией текстового интерфейса, восходящей к первой половине XX века, является алфавитно-цифровое устройство ввода-вывода, например, комплект из клавиатуры и АЦПУ (телетайпа). Впоследствии вместо АЦПУ стали применять мониторы, снабжённые знакогенератором, что позволило быстро и удобно организовывать диалог с пользователем. Подобными устройствами снабжён или может быть снабжён почти каждый современный компьютер. Такие комплекты из монитора и клавиатуры (иногда с добавлением мыши) называются консолью компьютера.

В соответствии с традицией использования консольными программами клавиатуры и АЦПУ для ввода и вывода соответственно взаимодействие таких программ с пользователем свелось к чтению из stdin и выводу на stdout. Таким образом, появилась возможность перенаправлять потоки ввода-вывода, осуществляя взаимодействие с пользователем посредством иных устройств, в том числе подключенных через сеть, а также при помощи специальных программ-эмуляторов терминала, например, рисующих окно с текстом в графическом интерфейсе пользователя (текстовое окно).

В 1970-х годы и позднее выпускались даже специальные устройства, реализующие текстовый интерфейс — текстовые терминалы, подключаемые через последовательный порт к компьютеру напрямую или через модем. С распространением персональных компьютеров функции текстового терминала, как правило, выполняет компьютер, тот, на котором выполняется консольная программа, или другой. Программы ssh (а также Интернет или локальную сеть. Программы konsole и многие другие реализуют текстовый интерфейс посредством текстового окна в среде X Window System.

Альтернативный подход к консольному выводу был использован в персональных компьютерах, в частности (хотя не только), IBM PC под управлением памяти, связанной со знакогенератором монитора, приводя к немедленному изменению видимых на мониторе данных. Такие программы могут также работать в среде Microsoft Windows. Более того, Windows имеет поддержку текстовых окон, во многом превосходящую имевшуюся в DOS, в том числе и для приложений собственно Windows.

виртуальные консоли).

Примеры консольных программ

  • Любая программа, осуществляющая получение данных от пользователя путём чтения stdin и отправку данных пользователю путём записи в stdout, по определению является консольной программой. Однако, такие программы могут обходиться и безо всякого пользователя, например обрабатывая данные из файлов.
  • Текстовые программы для видеопамять Microsoft Windows.
  • Unix shell, а также все утилиты, предназначенные для работы в этой среде.
  • Midnight Commander (UNIX), FAR Manager (Windows).
  • pppstatus, top, htop (UNIX).

См. также

Wikimedia Foundation. 2010.

Простой дизайн сайта — характеристики, преимущества, наглядные примеры

Интерфейс должен быть не только красивым, но и понятным. Мы уже рассказывали о балансе между user experience и бизнес-целями. Главным критерием оценки качества интерфейса является пользовательский опыт. Дизайнеру надо спроектировать идеальный UI с точки зрения удобства и юзабилити, а заказчик должен правильно донести свои идеи.

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

Что такое простой дизайн

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

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

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

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

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

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

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

Многие дизайнеры думают, что простота — синоним пустоты. Когда в интерфейсе нет ничего, кроме текста и медиаконтента. Еле заметное меню, блоки с товарами и несколько call to action. Это популярный миф, который давно пора разрушить.

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

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

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

От корпоративных сайтов до больших приложений с явно выраженным продающим посылом.

Характеристики простого интерфейса

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

Минимализм

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

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

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

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

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

Привлекательность

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

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

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

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

Люди покупают машины или смартфоны не из-за красивого интерфейса, а потому что потратили много часов на поиск идеальной модели. Задача UI — провести «за руку» до выполнения целевого действия. С такими глобальными покупками, как машина или смартфон, пользователь вряд ли резко поменяет решение из-за недостатков интерфейса, но негативные впечатления будут ассоциировать с компанией.

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

Эффективность

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

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

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

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

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

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

Соответствие контексту

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

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

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

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

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

Согласованность

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

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

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

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

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

Интуитивность

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

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

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

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

Доступность

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

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

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

Преимущества простого веб-дизайна

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

Сильные стороны:

  1. Высокое быстродействие. Чем проще сайт, тем легче будет вёрстка. Не будет элементов, которые сильно нагружают браузеры и тратят много ресурсов. Это особенно важно для продуктов под мобильные устройства.
  2. Удобная навигация. Под простые интерфейсы создаётся аналогичная навигация. Пользователи легко ориентируются в разделах и тратят меньше времени на знакомство с новым инструментом.
  3. Фокус на контенте. Основное внимание уделяется товарам или услугам. Когда нет всплывающих окон, навязчивой анимации и других отвлекающих факторов, пользователи внимательно изучают предложения компании.
  4. Экономия времени на разработке. Простой UI легче создавать и тестировать. Несколько циклов работы над ошибками отпадут сами собой.
  5. Быстрое масштабирование. Добавить несколько страниц или разделов в лайтовый сайт проще, чем в перегруженный проект. Деньги, которые ушли бы на разработку, можно потратить на другие цели.

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Интерфейс 1С Бухгалтерия 8.3: виды и настройка

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

Виды интерфейсов 1С 8.3

В программе есть два вида интерфейса:

  • Такси — это основной и наиболее часто используемый вариант.
  • Формы в закладках.

Такси выглядит так:

Формы в закладках выглядит так.

Как поменять интерфейс Такси на Формы в закладках и наоборот

Для смены вида программы с Такси на Формы в закладках зайдем в меню «Сервис и настройки — Настройки — Параметры».

Получите понятные самоучители по 1С бесплатно:

Здесь мы можем поменять вид.

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

1С автоматически откроется в новом интерфейсе.

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

Изменяем внешний вид и перезапускаем программу.

Другие варианты интерфейса

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

Зайдем в меню «Администрирование — Настройки программы — Интерфейс».

Здесь нам доступны 3 варианта.

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

Полный

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

Аналогичный 1С:Бухгалтерии 7.7

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

Выглядит так.

При этом интерфейсы «Полный» и «Аналогичный 1С:Бухгалтерии 7.7» доступны и для Такси, и для Форм в закладках.

Простой

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

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

Простой интерфейс доступен только в Такси.

Также отметим, что в простом интерфейсе и интерфейсе 1С:БП 7.7 доступны не все возможности программы.

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

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

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

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

К сожалению, мы физически не можем проконсультировать бесплатно всех желающих, но наша команда будет рада оказать услуги по внедрению и обслуживанию 1С. Более подробно о наших услугах можно узнать на странице Услуги 1С или просто позвоните по телефону +7 (499) 350 29 00. Мы работаем в Москве и области.

Простой интерфейс с аналоговыми и цифровыми датчиками положения (энкодерами) для систем управления промышленными приводами

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

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

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

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

Интеграция обратной связи по положению

На основе линейки микроконтроллеров C2000™ Delfino™ корпорация Texas Instruments предлагает комплексную платформу для промышленных приводов и систем управления. Микроконтроллеры F28379D и F28379S семейства C2000 Delfino™ оснащены полным комплектом встроенных в микросхему ресурсов, начиная с возможностей обработки, которые требуются сложным и точным системам управления, и включая технологию управления датчиками положения DesignDRIVE Position Manager, которая поддерживает самые распространенные на сегодня серийные интерфейсы аналоговых и цифровых энкодеров (рисунок 1). Это освобождает разработчиков систем от решения многих достаточно общих, повторяющихся задач, сокращая время, требуемое для разработки.

Рисунок 1. Подробная структура двухъядерного микроконтроллера F28379D C2000™ с технологией DesignDRIVE Position Manager

Корпорация TI обладает обширным опытом и знаниями в области организации интерфейса энкодеров с цифровыми контроллерами. Начав с автономных решений для интерфейса круговых датчиков положения с цифровыми устройствами, таких как TMDSRSLVR, TI продолжила работу, добавив в свои изделия поддержку интерфейса обратной связи по положению. На смену дорогим микросхемам интерфейса круговых энкодеров с цифровыми устройствами пришли микроконтроллеры C2000 с их реализованными на кристалле функциональными возможностями, в полной мере использующие высокоэффективные аналого-цифровые преобразователи (АЦП) и цифро-аналоговые преобразователи (ЦАП). Более того, мощный аппарат математической обработки тригонометрических функций микропроцессоров C2000 особенно хорошо подошёл для дополнительной обработки, необходимой для расчёта углов и извлечения информации о скорости с высоким разрешением из амплитудно-модулированных синусоидальных сигналов круговых датчиков положения.

Многие микроконтроллеры C2000 поддерживают расширенные модули импульсных квадратурных энкодеров (eQEP), которые способны обеспечивать интерфейс с линейными или круговыми инкрементными энкодерами. Такие энкодеры подсчитывают импульсы, чтобы получить информацию о положении (если известен коэффициент пересчёта), направлении движения и скорости от вращающихся машин, используемую в высокоэффективных системах управления движением и положением. Кроме того, можно использовать eQEP (расширенные модули импульсных квадратурных энкодеров) для интерфейса с сигналами выходов пачек импульсов (ВПИ), которые обычно формируют на своих выходах программируемые логические контроллеры (ПЛК) в системах промышленной автоматизации для управления движением. eQEP также могут обеспечивать интерфейс с сигналами вращения по часовой/против часовой стрелки (CW/CCW). Сигналы CW/CCW обычно используются в сочетании с шаговыми двигателями или сервоприводами для управления электродвигателями или другим аппаратным обеспечением, связанным с движением. Микроконтроллеры C2000 F28379 поддерживают до трёх модулей eQEP.

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

Технология управления положением

Технология управления положением, доступная на платформе DesignDRIVE, использует преимущества аппаратных ресурсов, реализованных на кристалле микросхемы микроконтроллеров F28379S и F28379D семейства C2000 Delfino™ для интерфейса с наиболее распространёнными цифровыми и аналоговыми датчиками положения. Обладая встроенной поддержкой инкрементных датчиков положения (eQEP), сигналов CW/CCW и автономных решений для круговых энкодеров, технология Position Manager добавляет решения для аналогового определения положения, объединяя функции возбуждения и измерения кругового датчика положения, а также управления синусно-косинусными датчиками. Уникальная для микроконтроллеров C2000 технология Position Manager сочетает поддержку аналоговых датчиков с широко используемыми цифровыми абсолютными энкодерами, EnDat 2.2 и BiSS-C, предоставляя разработчикам систем широкий выбор типов энкодеров (рисунок 2).

Рисунок 2. Технология DesignDRIVE Position Manager поддерживает ведущие аналоговые и цифровые энкодеры

Рисунок 3. Пример решения для EnDat 2.2: наложение уровней и ПЛИС

Эта интегрированная технология Position Manager дает разработчикам систем реальную возможность ускорить циклы разработки и снизить стоимость ВКМ, избавив от необходимости организации в ПЛИС интерфейса конкретного энкодера с микроконтроллером или значительно сократив размер ПЛИС, освободив место, которое может быть необходимо для реализации других функций. Приведенная ниже иллюстрация показывает, как технология Position Manager освобождает разработчиков систем от нагрузки, связанной с разработкой драйверов программного обеспечения высокого и низкого уровней, а также всякого специализированного аппаратного обеспечения и логики, которые ранее, возможно, требовалось бы реализовывать в навесной ПЛИС. Кроме того, примерные проекты управления по замкнутому контуру на основе датчиков положения, загружаемые с DesignDRIVE, можно изменять, чтобы интегрировать их в проекты заказчика. Нижние уровни системы реализуются на кристалле или с помощью эталонных разработок и готовой библиотеки модулей интерфейса прикладного программирования (API).

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

Новые возможности организации интерфейса с энкодерами

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

Ниже приведены несколько новых добавлений к возможностям изделий Texas Instruments, реализованных благодаря технологии DesignDRIVE Position Manager.

Синусно-косинусные сигналы

Синусно-косинусные сигналы — это способ обратной связи, который встроен в интерфейсы круговых энкодеров, таких как Hiperface®, а также в другие фирменные интерфейсы. Эти так называемые синусоидальные абсолютные энкодеры обычно обеспечивают намного большее разрешение по положению и скорости, чем круговые или инкрементные энкодеры. В обычных квадратурных энкодерах информация об угле получается путём подсчёта фронтов пары квадратурных импульсов. Разрешение по углу фиксировано и зависит от количества импульсов на один механический поворот. Но в синусно-косинусных датчиках точность измерения угла повышается за счёт расчёта угла между фронтами с использованием взаимосвязи в паре синусного и косинусного выходов датчика (рисунок 4).

Рисунок 4. Промышленный сервопривод с интерфейсом синусно-косинусного энкодера

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

Внутренняя аналоговая подсистема микроконтроллеров F28379 Delfino™ идеально подходит для интерфейса с синусно-косинусными датчиками. Наличие нескольких АЦП, которые могут включаться от одного и того же источника, позволяет проводить одновременное измерение в обоих входных каналах. Кроме того, микроконтроллеры F28379 имеют собственную команду взятия арктангенса (ARCTAN) в математическом блоке тригонометрических функций (TMU), что означает, что вычисление угла может быть выполнено всего за 70 нс!

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

EnDat

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

Технология Position Manager позволяет организовать интерфейс микроконтроллера C2000 F28379 напрямую с датчиком EnDat (рисунок 5). Единственными навесными элементами микроконтроллера являются два трансивера RS-485 и схема питания энкодера. Ведущее устройство EnDat реализуется с помощью конфигурируемого логического блока микроконтроллера C2000, где обрабатывается протокол связи.

Рисунок 5. Промышленный сервопривод с интерфейсом энкодера EnDat 2.2

Технология Position Manager прошла испытания с рядом круговых, линейных и многооборотных энкодеров производства HEIDENHAIN при разрешениях от 13 до 35 бит на расстояниях 70 метров и более.

BiSS-C

Цифровой интерфейс с открытым исходным кодом BiSS (двунаправленный/последовательный/синхронный) основан на протоколе связи в реальном времени. Первоначальная спецификация была разработана немецкой компанией iC-Haus GmbH. В промышленных системах используется режим «BiSS-непрерывный» (BiSS-C). Спецификация имеет в своей основе синхронный последовательный интерфейс (SSI). Интерфейс BiSS-C состоит из двух однонаправленных или двунаправленных линий для тактовых сигналов и данных.

Как и во всех интерфейсах, поддерживаемых технологией Position Manager, ведущее устройство BiSS-C, работающее в микропроцессоре C2000 F28379, не может подключаться напрямую к ведомому кодеру BiSS-C в энкодере (рисунок 6). Интерфейс передает значения положения и дополнительную информацию прямо с кодера в микроконтроллер. Микроконтроллер способен считывать и записывать данные напрямую во внутреннюю память кодера. Технология Position Manager корпорации Texas Instruments включает в себя библиотеку BiSS-C с богатым набором возможностей, которую разработчики систем могут легко использовать в разрабатываемых ими проектах. Например, тактовые частоты диапазона 8 МГц поддерживаются в кабелях длиной до 100 метров. Кроме того, интерфейс BiSS микроконтроллера C2000 можно настроить на усовершенствованное управление модульными функциями и тактированием с передачей информации о положении от энкодеров в каждом цикле управления.

Рисунок 6. Промышленный сервопривод с интерфейсом энкодера BiSS-C

Реализованные на кристалле системы управления промышленными приводами

Мощные и программируемые микроконтроллеры, такие как микроконтроллеры F28379 семейства C2000 Delfino производства TI, представляют собой следующий шаг к реализации на кристалле (SoC) систем управления промышленными приводами. Они открывают возможность построения более эффективных и продуктивных архитектур систем, избавляя от необходимости иметь навесную ПЛИС для удовлетворения дополнительных потребностей в обработке или значительно уменьшая размер этой ПЛИС.

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

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

Литература

  1. Simple interfacing to analog and digital position sensors for industrial drive control systems (SPRY295), 2016 г.

Pillarbox — это бесплатный и простой интерфейс для письма

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

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

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

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

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

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

Вы можете внести много разных изменений в параметры. Изменить настройки в меню параметров Google Chrome очень просто. Под расширениями выберите Pillarbox. Вы можете изменить практически все, что вам нужно, в макете текста. Это поможет любому писателю, ориентированному на компьютер, найти наиболее подходящий и удобный способ просмотра своего рабочего места. Если вы знакомы с CSS, легко настроить пользовательские настройки, которые сделают Pillarbox еще лучше.

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

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

Введение в разработку графического интерфейса

Для выполнения программы в среде IDE выполните следующие действия:

  1. Выберите Run («Запуск») > Run Main Project («Запуск главного проекта») (как вариант, нажмите F6).

Примечание. При открытии окна с указанием того, что для Project NumberAddition не задан основной класс, следует выбрать my.NumberAddition.NumberAdditionUI в качестве основного класса в том же окне и нажать кнопку ОК.

Для запуска программы вне среды IDE выполните следующие действия:

  1. Для сборки архива JAR приложения выберите «Run > Clean and Build Main Project» (Shift-F11).

  2. При помощи проводника по файловой системе или диспетчера файлов перейдите в каталог ` NumberAddition/dist`.

Примечание. Местоположение каталога проекта NumberAddition зависит от пути, указанного при создании проекта в шаге 3 в разделе Упражнение 1. Создание проекта.

  1. Дважды щелкните файл NumberAddition.jar.

Через несколько секунд приложение запустится.

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

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

Для запуска приложения из командной строки выполните следующие действия:

  1. Вызовите командную строку или окно терминала.

  2. В командной строке измените текущий каталог на каталог NumberAddition/dist.

  3. В командной строке введите следующий оператор:

java -jar  NumberAddition.jar

Примечание. Убедитесь, что my.NumberAddition.NumberAdditionUI задан как основной класс до запуска приложения. Для провери этого, щелкните правой кнопкой узел мыши узел проекта NumberAddition на панели ‘Проекты’, выберите ‘Свойства’ во всплывающем меню и выберите категорию ‘Выполнить’ в диалоговом окне ‘Свойства проекта’. В поле ‘Основной класс’ должно отображаться my.numberaddition.NumberAdditionUI .

Основы дизайна пользовательского интерфейса | Usability.gov

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

Выбор элементов интерфейса

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

Элементы интерфейса включают, но не ограничиваются:

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

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

Передовой опыт проектирования интерфейса

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

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

Ссылки

 

Создайте простой пользовательский интерфейс  | Разработчики Android

В этом уроке вы научитесь пользоваться Редактор макетов Android Studio для создания макета, включает текстовое поле и кнопку. Это подготовка к следующему уроку, на котором вы узнаете, как сделать Приложение отправляет содержимое текстового поля другому действию при нажатии кнопки.

Рис. 1. Скриншот окончательного макета

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

Рисунок 2. Иллюстрация формирования объектов ViewGroup ветвей в макете и содержат просмотр объектов.

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

В этом уроке предполагается, что вы используете Android Studio v3.0 или более поздней версии и что вы выполнили создайте урок проекта Android.

Открытие редактора макетов

Для начала настройте рабочее пространство следующим образом:

  1. В окне проекта откройте app > res > layout > activity_main.xml .
  2. Чтобы освободить место для Редактора макетов, скройте окно Project . Для этого выберите View > Tool Windows > Project или просто нажмите Проект в левой части экрана Android Studio.
  3. Если ваш редактор показывает источник XML, щелкните вкладку Дизайн в правом верхнем углу окна.
  4. Щелкните ( Select Design Surface ) и выберите Blueprint .
  5. Нажмите ( Параметры просмотра ) на панели инструментов редактора макетов и убедитесь, что Показать все ограничения установлен флажок.
  6. Убедитесь, что автоподключение отключено. На панели инструментов появится всплывающая подсказка ( Включить автоподключение к родительскому ), когда автоподключение отключено.
  7. Нажмите ( Поля по умолчанию ) на панели инструментов и выберите 16 . При необходимости вы можете настроить поля для каждого вида позже.
  8. Нажмите ( Устройство для предварительного просмотра ) на панели инструментов и выберите 5,5, 1440 × 2560, 560 точек на дюйм (Pixel XL) .

Ваш редактор макетов теперь выглядит так, как показано на рисунке 3.

Рис. 3. Редактор макетов, отображающий файл activity_main.xml

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

На панели «Дерево компонентов » в левом нижнем углу показана иерархия представлений компоновки.В этом случае корневое представление — это ConstraintLayout , которое содержит только один Объект TextView .

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

Рис. 4. Иллюстрация двух видов, расположенных внутри ConstraintLayout

Например, вы можете объявить следующую раскладку, показанную на рисунке 4:

  • Вид А отображается на расстоянии 16 дп от верхнего края родительского макета.
  • Вид A отображается на расстоянии 16 dp слева от родительского макета.
  • Вид B отображается на 16 dp правее вида A.
  • Вид B выровнен по верхнему краю вида A.

В следующих разделах вы создадите макет, аналогичный макету на рис. 4.

Добавить текстовое поле

Рис. 5. Текстовое поле ограничено верхней и левой частью родительский макет

Чтобы добавить текстовое поле, выполните следующие действия:

  1. Сначала нужно удалить то, что уже есть в макете. Нажмите TextView в Дерево компонентов и нажмите клавишу Удалить .
  2. На панели Palette щелкните Text , чтобы отобразить доступные элементы управления текстом.
  3. Перетащите Plain Text в редактор дизайна и поместите его в верхнюю часть макета. Этот это виджет EditText , который принимает обычный текстовый ввод.
  4. Щелкните вид в редакторе дизайна. Теперь вы можете видеть квадратные ручки для изменения размера представления на каждый угол, и якоря круговой зависимости с каждой стороны. Для лучшего контроля вам может понадобиться чтобы увеличить масштаб редактора. Для этого используйте кнопки Масштаб на панели инструментов Редактора макетов.
  5. Нажмите и удерживайте якорь на верхней стороне, перетащите его вверх, пока он не защелкнется в верхней части макета, а затем отпустите его.Это ограничение: оно ограничивает представление в пределах поля по умолчанию, которое было задавать. В этом случае вы устанавливаете его на 16 dp от верхней части макета.
  6. Используйте тот же процесс для создания зависимости от левой стороны вида к левой стороне расположение.

Результат должен выглядеть так, как показано на рисунке 5.

Добавить кнопку

Рисунок 6. Кнопка ограничена правой стороной текстового поля и его базовый уровень

  1. На панели Palette нажмите Buttons .
  2. Перетащите виджет Button в редактор дизайна и поместите его рядом с правой стороной.
  3. Создайте ограничение от левой стороны кнопки к правой стороне текстового поля.
  4. Чтобы ограничить виды в горизонтальном выравнивании, создайте ограничение между текстом базовые линии. Для этого щелкните правой кнопкой мыши кнопку и выберите Показать базовый уровень . Якорь базовой линии появляется внутри кнопки. Нажмите и удерживайте этот якорь, а затем перетащите его в якорь базовой линии, который появляется в соседнем текстовом поле.

Результат должен выглядеть так, как показано на рисунке 6.

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

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

Для предварительного просмотра пользовательского интерфейса щелкните ( Select Design Surface ) на панели инструментов и выберите Design . Обратите внимание, что для ввода текста и метки кнопки установлены значения по умолчанию.

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

  1. Откройте окно Project , а затем откройте приложение > res > values ​​> strings.xml .

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

  2. Щелкните Открыть редактор в верхней части окна. Это открывает Редактор переводов, который предоставляет простой интерфейс для добавления и редактирования строк по умолчанию.Это также поможет вам сохранить все ваших переведенных строк организованы.
  3. Нажмите ( Добавить ключ ), чтобы создать новая строка в качестве «текста подсказки» для текстового поля. В этот момент открывается окно, показанное на рисунке 7.

    Рисунок 7. Диалоговое окно для добавления новой строки

    В диалоговом окне Добавить ключ выполните следующие действия:

    1. Введите «edit_message» в поле Key .
    2. Введите «Введите сообщение» в поле Значение по умолчанию .
    3. Нажмите OK .
  4. Добавьте еще один ключ с именем «button_send» и значением «Отправить».

Теперь вы можете установить эти строки для каждого представления. Чтобы вернуться к файлу макета, нажмите activity_main.xml на панели вкладок. Затем добавьте строки следующим образом:

  1. Щелкните текстовое поле в макете. Если окно Атрибуты еще не отображается на справа щелкните Атрибуты на правой боковой панели.
  2. Найдите свойство text , для которого в настоящее время задано значение «Имя», и удалите это значение.
  3. Найдите свойство подсказки и щелкните ( Выберите ресурс ), который должен справа от текстового поля. В появившемся диалоговом окне дважды щелкните edit_message из список.
  4. Нажмите кнопку в макете и найдите ее свойство text , которое в настоящее время установлено. на «Кнопку». Затем нажмите ( Выберите ресурс ) и выберите кнопка_отправить .

Сделать размер текстового поля гибким

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

Прежде чем продолжить, нажмите ( Выберите рабочую поверхность ) на панели инструментов и выберите Blueprint .

Чтобы сделать текстовое поле гибким, выполните следующие действия:

Рисунок 8. Результат выбора Создать горизонтальную цепочку

Рис. 9. Щелкните, чтобы изменить ширину на Соответствие ограничениям

Рисунок 10. Теперь текстовое поле растягивается, чтобы заполнить оставшееся пространство

  1. Выберите оба представления. Для этого щелкните один, удерживайте Shift , затем щелкните другой, а затем щелкните правой кнопкой мыши любой из них и выберите Цепочки > Создать горизонтальную цепочку . Затем появляется макет как показано на рисунке 8.

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

  2. Нажмите кнопку и откройте окно Атрибуты . Затем используйте Constraint Widget , чтобы установить правое поле на 16 dp.
  3. Щелкните текстовое поле, чтобы просмотреть его атрибуты. Затем дважды щелкните индикатор ширины, чтобы он был установлен. к зубчатой ​​линии ( Match Constraints ), как показано выноской 1 на рисунке 9.

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

Теперь компоновка выполнена, как показано на рисунке 10.

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

См. окончательный макет XML



    <Редактировать текст
        android:id="@+id/editText"
        Android: layout_width = "0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        андроид: layout_marginTop = "16dp"
        андроид: ems = "10"
        android:hint="@string/edit_message"
        Android: inputType = "textPersonName"
        приложение:layout_constraintEnd_toStartOf="@+id/кнопки"
        приложение:layout_constraintHorizontal_bias="0.5 дюймов
        приложение: layout_constraintStart_toStartOf="родительский"
        приложение: layout_constraintTop_toTopOf="родительский" />

    <Кнопка
        android:id="@+id/кнопка"
        Android: layout_width = "wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        андроид:текст="@string/button_send"
        приложение: layout_constraintBaseline_toBaselineOf="@+id/editText"
        приложение: layout_constraintEnd_toEndOf = "родительский"
        приложение:layout_constraintHorizontal_bias="0.5 дюймов
        приложение:layout_constraintStart_toEndOf="@+id/editText" />

 

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

Запустить приложение

Если ваше приложение уже установлено на устройстве с предыдущий урок, просто нажмите ( Применить изменения ) на панели инструментов, чтобы обновить приложение с новым макетом.Или нажмите Запустить «приложение» для установки и запуска приложения.

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

3 отличных примера упрощенного пользовательского интерфейса

Упрощенный пользовательский интерфейс (или SUI) — это термин, который вы можете не узнать, но вы обязательно узнаете его, если увидите его в действии.

В наши дни

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

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

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

1. Slack: помогите пользователям пройти адаптацию

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

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

Вот почему мне нравится то, что Slack делает во время их адаптации.

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

2. Bluebeam: используйте SUI для видеоконтента

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

Этот пример от Bluebeam – это умный способ показать процесс простым, но эффективным способом.

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

3. Проводник: рекламировать услугу с SUI

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

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

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

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

Хотите создать свою собственную графику SUI?

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

Как разработать простой пользовательский интерфейс для сложного решения — Smashing Magazine

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

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

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

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

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

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

Как разработать простой пользовательский интерфейс для сложного решения

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

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

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

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

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

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

Instagram недавно обновил верхний и нижний колонтитулы своего давнего интерфейса. Вот как выглядел заголовок до и после ноября 2020 года:

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

Предыдущий дизайн содержит два символа/действия:

  • Значок камеры для съемки или загрузки фотографий.
  • Значок Messenger для чата с подключениями.

В последнем дизайне все значки повернуты вправо. Теперь их три:

  • Символ плюса для создания постов, историй, роликов и жизней в Instagram.
  • Символ сердца для просмотра активности (т. е. участия в публикации, новых подписчиков и т. д.).
  • Значок Messenger сохранил тот же дизайн и расположение.

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

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

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

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

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

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

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

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

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

2. Оцените продукты конкурентов, чтобы создать свой MVP

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

Вот что сделал Flatfile. Wiafe объясняет ценность MVP:

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

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

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

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

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

Давайте представим, что вы создаете программное обеспечение платежного шлюза. Вы можете начать с Stripe:

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

And 2Checkout:

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

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

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

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

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

Одна вещь, которую Wiafe предлагает, — это не относиться к вашему MVP строго как к каркасу:

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

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

3. Вводите сложность постепенно и подтверждайте с помощью пользовательского тестирования

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

Вы размещаете заказ в 20:00.м. Приложение сообщает, что ресторан подтвердил заказ через несколько секунд, и около 8:45 у вас будет еда. В 8:40 вы открываете приложение, чтобы увидеть, где на карте находится курьер, и удивляетесь, почему он не двигается. Или, что еще хуже, почему они движутся в неправильном направлении. Ваш желудок начинает урчать, и вы жалеете, что не взяли заказ сами.

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

поиск Google для «водитель доставки пошел в неправильном направлении в приложении».(Источник изображения: Google) (Большой превью)

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

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

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

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

Как объясняет Виафе:

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

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

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

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

Подведение итогов

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

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

(ra, il)

10 основных советов, которые сделают ваш интерфейс простым | by Felipe Borges

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

  1. Сократи, сосредоточься на необходимом!

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

Старый интерфейс Microsoft WordНовый интерфейс Microsoft Word

2. Организуйте, оставьте все на видном месте!

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

Пример хаотической организации

3. Время, сэкономьте время пользователя!

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

4. Учись, пользователь должен учиться быстро!

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

Cat Mario, худшая игра на свете.

5. Отличия, простота требует сложности!

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

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

6. Контекст, внимание!

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

7. Эмоции, люди хотят то, что им нужно, по-своему!

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

8. Поверьте, пользователь хочет знать, что произойдет!

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

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

9. Неудача, некоторые вещи не могут быть простыми!

Некоторые вещи просто не могут быть простыми.

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

10. Единственное правило, меньше очевидного и больше значимого!

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

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

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

10 руководств по дизайну пользовательского интерфейса от Nielsen and Molich

Якоб Нильсен, известный веб-консультант по юзабилити и партнер Nielsen Norman Group, и Рольф Молич, еще один известный эксперт по юзабилити, составили список из десяти руководств по дизайну пользовательского интерфейса в 1990-х годах. Обратите внимание, что эвристики Нильсена и Молича и «восемь золотых правил» Бена Шнейдермана во многом совпадают. Эти 10 эмпирических правил являются продолжением восьми золотых правил Шнейдермана спустя 4 года после первоначальной публикации Шнейдермана.

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

Google Inc., технологическая компания с многомиллиардным оборотом, безусловно, производит проекты, отражающие вышеуказанную эвристику.Джон Уайли, главный дизайнер Google Search в 2012 году, однажды сказал:

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

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

Узнайте, как Adobe интегрирует десять руководств по дизайну пользовательского интерфейса Нильсена и Молича

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

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

1. Видимость состояния системы

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

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

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

2. Соответствие системы реальному миру

Примером того, как Photoshop имитирует реальный мир в терминах и представлениях, понятных их целевым пользователям, является то, что они разрабатывают информационную структуру и терминологию, чтобы отразить ту же формулировку, которую мы использовали бы в мир фотографии или печатных СМИ. Знакомые понятия и термины, такие как RGB, оттенок/насыщенность/яркость и CMYK, используются для представления цвета, в то время как различные инструменты, такие как инструмент осветления и инструмент затемнения, имитируют традиционную технику темной комнаты для фотографий.

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

Инструменты Photoshop Dodge Tool и Burn Tool имитируют традиционную технику фотолаборатории для фотографий

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

В Photoshop используется термин «Экспозиция», широко используемый в мире фотографии.

3. Пользовательский контроль и свобода

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

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

Пользователи контролируют ситуацию, поскольку они могут сделать Шаг назад или Шаг вперед в меню «Правка» или, в качестве альтернативы, они могут использовать сочетания клавиш Photoshop, например, Alt+Ctrl+Z.

4. Согласованность и стандарты

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

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

Меню «Файл» в Photoshop отображает множество хорошо знакомых параметров.

5.Предотвращение ошибок

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

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

Пользователь наводит указатель мыши на значок ластика, и Photoshop отображает метку «Инструмент ластик».

6.Распознавание вместо повторного вызова

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

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

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

7. Гибкость и эффективность использования

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

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

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

8. Эстетичный и минималистичный дизайн

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

Автор/правообладатель: Adobe Systems Incorporated.Условия авторского права и лицензия: Добросовестное использование

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

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

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

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

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

10. Справка и документация

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

Автор/правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: Добросовестное использование

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

10 шагов по улучшению юзабилити, полезности и привлекательности за счет реализации рекомендаций Nielsen and Molich по проектированию пользовательского интерфейса

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

Скачать PDF здесь .

The Take Away

Если вы будете следовать 10 рекомендациям Nielsen and Molich по пользовательскому интерфейсу, вы будете проектировать с учетом удобства использования, полезности и привлекательности.Так же, как дизайнеры успешных компаний, таких как Apple, Google и Adobe, вы сможете поддерживать свои дизайнерские решения с помощью хорошо изученной эвристики и быть уверенными в создании дизайна, который будет одновременно и удобным, и красивым. Чтобы попрактиковаться в распознавании этих 10 эмпирических правил, выполните упражнение, описанное в прикрепленном файле из раздела выше.

Где узнать больше

Дополнительную информацию о статье Якоба Нильсена «Повышение объяснительной силы эвристики юзабилити» см. по адресу:

https://static.aminer.org/pdf/PDF/000/089/679/enha…

Ссылки и где узнать больше

Главное изображение: Автор/правообладатель: Барри Шварц. Фликр. Условия авторского права и лицензия: CC BY-NC 2.0

Курс: Шаблоны дизайна пользовательского интерфейса для успешного программного обеспечения:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

Что такое пользовательский интерфейс? (Определение, типы и примеры)

  1. Развитие карьеры
  2. Что такое пользовательский интерфейс? (Определение, типы и примеры)
Редакция Indeed

17 сентября 2021 г.

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

Что такое пользовательский интерфейс?

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

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

Другие типы пользовательских интерфейсов могут включать:

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

  • Графический пользовательский интерфейс: тактильный пользовательский интерфейс с визуальным выходом (клавиатура и монитор).

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

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

  • Голосовой пользовательский интерфейс: взаимодействие между людьми и машинами с использованием звуковых команд.Примеры включают устройства виртуального помощника, голосовое управление, GPS и многое другое.

Почему важен пользовательский интерфейс?

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

В частности, вот наиболее важные всеобъемлющие элементы отличного пользовательского интерфейса:

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

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

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

Связано: Узнайте о том, как стать разработчиком внешнего интерфейса

В чем разница между пользовательским интерфейсом и взаимодействием с пользователем?

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

  • UX вращается вокруг цели и функциональности продукта, а UI фокусируется на качестве взаимодействия пользователя с продуктом.

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

  • UX фокусируется на общем управлении проектом от идеи до разработки и доставки, а UI более конкретно фокусируется на дизайне готового продукта.

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

Разработка пользовательского опыта включает в себя:

  • Общее исполнение и целеугощение 1

  • Координация с разработчиками и UI Designers

  • Интеграция и аналитика

  • Содержание или стратегия продукта

  • Wireframing, планирование, планирование , Прототипирование, развитие, тестирование

Разработка пользовательского взаимодействия включает в себя:

  • Просмотр сайта / приложения / программы

  • Брендинг и дизайн исследования 1

    4

  • адаптивная адаптация

  • интерактивность, анимация

  • Реализация

Связано: Узнайте о том, как стать UX-дизайнером

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

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

  1. 1

  2. дизайн для отзывчивов

  3. эксперимент с дизайном

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

  5. Держите его последовательными

  6. Держите актуальность в уме

  7. знают, что ваш целевой пользователь

    1

    поддерживает брендинг 1

  8. сделать его легко на глазах

  9. сделать его простым общим объемом

  10. Viewread

  11. Предоставить логические следующие шаги

  12. Оставаться предсказуемым

  13. Разумно использовать динамические эффекты

1.Помните о контрасте

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

2. Адаптивный дизайн

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

3. Экспериментируйте с дизайном

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

4. Сосредоточьтесь на удобстве использования

Убедитесь, что пользователи могут интуитивно использовать ваш сайт/приложение/программу, даже если они посещают вас впервые.

5. Придерживайтесь единообразия

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

6. Не забывайте о релевантности

Интерфейс должен быть приятным, простым и информативным.

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

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

8. Поддерживайте брендинг

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

9. Удобство для глаз

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

10. Сделайте это проще в целом

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

Добавить комментарий

Ваш адрес email не будет опубликован.