SlideShare ist ein Scribd-Unternehmen logo
1 von 64
Особенности проектирования
интерфейсов для мобильных устройств



          23-24 июля 2012
               Пермь
Давайте знакомиться
                  Фролов Михаил
                  Проектировщик интерфейсов (UsabilityLab)

                  2 года тестировал мобильные телефоны в LG
                  4 года в Yota (в отделе мобильных сервисов)
                  1,5 года в UsabilityLab (Питерский офис)



Контакты:

E-mail: msfroloff@gmail.com
Twitter: @FrollowMi
Начнем издалека. Как это было
С появлением мобильного интернета

•   MMS
•   WAP порталы
•   JAVA приложения
•   Игры / мелодии / картинки / знакомства




•   Кто-то начинает думать о проектировании для мобильных, об особенностях пользователя и контекста
Еще вчера ничего этого не было
Началось!

•   iRDA
•   Bluetooth
•   Camera (2+ MPx)
•   FM-radio

 Смещаются приоритеты при выборе телефона

 Формируются первые требования к интерфейсам
  - картинок и иного тяжелого контента поменьше
  - все только самое важное
  - долгую загрузку долой
Реалии сегодняшнего дня

•   Цены на мобильный интернет доступны
•   Скорость передачи данных выросла
•   Есть вовлеченность и доверие пользователей
•   Люди готовы ждать, если знают чего ждут
•   Нужна полнота картины
•   Телефон – лучший друг

 Рынки мобильных приложений и контента
 Конкуренция
 Три толковые платформы
За гранью добра и зла
Видео 1. Накладная клавиатура для iPhone
Что такое мобильное устройство

•   Мобильно не устройство, а пользователь

 взаимодействие где и как угодно
 вероятность прерывания очень высока
 время взаимодействия ~1 минута
Зависимости
Что с этим делать

•   Нотификации. Пользователь всегда доступен.
•   Узнайте пользователя, узнайте среду
«Профессионалы» советуют
Не лишайте людей экспериментов
Для кого стоит учесть «трясучку»?
Для кого стоит учесть «трясучку»?




Навигатор и иные приложения используемые на ходу в машине
Для кого стоит учесть «трясучку»?




Мелкий тремор рук, повышенная агрессия, раздражительность
Общение с пользователем
• На ты или на вы?

 С детьми только на ты
 Работа с деньгами (банковские приложения, оплата) – только на вы
 В остальном – на ваш страх и риск

• Главное – на языке пользователя

• Не отвлекайте по пустякам
Пользователь найдет время обратиться к вам
• Ведь мы помним
Пользователь не вы!
• С этим нужно смириться
• Это важно помнить

 Наблюдайте за людьми везде
 Проводите интервью с бизнесом и пользователями
Интервью
• Узнать бизнес
• Узнать пользователя

 Не спрашивайте КАК нужно сделать!
 Нравится / не нравится – не аргумент
 Доверяй но проверяй
Гарантия нужного приложения
• Оно решает проблему
• Вы знаете кто им будет пользоваться
• Где, когда и при каких обстоятельствах
Случай из жизни
Полевые испытания 1
Полевые испытания 2
Устройство не сыскавшее славы
Ищите где недостатки становятся достоинствами
Жизненные ситуации и цели
Жизненные ситуации и цели

• Совершить конечное действие (позвонить, отправить смс, прочитать
  письмо, написать твит, зачекиниться)


• Получить информацию (погода, как доехать, новости, рецепт борща)



• Убить время (почитать twitter, поглазеть youtube, поиграть в angrybirds)
Модели организации приложения
А) Контент без промедлений   Б) Пользователь решает.
                                   Навигация.
Главное – следить за собой
А) Контент без промедлений   А) Контент ли?
Изящные «дизайнерские» решения
Зависимость от точки входа
Совмещение моделей
Не перестарайтесь или «как пухнет контент»
Было                   Стало
Не мусорьте данными
Жизнь внутри приложения: перемещение
• Пользователь должен всегда понимать где он, как вернуться назад и как
  вернуться «домой»
Жизнь внутри: действие
• Должно быть понятно что тут можно сделать (куда нажать, что тащить)
Приложение Deal in
Жизнь внутри: повторный запуск приложения
• Повторный запуск – умный возврат фокуса.

                    А) Кулинария -> Супы -> Рецепт борща

                    Б) Новости -> Спорт

                    В) Новости -> Cпорт -> Зрение Кержакова

                    Г) Твиттер -> Форма создания нового твитта

                    Д) Навигатор


Какую страницу показать пользователю при повторном запуске?
 через 10 минут
 через 2 часа
 через день
Любовь и забота
•   Запоминать действия, данные и бережно хранить
•   Поведение приложения должно быть предсказуемым
Инструмент взаимодействия - руки

•   1 рука 1 палец
•   Размер имеет значение
Производители рекомендуют

•   Apple – 44*44 px
•   Windows Phone – от 26 до 36 px
•   Nokia 1*1 см или 28*28 px
Важен не только размер но и расстояние
Подальше от других
Руки бывают разные

