Матчасть

Дизайн и юзабилити интернет-магазина

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

И хоть она и называется «Дизайн и юзабилити интернет-магазина», но про конкретно интернет-магазины там ничего нет. В ней вообще про дизайн, юзабилити и вот это всё.

Стандартный
Статьи

Это не адаптивная веб-разработка, это — адаптивный веб-дизайн

Автор: Франциско Инхосте (FRANCISCO INCHAUSTE)
Оригинал: http://www.getfinch.com/finch/entry/its-not-responsive-web-building-its-responsive-web-design/ (11 августа 2011)

elasticman

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

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

mediaqueries

Mediaqueri.es — свежая галерея, специализирующаяся на адаптивном дизайне.

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

Круги АВД

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

Круг «АВД — это метод»

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

В этом смысле АВД всегда был с нами. Методика разработки резиновых сайтов не упала к нам с небес позавчера. Мы и раньше использовали ее для разработки настольных приложений, имеющих гибкие настройки. Эти программы появились тогда, когда персональный компьютер стал действительно огромным (в прямом и переносном смыслах). И было бы логично ожидать, что в этих изменившихся условиях наши веб-сайты будут следовать тем же паттернам.

Для этого круга считается нормальным задвинуть такую фразу: «Известно, что люди приходят посмотреть содержание сайта разными способами. Поэтому, вместо того, чтобы заниматься гаданием на кофейной гуще или разрабатывать 15 версий одного сайта (и потом каждый раз соглашаться на доработку чего-то нового), давайте просто сделаем эту хрень адаптивной» [1].

Круг «АВД — это философия»

Для этого круга характерна следующая точка зрения: АВД спасает нас от фиксированной ширины и грехов типа «наилучшее отображение в [Название_Бразуера]». Один из самых больших сторонников АВД, Джефри Зельдман (JEFFREY ZELDMAN) дает такое определение:

«…это очередной этап эволюции в веб-разработке и проектировании взаимодействия. Как с практической точки зрения, так и для всей индустрии
в целом.»

Люди из этого круга считают, что это не просто инструмент или практический метод. Это философия для всего, что связано в веб-дизайном. Что подразумевается под этим? Имеется ввиду сущность АВД. Он является неотъемлемой частью веб-дизайна. В общем случае, когда мы разрабатываем сайт, нам не надо решать, применять АВД или нет — он просто должен быть. Без вариантов. И если ваш дизайн не адаптивный, то, как сказал Энди Кларк (ANDY СLARKE):

«Это уже не веб-дизайн, а что-то другое. Если вы не учитываете в своей работе врожденное непостоянство веба, то вы не веб-дизайнер, а кто-то другой. Веб-дизайн — это адаптивный дизайн, а адаптивный веб-дизайн — это веб-дизайн, и никак иначе.»

Круг «АВД — это тренд»

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

Как правило, критики АВД опираются на техническую сторону вопроса, а также на практичность применения такого подхода с точки зрения бизнеса. Это, в свою очередь, заставляет переосмыслить многие вещи, такие как платформа для содержания и затраты на редизайн. Критики также аргументируют тем, что технологии типа @media-queries и javascript до сих пор не поддерживаются браузерами во многих мобильных устройствах.

Несмотря на то, что рассматриваемый метод (философия) еще очень молод, эта группа не слишком ему рада.

Дизайнерский взгляд

Большинство обсуждений АВД уделяет слишком большое внимание техническим аспектам. Это не адаптивная веб-разработка, это — адаптивный веб-дизайн. Смотреть сайт в превосходном качестве на любом экране звучит красиво. Самый простой дизайнерский ответ на вопрос о пользе АВД звучит так: «все зависит от …». Очевидно, что это беспроигрышный вариант. Поэтому далее я попытаюсь сформулировать свое мнение, дав другой ответ.

«Но что значит быть по-настоящему „адаптивным“? Я считаю, что это обязывает понимать человека по другую сторону экрана и, самое главное, контекст, в котором он находится.»
— Джеймс Пирс (JAMES PEARCE)

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

Каждое устройство имеет форм-фактор и относится к определенному классу устройств [2]. Например, смотря телевизор, вы можете откинуться назад и с расстояния в 10 футов взаимодействовать с ним, используя пульт управления.

«Хотя и существует возможность использовать всего один интерфейс для работы с более, чем одним классом устройств, разработка такого интерфейса обычно приводит к существенным компромиссам или рахитичному опыту взаимодействия, который не позволяет воспользоваться преимуществами, делающими каждый из классов превосходным (или наоборот: к богатым функциональным возможностям, которые не загружаются или ломаются на слабых устройствах).»
— Люк Вроблевски (LUKE WROBLEWSKI)

