Дизайнер Александр Комаров рассказывает о том, как сделать мобильные интерфейсы понятными, приятными и удобными и приводит примеры хороших и плохих приложений для iPhone.

1. Принципы дизайна для
мобильных устройств на
примере Айфона
Александр Комаров, Москва, 2009

2. Сегодня – только о самом
важном
Как угнаться за новыми технологиями?
Как сделать хороший мобильный интерфейс?
Какие ограничения у мобильных пользователей и
как их учесть?
Примеры хорошего и плохого дизайна приложений
для Айфона

3. Cегодня вы не получите
Готовых решений (придется думать самим)
Подробной технической информации.
Супер-секретов (их нет ;-)
Советов по регистрации приложения в AppStore
Описания рабочего процесса
(подходите позже, расскажу лично)

4. Как угнаться за новыми
технологиями?
Частоты процессоров каждый год удваиваются.
Мозг человека не очень сильно изменился со
времен Аристотеля.

5. Сфокусируйтесь на
пользователях, а не на
технологиях

6. Как сделать хороший
мобильный интерфейс?
Забудьте на минутку об интерфейсах
Перестаньте ненадолго думать о мобильных
телефонах...

7. Вспомните о пользователях.

8. Как сделать хороший мобильный интерфейс?
(по шагам)
0 1 2 3
Придумать Адаптировать Учесть Вспомнить о
само интерфейс под контекст и культуре
приложение ограничения окружение
пользователя

9. Как сделать хороший мобильный интерфейс?
0: Вы находитесь здесь
0 1 2 3
Придумать Адаптировать Учесть Вспомнить о
само интерфейс под контекст и культуре
приложение ограничения окружение
пользователя

10. Как сделать хороший мобильный интерфейс?
1: Ограничения пользователя
0 1 2 3
Придумать Адаптировать Учесть Вспомнить о
само интерфейс под контекст и культуре
приложение ограничения окружение
пользователя

11. 1: Ограничения пользователя
Пальцы это не курсор

12. 1: Ограничения пользователя
Сложно нажимать на
маленькие объекты
iFitness App

13. 1: Ограничения пользователя
Ограничения зрения

14. 1: Ограничения пользователя
Слишком мелкий текст

15. 1: Ограничения пользователя
Linked In -VS- Facebook
Мелкий текст Крупные иконки и надписи
Трудно нажимать на меню Пальцем не промахнешься
Слишком много всего Простые варианты выбора

16. 1: Ограничения пользователя
Facebook 1.0 -VS- Facebook 3.0
Какой из вариантов вам кажется проще?

17. 1: Ограничения пользователя
На мониторе все выглядит крупнее

18. Как сделать хороший мобильный интерфейс?
2: Контекст и окружение
0 1 2 3
Придумать Адаптировать Учесть Вспомнить о
само интерфейс под контекст и культуре
приложение ограничения окружение
пользователя

19. 2: Контекст и окружение
Мобильное приложение —
лишь капля в море
Ваше приложение

20. 2: Контекст и окружение
Пример приложения: диктофон

21. 2: Контекст и окружение
Apple -VS- iTalk
Кнопку записи трудно Кнопка записи занимающая
найти и нажать не попав в пол-экрана очень удобная
аварию

22. 2: Контекст и окружение
Apple -VS- iTalk
По маленькой красной После нажатия на кнопку
полоске вверху трудно записи весь интерфейс меняет
понять, что запись началась цвет.

23. 2: Контекст и окружение
Портирование приложений
Fish Tycoon на экране Fish Tycoon на Айфоне
компьютера

24. 2: Контекст и окружение
Нельзя просто уменьшить
десктопное приложение...
Большой Микроскопический

25. 2: Контекст и окружение
...Нужно в добавок убрать
все лишнее...
Фотошоп на компьютере Фотошоп на айфоне

26. 2: Контекст и окружение
...И оставить самое необходимое
Редактор видео на компьютере Редактор видео на айфоне

27. 2: Контекст и окружение
Нас окружают люди и у них тоже
есть мобильники

28. 2: Контекст и окружение
Ping -VS- WhatsApp
Требуется придумать имя Номер телефона в качестве
пользователя идентефикатора пользователя

29. 2: Контекст и окружение
Новые технологии —
новые способы общения

30. 2: Контекст и окружение
Новые способы обмена данными
Mover

31. 2: Контекст и окружение
Новые способы найти друзей
Loopt

32. Как сделать хороший мобильный интерфейс?
3: Культурные различия
0 1 2 3
Придумать Адаптировать Учесть Вспомнить о
само интерфейс под контекст и культуре
приложение ограничения окружение
пользователя

33. 3: Культурные различия
Дизайн должен учитывать
культурные особенности

34. Как сделать хороший мобильный интерфейс?
Спасибо!
0 1 2 3
Придумать Адаптировать Учесть Вспомнить о
само интерфейс под контекст и культуре
приложение ограничения окружение
пользователя

35. Меня зовут............Саша Комаров
Моя компания.......www.akomarov.com
E-mail.....................akomarov@akomarov.com
Twitter (in English)...akomarov
ЖЖ (по-русски)....lopanism.livejournal.com
Визитки на столе вот тут