Digital агентство MST

Михаил Богданович о типичных ошибках при разработке интерфейса сайта

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

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

Михаил Богданович

Михаил Богданович

Трудится в сфере интерактивного дизайна с 2006 года. Сейчас работает арт-директором в московской студии I-Net.

О работе с текстовыми блоками и ссылками

Многие дизайнеры до сих пор не уделяют должного внимания оформлению текстов. Даже сейчас можно встретить тех, кто создаёт сайты с наполнением типа Lorem ipsum. Текст — это не просто блок букв, которые необходимо как-нибудь распределить. Подписи в интерфейсе и текст в элементах дизайна должны быть чётко сформулированы. Иногда их можно вообще убрать или заменить понятной ссылкой, или сделать так, чтобы было понятно без подписей.

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

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

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

О преимуществах фильтров и интерактивных помощников

Представьте, заходите вы в магазин. Красивый, красивый! Яркий такой магазин. Вокруг много различной информации, изображений товаров. Но вот незадача, вы не очень разбираетесь в особенностях этих товаров. Подходите к консультанту и просите подобрать товар по нужным вам характеристикам. Консультант отворачивается, достаёт рулон бумаги со сравнительными характеристиками товаров, даёт вам и говорит: «Вот смотрите, здесь всё написано». Вернётесь вы в такой магазин? Вряд ли.

bogdanovich_1

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

О разумном использовании анимации на сайте

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

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

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

Технологии шагнули вперёд, появляются различные возможности анимации без использования Flash. Именно интерфейсной анимации. Мы стоим у истоков. Возможно, тысячи различных вариантов полезной анимации ждут своего применения в web :)
Также в качестве удачных примеров приведу такие сайты:

  • В проекте «Эколайт» реализована смысловая анимация, тут она больше промо, для передачи идеи.
  • Или вот ещё у Бирмана альбомы прикольно перемещаются при изменении размера окна.