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

Сегодня – только о самом важном

Как угнаться за новыми технологиями?

Как сделать хороший мобильный интерфейс?

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

Примеры хорошего и плохого дизайна приложений для Айфона

Cегодня вы не получите

Готовых решений (придется думать самим)

Подробной технической информации.

Супер-секретов (их нет ;-)

Советов по регистрации приложения в AppStore

Описания рабочего процесса (подходите позже, расскажу лично)

Как угнаться за новыми технологиями?

Частоты процессоров каждый год удваиваются.

Мозг человека не очень сильно изменился со времен Аристотеля.

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

Как сделать хороший мобильный интерфейс?

Забудьте на минутку об интерфейсах

Перестаньте ненадолго думать о мобильных телефонах...

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

1 2 30Придумать

само приложение

Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс? (по шагам)

0: Вы находитесь здесь

1 2 30Придумать

само приложение

Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

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

1 2 30Придумать

само приложение

Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

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

Сложно нажимать на маленькие объекты

iFitness App

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

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

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

Linked In -VS- Facebook1: Ограничения пользователя

Мелкий текст

Трудно нажимать на меню

Слишком много всего

Крупные иконки и надписи

Пальцем не промахнешься

Простые варианты выбора

Facebook 1.0 -VS- Facebook 3.01: Ограничения пользователя

Какой из вариантов вам кажется проще?

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

2: Контекст и окружение

1 2 3Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

0Придумать

само приложение

2: Контекст и окружение

Ваше приложение

Мобильное приложение — лишь капля в море

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

Apple -VS- iTalk

Кнопку записи трудно найти и нажать не попав в аварию

Кнопка записи занимающая пол-экрана очень удобная

2: Контекст и окружение

Apple -VS- iTalk

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

После нажатия на кнопку записи весь интерфейс меняет цвет.

2: Контекст и окружение

Портирование приложений

Fish Tycoon на экране компьютера

Fish Tycoon на Айфоне

2: Контекст и окружение

Большой

Нельзя просто уменьшить десктопное приложение...

Микроскопический

2: Контекст и окружение

...Нужно в добавок убрать все лишнее...

Фотошоп на компьютере Фотошоп на айфоне

2: Контекст и окружение

...И оставить самое необходимое

Редактор видео на компьютере Редактор видео на айфоне

2: Контекст и окружение

2: Контекст и окружение

Нас окружают люди и у них тоже есть мобильники

Ping -VS- WhatsApp

Требуется придумать имя пользователя

Номер телефона в качестве идентефикатора пользователя

2: Контекст и окружение

2: Контекст и окружение

Новые технологии — новые способы общения

2: Контекст и окружение

Новые способы обмена данными

Mover

2: Контекст и окружение

Новые способы найти друзей

Loopt

3: Культурные различия

1 2 3Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

0Придумать

само приложение

3: Культурные различия

Дизайн должен учитывать культурные особенности

Спасибо!

1 2 3Адаптировать интерфейс под ограниченияпользователя

Учестьконтекст и окружение

Вспомнить окультуре

Как сделать хороший мобильный интерфейс?

0Придумать

само приложение

Меня зовут............Саша Комаров

Моя компания.......www.akomarov.com

E-mail.....................akomarov@akomarov.com

Twitter (in English)...akomarov

ЖЖ (по-русски)....lopanism.livejournal.com

Визитки на столе вот тут