Дизайн веб сайтов: Веб дизайн и создание дизайна сайта

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

Детали реализации дизайна (например, где разместить поле поиска) обсуждать не будем, так как это уже делалось в ряде статей; вместо этого мы сосредоточимся на основные принципы, эвристики и подходы для эффективного веб-дизайна — подходы, которые при правильном использовании могут привести к более сложным дизайнерским решениям и упростить процесс восприятия представленной информации.

Обратите внимание, что вас могут заинтересовать статьи, связанные с удобством использования, которые мы публиковали ранее:

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

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

Что думают пользователи?

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

Большинство пользователей ищут что-то интересное (или полезное) и кликабельное; как только найдутся перспективные кандидаты, пользователи кликнут. Если новая страница не соответствует ожиданиям пользователей, нажимается кнопка «Назад» и процесс поиска продолжается.

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

  Пользователи не читают, они просматривают. Обратите внимание на резкие «горячие» области в середине предложений. Это типично для процесса сканирования.

• Интернет-пользователи нетерпеливы и требуют немедленного удовлетворения. Очень простой принцип: если веб-сайт не может оправдать ожидания пользователей, значит, дизайнер не справился со своей работой должным образом, и компания теряет деньги. Чем выше когнитивная нагрузка и чем менее интуитивно понятна навигация, тем охотнее пользователи покидают сайт и ищут альтернативы. [ЮН / ДВУ]
• Пользователи не делают оптимальный выбор. Пользователи не ищут самый быстрый способ найти нужную им информацию. Они также не сканируют веб-страницу линейно, последовательно переходя от одного раздела сайта к другому. Вместо этого пользователи удовлетворяются; они выбирают первый разумный вариант. Как только они находят ссылку, которая, кажется, может вести к цели, есть очень большая вероятность, что по ней сразу же щелкнут. Оптимизировать сложно и долго. Удовлетворение более эффективно. [видео]

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

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

1. Не заставляйте пользователей думать

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

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

Давайте рассмотрим пример. Beyondis.co.uk утверждает, что находится «за пределами каналов, продуктов и дистрибуции». Что означает ? Поскольку пользователи обычно просматривают веб-сайты в соответствии с шаблоном «F», эти три утверждения будут первыми элементами, которые пользователи увидят на странице после ее загрузки.

Хотя сам дизайн прост и интуитивно понятен, чтобы понять, о чем страница, пользователю нужно искать ответ. Вот что такое ненужный вопросительный знак есть. Задача дизайнера — сделать так, чтобы количество вопросительных знаков было близко к 0. Визуальное пояснение размещено справа. Простой обмен обоими блоками повысит удобство использования.

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

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

2. Не растрачивайте терпение пользователей

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

Как утверждает Райан Сингер, разработчик команды 37Signals, пользователи, вероятно, захотят предоставить адрес электронной почты, если их попросят об этом после , они увидели, что функция работает, поэтому они имели некоторое представление о том, что им нужно. собирались получить взамен.

Stikkit — прекрасный пример удобного сервиса, практически ничего не требующего от посетителя, ненавязчивого и комфортного. И это то, что вы хотите, чтобы ваши пользователи чувствовали на вашем веб-сайте.

Очевидно, Клещу нужно больше. Однако регистрацию можно пройти менее чем за 30 секунд — поскольку форма имеет горизонтальную ориентацию, пользователю даже не нужно прокручивать страницу.

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

3. Управляйте вниманием пользователей

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

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

Humanized отлично использует принцип фокусировки. Единственный элемент, который непосредственно виден пользователям, — это слово «бесплатно», которое кажется привлекательным и привлекательным, но при этом спокойным и чисто информативным. Тонкие подсказки предоставляют пользователям достаточно информации о том, как узнать больше о «бесплатном» продукте.

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

4. Стремитесь к представлению функций

Современный веб-дизайн обычно подвергается критике из-за его подхода, который заключается в том, чтобы направлять пользователей с помощью визуально привлекательных 1-2-3-шагов, больших кнопок с визуальными эффектами и т. д. Но с точки зрения дизайна эти элементы на самом деле не плохо. Напротив, такие руководства чрезвычайно эффективны, поскольку они ведут посетителей по содержанию сайта очень простым и удобным для пользователя способом.

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

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