Хорошо известно, что надо проектировать сайты с учетом специфики мобильных устройств. Но при этом большинство считает хорошей идеей сделать что-либо для персонального компьютера, затем вырвать некоторые элементы, что-то поменять местами и в итоге назвать это пригодным для мобильных устройств. И, раз уж мы об этом заговорили, какой, черт побери, смысл вкладывается в слово «мобильность» в наши дни? Многие из нас думают, что это когда люди в движении или постоянно находятся в отвлекающей обстановке. Однако, данные, иллюстрирующие домашний комфорт, противоречат этому [3]:

  • 93% людей используют свои смартфоны дома;
  • 62% людей используют свои смартфоны для просмотра видео-каналов;
  • 39% людей используют свои смартфоны, когда сидят на толчке.

IPad рассматривается скорее как «портативное», чем «мобильное» устройство, поскольку люди не всегда берут его с собой. И при этом, в большинстве случаев люди ожидают полную функциональность, а не урезанную или модифицированную версию [4].

«Больше 10 лет создания веб-сайтов потребовалось сообществу разработчиков на то, чтобы понять, что конкретные знания о наших посетителях действительно очень важны. Почему сегодня, когда некоторые браузеры помещаются в нашем кармане и имеют сенсорные экраны вместо курсора, мы решили, что больше не нуждаемся в хорошей информации о пользователях?»
— Мэтт Генри (MATT HENRY)

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

Панацеи нет

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

  • Является ли продукт/содержание желанным для потребителя?
  • Готов ли заказчик, и есть ли возможность донести то видение, которое мы проектируем?
  • Готовы ли клиенты попробовать наш новый продукт/услугу вместо текущего решения?

Изображение взято с сайта Yiibu.

Иногда мне кажется, что мы (наша отрасль) очень похожи на определенный тип правительства, которое совершенно оторвано от жизни обычных людей. Самый широкий канал интернета и последняя версия браузера — далеко не для каждого это находится в списке жизненных приоритетов. Мы же, как правило, предпочитаем разрабатывать что-либо для новых устройств, таких как iPhone, потому что там мы действительно можем использовать интересные штуки-дрюки и изучать самые современные технологии. Если даже iPhone имеет слабое проникновение в секторе мобильных устройств [5].

Большинству людей вне нашей отрасли не нужно то дерьмо, которое мы создаем. Просто дайте им самый удобный способ перевести деньги в Farmville (популярная игра в социальной сети Facebook, аналог «Фермы» в Вконтакте — прим. переводчика), чтобы они смогли вырастить еще больше овощей. Я верю в человеческий фактор, и понимание контекста, в котором люди получают интересующую их информацию, — вот что может быть постоянной задачей. Мне кажется, что никогда не будет найдена панацея в дизайне для людей. Мы изучаем то, каким образом люди «думают», гораздо дольше существования интернета. И мы знаем достаточно, чтобы понять, что мы не знаем ни хера.

«Дизайн — это размышление о содержании и его подаче. Фокусируйтесь на картине в целом. Макет — это еще не дизайн.»
— Люк Вроблевски (LUKE WROBLEWSKI)

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

[1] Mobile-first Responsive Web Design, Брэд Фрост (BRAD FROST)
[2] Networked Consumer Device Platforms, Люк Вроблевски (LUKE WROBLEWSKI)
[3] The Myth of Mobile Context
[4] Five Lessons From a Year of Tablet Research
[5] Rethinking the Mobile Web

Стандартный
Книги

Влад В. Головач. Дизайн пользовательского интерфейса: искусство мыть слона

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

Влад Головач. Дизайн пользовательского интерфейса

