"Разработка мобильных приложений". Дизайн мобильного пользователя.

Я Джереми Лайон. Я руковожу командой дизайнеров Palm.

Это люди, которые определяют, куда какие блоки попадают, и что они там делают.

Я немного расскажу о своем образовании, так как думаю,

что это значимо по отношению к тому, о чем я буду говорить.

У меня нет академического образования в области дизайна.

Мое образование было в сфере политики и экономики.

Потому что именно туда нужно идти, когда хочешь писать научную фантастику.

Этим я и занимался, когда ушел из колледжа.

Я хотел сделать карьеру писателя научной фантастики.

И я понял, что вообще-то это очень сложно.

И я решил, что лучше не писать о будущем, а пытаться его изобрести -

ведь это намного проще.

Так я попал в мобильные технологии.

Причина, по которой я вам все это говорю, в том,

что я покажу вам то, что официально еще не одобрено

кем-либо из дизайнерских ассоциаций... больших или маленьких.

Это в основном мой собственный взгляд на дизайнерский подход

и на то, как следует мыслить дизайнеру, когда он разрабатывает свое приложение.

Тут уже спрашивали о том, кто из вас разрабатывал свое собственное приложение,

и кто-то один слегка поднял руку. Ну кто-то еще потом зашел сюда...

У кого-нибудь здесь есть такой опыт? Нет? Отлично.

А как на счет дизайнерских курсов? Курсов рисования? Курсов разных видов дизайна?

Кто-нибудь ходил на такие занятия?

Вот вас мне нужно опасаться. Вы уже кое-что из этого видели, наверно.

Итак, вот обо всем этом я постараюсь успеть сказать сегодня.

У меня где-то 1,5 часа. Я потрачу 10 мин. на вопрос

"Что такое дизайн? Что он означает для того, кто хочет разрабатывать приложения?"

Следующие 5 мин. я буду говорить о том, какова особенность дизайна мобильных телефонов.

Я постараюсь опровергнуть кое-какие мысли, утвержая, что дизайн для мобильных - это дизайн в сторону увеличения.

Я расскажу вам, что это означает, когда мы дойдем до этого.

Далее я потрачу время на то, чтобы рассказать о специфических техниках, которые вы можете применить

при создании приложений для мобильного.

Как их разрабатывать и как делать так, чтобы люди были ими довольны.

И вы видите, что у меня тут есть стопка бумаг и несколько карандашей.

Мы сделаем несколько быстрых упражнений, чтобы попрактиковаться в этих техниках.

15 мин. я потрачу на то, чтобы с помощью этого проектора показать вам существующие примеры

приложений на Palm Pre и на Iphone.

И мы увидим те вещи, о которых мы говорили. То, как они действуют.

И 15 мин. - на вопросы-ответы.

Итак, начнем. Что такое дизайн?

Когда вы слышите слово "дизайн" в разговоре о разработке приложений

то, что оно значит для вас?

Компоновка в физическом смысле. Да? Что еще?

-Как пользователь взаимодействует с тачпадом, сладерами...

Графика движимых объектов. Да.

Многие люди говорят, что дизайн - это когда делают так, чтобы все красиво выглядело.

И это так. Это часть дизайна.

К дизайну относится тестирование.

Значительная часть дизайнерской работы - это когда людей приглашают в лабораторию

и смотрят, что они делают с вашим програмным обеспечением.

Из этого делают выводы и улучшают свой продукт.

И к этому относится оформление системы, разработка структуры.

Все это относится к дизайну. И это все технологии.

Но самое важное в том, что дизайн - это развитие мысли.

Вы отстраняетесь от самого себя, пользуетесь этим приложением и думаете о том,

как сделать так, чтобы этим было легче и удобней пользоваться.

И мысль развивается.

Я проведу аналогию с писателями.

Если вы пообщаетесь какое-то время с писателями, то вы обнаружите, что

существует два вида писателей.

Есть писатели, которые пишут, потому что они хотят самовыразиться.

Они выражают свои идеи, показывают свои ощущения, пишут для себя.

А есть писатели, которые начинают с этой же точки, но они очень хотят публиковаться.

И их цель - поделиться своими идеями с другими.

И я думаю, что именно для этого существуют приложения.

Вы могли бы написать скрипт пользовательского интерфейса для самого себя.

И это был бы лучший скрипт в мире. И он решил бы ваши проблемы.

Или вы можете начать с того, что выясните, в чем проблема,

что вас волнует.

А затем - применить техники и инструменты, чтобы выяснить, как сделать так, чтоб это работало.

Сделать это для других людей.

И вот в этом суть дизайна.

Сегодня мы попытаемся говорить о том, что такое дизайн, и о том,

как думать по-дизайнерски. Поэтому я расскажу, о чем думают дизайнеры.

Здесь я буду говорить на более высоком уровне. И я буду говорить о деталях технологий.

Итак: Полезность.

Это момент, о котором, я надеюсь, думают все.

"Ты создаешь приложение, которое поможет что-то делать?"

Необходимо выяснить, что люди хотят делать.

И существуют дизайнерские технологии, с помощью которых можно выяснить, что люди хотят делать -

о них мы поговорим позже.

Это первое, о чем мы должны беспокоится.

Понятность. (Возможность прочувствовать). Кто-нибудь слышал этот термин раньше?

В кругу дизайнеров об этом говорят постоянно.

Понятность - это когда кто-то находит ваше приложение,

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

что нужно сделать, чтобы найти то, что ему нужно.

Вот что обозначает "Понятность". Это очевидно.

Вы можете сделать что-то очень понятным, если сделаете подсказки (например "Нажмите здесь").

Но это только компромисс. О таких альтернативных вариантах мы тоже поговорим.

