Интерфейс

Принцип №4. Больше практики

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

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

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

Персональный компьютер как система

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

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

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

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

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

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

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

Аппаратно-программный и пользовательский интерфейс обеспечиваются операционной системой компьютера.

Аппаратно-программный интерфейс — взаимодействие аппаратного и программного обеспечения компьютера.

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

Коротко о главном

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

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

Пользовательский интерфейс — взаимодействие человека и компьютера. Он обеспечивается операционной сис¬темой.

Вопросы и задания

1. В состав каких систем входит подсистема «компьютер»? Для каких систем компьютер является надсистемой?

2. Назовите надсистему для объекта «принтер». В каком отношении находятся объекты «принтер» и «струйный принтер»?

3. Что такое интерфейс? Перечислите виды интерфейса.

4. Что вы знаете о пользовательском интерфейсе?

5. Как вы понимаете смысл фразы: «Операционная система Windows обеспечивает одинаковый пользовательский интерфейс при работе с разными объектами»?

6. У кажите входы и выходы для системы «компьютер».

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

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

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

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

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

• создание диаграммы пользовательских маршрутов;
• изучение существующих дизайнерских шаблонов и стилей;
• создание каркасов;
• создание макетов.

Диаграмма пользовательских маршрутов

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

Как пользователи могут попасть в нужный им раздел? Можно ли на диаграмме потоков визуализировать все возможные маршруты пользователей по приложению?

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

Для удобства можно использовать различные готовые инструментарии, например, шаблоны блок-схем Miro, Milanote и Whimsical. Можно легко формировать маршруты с помощью трёх стандартных фигур:

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

Здесь проиллюстрирована диаграмма маршрутов пользователя на этапе предварительного дизайна. Исследовать другие распространённые маршруты и фильтровать широкий спектр скриншотов из iOS, Android и веб-приложений можно на Page Flows.

Изучение дизайнерских шаблонов и стилей

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

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

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

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

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

Вот ещё несколько отличных ресурсов:

• UX Screenshots,
• Laudable Apps,
• Mobbin Design,
• Pttrns,
• Mobile Patterns.

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

Создание каркасов

На этом этапе уже можно переходить к творчеству

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

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

Обратите внимание на SneakPeekIt. В нём есть большое количество шаблонов, которые можно распечатать и использовать в своих эскизах

Это совершенно бесплатный инструмент для вдохновения.

Также обязательно ознакомьтесь с Balsamiq, Whimsical и OmniGraffle. Эти компоненты предварительной сборки помогут в работе со структурой вашего приложения.

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

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

Создание макетов приложения

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

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

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

Перевод статьи «How developers and tech founders can turn their ideas into UI design»

Интерфейс — что это?

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

Специалисты выделяют два вида:

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

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

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

Факторы влияния

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

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

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

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

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

Примечание: Здесь и далее речь идет о дизайне, ориентированном на пользователя (UCD), если явно не сказано об иной методологии.

Примечания

1. Р 50.1.041-2002: Информационные технологии. Руководство по проектированию профилей среды открытой системы (СОС) организации-пользователя
2. СТО НОСТРОЙ 2.15.9-2011: Инженерные сети зданий и сооружений внутренние. Устройство систем распределенного управления. Монтаж, испытания и наладка. Требования, правила и методы контроля
3. Першиков В. И., Савинков В. М. Толковый словарь по информатике / Рецензенты: канд. физ.-мат. наук А. С. Марков и д-р физ.-мат. наук И. В. Поттосин. — М.: Финансы и статистика, 1991. — 543 с. — 50 000 экз. — ISBN 5-279-00367-0.
4. ОСТ 45.68-96 Классификация и условные обозначения стыков (интерфейсов) цифровых станций местных телефонных сетей
5. Мячев А. А. Интерфейсы средств вычислительной техники. Энциклопедический справочник. М.: Радио и связь, 1993. С. 4.

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

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

Хороший интерфейс программы или системы должен говорить на языке пользователя и содержать как минимум следующие элементы:

• командная строка;
• меню быстрого доступа;
• кнопки команд и вызова диалоговых окон;
• выпадающие списки;
• переключатели (флажки).

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

Пользовательский интерфейс остановлен: что делать

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

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

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

Виды интерфейса

Бывают различные типы интерфейсов. Самыми распространёнными являются:

