Что такое интерфейс: каким он бывает и как сделать его удобным для пользователей
Разбираемся, что подразумевают под термином «интерфейс» в сфере IT и дизайна.
Что такое интерфейс
Английский термин interface состоит из двух слов: interaction — «взаимодействие» и face — «лицо». Получается своеобразное «лицо продукта», благодаря которому происходит «взаимодействие».
Мы не можем взаимодействовать напрямую с кодом программы — для этого нам нужна картинка, где мы будем видеть код, иметь возможность менять его и видеть изменения на этой картинке.
Что он помогает делать
- Вводить информацию, отображать ее и обмениваться ей. Все звуки и картинки, которые мы видим на экранах телефонов и компьютеров, — результат созданного интерфейса.
- Управлять приложениями — часть из них может регулироваться с помощью программных видов интерфейса.
- Взаимодействовать с технической частью устройств и систем.
Интерфейс нужен, чтобы наладить контакт как человека с устройством, так и системы с устройствами.
Профессия «UX/UI-дизайнер»
Научитесь проектировать удобные интерфейсы и получите профессию, которая раскроет ваш творческий потенциал.
Классификация интерфейсов
В продуктовом дизайне интерфейс — одна из главных составляющих веб-сервисов и приложений, с которыми взаимодействует конечный пользователь. Таким образом компания получает от пользователя информацию и выдает ее ему. От грамотно спроектированного интерфейса зависит то, насколько результативным будет взаимодействие пользователя с продуктом.
Аппаратные (Hardware)
С их помощью обеспечивается подключение устройств к системе.
Примеры: привычные нам USB, Lightning, HDMI и т. д.
Программные (Software)
Самый распространенный пример программного интерфейса — API: с помощью него программируются приложения. В процессе работы обеспечивается интеграция систем.
Примеры: приложению или сайту нужно получить данные с сервера. Настраиваются соответствующие запросы, обеспечивается документация, описывающая процессы.
В объектно-ориентированном программировании интерфейс нужен для описания общей структуры, без детального рассмотрения.
Пользовательские (User)
Обеспечивают взаимодействие человека с системой. Многие пользовательские интерфейсы — графические, они представляют собой изображения. Но есть и консольные с вводимыми командами — CLI. Они сочетают пользовательские и программные компоненты.
Разработка интерфейсов: кто и как этим занимается
Разработка его внешнего вида и удобства для пользователей, — задача продуктового или UX/UI-дизайнера. В больших корпорациях этим занимается целая дизайн-команда, а в маленьких проектах может быть один специалист. Но во всех вариантах результативность разработки напрямую зависит от профессионализма дизайнера.
Типы интерфейсов
Командная строка — пример интерфейса из области программирования. С ее помощью можно задать код, который затем выполнит программа. Язык интерфейса должен совпадать с языком операционной системы, чтобы менять настройки и управлять программой. Рассмотрим, какие еще бывают разновидности.
Текстовый и графический
Это одни из самых частых систем. В них входят изображения, меню, поля ввода, иконки, схемы, кнопки. Кстати, командная строка относится к текстовому виду интерфейса.
Жестовый и тактильный
Это все то, что мы делаем каждый день: нажимаем иконки смартфона и клавиши компьютера. Сюда же относится управление мышью или джойстиком. Системы видеонаблюдения, света и охраны, реагирующие на движения, также используют жестовый тип. Взаимодействие с ним может быть как тактильным, так и бесконтактным.
Голосовой
Вы точно знаете функции «Окей, Google» и «Привет, Siri» — это примеры голосового интерфейса. Постепенно он совершенствуется: уже существуют нейросети, которые делают синхронный перевод при разговоре.
Пользовательский
Многие при слове «интерфейс» представляют именно пользовательский. Этот тип объединяет предыдущие — все то, что мы видим на экране.
Игровой и веб
Страницы на сайте содержат визуальную информацию и программную часть. Взаимодействие с кодом проходит через протокол HTTP и соответствующие браузеры. Похожим образом осуществляется взаимодействие в играх.
Принципы создания интерфейсов
При создании интерфейса стоит придерживаться следующих правил:
- Адаптивность к ПК и гаджетам.
- Наличие единых оформления и стиля, собирающихся в логические блоки.
- Интуитивность и лаконичность — пользователи уже примерно представляют, где должна быть кнопка выхода или меню. Если они вдруг из угла экрана переместятся в центр, это будет выглядеть довольно странно. Это правило относится ко всем видам интерфейсов. Лишнее время, которое пользователь тратит на поиск, пропорционально снижает желание взаимодействовать с продуктом дальше.
- Логичность действий — если это приложение или сайт, пользователь будет совершать определенный набор действий. Не стоит нарушать эту логику.
- Учет ошибок — пользователь может нажать не ту кнопку и ошибочно продолжить оформление заказа. Всегда нужно позволять вернуться на шаг назад.
Что еще важно учесть
Всегда нужно отталкиваться от потребностей пользователей и учитывать, какую проблему они решают с помощью продукта. Если пользователь приходит за покупкой в интернет-магазин — важно спроектировать удобный каталог. Потребности пользователей во много определяют, что будет в интерфейсе первостепенным.
Если это сервисный продукт, то не стоит перегружать визуальное отображение. Хороший пример — интерфейс операционной системы iOS на iPhone с минимумом ярких цветов и понятной логикой.
Курс «Практики цифровой доступности»
Узнаете о широких возможностях цифровой доступности и о том, как люди с особенностями здоровья используют различные инструменты и адаптивные стратегии.
Процесс создания интерфейса
Создание пользовательского интерфейса проходит поэтапно:
- Сбор данных. В крупных компаниях проектный менеджер общается с клиентом, выявляет потребности и составляет техническое задание.
- Проведение конкурентного анализа. Важно проанализировать ошибки, найти удачные решения конкурентов и внедрить хорошие практики в свою работу.
- Создание черновика. Первая версия еще не идет в продакшн. С ее помощью дизайнер проверяет, насколько логично взаимосвязаны элементы, и проектирует дизайн. Черновой вариант отправляется клиенту, чтобы получить обратную связь. Часто в качестве черновика используют не полноценную тестовую версию продукта, а прототип.
- Реализация готового макета. После обсуждения с клиентом и доработок подготавливается финальная версия. Устраняются баги и проверяется работоспособность.
- Тестирование и сдача проекта. На больших проектах к этому подключаются тестировщики. При проверке необходимо давать подробную обратную связь о работоспособности системы.
Какие программы используются для создания интерфейсов
Figma
Figma — онлайн-сервис для создания прототипов сайтов и приложений с понятной навигацией. В нем также можно работать над проектом в одном пространстве с другими пользователями.
Sketch
С помощью этого сервиса создают мудборды и дизайн-макеты. У платформы есть минус — нельзя работать над одним проектам сразу нескольким пользователям. Зато она подходит для лендингов и других одностраничников, когда нужно предоставить только черновик, а затем готовую работу.
Miro и FigJam
Это интерактивные доски для совместной работы в команде. Здесь же можно проводить мозговые штурмы и придумывать новые пути решения. Они удобны для построения интерактивной карты путей клиента и выявления пробелов в пользовательском опыте.
Adobe XD
Программа от Adobe Systems. Она поддерживает векторную графику и дает возможность создавать интерактивные пользовательские интерфейсы для веб- и мобильных приложений.
Будущее интерфейсов
Одна из перспектив в этой сфере — развитие нейронных интерфейсов. В мозг вживляются электроды, затем с их помощью передают текст и картинку. Часть испытаний нейроинтерфейсов уже проходит и показывает хорошие результаты. Такие технологии во многом облегчат жизнь людям с особенностями здоровья и откроют много возможностей управления техническими устройствами.
Об удобстве интерфейсов
Сегодня, дорогие друзья, мне бы хотелось поговорить об насущной проблеме всеобщего одваноливания (прим. автора: веб 2.0) — проблеме хороших графических интерфейсов на веб-сайтах.
Многие дизайнеры совершают некоторые довольно типичные ошибки при проектировании пользовательских интерфейсов, и это приводит к различным неудобствам при их использовании конечными пользователями.
0. Введение
Хотелось бы сразу объяснить для кого пишется эта статья. Эта статья для тех, кто не первый день в дизайне, и знает хотя-бы азы подбора цветов, шрифтов, и собственно расположения их на сайте.
Предполагается, что дизайнер прочитавший эту статью не будет использовать розовый на голубом, или использовать сглаженный шрифт для основного текста. Также считается, что дизайнер понимает значения словосочитаний «пром. дизайн», «палитра», «градации», «естественный раздражитель», «эргономика». Для тех, кто по какому либо обстоятельству не знает значения этих словосочитаний — в главе «Словарь терминов» я их расшифрую.
Пока же наслаждайтесь чтением.
1. Группировка элементов
Группировка элементов UI — вообще очень важная часть планирования интерфейса. От удачности комбинации элементов взаимодействия зачастую зависит, уйдёт ли пользователь с сайта или же станет его активным пользователем.
Помните, группировать элементы интерфейса нужно грамотно. Мы рассмотрим несколько способов группировки:
а) Группировка по функциям
б) По результату действия
в) Смешанный тип группировки
Сейчас мы приступим к детальному рассмотрению данных способов.
а) По функциям
Это относительно простой способ группировки элементов интерфейса, но многие дизайнеры не используют его.
Разбейте элементы вашего интерфейса на классы (группы, блоки — как удобнее называть) и разместите эти блоки в порядке убывания важности для пользователя. Между прочим, это не так уж легко. Проследите за тем, куда смотрит ваш глаз в первую очередь, запомните основные точки и нарисуйте ломаную прямую. Это — «линия зрения» пользователя.
Например возьмем интерфейс Google и проследим за взглядом:
Элементы, выполняющие сходные функции, нужно помещать в отдельную функциональную группу.
б) По результату от действия
С одной стороны, располагать элементы управления лучше в одном месте, но иногда требуется отделить одну группу элементов от другой. Этот способ предлагает делить функции на функциональные группы, создание которых происходит по принципу схожести результата от действия их элементов.
Действия с изображениями располагаются в одной части страницы, действие с текстом — в другой.
в) Смешанный
Этот способ — крупнейшая ошибка в истории дизайна интерфейсов. Почему? Да хотя бы потому, что, глядя на такую группировку элементов, пользователь не видит логики в их расположении и покидает сайт. Это также относится и к пром. дизайну.).
Я крайне не рекомендую использовать смешанный тип группировки и склоняюсь к использованию группировки по функциям, изредка разбавляя его группировкой элементов по типу.
Стремитесь использовать опыт других дизайнеров! Часто анализ интерфейсов популярных сайтов той же тематики позволяет избежать большинства ошибок в своих работах.
Пример использования смешанного типа группировки:
Портал Netz.ru и аналоги. Дизайн выглядит хорошо, но он неудобен.
2. Расположение элементов
А как же всё-таки располагать элементы, чтобы работать с сайтом было удобно каждому пользователю, даже самому неопытному?
Давайте поразмышляем, какие раздражители сильнее всего действуют на человека?
1. Звук
2. Прикосновение
3. Цвет
4. Запах
Т.к. чисто технически прикосновение и запахи на сайты не внедрены, мы рассмотрим цвет и звук.
Лично я категорически не приемлю звуки на сайтах, они меня вводят в заблуждение и оттягивают внимание на себя. Поэтому давайте воспользуемся оставшимся естественным раздражителем для человека — цветом.
Сам по себе цвет не может повлиять на удобство страницы, но его можно использовать в вспомогательных целях.
Группируйте элементы навигации по функциям или результату, и отметьте каждую функцию цветом, отличным от используемых для других элементов — для наглядности использования.
Пример: для работы с картинками можно использовать один цвет, а для работы с текстом — другой.
Существует прекрасная утилита для подбора удачных цветов. Color Schemer Studio + Color Pix
Теперь давайте поговорим о расположении элементов в целом и общем.
Первое что хотелось бы сказать по этому поводу — важные элементы должны иметь фиксированное расположение. Пользователю очень не понравится, если меню каждый раз будет на новом месте, ведь каждый раз искать его на экране дико неудобно. Менее важные элементы интерфейса могут быть перемещены но это крайне нежелательно.
Даже то, что может казаться неважным дизайнеру, может оказаться важным для пользователя.
3. Деление на блоки
Прежде чем заняться полноценным дизайном страницы, займитесь разработкой блочной разметки. Просто расчертите белый лист на блоки, цвет которых варьируется в зависимости от важности блока на данной странице. Часто такое действие помогает четко разделить важный контент от неважного и опустить неважный пониже, подняв повыше собственно важный.
Установить важность контента можно на сайте www.crazyegg.com, поставив на несколько дней скрипт слежения за кликами ваших пользователей. Впрочем, это скорее относится к сайтам, у которых уже был старый дизайн, и вы занимаетесь его переработкой. Если вы создаёте дизайн для нового сайта, лучше попросите совет у более опытных коллег или заказчика.
Довольно часто именно они обосновывают важность того или иного блока на сайте.
После деления на блоки нам потребуется свериться с общественным мнением: обычно право большинство, а не вы.
Не бойтесь спрашивать совета и у неопытных пользователей интернета, потому что зачастую именно они являются вашей целевой аудиторией. Хотя работа с веб-страницей имеет свою специфику, полезно провести небольшое исследование с потенциальным пользователем — дать ему расчерченный на блоки лист бумаги и проследить, куда ему хочется кликнуть, а куда он даже не смотрит.
В частности, благодаря CrazyEgg я уже неоднократно замечал, что новости на главной странице никого не интересуют, и лучше помещать их в специальный раздел.
Хотелось бы заметить, что на делении на блоки ваша миссия не заканчивается: эти блоки также необходимо правильно расположить в общей композиции дизайна и не в ущерб удобству.
Вот несколько правил, о которых неплохо бы помнить при составлении макета дизайна:
1. Не экономьте место. Поверьте — приятный глазу фон поможет хорошо разграничить блоки, при этом не раздражая пользователя. Обычному человеку нужно получить удобный инструмент для работы, а не искать элементы интерфейса в каше, потому что дизайнер решил сэкономить немного пикселей.
2. Используйте небольшие иконки. Не стоит зацикливаться только на тексте и блоках — пользователю будет не за что зацепиться при просмотре страницы. Да и своим последователям вы сильно упростите работу по редизайну (в будущем редизайн сайта будет наверняка, т.к. технологии развиваются, а дизайн устаревает). Чем же иконки помогают в редизайне? Объясню. Глаза пользователя не отличаются от глаз дизайнера. Дизайнер также выявляет принадлежность того или иного блока по его графическому исполнению, и небольшие пиктограммы помогают ему в этом. Приведу пример на рисунке ниже. Пиктограммы которые узнаваемы абсолютно без слов.
3. Используйте как можно меньше линий на сайте. Так уж устроен человеческий глаз — ему нужно довольно много пустого пространства вокруг важных элементов. Часто вокруг важных элементов дизайнеры плодят кучу второстепенных линий, финтифлюшек и прочего. Поверьте — никому это не нужно.
4. Старайтесь не использовать вложенные таблицы. Довольно часто можно встретить таблицы в таблицах, причем много раз я видел, что каждая таблица ещё и имеет видимые границы. Итог — каша в голове пользователя, неудовольствие заказчика, и как следствие, дизайнера.
5. Используйте вкладки. Вкладки — великая вещь. Другое дело, что часто дизайнеры не могут правильно их оформить. Активная вкладка должна отличаться от той, на которую наведён курсор и остальных.
Пример правильного использования вкладок показан на рисунке ниже:
Давайте рассмотрим рисунок выше.
1. Сразу видно активную вкладку: она
— того же цвета, что и блок с контентом
— приподнята над остальными
— имеет более прорисованный дизайн
— визуально больше неактивных вкладок
2. Также сразу видно неактивную вкладку: она
— отличается цветом от активной
— опущена пониже активной
— имеет более простой дизайн
— визуально меньше активной вкладки
Хотелось бы немного пояснить значение вкладок. Во вкладки, подгружающиеся без перезагрузки страницы, можно положить все второстепенные функции. Тем самым вы убиваете двух зайцев сразу — даёте пользователю возможность самому выбирать нужные ему функции и не перегружаете страницу ненужными пользователю на данный момент функциями.
4. Кнопки
а) Не плодите кнопки везде, где это возможно. Лучше, если это возможно, использовать обычные ссылки. Средний пользователь попросту путается в обилии кнопок.
б) Если использование кнопкок действительно важно (бывает и такое — идеология, знаете ли), лучше воспользоваться группировкой по функциям и расположить кнопки по всей странице в тех местах, где они наиболее важны. Это придаст пользователю немного уверенности в обращении с вашим интерфейсом.
в) Лучше не пользуйтесь нестандартным дизайном кнопок. Это путает пользователя, и он теряется при работе с ними. Воспользуйтесь стандартными браузерными кнопками — так вы не отпугнёте новичков, да и опытным пользователям с ними привычнее работать.
г) Если уже воспользовались нестандартными видом кнопок, не делайте не контрастные кнопки. Не располагайте белый шрифт на светлой кнопке или чёрный — на серой. Судя по большинству отзывов, это доставляет некоторые неудобства — в надписи на кнопках приходится вчитываться, а это — лишнее потраченное время. Как известно, скорость работы тоже сильно влияет на удовлетворённость пользователя интерфейсом.
д) Делайте кнопки так, чтобы они отображались даже у тех пользователей, у которых отключены картинки в браузере.
5. Флажки или опции?
Используйте флажки только в том случае, если нужно отметить несколько элементов, для последующих действий над всеми отмеченными сразу. В остальных случаях желательно использовать опции, потому что они характеризуют однозначный выбор, а его сделать всегда проще.
Хороший пример — проведение опроса: если несколько вариантов ответа могут быть выбраны одновременно, нужно использовать флажки. Если же нужно выбрать только один вариант, то используются опции.
6. Визуальная группировка
Методы визуальной группировки довольно хорошо описаны здесь, но и тут я постараюсь кратко и четко охарактеризовать положение вещей. Посмотрите на этот рисунок:
Заголовок текста на картинке слева отделён от текста, к которому относится. Это — неправильный подход. Это применимо и к формам: привязывайте наименования полей к ним самим для избежания неясностей. Посмотрите на рисунок ниже:
Кстати, часто подобная проблема проявляется и в других местах, например, при отображении результатов голосования:
Раз уж мы заговорили про голосования, стоит сказать, что рядом с графическим отображением следует писать проценты и количество проголосовавших в целом и попунктно.
Каждый вспомогательный элемент на странице должен быть расположен в непосредственной близости от главенствующего над ним элемента. Не стоит заставлять пользователя искать логику в вашем расположении.
7. Стили и отступы
Каждый человек, хоть раз бравший в руки книгу, знает, что в книге есть отступы на страницах.
Наверняка, многие догадались, к чему я это веду. Люди привыкли к печатным изданиям, и отказываться от отступов на вашем сайте не в коем случае нельзя.
Почему они так важны? Потому, что глазу пользователя нужно отдыхать во время чтения и просто просмотра сайта. Пустое белое пространство поможет им в этом. Не отказывайтесь от отступов.
Ниже показан пример интерфейса с правильными отступами и без них. Я думаю, что вы сами, догадаетесь какой из них правильный:
8. Словарь терминов
Пром. дизайн, он же промышленный дизайн — дизайн всего того, что нас окружает. Начиная от мышки, заканчивая мебелью, которая стоит рядом с вами. В данной отрасли дизайна занято сравнительно мало людей в отношении к ландшафтному, графическому или веб-дизайну — последние три профессии в последнее время крайне популярны. Тем не менее, промышленные дизайнеры являются своебразной элитой, которая определяет вид того, чем мы пользуемся ежедневно, будь то ручка, карандаш и т.д.
Принципиально дизайн — это структурные и функциональные связующие, которые превращают систему в последовательное, упорядоченное единство, рассматриваемое одинаково с двух сторон: со стороны разработчика и со стороны пользователя.
Палитра — подборка цветов, использующаяся при создании дизайна чего-либо. Подразумевается, что цвета должны быть приятны глазу, визуально взаимодействовать и дополнять друг друга.
Также палитра (в переносном смысле) — подбор цветов, типичных для некоторой картины, для произведений определенного художника или художественной школы.
Градации — изменение одного цвета на один шаг по графической палитре.
Эргономика — наука, которая изучает действия человека в процессе работы, скорость освоения им новой техники, затраты его энергии, производительность и интенсивность при конкретных видах деятельности. Используется во всех ветках дизайна для исследований удобства того или иного интерфейса, расположения элемента.
На этой ноте мы можем окончить статью.
Я надеюсь, что она вам понравилась, и я постараюсь написать продолжение.
Желаю удачи в создании хороших, удобных интерфейсов.
Если у вас возникли какие-то мысли по поводу моей статьи, прошу писать мне tuda.gde@lampochek.net (именно в таком написании).
Что такое пользовательский интерфейс
Анастасия Свеженцева Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Делюсь опытом в дизайне на офлайн- и онлайн-платформах с 2017 года: Институт программных систем, godesign.school, онлайн-платформа breezzly.ru и пишу микролекции о дизайне на Яндекс.Кью (226 ответов). Янв 18, 2023 · 10 мин читать
Кратко: Пользовательский интерфейс — это способ взаимодействия пользователя и программы. Давайте разбираться дальше зачем он нужен ���� «Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя». (с) Илья Бирман
- Что такое пользовательский интерфейс
- Зачем нужен интерфейс
- Виды пользовательского интерфейса
- Графический пользовательский интерфейс
- Элементы пользовательского интерфейса
- Модель пользовательского интерфейса
- Этапы разработки пользовательского интерфейса
- Требования к качественному интерфейсу
- Что еще почитать на тему интерфейсов
- Вывод и рекомендация
Что такое пользовательский интерфейс
Пользовательский интерфейс — это все, что помогает людям управлять устройствами и программами с помощью голоса, нажатий, жестов, через командную строку и даже силой мысли (такое теперь тоже есть). Самый популярный вид интерфейсов сейчас — UI приложений.
Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? ��
UI (англ. user interface) переводится как «пользовательский интерфейс». UI охватывает не только графический интерфейс, а еще и тактильный, голосовой или звуковой.
Зачем нужен интерфейс
Интерфейс помогает двум объектам понимать друг друга и обмениваться информацией.
Интерфейс — это «язык общения», который понимают оба объекта, которые взаимодействуют друг с другом с целью решить определенный вопрос. ��
Если каждое приложение или программа, установленная на компьютере, планшете или смартфоне, — это помощник, то интерфейс — это способ общаться (взаимодействовать) с ней, чтобы она помогала в вашем деле на работе и в жизни.
К примеру, у цифровых систем пользовательские интерфейсы бывают графические, голосовые, командной строки, жестовые — все это интерфейсы. Через пользовательский интерфейс мы получаем доступ к новым возможностям, которые дает приложение для обучения, работы, творчества, развлечений.
Также распространены программный, аппаратный, аппаратно-программный интерфейсы. Такие интерфейсы обеспечивают взаимодействие не только между человеком и машиной (устройством), но и между программами, оборудованием или компьютерами:
- аппаратный: соединяет друг с другом два объекта, например, помогает подключить смартфон к ноутбуку с помощью WiFi или кабеля;
- программный (API): создает связь между приложениями/программами, к примеру, подключение API одного приложения к другому. Самый популярный сценарий работы — авторизация через соцсети на сайтах;
- аппаратно-программный: комбинация технических элементов под управлением программного обеспечения.
Виды пользовательского интерфейса
Пользовательские интерфейсы бывают жестовые, тактильные, голосовые, графические, командной строки и даже нейронные.
Интерфейс командной строки и текстовый интерфейс (Command Line Interface или CLI)
Командная строка все еще очень популярна среди системных администраторов и программистов. Это один из первых методов взаимодействия с компьютером. Она обладает особым шармом — создает ощущение общения тет-а-тет с машиной без посредников. Командная строка — как бесконечный лист A4, на котором пользователь вводит текст команд и получает результаты работы в виде текста.
Графический пользовательский интерфейс (Graphical User Interface или GUI)
Самый популярный тип UI. Представляет собой окошко с различными элементами управления. Пользователи взаимодействуют с ними с помощью клавиатуры, мыши и голосовых команд: жмут на кнопки, тыкают мышкой, смахивают пальцем.
Жестовый, голосовой, тактильный, нейронный
«Любая достаточно развитая технология неотличима от магии», — как-то сказал английский писатель-фантаст и футуролог Артур Кларк.
Например, через Voice User Interface вы можете отдавать команды своему смартфону через голосовых помощников: Siri от Apple, Alexa от Amazon или Алиса от Яндекса.
NUI (жестовые, естественные) применяют в играх для приставок Xbox, Nintendo Wii или PlayStation. Эту же технологию вы найдете в оборудовании «умного дома», например, при включении света или регулировании громкости Яндекс.Станции с помощью изменения положения руки.
Производители качают технологии и расширяют возможности машин, и наслаждаться новыми фишками гаджетов можно даже посылая мысли напрямую в компьютер.
Графический пользовательский интерфейс
Этим термином чаще обозначаются UI мобильных и веб-приложений, а также игр и сервисов для развлечений.
Мобильные интерфейсы
Выделяется в отдельную группу SIMP (Screen, Icon, Menu, Pointer). Подход к дизайну мобильных интерфейсов отличается от подхода к дизайну настольных приложений. Поведение пользователей при взаимодействии со смартфонами отличается от работы на компьютере из-за размера экрана и отсутствия отдельной клавиатуры с мышью/тачпадом. Элементы здесь заполняют экран полностью, а блоки и системы зависят от требований операционной системы.
Дизайн мобильных приложений также зависит от поведенческих паттернов пользователей, например того, как они держат смартфон в руке, какие действия удобно совершать на ходу и т.д.
Веб-интерфейсы
Технологии позволяет создавать полноценные веб-приложения, по функциональности не уступающие настольному ПО: Trello, Google Docs, Twitch, Яндекс.Дзен.
Преимущество таких приложений в том, что их не нужно устанавливать на компьютер — все функции доступны в браузере. Создают такие приложения с помощью JavaScript, HTML и CSS.
Игровой и материальный
Связан с механикой геймплея. Именно в нем лучше всего раскрывается сопровождающая роль интерфейса, так как игрок лучше ощущает, что движется к какой-то цели (например, победить босса и пройти уровень). Интерфейс зависит от игры: кнопки, жесты, движения мыши или взаимодействие с сенсором на экране или 3D интерфейс в VR, нажатие клавиш на джойстике.
Модель пользовательского интерфейса: реальный мир и ментальная модель пользователя
Программные продукты призваны увеличивать наши возможности в реальном мире. Каждый продукт — как супергерой, его задача — помочь нам в чем-либо: суперпамять, общение сквозь любые расстояния, максимум развлечений и так далее. Ко всем этим свойствам мы получаем доступ через интерфейсы.
Каждое приложение мы распахиваем в определенном контексте. Контекст подразумевает определенные ожидания от того, как все должно работать. Ожидания основаны на прошлом опыте. При знакомстве с новым продуктом мы бессознательно переносим на него сформировавшиеся ожидания и привычки, которые выстроились в прошлом вокруг другого схожего продукта (или способа решения схожей задачи).
Ментальная модель — это схема в нашей памяти с логикой «объект → принцип взаимодействия → результат». При этом от всех похожих объектов мы ожидаем похожего поведения и результата.
«В основе ментальной модели лежат убеждения, а не факты. Это значит, что нужно принять то, что пользователи уже знают (или думают что знают) о том, как работает ваш продукт. И взять это в работу».
Nielsen Norman Group
У каждого интерфейса под капотом находится определенная модель системы, которая призвана помогать пользователю достигать определенных целей.
Например, модель покупки дорогих автомобилей для постоянных клиентов автосалона в мобильном приложении может включать 4 шага: наполнить корзину, оформить заказ, подтвердить заказ, внести оплату.
Модель и Интерфейс тесно взаимосвязаны. Чтобы понять разницу между Моделью и Интерфейсом, задайте вопрос: откуда вообще взялась корзина? Разве клиенты добавляют автомобили в тележку пачками, как в супермаркете? Или все-таки нужна модель не корзины/тележки из супермаркета, а тест-драйва в автосалоне?
Т.е. мы в приложении можем вместо корзины сразу при выборе автомобиля предлагать записаться на тест-драйв или начать оформление покупки (в том числе в кредит). А теперь задайте вопрос: как часто покупатели дорогого автомобиля готовы менять авто и вписывается ли мобильное приложение в их жизненный контекст?
Выходит, что за любым объектом в реальном мире стоит модель, которая находится в нашем сознании — это наши представления о том, как эта штуковина перед нами должна работать. И эти представления возникают еще до того, как мы дотронулись до нее.
Элементы пользовательского интерфейса, синтаксис и другие особенности
Элементы интерфейса в GUI реализованы на основе метафор. Метафоры должны быть уже знакомы пользователям или вписываться в их культурный контекст (тогда их можно им обучить).
Метафоры в интерфейсах на базе ментальных моделей
Все элементы интерфейса вместе складываются в единую дизайн-концепцию (метафору). Например, Trello (система для управления задачами) визуально выглядит как доска для управления проектами по SCRUM (метафорично), на ней также можно таскать стикеры из одной колонки в другую. Trello изначально и придумали программисты, которым очень близка концепция SCRUM.
Популярные элементы интерфейса:
Кнопка, Ссылка, Иконка, Вкладка, Чекбокс, Радиокнопка, Переключатель, Выпадающий список, Ползунок, Поле ввода, Таблицы, Меню.
Интерфейсы конструируют по принципам атомарного дизайна
Атомарный дизайн — это подход к разделению системы любой сложности на части, маленькие элементы — атомы. Атомы можно использовать повторно и комбинировать друг с другом.
Атомы. Мельчайшие частицы, из которых состоит интерфейс: кнопки, поля ввода, чекбоксы, радиокнопки, стили для типографики.
Молекулы (группы атомов). Если взять два атома и соединить друг с другом — получится молекула. Например, кнопка и поле ввода.
Организмы. Если объединить несколько молекул, получится организм — крупная часть интерфейса. Например, сквозная навигация в шапке или боковой панели сайта.
Шаблоны. Если объединить организмы друг с другом и создать шаблон — получится интерфейс, предназначенный для решения типовых задач.
Этапы разработки пользовательского интерфейса — как проработать UI
В международной практике подход к дизайну интерфейсов уже стал стандартом. Процесс по дизайну интерфейсов включает следующие ключевые этапы. В этом блоке я опираюсь на материалы UX Mastery — партнера Interaction Design Foundation, крупнейшего в мире сообщества обучения UX-дизайну.
- Стратегия (Бренд-стратегия и UX-стратегия) — определяет полезное действие, ценности бренда и видение будущего. Стратегия естественным образом влияет на цели проекта по дизайну интерфейсов, критерии достижения целей и приоритет проекта в общем ландшафте высот организации.
- Исследование (UX-исследование) — фаза открытий. Комплексные проекты включают в себя масштабную работу по пользовательским исследованиям (UX-исследованиям) и анализу конкурентов (бенчмаркинг). Небольшие организации или стартапы могут подойти к исследовательской работе в упрощенном формате и обосновать идею, построенную по принципам минимальной жизнеспособности (Minimum Viable) через интервью, опросы и юзабилити тестирования. Именно на фазе исследований, согласно принципам дизайн-мышления, происходит погружение в образ жизни, пристрастия, цели и барьеры пользователей. Понимание контекста пользователей помогает создавать социально значимые продукты, которые с высокой вероятностью приживутся и начнут развитие на рынке: так они будут казаться интуитивными (ментальные модели) и родными (метафоры).
- Анализ (UX-аналитика) — цель анализа в том, чтобы сделать выводы из данных и дать уверенный старт созданию дизайн-концепций. Выводы призваны помочь понять суть происходящего и приступить к проектированию интерфейса.
- Проектирование и прототипирование интерфейсов — на этапе проектирования происходит создание прототипов интерфейсов, их тестирование пользователями и корректировка на основе обратной связи. На этой фазе чаще применяются прототипы с низкой детализацией (Low-fi prototyping), так в них пользователи фокусируются только на функциях и не отвлекаются на бренд-дизайн (уникальную графическую идентичность) и другие визуальные детали.
- Дизайн интерфейсов и Разработка — на этом этапе создается проработанный дизайн, пишется детальный контент, создается вся уникальная графика и начинается совместная работа с программистами.
Правила и принципы разработки хорошего интерфейса
Базовые принципы можно проследить сквозь 24 года исследований в сфере интерфейсов: c 1987 до 2009 года. Эти принципы работают и сейчас.
Рекомендации по проектированию интерфейсов. Шнайдерман (1987 год) и Плейзент (2009 год):
- Стремитесь к единообразию — элементы дизайна должны легко узнаваться, даже если пользователь встретил ваше приложение впервые. Создавайте пользовательские интерфейсы приложений интуитивно понятными. Например, не красьте кнопку запуска в красный, если на большинстве сайтов она зеленая.
- Обеспечьте одинаковое удобство в использовании — к примеру, в приложении и на сайте элементы пользовательского интерфейса — меню и списки — должны срабатывать одинаково на каждой странице.
- Предусмотрите информативную обратную связь — интуитивный интерфейс реагирует на действия пользователя моментально. Приложение должно наглядно показывать на экране актуальный статус: ожидается ли оплата, взял ли менеджер заявку в работу, доставлено ли сообщение.
- Прорабатывайте замкнутые потоки решения задач — пользователи должны четко понимать, когда они запустили некий процесс и когда они его завершили. Этот принцип хорош в сочетании с наглядными статусами.
- Предотвращайте ошибки — идеальный интерфейс состоит из туннелей, по которым пользователи могут моментально долетать до цели. Стремитесь к точке, когда пользователи даже не смогут ошибиться на пути к цели. Даже простые шаги и статусы порой могут очень сильно помочь.
- Обеспечивайте возможность легкой отмены действия — каким бы продуманным ни был интерфейс, все пользователи — люди, они переживают и ошибаются по разным причинам. Приготовьте сообщения с заботой на случай, если вдруг что-то пошло не по плану. Или просто дайте возможность гарантированной отмены действия. Такой подход поможет уберечь внимание, деньги, время и лояльность клиентов.
- Пусть пользователи чувствуют, что контроль в их руках: интуитивный пользовательский интерфейс — как ложка. Всегда знаешь, чего ждать. Пользователи понимают, что интерфейс — это машина и поэтому ожидают полной управляемости.
- Минимизируйте нагрузку на кратковременную память — создайте ощущение «все под рукой». Тогда пользователи не будут чувствовать, что они что-то потеряли, и у них не будет повода беспокоиться, что ценную информацию или результаты работы нужно обязательно куда-то сохранить или запомнить.
Что еще почитать на тему интерфейсов
В книге увлекательное и глубокое погружение в мир международных подходов к продуктовому (UX/UI) дизайну. Здесь подробно описаны принципы и подходы к проектированию взаимодействия, а еще дан точный инструктаж, как провести качественные и количественные исследования, чтобы выделиться среди конкурентов и сделать ценный для пользователя продукт. Вам также может пригодиться Обзор книги: основы проектирования интерфейсов →
Вывод и рекомендация
Попробовать себя в роли дизайнера интерфейсов на практике под руководством наставника вы можете на платформе Breezzly. Здесь вас встретят дизайн-проекты во всех популярных инструментах (Figma, Principle, ProtoPie) и на всех видах популярных у клиентов проектов. А полную траекторию обучения UI-дизайну вы можете найти, если загляните в обзор 5 лучших UI курсов →
Какая группа элементов UI относится к ссылке?
В веб-дизайне существует множество элементов, которые помогают пользователям взаимодействовать с веб-сайтом или приложением. Одним из таких элементов является ссылка. Ссылка представляет собой текст или изображение, на которые можно нажать для перехода на другую страницу или раздел веб-сайта.
Ссылки могут быть размещены в разных частях страницы. Они могут быть использованы для перехода на внутренние или внешние страницы. Однако, при рассмотрении элемента ссылки, необходимо понять, к какой группе элементов пользовательского интерфейса (UI) он относится. Знание принадлежности элемента к определенной группе позволяет разработчикам создавать эффективный и интуитивно понятный интерфейс.
Ссылки можно отнести к группе навигации или гипертекста. Навигационные ссылки используются для перемещения пользователя по веб-сайту или приложению. Они обычно располагаются в основном меню или боковой панели, с помощью которых пользователь может перейти на другие разделы или страницы. Гипертекстовые ссылки, с другой стороны, размещаются внутри контента и позволяют пользователю получить дополнительную информацию или перейти к другим связанным ресурсам.
Группы элементов UI и их классификация
Веб-интерфейсы на сегодняшний день стали неотъемлемой частью нашей жизни. Они позволяют нам взаимодействовать с информацией и выполнять различные действия. Группы элементов UI – это наборы связанных элементов интерфейса, которые выполняют определенную функциональность. В этой статье мы рассмотрим классификацию групп элементов UI и описываем их основные характеристики.
1. Формы
Формы – это группа элементов, которая позволяет пользователям вводить и отправлять информацию на сервер. Они включают в себя различные элементы, такие как текстовые поля, выпадающие списки, флажки, радио-кнопки и кнопки отправки.
2. Меню
Меню – это группа элементов, служащих для навигации по веб-сайту или приложению. Они обычно представляются в виде списка или дерева. Меню могут содержать ссылки, выпадающие подменю, иконки и другие элементы интерфейса.
3. Списки
Списки – это группа элементов, которая используется для представления упорядоченной или неупорядоченной информации. Они могут содержать ссылки, изображения, текстовые блоки и другие элементы. Списки могут быть вертикальными или горизонтальными, одно- или многоуровневыми.
4. Таблицы
Таблицы – это группа элементов, используемых для организации и представления табличной информации. Они содержат ячейки, строки и столбцы, а также различные элементы форматирования, такие как заголовки, подзаголовки и разделители.
Важно отметить, что каждая группа элементов UI имеет свои особенности и рекомендации по использованию. При проектировании интерфейсов необходимо учитывать потребности и ожидания пользователей, а также обеспечивать удобство использования и доступность.
Какую классификацию можно применить к ссылке?
Ссылка — это элемент пользовательского интерфейса, который позволяет перейти на другую веб-страницу или изображение при клике на него. Ссылки являются основным средством навигации по веб-сайтам и считаются одной из самых важных функций веб-браузеров.
Классификация ссылок может осуществляться по разным критериям:
- По назначению:
- Внутренние ссылки — переходы на другие страницы в рамках одного веб-сайта;
- Внешние ссылки — переходы на страницы других веб-сайтов;
- Якорные ссылки — переходы к конкретным разделам или элементам на одной странице.
- По протоколу:
- HTTP ссылки — ссылки, начинающиеся с протокола HTTP и используемые для доступа к веб-страницам;
- HTTPS ссылки — ссылки, начинающиеся с протокола HTTPS и обеспечивающие безопасное соединение с веб-сайтами;
- FTP ссылки — ссылки, начинающиеся с протокола FTP и предназначенные для передачи файлов.
- По внешнему виду:
- Текстовые ссылки — ссылки, отображаемые в виде текста;
- Изображения-ссылки — ссылки, представленные в виде изображений, на которые можно нажимать.
- По способу открытия:
- Ссылки, открывающиеся в текущем окне — переходы на другие страницы происходят в текущем окне или вкладке браузера;
- Ссылки, открывающиеся в новом окне — переходы на другие страницы происходят в новом окне или вкладке браузера;
- Ссылки, открывающиеся во фрейме — переходы на другие страницы происходят внутри определенного фрейма веб-страницы.
Благодаря классификации ссылок можно легче понять их функциональность и использовать соответствующие техники и стили для настройки их отображения и поведения на веб-сайтах.
Основные знания о ссылках в UI
Ссылка — это элемент пользовательского интерфейса (UI), представляющий собой текст, изображение или другой объект, который можно нажать или щелкнуть, чтобы перейти на другую страницу или открыть смежное содержимое. Веб-ссылки являются одной из наиболее распространенных и важных компонентов интерфейса веб-страниц.
Основные характеристики ссылок:
- Текст или изображение: Ссылка может содержать текст или изображение, которые пользователь видит и на которые может нажать.
- URL-адрес: При нажатии на ссылку происходит переход на указанный URL-адрес, который определяет местоположение целевого контента.
- Целевой контент: Целевым контентом может быть другая веб-страница, файл, изображение или другой объект, на который происходит переход по ссылке.
- Внешние и внутренние ссылки: Ссылка может вести либо на другую страницу внутри текущего веб-сайта (внутренняя ссылка), либо на другой веб-сайт или ресурс (внешняя ссылка).
- Оформление и образец: Ссылка может иметь свой стиль и внешний вид, чтобы выделиться среди других элементов на странице. Обычно ссылки подчеркиваются и меняют цвет при наведении курсора.
Примеры использования ссылок:
- Навигация: Ссылки используются для перехода между различными страницами веб-сайта или между разными разделами одной веб-страницы.
- Гипертекстовая связь: Веб-страницы часто содержат ссылки, которые связаны с внешними источниками или дополняющими материалами, чтобы предоставить дополнительную информацию или контекст.
- Маркетинг и реклама: Ссылки могут использоваться для привлечения внимания пользователей и помочь им перейти на целевые веб-страницы для покупки товара или получения дополнительной информации.
- Другие функции: Некоторые ссылки могут служить для запуска определенных действий, как скачивание файла или отправка электронной почты.
В целом, ссылки являются неотъемлемым элементом пользовательского интерфейса, используемым веб-разработчиками для создания межсайтовой и внутрисайтовой навигации, обеспечения взаимодействия с внешними ресурсами и предоставления дополнительной информации пользователю.
Ссылка как элемент навигации в веб-дизайне
Ссылка является одним из наиболее распространенных элементов веб-дизайна. Она позволяет пользователю переходить с одной веб-страницы на другую, создавая навигацию внутри сайта или между разными сайтами.
Ссылка представляет собой кликабельный текст или изображение, на которые пользователь может нажать, чтобы перейти по указанному адресу. Основной целью ссылки является предоставление пользователю доступа к контенту, страницам или документам веб-сайта.
Внешний вид ссылки в веб-дизайне часто отличается от обычного текста и может быть оформлен различными способами:
- Цвет ссылки может быть отличным от остального текста, чтобы привлечь внимание пользователя.
- Подчеркивание или изменение стиля шрифта (например, курсив или жирный шрифт) может использоваться для выделения ссылки.
- При наведении курсора на ссылку может появляться анимация или эффект, чтобы указать пользователю, что ссылка является кликабельной.
Ссылки могут быть разделены на две основные категории: внутренние и внешние ссылки.
Внутренние ссылки используются для перехода на другие страницы веб-сайта. Они часто используются в навигационных меню и сайдбарах, чтобы пользователи могли быстро перемещаться по разделам сайта.
Внешние ссылки используются для перехода на страницы или ресурсы, расположенные на других веб-сайтах. Они могут быть использованы для ссылки на полезные статьи, блоги, новости или взаимодействия с другими сервисами и приложениями.
Ссылки также могут играть важную роль в SEO (оптимизации поисковых систем), поскольку поисковые движки, такие как Google, учитывают ссылки при определении рейтинга и релевантности веб-сайта.
Примеры использования ссылок в веб-дизайне:
- Меню навигации: ссылки на разделы сайта, такие как «Главная», «О нас», «Услуги», «Контакты».
- Ссылки-кнопки: кнопки с текстом или изображением, которые выполняют определенные действия или переходят на другие страницы.
- Ссылки в тексте: ссылки, которые встроены в обычный текст статьи или страницы. Они часто используются для цитирования источников или ссылок на дополнительную информацию.
Ссылки могут быть мощным инструментом веб-дизайна, помогая пользователю перемещаться по сайту и исследовать различные ресурсы. Правильное использование ссылок может улучшить удобство использования сайта и увеличить его популярность среди пользователей.
Ссылка в группе элементов «Нижняя навигация»
Группа элементов «Нижняя навигация» представляет собой набор ссылок, расположенных внизу веб-страницы. Эти ссылки обычно используются для быстрого доступа к различным разделам сайта или для навигации по основным разделам.
Ссылка в группе элементов «Нижняя навигация» является одним из элементов, и она служит для перехода на другую страницу или для выполнения определенного действия. Она может быть представлена в виде текста, изображения или комбинации текста и изображения.
Пример использования ссылки в группе элементов «Нижняя навигация» может выглядеть следующим образом:
В данном примере ссылки представлены в виде неупорядоченного списка (
-
) и являются текстовыми. Каждая ссылка имеет свой атрибут href, который указывает на адрес целевой страницы. При нажатии на ссылку пользователь будет перенаправлен на соответствующую страницу.
Расположение ссылки в группе элементов «Нижняя навигация» позволяет пользователю быстро и удобно перемещаться по различным разделам сайта, что повышает удобство использования и улучшает навигацию.
Вопрос-ответ
Какие группы элементов пользовательского интерфейса существуют?
Существуют различные группы элементов пользовательского интерфейса, такие как: кнопки, текстовые поля, выпадающие списки, радио- и чекбоксы, изображения, диаграммы и графики и т.д.
Какую из групп элементов можно отнести ссылку?
Ссылка может быть отнесена к группе элементов «гиперссылки» или «ссылки».
Какие особенности у группы элементов «гиперссылки»?
Особенности группы элементов «гиперссылки» включают в себя то, что они представляют собой текст или изображение, по которому пользователь может щелкнуть, чтобы перейти по указанному URL или выполнить определенное действие.
Какую функцию выполняет ссылка в пользовательском интерфейсе?
Ссылка в пользовательском интерфейсе выполняет функцию перехода пользователя на другую страницу, открытия нового документа или выполнения определенного действия.
Какие примеры группы элементов «ссылки» можно привести?
Примеры элементов «ссылки» включают в себя гиперссылки в текстовых документах, ссылки на веб-сайтах или веб-приложениях, кнопки «подробнее» или «узнать больше», которые ведут на дополнительную информацию, и т.д.