Онлайн-книга Влада Головача «Дизайн пользовательского интерфейса: искусство мыть слона» относится к числу редких отечественных книг по этой тематике.

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

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

  • Ничего готового нету; готовыми вещи становятся вынужденно.
  • День, когда вы только добавили что-то хорошее, но не исправили что-то плохое, — потерянный день.
  • Всё недостаточно хорошее — плохое. Поскольку улучшить можно всё, всё — плохо.
  • Записывайте всё, в частности, совершенные вами ошибки. Нет лучшей гарантии, что вы их не повторите.
  • Планируйте как можно меньше, начинайте проектировать интерфейс как можно раньше, зато переделывайте почаще.
  • Перед тем, как приступать к работе, узнайте, что хуже всего сейчас и начните с решения именно этой проблемы.
  • Если вы не превращаете свои знания в конкретные проектные шаги — это бесполезные знания.
  • Не задавайтесь общими, принципиальными проблемами, пока вы хотя бы трижды не нашли их частное решение.
  • Занимайтесь только той оптимизацией интерфейса, которая улучшает продукт.
  • Лучше принести заказчику приятный сюрприз, чем неприятное открытие.
  • Не менее трети всех интерфейсных решений либо работают гораздо хуже ожидаемого, либо вообще неработоспособны.
  • Повесьте перед своим рабочим местом табличку «В моих интерфейсах есть проблемы, о которых я ничего не знаю».
  • Без тестирования сделать действительно хороший интерфейс можно только случайно и только если интерфейс маленький.
  • Интерфейс хорош, если он:
    • «удобный», «простой» и «юзаб(и)(e)льный»;
    • обладает высокими эргономическими показателями;
    • оптимизирован под своих пользователей;
    • оптимизирован под задачи пользователей;
    • оптимизирован под мотивы пользователей;
    • обладает высокими показателями юзабилити;
    • адекватен деятельности пользователей;
    • коммерчески успешен.
  • Полезно составить список мотивов целевых пользователей и просто сравнить их со списком задач. Даже это помогает лучше оценить адекватность и полноту списка задач.
  • Хороший интерфейс — это сексуальный интерфейс. Сексуальный интерфейс — это интерфейс, который хочется иметь.
  • Проверяйте на оправданность все интерфейсные операции, удаляйте необязательные и исправляйте слишком уж трудоемкие.
  • Вы делаете довольным заказчика, для чего вам нужно сделать хороший интерфейс для пользователей.

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

  1. Можно ли ускорить взаимодействие пользователя с этим интерфейсом?
  2. Где в этом интерфейсе места, которые могут продуцировать человеческие ошибки? Можно ли изменить эти фрагменты?
  3. Что в этом интерфейсе не способствует обучению? Что пользователю нужно знать, чтобы успешно взаимодействовать с этим интерфейсом? Есть ли в этом перечне что-то, чего сам интерфейс не сообщает пользователю? Эти три вопроса нужно задавать себе по очереди. Если после ответов видно, что интерфейс надо менять, остальные вопросы нужно задать себе снова после переделки. Если на все три вопроса удалось дать отрицательный ответ, переходим к следующей порции вопросов из остальных концепций качества:
  4. Известно ли мне о пользователях что-нибудь, что делает этот интерфейс плохим?
  5. Удовлетворяет ли этот интерфейс все известные мне мотивы пользователей?
  6. Совместим ли этот интерфейс со средой, в которой работают пользователи?Если и по этим вопросам всё хорошо, переходим к проверке, как выполняются в интерфейсе задачи пользователей.
  7. Соответственно, этот вопрос звучит как «Есть ли задачи, которые неэффективно отрабатываются интерфейсом?». Как правило, достаточно проговорить вслух (а ещё лучше написать), как в этом интерфейсе пользователь выполняет все свои задачи (лучше всего писать о себе, а не о абстрактном пользователе, например «Из меню Документ я открываю окно настроек зета-преобразования, ввожу значение 40 в поле Количество человеков, затем открываю…»). Как правило, такая проверка выявляет множество несоответствий или попросту пропущенных кусков. Если это произошло, возвращаемся к самому первому вопросу. Если нет, задаем себе последний вопрос:
  8. Сексуален ли этот интерфейс и можно ли его сделать ещё сексуальнее?

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

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

Скачать или читать онлайн

Об авторе

Влад ГоловачВлад Головач
Вместе с Александром Белышкиным основал Usethics, первую в России юзабилити-компанию. По всей видимости, спроектировал больше интерфейсов, чем кто-либо другой в России (и руководил разработкой ещё большего числа интерфейсов). Автор первой оригинальной русскоязычной книги о дизайне программных интерфейсов (более недоступна; это её вторая, полностью переработанная версия).

Стандартный
Практика

2.4 Результат

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

В ходе решения задачи отказываемся от баннеров, совмещая сезонные акции компании с блоком новостей.

Рисуем графику.

Результат

Сетка:

Результат с сеткой

Пояснения к решению:

Пояснения к решению

В итоге получаем готовый к применению шаблон главной страницы сайта и вот такие иконки:

Иконки

Конец.

Стандартный
Практика

1.5 Нарисовать дизайн

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

Будем исходить из принципа разумности и акцентироваться на полезном контенте, а не на оформительских элементах.

Проектируем, рисуем и получаем результат.

Страница со списком раздач:

Список раздач

C сеткой:

Список раздач с сеткой

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

Ссылка «Избранные» ведет на страницу со списком избранных раздач. Желтая звездочка в описании раздачи показывает, что данная раздача уже находится в списке избранных.

Ссылка «Все» открывает меню фильтра.

Фильтр

С сеткой:

Фильтр по сетке

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

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

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

Все второстепенные ссылки собраны в два выпадающих меню.

Ответы на вопросы

Сайты

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

Поиск

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

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

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

Правила изменения размера обложки

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

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

Детали раздачи

C сеткой:

Детали по сетке

Кадры фильма в оригинальном размере показываются по клику на картинку превью. Для этого используем любой лайтбокс.

Подробности о формате видео и аудио каждого файла убраны в всплывающий блок.

Детали деталей

Для различного типа скачиваемого контента — разные кнопки. Каждая кнопка имеет три состояния: обычное, при наведении и при нажатии.

Кнопки

Стандартный