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

Принципы

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

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

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

Положение

Позиция является одним из основных путей установления иерархии. Рассмотрим следующий пример:

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

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

Это не должно шокировать вас, очевидно, что мы читаем слева направо. Тем не менее, осознавая эту тенденцию поможно структурировать содержание надлежащим образом. Помните, что этот принцип выходит за рамки слов в графических элементах на странице. Если вы представите ваших пользователей с сеткой объектов, довольно похожих по размеру, форме и цвету, они будут иметь тенденцию читать слева направо, если иное не будет предложено.
Разве это не скучно?
Вы можете быть удивлены, каким будет ваш дизайн, если вы сильно привяжетесь к принципу Z-чтения, описанного выше. Ответ: невероятно скучным и неоригинальным.

Целью является то, чтобы расположить объекты на странице более красиво, и в то же время нарушить привычку пользователя прочитать в «z.» Это достигается за счет использования других принципов визуальной иерархии, которые рассмотрим ниже.

Размер

В мире дизайна, размер безусловно, имеет значение : ). Изменяя размер элементов на странице, можно легко сломать Z-модель восприятия.

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

Это чрезвычайно простая страница, которая использует четкую визуальную иерархию. Цитата в центре страницы достаточно велика, чтобы быть первым объектом, который привлекает ваше внимание. После этого, логотип в левом верхнем углу не только естественное место для разрушения привычки чтения, но и является вторым по величине пунктом контраста на странице. Дизайнер структурировал сайт таким образом, что если вы тратите несколько секунд на страницу, вы читаете "Think Big. Be Nimble. «, Затем» Hobson Dungog + Davis ".
Это классическая манипуляция визуальной иерархии в работе (обратите внимание, что пробелы в значительной степени тоже работают). Было бы легко установить такой порядок: цитаты появляются в верхнем левом углу затем логотип, но расположение не было бы столь же интересным или гибким.

Цвет

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

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

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

Визуальная сложность

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

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

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

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

Выводы

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

• Полезные ссылки выпуск №8
• Полезные ссылки выпуск №4
• Полезные ссылки выпуск №3

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

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

Далее вы ознакомитесь с простыми инструментами, которые помогут вам принять правильное решение:

1. Люди разочарованы?

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

У разочарования есть несколько форм:

• Люди жалуются на это (наш любимый способ выражать разочарование);
• Они неохотно, но принимают это «так, как оно есть»;
• Это есть в списке вещей, которые надо сделать;
• Люди спрашивают других об их мнении и рекомендациях;

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

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

Иногда люди разочарованны, но сами не знают почему. Если бы люди могли четко сформулировать причину своей проблемы, то они тут же смогли бы и решить её. Исследование пользователей путем опроса их, используя технику 6-ти вопросов (Кто? Что? Где? Когда? Почему? Как?) или каким либо другим способом, помогает выяснить в чем заключается реальная проблема. Как только вы знаете в чем она заключается, очень часто её решение становится очевидным.

2. Люди активно пытаются её решить?

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

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

Люди могут очень долго обсуждать существующую проблему, но надо помнить, что проблем намного больше, нежели времени на их решение. Так что ищите действие с их стороны, пусть и не большое, но направленное на проектирование.

3. Люди уже тратят деньги?

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

Ниже перечислено несколько способов как люди могут тратить деньги:

1. Приобретение программного обеспечения. Если люди купили существующее программное обеспечение, то это хороший знак, что проблема действительно важна для них. Обратите внимание, что это ещё не значит, что купленная программа сделает их счастливыми. И если они разочарованы программой, за которую они заплатили, то это в первую очередь говорит том, что вы пытаетесь решить действительно большую проблему.
2. Наемные консультанты. Люди не знают как решить существующую проблему и поэтому привлекают ещё один мозг для работы. Многие люди пытаются решить проблему на протяжении такого долгого периода, что уже не могут думать объективно о ней. Поэтому им был нужен кто-то, кто хорошо знаком с проблемной областью и имеет свежий взгляд на неё. Продолжительная работа над проблемой может сделать её решение очень трудным.
3. Стройте решение собственноручно. Это значит, что существующие инструменты ещё не достаточно хороши, чтобы решить проблему. Для её решения также нужны инвестиции. Ваше участие является индикатором того, что проблема вверху списка, а значить у неё самый большой приоритет.

