Программирование в 2020: новые тенденции и развитие, №5, стр. 16-24

Разработчики игр и ПО

Инструменты реализации GUI

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

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

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

пример

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

  • FLUID
  • AppInventor (Android)
  • LucidChart
  • Wavemaker
  • Visual Studio

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

Вот несколько рекомендаций для создания приятного пользовательского интерфейса:

Узнаём своих пользователей

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

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

TurboTax позволяет обычным пользователям, таким как вы и я, оплачивать налоги.  Это страшно? О чём вы думаете, когда начинаете? Что делать, если идёт проверка? Что делать, если я совершу ошибку? TurboTax начинается с сообщения, которое помогает расслабиться. Ну или что-то вроде того. Даже когда вы делаете ошибку, приложение объяснит, что делать.

Интерфейс и проектирование программы#

Интерфейс играет ключевую роль в формировании отношения пользователя к приложению, так как с точки зрения пользователя интерфейс есть то самое приложение.
Поэтому необходимо уделить должное внимание проектированию интерфейса.
К сожалению, на практике этого не происходит.
На это есть много причин.
Основная причина связана с высокой сложностью разработки программ.
Усилия коллектива разработчиков брошены на то, чтобы вовремя уложиться в план.
Вопросы к интерфейсу возникают на этапах эксплуатации и сопровождения программы.
Когнитивный диссонанс.
Неудобные вопросы от пользователей, сложности с обучением, неверное понимание инструментов, поток ошибок из-за неожиданных сценариев использования программы заставляет разработчиков задуматься об интерфейсе.
Технически сложно переделать интерфейс у уже написанной программы.
Это приведет к значительным изменениям в коде, с которыми никто не согласится, так как бюджет и время работы над проектом уже исчерпаны.
Поэтому в современном процессе разработки программ интерфейс проектируется на начальном этапе.
Информация о нем оформляется в виде требований к программе.
При реализации программы интерфейс итерационно уточняться на основе обратной связи от пользователей. Вторая проблема в проектировании интерфейса: кто этим будет заниматься (пользователь, разработчик, маркетолог, аналитик или отдельный специалист)? Пользователи не всегда понимают, что они хотят.
Их желания основываются на привычках и опыте, накопленных при эксплуатации близких по характеру программ.
Это препятствует появлению новых идей в интерфейсах.
Предубеждение, что пользователи непременно отнесутся с неодобрением к попыткам отойти от старых привычных принципов построения интерфейсов.
Необходимость поддерживать совместимость с ранними версиями интерфейса.
Поддержка старых парадигм.
Разработчики полагаются на “промышленные стандарты”

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

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

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

Работа над интерфейсом – это совместная работа пользователя, разработчика и проектировщика интерфейса.

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

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

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

Элементы графического интерфейса

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

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

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

  • Tabs — Если приложение позволяет запускать несколько экземпляров самого себя, они отображаются на экране как отдельные окна. Tabbed Document Interfaceподошел, чтобы открыть несколько документов в одном окне. Этот интерфейс также помогает при просмотре панели предпочтений в приложении. Все современные веб-браузеры используют эту функцию.

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

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

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

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

Графический интерфейс приложения содержит один или несколько из перечисленных элементов графического интерфейса:

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

  • Dialogue Box — Это дочернее окно, которое содержит сообщение для пользователя и запрос на выполнение каких-либо действий. Например: приложение генерирует диалог для получения подтверждения от пользователя на удаление файла.

  • Text-Box — Предоставляет пользователю область для ввода и ввода текстовых данных.

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

  • Radio-button— Отображает доступные варианты выбора. Из всех предложенных можно выбрать только один.

  • Check-box— Функции, аналогичные списку. Когда выбран параметр, флажок отмечается как установленный. Можно выбрать несколько вариантов, представленных флажками.

  • List-box — Предоставляет список доступных элементов для выбора. Можно выбрать более одного элемента.

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

  • Sliders
  • Combo-box
  • Data-grid
  • Раскрывающийся список

Как создают GUI

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

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

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

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

Другие термины на «G»

GNUGitGradleGitHubGraphQLGameDevGenericsGo (Golang)Godot EngineGoogle ChromeGoogle AnalyticsGoogle Tag Manager
Все термины

Разработка интерфейса как процесс

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

  1. Проектирование
    • Функциональные требования: определение цели разработки и исходных требований.
    • Анализ пользователей: определение потребностей пользователей, разработка сценариев, оценка соответствия сценариев ожиданиям пользователей.
    • Концептуальное проектирование: моделирование процесса, для которого разрабатывается приложение.
    • Логическое проектирование: определение информационных потоков в приложении.
    • Физическое проектирование: выбор платформы, на которой будет реализован проект и средств разработки.
  2. Реализация
    • Прототипирование: разработка бумажных и/или интерактивных макетов экранных форм.
    • Конструирование: создание приложения с учетом возможности изменения его дизайна.
  3. Тестирование

    Юзабилити-тестирование: тестирование приложения различными пользователями, в т.ч. и пользователями с ограниченными возможностями (Accessibility testing).

Рис. 1. Этапы разработки пользовательского интерфейса

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

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

CC-BY-CA Анатольев А.Г., 08.10.2014

Как создать качественный пользовательский интерфейс

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

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

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

Какие компоненты есть в GUI

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

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

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

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

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

Манипуляции. Действия, которые можно совершить с интерфейсом, тоже считаются его частью. Например, на кнопку можно нажать, меню — открыть и закрыть, окно — расширить. Еще есть drag-n-drop и другие способы взаимодействия с интерактивными элементами. Все это делается с помощью мыши или клавиатуры, иногда — других устройств ввода и вывода.

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

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

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

К другим элементам относят:

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

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

Тактильные интерфейсы пользователя (TUI или tangible user interface)

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

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

Парочка проблем

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

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

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

Тэги: дизайн, интерфейс, опыт, советы

Недостатки GUI

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

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

Прототипирование

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

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

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

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

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

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

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

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

В качестве софта для этой задачи мы используем Overflow, чей слоган “User flows done right” даёт понять, что время за этой работой пройдёт продуктивно и с пользой. В Overflow легко импортируются экраны из Sketch или Figma, а сделать flow для 100 экранов можно за час — гораздо быстрее, чем рисовать стрелочки самому.

Нужен дополнительный уровень понимания, как продукт будет работать? С помощью таких сервисов, как Marvel, InVision, POP App и Origami Studio детализированный прототип можно превратить в интерактивный. Его польза в том, что он даёт прокликать (а в случае, если у нас мобильное приложение — прокликать прямо в телефоне) все элементы интерфейса и оценить логику работы продукта до того, как он попадёт в руки конечного пользователя.

Его создание — этап необязательный, так как с презентацией будущей работы справляются макеты и user flow. Но когда нужно показать возможности мобильного приложения и раскрыть перед клиентом предстоящий объём работ в деталях, используйте его.

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

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

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

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

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

Остальное#

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

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

Опыт взаимодействия = UX (User Experience)

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

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

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

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

Делать программы похожими на другие.
Прозрачный и очевидный.

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

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

Настраиваемый интерфейс.
Пользователь сам выбирает внешний вид программы.
Темы – темная и светлая темы.
Адаптивный интерфейс – интерфейс настраивается самой программой.
Идея отслеживать действия пользователя и адаптироваться под его потребности.
Усложняется поддержка пользователей.
Внешний вид программы будет отличаться.

Вывод

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

«Что делать?»

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

«Куда идти?»

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

«Куда нажимать?»

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

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

Об этом писал в своём блоге Илья Бирман, а на сайте «Бюро Горбунова» он даёт общий совет.

Оцените статью