Понятность помогает людям адоптироваться к вашему приложению.

Практичность (Удобство использования). Это большая тема.

И я расскажу о нескольких характерных компонентах.

Суть практичности в том, что когда кто-то знает, как пользоваться вашим приложением,

когда он знает, для чего оно предназначено,

то насколько ему легко продолжать пользоваться приложением?

Сколько преград они преодолевают, пользуясь вашим приожением?

Вы хотите минимизировать преграды? Тогда пользуйтесь своим приложением часто.

Когда меня принимал на работу в Palm Rob Haitani, первый дизайнер, сказал:

"Практичность - это проблема когнитивной пропускной способности".

И есть его отличный рисунок, который я не успел воспроизвести.

Это песочные часы, где вместо песка - мячики для пин-понга.

Чем больше вы пытаетесь положить сверху, тем меньше пройдет через отверстие.

Это такая аналогия для проблемы когнитивной пропускной способности.

Чем больше всего вы показываете пользователю в вашем приложении,

чем больше вы заставляете их об этом думать, тем меньше они смогут сделать.

Потому что они перегружаются всеми этими возможностями.

То есть важная часть практичности - это избавление от этой проблемы.

И главный инструмент для этого - простота.

Все, что необязательно должно входить в ваше приложение, не должно там быть.

И многое из того, что, на ваш взгляд, должно там быть, тоже лишнее.

От этого нужно избавиться. Это один способ.

Чем меньше вы задумываетесь, тем легче понять приложение.

Изучаемость. Это еще один пункт, о котором думают дизайнеры.

Вы сделали приложение настолько легким и понятным, насколько это возможно.

Но если вы сделали что-то, из-за чего вы провалились в изучаемости.

Это когда юзер хочет что-то сделать, что он уже делал, а ему приходится заново все изучать.

Классический пример. Если вы... Я сам вам покажу.

Вы говорите: "Нажмите зеленую кнопку". Мало, кто сможет это повторить несколько раз подряд.

Потому что кнопка красная. Они видят цвет и думают, что это красная кнопка.

Это пример плохой изучаемости.

Даже если они прочитали слово "зеленый" и решили нажать кнопку,

то все равно им каждый раз придется осознавать это снова.

Вот, что я имею в виду, когда говорю об изучаемости.

Предсказуемость. Это взаимосвязанно с изучаемостью.

Но это немного с другой стороны.

Здесь имеется в виду, что вы хотите, чтобы у пользователей всегда был один и тот же результат,

когда они совершают какое-то конкретное действие в вашем приложении.

А если происходит что-то странное. Если, например, неожиданно изменяется размер экрана,

и людям приходится думать о том, что они сейчас сделали.

А если приложение ведет себя так, как они ожидают, то они об этом не думают.

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

И все эти вещи, о которых я говорю, все ведут к созданию компромиссов (альтернатив).

И в этом искусство создания приложений.

Потому что вы можете сделать что-то полезное, добавив кучу функций.

Но тогда приложение будет не очень простым.

Или вы можете сделать приложение очень понятным,

если в середине экрана будет огромная кнопка "Жми сюда".

Но тогда оно будет не очень простым,

потому что тебе надо будет сначала нажать сюда, а только потом ты попадешь туда, куда нужно.

Все эти простые принципы, о которых я говорил до сих пор,

нуждаются в том, чтобы найти компромисс между ними.

И мы поговорим о том, как вы можете оформить проблему, которую хотите решить,

что поможет вам прийти к компромиссу.

Я хочу привести пример того, что я имею в виду, когда говорю "Прийти к компромиссу".

Я покажу вам...

Я покажу вам iphone и Palm Pre.

У кого здесь есть iphone?

2-3... У кого-нибудь есть Palm Pre? Да?

Вы уж видели demo Palm Pre? Нет? Ладно.

Я не буду слишком долго показывать демо-версию, но я хочу показать две вещи..

Когда мы говорим о компромиссах... Я покажу вам почту в iphone. Приложение email.

Я зашел в этом приложении в список своих аккаунтов.

Посмотрите на экран. Мы говорим о понятности.

Как мне сейчас вернуться в почту?

Да. Здесь есть кнопка на экране, на которой надпись "Почта".

И вы вернулись.

(Это мой телефон сходит с ума - сломался выключатель звока.)

Теперь я покажу вам то же самое на телефоне Pre.

Как мне сейчас вернуться в почту?

Я вам покажу.

Экран продолжается вниз. Это область - тоже тачпад.

И мы разработали движение назад.

Если я его применю, то я окажусь обратно в своей почте.

Это добавленный компромисс. На iphone этот шаг намного более заметный.

Очень просто понять, как перейти назад. Есть кнопка, которая сделана для этого.

Но это усложняет вам жизнь в дальнейшем.

Чем больше кнопок на экране, тем больше выборов нужно сделать.

И переход назад - это то действие, которое вам нужно совершать постоянно.

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

А мы хотели избавиться от этой кнопки.

Мы хотели позволить вам избавиться от этого сознательного действия в приложении.

Чтобы нам не пришлось заполнять такими кнопками экран.

Это пример нашего компромисса.

Иногда компромиссы хороши, иногда - нет. Но конкретно этот, на мой взгляд, удачный.

В демо-версии есть и другие примеры.

Вам все это понятно? То, что я говорю о компромиссах?

И это было где-то 15 мин., т.е. 10 мин..

Теперь я поговорю о том, чем дизайн для мобильных отличается от дизайна в целом.

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

как в дизайне для больших экранов. Только еще больше.

Для больших проектов важно придумывать умные компромиссы.

И есть такие характеристики дизайна для мобильных, которые уникальны.

