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

Вот вам красноречивый пример: Иммиграционная карточка Украины, которую заполняют гости страны.

Давайте на нее полюбуемся:

Иммиграционка, первая часть

Иммиграционка, вторая часть

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

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

С высокой долей вероятности мы с вами окажемся гражданами РФ. Подписи же к полям выполнены на украинском и английском языках, однако абзац пояснения внизу первой части карточки переведен и на русский язык. В предыдущей редакции карточки подписи к полям были выполнены и на русском языке тоже, но потом националистический дух победил.

Ну да ладно. Теперь вопросы по существу.

Прибытие:

1. Первая строка – Номер иммиграционной карточки. Нам его нужно заполнять?
2. Фамилия, имя, здесь проблем нет, но под строку для гражданства почему-то отведено на один символ меньше. Интересно, чем это вызвано?
3. На дату рождения отведено еще на один символ меньше. При этом не понятно в каком именно формате нужно заполнять данную строку. Логично было бы предположить, что правильным будет формат XX XX XXXX. Однако, если заполнять в приведенном общепринятом формате, оставляя между числом/месяцем/годом одну пустую клеточку-разделитель, то в строке останется две пустые клеточки. Так и в каком формате нужно заполнять? – Вопрос остается без ответа.
4. Строка для ввода пола иностранца вообще гениальна. Для обозначения пола отведено четыре клеточки! Это что же, нужно писать М У Ж . (точку в отдельный квадратик) или М У Ж С ?
5. Следующая строка предназначена для ввода серии и номера паспорта. Что же, здесь все идеально. Мы же, скорее всего, граждане РФ и наши серии и номера паспортов в формате 12 34 123456 с пробелами в одну пустую клеточку идеально вписывается в формат поля (12 клеточек). Скорее всего мы так и заполним данное поле и порадуемся его продуманности и эргономике. И не будем обращать внимания на такую мелочь, что слово номер заменено знаком №, который в английском языке должен выглядеть вот так: # (такая петрушка встречается еще в нескольких полях формы).
6. Что же дальше? – Какая-то виза, срок ее действия. И что здесь писать в случае, если я гражданин РФ, а между РФ и Украиной безвизовый режим, у меня же нет никакой визы, я про нее ничего не знаю?
7. Хорошо если мы с вами едем без детей. А если у нас их больше одного, то как имя и год рождения можно вместить в девять клеток? Да, у этого пункта почему-то на три клеточки меньше, чем у предыдущих (очень интересно, почему).
8. Пункт Мета прибуття и перевод purpose of journey вообще оставит в недоумении среднестатистического гражданина РФ, который не знает ни украинский ни английский язык. Но это спишем на чувство национальной гордости. Предположим, мы поняли, что в строке нужно указать цель визита. Ну так и какие цели визита бывают и что здесь писать если я еду на море в Ялту?
9. Название и адрес принимающей стороны. Ну с адресом-то понятно, а что в названии указывать, если я еду к бабушке  в гости: Бабушка? Бабушкин дом?
10. Номер транспортного средства или рейса… Интересно, а если я иду пешком?
11. В конце подписываемся под указанными данными, на этот раз все железно.

Выбытие:

1. Фамилия, имя, гражданство, дата рождения – здесь все так же как и в части прибытие, все так же сверху вниз загадочно уменьшается количество квадратиков в полях.
2. Серия и номер паспорта. А вот тут жесткая заподлянка москалям от украинцев. Граждане РФ с размаху начинают по аналогии заполнять данную строку в таком же формате, как и в части прибытие (см. п. 5 в части прибытие). Ха-ха, но не тут-то было, в данной строке на два квадратика меньше чем в аналогичном пункте части прибытия! Получите, москали кляты!
3. Оставшиеся пункты перемешались загадочным образом, да так, что подпись предъявителя оказалась посередине формы. Это, чтобы заполняющий не расслаблялся. Какие функции выполняет подпись предъявителя, да еще и расположенная посередине формы, науке не известно.

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

И какое впечатление об Украине сложится у иностранца с первых минут знакомства?

С уважением, арт-директор

Андрей Морковин.

© Андрей Морковин для SdelaySite.com, 2009. | Ссылка на пост | Комментарии: 2
Теги поста: Юзабилити

Основная структура сайта

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

Заголовки

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

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

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

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

Горизонтальное меню

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

Хлебные крошки (последовательный набор ссылок)

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

Пример хлебных крошек скажем на сайте об играх:

Главная > On-line игры > MMORPG

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

Контент

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

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

1. Абзац текста
2. Иерархия заголовков трех-пяти уровней
3. Элемент выделения важной информации
4. Цитата
5. Ненумерованный список
6. Нумерованный список
7. Вложенные списки
8. Иллюстрация на полосу, в текст
9. Таблица или несколько их типов
10. Файлы для скачивания
11. Выноски
12. Оформление маргиналий (записки на полях), если такие используются
13. Подача информации в 2–3 колонки

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

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

© Андрей Морковин для SdelaySite.com, 2009. | Ссылка на пост | Комментарии: 3
Теги поста: