в чем рисовать экранные формы
Разбор UI/UX на примере прототипа в Figma и основные принципы
Кому адресована статья
В данной публикации я хочу помочь начинающим и «не очень» бизнес-аналитикам, менеджерам проектов, владельцам продуктов, желающим сделать свой первый сайт и всем-всем, кому надо сделать макет сайта или приложения, а он не знает с какой стороны подступиться к делу.
В сети интернет масса материалов на эту тему, но в большинстве своем они или слишком поверхностны, либо требуют знания терминологии и опыта работы с конкретной системой для создания прототипов. Не претендуя на «создание золота», я все же надеюсь, что моя статья будет полезна и интересна желающим погрузиться в славный мир создания макетов с помощью современных средств, а не путем создания рисунков в Paint, Word или Excel. То есть, эта статья для «чайников» в части создания рабочих прототипов.
Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов – Figma.
Вместо введения
Разработка нового продукта в современном мире – дело дорогое, а иногда очень и очень дорогое. Даже самое небольшое изменение стоит денег. Цена ошибки велика и измеряется не только в стоимости доработки, но и в упущенной выгоде, потерянных клиентах и доли рынка. Поэтому очень важно еще до начала разработки продумать и согласовать все внешние атрибуты реализуемого функционала: типы пользоватлей, что конкретно они будут делать и зачем, дизайн страниц и кнопок, включая текст и картинки, а так же сценарии использования.
Как это сделать? Написать на бумажке – можно и нужно, но что поймет пользователь по итогам прочитанного и будет ли потом удобно разработчику реализовывать систему? Решение давно придумано – создать сначала макет, а потом рабочий прототип. Пусть макет будет «деревянным», а в прототипе будут только «открываться двери», но уже на этом шаге заказчик сможет «пощупать» свой продукт и своевременно внести замечания.
То что написано выше относится к любому виду продукта, как физическому, так и электронному. Далее мы будем говорить о прототипах в сфере ИТ (сайты, приложения, корпоративные информационные системы и т.д.), определим, что такое UI и UX, какием критериям должен отвечать прототип в продуктовой разработке, рассмотрим некоторые особенности среды для создания прототипов Figma.
Что такое прототип ИТ продукта? Каким он должен быть?
Прототип – это динамическая модель продукта, симулирующая взаимодействие пользователя с интерфейсов, с помощью которой можно дешево и быстро получить обратную связь от заказчика или представителей целевой аудитории.
Важно отметить, что прототип не является дизайн-макетом сайта (мокапом) или вайерфреймом (набором блоков будущего продукта). Он может визуально отличаться от готового продукта. Самое главное в прототипе это то, что он является рабочим инструментом для проверки гипотез и логики, отработки пользовательских сценариев. То есть прототип должен быть кликабельным.
Основные принципы прототипирования:
Прототипирование достаточно дорогая и время-затратная форма дизайн коммуникации. Так же стоит отметить, что прототипы обычно не являются лучшей документацией, которую можно представить, поскольку они требуют он «читателя» некоторых усилий, чтобы понять интерфейс. Однако при реализации крупных проектов без них не обойтись, потому как именно с помощью прототипа можно проверить будущий продукт на деле, проанализировать все его достоинства и недостатки, получить наиболее точную обратную связь от потенциальных пользователей и в дальнейшем сэкономить куда большие суммы на доработку неактуального функционала.
Необходимо помнить, что прототип продукта — это не конечная версия. Но именно он поможет сделать продукт ближе к идеалу, вовремя найти изъяны и грамотно спланировать дальнейший список действий.
Что такое UI/UX?
UX/UI дизайн существует с незапамятных времен и относится не только к приложениям и сайтам. Просто раньше он назывался по-другому. Например, швейная машинка Зингер. Ведь кто-то еще в 19м веке придумал, как она должна выглядеть и как ей пользоваться. При этом в основе лежала цель, которую должен достигнуть пользователь – сшить что-то быстро, красиво и качественно.
Так, что же представляют собой UI и UX дизайн?
UI — расшифровывается как user interface и переводится «пользовательский интерфейс». Под этим термином обычно понимают визуализацию экранных форм и интерфейсов. UI – это про графический дизайн. UI-дизайнер работает с цветами, композицией, анимацией, шрифтами. На основе черновых схематичных набросков (вайрфреймов) UI-дизайнер собирает финальный дизайн-макет.
UX или User Experience переводится как «пользовательский опыт». То есть это про то, как работать с интерфейсом, удается ли пользователю достичь цели, легко это или сложно. UX дизайнер перекладывает клиентский опыт на интерфейс, строит и проверяет гипотезы взаимодействия пользователя с системой.
Под UX/UI дизайном понимают проектирование любых пользовательских интерфейсов, в которых удобство использования так же важно, как и внешний вид.
UX и UI дизайны часто путают, так как они идут рядом друг с другом, но все же это разные понятия, которые в конце пути должны слиться в единое целое.
Связь прототипа и UX/UI дизайна
Является ли прототип информационной системы UX/UI дизайном? На мой взгляд, является.
Является ли UI/UX дизайн прототипом? Да, но только в случае, если бизнес логика наложена на интерфейс пользователя тем или иным способом. Если пользовательский опыт описан где-то на бумажке и его невозможно продемонстрировать клиенту на интерфейсе, то у нас есть отдельно UI и UX дизайны, но прототип отсутствует.
Есть хороший пример прототипа без разработки ПО. На листах бумаги рисуются страницы сайта. Экспериментатор садится перед пользователем и кладет перед ним лист с главной страницей сайта. Пользователь пальцем тыкает на кнопку или показывает на текстовое поле, поговаривая, что он туда вводит. На каждое действие пользователя экспериментатор заменяет предыдущий лист новым, в котором отображен ответ системы на действия пользователя.
UI есть — это листы бумаги с нарисованными кнопками. UX есть – это действия пользователя. Разработка есть — это действия экспериментатора. Прототип есть, так как подобным образом можно проверить пользовательский опыт и получить обратную связь от клиента.
Но, что будет, если убрать экспериментатора и оставить пользователя наедине с листами бумаги? Останется UX/UI дизайн, а прототип работать не будет. А значит, будет невозможно протестировать логику работы системы.
Инструменты для создания динамических прототипов
нужно отобразить другую.
Далее в качестве иллюстрации создания прототипа рассмотрим пример создания личной страницы в Figma.
Что такое Figma?
Figma — это программа для веб-дизайнеров, с помощью которой можно создавать не только прототипы, но и конечные интерфейсы сайтов и приложений. Процесс работы в программе интуитивно понятен, а возможность совместной одновременной работы над проектом привлекает все больше и больше команд к реализации прототипов именно в Figma.
Плюсы и минусы Figma
К плюсам работы в Figma можно отнести:
Пример создания простейшего прототипа в Figma
Простейший прототип в Figma может создать даже школьник. Ниже в качестве примера работы с инструментом я опишу процесс создания личной страницы. Это будет двухстраничный сайт. На первой странице я помещу небольшой текстовый блок и фотографию, на второй – контакты, так же будет создан хедер с меню.
Шаг 1. Регистрация
Не обязательно регистрировать отдельный аккаунт в Figma. Если у Вас есть Google-почта, то можно зайти в сервис с ее помощью. При первичном открытии Figma сразу предложит пройти краткое обучение работы с программой.
Шаг 2. Создание проекта
Для создания нового проекта достаточно нажать «+» в правом верхнем углу экран. Там же можно открыть один из ранее загруженных шаблонов.
Шаг 3. Создание рабочей области страницы
Прежде чем создать рабочую область будущего сайта или приложения необходимо определить, на каких устройствах она будет отображаться. Это важно, так как на разных моделях мониторов, смартфонов и планшетах макеты будут отображаться по-разному и может случиться, что Ваша фотография улетит куда-нибудь не туда.
Но сейчас речь не об адаптивном дизайне, а о том, что создавая рабочую область, мы по факту создаем основу интерфейса будущего прототипа, и пользователь на выбранном типе устройства будет видеть наш макет так, как он выглядит в Figma. Отдельно отмечу, что в Figma рабочая область сайта называется фреймом.
Чтобы создать основу будущей страницы необходимо нажать клавишу «F» и в появившемся меню справа дважды щелкнуть на выбранный выше тип устройства.
Получим белый лист, у которого можно изменить размер, фон и другие параметры и на котором создается интерфейс страницы.
Шаг 4. Добавление картинки
В Figma очень легко добавлять и обрезать картинки под любые формы. Для этого достаточно добавить на рабочую область нужные фигуру и изображение, выделить оба объекта с помощью сочетания клавиш ctrl и нажать сочетание ctrl+alt+M. При этом важно, чтобы картинка была выше фигуры. Выделять фигуры можно как на рабочей области, так и на панели слева, щелкая на их названия.
Шаг 5. Добавление текстового поля
Чтобы добавить текст необходимо нажать клавишу с буквой «Т» и выделить на рабочей области место для текстового поля. Параметры текстового блока можно изменить в ленте справа. Например, можно отцентрировать блок по центру рабочей области.
Шаг 6. Создание меню
В данной статье я не преследую научить читателя всем аспектам работы с Figma, поэтому меню у нас будет самое простое – двухкнопочное. Кнопки представляют собой прямоугольники, объединенные с текстовым полем. Можно объединить объекты в группу, нажав CTRL+G, а потом отцентрировать текстовое поле по центру будущих кнопок.
Шаг 7. Дублирование основы страницы
В основание страницы входит: рабочая область, меню и текстовое поле. Чтобы создать копию ее копию можно вынести маску изображения вне группы объектов первой страницы. Для этого достаточно левой кнопкой мыши нажать на название маски и перетащить иконку вверх. Затем в перечне объектов выбрать группу объектов, входящих в основание первой страницы, и нажать CTRL+D.
Шаг 8. Добавление внешних ссылок
Очень часто одностраничные сайты создаются только с одной целью – увеличить посещаемость основного сайта. То есть, одностраничник фактически представляет собой ссылку на сторонний ресурс. К сожалению, пока в Figma можно поставить ссылку только на текст. Для этого необходимо выбрать текстовое поле и нажать на значок сцепки вверху экрана и ввести адрес стороннего сайта.
Шаг 9. Добавление ссылок между страницами
Добавление ссылок на объекты внутри Figma аналогично добавлению ссылок на внешние источники за исключением того, что надо где-то взять ссылку на внутренний объект. Для этого надо кликнуть правой кнопкой мыши по объекту и выбрать в выпадающем меню Copy/Paste и Copy Link.
Шаг 10. Демонстрация прототипа
Последний шаг – демонстрация прототипа заказчику. Самое простое – нажать кнопку «Share» в правом верхнем углу экрана и во всплывающем окне выбрать «Сopy Link».
Результат
Вы можете просмотреть и прокликать выполненный прототип, пройдя по ссылке.
Видеоуроки по реализации прототипов в FIGMA
В качестве заключения хочу приложить ссылку на видеоуроки, созданные телеграмм-каналом «Наука и дизайн». Всего 2,5 часа в 15ти уроках по использованию FIGMA, в которых рассмотрены все основные функции и кнопки.
Еще хороший ресурс с видеоуроками по созданию прототипов в Figma.
Проектирование экранов приложения: от планирования до дизайн-макета
Примечание переводчика: сегодня мы публикуем перевод статьи шестнадцатилетней индийской разработчицы Харшиты Арора. Харшита начала изучать графический дизайн с 13 лет. Сейчас она занимается созданием мобильных приложений. В статье Арора делится нюансами разработки дизайна приложений с нуля на примере создания собственного криптовалютного аппа — Crypto Price Tracker.
Статья посвящена первичному проектированию — необходимости анализа функций и возможностей создаваемой программы еще до начала работы над ней, с тем, чтобы учесть все необходимые моменты при создании приложения. Стоит отметить, что этот материал будет особенно полезен начинающим разработчикам (совсем новичкам), поскольку автор сама занимается этим сравнительно недавно.
Skillbox рекомендует: Практический двухмесячный курс «UX-дизайн».
Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
В целом работа над дизайном приложения разделяется на следующие шаги:
Диаграммы потока задач
Первый шаг при разработке — определение списка функций, которые вы хотите добавить в свое приложение. Как только у вас появляется четко оформленная идея, стоит начать работать над созданием диаграммы потока задач. Она позволяет наглядно увидеть, как будет работать апп.
В ходе работы обычно используется 3 элемента:
Собственно, речь идет об обычной блок-схеме, демонстрирующей принятие решения пользователем при попадании на разные экраны приложения.
Вайрфреймы
Как только вы закончили с user-flow, пора приниматься за вайрфреймы. Они показывают (с определенным приближением), что будет представлять собой приложение и как оно будет выглядеть. Это черновой эскиз с указанием основных элементов для каждого экрана.
Для того, чтобы каждый раз не чертить границы корпуса телефона, я использую сервис UI Stencils.
Вот пример вайрфрейма.
После того как эти скетчи готовы, вы можете использовать приложение Pop для объединения отдельных эскизов в единую схему, элементы которой связаны друг с другом.
Дизайн и цветовая палитра
Это мой любимый этап. Вы можете выбирать все, что угодно, после чего начинаем эксперименты над отдельными цветовыми решениями. Для меня лучшие репозитории примеров дизайна и палитр — Mobile Patterns и Pttrns, а также Color Hunt.
Макеты
Да, наконец-то мы можем приступить к проектированию, созданию макетов приложения. Макет в дизайнерском смысле — это наглядное представление вашего дизайна. На этом этапе макет должен быть максимально приближен к реальности, чтобы можно было понять, как приложение выглядит и работает.
Есть различные средства разработки, инструменты для создания макетов. Я использую Affinity. Создавая приложения для iOS, я чаще всего работаю со Sketch.
Вот пример некоторых ранних макетов моего собственного приложения.
Вот работа с цветовой палитрой.
В процессе стоит показывать свои макеты коллегам и знакомым — так вы сможете получить фидбэк, не имея прямого доступа к потенциальным пользователям. В моем случае большинству людей, кому я показывала макеты, понравился черно-золотой вариант.
К слову, в процессе обсуждения вашей работы будьте готовы встретиться с новыми идеями — вам могут предложить что-нибудь очень интересное! — и предложениями. Вы можете получить весьма интересные идеи, когда общаетесь с потенциальными пользователями приложения.
В моем случае я получила несколько идей, которые затем использовала в новом макете.
Дизайн приложения получился лаконичным, на панели задач есть иконки и все элементы управления. Далее я проработала все остальные экраны приложения, взяв это оформление экрана за основу.
Прототипирование мобильного приложения: от идеи до рабочего экрана
Этапу прототипирования не зря уделяется так много внимания при создании приложений. Прототипы способны помочь в различных ситуациях и на разных этапах создания продукта.
В этой статье наш дизайнер Виктория Шишкина подробно рассказывает, какие прототипы бывают, чем они отличаются друг от друга, на каких этапах какие прототипы следует применять и какое ПО лучше всего подойдет для каждого этапа.
Начнем с определения:
Прототип – это модель, прообраз конечного продукта. Прототипы различаются по степени точности и приближенности к реальному продукту. Кроме того, разные виды прототипов служат разным целям и способны решать разные задачи. По стадии готовности их можно условно поделить на 3 этапа:
Прототипы предоставляют отличную возможность не только для вовлечения пользователей в процесс дизайна, но и для наиболее быстрого создания продукта, соответствующего ожиданиям клиента.
Прототипы помогают при общении с заказчиком, могут быть наглядной картиной для разработчиков и способны представить идею компании.
Концептуальные прототипы
Концептуальный прототип представляет собой схематичное изображение будущих экранов и создается на ранних этапах разработки продукта.
Концептуальный прототип нужно делать всегда, при создании интерфейса нового приложения. Такой способ поможет на ранних стадиях решить большинство юзабилити-вопросов.
Концептуальное прототипирование отлично подходит для самого быстрого тестирования идей, потому что позволяет набросать основные элементы экранов за считанные минуты. Кроме того, для создания такого прототипа не нужно обладать навыками работы со специальными инструментами, достаточно воспользоваться подручными средствами – блокнотом, доской или даже стикерами.
Концептуальное прототипирование незаменимо, когда нужно перенести пользовательские сценарии на экраны будущего приложения. Таким образом, ваше приложение в первый раз становится прообразом конечного результата.
Преимуществом концептуального прототипирования является возможность командной работы. Очень часто случается, что при визуализации того или иного функционала требуется поддержка отдельных специалистов – продуктологов, архитекторов, разработчиков. Концептуальный прототип может представлять собой в итоге результат мышления группы людей, что является очень эффективным способом решения юзабилити проблем и поиска равновесия между целями бизнеса и целями пользователей. Не отказывайтесь от грамотной помощи и поддержки команды, будьте открыты к новым идеям!
Когда я работаю над экранами, в процесс вовлечены несколько членов команды. Вначале идеи прорабатываются с продуктологом для выявления противоречий со стороны бизнес-процесса, обговариваются с архитектором для технической реализации и, наконец, с front-end разработчиками. Прототип помогает говорить с любым специалистом на одном языке.
Практические решения:
Онлайн. Есть прекрасное приложение Post-it Plus, которое с помощью камеры «переносит» стикеры на виртуальную доску.
Так Post-it Plus конвертирует физические записки с фотографии в виртуальные (источник: Post-it Plus)
Офлайн. Обычная доска. Обычно я использую маркерную доску, и ничто не способно ее заменить в полной мере. Мне настолько нравится процесс создания прототипа на доске, что кажется уже есть своеобразная от нее зависимость. Такой прототип легко показывать, обсуждать с командой, совершенствовать, править.
Интерактивные прототипы
Интерактивный прототип как правило собирается из экранов, прошедших стадию концептуальных прототипов. Прототип становится достаточно реалистичным, чтобы тестировать его на конечных пользователях.
Когда нужно делать интерактивный прототип:
Мы использовали интерактивные прототипы для демонстрации работы директорам, чтобы показать, каким образом реальные процессы отражены в приложении. Качественно проработанные прототипы – в исследованиях, для тестирования сценария на пользователях (некоторые даже не понимают, что это прототип), для проверки идей и предположений. Этот способ точно не залежится в арсенале дизайнера.
Практические решения:
Для создания интерактивного прототипа необходимы специальные инструменты для постраничного прототипирования. Например, Marvel или InVision (оба работают в web). Эти инструменты позволяют быстро загрузить экспортированный дизайн и установить связи между определенными областями экранов. Они просты и очень интуитивны, потому навык работы приобретается после пары раз использования. Простота инструментов позволяет сконцентрироваться на логике работы вашего прототипа и сценариях тестирования.
Страницы прототипа в Marvel (источник marvelapp.com)
Создание интерактивных областей и связей в Marvel (источник marvelapp.com)
Анимированные прототипы
Движение – это способ вдохнуть жизнь в дизайн! Анимированный прототип является самым высокоуровневым прототипом. Некоторые из них способны практически полностью моделировать работу настоящего приложения, и неискушенному взгляду отличить их достаточно сложно. Главное преимущество создания анимированного прототипа читается из названия. На этом этапе дизайнер продумывает очень важный аспект в UX – взаимодействие приложения с пользователем, визуализация которого создается посредством анимации.
Источник principleformac.com
Анимация является способом коммуникации приложения с пользователем. Она позволяет пользователю оставаться в курсе всех событий, происходящий в приложении, и в разы повышает юзабилити интерфейса. Когда движения элементов в приложении моделируют естественные физические процессы, они считываются мозгом на подсознательном уровне, и пользователь не задумываясь понимает, что происходит. Таким образом, движение делает дизайн более ориентированным на пользователя.
Источник principleformac.com
Мы ожидаем, что элементы интерфейса откликнутся на наши действия, и расстраиваемся, когда это не происходит. Нам необходимо знать, что наши действия не пропадают втуне. Представьте, что вы говорите что-то человеку, а он никоим образом не реагирует на ваши слова. Это способно вывести из себя. Однажды тестировали приложение-помощник продавца-консультанта для магазинов крупной торговой сети. Приложение было в достаточно сыром состоянии, но готовое для тестирования определенного функционала. Анимация элементов на этом этапе не была продумана. У продавцов вызвало определенное раздражение то, что кнопка «Положить в корзину» визуально не отзывалась на нажатие. Несмотря на то, что основная функция выполняется – товар попадает в корзину – пользователь не понимает, произошло целевое действие или нет. Это неприятно, согласитесь?
Неотзывчивая кнопка
Практические решения:
Для создания анимированного прототипа необходимо знание специальных инструментов, работающих с анимацией. Большинство таких программ поддерживают послойный импорт из Sketch, что позволяет работать не с экранами целиком, а с отдельными элементами. Прототип можно открыть на мобильном устройстве. Анимированное прототипирование занимает гораздо больше времени – и на продумывание деталей и на исполнение, однако результат оправдывает себя.
Работа с прототипом в ProtoPie (источник protopie.io)
Для создания анимированных прототипов подходят такие инструменты как Principle, Flinto, Proto.io, Origami, ProtoPie, Framer и др. Некоторые инструменты (например, ProtoPie, Framer) поддерживают работу встроенных датчиков мобильных устройств – акселерометра, гироскопа, микрофона, камеры, 3D Touch, что позволяет сделать прототип еще более реалистичным. О том, какие датчики и сенсоры есть в нашем распоряжении и как работать с ними в ProtoPie прочитать можно тут.
Framer ориентирован на создание прототипа с помощью кода, поэтому работа с ним на порядок сложнее. Однако, такой способ открывает дополнительные возможности. Например, специально запрограммированный прототип сможет обрабатывать информацию, введенную в поле и выдавать соответствующий результат.
Когда нужно делать анимированный прототип:
Таким образом, прототипирование многогранно и объединяет в себе и наброски от руки на самом первом этапе генерации дизайна, и максимально похожие на реальное приложение интерактивные макеты. Каждый вид прототипа может служить разным ситуациям и целям. Необходимо выбирать наиболее подходящие виды прототипов для решения актуальных задач для каждого этапа работы над приложением.