{"id":10770,"title":"\u0410\u043a\u0441\u0435\u043b\u0435\u0440\u0430\u0442\u043e\u0440 \u0431\u0435\u0437 \u0441\u043a\u0443\u0447\u043d\u044b\u0445 \u043b\u0435\u043a\u0446\u0438\u0439 ","url":"\/redirect?component=advertising&id=10770&url=https:\/\/vc.ru\/promo\/349044-korotko-zapustit-pilot-i-poluchit-novyh-klientov-s-pwc&placeBit=1&hash=9dc6fb76f44860054ba925b62f60718bafc31c9d79b65dbd7800f065f8fab83b","isPaidAndBannersEnabled":false}
Дизайн
Marina Makeeva

UX процесс (план)

Здесь описан не полностью процесс, а небольшой план процесса UX, перетекающий в UI. Но, к сожалению, не бывает универсальной таблетки (ЖАЛЬ), по этому план придется адаптировать под каждый проект индивидуально.

Немного терминологии простым языком:

Интерфейс - это мост между пользователем и контентом; среда, через которую пользователь получает информацию. Среда формирует опыт взаимодействия, опыт можно использовать.
UI - это визуальный дизайн. Форма, эстетика, внешний вид, язык, настроение.
UX - не визуальный дизайн. Изложение текста, навигация, структура, контент, удобство.

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

План

  • Идея
  • Стратегия
  • Целевая аудитория
  • Краткое описание требований
  • Контентный план
  • Карты (User flow и Content map)
  • Карта сайта (сервиса или приложения)
  • Каркасы (Wireframes)
  • Прототип (Wireframe prototype)
  • Дизайн UI
  • UI макеты и прототип (Visual Prototype)

1. Идея

а. Какую проблему вы решаете?

б. Каковы ваши конкуренты (аналогичные, похожие или контент-смежные приложения)?

в. Что будет делать ваше приложение/сайт/интерфейс?

г. Название приложения, слоган и миссия

2. Стратегия

а. Какая цель у приложение/сайта/интерфейса? Что он хочет достичь?

б. Потребности пользователей

в. Потребности бизнеса

г. Какие технологии будут использованы?

д. Waterfall или Agile? Сравнение этих методов можно почитать здесь

3. Целевая аудитория

а. Кому выгодно мое приложение/сайт/интерфейс? (например, моё приложение поможет людям, которые хотят накопить деньги)

б. Роли (группы с похожими чертами личности и целями). Назначьте ключевое слово для каждой роли: например, «Политический» для пользователей, которые хотят экономить на еде, «Функциональный» для тех, кто хочет сэкономить время и т. д. Эти ключевые слова помогают с дизайном и языком.

в. Демография

г. Психография (ценности, хобби)

д. Персоны (собирательный образ пользователя)

4. Краткое описание требований

Трансформируем цели, учитывая с конкретные требования веб-сайта.

а. Список требований к содержанию

б. Список функциональных требований

5. Контентный план

а. Основные категории контента

«Контент предшествует дизайну. Дизайн при отсутствии контента - это не дизайн, а украшение »


Джеффри Зелдмен (Jeffrey Zeldman)

6. Карты (User flow chart и Content map)

а. Создаем основные пути пользователя (User flow). Это карта похожа на блок-схему, на которой можно увидеть весь путь пользователя по разным направлениям. Она также влияет на контент.

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

Если ваше приложение/сайт не очень сложное, то можно соединить эти карты в одну.

7. Карта сайта

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

а. Определить основные категории контента

б. Определить структуру сайта и навигационного меню

с. Определить структуру веб-форм

д. Элементы карты сайта

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

8. Каркасы (Wireframes)

Каркасы — это визуальная структура страниц. На этом этапе мы все еще не думаем о дизайне.

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

б. Задать общие элементы формы (фио, телефон, согласие на обработку, кнопка)

с. Стратегия подачи домашней страницы

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

Помните 2.0. Мы всегда создаем 2 версии сайта (web & mobile).

9. Прототип (Wireframe protootype)

а. Путь, который проходит пользователь

10. Дизайн (UI)

а. Создаем доску настроения (Mood board).

