Одностраничный и многостраничный дизайн пользовательского интерфейса: за и против

1. Несколько быстрых соображений
2. Одностраничные сайты
3. Многостраничные сайты
4. преимущества
5. Недостатки
6. Заключительные мысли и советы

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

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

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

Кредит фотографии: Chipotle

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

Так сложнее ли создать привлекательный пользовательский интерфейс и пользовательский интерфейс для одностраничных сайтов или для более сложных сайтов? Оба - или нет?

Несколько быстрых соображений

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

Кредит фотографии: 10 лучших практик для SketchApp

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

• Сколько вы предлагаете пользователям? (информация, продукт (ы) и / или развлечения)
• Каковы наиболее важные элементы в иерархии сайта?
• Как вы собираетесь сделать это как можно проще для пользователя?
• Как вы собираетесь сделать это приятным / информативным для пользователя?

Одностраничные сайты

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

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

преимущества

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

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

Кредит фотографии: Спальные ленты из Squarespace

Некоторые эксперты утверждают, что одностраничные веб-сайты даже имеют более высокий коэффициент конверсии по сравнению с большими многостраничными веб-сайтами. 37signals провел исследование одностраничных конверсий и обнаружил, что одна длинная целевая страница дает на 37,5% больше регистраций по сравнению с многостраничной версией.

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

Кредит фотографии: Коллекция рамок

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

Недостатки

Самая большая опасность - попасть в ловушку, в которую можно положить «10 фунтов материала в 5-фунтовый пакет». Одностраничные веб-сайты просто не могут вместить жизнь, вселенную и все остальное. Как описано в бесплатной электронной книге Лучшие практики веб-интерфейса , они требуют тщательной визуальной иерархии и большого количества дисциплины.

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

Кредит фотографии: UXPin

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

Определение разделов контента и использование якорных ссылок - это рекомендуемый метод увеличения одностраничного SEO. Использование тегов H1 также настоятельно рекомендуется. Поскольку H1 сигнализирует о том, что то, что следует, отличается от остальной части страницы, это хороший способ заверить SEO одностраничного сайта. (Используйте только один h2 на раздел вашего одностраничного сайта).

Многостраничные сайты

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

Ключевые моменты об этих сайтах:

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

преимущества

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

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

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

Кредит фотографии: Привет, малыш

На самом деле, гибридный одностраничный сайт (как Привет, малыш выше) появился, чтобы дать дизайнерам лучшее из обоих миров. Одностраничная структура оптимизирует конверсии. С другой стороны, верхняя навигация дает пользователям больше контроля, чем просто прокрутка. И как дизайнер Кэмерон Чепмен предлагает Вы можете даже использовать модалы и методы AJAX для поддержки нескольких страниц контента.

Недостатки

Чем глубже идет сайт, тем больше будет бороться традиционная навигация.

Кредит фотографии: затоваривание

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

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

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

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

Заключительные мысли и советы

Подводя итог всего этого:

• Возьмите контент-первый подход , Выясните, о чем заботятся пользователи, и разработайте соответствующий интерфейс. Включите столько страниц, сколько вам нужно.
• Убедитесь, что ваш сайт подходит для одностраничной работы. Если вы можете едва уместить все на одной странице, рассмотрите гибридный сайт. Если вы знаете, что вам нужно несколько категорий, используйте многостраничный сайт.
• Не упускайте из виду SEO. Поисковая оптимизация может быть построена с помощью одностраничного сайта. Добавление свежего контента - это всего лишь один из способов повысить SEO.
• Пользователи не всегда читают. Вот почему инфографика и видео являются частью нового пользовательского опыта. Быстрое сканирование для интерфейса необходимо для сайта любого размера.
• Будь проще. Последовательный дизайн на самом деле проще для пользователей, потому что он повторно использует компоненты, страницу-на-страницу. Поведение, цвета и эстетика облегчат навигацию пользователей.
• Ясность важна. Хотя люди будут охотнее прокручивать, а затем переходить по слоям ссылок, первый взгляд на домашнюю страницу будет иметь большое впечатление для пользовательского опыта и быстрого решения, если пользовательский интерфейс того стоит.

Чтобы узнать больше об искусстве и науке, стоящих за правильными решениями для пользовательского интерфейса, ознакомьтесь с бесплатной электронной книгой. Дизайн веб-интерфейса для человеческого глаза , 30+ визуальных тематических исследований включены от самых популярных на сегодняшний день компаний, таких как Intercom, Medium, Facebook и Twitter.

Похожие

Комментарии