Дизайн для

недизайнеров
Содержание
1. Когда и Зачем нужен прототип?
2. Как выбрать инструмент прототипирования?
3. Советы по работе с дизайнером
4. Проблемы взаимодействия пользователь-интерфейс
5. Настройки человека
6. Как донести и организовать информацию?
6.1. 4 Принципа дизайна
6.2. 10 Эвристик Юзабилити
6.3. Метрики Юзабилити
7. Практика
8. Рекомендации по контентам-ивентам
Прототипы
Зачем нужен прототип

• Это быстро
• Легко зафиксировать идею
• Не жалко выбросить и сделать новое
• Легко протестировать
• Можно использовать как основу для
будущего дизайна
Когда нужен прототип

• Продать идею во время презентации

(клиенту, команде, стейкхолдерам)
• Протестировать решение на
пользователях
• Утвердить концепт внутри команды
• Протестировать логику
Как выбрать инструмент
прототипирования

• Время на изучение
• Командная работа
• Доступность
• Уровень детализации
• Юзабилити тестирование
Как выбрать инструмент
прототипирования
Как выбрать инструмент
прототипирования
Как выбрать инструмент
прототипирования
Как выбрать инструмент
прототипирования
Как выбрать инструмент
прототипирования
• Время изучения: < 20 мин
• InVision (только Mac), Marvel, Moqups,Balsamiq, Miro

• Время изучения: > 30 мин

• Sketch (только Mac), Adobe XD, Figma (в браузере),
Flinto (анимация), Principle (анимация)

• Время изучения: > 60 мин

• Axure, Origami, Framer (код)
Советы по взаимодействию с
дизайнером

• Сообщайте о задаче\проблеме, а не решении

• Сообщайте контекст
• Прорабатывайте кейсы (чек-лист кейсов )
• Делайте демо дизайна разработчикам
Советы по взаимодействию с
дизайнером
Я и дизайн

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

• Проще относишься к дизайну
• Выбор оптимального варианта решения
• Больше интервью и а/б-тестов
• Учишься не замыкать дизайн на себе
Вопросы
Дизайн для недизайнера
Проблемы взаимодействия
пользователь-интерфейс
Нет ориентира на цели
пользователей

Вместо того, чтобы делать программы,

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

Общаясь с программой, пользователь думает,

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

Самая важная личная цель — сохранить

достоинство, не дать почувствовать себя глупо.
Настройки человека
Основные потребности
Как воспринимает информацию
E,F и Z паттерны чтения
E,F и Z паттерны чтения
E,F и Z паттерны
чтения
Как донести и
организовать информацию
Как донести и организовать
информацию
Зачем?
Зачем знать об организации и донесении информации?

● управлять вниманием пользователей

● уменьшить нагрузку (визуальную, когнитивную,
моторную)
● чтобы улучшить опыт взаимодействия человека с
программой
Дизайн, юзабилити —
это...
Дизайн — это вариант решения проблемы пользователя в
продукте.

Юзабилити — это степень эффективности и

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

Работают при помощи:

- 4 Принципа дизайна
- 10 Эвристик юзабилити
4 принципа дизайна
Принципы дизайна
На английском запоминается проще - CRAP :

- Contrast
- Repetition
- Alignment
- Proximity

На русском:

- Контраст
- Повтор
- Выравнивание
- Приближенность
Принципы дизайна:
Контраст
1. Контраст (Contrast)
Не располагать рядом друг с другом похожие элементы. Если
элементы просто неодинаковы (отличаются гарнитурой, цветом,
размером, толщиной линий, формой и т. д.), необходимо сделать
их очень разными.
Принципы дизайна: Контраст
Принципы дизайна:
Выравнивание
2. Выравнивание (Alignment)
Ни один элемент страницы не должен занимать случайное
место. Каждый нуждается в визуальной связи с соседними.
Благодаря этому страница выглядит ясно и организовано.
Принципы дизайна:
Выравнивание
Принципы дизайна:
Повтор
3. Повтор (Repetition)
Визуальные элементы дизайна (цвета, фигуры, текстуры,
пространственные пропорции, толщина линий, концептуальные
решения) должны повторяться. Это структурирует работу и
усиливает ее стилистическую целостность.
Принципы дизайна: Повтор
Принципы дизайна:
Приближенность
4. Приближенность (Proximity)
Связанные между собой элементы следует группировать. Тогда
они образуют один визуальный элемент, а не рассеиваются по
странице. Это помогает организовать информацию, уменьшая
беспорядок и помогая читателю увидеть структуру документа.
Принципы дизайна:
Приближенность
10 Эвристик
юзабилити
Эвристики юзабилити