б. Фундаментальные элементы UI (их 5 пять, более подробно тут)

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

Цвет (он не является субъективной метрикой, а передает пользователю настроение, также он имеет вес и толщину. С помощью цвета можно показать определенную культуру и поведение) Используя все это, можно влиять на поведение пользователя. Активный/неактивный цвет лучше задать заранее, он должен быть интуитивно понятный пользователю.

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

Типографика

Иконки и символы

с. UI компоненты. Если вы новичок, то сначала можно изучить все UI элементы.

Стиль UI

Библиотека шаблонов

Навигация

Элементы взаимодействия

11. UI макеты

а. Гладкая анимация, которая соответствует законам физики и интуитивно привлекает внимание к элементу

б. Незагроможденный чистый дизайн

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

12. Прототип (Prototype)

а. Работающий функциональный прототип для тестирования дизайна

б. Не обязан быть полноценным продуктом

13. Тестирование интерфейса

а. Тестирование на ошибки

б. Юзабилити тестирование

в. Тестирование на пользователях

14. Передача в разработку

а. Составление ТЗ

б. Передача в разработку

в. Авторский надзор

Забирайте себе этот план, модифицируйте под свой проект и используйте в работе.

0
5 комментариев
Популярные
По порядку
Dmitriy Podluzny

Все в кучу свалено. И важное и совсем не важное.

Ответить
3
Развернуть ветку
Александр Щербатов

Крутой план) спасибо ☺️

Ответить
1
Развернуть ветку
Igor Shkarin

Спасибо. Было бы круто добавить примеры.

Ответить
1
Развернуть ветку
Vlad

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

Ответить
0
Развернуть ветку
Igor R

Спасибо за статью. Согласен с комментарием про примеры. Для большего эффекта, давайте применим эту теоретическую часть на практике. У меня есть стартап https://cabian.ru/, на главной странице я уже месяц не могу понять как эффектно оформить заголовок h1 - Интернет магазин проектных товаров и услуг (и весь текст что ниже в этом блоке). Подкладывать затененное изображение в фон уже не актуально. Как бы вы сделали, исходя из приведенной теории?

Ответить
0
Развернуть ветку
Читать все 5 комментариев
Digital Horizon вложился в поставщика инфраструктуры для инвестиционных решений WealthKernel в раунде A+ на $ 7 млн

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

Команда WealthKernel
Сооснователь Nginx Игорь Сысоев покинул компанию Статьи редакции

В заявлении он объяснил, что теперь будет проводить больше времени с семьёй и друзьями.

Креативные индустрии будут расти по плану

В РСПП обсудили проект Плана по реализации Концепции развития креативных индустрий, подготовленного Министерством культуры РФ с участием Комитета по интеллектуальной собственности и креативным индустриям и Федерации креативных индустрий.

Российские акции на Мосбирже упали на 6,5%: такого падения за день не было с начала пандемии, больше всех задело банки Статьи редакции

Индекс ещё упадёт, но затем будет «бурный отскок», считают эксперты.

Microsoft объявила о планах купить разработчика игр Activision Blizzard за $68,7 млрд Статьи редакции

Акции игровой компании выросли на 38% на премаркете на фоне новости.

Цены на Wildberries с айфонов выше, чем на компьютере или андроиде

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

Банки Wall Street ожидают более агрессивных действий от ФРС

В США за последние 40 лет потребительская инфляция достигла угрожающих значений

Банкомат «Тинькофф» не засчитал $5000

Ох, и не думал я, что буду просить помощи тут...

Образование, путешествия и благотворительность: на что тратились россияне в новогодние каникулы

Новогодние праздники — один из самых расточительных периодов года. Аналитики CloudPayments выяснили, какие категории товаров были самыми популярными в онлайне с 31 декабря по 9 января.

«Сгоревшая» мечта о финансовой свободе

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

Гендиректор Activision Blizzard Бобби Котик объяснил сотрудникам сделку с Microsoft — это шаг к созданию метавселенной Статьи редакции

Он заявил, что компания за 31 год создала сообщества из сотен миллионов игроков. Следующий шаг — объединить эти сообщества.

null