4. Расставление приоритетов.

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

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

• Полезные ссылки выпуск №3
• Полезные ссылки выпуск №5
• Полезные ссылки выпуск №2

По данным IMRG / Capgemini покупатели Великобритании потратили онлайн 13,16 миллиардов фунтов за последний квартал 2008 года, что на 15% больше, чем в последнем квартале 2007 года.
С другой стороны, статистика Jupiter Research за сентябрь 2007 года показывает, что 42% из 1179 опрошенных онлайн-покупателей покинули ресурс не осуществив покупку потому, что они не смогли найти ответы на вопросы о товаре, который уже был добавлен ими в корзину.

Что и почему мы хотели сделать.

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

•  контент страницы (описания продукта, доставка);
• непосредственно дизайн (шрифты, цвета);
•  функции (рекомендации, отзывы);
•  разметка страницы (два столбца или все таки три)

Страницы каких продуктов мы сравнивали?
Для этого исследования были выбраны продукты 6-ти из 10-ти крупнейших интернет-магазинов Великобритании на 2008 год. В них вошли:

•  Amazon
• Argos
• Tesco Direct
• Play.com
• M&S
• John Lewis

Все участники исследования были знакомы с этими ресурсами и уже делали покупки, по крайней мере, на 3-х из этих 6-ти сайтов.

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

Что мы обнаружили:

Принцип 1. Призыв к действию должен быть очевидным.

Основной призыв к действию на странице продукта это добавить продукт в корзину. Следовательно, он должен быть хорошо видимым визуально и быть похожим на кнопку. Участники отметили, что на странице Tesco Direct для них было не понятно где они должны кликнуть чтобы купить товар так, как функция «Добавление в корзину» не в виде кнопки и плохо выделена визуально. Аналогичные замечания были сделаны и о серой кнопке на ресурсе John Lewis, которая такого же цвета как и другое содержимое страницы.
С другой стороны участникам было легко добавлять товары в корзину на сайте M&S, потому что кнопка визуально привлекает своим ярким цветом:

Принцип 2. Краткое описание продукта лучше представлять в виде маркированного списка.

Участники хотели чтобы описание продукта помогло им сделать выбор «покупать или нет». Кроме того, они ожидали увидеть «теплые» слова, которые бы поощряли их покупку, а не просто констатацию факта, что они что-то купили.
Пользователи также предпочитали, чтобы информация о продукте была в виде маркированного списка для быстрого сканирования текста, как сделано на сайте Argos. Представление описания в виде параграфов не только загромождает страницу, это так же требует больших усилий покупателей найти те детали, которые им нужны.
Участник прокомментировал страницу Tesco Direct так: «Это выглядит скучно и текст тяжело читать».
Участники предпочитают, чтобы все детали были показаны на одной странице (как у John Lewis и Amazon), а не в виде вкладок (как у Argos и Tesco Direct) так, как переключения вкладок это дополнительные действия для пользователей:

Принцип 3. Представляйте картинки товара только в хорошем качестве.

Первое на что всегда смотрели покупатели — фотографии товара, независимо от того, где они распложены на странице (ниже картинка «движения глаз»).

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

Принцип 4. Используйте простоту в расположении элементов.

Большинство участников предпочли видеть картинку продукта слева, а описание продукта справа (например, как у M&S).
Ресурс John Lewis имеет достаточно хорошее расположение элементов и отображается только важная информация. Участники просмотрели весь контент на странице, независимо от продукции (одежда, бытовые/цифровые товары и т.д.), которую они искали: «Мне нравится. Просто, стильно и не загромождено».
Тем не менее все участники пропустили раздел «Вами просмотренные товары» в нижней части страницы товара John Lewis. Они прокручивали вниз, но останавливались, когда заканчивалась секция контента, и прокручивали обратно вверх. Это потому, что секция «Вами просмотренные товары» визуально отделена от всего остального контента и поэтому выглядит как конец страницы. Но, в общих случаях вертикальная планировка призывает пользователей прокручивать страницу вниз:

Принцип 5. Не используйте длинные страницы.

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

•  «Даже если я прокручу вниз, я не буду на них смотреть» (про Amazon)

Ресурсы Play.com и Amazon оба имеют очень длинные страницы с продуктами (страница Amazon примерно в 8 раз длиннее чем Tesco Direct). Участники использовали фразу «пытаешься, но очень трудно» чтобы описать эту страницу. Участники видели только 2/3 всей страницы и полностью игнорировали остальную 1/3.

