Ланч-тайм 279: краткий
перевод свежих статей о digital
В номере: что значит качественный веб-сайт в 2020 и 7 основных правил дизайна кнопок
877
Что значит качественный веб-сайт в 2020?
«Высокое качество» сайта в 2020 году не то же самое, что в 2010 или даже 2015 году. Например, адаптивный дизайн сейчас необходим, но так было не всегда.
Летс гоу дипа.
Летс гоу дипа.
Простота использования
Во-первых, любой качественный веб-сайт в 2020 году должен быть простым в использовании. Никакой запутанной навигации. Никаких сложных и замысловатых меню. Никакого излишнего креативчика. О чем ваш сайт и как им пользоваться должно быть ясно сразу.
1. Сделайте навигацию и меню понятными
Навигация и меню обычно находятся в одних и тех же местах на всех сайтах: в области заголовка и/или на боковой панели. Когда эти элементы спрятаны, они обычно обозначены «гамбургером», который хорошо будет смотреться и в мобильной версии.
1. Сделайте навигацию и меню понятными
Навигация и меню обычно находятся в одних и тех же местах на всех сайтах: в области заголовка и/или на боковой панели. Когда эти элементы спрятаны, они обычно обозначены «гамбургером», который хорошо будет смотреться и в мобильной версии.
Если навигация и меню не адаптированы под мобильные устройства, готовьтесь к высокому показателю отказов.
2. Краткое знакомство
Любой, кто попадет на ваш сайт, должен сразу понять его тему. Не заставляйте посетителей думать, проходить квесты и догадываться, какие услуги вы предлагаете или какие товары продаете. В центре внимания должно быть четко обозначено, о чем ваш сайт. Чем меньше сложностей для посетителя, тем больше вероятность, что он сделает то, что вам нужно.
2. Краткое знакомство
Любой, кто попадет на ваш сайт, должен сразу понять его тему. Не заставляйте посетителей думать, проходить квесты и догадываться, какие услуги вы предлагаете или какие товары продаете. В центре внимания должно быть четко обозначено, о чем ваш сайт. Чем меньше сложностей для посетителя, тем больше вероятность, что он сделает то, что вам нужно.
3. Интуитивно понятный контент
Одно порождает следующее. Если ваша структура контента необычна, это может оттолкнуть потенциальных клиентов.
Расположите контент в логической последовательности, чтобы посетители могли плавно переходить от одного раздела к другому. В рамках одной страницы прыгать с темы на тему и размещать информацию в тех местах, где их не ожидают увидеть — плохие идеи.
Одно порождает следующее. Если ваша структура контента необычна, это может оттолкнуть потенциальных клиентов.
Расположите контент в логической последовательности, чтобы посетители могли плавно переходить от одного раздела к другому. В рамках одной страницы прыгать с темы на тему и размещать информацию в тех местах, где их не ожидают увидеть — плохие идеи.
Быстрая загрузка
Качественные сайты обязаны быть оптимизированы по скорости. Если сайт загружается слишком медленно, посетители просто не будут ждать.
Это также влияет на ваш поисковый рейтинг. Согласно Google, чем ниже скорость вашего сайта, тем ниже будет ваш рейтинг. И это они придумали в этом 2010 году!
Это также влияет на ваш поисковый рейтинг. Согласно Google, чем ниже скорость вашего сайта, тем ниже будет ваш рейтинг. И это они придумали в этом 2010 году!
Очевидно, что, если сайт загружается медленно, посетители скорей всего просто сдадутся и начнут искать информацию в другом месте.
Чтобы увеличить скорость своего сайта, вы можете:
Чтобы увеличить скорость своего сайта, вы можете:
- использовать оптимизированный фреймворк или тему — решение, ориентированное на скорость, повысит производительность сайта,
- сжимать изображения — картинки меньшего размера загружаются быстрее.
- использовать отложенную загрузку — это означает, что верхняя часть вашего веб-сайта загружается первой (и быстро), а остальная часть — по мере прокрутки посетителем.
Ожидания посетителей = реальность
Ваш сайт должен оперативно предоставлять информацию, о которой заявляет, что пользователь может ее тут найти. Оффтоп и отклонение от темы вызывает замешательство и разочарование. И мы все знаем, что происходит с разочарованными клиентами — они уходят.
Чтобы этого не произошло, убедитесь, что вы соответствуете ожиданиям посетителей. Это не значит, что вы не можете иногда отклоняться от основной темы, но если сделаете это постоянно, вы быстро потеряете посетителей (и клиентов).
Например, если у вас сайт, посвященный онлайн-маркетингу. Вы можете оставить личный пост в блоге, связанный с важными событиями, или прокомментировать главную новость мира, когда сочтете это необходимым.
Однако регулярное отклонение от основной темы «интернет-маркетинг» может сократить число постоянных посетителей, которые приходят к вам за информацией этой ниши, а не за всем остальным, что интересует вас.
Чтобы этого не произошло, убедитесь, что вы соответствуете ожиданиям посетителей. Это не значит, что вы не можете иногда отклоняться от основной темы, но если сделаете это постоянно, вы быстро потеряете посетителей (и клиентов).
Например, если у вас сайт, посвященный онлайн-маркетингу. Вы можете оставить личный пост в блоге, связанный с важными событиями, или прокомментировать главную новость мира, когда сочтете это необходимым.
Однако регулярное отклонение от основной темы «интернет-маркетинг» может сократить число постоянных посетителей, которые приходят к вам за информацией этой ниши, а не за всем остальным, что интересует вас.
Адаптивный дизайн
Мы уже упомянули, что сайт должен быть адаптивным к мобильным устройствам в 2020 году. Он должен хорошо выглядеть на всех устройствах, и важность этого увеличивается втрое, если у вас интернет-магазин.
Кроме того, он должен быть совместим с различными пользовательскими интерфейсами, включая скорость передачи данных, браузеры, устройства и т. д.
Кроме того, он должен быть совместим с различными пользовательскими интерфейсами, включая скорость передачи данных, браузеры, устройства и т. д.
Оптимизация для SEO
Хорошее SEO означает, что нужные люди найдут ваш сайт в нужное время. Их поисковые запросы попадут в нужные части вашего сайта.
Однако есть ряд дополнительных вещей, которые вы можете сделать, чтобы повысить вероятность того, что потенциальные клиенты найдут ваш сайт через поиск: собирать ключевые слова, создать подробный контент, использовать разметки и прочее.
Однако есть ряд дополнительных вещей, которые вы можете сделать, чтобы повысить вероятность того, что потенциальные клиенты найдут ваш сайт через поиск: собирать ключевые слова, создать подробный контент, использовать разметки и прочее.
Широкая доступность
Веб-доступность часто не входит в списки обязательных функций сайта, но она жизненно важен. Если сайт недоступен для некоторых людей с ограниченными возможностями (например, слабое зрение), это а) дискриминация, и б) вы теряете огромную потенциальную долю рынка.
Многие люди используют вспомогательные устройства для выхода в интернет. Пользователи со слабым зрением или слухом, дальтонизмом или другими ограниченными возможностями зависят от этих инструментов для навигации по всемирной паутине.
Однако программы чтения с экрана и другие инструменты работают только в том случае, если владелец сайта оптимизировал сайт и контент для этих устройств.
Вот несколько советов по доступности:
- Используйте альтернативный текст для изображений.
- Убедитесь, что все ссылки доступны с клавиатуры.
- Избегайте использования цвета для обозначения навигации.
- Включите субтитры для всего аудио и видео контента.
- Оптимизируйте контент для работы с системами голосового управления.
Последовательность
Это относится к двум отдельным аспектам вашего веб-сайта:
1. Обслуживание клиентов
Четко обозначьте часы / дни, когда доступен чат, например, и соблюдайте этот график. Если вы общаетесь с клиентами по электронной почте, убедитесь, что у вас достаточно ресурсов, чтобы ответить на сообщения в течение указанного вами времени. Последовательность в обслуживании клиентов означает, что вы отвечаете, когда обещаете, и предоставляете доступ к информации, когда это необходимо. Если у вас интернет-магазин, то это касается и возвратов и т. д.
2. Составьте и соблюдайте согласованный график публикаций на своем сайте
Если ваш сайт ориентирован на контент (а не интернет-магазин), постоянные посетители будут ждать новую порцию контента в определенные дни. Несоблюдение этих ожиданий со временем приведет к потере регулярного трафика. С другой стороны, чтобы увеличить посещаемость, четко укажите, когда вы будете публиковать новый контент. Что-то вроде «Свежие статьи в понедельник, среду и пятницу».
1. Обслуживание клиентов
Четко обозначьте часы / дни, когда доступен чат, например, и соблюдайте этот график. Если вы общаетесь с клиентами по электронной почте, убедитесь, что у вас достаточно ресурсов, чтобы ответить на сообщения в течение указанного вами времени. Последовательность в обслуживании клиентов означает, что вы отвечаете, когда обещаете, и предоставляете доступ к информации, когда это необходимо. Если у вас интернет-магазин, то это касается и возвратов и т. д.
2. Составьте и соблюдайте согласованный график публикаций на своем сайте
Если ваш сайт ориентирован на контент (а не интернет-магазин), постоянные посетители будут ждать новую порцию контента в определенные дни. Несоблюдение этих ожиданий со временем приведет к потере регулярного трафика. С другой стороны, чтобы увеличить посещаемость, четко укажите, когда вы будете публиковать новый контент. Что-то вроде «Свежие статьи в понедельник, среду и пятницу».
Использовать хороший хостинг
Сможет ли ваш сайт справиться с неожиданно возросшим трафиков, например, во время распродажи или после публикации актуальной статьи? Если вы не уверены, самое время разобраться в этом.
В основном это означает приобретение соответствующего плана хостинга для вашего типа сайта и ожидаемого уровня трафика.
При необходимости — смените хостинг. И следите за тем, как сайт работает с течением времени. Предлагает ли ваш текущий сервер надежное время безотказной работы? Если нет, пора сменить тарифный план или поставщика услуг. Чрезмерное время простоя — это упущенная возможность.
В основном это означает приобретение соответствующего плана хостинга для вашего типа сайта и ожидаемого уровня трафика.
При необходимости — смените хостинг. И следите за тем, как сайт работает с течением времени. Предлагает ли ваш текущий сервер надежное время безотказной работы? Если нет, пора сменить тарифный план или поставщика услуг. Чрезмерное время простоя — это упущенная возможность.
Взгляд со стороны
Есть только один шанс произвести хорошее первое впечатление. Так что убедитесь, что дизайн сайта современный и интересный.
Что это значит?
Во-первых, устаревшие проекты, основанные на устаревших технологиях (например, Flash). По крайней мере, они показывают, что вы не успеваете за современной эстетикой и тенденциями дизайна. В худшем случае это может означать, что ваш сайт не работает должным образом на всех устройствах.
Вот несколько вещей, которые вы, возможно, захотите учесть при разработке своего сайта в 2020 году:
- Минималистичный дизайн. В 2020 году мы увидим много белого пространства, простых логотипов и «больше воздуха» между изображениями.
- Темная тема. В этом году темная тема сайта стала популярной. Раньше это была функция исключительно внутри приложения, но теперь ее используют и веб-дизайнеры. Дайте посетителям выбирать между светлой или темной темой — чтение контента на сайте может стать более приятным для них.
- Элементы трехмерного дизайна. Это особенно применимо к интерактивным частям вашего сайта, таким как кнопки, но это также относится и к общему дизайну. Трехмерные логотипы, изометрическая графика и интерактивные кнопки могут добавить интерес к вашему контенту и увеличить время, проведенное на вашем сайте.
- Минималистичная навигация.
Вывод: советы просты донельзя: обеспечьте, чтобы ваш сайт был простым в использовании, приятным в навигации и постоянно предоставлял релевантный контент. Это укрепит лояльность и доверие вашей аудитории. Вы сэкономили 40 минут.
878
7 основных правил дизайна кнопок
7 Basic Rules for Button Design
Рассмотрим семь основных принципов, которые вам нужно знать для создания эффективных кнопок.
1. Кнопки должны выглядеть как кнопки
Пользователи должны сразу понимать, что «кликабельно», а что нет. Каждый элемент дизайна требует от пользователя усилий для расшифровки. Как правило, чем больше времени требуется пользователям на осознание пользовательского интерфейса, тем менее полезным он становится для них.
Не важно, насколько круто вы сделаете дизайн. Если им сложно пользоваться, он ничего не стоит.
Не думайте, что что-то в вашем интерфейсе очевидно для пользователей. Во многих случаях дизайнеры намеренно не идентифицируют кнопки как интерактивные элементы, поскольку считают, что интерактивные элементы очевидны для пользователей, ведь они знают свой собственный дизайн от и до, но пользователи — нет.
Используйте знакомый дизайн для кнопок. Вот несколько примеров кнопок, знакомых большинству пользователей:
Не важно, насколько круто вы сделаете дизайн. Если им сложно пользоваться, он ничего не стоит.
Не думайте, что что-то в вашем интерфейсе очевидно для пользователей. Во многих случаях дизайнеры намеренно не идентифицируют кнопки как интерактивные элементы, поскольку считают, что интерактивные элементы очевидны для пользователей, ведь они знают свой собственный дизайн от и до, но пользователи — нет.
Используйте знакомый дизайн для кнопок. Вот несколько примеров кнопок, знакомых большинству пользователей:
Из всех этих примеров дизайн «Кнопка с заливкой тенями» является наиболее понятным для пользователей. Когда пользователи видят «размерность объекта», они сразу понимают, что на него можно нажать.
И не забывайте о пробелах! Важны не только визуальные свойства самой кнопки. Пространство рядом с кнопкой позволяет пользователям легче понять, является ли этот элемент интерактивным или нет. В приведенном ниже примере некоторые пользователи могут спутать кнопку «призрак» с информационным полем.
И не забывайте о пробелах! Важны не только визуальные свойства самой кнопки. Пространство рядом с кнопкой позволяет пользователям легче понять, является ли этот элемент интерактивным или нет. В приведенном ниже примере некоторые пользователи могут спутать кнопку «призрак» с информационным полем.
2. Разместите кнопки там, где пользователи ожидают их увидеть
Кнопки должны быть расположены в местах, где пользователи могут легко их найти или там, где их ожидаемо увидеть. Не заставляйте пользователей охотиться за кнопками. Если пользователи не могут найти кнопку, они не узнают, что она существует.
По возможности используйте традиционные макеты и стандартные шаблоны пользовательского интерфейса
Со стандартным макетом пользователи легко поймут назначение каждого элемента — даже если это кнопка без указателей. Сочетание стандартного макета с чистым визуальным дизайном и большим пространством вокруг делает макет более понятным.
Совет: проверьте свой дизайн на обнаруживаемость. Когда пользователи впервые переходят на страницу, которая предполагает некоторые действия, пользователю должен легко найти подходящую кнопку для этого.
По возможности используйте традиционные макеты и стандартные шаблоны пользовательского интерфейса
Со стандартным макетом пользователи легко поймут назначение каждого элемента — даже если это кнопка без указателей. Сочетание стандартного макета с чистым визуальным дизайном и большим пространством вокруг делает макет более понятным.
Совет: проверьте свой дизайн на обнаруживаемость. Когда пользователи впервые переходят на страницу, которая предполагает некоторые действия, пользователю должен легко найти подходящую кнопку для этого.
3. Напишите на кнопке то, что получит пользователь, если кликнет на нее
В идеале подпись кнопки должна четко описывать ее действие. Пользователи должны четко понимать, что произойдет, когда они нажмут на кнопку. Вот простой пример.
Представьте, что вы случайно запустили действие удаления и теперь видите следующее сообщение об ошибке.
Представьте, что вы случайно запустили действие удаления и теперь видите следующее сообщение об ошибке.
Подпись «ОК» не слишком много говорит о том, что последует после нажатия
Непонятно, что означают «ОК» и «Отмена» в этом диалоговом окне. Большинство пользователей спросят себя: «Так, ок, а что произойдет, когда я нажму „Отмена“ ?»
Никогда не создавайте диалоговое окно или форму, которое бы состояли только из двух кнопок «ОК» и «Отмена».
Вместо «ОК» лучше использовать «Удалить». Так понятнее, что эта кнопка сделает. Еще, если «Удалить» является потенциально опасной операцией, вы можете указать этот факт красным цветом.
Никогда не создавайте диалоговое окно или форму, которое бы состояли только из двух кнопок «ОК» и «Отмена».
Вместо «ОК» лучше использовать «Удалить». Так понятнее, что эта кнопка сделает. Еще, если «Удалить» является потенциально опасной операцией, вы можете указать этот факт красным цветом.
Вот отличный пример из жизни :) Потенциально опасное действие «Отключить карту» в этом интерфейсе окрашено в красный цвет.
4. Выберите размер кнопок
Размер кнопки должен отражать приоритет этого элемента на экране. Большая кнопка означает более важное действие.
Приоритет кнопок
Сделайте так, чтобы самая важная кнопка выглядела так, будто она действительно самая важная. Всегда старайтесь сделать кнопку основного действия более заметной. Увеличьте ее размер (увеличив размер кнопки, вы сделаете ее более важной для пользователей) и используйте контрастный цвет, чтобы привлечь внимание.
Приоритет кнопок
Сделайте так, чтобы самая важная кнопка выглядела так, будто она действительно самая важная. Всегда старайтесь сделать кнопку основного действия более заметной. Увеличьте ее размер (увеличив размер кнопки, вы сделаете ее более важной для пользователей) и используйте контрастный цвет, чтобы привлечь внимание.
Dropbox использует размер и цветовую контрастность, чтобы привлечь внимание пользователя к кнопке с призывом к действию «Попробуйте Dropbox Business бесплатно»
Сделайте кнопки удобными для мобильных пользователей
Во многих мобильных приложениях кнопки слишком маленькие. Это часто приводит к тому, что пользователи промахиваются и ошибаются. Кнопки должны быть в размер пальцев :)
Во многих мобильных приложениях кнопки слишком маленькие. Это часто приводит к тому, что пользователи промахиваются и ошибаются. Кнопки должны быть в размер пальцев :)
Слева: кнопка нужного размера.
Справа: кнопки слишком маленькие.
Справа: кнопки слишком маленькие.
Исследование MIT Touch Lab показало, что в среднем подушечки пальцев составляют от 10 до 14 мм, а кончики пальцев — от 8 до 10 мм. Таким образом, минимальный размер кнопки составляет 10×10 мм.
5. Обратите внимание на порядок
Пользовательский интерфейс — это диалог с вашими пользователями.
Порядок кнопок должен отражать характер разговора между пользователем и системой. Спросите себя, какой порядок пользователи ожидают увидеть на этом экране, и проектируйте соответственно.
Например, как расположить кнопки «Назад / Далее» в пагинации? Логично, что кнопка, которая перемещает вас вперед, должна быть справа, а кнопка, которая перемещает вас назад, должна быть слева.
Порядок кнопок должен отражать характер разговора между пользователем и системой. Спросите себя, какой порядок пользователи ожидают увидеть на этом экране, и проектируйте соответственно.
Например, как расположить кнопки «Назад / Далее» в пагинации? Логично, что кнопка, которая перемещает вас вперед, должна быть справа, а кнопка, которая перемещает вас назад, должна быть слева.
6. Не используйте слишком много кнопок
Это обычная проблема для многих приложений и сайтов. Когда вы предоставляете слишком много вариантов, ваши пользователи в конечном итоге ничего не делают. При разработке страниц в приложении или на сайте подумайте о наиболее важных действиях, которые вы хотите, чтобы ваши пользователи выполняли.
7. Обеспечьте визуальное или звуковое сопровождение после нажатия
Когда пользователи нажимают на кнопку, они ожидают, что пользовательский интерфейс как-то отреагирует. В зависимости от типа операции это может быть либо визуальный, либо звуковой эффект. Если у пользователей нет обратной связи по нажатию кнопки, они могут подумать, что система не получила команду, и повторит действие. Такое поведение часто приводит к множеству ненужных операций.
Почему это происходит? Как люди, мы ожидаем некоторой обратной связи после взаимодействия с объектом.
Почему это происходит? Как люди, мы ожидаем некоторой обратной связи после взаимодействия с объектом.
Для некоторых операций, таких как загрузка, стоит не только подтверждать ввод данных пользователем, но и отображать текущее состояние процесса.
Вывод: несмотря на то, что кнопки являются обычным элементом интерактивного дизайна, стоит уделить немало внимания тому, чтобы сделать этот элемент максимально качественным. Дизайн кнопок UX всегда должен быть понятен и понятен. Перевели, дабы сэкономить вам 30 минут.
Все всё перевернули вчера?