Проектирование интерфейсов

Type something

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

Чтобы было просто.

+ Экономия денег, времени и сил разработчиков

Экономить деньги и времяМаксимально быстрое и простое прохождение сценариеПолучить пользователь максимально быстро и легко достиг цели

Этап проектирования в разработке

АналитикаКонцепция Проектирование Дизайн Верстка Разработка

Этап проектирования в разработке

Аналитика Проектирование Дизайн Верстка Разработка+Концепция

Роль проектировщика в команде

АналитикАналитик

ПроектировщикДизайнер

Проектировщик

Дизайнер

Общительныйверстальщик

ДизайнерАналитик

Проектировщик

С чего начать

Идея, концепцияАудитория

Изучаем предметную среду

Проводимконтрольную закупку

Общаемся с ЦА

и экспертами

С чего начать

Идея, концепцияАудитория

Детализация ЦАПерсонажи

Детализируем ЦА

1. Возраст2. Пол3. Род занятий4. Уровень компьютерной грамотности5. Частота покупок в интернете6. Уровень доходов7. Характер8. Семейное положение9. ...

Димон

С чего начать

Идея, концепцияАудитория

Детализация ЦАПерсонажи

Сценарии использования

Разрабатываем сценарии

Примеры задач

1. Мне срочно нужен зеленый шарф оттенка пихты2. Просто смотрю периодически новинки, слежу за модой3. Хочу чтоEнибудь новенькое, ничего конкретного4. Я швея, ищу классные модели, чтобы себе сшить5. Не могу дождаться доставки, куда обращаться 6. Привезли платье с пятном, кому нажаловаться

С чего начать

Обработкаобратной связи

Идея, концепцияАудитория

Детализация ЦАПерсонажи

Сценарии использования

Обрабатываем обратную связь

Учитывайте обратную связь

Итоги аналитикиИтоги аналитики

Описание аудитории, персонажи

Сценарии использования сайта

Список пожеланий и проблем

Сценарии Сценарии

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

Фичи Фичи

Сценарии Сценарии Фичи Фичи Страницы Страницы

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

На каких страницах логичнее разместить эти возможности?

Список страниц Список страниц Структура сайта Структура сайта

Заголовок 1Заголовок 2

Главная .> Каталог товаров .> Карточка товара

ЛогоРаздел 1 Раздел 2 Раздел 3

Ориентация в пространствеОриентация в пространстве

1. Что это за сайт?2. На какой странице я нахожусь? 3. Как отсюда выйти?4. Куда я могу перейти?5. Как вернуться назад?

Димон

Что надо знать пользователю на этой странице?Что надо знать пользователю на этой странице?

Визуальные принципы Визуальные принципы

Логически связанные элементы должны быть связаны визуально

ВОЙНЕ

ДА

НЕТ

МИРУ

ВОЙНЕ

ДА

НЕТ

МИРУ

ОдеждаОбувьАксессуарыРемниЗонтыКошельки

ОдеждаОбувьАксессуары

9 Ремни9 Зонты9 Кошельки

Одежда

Обувь

Аксессуары9 Ремни9 Зонты9 Кошельки

1 2 3

Визуальные принципы Визуальные принципы

Одинаковое поведение = одинаковый внешний вид

Ссылка Ссылка

Визуальные принципы Визуальные принципы

Подсказывайте, какие элементы кликабельные

Сохранить Сохранить

Значение Значение

Визуальные принципы Визуальные принципы

Выделяйте важное 6 размером шрифта, контрастом, отступами

Очень важноеМенее важноеСовсем не важное

Заказать

Общие принципы Общие принципы

1. Минимализм. Идеальный интерфейс – тот, которого нет.

2. Не заставляйте пользователя думать. Интерфейс должен быть однозначным.

3. Давайте информацию контекстно – когда она нужна.

Программы для прототипированияПрограммы для прототипирования

SketchPhotoshopFireworksAxureInDesignFlairBuilderBalsamiq Mockups…

VS

Итоговый прототип содержитИтоговый прототип содержит

1. Все страницы

2. Все элементы

3. Состояния элементов

4. Ошибки, текстовки

5. Логику поведения и переходов

Как оценивать прототипКак оценивать прототип

Чем раньше вы проверяете гипотезу, тем лучше.

Чем больше вы проверите гипотез, тем лучше.

1. Общее впечатление и понимание страницы

2. Нет лишних или двусмысленных элементов

3. Сверяйте с аналитикой – проходите сценарии

ПрограммыПрограммы

Запись аудио и видео во время тестирования

5 Camtasia для Windows5 ScreenFlow для Mac OS

Создание кликабельного прототипа

5 Axure, FlairBuilder, Balsamiq 5 прототипирование+кликабельность5 Invision 5 только кликабельность. Загружаете картинки и расставляете ссылки между ними.

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

+ Быстрый способ получить оценку прототипа+ Оценка “из первых рук”+ Выявляет 80% проблем+ Не требует специальных навыков и программ

Примеры вопросовПримеры вопросов

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

Что почитатьЧто почитать

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