Что такое интерфейс. графический интерфейс, типы и api — простыми словами

Типы пользовательских интерфейсов. Графический, текстовый и другие

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

Текстовый интерфейс MS-DOS — командная строка

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

Norton Commander — файловый менеджер для MS-DOS. В нем можно не только набирать команды на клавиатуре, но работать с файлами с помощью сочетаний клавиш.

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

Графический интерфейс Windows 3.11

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

Материальный интерфейс — компьютерная мышь. Фото: Depositphotos

Голосовой интерфейс — это управление с помощью речевых команд. Человеческий голос сегодня умеют понимать даже мобильные телефоны. Например, Siri от Apple, голосовой помощник Google, «Алиса» от «Яндекса»

Голосовой интерфейс — Siri от Apple. Siri — это сокращение от Speech Interpretation and Recognition Interface (интерфейс распознавания и интерпретации речи). Фото: Depositphotos

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

Жестовый интерфейс — игровая приставка Nintendo Wii, контроллеры которой реагируют на движения пользователя.

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

Перчатки виртуальной реальности — пример тактильного интерфейса. Фото: NASA

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

Киану Ривз в фильме «Матрица» (1999). Герои пользуются нейроинтерфейсом, чтобы попасть в виртуальную реальность — Матрицу.

Киберспейс — интерфейс в виде виртуальной реальности. Кадр из фантастического фильма «Джонни Мнемоник» (1995)

Тест приложения Mashable

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

«100 лучших приложений для iPhone», «Топ-13 раздражающих уведомлений Facebook» — кажется, Mashable знает, каким должен быть хороший интерфейс. Но соответствует ли само издание критериям, по которым судит других?

Владимир Солосин, старший маркетинг-менеджер Яндекс.Такси, проверил, насколько Mashable отвечает 10 принципам понятного интерфейса.

Насколько удобная и понятная навигация у приложения?

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

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

Понятен ли текст приложения?

ПЛЮС. Локализация системная: когда переключаете язык на смартфоне, все названия переводятся. Но перевод некоторых словосочетаний механический или не до конца понятный по смыслу: «Переключить раскладку» — это изменить вид отображения статей. Некоторые объекты не переведены: Tile, Home. Но в целом проблем не возникает — это точно лучше, чем использовать английский язык по умолчанию.

Есть ли у пользователя свобода действий?

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

Соблюдается ли принцип последовательности, постоянства и соответствия стандартам?

Предусмотрел ли разработчик проблемные места?

МИНУС. В приложении много недоработок:

встроенный YouTube-плеер не адаптирован для вертикального просмотра, половина ролика «срезается», некоторые элементы уходят за границы видимости;

выбор языка интерфейса работает только в «бургерном» меню;

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

Навигация интерфейса знакома и понятна?

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

Ключевые элементы интерфейса в фокусе внимания?

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

Не перегружен ли интерфейс лишним текстом или пунктами навигации?

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

Если ошибка происходит, какое решение предлагает приложение?

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

Есть ли служба поддержки у приложения?

МИНУС. Справочного раздела нет, есть только информация о версии приложения (1.0). Также нет обратной связи — нельзя связаться с разработчиками, чтобы донести пожелания.

Как применить принцип Схожести в UI дизайне?

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

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

Это поможет привлечь внимание пользователя к определенному элементу (точке фокусировки) — при этом не нарушая сканируемость, понятность и плавность интерфейса

Можно использовать принцип Схожести в навигации, ссылках, кнопках, заголовках, призывах к действию и т.д.

Замкнутость

Мы часто воспринимаем группу элементов как один узнаваемый объект или фигуру. Принцип Замкнутости также работает, когда объект неполный, или какие-то части не соединены между собой.

Как применить принцип Общей судьбы в UI дизайне?

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

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

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

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

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

Пример оконного текстового интерфейса

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

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

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

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

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

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

В POSIX-совместимых системах, таких как UNIX и Linux, работа пользователя с терминалом осуществляется при помощи особой подсистемы, называемой TTY-абстракцией.

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

• Любая программа, получающая данные путём чтения stdin и отправку данных путём записи в stdout, по определению является консольной программой. Однако, такие программы могут обходиться и без пользователя, поскольку stdin и stdout могут быть связаны не с интерактивными устройствами (клавиатурой и монитором), а с файлами или потоками ввода/вывода других программ.
• Текстовые программы для DOS, осуществляющие вывод в видеопамять EGA/VGA. Подобные программы работают также и в среде Microsoft Windows.
• Unix shell, а также все утилиты, предназначенные для работы в этой среде.

Некоторые программы с ТПИ могут работать и в консольном режиме:

• Midnight Commander (UNIX)
• FAR Manager (Windows)

Как применить принцип Симметрии в UI дизайне?

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

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

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

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

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

Продолжение

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

Как применить принцип Близости в UI дизайне?

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

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

Будущее 4К

На пути к следующему поколению телевизоров

Большинство пользователей не обновляют свои телевизоры так же часто, как смартфоны. Это значит, что, несмотря на то, что в мире выпускается всё больше и больше телевизоров с разрешением Ultra HD (4K), мы всё ещё обслуживаем рынок, который ограничивается 1080 пикселями.

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