1. Аппаратный (физический) – включает в себя методы и средства взаимодействия между составными элементами компьютера через шлюзы, разъёмы, слоты. Самый характерный пример – универсальная последовательная шина (USB), используемая для подключения внешних устройств.
2. Программный – сюда входят инструменты, обеспечивающие взаимодействие программ друг с другом (например, ПК с принтером), плюс обмен информационными ресурсами. В частности, прикладной программный интерфейс (API) представляет собой набор процедур, используемых приложением для запроса и выполнения служб более низкого уровня в ОС компьютера.
3. Аппаратно-программный – обеспечивает сопряжение обоих интерфейсов.
4. Пользовательский (человеко-машинный) – совокупность средств и правил взаимодействия оператора и машины в форме диалога. Иными словами, это картинка, которую видит пользователь на внешней части устройства и с которой непосредственно работает.
5. Графический – вид пользовательского интерфейса, построенный на основе следующих принципов:

• объекты изображаются в форме значков;
• управление объектами (программное и аппаратное) происходит в окнах, где расположены меню и разного рода манипуляторы;
• в отличие от текстового, графический интерфейс системы предоставляет пользователю доступ ко всем видимым объектам на экране ПК с помощью «мыши» или клавиатуры.

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

Основные определения

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

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

Если говорить простым языком, то интерфейс это мост, который помогает взаимодействовать двум элементам. Причем это необязательно пара «человек-компьютер». Это могут быть пары «компьютер-компьютер», «компьютер-устройство (например, модем или принтер)» и т.д.

С помощью различных интерфейсов решаются следующие задачи:

1. Ввод и передача команд;
2. Обеспечение контроля над ошибками;
3. Облегчение взаимодействия между пользователем и устройствами (или программами);
4. Обеспечение обмена информацией между разными элементами.

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

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

Интерфейс — в широком смысле слова, это способ (стандарт) взаимодействия между объектами. Интерфейс в техническом смысле слова задаёт параметры, процедуры и характеристики взаимодействия объектов. Различают:

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

Программный интерфейс — набор методов для взаимодействия между программами.

Физический интерфейс — способ взаимодействия физических устройств. Чаще всего речь идёт о компьютерных портах.

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

Рис.1. Взаимодействие пользователя с компьютером

В основном пользователь генерирует сообщения следующих типов:

запрос информации

запрос помощи

запрос операции или функции

ввод или изменение информации

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

Интерфейс пользователя компьютерного приложения включает:

средства отображения информации, отображаемую информацию, форматы и коды;

командные режимы, язык «пользователь — интерфейс»;

устройства и технологии ввода данных;

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

поддержку принятия решений в конкретной предметной области;

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

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

Это не только экран, который видит пользователь. К этим элементам относятся:

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

используемая системой метафора (например, рабочий стол в MS Windows);

элементы управления системой;

навигация между блоками системы;

визуальный (и не только) дизайн экранов программы;

средства отображения информации, отображаемая информация и форматы;

устройства и технологии ввода данных;

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

обратная связь с пользователем;

поддержка принятия решений в конкретной предметной области;

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

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

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

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

Ответить на большую часть этих вопросов поможет составление портрета целевой аудитории (ЦА) — тех самых людей, для которых делается продукт.

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

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

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

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

Такая персона становится центром user story, или пользовательской истории. Это краткий, в несколько строк, рассказ про персону и то, как она работает с функциональностью приложения и какой цели достигает. User story строится по шаблону:

«Как <роль пользователя>, я <что-то хочу получить> <с такой-то целью>»

Поместив нашего 23-летнего фаната оригинальных версий в этот шаблон, получим:

«Как <23-летний любитель версий с оригинальной озвучкой>, я <ищу через функцию ”Поиск” фильмы с субтитрами> <чтобы сходить фильм на английском>»

Компания Intercom славится не только комплексным решением по внедрению чатов в сайты и мобильные приложения, но и изобретением подхода Jobs To Be Done. В основе подхода лежит не личное качество ключевой персоны, а обстоятельства и мотивация, которые толкают персону пользоваться продуктом. «Размышления» персоны называются Job story, а шаблон выглядит так:

«Когда <я оказался в такой ситуации>, я хочу <что-то сделать по некоторым причинам> <с такой-то целью>»

Ситуация с кинолюбом в рамках такого подхода выглядит иначе:

«Когда <меня раздражают посетители кинотеатров, жующие попкорн и мешающие смотреть фильм своими разговорами>, я <ищу в расписании оригинальную версию фильма>, <чтобы посидеть в полупустом зале, где никто не бубнит>

Подробнее про подход Jobs To Be Done написала в своём блоге платформа Tilda.

От User story и Job story мы переходим к User scenario. Это маршрут взаимодействия пользователя с продуктом и достижения цели.

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

Основные требования к интерфейсу

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

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

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