Как лучше составить интерфейс

Проектирование графического интерфейса пользователя

Введение

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

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

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

Общие принципы

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

  

• Возвращайте пользователя в то место, где он закончил работу в прошлый раз. Зачем нажимать все заново?
• Чаще всего, пользователи в интерфейсе сначала ищут сущность(существительное), а затем действие(глагол) к ней. Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить.

  

• Чем быстрее человек увидит результат — тем лучше. Пример — «живой» поиск, когда варианты, в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.
• Используйте квазирежимы. Например, ввод заглавных букв с зажатой клавишей shift — это квазирежим. С включенным capslock — режим. Основное отличие в том, что человек может забыть в каком режиме он находится, а в квазирежиме(с зажатой доп. клавишей) это сделать гораздо сложнее.

  

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

  

Какие ЭИ создать?

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

  

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

Какой должен быть дизайн ЭИ?

На самом деле, дизайн ЭИ — тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:

• Цвет. Цвета делятся на теплые(желтый, оранжевый, красный), холодные(синий, зеленый), нейтральные(серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.

  

• Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Полностью прямоугольные ЭИ, лично мне нравятся меньше. Возможно из-за своей «остроты». Опять же, форма как и цвет достаточно субъективна.
• Основные ЭИ(часто используемые) должны быть выделены. Например размером или цветом.
• Иконки в программе должны быть очевидными. Если нет — подписывайте. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.
• Старайтесь не делать слишком маленькие элементы — по ним очень трудно попасть.

Как правильно расположить ЭИ на экране?

• Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения. Суть в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина сайта 900px, делим 900 на 1.62, получаем ~555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части:

  

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

Как ЭИ должны себя вести?

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

  

• Если вы даете пользователю информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает. Иначе он может просто забыть.
• Избегайте двусмысленности. Например, на фонарике есть одна кнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэтому, вместо одной кнопки выключателя, лучше использовать переключатель(например, checkbox с двумя позициями: «вкл.» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.

  

  Такой переключатель напрямую отражает состояние ЭИ

• Делайте монотонные интерфейсы. Монотонный интерфейс — это интерфейс, в котором какое-то действие, можно сделать только одним способом. Такой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.
• Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.
• Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).
• ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.

В заключении

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

Литература

Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем»
Алан Купер, «Об интерфейсе. Основы проектирования взаимодействия»
Алан Купер, «Психбольница в руках пациентов»

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

GUI в переводе — это графический интерфейс пользователя. Все эти кнопки, иконки, окна, значки, вкладки, которые вы видите на своем компьютере и телефоне…

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

Что такое графический пользовательский интерфейс (GUI)

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

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

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

Как создаются GUI

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

А вот на десктопе вы можете без труда взаимодействовать даже с мелкими иконками и другими элементами GUI — при помощи мыши.

В чем отличия от UI

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

Таким образом, GUI — это подвид UI.

Элементы GUI: какие бывают

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

Окно

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

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

Меню

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

Иконки

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

Элементы управления: виджеты

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

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

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

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

Вкладка

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

Также к элементам GUI можно отнести: формы, поля ввода (текстовые поля, холсты), кнопки (CTA, значки, плавающие кнопки) и так далее.

Как работает GUI: пример

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

Одиночный клик указывает системе выделить значок, а двойной — открыть папку или приложение, представленное значком. Но графический пользовательский интерфейс — это не только красивая картинка: “под капотом” GUI интерпретирует и выполняет команду, представленную конкретным действием.

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

Преимущества и недостатки графического интерфейса

Вот главные плюсы GUI для пользователя:

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

Теперь плюсы GUI для разработчика:

• Можно задать любую функциональность.
• Быстрее, чем интерфейс командной строки (визуальные элементы, а не запоминание команд).

Но есть у GUI и минусы. Для разработчика:

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

Для пользователя минусов три:

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

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

Существует множество различных типов и версий графических интерфейсов. Собственные системные GUI вы встретите на разных операционных системах:

• MacOS
• Windows 10
• Android
• iOS
• Chrome OS

На каких языках программирования строится GUI

Какие языки, технологии и другие инструменты понадобятся для создания GUI? Самые разные! И все зависит от задачи, например, для высокопроизводительного программирования GUI в играх, лучший вариант — C и C++, но для создания интерфейса на этой парочке — потребуется много усилий, опыта и времени.

Разработка для Web

Это все что касается веб-приложений. Без пользовательского интерфейса — сложно представить любой сайт.

Для создания GUI в вебе активно используются три технологии:

• HTML (структура страниц).
• Основы CSS (внешний вид).
• Основы JavaScript (в вебе при помощи этого языка программируется функциональность элементов страницы).

Важно изучить ООП-подход. Используется он не только в JavaScript. Но конкретно, при создании GUI, объектно-ориентированное программирование пригодится при работе с localStorage и методами JSON, например.

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

• jQuery и JQuery-ui.
• Vue.
• React.
• Angular.

Java

Объектно-ориентированный язык на основе классов. Java в большей степени ориентирован на кросс-платформенный подход, поэтому GUI-пакеты доступны (в основном) на устройствах с поддержкой Java.

Java также имеет графическую библиотеку, которая поддерживает как двухмерную так и трехмерную графику.

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

Но, используя IDE (интегрированная среда разработки — комплекс инструментов для создания ПО), даже на Java вы можете легко разработать отзывчивый и красивый GUI, а также сэкономить немало времени.

C или C++

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

Python

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

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

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

• Программирование GUI с помощью Python — не самый универсальный вариант. Да, Python — хороший язык для бэкэнда (который будет управляться фронтом).
• Python даже может генерировать HTML и JavaScript с помощью шаблонов и библиотек.
• Вы даже можете программировать в браузере на Python с помощью Brython или Sculpt, например. Но то же самое можно сказать и о десятке других языков программирования

Далее — рассмотрим фреймворки Python именно для создания GUI.

PyQt

Кроссплатформенный фреймворк, полностью написан на C++, имеет множество инструментов для разработки API. Существует также его некоммерческая версия PySide и инструмент PyGUI. Все это позволяет создавать отзывчивые и красивые графические интерфейсы.

Tkinter

Это инструмент, который может выводить и запускать скрипты Python в формате графического интерфейса. Он совместим с большинством Unix-платформ, таких как macOS и Windows.

Py-Series ++

Вообще существует множество GUI-фреймворков, которые начинаются с «Py», поэтому их коротко называют Py-Series. Pyforms — один из них. Этот фреймворк позволяет повторно использовать ранее написанный код, без всяких ограничений.

Dabo и CEF Python

Первый предназначен для WxPython, а второй — для Windows, Linux-систем и Mac OS. Эти фреймворки лучше всего подходят именно для кросс-платформенных приложений.

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

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

• Если для вас главное графика и дизайн, то хорошим вариантом будет Java.
• Если в приоритете скорость, то C или C++.
• Java лучше всего подходит для веб-приложений.
• Python больше всего подойдет для мобильных или настольных приложений.

Итог

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

Артем Алейник, руководитель отдела UX/UI TexTerra:

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

Нужно ли уметь программировать для создания графического интерфейса пользователя

Не обязательно, но такой опыт может быть полезным.

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

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

Андрей, фулстек из Москвы, стаж C++ более 10 лет:

«C++ совсем не плохой выбор для создания графических интерфейсов. Я создаю все виды графических интерфейсов на C++ с помощью Qt, уже много лет. Я не задействую Qt Designer или QML, а просто реализую код GUI на C++ (с помощью Qt Widgets). Некоторые современные графические интерфейсы действительно причудливые, с детальной графикой, разработанной профессиональными дизайнерами. Такие приходится разворачивать на C++, по дизайнерским эскизам, вместе с чужими шрифтами и изображениями. А еще у меня был кейс, когда GUI был реализован на HTML5 / Angular, а затем я переделывал его на C++ и Qt (руководство было недовольно первой версией). В итоге: моя версия потребовала меньше усилий на разработку и легче адаптировалась к запросам клиентов. Я также делал GUI на Java, Python и некоторых других языках и фреймворках, но никогда не имел такой же эффективности и свободы, как на С++. Так что, с моей точки зрения, разработка графических интерфейсов с помощью C++ и Qt — лучшее комбо».

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

Кирилл, дизайнер, разработчик на C, C++, Java, Python:

Это не слишком сложно для опытного кодера. Но, если вы новичок, — все гораздо хуже. Программирование GUI заставляет вас работать задом наперед: оно выворачивает вашу программу наизнанку. И вместо того, чтобы вы отдавали команды ОС, теперь сама ОС посылает вам события, на которые вы должны реагировать.

Если вы хотите заниматься UI, вам также придется освоить многопоточность и научиться писать многопоточные программы. Существует правило: «обновлять пользовательский интерфейс только из потока пользовательского интерфейса». Так что — вам придется придумать способы передачи данных между потоком GUI и рабочими потоками.

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

Что нужно для создания GUI

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

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

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

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

1. Вам нужно понять, как мыслят люди и затем отобразить этот процесс в GUI. Это самая распространенная причина неудач: программисты не понимают пользователей.
2. Вы должны учитывать все варианты поведения программы. Например, сохранение файла может закончиться неудачей по многим причинам (может выйти из строя сеть, программа зависнет или пользователь забудет заполнить какое-то поле). С помощью хорошего дизайна можно подсказать пользователю, что делать дальше, чтобы решить нестандартную проблему. Все это обязательно учитывается в хорошем дизайне.
3. Визуальная часть и дизайн GUI должны определяться всем процессом использования продукта, для которого создается GUI, а не только цветовыми предпочтениями дизайнера.

Существуют и другие трудности. Например, сложности процесса разработки:

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

Или трудности в бизнес-процессах:

• При ограниченных ресурсах вам, возможно, придется идти на компромиссы.

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

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

Топ-10 советов для создания отзывчивого и удобного GUI

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

Совет 1: Перегруженность лишними элементами

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

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

Совет 2: Сделайте пользовательский интерфейс понятным

Интерфейс должен предоставлять понятные, возможно даже привычные для целевой аудитории продукта инструменты. Например, менеджеры сидят в Trello, в нем они могут следить за текущим этапом задачи, контролировать дедлайны, смотреть важные напоминания:

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

Совет 3: Подумайте о стилистике

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

Совет 4: Заимствование удачных решений

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

Используйте понятные аналогии и метафоры, не изобретайте велосипед и сделайте стиль единым. На каждом этапе процесса проектирования различные методы UX должны удерживать усилия по разработке продукта на верном пути (и обязательно в согласии с истинными, а не воображаемыми потребностями пользователей).

Совет 5: Проводите A/B-тестирование

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

Совет 6: Сокращайте текст

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

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

Для контентной части: можно добавлять врезки (там где они уместны).

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

Совет 7: Позаботьтесь о пользователях с ограниченными возможностями

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

Совет 8: Проверьте размещение кнопок

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

Чтобы повысить эффективность страниц, размещайте кнопки попеременно с информационными и блоками-изображениями.

Совет 9: Дайте пользователям возможность отменить свои действия

Иногда мы непроизвольно нажимаем на ненужную кнопку и попадаем на страницы, которые нам не нужны.

Сделайте действия обратимыми — это поможет пользователю быстрее освоить приложение. Кстати, это третья «Эвристика» Нормана*.

Обязательно изучите 10 принципов интерактивного дизайна Нормана:

1. Видимость состояния системы.
2. Совпадение между системой и реальным миром.
3. Контроль и свобода пользователя.
4. Согласованность и стандарты.
5. Предотвратимость ошибок.
6. Распознавание, а не вспоминание.
7. Гибкость и эффективность использования.
8. Эстетичный и минималистичный дизайн.
9. Помощь пользователям в устранении ошибок.
10. Помощь и документация.

*Якоб Нильсен определил 10 эвристик юзабилити — общих принципов юзабилити, которые создают лучший пользовательский опыт. Считайте их правилами при разработке GUI, следовать которым — обязательно.

Совет 10: Снижайте нагрузку на память

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

Чем больше приходится запоминать — тем меньше уверенности в правильности выполняемых действий и тем хуже пользователю удается сконцентрироваться

Не заставляйте пользователя запоминать много информации для выполнения простой задачи.

Резюме

Чтобы создать хороший GUI, лучше всего следовать такому алгоритму:

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

Читайте также:

Разработка дизайна интерфейса терминалов

Разработка интерфейса для динамичного 3D-шутера

Роль акцентов в дизайне интерфейса: 12 способов выделить главное

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

Что такое интерфейс

«Интерфейс» в переводе с английского состоит из слов interaction ― взаимодействие ― и face ― лицо. 

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

Почему интерфейс важен в любом
бизнес-процессе

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

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

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

Основные виды интерфейсов для бизнес-приложений

Чаще всего выделяют два базовых вида интерфейса для бизнес-приложений, каждый из которых имеет свои
особенности и применение:

Мобильные интерфейсы

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

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

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

Пример мобильного интерфейса.

Веб-интерфейсы

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

Пример веб-интерфейса.

Инструменты для создания качественного интерфейса

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

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

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

• Adobe XD: это инструмент для создания интерфейсов, который позволяет создавать прототипы, анимации и элементы
  интерфейса. Adobe XD также позволяет работать с другими продуктами Adobe,
  такими как Photoshop и Illustrator, что делает процесс дизайна более удобным.

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

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

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

Этапы создания интерфейса

Создание интерфейса для
бизнес-приложения — это процесс, состоящий из нескольких этапов. Рассмотрим
каждый:

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

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

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

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

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

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

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

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

Рекомендации для создания
привлекательного интерфейса бизнес-приложения

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

• Держите
  дизайн чистым и простым.

• Используйте
  привлекательные и нейтральные цвета и шрифты.

• Создавайте
  качественные изображения и иконки.

• Размещайте
  элементы так, чтобы пользователи могли легко находить нужные функции.

• Старайтесь
  создавать дизайн, который соответствует брендингу вашей компании.

Совет от эксперта:

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

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

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

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

Разбираться помогал СЕО Vitamin Tools и создатель LPgenerator Денис Кабалкин. Обо всём этом в нашей статье. В статье 8 правил, как создать удобный сайт, и антипример, как делать не стоит.

Нет времени читать статью? Найдите ее в нашем телеграм-канале и сохраните себе в «Избранном» на будущее.

Содержание статьи

Что такое интерфейс?

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

8 правил удобного интерфейса

1. Объясняет пользователю, что делает система
2. Говорит на понятном для пользователя языке
3. Позволяет ошибаться и исправлять ошибки
4. Соответствует ожиданиям пользователей
5. Хранит информацию за пользователя
6. Проявляет гибкость
7. Простой дизайн
8. Предотвращает ошибки и направляет пользователей

Как понять, удобный ли у вас интерфейс?

Учимся на чужих ошибках: пример неудачного интерфейса

Что такое интерфейс?

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

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

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

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

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

Пользовательский опыт (UX) — ещё одно понятие, связанное с интерфейсом человек-система — это общее впечатление от использования сайта или приложения. 

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

На удобство влияет не только сам продукт-сайт, но и контекст: где пользователь взаимодействует с продуктом? Что он делал до этого? Как узнал о сайте? Зачем его использует? Что будет делать потом? Нужно учитывать всё, что повлияет на отношение пользователя к продукту-сайту.

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

Пользовательский интерфейс и пользовательский опыт взаимосвязаны. Именно от них зависит «понятность» и «простота» сайта.

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

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

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

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

• Командная строка — ранее популярный, но устаревающий способ взаимодействия. Пользователь вводит текстовую команду и получает результаты работы в виде текста. По такому принципу работают системные администраторы: они вводят нужную команду через админку устройства.
• Графика — наиболее привычный способ взаимодействия через посредника: мышки, клавиатуры или голосовых команд. Пользователь нажимает на кнопки, смахивает экран вправо и двигает ползунки.
• Жесты, голос, нейроны и прикосновения — искусственный интеллект помогает системе распознавать команды. Примеры: голосовые помощники Siri от Apple, Alexa от Amazon или Алиса от Яндекса, приставки Xbox и Nintendo Wii, корректировка громкости движением руки в Яндекс.Станции.
• Веб-технологии — интерфейс для разработки приложений, которые не надо устанавливать на ноутбук. Пользователь управляет программой онлайн из браузера. Пример: платформа Digital-маркетинга — Vitamin.
• Геймплей — интерфейс, сочетающий возможности графического и нейронного управления. Пользователь жмёт на кнопки, двигает мышью, управляет клавишами на джойстике или через VR-шлем.

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

Правила удобного интерфейса сформулировал эксперт по юзабилити Якоб Нильсен в 1994 году. Эти правила учитывают поведение пользователей при взаимодействии с разными типам устройств. Разберём, как они работают.

1. Объясняет пользователю, что делает система

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

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

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

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

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

2. Говорит на понятном для пользователя языке

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

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

Хорошо, когда в описании указано предназначение обуви, её особенности (например, какая подошва или застежка) и отличительные качества (например, устойчивость к повреждениям, высокое качество).

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

3. Позволяет ошибаться и исправлять ошибки

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

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

Интерфейс Эльдорадо позволяет пользователю вернуться назад — достаточно нажать на кнопку с конкретным этапом

4. Соответствует ожиданиям пользователей

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

Если человек не найдёт нужный инструмент в ожидаемом месте, он, скорее всего, уйдёт со страницы. Как в примере ниже.

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

5. Хранит информацию за пользователя

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

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

На Ozon пользователь может посмотреть, что он покупает, на любом этапе оформления заказа

6. Проявляет гибкость

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

7. Простой дизайн

Интерфейс не должен отвлекать от главного — того, за чем пользователь пришёл на сайт: покупки, поиска ответов и т. д. Чем меньше отвлекающих факторов, тем лучше.

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

Теперь то же самое на конкретном плохом примере: 

Белая плашка меню на агрессивном чёрном фоне перетягивает внимание. Кажется, что меню — самое важное на сайте.

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

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

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

А в конце статьи снова красный цвет — им помечены ссылки на другие материалы. Нильсен рекомендует выделять ссылки другим цветом, но избегать красного цвета из-за его агрессивности. Лучше для выделения ссылок использовать более спокойные цвета, например синий.

8. Предотвращает ошибки и направляет пользователей

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

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

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

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

Как понять, удобный ли у вас интерфейс?

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

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

Красные зоны — точки, где посетители пробыли дольше. Источник: yandex

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

Анализ проводят так:

1. Придумывают легенду, которая объясняет пользователю цель теста. Например: «Вы перешли на сайт нового магазина мебель. Моделей много, цены ниже рыночной, доставляют за 1–2 дня. Вы хотите сделать заказ».
2. Прописывают сценарий теста, чтобы пользователь мог выполнить задачу. Например: «Вам нужно купить детский письменный стол и стул. Как вы это сделаете? Выполните задачу и прокомментируйте».
3. В конце теста спрашивают о впечатлениях пользователя. Например: «Что было легко? Какие проблемы возникли?».

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

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

Учимся на чужих ошибках: пример неудачного интерфейса

Рассмотрим сайт digital-агентства idbi. Сайт переполнен анимацией — она увеличивает время загрузки страниц и мешает изучать контент. Кнопки расположены в неудачных местах, назначение некоторых элементов непонятно. 

Например:

1. «Создаём продающий интернет-ресурс в кратчайшие сроки» — пользователю нужно потратить 5 секунд, чтобы прочитать появляющиеся буквы. Это потеря ценного времени, те у кого его нет — проскроллят страницу вниз и пропустят кнопку «Узнать» и навигационное меню.
2. Кнопка «Узнать» сливается с заголовком, её не видно.
3. В левой части экрана, где выделенные точки, расположено меню. При переключении точек пользователь может увидеть примеры работ, если не прокрутит сразу страницу вниз.
4. В блоке с примерами работ текст размещён на полупрозрачных плашках, которые сливаются с картинкой под ними. Прочитать текст сложно. 

5. У всех наград идентичные названия — это сбивает с толку. 

6. Агентство добавило анимацию в каждый блок, но она только снижает скорость загрузки страницы и мешает чтению.

Что упущено:

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

Высоких вам конверсий!

16-03-2023

Пишет про тексты в интерфейсе, проектирование и дизайн. Развивает направление UX-редактуры в Skyeng. Ведет телеграм-канал про редактуру «Письма от Яны Дворецкой»

UX-дизайн — это сложно, если не знаешь, с чего начать. Мы собрали золотые правила зарубежных специалистов Якоба Нильсена, Бена Шнейдермана и Брюса Тогнаццини и наших — Влада Головача и Ильи Бирмана. Они помогут начинающим дизайнерам, проектировщикам, UX-писателям и продакт-менеджерам создавать качественные, понятные и приятные продукты.

Принцип 1

---

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

Само понятие UX-дизайна, или дизайна пользовательского опыта, намекает, что работа дизайнера сосредоточена вокруг взаимодействия пользователей с продуктом. Значит, нужно разобраться, удобен ли целевой аудитории этот продукт.

Принцип 2

---

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

Илья Бирман в своей книге «Пользовательский интерфейс» приводит пример о важности обратной связи:

В челя­бин­ском поч­то­вом отде­ле­нии №80 рабо­тает элек­трон­ная оче­редь. У входа стоит машинка с един­ствен­ной кноп­кой. Нажи­ма­ешь кнопку, и через две секунды на чеко­вой ленте печа­та­ется номерок. Эти две секунды — целая веч­ность. Мно­гие решают, что кнопка не сра­бо­тала, и жмут ещё раз. Рядом с машин­кой все­гда валя­ются «лиш­ние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажа­тие — изда­вала звук или мигала лам­поч­кой, — такой про­блемы бы не было.

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

Не забывайте про обратную связь. Это важно.

Принцип 3

---

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

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

А Брюс Тогнаццини добавляет: «Мода [и красота] не должна победить юзабилити».

Принцип 4

---

В книге «Дизайн пользовательского интерфейса» Влад Головач говорит про сообщения об ошибках:

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

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

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

Существует два типа ошибок: промахи и ошибки.

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

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

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

Если ошибку нельзя предотвратить, то напишите понятное сообщение о ней. Якоб Нильсен, известный специалист по юзабилити, рекомендует:

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

Принцип 5

---

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

Якоб Нильсен считает, что польза не в том, чтобы показать как можно больше, а в том, чтобы показать то, что нужно, в правильный момент. Так мы снижаем когнитивную нагрузку: выдаём информацию порционно и раскладываем по порядку. Люди любят порядок.

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

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

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

Принцип 6

---

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

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

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

Как узнать, что удобно пользователям? Тестируйте!

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

Принцип 7

---

Информация, необходимая для работы в сервисе (например, метки полей или пункты меню), должна быть видимой или легко находимой. А для этого:

• предлагайте помощь прямо здесь, в контексте, вместо того чтобы тренировать память пользователей;

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

Как удачно обобщил всё это Якоб Нильсен: «Узнавание лучше, чем вспоминание».

Принцип 8

---

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

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

Влад Головач в книге «Дизайн пользовательского интерфейса» пишет:

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

Для этого он рекомендует:

• не делать кнопки, опасные для пользователя, кнопками по умолчанию;
• дать пользователям возможность отменять свои действия.

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

* * *

Эти принципы — главное, но не всё. Чтобы проектировать удобные интерфейсы, нужно знать гораздо больше. Советуем прочитать по теме:

* Решением суда запрещена «деятельность компании Meta Platforms Inc. по реализации продуктов — социальных сетей Facebook* и Instagram* на территории Российской Федерации по основаниям осуществления экстремистской деятельности».

Научитесь: Профессия UX/UI-дизайнер
Узнать больше