Разработка UI UX у которых нет аналогов - 1 часть

Шаги разработки:

1. Проработка функционала
2. Проработка контента
3. Выбор цветовой палитры
4. Подбор референсов под элементы UX
5. Подбор стилистики, референсов под элементы UI
6. Разработка прототипа
7. Разработка UI

Проработка функционала

Для проработки функционала необходимо определиться с типо сайта или приложения. Что это? интернет-магазин, сложный личный кабинет с хранением личных данных и документации, ПО и т.д.

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

Например:

Портрет потребителя: Участники тендеров, лица от 35 лет. Владельцы малого и среднего бизнеса.

Потребность: Хранение всей документации по тендеру. Наблюдение за timeLine. Общение со службой поддержки.

Лица которые принимают участие в процессе: Владелец бизнеса выигравший тендер. Служба поддержки. Тендерный отдел.

Какие сервисы содержат подобный контент и нуждаются в коммуникации между несколькими лицами?

Это могут быть - личные кабинеты в банке.

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

Необходимо выписать весь контент, который необходимо внедрить в интерфейс.

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

Так в личном кабинете для владельцев бизнеса получивших тендер может быть контент:

1. Личная информация о заказчике, его контакты.
2. Информация о проекте.
3. Документация.
4. Прописанные тендорным отделом шаги, которые заказчик обязуется выполнить.

Что вы можете найти дополнительного проанализировав личные кабинеты банка:

1. Календарь дальнейших платежей.
2. История выполненных платежей.
3. Чат со службой поддержки.
4. Онлайн бухгалтерия.
5. Аналитика данных.
6. Чат

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

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

Проработка контента

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

Например вы берете первый пунк - Информация о заказчике.

Подробно обсудите с заказчиком, какая именно информация о заказчике необходима. Это может быть:

1. ФИО
2. Телефон и почта
3. Реквезиты компании, прописывайте пример реального контента
4. Паспортные данные, прописывайте пример реального контента

У документов это может быть:

1. Сам файл
2. Название документа, напишите пример названия
3. Вес документа
4. Дата загрузки документа
5. Кнопка для скачивания или просмотра

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

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

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

Это должен быть короткий вариант и длинный.

Так вы можете использовать 2 варианта имени: Анна Мерц и Константин Латышевский.

От этого зависит уровень проработки дизайна.

Удобнее всего создать таблицу в Миро с картой функционала.

Подробнее об анализе аналогов

https://telegra.ph/Analiz-analogov-10-09

Выбор цветовой палитры.

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

Как проводить личные исследования?

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

Всего у потребителей 6 основных потребностей:

1. Престиж
2. Экономия
3. Безопасность
4. Здоровье
5. Красота
6. Комфорт

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

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

В большинстве случаев это темно-синий.

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

Вторая потребность - это безопасность.

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

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

Подробнее о первичной аналитике

https://telegra.ph/Pervichnaya-analitika-i-navyk-abstraktnogo-myshleniya-02-22

Подбор референсов под элементы UX

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

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

1. Предоставленные заказчиком, если есть черновая версия интерфейса.
2. Сриншоты не прямых конкурентов, в данном случае личных кабинетов банков.
3. Локальные скриншоты из других систем содержащих подобные элементы. Например, чат часто используется не только в банках. Вы можете провести аналитику, как выглядит окно чата в любых других личных кабинетах предполагающих частое взаимодействие пользователя со службой поддержки, а так же чаты которые предполагают огромное количество пользователей. Например, чаты службы поддержки продуктов Apple.

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

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

Например, для поиска может быть от 2 до 5 референсов из разных систем: банков, ПО и любых других сложных корпоративных продуктов, таких как портал по покупке it продуктов и систем.

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

Выберите сильные стороны у каждого референса и оставьте только их.

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

https://telegra.ph/Razrabotka-UI-UX-u-kotoryh-net-analogov---2-chast-03-04

2 часть статьи