(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Дюжина дизайнерских косяков (документация)

Источник: fl

 



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

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

1. Оставляйте место


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

    27 сентября (понедельник) в 20:35

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

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

2. Составьте свой словарь


- Скажи мне свой телефончик, детка
- Ты имеешь ввиду мобильный телефон, номер телефона или номер мобильного?

Старайтесь придерживаться одинаковых терминов и сокращений. Часто встречается, когда на разных страницах одного и того же сайта написано:

     sms
    СМС
    смс-сообщение

    автокредит
    авто-кредит
    кредит на авто

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

3. Закатайте все под одну гребенку


Не редкость, когда рядом стоят совершенно разные ссылки, не похожие друг на друга, как Де Вито и Шварценеггер. И ведут они на однотипные страницы:

    Купить стул
    Столы

    Снятие средств
    Перевести средства

В обоих случаях при клике мы перейдем на однотипные страницы. Если похоже содержание, значит должна быть похожа и форма:

    Стулья
    Столы

    Снятие средств
    Перевод средств

Или так:

    Купить стул
    Купить стол

    Снять средства
    Перевести средства

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

4. Следите за первыми буквами


  • Выберите товар и добавьте его в корзину
  • Введите данные вашей карты
  • В поле "комментарий" укажите желаемый срок доставки
  • Вопросы по обслуживанию можно задать онлайн-консультанту

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

  • Добавьте товар в корзину
  • Введите данные вашей карты
  • Укажите желаемый срок доставки в поле "комментарий"
  • На оставшиеся вопросы с удовольствием ответит онлайн-консультант

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

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

5. Почитайте форму регистрации


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

    Купить кресло. Офисные, гостевые, для кафе. Офисные кресла. Herman Miller Aeron. 1500 баксов. Купить.

Такая же каша в головах у клиентов. Куда лучше:

    Кресла. Офисные, гостевые, для кафе. Herman Miller Aeron. 1500 баксов. Купить.
 

6. Схватывайте на лету

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

    В целях безопасности совершения перевода средств на другой счет, на ваш мобильный +7…1245
    отправлено смс с проверочным кодом.

Важная информация всегда должна быть впереди:

    На ваш мобильный +7…1245 отправлено смс с проверочным кодом. Это сделано в целях
    безопасности совершения перевода средств на другой счет.
 

7. Кликайте наоборот


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

    Показать больше преимуществ

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

8. Наведите и увидите


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

9. Крутите колесико


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

10. Не жирните


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

11. Не извиняйтесь, не оправдывайтесь и не поздравляйте


Это самое больное место. Регулярно вижу на сайтах и в письмах такие сообщения:

     Уважаемый Василий Петрович! Компания Стульчик ру поздравляет
    вас с покупкой Herman Miller Aeron в нашем онлайн-магазине!

Или так:

    К сожалению, мы не смогли перевести ваши средства. Приносим свои извинения.

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

    Вы купили Herman Miller Aeron на Стульчик ру

    Перевод не удался
 

12. Спасите курсор от конвульсий

Есть селект с несколькими положениями. Часто при верстке забывают (или забивают) на области, в которых должен отображаться pointer. Курсор превращается из пальца в стрелку и обратно несколько раз за пару сантиметров экрана. Такой калейдоскоп раздражает

Пока это все. Немного капитанства еще никому не вредило, в конце концов повторение - мать заикания. Я надеюсь, в комментариях помогут пополнить список косяков.

Автор - Александр Винников



 Распечатать »
 Правила публикации »
  Обсудить материал в конференции Дискуссии и обсуждения общего плана »
Написать редактору 
 Рекомендовать » Дата публикации: 27.01.2014 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
SAP® Crystal Presentation Design 2016 WIN INTL NUL
Stimulsoft Reports Server Team 10 users
IBM DOMINO ENTERPRISE CLIENT ACCESS LICENSE AUTHORIZED USER ANNUAL SW SUBSCRIPTION & SUPPORT RENEWAL
DeviceLock Endpoint DLP Suite - от 1 ПК до 24 ПК
C++Builder 10.2 Tokyo Architect New User - Named ESD
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
СУБД Oracle "с нуля"
Все о PHP и даже больше
Краткие описания программ и ссылки на них
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Где можно найти «Пакет анализа» для Excel ? (57)
Коллеги, подскажите, где можно скачать надстройку к Excel под названием «Пакет анализа», после...
 
Пишу программы на заказ для студентов (151)
Пишу для студентов на с, с++, паскаль в средах ms visual studio, qt, builder, borland c, delphi....
 
Пишу программы на заказ профессионально (2096)
Пишу программы на заказ на языках Pascal (численные методы, списки, деревья, прерывания) под...
 
Как изменить шрифт Wordpad? (3)
Как изменить шрифт Wordpad по умолчанию? Там Таймс, а мне, допустим, Ариал нужен. Можно ли...
 
Ищу программиста для написания программы (8)
Ищу программиста ,владеющего Вижуал Бэйсик и программированием в Экселе, для написания...
 
 
 



    
rambler's top100 Rambler's Top100