В тихом полутемном закутке нашего офиса сидит аналитик. Собирает данные, исследует, анализирует, составляет отчеты. Недавно он закончил и представил на суд общественности результат исследования сотни сайтов в разрезе оформления, интерфейса и юзабилити. Предлагаем вашему вниманию фрагмент главы, посвященной характерным ошибкам оформления сайтов.
1. Недостаточная длина текстового поля
Встречается в заголовках статей, названиях товаров, датах, развернутых полностью инициалах. Заголовок можно и сократить, а вот с названием товара или именем контрагента такой номер проделать куда труднее. Лучше оставлять запас побольше.
2. Разнобой с терминами проекта
Сплошь и рядом можно сайты грешат терминологическим разнобоем. Читаешь и видишь то "адрес электронной почты", то "E-mail", то "автострахование", то "страхование автомобилей". Да и название фирм публикуется в самых разных модификациях: в кавычках и без, с организационной формой и без нее, многообразными сочетаниями заглавных и прописных букв, латинницей.
В результате возникает впечатление общей неаккуратности. Да и ошибки при оформлении документов могут происходить от такого многообразия.
3. Первые буквы списков
- Вопросы по работе с сайтом;
- В поле "сообщение" введите ваш комментарий;
- Введите платежные реквизиты;
- Ваше имя.
Некрасиво, правда? Мало того, затрудняет ориентирование. Все строки начинаются с "В", оттого их легче перепутать. Лучше перефразировать:
- Получите помощь по работе с сайтом;
- Поле "сообщение" для вашего комментария;
- Сообщите платежные реквизиты;
- Ваше имя.
Совсем высший пилотаж получится, если заглавные буквы будут выстроены в алфавитном порядке.
4. Слишком длинные предложения
Времени мало, сайтов много, читать и вникать посетителям лень. Поэтому вот это предложение будет работать не слишком хорошо:
В целях безопасности совершения перевода средств на другой счет, на ваш мобильный +7…6789 отправлено SMS с проверочным кодом.
Лучше написать так:
На ваш мобильный +7…6789 отправлен проверочный SMS. После получения введите его в форму. Эта процедура обеспечит вашу безопасность.
5. Судороги курсора
Изменение формы курсора на активных элементах хорошо выглядит только при медленном движении указателя. Например, на рабочем столе дизайнера. Пользователи перемещают курсор быстро или очень быстро. При этом смысловое содержание изменений формы курсора от них ускользает, и остается только впечатление постоянного подергивания указателя. Этот раздражающий эффект лучше вообще исключить.
6. Зачем нужен Twitter Bootstrap?
Верстку адаптивных макетов на порядки упрощает использование пакета инструментов Twitter Bootstrap. Этот CSS фреймворк создан разработчиками Twitter и с 2011 года свободно распространяется для всех желающих. Bootstrap легок в освоении и прекрасно документирован на русском языке. Использование Bootstrap ускоряет выполнение мобильных и адаптивных проектов в разы, создавая масштабируемый код для любых устройств, от настольного компьютера до мобильного телефона. Bootstrap современен: помимо CSS, он работает на основе препроцессоров Less и Sass. Эта технология позволяет применять в стилевом оформлении переменные, вложенность, подключаемые элементы миксины. Скачать архив Bootstrap можно на сайте разработчиков
7. Контейнер Bootstrap
Рабочую область сайта от хедера до футера в Bootstrap обозначают как контейнер (container). По правилам Bootstrap контейнер резиновый, гибко меняются по ширине экрана.
8. Сетка Bootstrap
Макеты в Bootstrap строятся на основе сетки из 12 колонок и неограниченного числа строк. Строки создаются классом «row», а колонки при помощи класса «col». Колонки можно объединять. Например, чтобы объединить три колонки, надо задать класс «col-md-3».
9. Текст в Bootstrap
Bootstrap представляет удобный набор средств типографики. Заголовки в нем выделяются тегами <h1> - <h6>, при этом для каждого вида заголовка доступно вторичное начертание, задаваемое тегом <small>.
Общий текст в Bootstrap имеет настройки: параграф 14px, междустрочный интервал 1.428, расстояние от параграфа до параграфа 10px.
Жирный шрифт в Bootstrap выделяется традиционными тегами <b> или <strong>. Так же и для курсива применяются теги <i> и <em> соответственно.
Выравнивание текста в Bootstrap определяется присвоением классов с параметрами "text-left", "text-right", "text-center и "text-justify".
За вывод структурированного программного кода отвечает специальный тег-контейнер <code>. А выделение текста фоновым цветом задается тегом <mark>.
10. Списки в Bootstrap
В дополнение к традиционным маркированным <ul> и нумерованным <ol> спискам, фреймворк позволяет использовать также списки определений <dl> и групповые списки с использованием класса "list-group".
11. Таблицы в Bootstrap
В дополнение к традиционным HTML-тегам таблиц <table>, <tr> и <td> в Bootstrap применяются теги для строк заголовков таблиц <thead>, для столбцов заголовков таблиц <th>, а также тег описания таблицы <caption>.
Назад в раздел
1. Недостаточная длина текстового поля
Встречается в заголовках статей, названиях товаров, датах, развернутых полностью инициалах. Заголовок можно и сократить, а вот с названием товара или именем контрагента такой номер проделать куда труднее. Лучше оставлять запас побольше.
2. Разнобой с терминами проекта
Сплошь и рядом можно сайты грешат терминологическим разнобоем. Читаешь и видишь то "адрес электронной почты", то "E-mail", то "автострахование", то "страхование автомобилей". Да и название фирм публикуется в самых разных модификациях: в кавычках и без, с организационной формой и без нее, многообразными сочетаниями заглавных и прописных букв, латинницей.
В результате возникает впечатление общей неаккуратности. Да и ошибки при оформлении документов могут происходить от такого многообразия.
3. Первые буквы списков
- Вопросы по работе с сайтом;
- В поле "сообщение" введите ваш комментарий;
- Введите платежные реквизиты;
- Ваше имя.
Некрасиво, правда? Мало того, затрудняет ориентирование. Все строки начинаются с "В", оттого их легче перепутать. Лучше перефразировать:
- Получите помощь по работе с сайтом;
- Поле "сообщение" для вашего комментария;
- Сообщите платежные реквизиты;
- Ваше имя.
Совсем высший пилотаж получится, если заглавные буквы будут выстроены в алфавитном порядке.
4. Слишком длинные предложения
Времени мало, сайтов много, читать и вникать посетителям лень. Поэтому вот это предложение будет работать не слишком хорошо:
В целях безопасности совершения перевода средств на другой счет, на ваш мобильный +7…6789 отправлено SMS с проверочным кодом.
Лучше написать так:
На ваш мобильный +7…6789 отправлен проверочный SMS. После получения введите его в форму. Эта процедура обеспечит вашу безопасность.
5. Судороги курсора
Изменение формы курсора на активных элементах хорошо выглядит только при медленном движении указателя. Например, на рабочем столе дизайнера. Пользователи перемещают курсор быстро или очень быстро. При этом смысловое содержание изменений формы курсора от них ускользает, и остается только впечатление постоянного подергивания указателя. Этот раздражающий эффект лучше вообще исключить.
6. Зачем нужен Twitter Bootstrap?
Верстку адаптивных макетов на порядки упрощает использование пакета инструментов Twitter Bootstrap. Этот CSS фреймворк создан разработчиками Twitter и с 2011 года свободно распространяется для всех желающих. Bootstrap легок в освоении и прекрасно документирован на русском языке. Использование Bootstrap ускоряет выполнение мобильных и адаптивных проектов в разы, создавая масштабируемый код для любых устройств, от настольного компьютера до мобильного телефона. Bootstrap современен: помимо CSS, он работает на основе препроцессоров Less и Sass. Эта технология позволяет применять в стилевом оформлении переменные, вложенность, подключаемые элементы миксины. Скачать архив Bootstrap можно на сайте разработчиков
7. Контейнер Bootstrap
Рабочую область сайта от хедера до футера в Bootstrap обозначают как контейнер (container). По правилам Bootstrap контейнер резиновый, гибко меняются по ширине экрана.
8. Сетка Bootstrap
Макеты в Bootstrap строятся на основе сетки из 12 колонок и неограниченного числа строк. Строки создаются классом «row», а колонки при помощи класса «col». Колонки можно объединять. Например, чтобы объединить три колонки, надо задать класс «col-md-3».
9. Текст в Bootstrap
Bootstrap представляет удобный набор средств типографики. Заголовки в нем выделяются тегами <h1> - <h6>, при этом для каждого вида заголовка доступно вторичное начертание, задаваемое тегом <small>.
Общий текст в Bootstrap имеет настройки: параграф 14px, междустрочный интервал 1.428, расстояние от параграфа до параграфа 10px.
Жирный шрифт в Bootstrap выделяется традиционными тегами <b> или <strong>. Так же и для курсива применяются теги <i> и <em> соответственно.
Выравнивание текста в Bootstrap определяется присвоением классов с параметрами "text-left", "text-right", "text-center и "text-justify".
За вывод структурированного программного кода отвечает специальный тег-контейнер <code>. А выделение текста фоновым цветом задается тегом <mark>.
10. Списки в Bootstrap
В дополнение к традиционным маркированным <ul> и нумерованным <ol> спискам, фреймворк позволяет использовать также списки определений <dl> и групповые списки с использованием класса "list-group".
11. Таблицы в Bootstrap
В дополнение к традиционным HTML-тегам таблиц <table>, <tr> и <td> в Bootstrap применяются теги для строк заголовков таблиц <thead>, для столбцов заголовков таблиц <th>, а также тег описания таблицы <caption>.
Назад в раздел
Подписаться на новые материалы раздела:
Загрузка...
Наверх