Трогательный дизайн: введение

Маркетинг10 Контекстная реклама15 Создание сайтов15 SEO6 Комплекс услуг8 Дизайн13 Программирование7 SMM3 Digital2 Использование сервиса5 Мобильная разработка4 Юзабилити2 Брендинг2 Менеджмент Интернет-маркетинг1 Интранет1

ДизайнСтатья

MobileГрафический дизайн

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

Максим Десятых red_mad_robot

13 мая 2012

1 354

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

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

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

— Очевидное невероятное —

Обычно в представлениях дизайнера пользователь — это ловкий, умелый, внимательный, догадливый, неутомимый снайпер, попадающий во все кнопки, читающий все описания и посещающий все возможные экраны во время работы с приложением. Не хочу сказать, что на самом деле он тупой и криворукий, но оно близко к этому. И дело не в личных качествах людей, а в особенностях ситуаций пользования мобильными устройствами — все делается быстро, часто на ходу, нередко параллельно с другими важными делами.

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

Типичный пользователь скачивает 10 приложений в месяц, но не запускает их более 20 раз прежде, чем удалить; они могут еще жить какое-то время на устройстве, но только 15% приложений активно используются в течение недели после установки. Если вам насрать, и это такая стратегия — продать один раз тысяче идиотов коллекцию неприличных звуков, — то выбросьте этот параграф из головы. Всем остальным стоит узнать, что половина скачиваний приложений делается по рекомендации. Формируйте лояльную аудиторию.

Особенность смартфонов такова, что большинство пользовательских сессий очень коротки. Это такой спринт — достал, включил, сделал, выключил, убрал. Не мешайте этому процессу, а помогайте. В идеале приложение должно состоять из одной кнопки — ’Немедленно сделать то, что мне нужно’, но в более короткой формулировке. Исключение составляют только особые приложения, чья функция заключается в решении сложных задач — игры.

Смартфон — это не устройство для запуска Супертудулиста или Прогнозапогоды 2000. Следует воспринимать его как ящик с инструментами — приложениями. То есть ваше приложение не займет центральное место в жизни человека, оно станет лишь одним из множества, но своё собственное место оно занять должно. И в этот момент становится ясно, что приложение должно наилучшим образом выполнять одну основную функцию, чтобы быть востребованным, в точности как и инструмент. Быстро, просто и эффективно.

Если вы разрабатываете приложения, то вероятно собаку съели на всех ньюансах управления тач-интерфейсами, знаете, где надо погладить и как махнуть, чтобы случилось всё, что требуется. Плохая новость: пользователи совсем на вас не похожи. Самым очевидным для них является нажатие пальцем на изображение кнопки, особенно талантливые могут подвинуть бегунок и покрутить барабан... предложите задействовать 2 пальца — и даже у самых сообразительных случится деление на ноль. И еще раз — просто и эффективно.

Вообще, пальцы — поразительное изобретение: они могут измерить температуру, достать недостижимое, заткнуть дырку или развеселить, но становятся адски неуклюжими, когда дело доходит до управления тач-интерфейсом. Неплохо бы держать в голове, что пользователи постоянно промахиваются мимо кнопок, нажимают что-нибудь ненужное, когда нужно скроллить, запускают что попало, когда хотят смахнуть пылинку с экрана... Короче, помните, что если на экране больше одного активного элемента, рано или поздно каждый ошибётся. Делайте так, чтобы ошибок было как можно меньше, и их цена стремилась к нулю, иначе можно даже не заметить, как количество пользователей начнет уменьшаться, а злобы в этом мире станет больше.

— Размер имеет значение —

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

Но это только полбеды. Интерфейс мобильного приложения пользователь держит в руках и управляется при помощи пальцев, а значит дизайнер начинает думать уже не о пикселях на экране, — он становится промышленным дизайнером, разрабатывающим опыт взаимодействия с физическим объектом. Все элементы на экране становятся элементами управления устройством, и нужно уже прорабатывать куда больше вопросов: удобно ли работать одной рукой? а левше? а управляя автомобилем? Это важно.

Смартфоны рассчитаны на управление пальцами, а точнее — большим пальцем. И тут правильно было бы сохранить преимущество, убедившись, что основные трогательные элементы находятся в его досягаемости. Достаньте свой смартфон, возьмите в одну руку и, не включая экран, очертите на нем зону комфортного доступа большим пальцем — вот здесь будут основные функциональные элементы.

Дизайнеры Гугл только к четвертой версии Андроид поняли, почему же им так не нравилось нажимать на кнопки, ранее расположенные сверху, — даже если держать устройство так, чтобы доставать до них, начинается фрустрация, ведь экран большую часть времени не виден из-за мелькающего пальца. В общем, навигация снизу, а информация с верху. Не перепутай.