•   Левые и женские
Две руки
iPad удобные зоны
Основные жесты
Как заменить pinch-to-zoom
Текст в интерфейсе
Подбирайте слова
Красивые буквы
Перегруженные страницы
Простые правила
• Пишите так, как вы говорите – по-человечески

   Имя -> Как вас зовут?
   Введите пароль -> Придумайте пароль
   Вызов -> Позвонить
   Создать сообщение -> Написать сообщение

• Необходимо чтобы было понятно, желательно чтобы было правильно

• Сокращайте. Чем меньше текст, тем у него больше шансов быть
  прочитанным.

   Ваш рабочий кабинет -> Кабинет

• Не занимайте «пустое» место текстом
Тест 1

Читаем быстро и громко!




           ЖПЧШТЦ
-   Ты на концерт завтра пойдешь?
-   кшн
Тест 2

Читай только гласные буквы


  сЕгОднЯ двАдцАть трЕтьЕ
           ИЮлЯ
Природа приложения – Мобильная версия
Минусы:
- Время загрузки
- Функционал браузера
поверх функционала сайта
- Придется повозиться с навигацией

Плюсы:
- Кроссплатформенность
(интернет то у всех одинаковый)
Приложения с App Store (Play)

•   Приложение начинается со странички в «магазине»
Великий соблазн - кроссплатформенность
Просто запомните картинку
Вы этого хотели?

Weitere ähnliche Inhalte

Ähnlich wie Особенности проектирования для Мобильных устройств

Мобильный двигатель торговли
Мобильный двигатель торговлиМобильный двигатель торговли
Мобильный двигатель торговлиMax Babich
 
Maxim Babich (IT Spring 2013)
Maxim Babich (IT Spring 2013)Maxim Babich (IT Spring 2013)
Maxim Babich (IT Spring 2013)Sergey Gruzer
 
Пользовательские исследования мобильных приложений
Пользовательские исследования мобильных приложенийПользовательские исследования мобильных приложений
Пользовательские исследования мобильных приложенийMail.ru Group
 
UX исследования мобильных приложений - WUD 2013
UX исследования мобильных приложений - WUD 2013UX исследования мобильных приложений - WUD 2013
UX исследования мобильных приложений - WUD 2013Natalia Sprogis
 
Дизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисовДизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисовConstantin Kichinsky
 
Константин Кичинский, Microsoft
Константин Кичинский, MicrosoftКонстантин Кичинский, Microsoft
Константин Кичинский, MicrosoftDiana Dymolazova
 
Мастер-класс в Сколково: "Юзабилити для стартапа", Суворова Юлия, UsabilityLab
Мастер-класс в Сколково: "Юзабилити для стартапа", Суворова Юлия, UsabilityLabМастер-класс в Сколково: "Юзабилити для стартапа", Суворова Юлия, UsabilityLab
Мастер-класс в Сколково: "Юзабилити для стартапа", Суворова Юлия, UsabilityLabInternet-Burzhui Andrei Ryabykh
 
Мастер-класс по ЮТ для Британки
Мастер-класс по ЮТ для БританкиМастер-класс по ЮТ для Британки
Мастер-класс по ЮТ для БританкиKsenia Sternina
 
Проектирование интерфейсов (Михаил Фролов, UsabilityLab)
Проектирование интерфейсов (Михаил Фролов, UsabilityLab)Проектирование интерфейсов (Михаил Фролов, UsabilityLab)
Проектирование интерфейсов (Михаил Фролов, UsabilityLab)2Niversity
 
Founder institute sales & marketing session Фug 5
Founder institute sales & marketing session Фug 5Founder institute sales & marketing session Фug 5
Founder institute sales & marketing session Фug 5Dimitri Popov
 
Типовые ошибки в iOS приложениях. Классификация ошибок в iOS приложении. - Дм...
Типовые ошибки в iOS приложениях. Классификация ошибок в iOS приложении. - Дм...Типовые ошибки в iOS приложениях. Классификация ошибок в iOS приложении. - Дм...
Типовые ошибки в iOS приложениях. Классификация ошибок в iOS приложении. - Дм...Procontent.Ru Magazine
 
Как сделать востребованное приложение
Как сделать востребованное приложениеКак сделать востребованное приложение
Как сделать востребованное приложениеKonstantin Bocharov
 
Практические аспекты разработки ПО #1
Практические аспекты разработки ПО #1Практические аспекты разработки ПО #1
Практические аспекты разработки ПО #1Denis Umnov
 
Human computer interfaces v8
Human computer interfaces v8Human computer interfaces v8
Human computer interfaces v8Yuri Ammosov
 
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космосаCodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космосаCodeFest
 
Тренды в UX исследованиях
Тренды в UX исследованияхТренды в UX исследованиях
Тренды в UX исследованияхNatalia Sprogis
 
Дмитрий Пиликов - Юзабилити тестирование
Дмитрий Пиликов - Юзабилити тестированиеДмитрий Пиликов - Юзабилити тестирование
Дмитрий Пиликов - Юзабилити тестированиеqasib
 
