Пять правил интерфейса веб-сайта

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

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

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

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

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

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

Правило 1. Не стремитесь к оригинальности

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

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

Правило 2. Изучайте цели посетителей

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

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

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

Правило 3. Не усложняйте систему

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

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

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

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

Правило 4. Не решайте интерфейсом посторонних задач

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

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

Правило 5. Определитесь, какой ресурс вы создаете

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

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

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

Ссылка на источник: http://ddd.exmachina.ru/web/5rules/index.shtml

Сервисы для подбора цветовой гаммы

ColorZilla

Расширение для Google Chrome и Mozilla, которое помогает веб-разработчикам и графическим дизайнерам решать связанные с цветом задачи. ColorZilla позволяет получать показания цветов из любой точки браузера, быстро настраивать этот цвет и вставлять его в другую программу, например Photoshop.

Ссылка: https://www.colorzilla.com/

Color Hunter

Позволяет получить цветовые палитры из изображения.

Ссылка: http://www.colorhunter.com/