Графический интерфейс пользователя: что делает пользовательский интерфейс хорошим?

Веб-дизайнеры и разработчики программного обеспечения рано или поздно натыкаются на термин «пользовательский интерфейс». Связанные с ним сокращения, такие как UI, TUI (текстовый пользовательский интерфейс) или GUI (графический пользовательский интерфейс), могут сбить с толку. Последний особенно важен для хорошего пользовательского опыта — будь то на сайте или при работе с программным обеспечением. Но что именно представляет собой пользовательский интерфейс? И почему графический интерфейс пользователя так важен для успеха веб-сайта? Наше руководство предоставит вам основную информацию о хорошем дизайне пользовательского интерфейса и ответит на вопрос, что на самом деле означает пользовательский интерфейс.

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

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

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

Вначале пользовательский интерфейс был пустынным и пустым. На темном экране — например, на первом компьютере MS-DOC — присутствовала только одна командная строка и подсказка для отображения текущей позиции, или командная строка. После ввода команды для связи с компьютером использовался интерфейс командной строки. После обработки запроса результат выводился на экран — разумеется, тоже в текстовом виде. Сейчас эта форма пользовательского интерфейса считается устаревшей, но до сих пор используется с помощью cmd.exe в операционных системах Windows, где синтаксис во многом ориентирован на предка DOS. Управление через CLI осуществляется исключительно с помощью клавиатуры; мышь не используется.

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

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

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

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

Несмотря на то, что графические пользовательские интерфейсы встречаются практически повсеместно, развитие пользовательского интерфейса с графическими пользовательскими интерфейсами продолжается: когда речь идет о голосовом пользовательском интерфейсе, вы также можете взаимодействовать с машинами с помощью голосовых команд. Каждая современная операционная система сегодня предлагает пользовательский интерфейс в том или ином виде: У Apple есть Siri, у Microsoft есть Cortana, а у Google есть своя форма поиска с голосовым вводом. Поскольку приложения открываются с помощью голосовых команд, а произнесенный текст автоматически кодируется, это означает, что пользователи могут работать более эффективно. Еще одно преимущество: голосовые команды обеспечивают большую доступность.

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

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

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

Помимо этих распространенных пользовательских интерфейсов, есть и такие, которые еще не вышли на массовый рынок: например, осязаемый пользовательский интерфейс, который также сокращенно называют TUI, перцептивный пользовательский интерфейс (PUI) или интерфейс мозг-компьютер (BCI).

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

• Развитие перцептивного пользовательского интерфейса (PUI) все еще находится в зачаточном состоянии, но становится все более и более развитым. Это пользовательский интерфейс, основанный на восприятии — соединение VUI, GUI и электронного распознавания жестов.

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

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

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

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

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

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

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

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

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

Путь на сайте отображается в дополнение к строке меню. В интернет-магазине одежды он может выглядеть примерно так: home — women’s fashion — pants — jeans. Навигация в виде хлебных крошек обычно располагается по центру над контентом — точно так же, как в нашем цифровом путеводителе. Дополнительную информацию о внутренней перелинковке с точки зрения SEO и хорошей структуре сайта можно найти в нашей статье Digital Guide об основах SEO.

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

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

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

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

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

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

Инструкции по эксплуатации обычно скучны, сложны и не очень полезны. Графический пользовательский интерфейс Dropbox, получивший в 2015 году награду Webby Award в номинации «Лучший пользовательский интерфейс» (народный голос), показывает, как это должно быть сделано. На домашней странице видно, почему руководство было так хорошо принято публикой: инструкции по эксплуатации понятны и информативны.

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