Хотя, возможно, самой многообещающей разработкой для 4K станет более полная цветовая гамма и глубина изображения. Современные HD телевизоры используют цветовой профиль под названием Rec.709, который обеспечивает довольно ограниченный выбор цветов. Новый профиль Rec.2020 разработан для 4K телевизоров и предлагает гораздо более широкую палитру.

При этом глубина цвета важнее, чем его диапазон. Наиболее популярные модели HD телевизоров используют 8-битный цвет. Это значит, что для каждого из трёх RGB цветов существует 256 оттенков, что в сумме даёт 16,78 миллионов цветов. Новые 4K телевизоры с 10-битным или выше разрешением могут производить не менее 1024 оттенков каждого цвета, что позволяет получить свыше 1 миллиарда цветов. С большей цветовой глубиной исчезнут проблемы с полосами и размыванием изображения, и разработчики получат больше возможностей в использовании цвета и обработке фотоисходников.

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

1. Шаблон пользовательского интерфейса.
2. Руководство по разработке пользовательского интерфейса от Apple.
3. Разработка пользовательского интерфейса для Android TV.
4. Руководство от Amazon Fire.

Почему WIMP-интерфейс до сих пор с нами?

Преимущества:

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

Недостатки:

• WIMP-интерфейс плохо приспособлен для удовлетворения потребностей как новых, так и продвинутых пользователей. Для того чтобы продуктивно выполнять свою работу, двум типам пользователей подойдут пользовательские интерфейсы различной сложности.
• В связи с ограниченностью экранного пространства, ограничено и множество функций приложения, которые можно предоставить пользователю.
• Из-за очень простого способа взаимодействия («видеть и указывать»), у пользователя нет возможности естественным образом передавать сложные намерения.

• Ярлыки — они позволяют располагать иконки объектов в легко доступных для пользователя местах независимо от настоящего расположения объекта.
• «Горячие клавиши» — позволяют сократить время вызова команд приложения, что несколько повышает эффективность работы продвинутых пользователей.
• Жесты окнами — такие жесты позволяют упростить изменение расположения окон приложений (правый край — на пол-экрана, верхний угол — на полный экран).
• Виртуальные рабочие столы — позволяют расширить рабочую область за счёт добавления виртуального экранного пространства.

• AR UI — взаимодействие с виртуальными элементами интерфейса в реальном окружении
• VR UI — погружение пользователя в виртуальное окружение
• Голосовой UI — передача команд компьютеру на естественном языке
• Жестовый UI — передача команд компьютеру через движение частей тела
• Осязаемый UI — взаимодействие c реальными объектами
• Нейрокомпьютерный UI — передача команд компьютеру через мыслительные процессы

• Жестовое меню — эффективная замена списочному и радиальному меню
• Управление взглядом — замена компьютерной мыши
• Предсказывание движения курсора — обучение особенностям поведения пользователя
• Датчик давления для мыши — возможность расширить выразительность обычного нажатия кнопки
• ZUI (Zoomable User Interface) — сложно объяснить, быстрее будет увидеть
• Тегирование файлов — удобный поиск файлов, позволяющий абстрагироваться от иерархической структуры файловой системы

API вебмастеров / поисковых систем

Для вебмастеров и программистов особенно важны Web API. Такие системы управления включают в себя комплект HTTP-запросов. В результате получения таких запросов модуль генерирует строго определенную структуру HTTP-ответов. Для транспортировки информации между ними принято использовать форматы XML или JSON.

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

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

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

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

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

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

При этом отдельные компоненты REST функционируют примерно таким же образом, как взаимодействуют между собой серверы и клиенты в Интернете. Хотя работа систем на архитектуре REST до сих пор не имеет единого стандарта, большинство RESTful-реализаций используют конкретные стандарты, такие как HTTP, URL, JSON и XML

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

Предлагаем возможные варианты прототипирования

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

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

Вайрфрейм для клиента → Детализированный прототип → Дизайн-концепция

Вайрфрейм для себя → Детализированный прототип → Дизайн-концепция

Вайрфрейм для клиента → Дизайн-концепция

Вайрфрейм для себя → Дизайн-концепция

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

Далее мы подробней расскажем о специфике каждого шага.

Вайрфреймы

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

Плюсы:

— можно быстро составить схемы большого количества экранов;

— можно увидеть все сценарии.

Минусы:

— неподготовленному человеку сложно вникнуть в упрощённую схему из 
черно-белых квадратов и соотнести её с будущим приложением.

Примеры:

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

Детализированный прототип

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

По сути в работе над прототипом мы используем метод прогрессивного JPEG, применённый к дизайну. Это значит, что мы создаём облегченный, но цельный образ конечного продукта.

Плюсы:

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

Минусы:

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

Примеры:

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

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

Дизайн-концепция

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

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

Плюсы:

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

Минусы:

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

Примеры дизайн-концепции и прототипа:

Ниже — интерактивный прототип приложения Yodel. Изображение кликабельно.

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

Узнаваемость.

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

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

1.2. Поля ввода

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

Поля ввода.	Ввод значения.

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

Поле, выбранное в данный момент обводится голубой рамкой.

Рамка вокруг выбранного элемента

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

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

Цели и основные правила при оформлении дружественного интерфейса

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

Интуитивное понимание

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

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

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

Предсказуемость

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

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

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

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

Минимализм

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

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

Скорость загрузки страницы

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

Терпимость к ошибкам пользователя

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

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

Вывод

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

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