Дмитрий Пиликов - Юзабилити тестирование
Дмитрий Пиликов - Юзабилити тестированиеДмитрий Пиликов - Юзабилити тестирование
Дмитрий Пиликов - Юзабилити тестированиеTatyana Pischasova
 

Ähnlich wie Особенности проектирования для Мобильных устройств (20)

Мобильный двигатель торговли
Мобильный двигатель торговлиМобильный двигатель торговли
Мобильный двигатель торговли
 
Maxim Babich (IT Spring 2013)
Maxim Babich (IT Spring 2013)Maxim Babich (IT Spring 2013)
Maxim Babich (IT Spring 2013)
 
Mobile UI @Levelapp.me
Mobile UI @Levelapp.meMobile UI @Levelapp.me
Mobile UI @Levelapp.me
 
Пользовательские исследования мобильных приложений
Пользовательские исследования мобильных приложенийПользовательские исследования мобильных приложений
Пользовательские исследования мобильных приложений
 
UX исследования мобильных приложений - WUD 2013
UX исследования мобильных приложений - WUD 2013UX исследования мобильных приложений - WUD 2013
UX исследования мобильных приложений - WUD 2013
 
Дизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисовДизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисов
 
Константин Кичинский, Microsoft
Константин Кичинский, MicrosoftКонстантин Кичинский, Microsoft
Константин Кичинский, Microsoft
 
Designing mobile app
Designing mobile appDesigning mobile app
Designing mobile app
 
Мастер-класс в Сколково: "Юзабилити для стартапа", Суворова Юлия, UsabilityLab
Мастер-класс в Сколково: "Юзабилити для стартапа", Суворова Юлия, UsabilityLabМастер-класс в Сколково: "Юзабилити для стартапа", Суворова Юлия, UsabilityLab
Мастер-класс в Сколково: "Юзабилити для стартапа", Суворова Юлия, UsabilityLab
 
Мастер-класс по ЮТ для Британки
Мастер-класс по ЮТ для БританкиМастер-класс по ЮТ для Британки
Мастер-класс по ЮТ для Британки
 
Проектирование интерфейсов (Михаил Фролов, UsabilityLab)
Проектирование интерфейсов (Михаил Фролов, UsabilityLab)Проектирование интерфейсов (Михаил Фролов, UsabilityLab)
Проектирование интерфейсов (Михаил Фролов, UsabilityLab)
 
Founder institute sales & marketing session Фug 5
Founder institute sales & marketing session Фug 5Founder institute sales & marketing session Фug 5
Founder institute sales & marketing session Фug 5
 
Типовые ошибки в iOS приложениях. Классификация ошибок в iOS приложении. - Дм...
Типовые ошибки в iOS приложениях. Классификация ошибок в iOS приложении. - Дм...Типовые ошибки в iOS приложениях. Классификация ошибок в iOS приложении. - Дм...
Типовые ошибки в iOS приложениях. Классификация ошибок в iOS приложении. - Дм...
 
Как сделать востребованное приложение
Как сделать востребованное приложениеКак сделать востребованное приложение
Как сделать востребованное приложение
 
Практические аспекты разработки ПО #1
Практические аспекты разработки ПО #1Практические аспекты разработки ПО #1
Практические аспекты разработки ПО #1
 
Human computer interfaces v8
Human computer interfaces v8Human computer interfaces v8
Human computer interfaces v8
 
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космосаCodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
 
Тренды в UX исследованиях
Тренды в UX исследованияхТренды в UX исследованиях
Тренды в UX исследованиях
 
Дмитрий Пиликов - Юзабилити тестирование
Дмитрий Пиликов - Юзабилити тестированиеДмитрий Пиликов - Юзабилити тестирование
Дмитрий Пиликов - Юзабилити тестирование
 
Дмитрий Пиликов - Юзабилити тестирование
Дмитрий Пиликов - Юзабилити тестированиеДмитрий Пиликов - Юзабилити тестирование
Дмитрий Пиликов - Юзабилити тестирование
 

Особенности проектирования для Мобильных устройств