5. Используйте эффективное письмо

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

Говорите по делу. Избегайте симпатичных или умных названий, маркетинговых названий, названий, характерных для компании, и незнакомых технических названий. Например, если вы описываете услугу и хотите, чтобы пользователи создали учетную запись, лучше «зарегистрироваться», чем «начать сейчас!» что опять же лучше, чем «изучить наши услуги».

Eleven2.com сразу переходит к делу. Никаких милых слов, никаких преувеличенных заявлений. Вместо этого цена: именно то, что ищут посетители.

Оптимальное решение для эффективного письма —

• использовать короткие и лаконичные фразы (как можно быстрее переходить к сути),
• использовать сканируемый макет (категоризировать контент, использовать несколько уровней заголовков, использовать визуальные элементы и маркированные списки). которые нарушают поток однообразных текстовых блоков),
• используйте простой и объективный язык (реклама не должна звучать как реклама; дайте вашим пользователям разумную и объективную причину, по которой они должны использовать ваш сервис или оставаться на вашем сайте)

6. Стремитесь к простоте

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

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

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

7. Не бойтесь белого пространства

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

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

Пустое пространство — это хорошо. Cameron.io использует пустое пространство в качестве основного элемента дизайна. Результатом является хорошо сканируемый макет, который дает контенту доминирующее положение, которого он заслуживает.

8. Эффективно общайтесь с помощью «видимого языка»

В своих статьях об эффективной визуальной коммуникации Аарон Маркус формулирует три основных принципа использования так называемого «видимого языка» — контента, который пользователи видят на экран.

• Организация : предоставить пользователю четкую и последовательную концептуальную структуру. Непротиворечивость, компоновка экрана, взаимосвязи и навигация — важные концепции организации. Одни и те же соглашения и правила должны применяться ко всем элементам.
• Экономия : добиться максимума с наименьшим количеством подсказок и визуальных элементов. Следует учитывать четыре основных момента: простота, ясность, отличительность и акцент. Простота включает в себя только те элементы, которые наиболее важны для коммуникации. Ясность : все компоненты должны быть спроектированы таким образом, чтобы их значение не было двусмысленным. Отличительность : важные свойства необходимых элементов должны быть различимы. Акцент : самые важные элементы должны легко восприниматься.
• Общение : сопоставьте презентацию с возможностями пользователя. Пользовательский интерфейс должен поддерживать баланс между разборчивостью, удобочитаемостью, типографикой, символикой, несколькими представлениями, а также цветом или текстурой для успешного общения. Используйте макс. 3 начертания максимум 3 кегля размером — максимум 18 слов или 50-80 символов на строку текста.

9. Конвенции – наши друзья

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

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

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

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

10. Тестируйте заранее, тестируйте часто

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

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

Несколько важных моментов, о которых следует помнить:

• по словам Стива Круга, тестирование одного пользователя на 100% лучше, чем отсутствие тестирования и тестирование одного пользователя в начале проекта лучше, чем тестирование 50 ближе к концу. Согласно первому закону Бема, ошибки чаще всего возникают при разработке требований и проектировании, и чем позже они устраняются, тем дороже они обходятся.
• тестирование — это итеративный процесс . Это означает, что вы что-то проектируете, тестируете, исправляете и снова тестируете. Могут быть проблемы, которые не были обнаружены в ходе первого раунда, так как пользователи были практически заблокированы другими проблемами.
• юзабилити-тесты всегда дают полезные результаты . Либо вам укажут на проблемы, которые у вас есть, либо вам укажут на отсутствие серьезных недостатков дизайна, что в обоих случаях является полезной информацией для вашего проекта.
• согласно закону Вайнберга, разработчик не подходит для тестирования своего кода . Это относится и к дизайнерам. После того, как вы поработаете над сайтом несколько недель, вы уже не сможете смотреть на него со стороны. Вы знаете, как он устроен, и поэтому точно знаете, как он работает — у вас есть мудрость, которой не было бы ни у независимых тестировщиков, ни у посетителей вашего сайта.