Это такие вещи, которые вы не можете сделать на стационарном компьютере.

Итак, здесь мы видим сравнение экрана моего Pre с экраном моего ноутбука.

Вот первое отличие мобильного устройства.

Это количество точек света, которое есть в вашем распоряжении, чтобы делать что-то.

Здесь соотношение пикселей точное. 1:1.

Но физический размер точек намного более сжатый на экране.

И на самом деле - он составляет где-то 2/3 от этого размера.

И если вы не осторожны.

Если вы создали ваше приложение на большом экране, а потом всунули его в маленький,

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

Поэтому нужно быть осторожным.

Но это также позволяет вам сфокусироваться на вещах, которые действительно важны.

И это то, что уникально для дизайна мобильных.

Другая уникальная вещь - механизмы ввода информации.

Это клавиатура моего Pre в сравнением с клавиатурой ноутбука.

И здесь размеры соблюдены.

Очевидно, что когда вы создаете приложение для написания романов,

то нужно будет сфокусироваться на платформе мобильного,

потому что сложно печатать долгое время на маленькой клавиатуре.

Это утрированный пример, но вы можете это применить его к любой вещи,

которая относится к введению информации.

И вот это еще один пример.

Еще одна особенность мобильных, которая уникальна, - это как люди пользуются телефонами.

Это как ноутбуки в классе.

Ты сел, включил ноутбук - и ты должен сидеть рядом с ним, если ты им пользуешься.

Это не что-то повседневное.

Ты должен распаковать его из сумки, открыть его, загрузить.

Если ты пользовался им весь день, то нужно его где-то зарядить.

А мобильные устройства люди испульзуют в обычной жизни, очень обыденно.

Очень короткими сеансами с частыми приостановками.

И у них нет плана того, как они будут использовать мобильный.

Та особенность, которая важна в сфере дизайна приложений для мобильных,

это учитывание того, как мобильные использутся.

Он у вас всегда под рукой, вы решаете проблему там, где она произошла.

Вы можете попользоваться телефоном 5 мин., а потом идти и делать что-то другое.

И эти соображения, мне кажется, очень важны.

Также существуют некоторые возможности, которые обусловлены тем,

что это такое устройство, в котором есть приложения и которым люди пользуются постоянно.

И из-за того, что они пользуются им постоянно, то вы можете надеяться на то,

что люди будут часто взаимодействовать с вашим девайсом.

Много коротких сеансов.

Человек и это устройство могут быть где угодно.

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

Например, какие-то вещи нельзя сделать, если у вас нет с собой телефона.

Другая особенность вашего телефона в том, что в нем содержится ваша жизнь.

В нем содержится все: в нем календарь, он знает, кто ваши друзья,

он знает, где вы находитесь каждую секунду.

И такая операционная система позволяют вам как разработчику приложения,

получить доступ к этим данным.

Какие-то приложения в какой-то степени уже используют эту возможность и расширяются в этом направлении.

Вы можете сделать множество разумных выборов в отношении того, что вы предоставляете пользователю.

В itune store лежат тонны приложений.

И, кажется, уже есть приложения, которые выполняют свою функции, основываясь на местоположении пользователя.

Ты заходишь в магазин, а тебе говорят "Эй, не забудь купить молоко".

Вещи такого рода.

То есть открывается множество возможностей, если учитываешь, что человек постоянно носит с собой телефон.

Итак, это все, что относится к вопросу "Что такое дизайн для мобильных?"

Перед тем, как мы начнем говорить о диайнерских техниках, может, у вас есть вопросы?

Или вы хотите, чтобы я рассказал о чем-то подробнее?

Нет? Хорошо.

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

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

и эти техники помогут вам быть уверенным в том, что ваше приложение учитывает эти принципы.

Это, конечно, не полный список.

Мне нужно было бы провести десять таких встреч, чтобы описать все техники.

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

И я расставлю техники примерно в хронологическом порядке.

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

до того момента, когда вы готовы начать.

Я буду следовать приблизительному хронологическому порядку.

Правда в том, что это взаимообратный процесс.

Вы что-то начинаете, потом возвращаетесь к началу, потом вперед, потом назад.

И в этом интерес этого процесса.

И в конце презентации я покажу пару слайдов, когда буду говорить о других ресурсах,

которые я обнаружил, - о книгах и сайтах, - которые полезны для дизайнера.

Итак. Давайте начнем с идеи.

Перед созданием приложения, вы должны иметь идею того, что вы хотите сделать.

У кого здесь уже есть идея приложения, которое они хотят сделать?

Несколько... Хорошо.

Тогда эта часть будет для вас легкой.

В начале я говорил, что при создании приложения, или написании книги, или написании истории

вы начинаете с вещей, которые вас заботят.

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

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

- саморефлексия. Вам нужно отстраниться от себя

и наблюдать за своими действиями.

И нужно выяснить, что делать удобно, а что - нет.

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

но в настоящий момент ты этого не можешь делать.

Это хороший вопрос.

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

то поймите - за что именно вы его проклинаете.

Или вы ловите себя на том, что говорите "Было бы круто, если б ..."

Или в целом - для какой болезни вы хотите придумать лекарство?

А как на счет людей вокруг вас? Людей, о которых вы заботитесь - семья, друзья.

Что они делают? За что они проклинают компьютер?

Что вы можете сделать, чтобы помочь им решить эти проблемы?

Когда вы ответите на эти вопросы и найдете то, что вас заботит, нужно будет применить фильтр реальности.

Знаете ли вы технологию? Нет? Какие уже есть приложения для этой идеи?

Какие есть возможности в программном обеспечении?

Это пересечение ваших знаний, ваших возможностей и той фантазии, к которой вы стремитесь.