• «Не знаю, где она начинается и где заканчивается. Нужна концентрация чтобы прочитать» (про Play.com)
•  «Я просматривал только верхнюю часть страницы так, как знаю, что они выбрасывают бесполезную информацию вниз страницы, особенно в случаях таких длинных страниц. Так что я игнорировал их.» (про Amazon).

Принцип 6. Указывайте только необходимую информацию о продукте.

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

Принцип 7. Расставляйте акценты на важный контент.

В отличие от совершения покупки оффлайн, в онлайн магазине нету продавца, который бы рассказывал покупателям то, что они хотят узнать о товаре. Пользователям предстоит искать ответы на свои вопросы самостоятельно на странице продуктов, которая наполнена разного рода информацией. И если они не смогут найти ответы либо потеряют терпение при поиске информации, то они покинут данный ресурс тут же и вряд ли когда-либо ещё вернутся.
Например, такие технические детали о DVD как год, язык, субтитры это то, что важно для покупателя. Однако на Play.com, участники отметили, что необходимо очень много прокручивать прежде, чем они смогут увидеть эту информацию (она идет после отзывов покупателей и блока товаров связанных с DVD (разные гаджеты и игры)). Не надо играть в прятки с потенциальными покупателями!

Принцип 8. Избегайте размещения важной информации не на приоритетных участках.

Когда пользователи находится на странице продуктов его основная задача заключается в понимании того, что это за продукт и как его можно купить. Пользователи не любят когда их отвлекают от их цели, поэтому они просто блокируют информацию, которая, как им кажется, не поможет я решении их задачи. Таким образом, все участники полностью проигнорировали левую и правую колонки на сайте Play.com, особенно когда на ресурсе информация о продукте находится вертикально в одну колонку. Однако, когда на странице продукты расположены в 3 колонки (2 колонки предназначены для информации о продукте), участники были более склонны обратить свое внимание (хотя и не намного) на левую колонку так, как на сайтах M&S и John Lewis:

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

Принцип 9. Обеспечьте достаточно пространства и не злоупотребляйте цветами.

Ресурс M&S пересыщен информацией: рядом с картинкой продукта справа находится имя продукта, цена, код продукта, рейтинг, обзоры, описание продукта и информация о его наличии. Более того, все шрифты одинакового размера и между ними недостаточно белого пространства. Этот раздел выглядит перенасыщенным и участники, как только не могли найти нужную им информацию, игнорировали его.
Цвета используемые на странице отвлекали участников. Tesco Direct использует больше 5-ти цветов для шрифтов:

• Красный для цены
• Черный для контента
• Зеленый для «Добавить в корзину»
•  Голубой для вкладок с этикетками
•  Серый для некоторых ссылок

Это сбивало с толку участников и увеличивало визуальный беспорядок:

Принцип 10. Избегайте требования клика если хотите, чтобы пользователь прочел информацию.

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

Итог.

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

Перевод Натальи Лейви.

• Воздушный интерфейс будущего
• Обзор политики в интернете
• 7 решений, которые помогут успешно продавать юзабилити

Драгоценные пиксели монитора — самая ценная недвижимость в мире. Кнопка «Add to Cart»  на Amazon имеет размеры 160×27 пикселей, это 0.003 квадратных фута (0.0003 квадратного метра) в обычном разрешении монитора 100 dpi. Вы можете застелить пол обычного американского дома, стоимость которого на данный момент составляет 160 000$, с помощью 800 000 кнопок «Buy». Даже одиночная кнопка «Buy» будет приносить много, не говоря уже о доходе от 800 000 кнопок.

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

8 лет назад я проанализировал распределение пространства у 50 главных страниц веб-сайтов и выяснил, что только 40 % экранного пространства использовалось для навигации или необходимого для пользователей контента. Было время, когда разрешения мониторов были 800×600, тогда пространство экрана было особенно драгоценным. Сегодня веб-сайты получше, да и современные большие размеры мониторов дают больше места для выполнения действий.

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

Потраченное впустую мобильное пространство

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

Приложение ABC News iPad: главный экран.

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

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

Это то, чем действительно пользуются люди.

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

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

Второй пример из недавнего исследования для NASA:

