Веб-дизайнер, арт-директор. Пишу про дизайн и, иногда про маркетинг
3 заметки с тегом

Обзор книги

Эмоциональный веб-дизайн. Обзор книги

4 августа 2014, 17:26

Немного об авторе:

Аарон Уолтер — ведущий дизайнер в области пользовательского опыта компании MailChimp. До этого в течение десяти прекрасных лет он делился опытом с жадными до знаний веб-дизайнерами в колледжах по всем Соединенным Штатам. В наши дни свою страсть обучать других он реализует через проект The Web Standards Project's InterACT.
Аарон живет со своей женой и сыном в городе Афины, штат Джорджия, и собирается параллельно освоить профессию баристы.

В основном Аарон рассказывает о создании визуального образа «МэилЧимп» и, естественно, самой обезьянки. Рассказывает почему он (обезьяна) такой, как он взаимодействует с пользователями и как это сказывается на отношении людей к бренду. В общем куча всего полезного не только для дизайнера, но и для маркетолога.

О «человечном» дизайне

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

В книге упоминается всем известный автомобиль «Жук». Его дизайн не менялся с 1938 по 2003 год! Для российских «авто-дизайнеров» это норма, а вот для европейских 70 лет одного и того же дизайна это очень дохрена. «Жук» получил поистине народную любовь за «человечность» его дизайна. Многим изогнутый капот напоминал улыбку, а фары — глаза. В итоге получалось радостное лицо, что всем нравилось.

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

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


О персонажах

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

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

Однако, персонаж это ещё не всё. Поняв кто наш пользователь, хорошо было бы понять и кто мы. Для такого понимания создаётся «Образ компании/сайта/приложения/чего угодно». Как говорит Аарон, продукты могут быть представлены в образе людей. Т. е. и у самого дизайна может быть некий «персонаж», который является отражением персонажей целевой аудитории.

Автор предлагает задаться вопросом: «Если бы ваш сайт был человеком, каким бы он оказался? Серьёзным, деловым, строгим? Или рубахой-парнем, который весело решает задачи?».

В «Чипсе» мы называем это «Карта бренда». Кстати, прикольно, что наше понимание того как надо во многом совпало с МэилЧимперами :)


Дизайн-образ созданный Аароном для MailChimp:

  • Название бренда: MailChimp
  • Обзор: Фредди фон Чимпенхаймер IV — лицо бренда и воплощение его индивидуальности. Крепкое телосложение Фредди говорит нам о мощи приложения, а его поза демонстрирует, что он находится в движении. Все это дает людям понять, что у Фредди серьезные намерения.
    Фредди приветствует пользователей доброй улыбкой, что позволяет им чувствовать себя как дома. Мультяшный стиль MailChimp предлагает им расслабиться и получать удовольствие. Хоть Фредди и мультипликационный персонаж, он все равно производит впечатление крутого. Он много шутит, но, как только ситуация становится серьезной, он перестает это делать.

MailChimp часто развлекает пользователей, подбрасывая им «пасхальные яйца» или смешные видеоролики на YouTube. Праздник всегда с тобой, если он не мешает работе.

  • Индивидуальность
  • Свойства бренда: весело, но не по-детски. Смешно, но не глупо. Функционально, но не сложно. Стильно, но не чуждо. Просто, но не простецки. Надежно, но не скучно. Неформально, но не разгильдяйски.
  • Карта индивидуальности
  • Голос: голос MailChimp дружелюбный, как у старого знакомого, но прежде всего человеческий. Можно легко представить себе индивидуальность людей, стоящих за этим брендом. MailChimp травит анекдоты (но такие, которыми можно поделиться с мамой), рассказывает истории и говорит так, словно общается с близкими. MailChimp использует неформальные сокращения: don’t вместо do not, потому что так и говорят нормальные люди. MailChimp говорит «хм-м-м», будто задумался, или «Блин, какой ужас!» — в ситуациях, требующих сочувствия. Строчные буквы и текст на кнопках интерфейса подчеркивают неформальный характер бренда.
  • Примеры текста:
  • В случае успешного завершения операции: «Дай пять! Твой список успешно импортирован». Сообщение об ошибке: «Ой, кажется, ты забыл ввести адрес».
  • Сбой: «Один из наших серверов временно недоступен. Наши инженеры работают над этим и скоро все исправят. Спасибо за терпение».
  • Визуальный лексикон
  • Цвет: Яркая, но не слишком насыщенная палитра говорит о чувстве юмора. Цвета чистые, но не как в детских телепередачах. MailChimp забавный, но функциональный.
  • Типографика: MailChimp легок на подъем, прост и эффективен, и типографика это демонстрирует. Простые шрифты без засечек в заголовках и сообщениях отличаются размером, плотностью и цветом, которые передают иерархию сообщений. Они делают MailChimp столь же уютным, как любимый свитер.
  • Общий стиль: Элементы интерфейса простые, интуитивно понятные, неустрашающие. Мягкие, нежные текстуры смягчают пространство и делают его более человечным. Фредди нужно использовать с умом — только чтобы разрядить обстановку. Фредди не должен помогать с решением задач или обратной связью.
  • Методы связи
  • Удивление и восторг: Тематические экраны авторизации напоминают о праздниках, культурных событиях или о вашем любимом человеке. «Пасхальные яйца» радуют в самые неожиданные моменты, порой добавляя ностальгические нотки, а порой напоминая о штампах поп-культуры.
  • Предвкушение: Смешные приветствия Фредди меняются при переходе со страницы на страницу. Они не дают информации или обратной связи — это просто веселое дополнение, не снижающее юзабилити.

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

Шаблон «дизайн-образа» можо качнуть отсюда.


Про удивление

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

Пример неожиданного элемента можно найти на сайте Фотожожо. Просто перейдите на любой товар и нажмите на это

В самом МэилЧимпе Фредди периодически выстреливает какие-то высказывания в адрес пользователя

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

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

Заключение

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

Эрик Шпикерман. «О шрифте». Обзор

20 июля 2013, 15:08

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

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

Кто читал «О шрифте» тот над фразой «большое очко» не смеётся

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

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

Самое главное из этих изречений вот это:

Надеюсь это и будет той самой «пруф линк» для всех дизайнеров, которые любят мельчить и херачить заголовки лайтовым Опен Сансом (да-да Саня, Кирилл и Алёша, это именно вам :) ).

Итак, пробегусь по верхам типографики и опишу чё узнал:

1. Длинные и короткие строки
Шрифт, приглашающий вас к долгому чтению, должен быть скромным и незаметным. Выборочное чтение небольших сообщений предполагает более энергичный шрифт. Он не должен быть сложным как декоративный, но и лишняя скромность тут не уместна.

2. Интерлиньяж, трекинг, межсловные пробелы
Чем длиннее строка тем больше должны быть межсловные пробелы, интерлиньяж и межбуквенные расстояния (трекинг). В типографике всё взаимосвязанно и если вы меняете один параметр, то должны изменить и все остальные.

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

4. Строчныйе
Набирать строчными вразрядку всё равно что красть овец. Фредерик Гауди (дизайнер шрифта)

5. Кернинг
Про кернинг в книге я ничего особенного не узнал кроме того, что он есть. Зато на сайте Бюро Горбунова есть отличная статья про правила кернинга.

6. Межсловные пробелы в заголовках

Межсловные пробелы в заголовках должны быть равны ширине стройной буквы «i». А для удобства чтения длинных строк ширина межсловных пробелов должна быть гораздо шире.

Ну и на последок небольшой абзац про веб-дизайн:

Дизайн — это решение проблем


«Решение практических задач и работа в рамках заданных ограничений — вот то что отличает настоящий коммуникационный дизайн от рисования красивых картинок. Размер/формат, цвет и шрифт — вот три главных ограничения, определяющих веб-дизайн.»

«Элементы опыта взаимодействия» Джесс Гарретт. Обзор книги

14 апреля 2013, 18:58

Книга Дж. Гарретта является практически классикой жанра и потому я не мог пройти мимо. А так же хотелось наконец до конца для себя прояснить чем отличаются понятия «юзабилити» и «юзер экспириенс» («UX», Опыт взаимодействия).

В книге с первых же страниц написан пример опыта взаимодействия, который на уровне ощущений даёт понять что есть опыт взаимодействия:

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

Хочу добавить, что читая эти строки я вспоминал про давнюю историю небольшой аварии в которую я попал со своим другом Стасом (привет Стас). Он как раз отвлёкся от дороги переключая песню. Ничего страшного не случилось, но машинка была помята и зад автобуса тоже, и группу «7Б» с тех пор мы больше не любили.

Если будете читать, то уделите особое внимание объяснению такого тонкого понятия как «контекст использования». Контекст использования это ситуация в которой пользователь взаимодействует с сайтом/объектом/системой. И действительно, в машине за рулём контекст использования даже простого телефона совершенно другой нежели дома на диване. Это очень важный момент над которым стоит думать при проектировании чего-либо.


Основой всей книги является идея 5-ти этапной разработки:


  • Уровень 1. Стратегия. Стратегия включает в себя не только то, что хотят получить от сайта его владельцы, но и то, что хотят получить пользователи.
  • Уровень 2. Набор возможностей. Перечисление функциональных возможностей образует уровень набора возможностей сайта. Некоторые сайты, торгующие книгами, позволяют пользователям сохранять адрес, чтобы не пришлось указывать его повторно. Вопрос, включена ли эта (или любая другая) функция в список функций сайта, как раз относится к возможностям сайта.
  • Уровень 3. Структура. Структура определяет, как пользователи попадают на страницу и куда они могут направиться дальше.
  • Уровень 4. Компоновка. Компановка это прототипирование. Расположение кнопок, вкладок, фотографий и текстовых блоков. Компоновка проектируется так, чтобы организация этих элементов была максимально эффектной и эффективной, то есть чтобы вы запомнили логотип и смогли найти кнопку с корзиной, когда она понадобится.
  • Уровень 5. Поверхность. Графический дизайн сайта.

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

Вышесказанное иллюстрирует следующая картинка

Для практического использования эти 5 уровней делятся на составляющие:


Не бойтесь этой на вид сложной схемы. Ничего сложного в ней нет. А ещё больше упрощает понимание то, что она очень логична и её в общем-то можно вывести самостоятельно (что мы и сделали в «Чипсе»). Но если бы мы сначала прочитали Гарретта, то сэкономили бы кучу времени. Так что смотрим и пользуемся.

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

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

В общем творение Гарретта читать обязательно стоит. Особой привлекательности ей придаёт, то что она состоит всего из 175 стр. полезной информации с минимумом воды.