И из этой области выходят хорошие идеи.

И мы подошли к тому моменту, когда нам понадобятся бумага и карандаш.

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

какое приложение вы бы хотели сделать.

Я расскажу вам про свою идею, которую я подготовил.

И я надеюсь, что кто-нибудь ее тоже напишет, потому что я жду создания такого приложения.

Я хочу тайм-трекер.

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

Но я хочу, чтобы это было супер-просто.

Я не хочу печатать "Сегодня, начиная с 16:15 я..."

Я хочу, чтобы была форма для заполнения, разделенная на блоки, которые мне подходят.

Это примерное описание. Мне нужен такой счетчик времени,

который автоматически делит мой день, говорит мне, как я потратил время.

Который взаимодействует с моим календарем, с моим телефоном, с моей почтой.

И знает, как я провожу свое время.

Если вы не успели записать, не беспокойтесь. Просто запомните мысль для следующего шага упражнения.

Итак, у вас есть идея.

Теперь вы должны превратить эту идею в удобное приложение,

которое обладает всеми теми характеристиками, о которых мы говорили.

Кажется, я уже спрашивал это в начале, но я не помню ответы.

Кто-нибудь из вас ходил когда-нибудь на курсы рисования?

Нет? Ладно.

На курсах рисования есть принцип: если вы хотите сделать эскиз с живого объекта,

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

Сперва вам нужно зафиксировать глобальные формы того, что вы пытаетесь нарисовать,

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

Вы не должны застревать на прорабатывании какой-то маленькой части,

потому что остальная часть дизайна будет непропорциональной.

И техники, о которых я собираюсь рассказать, похожи на эту стратегию.

Мы попытаемся уловить общие черты вашего приложения,

не зацикливаясь на деталях.

И тогда у вас будет общее впечатление того, как это будет выглядеть.

И вы в нужное время будете фокусироваться на нужных вещах.

Мы должны задать себе несколько вопросов, когда мы думаем о приложении.

Вы должны подумать о пользователях вашего приложения.

Кому интересна та идея, которая пришла вам в голову?

Каковы ваши цели в отношении пользователей? Что вы хотите, чтобы они смогли делать?

И чем отличается ваше приложение?

Есть ли другие приложения, которые делают то же самое?

Или существуют другие пути решения этой проблемы без использования какого-либо программного обеспечения?

И мы поговорим о моем приложении.

Пользователи, которым понадобится такой тайм-трекер:

Суетливые люди. Лайфхакеры.

Вы были на lifehacker.com? Отличный сайт.

Люди со знаком зодиака Дева. Я Дева.

И, может, быть юристы. Им нужно все записывать.

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

Цель моего приложения Номер один:

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

Номер два: я не хочу, чтобы тайм-трекер сам стал заданием,

про которое нужно все время думать.

И далее: чем отличается мое приложение от всех остальных подобных?

Приложений для тайм-трекинга очень много.

Минимум затрат. Я хочу совершать как можно меньше действий.

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

С GPS'ом и всякими другими крутыми вещами.

Итак, о чем мы поговорили?

У вас есть идея, у вас есть мысли о том, кто ваши пользователи.

У вас есть мысли о том, каковы цели вашего приложения.

И вы понимаете, чем ваше приложение отличается от других.

Далее необходимо провести небольшое исследование.

Что я имею в виду, говоря об исследовании? Это не про чтение книг.

Просто эта картинка была доступна на flicr, и поэтому я ее вставил.

Исследование - это когда ты разговариваешь с людьми, наблюдаешь за ними,

показываешь им то, что ты делаешь.

Исследование не скажет вам, что именно нужно разрабатывать.

И оно не покажет вам, хороша ли ваша идея.

Но оно может вам показать, что ваша идея очень плохая.

Но вот удачная идея или нет - исследование не покажет этого.

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

У вас есть общая картина того, что вы пытаетесь сделать.

Но вы не поймете, как это будет выглядеть,

пока вы не начнете говорить с людьми, пока вы не начнете такое исследование.

Можно провести такую аналогию.

Это как предыстория романа.

Когда вы пишете роман или рассказ,

вам нужно как-то уместить историю про детство тех персонажей,

которые в книге существуют только на 20 страницах.

Вам нужно понять весь окружающий мир, о котором вы пишете.

Тогда как в книге вы пишете только необходимое.

И также дело обстоит с приложениями.

Вам нужно понять контекст, в котором живет ваше приложение.

Перед тем, как думать о том, что нужно выбрать, к каким компромиссам прийти.

То есть это поможет создать контекст для дизайна.

Потом вам это поможет обдумать детали.

Когда вы приступите к прорисовыванию экрана, про которое мы поговорим позже.

Это исследование поможет вам понять детали, которые значимы для людей.

И есть очень маленькие детали, которые много что определяют для людей,

которые помогают людям в использовании вашего приложения.

И это поможет вам обобщить ваши идеи.

Вы начнете исследование, и то, что на ваш взгляд было важным,

окажется надуманным.

И окажется, что этот тайм-трекер не так уж важен.

А более важно продумать интегрированность с другими приложениями.

Или что-то, о чем я даже не думал. Например,...

Даже не знаю... таймеры, которые дают сигнал, что ты слишком долго что-то делаешь.

Вот для чего будет ваше исследование: установка контекста.

И как я уже говорил, техники исследования... Вам не нужно идти в лабораторию.

Вам только нужно разговаривать с людьми. Говорить им:

"У меня есть вот такая идея. Чем она была бы для тебя полезна?"

И ключевой момент: нужно пытаться не вести людей за собой,

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

как бы они взаимодействовали с вашими идеями.

Говорите с ними.

Предлагайте им сценарии, в которых, на ваш взгляд, ваши идеи могут быть полезны для людей.

И следите за тем, что они делают.

Смотрите, как они взаимодействуют с новым... Где хороший пример?

Новое приложение для фотоаппарата, которое позволяет... не знаю...,

которое делает цифровое увеличение, например. Или что-то еще, чего у них не было.

Наблюдайте за тем, как люди пользуются телефонными фотоаппаратами...на вечеринке.

Если им приходится подходить ближе, чтобы сделать фото.

При этом композиция была бы лучше, если фотографировать на расстоянии.

Все это поможет вам понять, какое приложение вы можете создать, чтобы сделать людей счастливыми.

Вот это некоторые основные идеи.

Последнее в этом списке:

Задумайтесь на пару минут, чтобы выяснить, что еще поможет вам понять вашу идею.

В какой ситуации можно исследовать практичность вашей идеи?

И когда вы закончите с этим, то мы поговорим и обсудим это.

Я поместил на доску пару пунктов.

Это пути, с помощью которых я могу исследовать эту идею получше.

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

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

"В 10-15 я начал делать это, в 10-25 я остановился"

И что тогда? Что-то сработало? Ты что-то узнал?

Что было для тебя неприятным, а что понравилось?

Все это поможет мне понять, что я могу сделать, чтобы помочь им.

Еще я думал о том, что можно делить время, основываясь на местоположении.

В это время в этом месте.

Просто поговорите с людьми и поймите, как они проводят свой день.

Если оказалось, что люди сначала дома, потом на работе, потом опять дома,

то, наверно, это не очень полезная функция.

А если оказалось, что люди много где бывают за день,

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

Кто хочет поделиться своей идеей и поработать с ней?

Итак, упражнения. Цель этого листа бумаги -

это не обязательно только для тех, кто хочет разрабатывать приложения.

Это просто способ структурировать вашу мысль.

Это способ направить вас в сторону хода мыслей дизайнера.

Надеюсь, это было полезно.

Перейдем к следующему шагу.

Итак у вас есть куча слов, описывающих приложение,

которое вы хотите создать. и описывающих пользователей, цели.

А теперь пора начать думать о том, как люди будут этим пользоваться.

Каковы разные части вашего приложения, которые должны быть взаимосвязаны?

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

Это термин, который мы постоянно используем в Palm.

Я объясню, о чем мы говорим.

Мы говорим о сценах. Сцены в спектакле.

Это место, где происходят действие, где герои делают то, что они собирались сделать.

И мы думаем об этом примерно так же.

Экран - это сцена. Или сцена - это экран.

Или сцена может быть только частью экрана.

В платформе webOS у нас есть Dashboard. Я покажу вам позже, что это такое.

Это интерфейс, где приложения сосуществуют друг с другом.

Dashboard - это тоже сцена.

То есть сцена - это место, где происходят действия.

И подумайте о том, какое задание главное, из тех, что человек хочет сделать.

И какую сцену вы можете создать, чтобы он мог это сделать?

Как эти сцены будут связаны друг с другом?

Какие действия нужно предпринять, чтобы попасть из одной сцены в другую

По сути мы говорим о создании блок-схемы для вашего приложения.

Я хочу вас попросить кое-что сделать..

Вы можете писать на обороте листа или возьмите у меня чистую бумагу.

Но перед этим я покажу вам пример.

Все это запомнили? Я сотру это.

Я нарисую блоки, которые представляют собой отдельные сцены.

Я предполагаю, что будет некое центральное место, где пользователь будет взаимодействовать с приложением.

Это что-то похожее на dashboard.

Оно всегда открыто, но оно не видно вам, пока вы не захотите его использовать.

И эта панель позволит вам начать или прекратить какое-то действие.

Начать отсчет времени, закончить. Начать следующий отсчет.

Я назову это "Панель Начать/Остановить"

И есть пара действий, которые пользователь может запустить или остановить.

И это не выкинет его из этой области, потому что когда мы запускаем какие-то действия,

нам обычно не показывают, что какие процессы уже идут.

И я оставлю все этот тут, не стану перемещать.

Вот здесь отметка действия: "Начать/Остановить".

А вот отсюда уже можно перейти к сцене, где будут показаны блоки времени.

И я нарисую... Не важно, каким образом происходит переход.

И это список блоков времени.

И, наверно, нужно, чтобы человек мог увидеть детали блока.

Количество минут, местоположение... Может, там были какие-то встречи.

Я назову это "Детальная информация о блоке"

И я пока не думаю, как буду переходить к этому блоку от списка блоков.

И нужно, чтобы был обратный путь к списку.

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

Если я хочу упорядочить это в соответствии с местоположением,

то здесь я помечаю "Вид на местоположение".

А здесь еще, например, обзор телефонных звонков, в котором показано,

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

И нужны обратные пути.

Вот это, пожалуй, основные сцены.

Если у меня будет приложение, которое будет охватывать большинство из этого...

Это ведь основа моего приложения - большинство вещей, которые я хочу с помощью него делать.

И вот что я имею в виду, когда говорю о создании карты.

Потому что после того, как вы создадите такую карту,

вы уже можете брать ее и думать о том, какие экраны (интерфейсы) вам нужно сделать.

Потому что это и есть список сцен, которые должны быть выполнены.

И думать о том, как эти сцены будут взаимодействовать.

И... давайте это сейчас и сделаем.

Пожалуйста, возьмите ту идею, с которой вы начали.

И поймите, как можно составить к ней карту.

Если вам нужна бумага, тут есть. Могу передать кому-то.

Итак, что у нас уже есть?

У нас есть текст с описанием приложения, которое вы хотите создать,

с деталями, которые вам помогут понять позицию этого приложения.

И у вас есть список сцен, которые будут отображены в вашем приложении.

И последняя часть - эскизы экранов, которые вы хотите создать.

И я думаю, что я не буду уделять время на это в моем занятии.

Но я уже распечатал много... Я вам покажу, о чем я говорю.

У меня тут много "сеток", которые очень полезны,

когда ты пытаешься сделать дизайн приложения.

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

Большие сетки в высоту 48 пикселей, что примерно подходит для того,

чтобы начать делать экраны, которые будут удобны для человеческих пальцев.

Чем больше, тем легче рисовать.

У меня есть сетка поменьше. Это реальный размер.

Здесь можно понять, какими будут кнопки в реальности.

Не стесняйтесь, можете потом взять себе эти листы,

если считаете, что вам это поможет.

Когда вы приготовились делать эскизы, подумайте о шаблонах.

Есть очень много шаблонов, которые позволили людям решить какие-то проблемы.

Большинство из них хорошо оформлены.

У iphone есть шаблоны. У нас есть шаблоны.

Шаблоны для таких вещей как меню.

Или другие списки такого характера, или шаблоны кнопок.

И нужно использовать эти шаблоны настолько, насколько это возможно для вашего приложения.

Потому что люди увидят ваше приложение и сразу поймут, как оно работает.

Им не придется чему-то учиться.

Они будут знать, что именно случится, когда нажимаешь вот здесь,

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

Есть, например, приложение под названием Style Matters.

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

В Style Matters есть все компоненты работы с оформлением,

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

И мы выяснили, что те, кто работает со Style Matters, тот делает более хорошие приложения.

Это хороший способ начать изучать то, каким может быть оформление.

Еще я расскажу о некоторых основных принципах визуального дизайна,

которые следует держать в голове, когда вы делаете эскизы ваших экранов.

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

это когда вид приложения объясняет, для чего это приложение,

и когда он укрепляет значение вашего приложения.

В этом вся суть принципов визуального дизайна.

Давайте перейдем конкретно к принципам.

Один из принципов - это баланс.

Если три блока справа имеют ту же высоту и ту же ширину, что и блок слева,

тут все сбалансировано.

Если бы большой блок был бы намного выше, то ощущался бы дисбаланс.

Баланс устраняет противоречия.

Если человек смотрит на сбалансированную композицию, то ему легче,

его взгляд свободно гуляет по композиции.

Они не думают о том, почему одна часть больше, им этого не нужно.

Ритм. В основном применимо к спискам.

Списки есть практически в любых приложениях.

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

Я вижу эти три штуки, я знаю, что они делают,

и такие же блоки внизу - я могу понять, для чего они.

Доминанта.

Часто когда мы разрабатываем приложение, то есть вещь, которая важнее всех остальных.

Можно использовать цвет, как у меня тут,

чтобы отметить эту вещь как доминанту.

Можно использовать выделения толщины букв, курсив, форму букв,

можно использовать пробелы, отгораживая доминанту от остальных.

Доминанта помогает обозначить значение вашего приложения.

Единство. Все эти блоки объединяются в одну группу.

И когда кто-то это видит, то он знает, что все это взаимосвязано,

потому что это группа.

Группировку можно делать разными способами. Можно делать по принципу "в одном месте".

Как я делал тут. Когда все рядом.

Можно делать это с помощью цвета. Вещи, которые одного цвета, это тоже группа.

Можно делать это шрифтом или пробелами.

Я не стану сейчас проводить упражнение.

Как я уже сказал, если вам это интересно, то вы должны взять вашу идею приложения

и попробовать нарисовать несколько эскизов экранов.

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

Просто когда вы представляете это как-то абстрактно,

вы не понимаете, что необходимо, а что нет.

Последняя вещь, которую мы обсудим, - это движение.

Это очень важно проработать, чтобы помощь вашему дизайну.

Классический пример. На iphone.

Вам показывают, что вы движетесь вниз по иерархии. Вам показывает, как страницы перелистываются.

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

И когда перелистываете назад, то движущаяся страничка выезжает с другой стороны.

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

Если вы движетесь вниз по списку, то страницы "прилетают" сверху,

если вы листаете в обратном порядке, они движутся в обратном направлении.

Подумайте о том, как использовать движение в вашем приложении.

И о том, как вы можете с помощью этого прояснить значение приложения.

Но будьте осторожны, потому что когда на экране слишком много движения, то он засоряется.

Это может стать деструктивным, может сбить людей с толку.

Итак, вот вы все это сделали. Вы нарисовали эскизы,

у вас есть концепция того, что вы пытаетесь разработать.

Следующий шаг - оценка.

Сделайте оценку.

Посмотрите на ваше приложение и решите, что вам в нем нравится.

Достигнуты ли цели? Удовлетворены ли потребности?

Если нет, то что не сработало?

Попробуйте проанализировать, какие "сцены" не работают.

Посмотрите со стороны и выясните все это.

Вернитесь и нарисуйте еще несколько эскизов.

Может, у вас не те цели. Посмотрите опять на цели, повторите все.

И продолжайте все это делать, пока вы станете всем довольны,

пока не почувствуете, что все правильно.

И далее - протестируйте приложение.

Особенно, если все это делали на бумаге.

Вы нарисовали эскизы, положили все в стопку,

и идите найдите кого-то и скажите: "Эй, посмотри вот на это.

Чтобы будет, если нажмешь на старт?"

Он скажет "Вот что произойдет, если нажмешь на старт"

Ты показываешь ему следующий лист: "Вот что произойдет. Ты этого ожидал?"

И пытайтесь вот так опросить людей.

Это основная концепция теста.

Не обязательно делать это в лаборатории, вы можете делать это где угодно.

Когда вы проводите такие тесты, вы понимаете, что люди думают об этом.

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

Постарайтесь не помогать им, когда они где-то застряли.

Это очень сложно. Но позвольте им поразбираться, чтобы понять, из-за чего они застряли.

И записывайте ваши впечатления сразу же после теста. Очень важно записать все сразу,

потому что вы забудете почти все через пару часов.

И когда вы это сделали, пересмотрите ваш дизайн, и все сделайте заново.

В этом процессе привлекательно то, что вы всегда можете начать разрабатывать ваше приложение.

И сейчас становится все легче это делать. Появляется много инструментов для этого.

В Palm на следующей неделе мы будем тестировать приложение для создания эскизов в Photoshop.

Важно увидеть то, как люди держат в руке телефон, как они с этим взаимодействуют.

И такое приложение позволит нам делать картинки на компьютере, а не рисовать эскизы вручную.

И самый важный пункт. Нужно знать, когда остановиться.

Как я говорил в начале, все это - компромисс.

Не бывает идеального приложения.

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

Нужно использовать те инструменты, о которых мы говорили:

Кто ваши пользователи? Каковы ваши цели? И т.д.

Это поможет найти компромиссы.

И когда вы это сделаете, вы поймете, когда остановиться.

Я постараюсь рассказать об этом быстро. Я покажу только пару примеров приложений.

И мы сможем перейти к вопросам.

Это приложение называется Twee. Это клиент для Twitter для webOS.

Не могу понять, что у нас тут с отображением цветов. Вот эта часть красная. А эта - черная.

А эта - синяя. А вот эта часть внизу - серая.

Выглядит клево. Все гладкое. Есть такой металлический отлив.

Но... Мы говорили о визуальной доминанте. В этих частях много визуальных доминант из-за красного цвета.

И они сделали это, чтобы видеть перепосты. И если об этом подумать.

В Twitter перепосты мне наименее интересны. И это наоборот должно быть менее доминантным.

Они это сделали с той целью, чтобы рекламировать новых для меня юзеров.

Еще одна интересная вещь в этом визуальном дизайне.

Используя все эти цвета, они задают мне много задач.

Мне нужно понять, почему что-то серое, что-то синее, что-то красное, что-то черное.

Почему тут только 2 строчки, а тут 4. Тут много всего того, что сбивает с толку.

Посмотрим... Это приложение сломано.

Вот это хорошее. Это приложение для рынка. Stock Tracker.

Я хочу обратить ваше внимание на...

Обычно, когда вы разрабатываете приложение, то на конечный результат вы тратите 20% времени.

А на проработку других возможностей, вариантов - 80% вашего времени.

И когда вы разрабатываете приложение, то вы хотите, чтобы эти 20% были легкими для выполнения.

А остальные 80% хотите убрать и не показывать людям.

И вот тут у них проделана хорошая работа. Есть только 4 кнопки.

И это, наверно, и есть те вещи, в которых люди больше всего заинтересованы.

Людям нужно увидеть графики рынка, свой watchlist. Они хотят посмотреть новости рынка и свое портфолио.

Yelp - пример приложения, где все очень просто. Вот тут они хорошо поработали.

Они убрали все помехи. У них есть список...

Они не могли поставить сюда кнопки, потому что существует слишком много видов поиска, которые могут вам понадобиться.

Тут есть простой список. Нет никаких кнопок. есть прокрутка. И простой поиск.

Они спросили, что для вас наиболее важно.

Они замечают, что люди ищут чаще всего. Заметьте, что это не алфавитный порядок.

Я просто зашел в это приложение и вот что увидел.

Когда я начинаю печатать, это поле немного раздвигается. Вы видите это движение?

И мне кажется, что эта часть ждала меня, чтобы появиться.

Из-за этого будто бы они внимательны к тому, что я пытаюсь сделать.

Выделяют то, что важно для меня. Конкретно: Для какой области этот поиск? Каково местоположение?

Посмотрим, могу ли я найти еще один удачный пример.

Engadget - это еще один пример комплексного вида.

Тут много чего происходит.

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

усложнив, уплотнив поле действия.

Их компромисс в том, что это выглядит все сложно.

Это также относится и к взаимодействию с приложением.

У них есть эта горизонтальная прокрутка, где вы можете увидеть топовые истории.

А еще есть вертикальная прокрутка, где можно увидеть все статьи топ-листа.

И тут внизу у них есть еще фильтры.

Фильтров много, и не все понятны. Я не совсем понимаю, что они делают.

Но я хотя бы могу получить самую важную информацию.

Было еще одно, которое я хотел вам показать.

Вот. Если оно не сломано.

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

что здесь они все слишком упростили.

Здесь совсем нет кнопок. Есть только список городов.

И я просто установил это приложение. Я эти города не выбирал.

Они были установлены по умолчанию.

Это отличный простой интерфейс. Я просто хочу посмотреть погоду.

Но как мне добавить город, в котором я живу? Я не очень понимаю.

Они спрятали это в меню. Даже под меню.

Они спрятали это в "Предпочтения". То есть мне нужно зайти в Предпочтения.

И тут я уже могу добавить город. Это пример, когда они слишком все упростили.

Большинство людей, мне кажется, сначала захочет удалить этот список или добавить новый город,

а этой вынесено за пределы поля.

Хочу, чтобы у нас осталось время на вопросы, поэтому я перестаю показывать приложения.

Если кто-то хочет посмотреть-поиграть с телефоном Pre, то пожалуйста.

Ну а сейчас перейдем к вопросам.

Вопрос был такой: Для типичного проекта сколько времени вы бы потратили на дизайн?