Возвращаясь к размеру, — он имеет значение. Без долгих рассуждений скажу, что Эппл считает 7 мм оптимальным размером для кнопки. Это 44 пикселя на старых добрых и 88 пикселей на ретина-дисплеях. И речь не обязательно идет о размере видимой кнопки — она может быть меньше, но активная область у нее должна быть правильного размера.

Надо сказать, что 44, 88, 176 — вообще волшебные числа. Ориентируйтесь на них при проектировании модульной сетки, и все будет в порядке.

От сайтов у нас осталась привычка — если что-то не помещается, то скроллинг нам в помощь. Не всегда это хорошее решение — в идеале на экране должно поместиться все необходимое. Во-первых, незаконченность заставляет пользователя задумываться о продолжении, что не хорошо. Во-вторых, с глаз долой — кобыле легче, но пользователь быстро забудет то, что не лежит перед глазами и перестанет пользоваться. В-третьих, отсутствие скроллинга позволяет воспринимать устройство цельным физическим объектом, а не виртуальным, что ценно.

Не стоит переживать, что для расширенной информации пользователю придется сделать лишний тап — тапать проще, чем слайдить, и это важное отличие от сайтов, например. Лучше вспомните, что за информацию, всегда находящуюся в одном и том же месте, проще зацепиться глазом, чем если бы она елозила по экрану по мере скроллинга. Но внимание: требуется здравый смысл! Иногда скроллинг все-таки бывает лучшим решением.

В конце концов, все это тесно связано с количеством блоков и элементов на экране. Буду краток: безжалостно убирайте все, что кажется чуть менее важным, чем основная функция экрана.

— Наконец —

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

Начинайте работу со скетчей экранов. Все, как положено: бумага + фломастер (мне оч нравятся японские с длинным мягким кончиком). Бумага потому, что не портит зрение (шутка), а фломастер для того, чтобы избежать преждевременной заботы о деталях. Детализация должна быть постепенной: сперва карта всех экранов приложения с указанием связей — потом прорабатывается каждый экран по функциональным блокам — затем садимся за компьютер и делаем всю остальную работу.

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

Оригинал: http://desyatykh.livejournal.com/11040.html

Леонид Бугаев
Владелец в Nordic Agency AB

«Дизайн для людей» — так звучит принцип, который я запомнил двенадцать лет назад, когда выходил из Студии Лебедева, ныряя во взрослую жизнь с ее стартапами, вебом, интернет-проектами с миллионной посещаемостью, взлетами и падениями, надеждами и разочарованиями.

Сейчас история повторяется. Молодые стартапы и состоявщиеся предприниматели приходят в Академию Экспертов с вопросами о том, как монетизировать мобильные приложения, каким образом создавать ’лучший в мире дизайн’ и как победить Instagram, Facebook, Twitter вместе взятые в битве за миллионы — миллионы посетителей и, как следствие, миллионы монетизированных монет.

Все эти вопросы вызывают понимание: каждый хочет стать автором самого лучшего, самого популярного приложения. Совет очень простой: хотите чтобы все было отлично — создавайте для себя; затем тестируйте на всех окружающих — бабушках, родителях, друзьях и знакомых. Чем больше вы сможете охватить в своем полевом исследовании будущих потребителей — тем понятнее будет, что вы заблуждаетесь. И эти заблуждения нужно встраивать в рабочий процесс, ожидая их, расчитывая на них и с радостью их встречать — потому что с первого раза, как правило, получится не очень.

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

Я пишу эти сроки большим пальцем правой руки на смартфоне: левая рука занята сыном, трех недель отроду. Он сосредоточенно изучает свой большой палец, который явно в ближайшем будущем ему пригодится — для работы с новыми умными устройствами, для которых потребуются новые умные интерфейсы. И мы обеими свободными руками голосуем за советы Макса: сначала бумага и фломастер, затем мозги и только затем монеты.

Two thumbs up!

Владислав Тютюников
Digital AC director в Progression Group

В своё время гениальный советский актёр Евгений Лебедев, при помощи портвейна и полотенца (в спектакле «Энергичные люди» по Шукшину) наглядно продемонстрировал, что самым ненадежным механизмом в человеческом теле являются руки. Действительно, количество функциональных ошибок при выборе объектов навигации, если использовать пальцы рук, на порядок превышает число ошибок, совершаемых при помощи мыши или стилуса. Поэтому вся история разработок мобильного дизайна сводится к уменьшению значимости ошибок, связанных с выбором действий.

Самым важным в решении этой проблемы является правильный выбор кратности модульной сетки. В отличии от автора, я бы советовал пользоваться исследованиями MIT Touch Lab (тач-объекты, предназначенных для большого пальца — от 72 px в нижней части экрана; тач-объекты для указательного пальца — 45-57 px в любой части экрана) и обратить внимание на UI Guidelines основных мобильных платформ, при использовании в дизайне интерфейса элементов предназначенных для multi-touch действий или иных сложных вариантов взаимодействия пользователя и приложения.

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

Егор Аристакесян
Креативный директор и совладелец в Articul Media Group

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

Вадим Митякин
Директор в Eleven

После прочтения у меня было плохое настроение, потому что я понял, что у меня есть коллеги по цеху, которые не хуже меня разбираются в вопросе:) А если серьезно, то статья — отличная! Согласен с каждым словом автора. И это действительно так — чтобы спроектировать хороший, простой интерфейс, нужно проделать сложную работу.

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

Александр Киров
Ведущий мобильный дизайнер в Mail.Ru Group

Как правильно заметил Максим в своей статье — дизайн мобильных приложений максимально приближается к промышленному дизайну по своей сути. Роль смартфонов в современной жизни — предоставлять доступ к необходимой информации на ходу. В таких условиях, смартфон становится неким терминалом, выполняющим поставленную задачу тогда, когда это необходимо его владельцу. Пользователи уже не воспринимают смартфон, как техническое средство, на котором запускаются приложения — для них смартфон и приложение — едины в момент решения задачи.

Согласитесь, что разрабатывать приложения, которыми будут пользоваться, сидя за столом и делать приложения, которые будут использоваться по пути из супермаркета до метро, с сумками в руках — большая разница. Именно поэтому, максимальное внимание нужно уделять тому, чтобы получить доступ к информации было максимально удобно, так как целиться пальцем в кнопку и читать подсказки в условиях мобильности зачастую просто невозможно.

Антон Ткачук
Арт-директор в Touch Instinct

При прочтении части «Очевидное невероятное» про время «жизни» приложений складывается впечатление, что проблема только в дизайне. На самом деле часть из них удаляется просто потому, что они не оправдывают ожиданий по части функциональности. Однако, тут есть контр-пример: если верить комментариям в AppStore, пользователи иногда держат довольно бестолковые приложения только из-за дизайна. В случае с недавно выпущенным и распиаренным to-do менеджером Clear для iOS так и произошло (анализ по комментариям в американском и русском AppStore).

Понравилось предложение «В идеале приложение должно состоять из одной кнопки — „Немедленно сделать то, что мне нужно“, но в более короткой формулировке». Сам придерживаюсь такого-же мнения при проектировании интерфейсов. А вот с тезисом «тапать проще, чем слайдить» не согласен. Жест-свайп, вызывающий скроллинг, значительно больше перекликается с физическим миром, чем нажатие виртуальных кнопок. К тому же, зона для свайпа чаще всего больше по площади, чем небольшая кнопка (речь идет о скроллируемом контенте), требующая четкого нажатия.

Илья Авдеев
Арт-директор в Progression

Спасибо, Максиму за статью, эдакий концентрированный набор логичных и понятных идей. Начинающие разработчики наверняка подчерпнут для себя несколько профессиональных секретов, а уже «матерые волки» освежат в памяти известные истины.

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

Так что давайте примем к сведению все дельные советы Максима и начнем делать полезные и красивые приложения, которые будут удобны и понятны пользователям, решать их задачи и тем самым доставлять им удовольствие. :)

Роман Павленко
Digital Creative Director в Leo Burnett Group Russia

Категоричность автора статьи, конечно, радует, но стоит признать, что общее направление мысли — в целом, правильное и полезное.

Добавлю только вот что (и это относится ко всем дизайнерам, кто работает с интерфейсами, и не обязательно для мобильных приложений): обязательно возьмите рабочую версию интерфейса и протестируйте его. Причем далеко ходить не надо: обратитесь к тем, кто находится вокруг вас, — неважно, продвинутые это пользователи, или нет (вы же не собираетесь установить на разрабатываемом вами приложении значок «Only for advanced users»?)

Так вот, гарантирую: узнаете много нового! И не пренебрегайте результатами теста, даже в том случае, если интерфейс нужно будет кардинально переделать. Пользователь, как и покупатель, всегда прав — придется с этим смириться!

Ксения Артеменко
Бизнес-аналитик в i-Free Innovations

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

Для решения главной цели пользователя _что-то сделать_ образуется задача — «Давай сделаем это по-быстрому». А ведь иногда по-быстрому — это просто взгляд. Не стоит думать, что пользователю удобно разочек тапнуть, провести, и так далее. Даже одно действие для разрешения цели — может безумно раздражать.

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

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

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

Пользователя действительно важно делать счастливым.

Евгений Муравьев
PM в Иннова

Максиму удалось в небольшой статье затронуть значительное количество проблемных и спорных мест, и дать по ним грамотные советы. Практически все их можно воспринимать как истину в последней инстанции. Создание приложения, а я говорю о хорошем и полезном приложении — должен проходить, как настоящий ритуал для дизайнера. В дополнении к совету Максима о взаимодействии пользователя с приложением, хочу сказать, что думать об этом надо не только, когда ты делаешь аппликейшен, а в принципе в любой другой работе.

Я тоже пропагандирую в Иннове, Аййо проектирование интерфейса с листка и маркера. Это позволяет добиться так называемого фаст-фейла. Нарисовал, обсудил, отказался, выкинул, нарисовал еще раз и так далее. Людям с отсутствием воображения, конечно, будет тяжело.

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

P.S. Я не совсем понял на чем основана статистика, которую привел Максим.

Леонид Елецких
Менеджер проектов в Digital October

Еще на этапе проектирования не стоит перегружать интерфейс приложения контентом, функциональными кнопками и переключателями — пользователь обычно ленив, и, если ему неясно предназначение или принцип работы, он не станет разбираться и настраивать каждое отдельное приложение под себя — он установит то приложение, которое ему подходит целиком. А если вы решили дополнить функционал приложения, то старайтесь не трогать уже привычные для пользователя элементы; если же у вас нет возможности добавить функционал без изменения позиции элементов и общей структуры приложения — сделайте абсолютно новый интерфейс, который лучшее подходит под новый функционал. В этом случае главное — не упустить важные и популярные функциональные особенности прошлой реализации (как пример следует рассматривать приложение социальной сети Facebook и приложение-сервис Bump).

Василий Пирогов
Генеральный директор в Бюро Пирогова

Главное, что следует понимать разработчику, — дизайн для мобильных устройств имеет больше объективных ограничений, чем традиционный. Вряд ли можно было бы когда-либо ожидать такого же единообразия в принципах дизайна применительно к «полноформатным» Интернет-ресурсам. Миниатюрность мобильных устройств, с одной стороны, объем информации, который они могут нести, с другой, и «визуально-тактильная» составляющая их использования, с третьей, — в конечном итоге преломляются через призму эргономики и дизайна. В итоге мы получаем более или менее четкий кодекс правил, которые следует соблюдать, чтобы сделать качественный продукт. Эти правила интуитивно понятны каждому пользователю, откровения в этом нет. В этом плане по-настоящему интересными станут «прорывные» решения, которые случаются, как известно, когда кто-то — как раз-таки — нарушает эти правила :) .

Андрей Лебедев
Креативный директор в "ДАЛЕЕ"

Спасибо Максиму за пост. Дизайн для мобильных платформ только-только оформляется как самостоятельное направление в веб-дизайне. Здорово, что появляются первые попытки анализа и структурирования подходов для улучшения его качества.

Создавая мобильные приложения для наших клиентов, мы видим три важных момента:

Адаптивный дизайн еще не вошел в моду, хотя о нем и говорят на каждой конференции.
Непросто совмещать требуемый клиентом функционал приложения с дизайном, удобным для пользователя. Тут лучший способ — показать пример удачного пользовательского интерфейса. Например, Path.
Агентство должно постоянно мониторить западный рынок приложений, так как пока именно на нем выходят самые яркие продукты, с которых стоит брать пример. Например, недавно вышло отличное приложение от Nickelodeon.

Сергей Гринкевич

В принципе, все написано правильно. Для кого-то использовать предложенные советы — реальный прогресс. Но работа над интерфейсом начинается задолго до того, как можно будет начать рисовать карандашом на бумаге.

Во главе угла — стратегия. Кто наша целевая аудитория? Какие ее потребности мы решаем? Как ЦА использует девайс? Какие пользовательские сценарии?

А уже потом, карта сайта и карандаж с бумажкой. :-)

Макс Гулевич
Руководитель отдела проектирования и дизайна в РосБизнесКонсалтинг

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

Дайте спроектировать приложение самому молодому и слабому специалисту в вашей команде, либо же просто непрофильному специалисту (сисадмину, бухгалтеру), желательно, чтобы он не был фанатиком мобильных платформ и(или) имел обычный телефон, но тем не менее являлся представителем ЦА (вы же верите в то, что со временем у всех будут смартфоны?), затем посмотрите, что получилось, и сделайте микс, оставив все лучшее и отбросив очевидные ляпы. Почему так? Все очень просто: сотрудник сгенерит свежие идеи, поскольку он еще не подвергся влиянию моды, глаз его не замылен. Ну а вам придется все это переработать — тут уже ничего не поделаешь, это ведь ваша работа :-). Таким образом можно проектировать преимущественно простые приложения, ограниченные по функционалу и возможностям, т.е. мобильные платформы сюда очень хорошо подходят.