More Related Content Similar to Как спроектировать успешное приложения под iPhone Similar to Как спроектировать успешное приложения под iPhone (6) More from Artem Kuznetsov More from Artem Kuznetsov (8) Как спроектировать успешное приложения под iPhone1. Uexpert.ru
Как
спроектировать
успешное
приложение
для
iPhone.
Мастер-‐класс
Артём
Кузнецов
я
рси
ве
я
ка
от
www.uexpert.ru
info@uexpert.ru
р
ко
2. Об
авторе
Членство
в
профессиональных
и
научных
сообществах
• ACM,
ACM
SIGCHI,
RusCHI
Образование
• Казанский
Государственный
Университет,
факультет
ВМК,
диплом
прикладного
математика
(1995)
Артём
Кузнецов
Автор
проекта
Uexpert • Школа
Дизайна
при
Казанской
Архитектурной
Академии,
сертификат
дизайнера
(1998)
• C
1999
года
занимается
проектированием
и
• Государственная
Академия
Профессиональной
тестированием
пользовательских
Переподготовки
и
Повышения
Квалификации
интерфейсов
Руководящих
Работников
и
Специалистов
Инвестиционной
Сферы,
• 2006
-‐
2007
создал
и
руководил
отделом
государственный
диплом
психолога-‐
проектирования
пользовательских
социолога
(2004)
интерфейсов
компании
Acronis
Inc.
• CooperU,
компания
Алана
Купера,
• 2008
создал
и
руководил
отделом
сертификат
курса
Interaction
Design
Practicum
проектирования
пользовательских
(2006)
интерфейсов
компании
Яндекс.
• CHI-‐2008
международная
конференция:
• С
октября
2008
года
является
независимым
Persona
life
circle
и
Creating
good
usability
юзабилити
экспертом
tests
(2008)
...
2 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
3. Программа
мастер-‐класса
– Почему
мобильные
приложения?
– Успешное
мобильное
приложение
– Пример
неудачного
взаимодействия
с
пользователями
– Обзор
процесса
проектирования
– Пример
проведения
пользовательского
исследования
– Отличие
проектирования
мобильных
приложений
от
обычных
десктоп
приложений
3 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
4. Программа
мастер-‐класса
(2)
– Стандарты,
фишки,
фичи
– Проектируем
главное
меню
– Снижаем
порог
вхождения
– Прогнозы
развития
4 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
5. Чего
не
будет
на
мастер-‐классе,
но
будет
на
тренинге
– Средства
прототипирования
для
iPhone
– Когда
не
стоит
создавать
приложение
под
iPhone
– Версия
для
iPad,
отличия,
ограничения
– Success
stories
– Новшества
iOS
v.5
– Практикум
проектирования
– и
многое
другое...
5 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
6. Почтим
память
Стива
Джобса
6 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
8. Почему
мобильные
приложения?
~50%
покупателей
используют
мобильные
телефоны
при
совершении
покупок
Данные
исследования
компании
“Arc
Worldwide”
основаны
на
опросе
более
1800
покупателей
в
США.
2011
год.
8 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
9. Успешное
мобильное
приложение
9 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
10. Успешное
мобильное
приложение
Какими
качествами
должно
обладать
успешное
мобильное
приложение?
10 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
11. Определение
Успешное
мобильное
приложение:
• востребовано
на
рынке,
• выполняет
свое
функциональное
назначение,
• доставляет
удовольствие,
• рекомендуют
друзьям
и
знакомым.
11 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
12. Успешное
мобильное
приложение
(2)
Успешное
мобильное
приложение
12 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
13. Успешное
мобильное
приложение
(3)
Успешное
мобильное
приложение
создаёт
у
пользователя
позитивный
опыт.
13 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
14. Успешное
мобильное
приложение
(4)
Для
создания
позитивного
опыта
необходимо
учитывать
особенности
восприятия
человека
и
его
ожидания
от
взаимодействия
с
мобильным
устройством.
14 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
16. Пиктограмма
приложения
Приложение
для
заказа
туров
16 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
17. Некоторые
бизнес-‐цели
приложения
1.Продажи
туристических
услуг
частным
клиентам
2.Создание
условий
для
высокой
конверсии
посетителей
в
покупатели
3. Стимулирование
многократных
заказов
4.Создание
позитивного
имиджа
Достигаются
ли
данные
цели
в
приложении?
17 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
18. Описание
персонажа
и
сценария
Персонаж
• Менеджер
по
продаже
бытовой
техники,
• 30
лет,
• гражданский
брак,
• живёт
в
Нижнем
Новгороде.
• уровень
компьютерной
грамотности
–
средний
• уровень
знаний
смартфона
–
средний
Сценарий
• Поиск
тура
на
двоих
на
Гоа,
на
неделю,
курорт
не
важен,
отель
2-‐3
звезды,
главное
–
найти
дешёвый
тур.
18 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
19. Пиктограмма
приложения
Входим
19 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
20. Экран
приложения
при
загрузке
Что
это?
не
менее
15
секунд
на
экране
чернота...
20 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
21. Экран
приложения
при
загрузке
2
Почему
пусто?
не
менее
60
секунд
на
экране
пусто...
Не
работает?
21 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
22. Экран
приложения
при
загрузке
3
Что
произойдёт
при
нажатии?
Сколько
здесь
предложений?
Как
узнать
цену
в
Как
отсортировать
рублях? по
цене?
Дата
заезда
плохо
различима...
22 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
23. Страница
тура
Что
Сколько
здесь
произойдёт? отзывов?
Есть
ли
какая-‐то
комплексная
оценка?
23 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
24. Страница
тура
Посмотрю
фотографии
отеля
24 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
25. Страница
тура
Что
это
значит?
при
нажатии
на
фотографию
строка
становится
малиновой,
но
ничего
не
происходит...
25 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
26. Страница
тура
Понравилось!
Где
кнопка
“Заказать”?
26 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
27. Страница
тура
Сколько
здесь
отзывов?
Есть
ли
какая-‐то
комплексная
оценка?
Как
понять,
скольким
он
понравился?
27 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
28. Страница
тура
Как
перейти
к
следующему
отзыву?
28 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
29. Страница
тура
Не
видно!
Что
это
значит?
при
нажатии
на
тур
строка
становится
малиновой,
но
ничего
не
происходит...
29 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
30. Страница
тура
Я
лично
не
знаю
флага
Индии...
здесь
несколько
экранов
с
флагами
стран,
порядок
сортировки
засекречен
30 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
31. Страница
тура
На
что
влияет
этот
выбор?
31 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
32. Страница
тура
Где
Нижний
Новгород?
Непонятно
где
центральный
офис,
можно
ли
заказать
дистанционно
и
Куда
мне
получить
потом
по
звонить? почте
или
в
аэропорту...
32 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
33. Страница
тура
А
где
тур?
Клиент
ожидает
увидеть
калькулятор
рассчета
стоимости
Где
рассчет
тура,
а
получает
форму
стоимости? обратной
связи...
Причем
непонятно
что
сюда
писать
и
когда
я
получу
ответ?
33 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
34. Некоторые
бизнес-‐цели
компании
1.Продажи
туристических
услуг
частным
клиентам
2.Создание
условий
для
высокой
конверсии
посетителей
в
покупатели
3. Стимулирование
многократных
заказов
4.Создание
позитивного
имиджа
Достигаются
ли
данные
цели
в
приложении?
Нет!
34 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
35. Выводы
1.Реальная
продажа
не
происходит
(Клиент
мог
закрыть
приложение
несколько
раз
на
разных
стадиях)
2.У
клиента
остаются
неоправданные
ожидания
и
возникает
разочарование.
3. Имидж
компании
в
глазах
клиента
после
этого
нельзя
назвать
позитивным.
Неудивительно,
что
в
AppStore
это
приложение
получило
более
тысячи
неудовлетворительных
оценок!
35 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
37. Обзор
процесса
проектирования
Сбор
данных
Исследование
Анализ
Концептуальное
проектирование
Синтез
Детальное
проектирование
Сопровождение
разработки
Авторский
надзор
Поддержка
внедрения
37 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
38. Обзор
процесса
проектирования
(2)
Исследование
>
Вопросы
Бизнес-‐цели? Кто
пользователи?
Какие
у
нас
есть
Цели
и
задачи
функциональные
возможности? пользователей?
Какие
у
нас
есть
ограничения
Контекст
(финансовые,
временные,
техн.)? использования?
38 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
39. Обзор
процесса
проектирования
(3)
Исследование
>
Инструменты
и
методы
• Интервью
• Анкетирование
• Полевые
наблюдения
• Фокус-‐группы
• Анализ
документации,
логов
• Конкурентный
анализ
• Анализ
тенденций
• Моделирование
набора
персонажей
• Создание
контекстных
и
ключевых
сценариев
• и
др.
39 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
40. Обзор
процесса
проектирования
(4)
Синтез
>
Вопросы
Из
каких
частей
будет
Как
выглядит
каждый
состоять
приложение? экран
приложения?
Как
эти
части
будут
взаимо-‐ Что
будет
по
нажатию
на
действовать
друг
с
другом? кнопку
X?
Частота
и
важность
запрашиваемого
функционала?
40 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
41. Обзор
процесса
проектирования
(5)
Синтез
>
Инструменты
и
методы
• Формирование
структуры
• Группировка
и
описание
элементов
• Прототипирование
• Валидация
прототипов
• Юзабилити-‐тестирование
прототипов
• Графическое
оформление
• Использование
дизайн-‐паттернов
• Использование
проверочных
списков
• и
др.
41 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
42. Обзор
процесса
проектирования
(6)
Авторский
надзор
>
Вопросы
Не
успеваем
сделать
Насколько
понятным
элемент
управления
X,
получилось
интерфейсное
чем
его
заменить? решение
W?
Как
должна
вести
себя
кнопка
Y? Что
можно
отложить
на
следующий
релиз?
Как
должен
вести
себя
блок
Z
при
смене
ориентации
экрана?
42 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
43. Обзор
процесса
проектирования
(7)
Авт.
надзор
>
Инструменты
и
методы
• Консультации
разработчиков
• Проверка
результатов
программирования
• Поиск
компромиссных
решений
• Вычитка
текстов,
сверка
со
словарём
пользователя
• Анализ
обратной
связи
• Юзабилити-‐тестирование
• Анализ
статистики
• Исправление
недочётов
в
дизайне
• и
др.
43 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
44. Обзор
процесса
проектирования
(8)
Проектированием
пользовательского
интерфейса
должны
заниматься
профессионалы!
44 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
45. Пример
проведения
пользовательского
исследования
Доступно
в
полной
версии
http://bit.ly/iPhone-‐design
45 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
46. Отличие
проектирования
мобильных
приложений
от
обычных
десктоп
приложений
46 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
47. Отличие
проектирования
мобильных
приложений
от
десктоп
приложений
Нужно
ли
проектировать
для
каждой
платформы
отдельное
приложение?
47 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
48. Отличие
проектирования
мобильных
приложений
от
десктоп
приложений
(2)
• Нужно
выделять
только
основные
задачи,
которые
имеют
смысл
для
их
решения
на
мобильном
устройстве
• Пользователи
компьютеров
и
мобильных
устройств
отличаются,
у
них
разные
цели
и
поведение
48 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
49. Отличие
проектирования
мобильных
приложений
от
десктоп
приложений
(3)
• Не
следует
забывать
про
контекст
использования,
а
именно:
– небольшой
экран:
320x480
или
960x640
(iPhone
4)
– размер
устройства
для
ввода
информации,
а
именно
пальца
пользователя:
не
менее
44x44
пикселя
для
элементов
управления
– возможность
случайного
нажатия
элементов
управления
на
экране,
в
связи
с
чем
предусматривать
защиту
для
потенциально
опасных
операций
49 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
50. Отличие
проектирования
мобильных
приложений
от
десктоп
приложений
(4)
• Не
следует
забывать
про
контекст
использования,
а
именно:
– возможность
внезапного
выхода
пользователя
из
приложения,
что
часто
случается
с
мобильными
приложениями
– ограничение
размера
виртуальной
памяти
– использование
одного
экрана
для
взаимодействия
с
пользователем
в
каждый
момент
времени
– одна
открытая
программа
в
каждый
момент
времени
(корме
iPhone
4)
50 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
51. Отличие
проектирования
мобильных
приложений
от
десктоп
приложений
(5)
• Не
следует
забывать
про
контекст
использования,
а
именно:
– возможность
смены
ориентации
экрана
из
вертикальной
в
горизонтальную
и
наоборот
– возможность
использования
информации
о
месте
нахождения
пользователя,
его
координаты
на
карте
(геолокация)
– возможность
использования
гироскопа
51 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
52. Отличие
проектирования
мобильных
приложений
от
десктоп
приложений
(6)
• Необходимо
переписать
контекстные
сценарии
взаимодействия
пользователей
с
программой
с
учётом
новой
среды
и
изменившегося
набора
задач
• Рекомендуется
использовать
стандартные
для
iOS
элементы
управления
и
способы
работы
с
данными,
описанные
в
гайдлайнах
52 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
54. Стандарты,
фишки,
фичи
• Стандарты
задают
правила
игры
• Хороши
для
быстрого
обучения
работы
с
интерфейсом
• Стандарты
не
предлагают
лучших
решений
и
не
позволяют
придумать
что-‐то
по
настоящему
революционное
54 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
55. Стандарты,
фишки,
фичи
(2)
Нужно
ли
придерживаться
стандартов?
55 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
56. Стандарты,
фишки,
фичи
(3)
Что
не
является
“фишками”?
56 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
57. Стандарты,
фишки,
фичи
(4)
• Фишки
–
нестандартные
решения
задач
пользователя
• Фишки
открывают
пользователю
новые
возможности
• Фишки
дают
ощущение
новизны
• Фишки
делают
взаимодействие
с
приложением
веселым
и
приятным
• Фишки
работают
как
вирусный
маркетинг
57 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
58. Стандарты,
фишки,
фичи
(5)
Обмен
контактами,
картинками
и
прочим
при
помощи
чёканья.
Приложение
"Bump"
By
Bump
Technologies
LLC
58 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
59. Стандарты,
фишки,
фичи
(6)
Какими
“фичами”
можно
пожертвовать?
59 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
60. Проектируем
главное
меню
Доступно
в
полной
версии
http://bit.ly/iPhone-‐design
60 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
61. Прогнозы
развития
61 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
62. Прогнозы
развития
Меньше
глянца,
больше
цвета!
62 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
63. Прогнозы
развития
(2)
Активное
использование
текстур
63 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
64. Прогнозы
развития
(3)
Гладкие
и
чистые
градиенты
и
тени
для
придания
глубины
64 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
65. Прогнозы
развития
(4)
Текстовые
интерфейсы
65 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
66. Прогнозы
развития
(5)
Ваши
версии?
66 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
67. Полная
версия
мастер-‐класса
http://bit.ly/iPhone-‐design
67 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
68. Дополнительные
материалы
–
www.uexpert.ru
Мастер-‐класс
раз
в
месяц
"Золотые
правила
создания
успешных
веб-‐сайтов"
25
октября
(вт)
в
19:00
2,5
часа
cityclass.ru
68 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
69. Более
10
тренингов
–
www.uexpert.ru
Тренинг
"Как
увеличить
конверсию
посетителей
в
покупатели"
—
2
дня
по
заявке
Тренинг
"Золотые
правила
создания
успешных
веб-‐
сайтов"
—
1
день
по
заявке
Тренинг
"Процесс
проектирования
пользовательских
интерфейсов"
—
2
дня
по
заявке
Тренинг
"Создание
концепции
пользовательского
интерфейса
продукта"
—
2
дня
по
заявке
А
так
же
статьи
и
рассылка
69 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
70. Дополнительные
материалы
–
www.uexpert.ru
Отчёты
"Об
исследовании
эффективности
взаимодействия
пользователей
с
веб-‐сайтами"
PDF
файлы,
более
100
страниц,
описано
более
200
ошибок,
цветные
иллюстрации.
Подробности
→
Видео-‐курс
"Золотые
правила
создания
успешных
веб-‐сайтов"
CD-‐диск,
видео-‐запись
высокого
качества,
продолжительность:
2
часа,
содержит
170
слайдов
и
запись
голоса
ведущего.
Заказать
→
70 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
71. Клуб
Успешных
Проектов
Вместе
сделаем
Ваш
проект
успешным!
www.uprojectclub.ru
71 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
72. Спасибо
за
внимание! Uexpert.ru
Ваши
вопросы?
Дополнительная
информация
на
сайте
www.uexpert.ru
72 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов
73. Uexpert.ru
Артём
Кузнецов
info@uexpert.ru
www.uexpert.ru
Успех
вашего
приложения
–
наш
успех!
73 Как
спроектировать
успешное
приложение
под
iPhone
©
2011,
Uexpert
Артём
Кузнецов