Почему считается более грамотным выносить дизайн веб-страниц в отдельный файл
Обновлено: 21.11.2024
Эта тема может показаться невероятно «большой» для одной статьи, но она касается специфики удобства использования, которую мы часто упускаем из виду или путаем. Благодаря этому вы сможете более эффективно разрабатывать дизайн, а количество пользователей вашего веб-сайта также увеличится.
Удобство использования заменило устаревший ярлык "удобный для пользователя" в начале 1990-х годов. У термина «юзабилити» возникли проблемы с определением, которое мы используем сейчас. Различные подходы к тому, что делает продукт «пригодным для использования», разделились между взглядом на него с точки зрения вида продукта (т. е. эргономичного дизайна, такого как изогнутая клавиатура); взгляд на него с точки зрения пользователя (сколько работы и удовлетворения/разочарования он/она испытывает, используя его); и представление о производительности пользователя, которое включает в себя то, насколько легко использовать продукт, если он будет использоваться в реальном мире.
«Удобство использования» означает простоту доступа и/или использования продукта или веб-сайта. Это субдисциплина дизайна пользовательского опыта. Хотя дизайн взаимодействия с пользователем (дизайн UX) и юзабилити когда-то использовались взаимозаменяемо, теперь мы должны понимать, что юзабилити вносит важный вклад в UX; однако это не весь опыт. Мы можем точно измерить удобство использования.
Дизайн нельзя использовать или нельзя использовать сам по себе; его особенности вместе с пользователем, тем, что пользователь хочет с ним делать, и средой пользователя при выполнении задач, определяют уровень его юзабилити. Удобный интерфейс имеет три основных результата:
Пользователю должно быть легко ознакомиться с пользовательским интерфейсом и уметь им пользоваться при первом контакте с веб-сайтом. Если мы возьмем веб-сайт турагентства, который хорошо сделал дизайнер, пользователь должен иметь возможность пройти последовательность действий, чтобы быстро забронировать билет.
Пользователям должно быть легко достигать своих целей с помощью веб-сайта. Если у пользователя есть цель забронировать рейс, хороший дизайн проведет его через самый простой процесс покупки этого билета.
Должно быть легко вспомнить пользовательский интерфейс и способы его использования при последующих посещениях. Таким образом, хороший дизайн на сайте туристического агентства означает, что пользователь должен учиться с первого раза и так же легко бронировать второй билет.
Это не единственный набор требований к удобству использования. Например, удобный интерфейс будет относительно безошибочным при использовании.
Мы можем измерять удобство использования на протяжении всего процесса разработки, от каркасов до прототипов и конечного результата. Тестирование можно проводить с бумагой и карандашом, а также удаленно, когда у нас есть более точные прототипы.
Важно как можно раньше проанализировать работу пользователей и проблемы с веб-дизайном. Оттуда мы можем применить набор рекомендаций с долей скептицизма; поскольку они, как правило, носят общий характер, нам необходимо адаптировать их к нашей конкретной области. Рекомендации показывают функции продукта, которые, как доказано, улучшают удобство использования. Мы можем вносить изменения в дизайн в соответствии с этими рекомендациями, если мы рассматриваем все размеры. Иногда это может быть просто настройка макета меню; или это может потребовать поиска намного выше.
Мы должны учитывать пользователя во всех всех аспектах при определении удобства использования. Если наши проекты должны быть «пригодными для использования», они должны пройти тест с минимальным количеством критериев. Если бы наш продукт был мышью, а не веб-сайтом, мы должны были бы убедиться, что он соответствует стандартам (чтобы получить этот крайне важный оттиск «CE»). Для веб-сайта может быть проще изучить, как наш дизайн оценивается на фоне конкурентов. Вернемся к турагентам и посмотрим, что можно улучшить в нашем дизайне.
Наш дизайн
Пользователи могут перейти к кнопке "Купить" в среднем за 294 секунды.
В среднем вернувшиеся пользователи переходят к кнопке "Купить" за 209 секунд.
18% пользователей купили билет, найдя целевую страницу.
42% пользователей не перешли дальше целевой страницы.
Happy Huzzah’s Getcha There, Inc.
Пользователи могут перейти к кнопке "Купить" в среднем за 198 секунд.
Постоянные пользователи в среднем переходят к кнопке "Купить" за 135 секунд.
32% пользователей купили билет, найдя целевую страницу.
12 % пользователей не перешли дальше целевой страницы.
Эти показатели говорят нам о многом. Нам нужно проверить, что «Happy Huzzah's Getcha There, Inc.» делает, потому что что-то там определенно работает!
Элементы удобства использования
Автор/правообладатель: yukti.io Условия авторского права и лицензия: CC BY-SA 3.0
Помимо контента, мы учитываем веб-разработку и дизайн для удобства использования. Они (в основном) изложены следующим образом:
Сервер
Скорость — Google в некоторой степени оценивает удобство использования. То, насколько быстро загружается ваша страница, является одним из факторов ранжирования, поэтому скорость загрузки также является проблемой поисковой оптимизации (SEO). Веб-сайт, который медленно загружается и медленно реагирует, отталкивает пользователей. Серверы влияют на скорость загрузки страницы в зависимости от их мощности, специализации и т. д. Естественно, не только серверы влияют на скорость страницы — веб-дизайнер имеет большое влияние на это в том, как он/она обслуживает изображения, графика и т. д. тоже.
Время простоя. Во время простоя веб-сайт полностью недоступен. Справедливо сказать, что большинство веб-сайтов время от времени перестают работать, когда сервер отключается. Однако некоторые страдают больше, чем большинство; выбор надежного сервера обеспечивает лучшее взаимодействие с пользователем. Один неудачный опыт может заставить пользователя пожать плечами и вернуться позже. Но более одного неудачного опыта, и этот пользователь может уйти куда-то еще.
Сосредоточьте используемый вами HTML на улучшении взаимодействия с пользователем. Хотя на сегодняшний день только мобильные веб-сайты выигрывают от рейтинга пользовательского опыта в Google, вероятно, будет справедливо сделать вывод, что в будущем это также будет верно для всех платформ. Некоторые ключевые соображения для вашего HTML включают:
Использовать теги ALT. Теги ALT используются вместе с изображениями; они позволяют передать дополнительную информацию об изображении, которая не отображается как часть основного текста. Теги ALT помогают индексировать в поисковых системах (они позволяют сообщить поисковой системе о содержании изображения). Они также помогают слабовидящим пользователям озвучивать экранный текст.
404 Страница не найдена. Ссылки бывают неработающими, особенно на крупных веб-сайтах. Хотя в идеале вы должны регулярно тестировать все ссылки и восстанавливать неработающие, рекомендуется иметь план на случай, если пользователи столкнутся с неработающей ссылкой. Этот план — «Страница 404 не найдена» — хорошо продуманная страница 404 попытается помочь пользователю вернуться к положительному опыту. Страница по умолчанию 404 бесполезна в этом отношении. Неуклюжий и примитивный, он создает у пользователей впечатление, что они подошли к концу эскалатора, который не прикреплен к полу. Они не хотят упасть и приземлиться на архаичное сообщение. Как дизайнер, никогда не упускайте это из виду. Эта небольшая вежливость имеет большое значение.
Визуальные факторы
Визуальные факторы, влияющие на общий пользовательский интерфейс, — это факторы, над которыми вы дизайнер обычно имеете наибольший контроль. Это означает, что нужно уделять особое внимание:
Размер и цвет шрифта. Выбирайте шрифты, которые легко читаются. Это означает высокий уровень контраста с фоном и размеры шрифта, достаточно большие, чтобы пользователи могли легко читать. Если некоторые из ваших пользователей пожилые или слабовидящие, увеличьте шрифты.
Брэндинг. Брендинг, в частности логотип компании, помогает пользователям узнать, где они находятся в Интернете. Судя по моделям движения глаз, идеальное место для логотипа — левый верхний угол экрана. Именно сюда чаще всего обращают внимание пользователи, которые читают слева направо, когда впервые заходят на сайт.
Цвета макета. Цвета должны быть однородными, чтобы передать фирменный стиль и создать эстетическую привлекательность. Кроме того, они должны обеспечивать удобочитаемость. Часто им также необходимо передать иерархию информации.
Навигация. Чтобы пользователи могли получить максимальную отдачу от веб-сайта, им необходимо перейти из точки A (точка входа) в точку B (где они хотят находиться). ) как быстро и легко. Это означает предоставление полезных систем навигации, включая (для крупных веб-сайтов) функции поиска, чтобы облегчить этот переход.
Контент. Веб-дизайнер может нести или не нести ответственность за создание копии веб-сайта, но есть элементы дизайна, как вы показать эту копию для удобства пользователей:
– Заголовки. Организуйте содержимое в управляемые фрагменты с помощью заголовков, подзаголовков и т. д. Это означает разработку схемы последовательного отображения каждого типа заголовка на опыт, когда пользователи перемещаются по сайту.
– Абзацы. Сделайте абзацы четкими и легко узнаваемыми, чтобы не перегружать пользователя «текстовой стеной». Вы также можете применить принципы гештальта к абзацам, чтобы лучше проиллюстрировать отношения между блоками контента.
Инструменты удобства использования веб-сайта
Тестировать веб-сайт легко благодаря множеству инструментов. Многие из них бесплатны; некоторые из них являются бесплатными, другие премиальными. Получите тот, который подходит для вашего веб-сайта, а затем позвольте ему собрать данные об удобстве использования.Многие позволяют протестировать существующих пользователей; вы можете сказать по данным, что они переживают, что идет правильно, а что нет. Вот список некоторых:
Usabilla – это инструмент для проверки удобства использования, который может предоставить информацию, основанную на фактическом использовании вашего текущего сайта.
WebPage FX – это инструмент для проверки удобочитаемости содержимого веб-сайта.
Pingdom предлагает информацию о скорости отклика вашего веб-сайта.
Элемент взаимодействия с пользователем
Было бы замечательно, если бы мы могли провести границы взаимодействия с пользователем, как если бы это была страна на карте. К сожалению, реальность более туманна. Как бы нам ни нравилось осмысливать явления и применять фреймворки, мы должны помнить, что пользователи — это люди. Таким образом, они принимают решения, руководствуясь логикой и эмоциями.
Как мы видели выше, многие дизайнеры не понимают разницы между удобством использования и пользовательским опытом в целом. Основные области взаимодействия с пользователем включают (Юзабилити, 2014 г.):
Удобство использования: мера способности пользователя зайти на сайт, легко использовать его и выполнить желаемую задачу. Помните, что мы разрабатываем веб-сайты, где есть поток, а не сосредотачиваемся на дизайне страницы и предполагаем, что все будет происходить позже.
Желаемый/приятный контент: лучший пользовательский опыт достигается, когда пользователь может сформировать эмоциональную связь с продуктом или веб-сайтом. Это означает, что нужно выйти за рамки полезного и полезного и перейти к разработке контента, который создает эту связь. Эмоциональный дизайн — огромная часть пользовательского опыта. Веб-сайт по английской грамматике, предлагающий ежедневные советы, может оказаться полезным. Но если этот совет окажется забавным, пользователи не только запомнят правило; они могут вернуться за добавкой!
Доступность. Людям с разной степенью инвалидности работа в Интернете может быть очень неприятной. Существует набор стандартов доступности, которым должны соответствовать сайты, чтобы помочь людям с нарушениями зрения, слуха, движений и т. д. Контент для людей с ограниченными возможностями обучения требует тщательного рассмотрения, чтобы обеспечить более полное взаимодействие с пользователем.
Надежность. Доверие, которое ваш веб-сайт вызывает у пользователей, также играет роль в пользовательском опыте. Одной из самых больших проблем пользователей в Интернете является безопасность (во многих случаях они также беспокоятся о конфиденциальности). Устранение этих проблем с помощью вашего дизайна, например путем демонстрации функций безопасности и наличия легкодоступных политик в отношении этих проблем, может помочь вызвать у пользователя чувство доверия.
Естественно, удобство использования дизайна очень важно. Однако нам необходимо рассматривать удобство использования наряду с этими другими соображениями, чтобы обеспечить удобство работы пользователей. UX зависит как от графического дизайна, интерактивного дизайна, контента и т. д., так и от удобства использования.
Вывод
Удобство использования означает, насколько легко пользователь взаимодействует с веб-сайтом или продуктом. Он относится к категории UX-дизайна, но не является всем описанием дизайна взаимодействия с пользователем. Что касается юзабилити, мы, дизайнеры, должны сосредоточиться, в частности, на трех аспектах:
Пользователям должно быть легко и удобно работать с дизайнерским интерфейсом.
Они должны легко достичь своей цели, используя этот дизайн.
Они должны быть в состоянии легко освоить интерфейс, чтобы повторные посещения были такими же, если не более легкими.
Мы должны проанализировать наш веб-дизайн при определении удобства использования, принимая во внимание все, от доступности и полезности контента до надежности и дизайна контента, который понравится пользователям. Это значит думать наперед. Кто ваши пользователи? Могут ли у них возникнуть проблемы с чтением вашего текста? Можете ли вы заставить их улыбнуться или посмеяться, используя веселый тон (например, edutainment — развлечение и образование — полезны при обучении)? Пользователи захотят быть уверенными в том, что их навигация безопасна. Заставьте их почувствовать это.
Вы также должны учитывать реалии Интернета. Поиск надежного сервера для вашего сайта, который быстро загружается, крайне важен. На уровне HTML вы должны использовать теги ALT и создать полезную страницу-ловушку на случай, если ссылка не работает.
Важны также визуальные факторы, в том числе цвета макета и форматирование контента. Красивый сайт — это хорошо, но смогут ли пользователи легко ориентироваться?
Наконец, тестируйте, тестируйте и еще раз тестируйте. Существует множество инструментов юзабилити веб-сайтов. Никогда не недооценивайте ценность тестирования на ранней стадии. Например, выяснив, куда нажимают пользователи, вы сможете лучше понять их пути и то, насколько удобен ваш сайт.
Где узнать больше
Ссылка
Главное изображение: Автор/владелец авторских прав: Питер Морвиль. Условия авторского права и лицензия: CC BY-NC 2.0
Читайте также: