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

Дизайн

Ctrl + ↑ Позднее

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

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

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

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

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

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

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


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


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

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

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

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


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

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

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

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

ironPhone

7 марта 2013, 22:50

Я наверное один из немногих дизайнеров у кого нет Айфона и, хуже того, нет желания его покупать. Но с его популярностью я ничего не могу поделать, а так же с желанием разрабатывать интерфейсы приложений для него тоже. Мне всегда была «понятнее» именно бумага. Как-то больше приходит понимание того как надо делать когда держишь что-то в руках, а не просто смотришь в монитор. Поэтому я решил забубенить себе прототип Айфона для тестирования бумажных эскизов. Встречайте, ironPhone.

Кстати, по весу этот прототип идентичен настоящему. Для большего «удорожания» болванки специально нанесли яблочко на заднюю сторону :). Лично мне эта штука будет гораздо приятнее чем прототипирование на экране (хотя Axure ещё никто не отменял).

Очень символично, что этот ironPhone приехал ко мне из города Железногорска ). Спасибо Витальке за помощь в реализации. Клёвые фотки девайса сделал Макс «Чипсов» Кыштымов.

P. S. Если вы хотите такую же хреновину — пишите. Могу сделать, например, за 1500 р.

Стереотипы — это хорошо

21 февраля 2013, 13:25

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

Например, при слове «Барби» у подавляющего большинства людей возникают такие ассоциации:

  • кукла
  • розовый цвет
  • светлые волосы
  • есть парень по имени Кен

Если я ошибся, значит вы с другой планеты.

Дизайнер должен давать людям, то что они ожидают увидеть. Всем плевать что Барби это просто имя, а не название куклы; всем плевать что есть и чернокожие куклы Барби; всем плевать, что она может мутить не только с Кеном; и уж тем более всем плевать, что имя Кен больше подходит для азиата, а не европейца. Мало у кого при слове «Барби» возникнет ассоциация — чернокожая барышня средних лет плескается в бассейне с китайцем.

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

Ломать шаблоны можно и нужно, но только с какой-то практической целью. Если эта цель не ясна или польза от неё сомнительна, то используйте существующие стереотипы.

Странные смайлы ВКонтакте

29 января 2013, 23:54

Не так давно открыл для себя чудесный мир смайликов во ВКонтакте. И понял насколько некоторые из них странные:

Либо я безчувственная скотина, либо эмоции этих смайлов одинаковые:

А эти в принципе одинаковые:

+ куча цветов, мячей и овощей.

Помнится на free-lance.ru (когда все его ещё не ненавидели) проходил конкурс-отбор исполнителей иконок-смайлов для ВК. Толи выбрали не того, то ли бюджет надо было освоить ).

Один из немногих смайлов, заслуживающих уважение:

Факт 1: Comic Sans круче Arial

25 января 2013, 0:10

Я сам в шоке. Но есть небольшая ремарка к этому заявлению. В книге «Call to action» авторы: Братья Айзенберг. Говорится о их исследовании того как влияет шрифт на конверсию сайта. Вот небольшая выдержка из описания исследования и результатов:

«Стандартные тесты показали, что коэффициент конверсии от внешнего вида шрифта почти не зависит. Однако одновременно мы провели А/В тестирование, которое оказалось более достоверным. Целевым группам были разосланы письма, набранные разными шрифтами. Так же мы подготовили несколько версий сайта, и в каждой использовали свой шрифт. Оказалось, внешний вид текста довольно сильно влияет на конверсию. Мы даже узнали, что сменив в почтовой рассылке Arial на Comic Sans, можно увеличить продажи почти на 30%.».

Однако есть оговорка:

«Внешний вид текста должен соответствовать характеру повествования. В примере содержание писем было простым и неофициальным. Шрифт Comic Sans очень подошёл для настроения, которое мы хотели создать.»

В принципе и так понятно, что шрифт это тоже элемент дизайна и он создаёт определённое настроение, но чтоб так и чтоб Комик Санс...

Ну и в подтверждение крутости шрифта есть целый клип

Ctrl + ↓ Ранее