Для проекта на 6 месяцев сколько времени я бы потратил на дизайн?

Я бы сказал, что основная часть нашей дизайнерской работы - это одна треть времени.

Сложно сказать, потому что бывают разные проекты. Какие-то с сильным акцентом на дизайн, какие-то нет.

Я шутил, когда говорил, что вы можете потратить все 6 месяцев на дизайн,

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

Карта создается в самом начале. И экраны сделаны тоже где-то в начале.

Но какие-то штуки с движением мы можем подправлять и в самый последний день.

Давайте сначала Ваш вопрос.

-Сколько исследований нужно, чтобы сделать продукт? Например, Google быстро выпускает продукты.

И думаете такой подход подойдет для дизайна мобильных приложений?

-Я думаю, что ставки немного выше, когда мы говорим о такой персональной вещи как твой телефон.

Раньше мы тратили много сил и времени на первые проекты.

И проводили больше исследований, чем нужно было.

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

Но между эскизом твоего экрана, который помогает тебе оформить мысль,

и физическим взаимодействием с новым устройством огромная разница.

Я ответил на ваш вопрос?

Перед тем, как я переключусь, есть еще вопросы?

Лично я, как дизайнер...

Я, как хороший босс, убираю скучные вещи. И люди, которые работают на меня,

занимаются интересными вещами.

Я покажу вам то, что мы изменили в Bluetooth в старой версии Palm.

Кто знает, что здесь значит "Различение"? Два с половиной.

По сравнению с всеми людьми вообще, здесь пропорция знающих гораздо больше.

Раньше было так. Вы должны включить устройство.

Потом включить Bluetooth на устройстве. Затем включить Различение.

Пойти поделать что-нибудь, пока идет передача данных.

Ну и как часто вам нужно, чтобы телефон нашел другой телефон?

Это нужно, только когда вы состыковываете вместе два телефона.

Никто не знает, что именно значит "Различение".

А теперь Различение включается, когда заходишь в Bluetooth, и выключается, когда выходишь.

Вот такое отличие. Bluetooth - это не очень интересно.

Так... А что интересно?...

Давайте сравним календари.

Я положу еще iphone, люблю смеяться над календарем в iphone.

Люди любят говорить о способностях телефонов тачскрином. iphone, Pre и т.д.

Из-за этих телефонов вы отучаетесь работать с более простыми устройствами.

Что было раньше тачскрина? Мышка или клавиатура, например.

Вы должны понять, что вот эта штука, если я ее подвину в сторону, то что-то произойдет на экране.

И всегда есть какое-то удаленное звено во взаимодействии.

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

В обоих случая мы видим календарь на месяц.

Они отображаются похожим образом.

Мы смотрим и говорим: Мы смотрим на календарь месяца.

Мы хотим узнать, что нас ждет в конце месяца.

Это также важно, как знать, что происходит на протяжении месяца.

И мы хотим, чтобы вы могли чуть-чуть увидеть предыдущий или последующий месяцы.

iphone показывает только сам месяц.

Еще мы сделали такую вещь.

Вы видите, что учитывается весь год. Месяц сверху и месяц снизу.

Если я хочу попасть в Май, то я просто прокручиваю. Туда, обратно.

Это физическое взаимодействие, ты интерактивно получаешь то, что тебе нужно.

Еще заметьте, что движение на экране повторяет мои движения. Я кручу вниз, календарь едет вниз.

Это ожидаемо.

На iphone вы так сделать не сможете. Я провожу по экрану - ничего не происходит.

И в горизонтальном направлении то же.

А когда я нажимаю "Назад", я нажимая для перехода в Апрель.

Но почему-то он переворачивается вертикально. Нажимаю "Вправо" - опять вертикально.

Вот так я веселюсь над iphone.

У меня есть еще два слайда, которые могут быть вам полезны.

Эта презентация будет доступна только в формате видео? Да? Хорошо.

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

Donald A. Norman - мастер дизайна. Его работы вдохновили меня на работу в этой области.

Эмоциональный дизайн - это про то, как изучать эмоциональные реакции людей на твой дизайн.

Don't Make Me Think (Не заставляйте меня думать). Еще одна книга. Ей, наверно, уже лет 15.

Это классика, где рассказывается о веб-дизайне.

Из заголовка вы можете понять, что она про то, как сделать так,

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

The Inmates are Running the Asylum ("Психбольница в руках пациентов"), автор Alan Cooper.

Здесь очень хорошо рассказано про персональный подход,

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

Для вас, как для разработчиков, это может быть немного раздражающим.

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

И одновременно с этим он твердит "Дизайнеры должны быть главными в разработке".

Bruse Sterling на самом деле писатель-фантаст, но эти две книги не про фантастику.

Shaping Things ("Придавая форму вещам") про индустриальный дизайн.

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

Tomorrow Now ("Будущее уже началось") - это про следующие 50 лет нашего физического окружающего мира.

Он пытается это представить.

Эта книга поразит вас, она отличная.

А это несколько вебсайтов.

Первый - это профессиональная группа для взаимодействия дизайнеров.

Но у них там есть очень много отличного материала.

Если вы начнете использовать Photoshop или другие продукты Lynda.com, то это отлично.

Это платно, но качество отличное.

У них есть онлайн-сопровождения и видеоуроки.

Jared M. Spool из uie.com - это тоже крутой мастер, который специализируются на тестах на удобство.

Он король тестирования приложений.

Там много хорошего материала, есть блог.

И последнее - это дизайнеры, с которыми я раньше работал. Их блог очень интересный.

Это такая коллекция дизайнерских идей и мыслей.

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

Они считают, что стикер для дизайнера - это ценный инструмент.

И это все.

Спасибо большое.