?

Log in

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

май. 4, 2012 | 06:03 pm

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

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

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

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

Readability for iPhone
Readability for iPhone


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

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

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


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


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

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

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

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

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

Tweetbot for iPhone
Tweetbot for iPhone


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

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

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

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

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

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

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

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

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

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

Pocket for iPhone
Pocket for iPhone


– Наконец –

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

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

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

Whiglehop for iPhone
Wigglehop for iPhone


– Конец –

Ссылка на запись | Высказаться [8] | Поделиться

Кино про дизайн

янв. 18, 2012 | 03:54 pm

Фильм в пяти частях об истории дизайна. 5 раз по 45 минут правильной информации. Недизайнерам смотреть в первую очередь.

1. Индустриализация и зарождение дизайна:



2. Модернизм в дизайне и его преодоление:



3. Дизайн и Вторая мировая война:



4. Пластиковый дизайн:



5. Современный дизайн:



Спасибо телевидению и интернету.

Ссылка на запись | Высказаться [5] | Поделиться

Скачать бесплатно онлайн (ФОТО)

янв. 8, 2012 | 07:10 pm


Если интересно, вы можете скачать и посмотреть исходный дизайн-макет сайта infact.ru. Мне не жалко, а если кому-то пользу принесет, будет замечательно. Для скачивания надо нажать на картинку:

Ссылка на запись | Высказаться | Поделиться

Ответственность

июл. 4, 2011 | 10:54 am

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

  1. Возможность влиять на результат.

  2. Если осуществление действия невозможно, и человек объективно не может повлиять на ситуацию, то этого и не произойдет. Иногда могут предприниматься тщетные попытки, а иногда люди опускают руки даже в совсем не безнадежных ситуациях, но это уже зависит от понимания возможностей. Так, например, маленькие дети, понимая своё бессилие (часто ошибочно), практически всегда безответственны.

  3. Достойная выгода от действия.

  4. Чтобы предпринять что-то, человеку важно понимать, для чего он это делает. Ему нужна цель, а целей может быть ассортимент: начиная с личной материальной выгоды, продолжая выгодой морально-этической, и заканчивая торжеством Большой Идеи или веры в Высшую Ценность, за которую и умереть можно.

    Тут необходимо отметить, что достойность выгоды всегда идёт в комплекте с ценой. То есть цель должна оправдывать средства. И это максимально индивидуальное условие.

  5. Высокая цена бездействия.

  6. Есть и другая цена: не действия, а бездействия. Это совокупность негативных последствий от непринятой на себя ответственности: наказание, беда, неприятность. Этого часто не хватает для того, чтобы работники брали на себя ответственность. В итоге срок выполнения работы может быть сорван, качество низким, результат неудовлетворительным, а с работником произойдет лишь неприятный разговор с начальством.

  7. Неизбежность расплаты за бездействие.

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

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

Ссылка на запись | Высказаться [1] | Поделиться

Быть моднобл или умереть

мар. 19, 2011 | 03:17 pm

Мой друг Сергей Мосякин написал в 2008 году статью про тренды в айдентике. Я тогда улыбнулся его смешным очкам и решил развить/дополнить/оспорить его мысль, написав свой текст. Но так нигде и не опубликовал. Спустя годы, как мне кажется, он не потерял своей актуальности, поэтому я решил смахнуть пыль, и вот:

- - - - -

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

Я утверждаю, что фирменный знак — устаревшая форма идентификатора, атавизм, который не решает маркетинговые задачи в должной мере эффективно. Тренды, которые ежегодно описывает в своих дайджестах Билл Гарднер, — это все безнадежные попытки реанимировать старого доброго друга. Не удивлюсь, если ты согласишься со мной, что «освежение» знака наложением цветовой растяжки выглядит, по меньшей мере, нелепо.

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

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

По большому счету в арсенале у бренд-дизайнера есть уйма выразительных средств для выстраивания своему клиенту коммуникации с потребителем. Потому что кроме библиотеки шрифтов ParaType, фотобанка Shutterstock, стандартной цветовой палитры в Corel Draw и набора готовых узоров в Adobe Illustrator есть возможность разработать шрифт с подходящим характером, подобрать уникальный фотостиль, смешать специальную цветовую палитру и разработать фирменную графику, создавая неповторимую визуальную идентичность бренда. Это чертовски сложно и дорого, но овчинка стоит выделки.

Картинки, чтобы было не так скучно:



Matjaz Cuk Visual Identity





Saks by Pentagram





Fast Eddie's Barber Shop by Richard Arthur Stewart



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

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

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

Десятых.

Ссылка на запись | Высказаться [4] | Поделиться

Теперь и на DVD

фев. 16, 2011 | 03:16 pm

«Фрилансероз мозга» с говорящими человечками:




«Фрилансероз мозга» в буквах:



Подробнее о мероприятии на revision.ru

Скачать презентацию, 32 слайда, 600 кб

Ссылка на запись | Высказаться [2] | Поделиться

re:vision на выезде

янв. 12, 2011 | 10:37 pm



re:vision

Ссылка на запись | Высказаться | Поделиться

Чик-чирик

июл. 21, 2010 | 08:28 pm

Не вижу смысла вести дневник. Фоллоу ми он твиттер — @desyatykh.

Ссылка на запись | Высказаться | Поделиться

«Сортир мага»? Must have!

июн. 2, 2010 | 08:59 pm

Игра «Побег из комнаты: Сортир мага» по динамике продаж в AppStore* опережает Need For Speed, Splinter Cell, Grand Theft Auto, Worms, Tetris, Fieldrunners, Assassin's Creed, Resident Evil 4, Bejeweled 2, Monopoly, Iron Man 2, SimCity и всех-всех-всех. И это не удивительно.

* И вообще входит в 10-ку самых продаваемых игр для iPhone в России.

Update: …входит в 5-ку. ;)

Снова update: …входит в 3-ку!

Заключительный update: Сегодня игра «Сортир мага» стала самым продаваемым приложением для iPhone и iPod Touch в России.

Ссылка на запись | Высказаться [8] | Поделиться

Побег из комнаты: Сортир мага

май. 4, 2010 | 02:50 pm

Игра для iPhone и iPod Touch в жанре «побег из комнаты» — это такой небольшой квест в котором с шутками и смехом нужно решить некоторое количество шизо-головоломок и найти выход из положения по цене мороженки.


«Сколько я ни трахал и ни тибидохал, а пройти игру не смог…» — А. Акопин, иллюзионист.


Купить за $1.99 в AppStore

Ссылка на запись | Высказаться [2] | Поделиться