Приложение NASA для iPad: главный экран с раскрытым выпадающим меню.

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

В пользовательском тестировании основной проблемой такого отображения стал риск выбора неправильного небесного тела прикосновением: было использовано лишь 60 % наших указаний по удобству пользования для отделения объектов на сенсорном экране. (См. полное описание по советам юзабилити в мобильных технологиях.)

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

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

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

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

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

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

Больше — Лучше

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

Есть несколько исключений из правила о том, что большой размер в пользовательских интерфейсах — это хорошо. Один пример найден на сайтах, которые заставляют развернуть окно в полный размер даже на самых больших мониторах. Как только у людей появляется 30-дюймовый монитор, они не хотят разворачивать браузер на весь экран — это очень раздражающе работать, скажем, со словарем размера 2560×1600 пикселей, который загораживает другие окна, с которыми работаешь.

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

Автор: Jakob Nielsen

• 14 советов для создания приложения для iPad
• Полезные ссылки выпуск №5
• Интерфейс для таблетки

Бритва Оккама

«Бритва О́ккама» или «лезвие Оккама» — методологический принцип, получивший название по имени английского монаха-францисканца, философа-номиналиста Уильяма Оккама. В упрощенном виде он гласит: «Не следует множить сущее без необходимости» (либо «Не следует привлекать новые сущности без самой крайней на то необходимости»).

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

Принцип KISS

KISS (англ. keep it simple, stupid — «не усложняй, тупица» или англ. keep it short and simple — «не усложняй») — процесс и принцип проектирования, при котором простота системы декларируется в качестве основной цели и/или ценности. Также часто используется более вежливая расшифровка — keep it short and simple («делай короче и проще»).

Чем проще, тем лучше!

Утиный тест

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

Привычные вещи нужно называть привычными именами!

Принцип «YAGNI»