Итог: если вам нужен отличный сайт, вам нужно его протестировать.

Awwwards — Награды веб-сайтов — Лучшие тенденции веб-дизайна

Awwwards — Награды веб-сайтов — Лучшие тенденции веб-дизайна

Валь д’Ока — Место дня — 7,58 — 12 мая 2023 г. —

Название объекта

Валь д’Ока

Общий балл

7,5 8 ^/10

By

studioidemateria

Jack89ita

Исследуйте SOTD

• Студия Идея Материя ^ПРО
• Джакомо Моттин

Новости и обновления

Следите за новинками бренда

в цифровом дизайне.

Не пропустите последних событий на awwwards .

w.news

w.creators — рядом с вами

Избранное

Последние

НОМИНАНТЫ Классные сайты!

Голосуйте сейчас

ВЕБ-САЙТ

Хьюстон Инжиниринг

коллекционный#коллекционный»>

Голосуйте сейчас

ВЕБ-САЙТ

Bump Festival 2023

коллекционный#коллекционный»>

Голосуйте сейчас

ВЕБ-САЙТ

C2 Монреаль

коллекционный#коллекционный»>

Голосуйте сейчас

ВЕБ-САЙТ

Маленький Большой

коллекционный#коллекционный»>

Проверить все отправленные веб-сайты Посмотреть номинантов

Маркет

Кураторская торговая площадка

для цифровых и физических продуктов

Просмотр специально подобранных продуктов Посмотреть рынок

Академия

Учитесь у

лучших инструкторов.

• Раскройте все свои способности: как достичь своих целей, не жертвуя своей жизнью

• Создание иммерсивного креативного веб-сайта с нуля без фреймворков

• Создайте отмеченную наградами анимацию и интерактивный дизайн в Webflow

• Креативные портфолио: мощный визуальный язык для брендов

Выберите из более чем сотен курсов Посмотреть Академию

Каталог

W.

СОЗДАТЕЛИ

• Международный

  Заводской 38

• Международный

  Заводской 35

• Международный

  Заводской 27

Имя	Профиль	Награды	Категории
-99 студия дизайна ПРО	Студия	8	Веб-дизайн, UX/UI, Интерактивный	Вид
Рефокус INT	Агентство	9	Веб-дизайн , Веб-разработка , Интерактив , Художественное оформление , Другое	Посмотреть
Цифровое агентство Айседора INT	Агентство	12	Веб-дизайн, Веб-разработка, UX/UI, Интерактив, Разработка приложений	Посмотреть
Куберто INT	Агентство	25	Веб-дизайн, Веб-разработка, Графический дизайн, UX/UI, Интерактивный	Посмотреть

Связь с более чем 4 956 Агентства и специалисты Просмотр каталога

Вдохновляющие элементы

ЭЛЕМЕНТ

ДЕНЬ

ЭЛЕМЕНТ

Прокрутка

коллекционный#коллекционный»>

видео

Откройте для себя огромный выбор вдохновляющих элементов

• ELEMENT

  Страница сведений о продукте

  коллекционный#коллекционный»>

• ELEMENT

  Edie Parker Product Zoom

  коллекционный#коллекционный»>

  видео

• ELEMENT

  Bandit Страница продукта + корзина

  коллекционный#коллекционный»>

  видео

• ЭЛЕМЕНТ

  Фон прокрутки

  коллекционный#коллекционный»>

  видео

Просмотреть все элементы

Коллекции

Откройте для себя множество коллекций

.

КОЛЛЕКЦИЯ

Вдохновение

КОЛЛЕКЦИЯ

UX/UI

КОЛЛЕКЦИЯ

Вдохновение

КОЛЛЕКЦИЯ

UX/UI

КОЛЛЕКЦИЯ

Веб-технологии

КОЛЛЕКЦИЯ

Вдохновение

КОЛЛЕКЦИЯ

Вдохновение

КОЛЛЕКЦИЯ

Вдохновение

Дорожная карта

Дополнительные функции

скоро будет.

No related posts.