Александр Лисовский - Проектирование интерфейсов на уровне эскизов

Проектирование
для
людей,

а
не
для
устройств

интерфейсов

на
уровне
эскизов

Александр
Лисовский

Утренние
чтения
Что
успел
…

Hope.ua

Coming
soon

i`m
hope…

Что
успел
…

Шаблон
сайта
общины
Что
успел
…

Давайте
сделаем

сайт
/
мобильное
приложение!

С
чего
начать?

h@p://www.slideshare.net/ﬂing/designing-‐mobile-‐experiences?from_search=3

Идея


Идея

Цель


Идея

Цель

Стратегия


Идея

Цель

Стратегия

Выбор
платформ


Идея

Цель

Стратегия

Выбор
платформ

UX
дизайн


Идея

Цель

Стратегия

Выбор
платформ

UX
дизайн

Прототип


Идея

Цель

Стратегия

Выбор
платформ

UX
дизайн

Прототип

Разработка


Идея

Цель

Стратегия

Выбор
платформ

UX
дизайн

Прототип


Тестирование


Идея

Цель

Стратегия

Выбор
платформ

UX
дизайн

Прототип


Тестирование

Усовершенствование

…а
в
жизни:

«Начнем
работу
с
дизайна!»

Когда
дизайн
важнее
…

Персонажи

А.
Купер
«Психбольница
в
руках
пациентов»

Самый
эффективный

инструмент
проектирования

взаимодействия

исключительно
прост:

это
точное
описание

пользователя
продукта

и
его
целей

А.
Купер
в
руках

Персонажи
–
не
реальные
люди,
но
они
представляют

реальных
людей
в
процессе
проектирования.
Это

гипотетические
архетипы
реальных
пользователей.

Будучи
воображаемыми,
они,
тем
не
менее,

определяются
достаточно
жестко
и
точно.

На
практике
мы
не
столько
«выдумываем»
персонажи,

сколько
обнаруживаем
их
в
качестве
побочного

продукта
процесса
расследования.
Но
мы

действительно
выдумываем
их
имена
и
личные

сведения.

А.
Купер
в
руках

Создаем
персонажи
для
сужения
диапазона

конечных

Представьте,
что
проектируете
автомобиль,

удовлетворяющий
вкусам
широких
масс.

Мамочке
-‐
безопасная,
надежная
машина,
просторная,
с

большими
дверями,
для
перевозки
детей,
собак,
пакетов
с

покупками
и
т.
д.

Плотнику
-‐
крепкий
полноприводный
пикап,
чтобы
в
него

поместились
лестницы,
материалы.

Младший
руководящий
работник
видит
себя
в
машине

спортивного
типа
с
мощным
двигателем,
жесткой
подвеской,

откидным
верхом
и
–
места
в
машине
должно
хватать
только
на

двоих.

А.
Купер
в
руках

Проектируем
для
одного

А.
Купер
в
руках

Всякий
раз,
расширяя
функциональность,
чтобы
охватить
еще

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

виде
лишних
возможностей
и
органов
управления
программой

на
пути
всех
прочих

Попытка
угодить
слишком
многим
может
убить
продукт,

хороший
в
других
отношениях.

Однако
если
спроектировать
интерфейс
с
учетом
одного

персонажа,
ничто
не
сможет
встать
между
этим
персонажем
и

абсолютным
счастьем.

А.
Купер
в
руках

Разминка
для
ума:

Кто
является
персонажами

сайта
церковной
общины?

1.  Человек
не
из
вашей
церкви,

который
ищет
ответы
на
сокровенные

вопросы.

Источник:
bible.com.ua,
hope.ua

2.  Член
церкви,
который
интересуется

жизнью
общины,
событиями
в
мировой

церкви
и
мероприятиями
в
своем
городе.

Разминка
для
ума:

Какие
у
наших

персонажей
цели?

1.  Ознакомиться
с
учением,
основами
веры,

найти
контакты
ближайшей
общины,

возможность
задать
вопрос/получить

ответ

2.  Мероприятия
в
моем
городе/общине,

фотоотчеты,
планы,
анонсы,
как
живет

церковь
в
мире,
что
нового?

80%
участников
фокус-‐группы
возненавидели
новый
пикап
Dodge
Ram.

Но
после
выхода
на
рынок
машина
стала
бестселлером,
потому
что
остальные

20%
в
нее
влюбились.
Любовь
людей
к
продукту,
пусть
даже
этих
людей
не

очень
много,
–
вот
ключ
к
успеху.

А.
Купер
в
руках

А.
Купер
в
руках

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

самолетов.
Чистота
дизайна
продукта
принесла
этой
группе
пользователей

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

такой
чемодан
решает
и
их
проблемы
тоже.

Гуттаперчевый
пользователь

А.
Купер
в
руках

Программисты
писали
и
пишут
бессчетные
множества
программ
для

этого
мифологического
гуттаперчевого
потребителя.

Когда
программист
находит
удобным
познакомить
с

файловой
системой
Windows
для
поиска
нужной
информации,
то

определяет
как

способного
адаптироваться,
продвинутого,
образованного
в
области

компьютеров;

в
других
случаях,
когда
программист
находит
удобным
провести

через
сложный
процесс
посредством
бестолкового

мастера,
то
определяет
как

покладистого
наивного
новичка.
для
гуттаперчевых

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

лицемерно
презирая
«юзера».

Реальные
пользователи
не
эластичны.

А.
Купер
в
руках

Персонаж
должен
быть
конкретным

по
мере
конкретизации
персонажи
теряют
эластичность.
По

мере
обрастания
Эмили
конкретными
отличительными
чертами

происходит
замечательная
вещь:
она
становится
в

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

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

Реальные
люди
представляют
огромный
интерес,
как
база
для

исследований,
однако
для
самого
процесса
проектирования

они
обычно
бесполезны,
а
часто
и
пагубны.
Особенности

отдельного
индивидуума
не
характерны
для
группы.

Описание
должно
быть
подробным,
а
не
идеальным

Важнее
детальность
персонажа,
а
не
идеальность
ее
описания

Реалистичный
взгляд
на
уровень
подготовленности

Продвинутые
/
Образованные
/
Когнитивное
сопротивление

А.
Купер
в
руках

Персонажи
закрывают
споры
о
функциях

Набор
становится
системой,
обладающей

мощным
свойством
объяснять
наши
решения
в
области

Более
того,
это
как
прожектор,

высвечивающий
для
разработчиков,
маркетологов,

руководителей
очевидную
правильность
наших

решений
по
проектированию.

Персонаж
а
не
покупателя

Если
конечный
пользователь
доволен
и
имеет

работать
продуктивно,
это
успех.

А.
Купер
в
руках

Ключевые
персонажи

В
каждом
наборе
есть
хотя
бы
один
ключевой

персонаж.
Эта
личность
находится
в
фокусе
процесса


Ключевой
персонаж
отличает
потребность
в
удовлетворении,

недостижимом
при
помощи
интерфейсов,
спроектированных

для
любого
другого
персонажа.
Для
ключевого
персонажа

всегда
существует
отдельный
интерфейс.

А.
Купер
в
руках

Алексей

22
года

Семейное
положение:
встречается
уже
второй
год

с
девушкой
Катей.

Профессия:
копирайтер

Активно
использует:
Instagramm,
Pinterest,
Twi@er,

Foursquere,
Facebook

Пользуется:
ноутбуком
с
Windows,
iPhone
4s,
Canon
D600.

Много
путешествует,
часто
фотографирует
в
поездках
(чаще

на
iPhone4s).
Нет
времени
наводить
порядок.
Хватает
только

времени
слить
на
внешний
винчестер
и
в
лучшем
случае

обозначить
в
названии
дату
и
тезисно
место
или
событие.

Никогда
не
печатает
фотографии.

Хранит
на
внешнем
диске.
Использует
только
online.

Мы
про
эскизы

сегодня
поговорим?

h@p://www.youtube.com/watch?v=ﬂJtdkR1P9I

Скетчи

Думать
Документировать
Экспериментировать

Объяснять

и
общаться

Быстрее
потерпеть

неудачу

Найти
верное

решение

Зачем?

h@p://konigi.com/book/sketch-‐book/

Я
не
умею
рисовать


Чем
быстрее,
тем

продуктивнее!

Чем
«страшнее»,

тем
лучше!

Чем
больше
скетчей,

тем
больше
идей!

Не
критикуйте!

Не
стремитесь

к
совершенству!

Не
фокусируйтесь

на
деталях!


Че?


Disney
Concert
Hall
(Carol
Highsmith)


Исследовательский
скетч

+

Много
разновидностей

-‐  Никому
не
понятно

-‐  Низкая
детализация

«Изящный»
скетч

+
Более
реалистичный

+
Показываем
другим

-‐
Долго
делать


h@ps://docs.google.com/ﬁleview?id=0B916EDb6727eMGJlNjdhOTEtMmYxNS00OTQ4LTkxMTUtZmZjMjIzYmI4NTMw&hl=en

h@p://hotdesignfor.us/news/2010/04/01/shablony-‐dlya-‐eskiza-‐stranic-‐sajta-‐na-‐bumage/

Примитивы

Формы

Линии

Рыба
/
Lorem
ipsum
/
____
__

Одевшись,
Степан
Аркадьич

прыснул
на
себя
духами,
выправил

рукава
рубашки,
привычным

движением
рассовал
по
карманам

папиросы,
бумажник,
спички,
часы

с
двойной
цепочкой
и
брелоками

и,
встряхнув
платок,
чувствуя
себя

чистым,
душистым,
здоровым
и

физически
веселым,
несмотря
на

свое
несчастье,
вышел,
слегка

подрагивая
на
каждой
ноге,
в

столовую,
где
уже
ждал
его
кофе
и,

рядом
с
кофеем,
письма
и
бумаги

из
присутствия.

Lorem
ipsum
dolor
sit
amet,

consectetur
adipiscing
elit.
Maecenas

adipiscing
metus
semper
libero

adipiscing
quis
suscipit
diam
mollis.

E§am
sit
amet
justo
quis
mauris

viverra
condimentum
at
sit
amet

diam.
Fusce
arcu
est,
fermentum
id

ultrices
non,
moles§e
ut
odio.

Ves§bulum
auctor
scelerisque
elit

non
vulputate.
Quisque
suscipit

ullamcorper
tellus.
Proin
id
ornare

tellus.
Morbi
suscipit
sapien
et
ante

eleifend
dignissim

Lorem
ipsum

Lorem
ipsum
представляет
собой

искажённый
отрывок
из

философского
трактата
Цицерона

«О
пределах
добра
и
зла»,

написанного
в
45
году
до
нашей

эры
на
латинском
языке.
Впервые

этот
текст
был
применен
для

набора
шрифтовых
образцов

неизвестным
печатником
в
XVI

веке.

h@p://ru.wikipedia.org/wiki/Lorem_ipsum

Lorem
ipsum
dolor
sit
amet,

consectetur
adipiscing
elit.
Maecenas

adipiscing
metus
semper
libero

adipiscing
quis
suscipit
diam
mollis.

E§am
sit
amet
justo
quis
mauris

viverra
condimentum
at
sit
amet

diam.
Fusce
arcu
est,
fermentum
id

ultrices
non,
moles§e
ut
odio.

Ves§bulum
auctor
scelerisque
elit

non
vulputate.
Quisque
suscipit

ullamcorper
tellus.
Proin
id
ornare

tellus.
Morbi
suscipit
sapien
et
ante

eleifend
dignissim

h@p://konigi.com/book/sketch-‐book/why-‐we-‐sketch

если
не
использовать
персонажи..

Зачем
использовать
скетчи?

•  Скетчи
дают
делать

ошибки
и
мыслить
открыто

•  Скетчи
могут
создаваться
на
лету:
много

идей
за
минимальный
промежуток

времени

•  Скетчи
позволяют
фиксировать
идеи,
не

погружаясь
в
детали

•  Их
легко
обсуждать,
ими
легко
делиться,

их
легко
критиковать!

•  Это
весело!


Книги:

1.Bill
Buxton
“Sketching
User
Experiences:
Ge¬ng
the
Design
Right
and
the
Right

Design
”.
–
Morgan
Kaufmann;
1
edi§on,
2007

2.
Dan
Roam
“The
back
of
the
napkin”.
-‐
Por¯olio
Hardcover;
Expanded
edi§on,

2009

Статьи
и
презентации:

h@p://uxdesign.smashingmagazine.com/2011/12/13/messy-‐art-‐ux-‐sketching/
-‐

создание
скетчей
при
помощи
слоев

h@p://www.slideshare.net/pboersma/good-‐design-‐faster-‐at-‐ux-‐soﬁa
-‐

презентация
Peter
Boersma

h@p://www.uxbooth.com/ar§cles/tools-‐for-‐sketching-‐user-‐experiences/

h@p://www.uxma@ers.com/mt/archives/2010/05/sketches-‐and-‐wireframes-‐and-‐
prototypes-‐oh-‐my-‐
crea§ng-‐your-‐own-‐magical-‐wizard-‐experience.php

h@p://www.slideshare.net/pubsmith/sketching-‐interfaces-‐workshop-‐
interac§ons12-‐dublin

Создание
интерактивных
скетчей:
ссылка
на
описание
программы

h@p://www.infragis§cs.com/products/indigo-‐studio/?
gclid=CID29LeD27QCFeR4cAodZ0kA2A


Давайте
что-‐то
сделаем?

Утренние
чтения

..а
еще
примеры?

Если
нет
денег/времени
на
приложение?

(адаптивная
верстка)

RESPONSIVE
WEB
DESIGN

by
ETHAN
MARCOTTE

Можно
повторить?

Сначала…

Завтра
поговорим

про
образовательные
курсы

..и
наш
новый
проект

библейских
историй
для
детей

Александр
Лисовский

Менеджер
продукта
в
ZZWolf

UX,
UI
дизайнер

(063)
304-‐54-‐85

alexander.lisovsky@gmail.com

facebook.com/alexlisovsky

pinterest.com/alexlisovsky

Александр Лисовский - Проектирование интерфейсов на уровне эскизов

Recommended

Recommended

More Related Content

Similar to Александр Лисовский - Проектирование интерфейсов на уровне эскизов

Similar to Александр Лисовский - Проектирование интерфейсов на уровне эскизов (20)

More from GAiN@ESD

More from GAiN@ESD (20)

Александр Лисовский - Проектирование интерфейсов на уровне эскизов