Принцип «YAGNI» (англ. You Ain't Gonna Need It — «Вам это не понадобится») — процесс и принцип проектирования, при котором в качестве основной цели и/или ценности декларируется отказ от добавления функциональности, в которой нет непосредственной нужды.

Согласно адептам принципа YAGNI, желание писать код, который не нужен прямо сейчас, но может понадобиться в будущем, приводит к следующим нежелательным последствиям:

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

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

Чем хуже тем лучше!

Чем хуже, тем лучше — подход к разработке программного обеспечения, объявляющий простоту реализации и простоту интерфейса более важными, чем любые другие свойства системы. Этот стиль описан Ричардом П. Гэбриелом (Richard P. Gabriel) в работе «Lisp: Good News, Bad News, How to Win Big» в разделе «The Rise of 'Worse is Better'» и часто перепечатывается отдельной статьей.

Гэбриел описывает подход так:

1. Простота: реализация и интерфейс должны быть простыми. Простота реализации даже несколько важнее простоты интерфейса. Простота — самое важное требование при выборе дизайна.
2. Правильность: дизайн должен быть правильным во всех видимых проявлениях. Простой дизайн немного лучше, чем правильный.
3. Логичность (последовательность): дизайн не должен быть слишком нелогичным. Иногда можно пожертвовать логичностью ради простоты, но лучше отказаться от тех частей дизайна, которые полезны лишь в редких обстоятельствах, чем усложнить реализацию или пожертвовать логичностью.
4. Полнота: дизайн должен охватывать как можно больше важных ситуаций. Полнотой можно жертвовать в пользу остальных качеств и обязательно нужно жертвовать, если она мешает простоте. Логичностью можно жертвовать в пользу полноты, если сохраняется простота; особенно бесполезна логичность интерфейса.

Ментальные модели.

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

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

• Новый дизайн главной страницы bigmir.net
• Юзабилити Украина 2010
• Cоздание мобильной версии сайта.

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

Советы

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

Мое второе правило: копируйте хороший UX-дизайн, когда встречаетесь с таковым.
Это легкая задача. Все делают это, но я подозреваю, что большинство людей чувствует себя неудачниками при этом. Я призываю воспользоваться подражанием. Если вы видите продукт, который обладает отличным UX-дизайном, скопируйте материал и подгоните его под себя. Каждая первоклассная игра-шутер — копия оригинала 3-D Волфенштайн. Я очень рад, что никто в Bungie не думал, что их назовут плагиатчиками, когда те создали Halo.

Замечания в beta-версии

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

В конечном счете, я решил внедрить обратную связь для замечаний непосредственно в продукт. Теперь люди смогут протестировать что-то и затем в какой-то момент я посажу их у экрана и сделаю опрос по да/нет, или правда/ложь вопросам с полями для ответов. Другими словами я улучшил UX-дизайн для тестировщика бета-версии. Вместо того чтобы просить писать мне по электронной почте свои замечания, я помещал их в среду с конкретными вопросами. И отвечая на эти вопросы, они будут вдохновленно писать объяснения.
Это то, что вы тоже можете включить в производство. Я экспериментировал с произвольно появляющимся окном обратной связи по окончанию игры. Но уважайте время пользователей. Не создавайте им преграды в виде одних и тех же вопросов и не ожидайте, что они ответят на вопросы, требующие на ответы немало времени. Я обычно стремлюсь к такому, на который уйдет 30 секунд.

Отслеживание (tracking)

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

Игровая оболочка

Если Вы создаете игру, не забывайте, что у Вас есть оболочка вне игры. Мне нравится думать о каждой игре как об игре, встроенной в приложение. И это приложение должно быть столь же дружественным и забавным, чтобы быть непосредственно игрой. Ну, возможно, не совсем такой забавной как сама игра но, по крайней мере, не должно быть отстоем. Так при создании игры, не просто сконцентрируйтесь на игровых взаимодействиях. Сделайте эту оболочку тем, чем можно гордиться. Это та полировка, который присуща крупным играм.

Делайте приложение как игру

Когда вы создаете приложение, думайте, как пользователи будут взаимодействовать с ним и предоставьте им такое управление, с помощью которого можно было бы быстро и просто справиться. Вы думаете, что приложение для создание отчетов внутренних продаж, которое делаете, является скучнейшим приложением, но люди, которые будут использовать его, считают своим инструментом для выполнения заданий. Сделайте такое управление приложением, в котором пользователи нуждаются. Так, чтобы они могли при работе с ним ощущать, будто играют в игру на подобии Civilization. Хотя бы удостоверьтесь, что порядок расположения элементов управления правильный. Если можете добавить сочетания клавиш (shortcuts), будет еще лучше. Помните также о том, что вы практически не будете пользоваться своим продуктом, а пользователи, для которых вы создаете, могут использовать его до смерти.

Не берите пример с Duke Nuken

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

Думайте как ваши пользователи

Я считаю, что невозможно одновременно выполнять разработку и UX-дизайн. То, каким образом я рассуждаю во время разработки, не позволяет мне увидеть те очевидные вещи для UX. Пытайтесь продумать UX-дизайн до того, как начнете работать над проектом. Вы должны подойти к своему проекту с новым свежим взглядом. Порой вы будете сами себя спрашивать: «О чем я думал, когда создавал это?»

Проектируйте UX-дизайн как можно раньше

Если вы так же как и я работаете в основном над собственными проектами, тогда заметили, насколько много должно пройти времени между продумыванием новой идеи и фактическим стартом ее разработки. Не позволяйте этому промежутку времени пропасть зря. Вы можете использовать его, чтобы зарисовать скетчи и записать какие-то примечания, которые будут полезны позже. Когда я начинаю разработку без какого-то плана, обычно пишу много кода, который в последствии удаляю. Не потому что код не работал, а потому что я не понимал, для UX-дизайна этот код был неэффективным. Это вещи, которые вывел для себя. И с этого я начну вырисовывать свою идею на доске, вместо того, чтобы сразу сесть за код.

Автор: Dan Florio

Оригинал: http://www.uxmag.com/design/ux-tips-for-non-ux-designers

• Полезные ссылки выпуск №6
• Полезные ссылки выпуск №8
• Как использовать визуальную иерархию в веб-дизайне

• Презентация о важности графики
• Полезные ссылки выпуск №6
• 7 решений, которые помогут успешно продавать юзабилити

• The Human Interface — презентация от Christopher Fahey
• Как использовать визуальную иерархию в веб-дизайне
• Интерфейс для таблетки

• SEO без юзабилити деньги на ветер
• Проблемка с именами
• «Глупые» пользователи

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

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

• Как располагать действия «Назад» и «Вперед» в веб формах?
• Баланс — принцип дизайна
• Программист добавил полезную функцию