Hinweis der Redaktion

  1. Суровые реалии того времени: Безбожные тарифыНикакого мобильного интернетаТелефон для разговоров + пара тройка игр и калькулятор с конвертеромВсе взаимодействие через кнопки, либо «инновационно» (колесико на J5)
  2. Прошло совсем не много времени и появился мобильный интернет, поначалу очень дорогой и практически бесполезный. Обычные сайты не могли отображаться на экране мобильного телефона, а wapверсии никто не делал. Мобильный интернет служил в первую очередь транспортом для мелодий/картинок/ява приложений и игр. Это и был основной контент мобильного интернета. Родилась теория «навигационно-ориентированного» дизайна – надо было чтобы пользователь добрался до заветной картинки а не выкинул телефон. Хорошие приложения были способны приносить денежку. Если в них покупали картинки мелодии. Такие порталы было выгодно проектировать.
  3. Еще вчера ничего этого не было, а тут везде, на каждом шагу!
  4. Постепенно телефон наполнялся вспомогательными функциями: камера, ирда + блютуз, конверторы величин, записные книжки, диктофон, радио, плеер, будильник. Проводя опросы пользователей «что для вас важно в телефоне и что вы там хотели бы видеть» все перечисляли немыслимые функции, оперировали параметрами разрешения камеры и почти никто не упоминал основные функции «звонить», «слать смс». Дальше – больше – мобильный интернет дешевеет, скорости растут, появляются мобильные браузеры и понятие «мобильный интернет». Это точка начала проектирования для мобильных устройств.
  5. Некоторые деятели продолжают исповедовать это и некоторые другие особенности прошлого по сей день, но это давно не так. Цены – мука Пользователь готов ждать, если он знает чего ждетЛюди хотят полноты картины, если в большом интернете есть все, то и в маленьком должно быть все //пример с фейсбукомПроизводительность телефона выросла в разы! Стали появляться сложные приложения, мобильные офисы, игры, все что угодно. Вот недавно установил себе приложение имитирующее мяукание котов. Мы к нему еще вернемся. Приложения стали приносить деньги, появилась конкуренция, всем захотелось делать удобно и хорошо чтобы заработать, никто не стремиться получить много теплых «спасибо». Именно конкуренция и жажда наживы породила такие профессии как UX специалист и проектировщик интерфейсов.
  6. Практически умерла физическая клавиатура! Короткий отрезок времени приходилось бороться с вечно теряющимся стилусом, и вот наконец мы получили полностью, как раньше говорили «пальце-ориентированный интерфейс». Увеличился экранОбезличили вообще А эволюция мобильного ПО привела нас к тому что на рынке (российском) есть три платформы и еще что-то. О каждой из них мы поговорим подробнее, об идеологии, об особенностях реализации тех или иных решений.
  7. Ничего не поделаешь но такие примеры естьЭксперименты с форм-факторами, размеры, клавитуры.
  8. Посмотрите это видео и запишите все недостатки и преимущества, которые видите. Кто-нить поделитесь с нами. ---В первом варианте (которую надо снимать и одевать) если ее забыть перевернуть, а потом получить инкамингколл – то слайдер будет закрыт клавиатурой, пока вы ее снимаете – человек перестанет звонить – пичалькаВторой вариант какого-то лешего откидывается в правую сторону, хотя все правши.
  9. Мобильно не устройство а пользователь! Большая часть жизни телефона – в штанах или в сумочке. И не приведи оспадиего дома оставить! Нельзя предугадать в какой момент пользователь возьмет в руки телефон, сколько времени с ним проведет, это даже не всегда зависит от его собственного желания! Вот стоит он в купчино на балканской в ожидании трамвая, достал телефон, а купчино такой район что там может внезапно пойти как дождь так и гопники! И что надо делать – срочно прятать телефон! Стоит достать его в метро как в вагон набьется толпа школьников и милых бабусек – опять не поиграть!  Стоит уединиться с телефоном – как приходит смс, садится батарея, кто-то звонит! Внешние прерывания + внутренние. Вы должны быть к ним готовы*пример с игрой на сони J5
  10. Когда людишки проверяют свой телефон в режиме «Не произошло ли там чего». Телефон уже больше чем средство связи, он лучший и порой единственный друг, которому можно доверить все! По статистике 80% людей забыв дома телефон вернуться за ним.
  11. Безусловно вреда от мобильников гораздо меньше чем от алкоголя, но зависимость не менее сильная. А когда смешать эти два недуга появляются просьбы о создании приложения «Запретить отправлять смс бывшим после выпивки»Вспомнить про твит от Базули, как она на RHCP ходила и не смогла зачикиниться/ сделать фоток
  12. Так то оно так, но что с этим делать? Причем тут проектирование? Об этом и поговорим!  Во всей этой казалось бы страшной картине есть один несомненный плюс – доступность пользователя! Вы всегда можете его дернуть той или иной нотификацией, напомнить о себе, заставить обратить на себя внимание.  не перебивать других учитывать влияние среды Представим что мы делаем приложение для сталевара, не обязательно даже для мобильника – просто пульт который он дастает из штанин своих что бы передать пару сообщений мол все хорошо или все плохо! Что делает гениальный разработчик мигающую лампочку на пульте (кто ее увидит)звук сообщения – кто его там услышит нужно подключать вибрацию!!!!  Противоположный пример – приложение фонарик! Когда его используют – когда темно и страшно – вот вы его запустили и бац вам звук с вибрацией – мол милейший у нас обновление – эффекта полные штаны, телефон на земле, по-прежнему темно и страшно!
  13. Во всех книжках с первых глав говорят о том, что важно учитывать мобильность как показано на картинке, мол идет человек у него телефон весь трясется и он не видит толком ничего – враки! НО! Это не естественное поведение! Эй, чувак, тебя сейчас собьет машиной – вот это надо писать на экране а не думать о том как бы ему бедолаге что-нибудь покрупней-то нарисовать. ВАЖНО ничего не нужно учитывать только потому что так советует книжка!
  14. Выход всегда есть, нельзя угодить ВСЕМ, но можно помочь именно вашим пользователям, если вы их уже узнали.
  15. Кому действительно на экране может показаться размытое пятно а не ваши четкие красивые линии? Какие это могут быть приложения? В каком контексте использованы?
  16. Плохое крепление Плохая дорогаМалое время на концентрацию вниманияКак учитывать? Делать кнопки больше и главное располагать их друг от друга подальше. Я матерюсь безбожно!!
  17. Вечером было весело утром стало не очень – тремор, руки трясуться.Предсказать запой невозможно, НО?Можно делать приложение которое посчитает на основе данных о выпитом, когда вам можно за руль. ДОПОЛНИТЕЛЬНО: тут можно сделать 2 версии для отображения:вечером пятницы (ей чувак а вот клевая музыка) Утром субботы – ну что нахреначились вчера?
  18. Тут стоит узнать менталитет пользователей, их возрастную группу. С одной стороны телефон это лучший друг пользователя, с другой ваше приложение не обязано быть другом, позволять фамильярность. И тут речь не о языке по национальной принадлежности, отнюдь. Суть в терминологии, в манере. Тут есть две стороны: Например вы начальник банка и делаете для людей приложения по работе с кредитной картой, этакий интернет банкинг. Не заставляйте пользователя разбираться в вашей банковской терминологии: сверки, выписка по счету, платеж в бюджет или по свободным реквизитам – люди не обязаны разбираться в этом, подбирайте обще принятые слова. Т.е. Не привносите свой жаргон (или жаргон заказчика) в жизнь пользователя. Вы делаете приложение для любителей высокой моды – будьте любезны отличать кардиганы от свитеров, поло от сорочек с коротким руковом, да-да от сорочек, рубашки носят только мужланы  Если вам не нужен ответ пользовтеля или его реакция – не нужно насильно ее вызывать! Например когда письмо отправлено – не надо давать поп-ап «письмо отправлено»,
  19. Спросить все что хотелКстати, оставшиеся 60% кто они?  Многие врут, а некоторые боятся уронить телефон.
  20. Как же мол это так, я могу себя вообразить и столяром и водителем да хоть бабкой, но модели поведения слишком разные. Помогает наблюдение за людьми, Интервью с бизнесом и с пользователями Не пытайтесь сделать то, что будет удобно вам или вашему начальнику – ищите РЕАЛЬНЫХ пользователей, спрашивайте, пробуйте на них!
  21. Узнать специфику бизнеса или просто специфику среды, теже самые термины, возможные ограничения, что следует учитывать (например в работе с МТС красные кнопки – основные и в этом нет беды! Нельзя использовать даже в прототипах зеленый цвет и многое другоеУзнайте пользователя: а) если они уже есть – интервью с ними, выделяйте главное, спрашивайте чем пользуетесь а чем нет, что вызывает трудности а что удовольствие. НЕЛЬЗЯ спрашивать: что нравится, не нравится. Чего хотелось бы – фантазия у людей безгранична, они вам расскажут агаб) если их нет – пусть начальник опишет человек 10 таких какими он их видит, в кого вы будете целится
  22. Как определить то что вы собираетесь делать вообще кому-нибудь надо? Хорошее приложение должно решать проблему, помните любая инновация не решающая проблему ее создает. Как минимум постарайтесь уточнить кто им будет пользоваться и при каких обстоятельствах, ведь может оказаться что никому и нигде это приложение не нужно. Однако не все могут предусмотреть все на свете. Если есть ясность – это поможет вам целенаправленно готовить приложение и все что с ним связано именно под вашего пользователя а не для всех на свете, сейчас расскажу вам случай из жизни, дело было так:
  23. Увидел у себя в ленте новостей сообщение, вот оно перед нами. Почитал описание, зашел на страничку приложения, попытался представить для кого оно, и не смог. Трудно понять кайф от мяукающего телефона. Монетизация там, кстати, на покупке новых кошек, которые мяукают иначе. Ну думаю раз уж люди покупают кошачьи голоса, предложу ка я услуги свои тоже – пишу комент. ---Ну вроде бы и забыл я про него, как через 4 дня Александра пишет в 6:30 утра прошу заметить, адекватность сразу под вопросом, мол так и так – мне понравилось. Ну думаю надо ставить уже себе скорее, и заодно дома проверить свою кошку на мяукопригодность.
  24. Проверяем реалистичность выбранного взаимодействия – жмем на живую кошку!
  25. Вот еще один пример: Однажды компания хрен его знает какая выпустила клавитуру с абсолютно плоской поверхностью, не целясь ни в какого пользоватля, просто чтобы было, а вдруг!
  26. Оказалась востребованной в медицине и в грязных помещениях, поэтому даже, казалось бы обреченные вещи могут найти свою нишу.
  27. Давайте попробуем обобщить опыт жизненных ситуации, в которых пользователь начинает взаимодействовать с телефоном, чтобы выделить несколько типов целей, которые он хотел достичь. Тоесть ради чего он вообще телефон в руки схватил.-----// Опросить по кругу кто зачем брал в руки последний раз телефон и вместе обобщить!!!
  28. Итак можно выделить три основных группы. Есть приложения выполняющие смежную функцию (например тот же твиттер или почта) – можно и почитать и написать. В ютюбе можно искать определенный ролик, а можно просто серфить там в свое удовольствие. Ваша задача организовать приложение так, что бы было удобно выполнять все основные цели сразу, без лишних телодвижений.
  29. Помимо этого есть две основные модели организации приложения:Контенто-ориентированное и навигационная. Для большей наглядности я взял две версии приложения твиттер для андройда. Первая выполнена по контентной модели – вы сразу видите твиты, вторая – по навигационной – вы в праве решать с чего вам начать работу.
  30. Опять же – все рекомендуют прибегать к контентной модели, мол чего тянуть давайте вываливайте сразу добра на людей, это по сути правильно, НО когда много навигационных задач – нужно всегда уметь грамотно их решить на экране. Иначе вы из «контентной» модели окажетесь в навигационной сами того не заметив. Как с этим бороться? Ведь куда-то навигацию девать надо! Есть варианты!
  31. На этих примерах показано как можно Спрятать менюНемножко схитрить и при первом запуске приложения показать пользователю как тут все устроеноЭлегантно спрятать менюКак избавились от небходимости вешать кнопку обновить.
  32. По сути яндекс почта – навигационно построенное приложение, я его запускаю и вижу рубрикатор, при этом контента там полно. На левой картинке приложение запущенное по иконке с хоумскрина. Как видно, даже при наличии непрочитанного сообщения – мы попадаем в рубрикатор, хотя казалось бы! Но Если осуществить вход через нотификацию вот, нажав в этой панели на строчку с письмом – попадаем сразу в непрочитанное письмо, что естественно, ведь именно оно вызвало у нас интерес!
  33. Если умещается и контент и навигация – прекрасно.Слева пример приложения «море денег» оно мне очень нравится по своей организации, это наверное первый контролер расходов который мне нравится, тут все что может понадобиться – под рукой. Представлен и контент ( данном случае это расходы за день и за неделю), возможность быстро посмотреть баланс, а также добавить расход буквально в три кликаСправа – навигатор, его основной контент это карта + маршрут, как только запускаем нави – сразу видим карту и элементы навигации, которые помогут найти дополнительные функции
  34. Если принято решение ставить контент во главу угла, то главное не переборщить, вот наглядный пример эволюции, не лучшей на мой взгляд приложения форсквер. На левой картинке помещается несколько чекинов, на правой один но симпатично обыгранный и с большой фоткой. С тех пор я почти не прохожу в ФК по нотификациям. Он для меня практически умер.
  35. Еще один случай распухщего контента: Вот такие серьезные штуки выдавайте только когда действительно пользователю это нужно, во всех других нужно: А) Упрощать –вот нахера было городить такой мрак? Кому нужен столь детализированный баланс, тут аж винтики прорисованы – это дизайн ради дизайна – есть время – пожалуйста, но лучше подумать, чего тут не хватает? ГДЕ КНОПКА ПОПЛНИТЬ?Б) Давать динамику, только критические изменения:К вечеру СИЛЬНО похолодает алло, куртку бери и зонтА Завтра ваще гололед!!! Едь резину меняйВлажность зашкалит, сердечник? Возьми пилюли!
  36. Допустим мы выбрали модель, запустили пользователя в приложение и он отправился там искать информацию или совершать действие. Перемещаясь внутри приложения всегда важно понимать где он находится, как вернуться назад, как вернуться к начальному состоянию приложения (особенно это актуально при повторном запуске приложения где-нить через месяцок). Ну и в целом поведение должно быть предсказуемым для пользователя. Для определения местоположения в общем случае служат заголовки, табы, характерные элементы списков.
  37. Пользователь в идеале не должен думать и разбираться что можно сделать в приложении, этим плохи инновационные контролы – ими нужно научиться пользоваться, но есть действительно хорошие примеры. Если список скролится – должно быть понятно что он скролитсяЕсли кнопка нажимается – нарисуйте ее таковой.
  38. Недавно показывал вам картинку с симпатичным решением показа меню, вот видео про это приложение, давайте посмотрим и оценим его целиком, помня то, о чем я только что вам рассказал, про понимание местонахождения и того что можно сделать. Непонятно что можно сделать удержание элемента и его перемещение внизКнопка «хочу» это лейбл какой-то а не кнопка! Кнопка бэк хреноваяНет заголовков рубрик (новое, мое, популярное) – невозможно понять где сейчас мы, если только что выбирал не беда, а вот если запустить второй раз… И эти люди потратили денег на съемку, на профессионального диктора, могли бы и спроектировать по-человечески
  39. Во многих гайдах, да и умных книжках опять же написано, мобильник такое дело – может внезапно прерваться взаимодействие, позвонит кто-то или дождь пойдет. И вот вы через какое-то время запускаете приложение заново, и где его открывать? Советуют – тамже где пользователь его покинул в последний раз. Перед вам 5 ситуаций и 3 условия повторного открытия экрана, попробуйте
  40. Лелейте пользователя как только можете, запоминайте параметры которые он вводил, не заставляйте повторять вам по десять раз! Если в нашем приложении при старте вы будете просить его ввести какие-то кнтактные данные, сразу же их запоминайте. Почему? Во первых сам по себе ввод – одной из самых трудоемких занятий на мобильном устройствеВо вторых пользователь ждет что вы запомните, иначе – что б вам дети в кашу срали !!!  А если можете обойтись без участия пользователя – не заставляйте его делать вашу работу, если ваше приложение допустим предоставляет расписание кинотеатров по всей России, то не нужно каждый раз при запуске уточнять из какого города пользователь. В проектировании очень важно дать пользователю то что он ожидает, ровно как и в жизни! Он уже вводил параметры, он ждет того что вы их запомните, он уже расписание почти выучил а вы все не знаете в какой группе он учится! Позор!  Помимо этого любое нестандартное поведение пугает пользователя. Он не ждет подвоха, он не любит ошибаться, даже в ожиданиях. Это тоже самое что на входящий звонок вместо алло сказать в турбку «извините вы ошиблись номером» - на другом конце оторопеют!
  41. 90% пользователей в нормальных условиях готовы посвятить телефону только 1 руку, если ваше приложение рассчитано на использование когда угодно – больше одного пальца не стоит закладывать.  Во всех гайдлайнах есть минимально допустимые размеры кнопок – не принебрегайте ими.
  42. Маленькие объекты замедляют действия пользователя, так как ему необходимо уделять больше внимания тому, чтобы точно нажать на объект. В то же время, объект, размер которого соответствует пальцу, дает пользователю достаточно места, чтобы нажимать не задумываясь о точности движений.Еще одна беда – не видно что нажимать, тут нужно придумывать штуки вот как эппл например, она клево выглядит, но опять же не работает – люди промахиваются, ведь не видно какая буква рядом.
  43. Вы можете сделать две маленькие кнопки по разные стороны экрана и попасть в каждую из них будет не так сложно, а если их расположить рядом друг с другом то возникнут проблемы! На приведенном примере, на одной картинке – все хорошо – большие кнопки на большом расстроянии, на второй зачем-то сюда пихнули три разноцветных штуковыины, нажимая которые можно задеть табы. А вот часы кассио, которые казались нереальной крутотой в моей молодости, только нажимать их можно было исключительно стержнем ручки, потомучто пальцем нажималось все что угодно кроме нужных цифр, самое обидное что понимаешь это только попробовав! Выглядят то достойно! А потом все кнопки в пасте от ручки. Печалька. КАК проверить? Делайте быстрые прототипы, фотошоп + Акшур и вперед тестировать на людях!
  44. Это скриншот навигатора Сити-Гид, там вообще с интерфейсом беда, но вот перед нами экран во время поездки, напомню что телефон у меня весит в холдере на лобовом стекле, и дороги не лучшие, он потряхивается и знали бы вы сколько раз я не попадал в кнопки меню … Первая беда – вся карта кликабельнаВторая – физические контролы самого телефона /вжжжик –приехала картинкаИзбегайте в андройде и в винфоне расположения управляющих контролов близко к физическим кнопулямОЧЕНЬ ВАЖНО ПРОВЕРЯТЬ ПРИЛОЖЕНИЕ НА УСТРОЙСТВЕ А НЕ НА КОМПЕ !!!
  45. В мире бывают левши – о них часто забывают, но если есть возможность – учтите их интересы, например скрол в списке контактов с большими буквами по середине экрана.  А еще бывают барышни с ногтями  Из-за ногтя она не видит где та часть пальца, которой она касается экрана. Если заранее известно что аудитория вашего приложения – девушки – не стесняйтесь делать элементы еще больше. К тому девушки гораздо более склонны к быстрому раздражению от неудач!
  46. Работа 2мя руками свойственна для аппаратов больших форм факторов, айпад например. Для мобилкивсетаки это скорее редкость, используется чаще в играх или каких-то исключительных ситуациях, если хотите намеренно подключить вторую руку – переверните приложение в альбомную ориентацию – пользователю придется взять телефон 2мя руками. Но всетаки - айпад
  47. В айпаде удобно тыкать по углам, ну и вообще по зонам близко расположенным к краям, у которых наши пальцы. Ну и больше внимания получает верхняя часть устройства. Вот справа пример твиттера для айпада, в чем тут ошибка? Может кто-нибудь сказать?  А вот кнопка написать твит – если положить айпад на пузо – нажимать не удобно НЕ располагайте внизу айпада важные кнопки, только листалку или превьюшки следующих экранов, например
  48. Основные жесты пользователя это:Нажатие Пролистывание (скролл, слева – напрва, свайп)Мультитач, чаще всего используемый для уменьшения / увеличения размера изображенияСтарайтесьбез лишней нужды не использовать мультитач, и дублируйте его кнопками, не всегда можно подключить вторую руку! По поводу мультитача – не так давно канадские ученые презентовали «технологию» позволяющую избежать необходимости прибегать ко второй руке.
  49. Вроде бы все хорошо, НО: У многих разная площадь касания, например в центре телефона и в верхней его части (куда надо тянуться) – но это ерунда, всетакиувиличиываем мы по большей части в одной и тойже области экрана – в центре. А вот девушки с длинными ногтями не смогут пользоваться вообще
  50. Основное отличие в плане текста состоит в том что он воспринимается по другому, прежде всего из-за размера устройства. Если я вижу одно и тоже письмо на компе и на девайсе – воспринимаю я их по-разному. Люди и так читают не очень охотно, а на мобилке еще меньше – поэтому старайтесь не растекаться мыслями по буквам, а кратко излагать самую суть! НО не нужно сокращать надписи на кнопках до «ДА» / «НЕТ»
  51. НО это не значит что нужно сокращать названия кнопок до «ОК» или «ДА» «НЕТ». Смысл должен быть передан полностью. И нужно всегда следить за русским языком! Вот 2 по сути одинаковых экрана, но приложения разныеСмотрим на пары Откуда – Куда и Из – Куда, какая правильная? Порекомендовать СайтМаксима Ильяхова про тексты
  52. А теперь красивейшей вариант, Дизайнерский. Не понятно куда тут можно нажать, не понятно именно прирожденным пользователям айфона и андройда – по всем законам жанров тут должны быть поля кликабельные или кнопку, а тут плейн текст! Но самую большую ошибку ошибку дизайнер сделал в верхнем ряду кнопок, если будет мультисити – то ничегошеньки не поместится, а жаль!
  53. Когда текста много и он весь нужен – надо как-то его компоновать, и уже НА САМОМ девайсе смотреть читается это или нет.На левом явно лучше читается НО видно всего 2,5 результата поиска
  54. Рассказать о тренинге Саши Бурта, где я это узнал! Когда выпридумываете тот или иной текст, помните что читать его будет человек, так общайтесь с ним по-человечески. Взять вот названия полей, простая форма регистрации – обычные поля «Введите имя» «Введите пароль» а какой пароль? Беда в том что многие уже привыкли к тому что компьютер и телефон могут выдавать ахинею адовую. С этим надо бороться, главное – не бояться! Тут – все в ваших руках. На кнопках ВСЕГДА глаголы, если это действие, никаких «Вызов» Когда то был «албанский» и я работал в LG – как мы делали пацанские переводы и продавали прошивки с ним. Если известно что есть какой-то сленг у вашей целевой аудитории – не бойтесь его использовать, даже если в русском языке нет таких слов  Понятно больше чем правильно. Сокращайте = убирайте лишнее. Не надо скращать слова  «Ув. тов,. Пользователь …» Старайтесь вытягивать саму суть, а всю воду отбрасывать, в мобилках это особенно важно – у человека может просто не быть времени на прочтения вашего сообщения об ошибке если оно начинается со слов «мы сожалеем но наш сервис сейчас не доступен. Попробуйте повторить запрос через пару минут». Если у вас в системе нет никакого кабинета кроме рабочего – назовите его просто кабинет, и напоминать что он ваш а не чей то еще тоже не надо – телефон то владельца.
  55. Это получается этакое приложение в приложении. Из минусов: Всегда нужна сеть, если что не так - медленная загрузкаФункционал браузера. На Андройде, например при вызове меню это будет меню браузера а не приложенияОсновная проблема навигация: вы тут не сделаете табов, к примеру, фильтров постоянно висящих, вообще нет навигационной панелиХороший вариант – в конце страницы добавлять список всех разделов, к примеру Зато на всех телефонах выглядит одинаково 
  56. Ошибочно полагать что пользователь начнет свое знакомство с приложением установив его на телефон, начинается все немного раньше со странички в магазине (андройдмаркет / аппстор / виндоузстор?) Приложение может быть мега крутым и даже именно тем что нужно пользователю, но если он увидит неопрятные картинки, невнятное описание он пройдет мимо. Опять же – тут все как в жизни – если вы пошли в магазин за теплым зимним свитером (насущная проблема) и видите на витрине свитер какой-то тошнотно отвратной расцветки – вам и в голову не придет его мерять, хотя на деле он мог оказаться очень удобным и самым теплым из всего что есть в этом магазине. Показывайте товар с улыбчивым лицом а не с фоткой из паспорта! Не пожалейте на это времени!
  57. Всегда хочется сделать одно приложение и чтобы для всех. К сожалению это невозмжно, ну точнее сказать – возможно но не надо. Ведь даже если пользователь не сознательно выбрал платформу, пусть ему подарили телефон, он с ним живет, он к нему привыкает, к его поведению, к его кнопкам – вот где нажимать назад – на корпусе телефона или в навигационной строке? Не заставляйте его бороться со своими привычками – это опасно, он скорее бросит вас чем привычку
  58. Тут даже комментариев у меня не будет – это идеальная кроссплатформенность, правда, лучше сделать для одной патформы по всем правилам чем для всех но кое как.
  59. Просто с одной стороны все очень похоже – а с другой одинаковые вещи работают по разному, помните про стрелочку в экшн баре для андройда и для айфона?