Эвристика — проверенный на практике алгоритм.

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

Якоб Нильсен (крутой чувак из мира юзабилити)

сформулировал 10 эвристик в 1990 году, но, несмотря на
прошедшие годы, они не теряют своей актуальности.
Эвристики юзабилити.
Правило 1
1. Информированность о состоянии системы (Visibility of
system status)

Пользователь всегда должен ориентироваться и хорошо

понимать, что происходит в системе. Для этого необходима
полноценная и быстрая обратная связь.
Эвристики юзабилити.
Правило 1
Эвристики юзабилити.
Правило 2
2. Схожесть системы с реальным миром (Match between
system and real world)

Система должна общаться с пользователем на понятном ему

языке. Использование слов, фраз и понятий, знакомых
пользователю в реальном мире, намного предпочтительнее,
чем использование специализированных терминов.
Эвристики юзабилити.
Правило 2
Эвристики юзабилити.
Правило 3
3. Свобода действий и контроль (User control and freedom)

Пользователь должен иметь возможность быстро исправить

ошибку. Система должна поддерживать возможность отмены и
повтора любого действия.
Эвристики юзабилити.
Правило 3
Эвристики юзабилити.
Правило 4
4. Единообразие и стандарты (Consistency and
standards)

Система должна быть однородна. Единство функций,

обозначений и понятий в рамках всей системы.
Эвристики юзабилити.
Правило 4
Эвристики юзабилити.
Правило 5
5. Предотвращение ошибок (Error prevention)

Предвидеть и устранить возможность

совершения ошибок заранее — лучше, чем
придумывать красивые сообщения об ошибках
впоследствии.
Эвристики юзабилити.
Правило 5
Эвристики юзабилити.
Правило 6
6. Узнавание, а не вспоминание (Recognition rather the
recall)

Используйте узнаваемые обозначения и сценарии. Не

заставляйте пользователя думать, как правильно
пользоваться системой, запоминать большое количество
объектов, действий.
Эвристики юзабилити.
Правило 6
Эвристики юзабилити.
Правило 7
7. Гибкость и эффективность использования
(Flexibility and efficiency of use)

Функции, не видимые новичкам, зачастую могут

ускорить процесс взаимодействия опытных
пользователей с сайтом. Упрощайте функции, которыми
ваши клиенты пользуются чаще всего.
Эвристики юзабилити.
Правило 7
Эвристики юзабилити.
Правило 8
8. Эстетика и минимализм (Aesthetic and minimalist design)

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

должны быть только нужные и полезные элементы, которые
помогают пользователю в решении его задач.
Эвристики юзабилити.
Правило 8
Эвристики юзабилити.
Правило 9
9. Понимание проблем и их решение (Help users with
errors)

Сообщения об ошибках должны быть выражены простым

языком (никакого кода), точно указывать на проблему и
предлагать её решение.
Эвристики юзабилити. Правило 9
Эвристики юзабилити.
Правило 10
10. Помощь и документация (Help and documentation)

Даже если система может использоваться без документации,

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

1. Продуктивность
● время выполнения задания
2. Эффективность
● успешность выполнения задания
● частотность проблем
3. Удовлетворенность
● удовлетворенность
Метрики юзабилити Prom

1) Продуктивность:
- время на заполнение
- кол-во кликов
2) Эффектинвость:
- кол-во ошибок
- кол-во заполненных полей
- доля успешных чекаутов
3) Удовлетворенность
- оценка пользователей после заказа
Вопросы?
Практика
Практика
● Делимся на 3 команды (Youtube (app), Zoom и Facebook
Messenger)
● Находим примеры 4-х принципов дизайна (5 минут)
● Находим примеры 5-и евристик юзабилити (5 минут)
● Презентуем (15 минут)
Рекомендации по
контентам-ивентам
Книги
Youtube-каналы +
подкасты
1. Школа менеджмента Яндекса (+ Школа дизайна)
2. ProductSense (Product Mindset)
3. Product & Growth Show
4. Клуб анонимных продакт менеджеров
5. Большая рыба
6. Fedoriv
7. Big Money
Telegram-каналы

1. Product & Growth Chat

2. Лавка продуктовая
3. Product Sense Chat
4. Zamesin
5. Kyivux
Общение

1. Product Coffee
2. UX Coffee
3. Goort
Домашнее
задание
Домашнее задание

1) Перепроверить свои проекты

2) Пройти тест - https://userinyerface.com/game.html
Спасибо!
Спасибо за внимание!

Facebook