Веб дизайн интерфейса сайта: Примеры дизайна веб-интерфейса

Примеры дизайна веб-интерфейса

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

Как оценить качество UI

Для оценки качества UI можно воспользоваться принципом MAYA от промышленного дизайнера Раймонда Лоуи. Эта аббревиатура расшифровывается как Most Advanced Yet Acceptable — самый прогрессивный и в то же время приемлемый. На практике он означает, что интерфейс должен быть инновационным, но при этом достаточно понятным. Применение принципа MAYA можно оценить по таким показателям:

1. Использование стандартных «метафор». Действия, которые пользователи могут выполнять на вашем сайте должны быть созвучны с действиями в реальной жизни (например, скроллинг напоминает переворачивание страниц, а архивирование — складывание бумажных документов на полку или в ящик).
2. Наличие традиционных функций. Разумеется, вы сами определяете, насколько инновационным или традиционным должен быть интерфейс, исходя из предполагаемых технических навыков ваших пользователей. Но в любом случае в нем должны присутствовать знакомые элементы — это позволяет пользователям чувствовать себя уверенней.
3. Отсутствие ненужных шагов в стандартных процессах. Усложняя стандартные процессы, вы только раздражаете пользователей.

Лучшие образцы веб-дизайна UI не только заслуживают уважение пользователей, но и получают награды, например Webby Awards. Ниже мы рассмотрели примеры дизайна веб-интерфейса разного назначения.

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

MailChimp

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

При этом продвинутым пользователям предлагаются расширенные опции в так называемом меню по требованию (menu-on-demand):

Темплейты для рассылок представлены в виде схематических превью — пользователь может сделать выбор, даже не читая описание:

Работа с темплейтом осуществляется в редакторе, в котором используются иконки, стандартные для текстовых редакторов, а также перетягивающиеся блоки, предназначение которых сразу объясняется:

При этом здесь есть важные элементы для тестирования внешнего вида и сохранения шаблона. Особого внимания заслуживает сообщение «We’ll autosave every 20 seconds» — благодаря ему пользователь знает, что ему не нужно периодически сохранять шаблон, чтобы не потерять изменения.

Меню внизу страницы сообщает пользователю, на каком этапе создания рассылки он находиться и позволяет вернуться на нужные этап, если требуется внести какие-то изменения:

Если пользователь сделал ошибку при создании рассылки, во-первых, он увидит сообщение о том, что что-то пошло не так:

А во-вторых, ему будет предложено возможное решение, которое можно сразу же применить:

После того, как новый пользователь завершил некоторые шаги, в руководстве по началу работы появляются отметки Good job! и вычеркиваются выполненные действия:

MailChimp успешно применяет плоский дизайн пользовательского интерфейса.

Hootsuite

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

При этом, кликнув на ссылку «or create new account», пользователь не перейдет на новую страницу, а всего лишь увидит окошко с крестиком и всего тремя проиллюстрированными полями:

Настроить свою ученую запись и начать использовать Hootsuite мотивирует статистика о том, как сколько времени экономит его использование:

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

Его можно пройти или пропустить (Skip tour):

В Hooutsuit меню слева с иконками раскрывается, открывая доступ к остальным разделам сервиса (например, настройкам и рекламе):

Поле публикации вверху используется для создания сообщений. Функции прикрепления файла, планирования публикации, добавления данных о расположении и приватности представлены в виде иконок:

При этом кнопка Save является сразу же и меню, и предлагает не только сохранение, но и несколько других опций:

Содержимое приложения организовывается в виде вкладок (прямо как браузере), которые можно добавлять, удалять и редактировать:

В паблишере пользователю предлагаются понятные подсказки по управлению публикациями:

My Energy

Сайт My Energy, который предназначен для учета расхода электроэнергии, газа и воды, отлично объясняет пользователям, для чего нужны те или иные данные и сразу показывает, что шагов по настройке профиля будет только три:

А после ввода адреса демонстрирует карту и, предвосхищая возможность ошибок картографического характера, предлагает нажать кнопку не That’s right, а Close enough!:

В зависимости от местоположения сайт сразу предлагает возможности по получению вычетов из налогов при использовании тех или иных технологий:

А вот советы по экономии и опросник по характеристикам жилья:

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

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

Отдельно стоит упомянуть раздел с советами по экономии:

В нем можно отмечать советы, которых вы придерживаетесь, добавлять их в список дел и быстро просматривать по фильтрам или ориентируясь на показатели Saving Impact (сколько денег они помогают сэкономить) и Effort Required (сложность выполнения), которые представлены в виде градиентных кружочков:

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

Мы, студия stfalcon.com, разрабатываем MVP для стартапов, UI для сайтов и мобильных приложений и с удовольствием создадим современный дизайн пользовательского интерфейса, который будет радовать ваших клиентов.

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

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

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

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

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

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

Мы начнем с рассмотрения основ юзабилити.

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

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

2. Дело не в дизайне

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

Суть сайта сводится к контенту и функциональности, а не к дизайну.

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

3. Предоставляйте пользователю контроль

Дизайн должен быть в первую очередь сфокусирован на то, чтобы дать пользователю ощущение контроля над своим опытом. Когда дизайн заставляет пользователя искать, как что-то сделать или, что-то еще хуже, нарушает базовую функцию Интернета (например, нажатие кнопки «Назад» или изменение размера текста), он терпит крах.

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

4. Проектируйте для взаимодействия

Важно помнить, что в конечном итоге Интернет представляет собой интерактивную среду, и наши проекты должны учитывать это. Кнопки должны выглядеть и вести себя, как кнопки. То же самое относится и к ссылкам.

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

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

5. Фокусируйтесь на одном действии за раз

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

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

6. Разбейте плотный контент на куски

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

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

Самое важное правило UX-дизайна гласит: «Все разбивают большие куски информации на маленькие, чтобы быстрее обрабатывать информацию».

7. Группируйте связанные элементы

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

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

8. Создайте сильную визуальную иерархию

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

Размер, цвет и расположение играют важную роль в создании визуальной иерархии и ориентировании пользователя по странице.

9. Будьте предсказуемы

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

Мой совет: если вы хотите поэкспериментировать (и вам следует), сделайте это на сторонних проектах или на определенных веб-сайтах, где уместно исследование.

10. Используйте эстетику, чтобы вызвать у пользователей правильное настроение

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

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

Дизайн игрового автомата является хорошим примером роли эстетики в формировании пользовательского опыта.

11. Изображения должны иметь четкую цель

Область представляющая опасность – это изображения. Дизайнеры часто загружают изображения, чтобы добавить на страницу «визуальный интерес», но это ошибка.

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

12. Поддерживайте инклюзивность

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

Опасно делать предположения о нашей аудитории и ее потребностях в доступности.

13. Соответствуйте ментальной модели пользователя

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

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

14. Тестируйте и проводите итерации

Чтобы побороть наши предположения о пользователях, мы должны проводить тесты. Тестирование очень важно для процесса проектирования в целом.

Великолепный дизайн не формируется полностью в голове дизайнера. Вместо этого он развивается путем проведения тестов и итераций.

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

15. Приоритет производительности

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

Низкая производительность оказывает значительное влияние на конверсию и просмотры страниц.

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

Принципы проектирования интерфейса – ограничения?

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

Являются ли принципы дизайна интерфейса ограничением? Безусловно. Однако они не сдерживают творчество или инновации. Творчество и инновации случаются благодаря ограничениям, а не вопреки им.

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

Интерфейс сайта

От автора: Хотя основа основ дизайна — это творчество, всё-таки некоторые элементы интерфейса сайта будет полезно иметь в запасе. В этой статье я покажу 15+ самых важных деталей пользовательского интерфейса сайта, которые пригодятся каждому. Используя эти небольшие подсказки, вы сможете получить красивый и практичный дизайн, используя меньше сил и времени.

1. Сетка

Страница, кроме авторского контента, обычно содержит в себе ещё и место под баннер, место под рекламу, под ссылки и прочее… Важно, чтобы эти места не портили общий вид сайта, и были в то же время удобно расположены. Поэтому удобно использовать разметку страницы. Классическая разметка страницы вот такая:

Всем привет, я — Найко Михаил — дизайнер, иллюстратор и блоггер. Живу и работаю в Москве. Кроме страсти к дизайну и веб-технологиям, люблю кино, спорт и свою девушку) Также смотрите мой блог о веб-дизайне. Сайт: //naikom.ru/blog/ – «Блог о веб-дизайне»

Бренд (логотип, слоган и т.д.), в левом верхнем углу

Навигация — в верхней части сайта, а также желательно слева

Основное содержание — центр страницы

Объявления — справа страницы

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Footer не содержит в себе важной информации (либо содержит её дубликат), обычно это ссылки на внутренние страницы и контактные данные.

На этом примере я нарисовал воображаемую сетку

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

И ещё один пример использования сетки в дизайне .

2. Вертикальная навигация

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

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

Хороший простой пример вертикальной навигации

Вертикальное меню расположено слева, под логотипом

3. Горизонтальная навигация

Горизонтальная навигация обычно используется для несложных и не длинных списков ссылок. Очень удобно разместить её над или под логотипом. Кроме своей заметности, горизонтальное меню имеет и ещё один плюс — это экономия места. Вертикальное меню забирает пространство, исходя из длины самого длинного слова. А вот горизонтальное меню «растёт» разве что немного в высоту, да и то всегда можно поиграть margin’ами и padding’ами.

Обычное (с хорошим дизайном) горизонтальное меню

Авторы этого меню пошли дальше, и добавили подкатегории

Ещё один пример хорошего оформления горизонтального меню

4. Выпадающие списки

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

Элегантное выпадающее меню

Модифицированное меню, добавлено оформление картинками

Выпадающее меню бывает не только горизонтальным, но и вертикальным

5. Хлебные крошки

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

Текущая страница выделяется цветом

Текущая страница никак не выделяется. Авторы сыграли на логике посетителя)

Текущая страница никак не выделяется. Зато выделены корневые страницы

6. Список записей

Блоги всё популярней, и у каждого есть список постов, что логично. Каждый такой список состоит из «превьюшек» постов. А «превьюшки» , в свою очередь, из заголовка статьи, краткого содержания, количества комментариев и тому подобной общей информации. Главный акцент мы всегда делаем на названии. Оно должно быть крупным, раскрывающим тему, без лишних слов и содержаться в тегах h2 или h3. «Превьюшка» должна заинтриговать читателя, чтобы у него появился интерес посмотреть пост, полазить по сайту.

Отличный дизайн: содержит заголовок, автора, категорию, количество комментариев и ретвитов, сам текст, картинку и кнопку «читать далее»

В развёрнутом виде отображается только последняя запись, остальные — в виде небольших «превьюшек». Такой вариант экономит место .

Каждая запись оформлена в виде страницы блокнота

7. Архивы

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

Подробный архив, где есть сортировка записей по категориям и тегам

Этот архив включает удобную временную навигацию

Отличный пример, где сочетается архив по датам и по записям

8. Футер с контентом

Времена простеньких футеров, похоже, уходят, и в моду входят футеры красивые и полезные. Туда можно поместить те же архивы, контакты, информацию об авторе (владельце) блога, меню и ещё кучу разной полезной информации. В функции футера вполне может входить привлечение посетителей для просмотра других страниц сайта. Конечно, желательно его красиво оформить. Как вариант, многие используют 3-4 колонки, в которых содержаться внутренние ссылки и информация, а так же подписки на RSS и Email.

Трехколоночный информативный футер

Пример отличного графического оформления футера сайта

Футер с интересным элегантным дизайном

9. Нумерация страниц

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

Тут я, наверное, никого не удивил, т.к. эта схема довольно распространена. Здесь чётко выражена текущая страница, её соседи, а также есть доступ сразу к последним (и первым) записям.

Один из самых часто-встречающихся вариантов оформления прокрутки страниц

А вот более интересный вариант оформления

10. Модальные вкладки

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

На этом примере на каждой новой вкладке — разный тип блюд ресторана

Здесь автор предпочёл разместить в одном месте свои работы, разбив их по категориям

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Журнал предлагает выбрать посетителю тот контент, который ему нужен

11. Участвуйте в системе оценок.

Большинство современных сайтов/блогов направлены на взаимодействие с пользователем. И многие стремятся сделать свои странички всё более интерактивными.
Помещайте на сайт кнопки Stumbleupon / Twitter / Vkontake и т.д. — и вы увидите, как страницы оживут.

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

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

Здесь читатель может как поделиться статьей с друзьями, так и отложить себе в закладки

12. Информационная панель

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

Google Analytics — один из самых ярких примеров хорошо сделанной информационной панели.

Ещё один пример хорошего дизайна и юзабилити при работе с данными.

Графики используются и в отображении котировок акций. Это — один из примеров оформления.

13. Простая регистрация

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

Отличный пример просто формы регистрации, хотя и не максимально короткий

На Vimeo размещён вариант самой короткой формы регистрации — всего три(!) поля

Facebook — ещё один пример хорошего исполнения формы

14. Акценты

Оживите свою страницу. Акцентируйте важные слова/фразы. Играйте размером, шрифтом, цветом, оформлением. Ведь первым делом посетитель должен увидеть то, на что вы ему укажите. Правда, немного сложнее заставить его увидеть части страницы в нужном ПОРЯДКЕ. Но и это решаемо.

Важные фрагменты текста выделены бирюзовым цветом

Главная надпись страницы максимально увеличена и написана другим шрифтом

Каждая новая строка «затухает» относительно предыдущей

15. Отображение Коллекций

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

Автор отобразил свою коллекцию фотографий вот в такой сетке

На этом примере мы видим такое своеобразное отображение дружеских ссылок

Простое и стильное отображение последних работ дизайнера

16. Поиск

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

Простая и мягкая по тонам форма поиска

Пример необычного оформления формы поиска

И ещё один пример нестандартного оформления нашей формы

17. Формы

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

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

На этой странице вы можете наблюдать процесс поэтапного заполнения формы

Ещё один пример поэтапного заполнения формы. Активная стадия выделяется цветом

Другой вариант оформления — активный процесс открывается в новой вкладке

18. Подписки

В то время как блоги и социальные сети набирают популярность, появилась тенденция размещать несколько кнопок подписки. Как правило, минимум это RSS и Twitter. Люди стараются сделать страницы более живыми и коммуникативным, максимально облегчая читателям возможность следить за новостями.

Вместе с кнопками подписки сразу же указано и количество подписчиков

Когда я увидел этот вариант — мне сразу бросился в глаза элегантный дизайн

Максимально простой вариант — лишь кнопки подписки, плюс ссылки на социальные сети

19. Слайдеры

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

Отличный, простой, стильный слайдер.

А это — довольно распространённый пример слайдера

Хороший необычный пример оформления слайдера

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

Успехов!

С уважением Найко Михайл.

Автор: Найко Михаил

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Чем отличаются и чем схожи Web-дизайн и UX/UI-дизайн

Чем отличается понятие WEB-дизайн от понятия UX/UI-дизайн? Порой, когда мы встречаемся с двумя данными определениями, то не всегда можем четко определить грань между двумя данными технологиями, а попытавшись выяснить это по интернет-источникам или по изданиям известных авторов по дизайну интерфейсов, не всегда эту грань можем уловить. В какой-то момент, может показаться что это об одном и том-же, но на разных языках.

Отличия веб-дизайна от UX/UI-дизайна

Да, WEB-дизайн и UX/UI-дизайн, это практически об одном и том-же, но, второе понятие более широко подходит к теме дизайна в общем и дизайну интерфейсов, в частности. Так, если WEB-дизайн это подход к созданию дизайна веб-ресурсов, иными словами сайтов, да, которые должны быть адаптивными и корректно отображаться на всех устройствах без потери стиля и смысла, но все-же именно web-ресурсов, то UX/UI-дизайн, это более широкое понятие, распространяющееся не только на область разработки веб-интерфейсов, но и интерфейсов приложений, программ и целых эко-систем. Если говорить более проще, то принципы UX/UI-дизайна применимы в различных областях разработки любых интерфейсных решений. Поэтому, разбирая вопросы WEB-дизайна, в современном видении этого вопроса, мы подразумеваем, что принципы UX/UI-дизайна неукоснительно нами применяются, используются и определяются как основное направление веб-разработки.

Что такое UX/UI-дизайн

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

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

Ну а что-же веб-дизайн?

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

Так что-же, WEB-дизайн или UX/UI-дизайн

Не стоит акцентировать внимание на тех участниках глобального спора о WEB и UX/UI-дизайне, которые рьяно разделяют эти два понятия, помещая их на различных чашах весов и давая им всякие научные или околонаучные определения. Не стоит так-же эти два понятия объединять, смешивая тем самым оболочку и содержимое. По нашему мнению, самое простое, если мы согласимся с такими простыми определениями, как, WEB – это направление, а UX/UI – это подход.

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

Наши программы по Веб-дизайну

 

Разработка интерфейса сайта | Проектирование

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

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

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

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

Конечный результат работы фирмы – это неизбежное увеличение продаж.

Проектирование интерфейса сайта

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

Этапы проектирования:

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

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

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

Мобильный интерфейс сайта

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

Суть мобильного интерфейса – это минимализм во всем. Благодаря приложению пользователь непосредственно выполняет задачи и ему не нужно большое количество информации. Этот факт еще раз эффективность результата зависит от правильно выстроенного контента.

Благодаря одинаковому оформлению дизайна пользователь на психологическом уровне чувствуют комфорт и уверенность.

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

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

Качество оказанных услуг гарантированно. Оставьте заявку ниже в форме обратной связи.

Веб-дизайн. Юзабилити. Создание интерфейса сайта

Сегодня закончил читать книгу Стива Круга «Веб-дизайн». Сразу скажу, что в ней описывается не процесс разработки дизайна сайта или верстки страниц (как это кажется из названия), а то, как правильно разработать интерфейс сайта с точки зрения юзабилити. Юзабилити – это заимствованное слово из английского (usability), обозначающее удобство использования чего-либо.

Как обычно происходит?..

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

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

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

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

Даже если за интерфейс отвечает менеджер проекта, и он лично решает «что такое хорошо, а что такое плохо», ничего хорошего из этого не выходит, так как его мнение субъективно – это раз, и он знает достаточно много о разрабатываемом сайте, чтобы не заметить многих проблем интерфейса – это два.

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

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

Все эти правила выведены из книги Стива Круга, я их лишь немного адаптировал к современным и региональным условиям и сжал.

Девиз Стива – «Не заставляйте меня думать». Фраза короткая, но очень емкая. Интерфейс сайта необходимо сделать так, чтобы посетители не замечали собственно самого интерфейса, но видели только то, что за ним скрывается. Другими словами, посетитель не должен отвлекаться на детали реализации сайта, а внимание его должно быть обращено на суть сайта. Он не должен задумывались над такими простыми задачами, как «а где здесь главное меню?», а «что это за картинка и к чему она тут?», «а как что мне сделать, чтобы…?». Ответы на все эти вопросы должны быть очевидны ему после просмотра (не прочтения) страницы сайта. По большому счету, Стив утверждает, что пользователь не должен  задумываться вообще над вопросами навигации на сайте, над определением, что это за сайт, в чем его суть, в какой части сайта посетитель находится, что главное на данной странице и т.д. Если просмотрев страницу Вашего сайта, любой из этих вопросов остается открытым, надо задуматься над улучшением страницы.

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

Зайдя на сайт, вы будите искать информацию о необходимой вам вещи. Если ссылка на нее найдется на главной странице, вы кликните на ссылку и попадете непосредственно к информации (путь 1). Иначе, вы ищите в меню сайта раздел, который приведет вас к искомой информации (путь 2.1), или ищите поиск по сайту (путь 2.2). Воспользовавшись меню или поиском, вы должны найти искомую информацию. Это все это должно пройти максимально быстро, моментально. Ваше внимание должно быть потрачено не на поиск информации, а на ее «потребление».

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

Если же нужную информацию посетитель не нашел на главной странице сайта, он пользуется меню (чаще) или поиском (реже). Поэтому, эти элементы страницы должны быть максимально удобны, видны, просты и эффективны. Под эффективностью понимается наименьшее количество действий, которое придется совершить пользователю для нахождения искомой информации, а так же простота пользования элементами страниц сайта. Взглянув на меню, у посетителя не должно возникнуть ни одного лишнего вопроса, и он должен максимально быстро понять, куда ему надо кликнуть, чтобы на шаг приблизится к искомой информации. Окно поиска должно быть видно на странице, и не должно содержать лишних управляющих элементов. В идеале это должна быть текстовая метка «Поиск», строка ввода длиной на 2-3 слова и кнопки «найти».

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

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

И еще. Не пишите длинных текстов, если это не конечная информация, за которой пришел посетитель (описание товара, статья, программный код или некие инструкции). Пользователь будет читать только то, что искал. Он не будет читать то, что вы хотите «подсунуть» ему для прочтения, если ему это не интересно. Вся служебная, навигационная, рекламная информация на сайте должна быть максимально кратко выражена. Пользователю достаточно прочитать 1-2 предложения, что бы оценить ценность читаемой информации для него. Если текст – «вода», то, скорее всего, дальше 2-х предложений пользователь не дочитает.

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

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

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

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

Вопросы, которые подсознательно задает себе посетитель сайта. Вариант 1: зайдя на главную страницу сайта.

1. Где я?
2. Откуда следует начать?
3. О чем этот сайт?
4. Где находится …?
5. Что здесь есть еще?

Вариант 2: неглавные страницы.

1. Где я (в контексте иерархии сайта)?
2. Что главное на этой странице?
3. Почему это называется так?
4. Что далее?

Конкретные советы.

Теперь озвучу мои личные краткие заметки, основанные на материале книги.

• Общие правила.

1. На странице должны быть ясно выражены и легко заметны элементы: логотип сайта, главное меню сайта, локальное меню (если есть), заголовок текущей страницы, наиболее важная информация на странице.
2. Выделяйте то, что пользователю нужно увидеть в первую очередь. Не размещайте информации, которая изначально врядле заинтересует кого-то.
3. Для выделения нужной информации используйте размер шрифта – это наиболее удачный способ сделать информацию заметной. Особенно это касается заголовков. Цвет удачен для выделения рекламного блока, или для выделения одного или нескольких важных слов в предложении.
4. Используйте только понятные и простые графические символы. Пользователь часто может неправильно понять сложный символ.
5. Максимально просто и коротко составляйте все текстовки, особенно вспомогательные.
6. Старайтесь разнести информацию в логические блоки, не перегружая страницу блоками. Сами блоки и информация в них должны быть размещены свободно и в простой и понятной форме.
7. Синхронизируйте текст ссылки с тем, куда она ведет. Если пользователь почувствует, что он попал не туда, куда хотел попасть по ссылке в соответствии с ее текстом или символом, его реакция будет негативна.
8. Выделяйте ссылки. Если на странице ссылок на порядок меньше, чем «нессылок», обязательно подчеркивайте ссылки, независимо от заявлений дизайнера, что это некрасиво. Это удобно, очень удобно! А это главное.
9. Пишите вспомогательные текстовки максимально кратко. Не «лейте воду» – такое никто не читает.

• Главная страница.

1. Размещайте на ней только самую важную информацию, дайте пользователю понять, о чем этот сайт и что он может здесь найти (максимально кратко).
2. Дайте пользователю понять, с чего стоит начать просмотр сайта, если у него нет цели найти какую-то конкретную информацию; дайте ему понять, как искать то, что он хочет найти.
3. Покажите, что есть важное на сайте, кроме того, что он ищет.
4. Публикуйте на главной странице только анонсы. Не захламляйте ее деталями. Суть этой страницы рассказать пользователю – «вот тут – это, а там –то; а это можно найти тут; и еще у нас есть интересное предложение о том-то, прочитайте его здесь». Вся детальная информация должна быть опубликована только в соответствующих разделах сайта.

Скачать книгу можно с сайта nnm.ru. Правда лучше конечно купить 🙂

В чем разница и что вам нужно?

Статьи по дизайну

В чем разница между веб-дизайном и разработкой? А как насчет UI против UX? Что означают эти дивизии? Почему так много акронимов? Не технологические люди хотят, чтобы все было удобнее для пользователя!

Вот для чего предназначена эта статья. Если вы создаете свой первый веб-сайт или просто хотите лучше понять отрасль, здесь мы объясняем и анализируем четыре из наиболее часто используемых и самых сложных терминов в технологиях сегодня: UI, UX, веб-дизайн и веб-разработку. Прочитав это, вы не только узнаете, что делает каждое поле, но и какой из них вам нужен ваш бизнес, чтобы сосредоточиться на большинстве.

Содержание статьи

Азбука IT

—

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

• Веб-дизайн : если страница занимает слишком много времени для загрузки, слишком много контента или контента слишком сложны. Файлы изображений могут быть сжаты, активы могут быть отрегулированы и реэкспортированы, а страницы могут быть обрезаны из-за избыточного содержимого.
• Веб-разработка . Чтобы ускорить загрузку контента, мы можем попытаться улучшить сжатие файлов, чтобы уменьшить размер файла содержимого, спрайты CSS для экономии полосы пропускания или сети доставки контента, чтобы увеличить время загрузки в определенных географических регионах.
• UI : Элементы управления должны быть максимально реагирующими, поэтому интерфейс должен быть достаточно простым, чтобы интерактивность была мгновенной.
• UX : вероятность того, что пользователь «отскочит» (покинет ваш сайт через несколько секунд), увеличивается с каждой секундой времени загрузки, поэтому мы должны уделять первоочередное внимание уменьшению времени загрузки на домашней и целевой странице раньше решение проблемы на всей территории страны.

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

Иногда вы найдете того, кто утверждает, что все это делает:

• Дизайнеры, которые могут кодировать, иногда называют себя пакетом «все-в-одном», но на самом деле они более ограничены, чем два отдельных специалиста (хотя иногда это может быть умный прокат, если у вас есть простой сайт) .
• У дизайнеров пользовательского интерфейса есть много совпадающих навыков с веб-дизайнерами, поэтому некоторые люди будут использовать эти названия взаимозаменяемо.
• UX и UI часто объединяются вместе, учитывая, что они оба являются субспециализациями.
• UX часто рассматривается как навык других профессий, даже вне дизайна, таких как управление продуктом.

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

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

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

Веб-дизайн

—

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

Что нужно искать при найме веб-дизайнера …

• Более того, вам нужно знать, чего вы хотите, прежде чем вы сможете найти лучшего веб-дизайнера для вас. Из-за большого количества специализаций речь идет не о том, хороший или плохой дизайнер, но подходит ли он для вас.
• Обратите внимание на их портфолио. С уделением особого внимания графическому дизайну веб-дизайнеры имеют свои уникальные художественные стили.
• Ищите мастерство тех аспектов, которые вы цените. Если у вас есть сайт с тяжелым текстом, посмотрите, как они обрабатывают типографику, читаемость и макет страницы. Если вы строите магазин электронной торговли, посмотрите, знают ли они, что делает хорошую страницу продукта.
• Является ли их предпочтительное программное обеспечение совместимым с тем, что использует ваша команда? Существует множество различных дизайнерских программ: Adobe Photoshop, Illustrator, InDesign и Sketch, а также программное обеспечение для создания прототипов, например UXPin или Balsamiq. Проконсультируйтесь с вашим другим персоналом, чтобы узнать, какие у вас варианты.
• Спросите своего дизайнера об их процессе проектирования и его сроках. Дизайнеры имеют свои собственные методы и циклы проектирования, поэтому дважды проверьте, что вы нанимаете кого-то, что подходит для вашей корпоративной культуры, а также ее расписания.

Веб-разработка

—

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

Веб-разработка разделена на две основные категории:

Front-end (a.k.a. на стороне клиента ): код для отображения веб-сайта (или приложения) на экране. Передний разработчик отвечает за то, чтобы оживить видение веб-дизайнера, как правило, используя компьютерные языки, такие как HTML, CSS и JavaScript. Естественно, не все, что планировал дизайнер, реалистично выполнимо, поэтому разработчик интерфейса часто работает с дизайнером.

Back-end (a.k.a. серверная сторона ): «front-end» извлекает из цифровой системы ресурсов, размещенных на сервере. Внутренний разработчик управляет этими за кадром ресурсами, кодирует данные в базе данных и оптимизирует доставку этих данных. Они используют языки, такие как PHP, Ruby, Python, Java или .Net.

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

Что нужно искать при найме веб-разработчика …

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

Пользовательский интерфейс (UI)

—

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

Что нужно искать, когда нанимает дизайнер пользовательского интерфейса …

• Портфель дизайнера пользовательского интерфейса должен рассказать вам все, что вам нужно знать. Протестируйте предыдущие сайты вашего кандидата и посмотрите, насколько это просто. Можете ли вы найти все, что вам нужно? Использовал сайт / приложение разочарование или легко?
• Больше, чем другие категории, ищите прошлую работу в конкретном типе проекта, который вы нанимаете. Самый лучший в мире разработчик интерфейса веб-сайта может быть ужасен в создании интерфейса для игрового приложения. Наймите того, кто имеет правильный опыт.

Пользовательский опыт (UX)

—

Во многих отношениях UX похож на поле веб-дизайна с точки зрения пользователя. Как макет веб-страницы влияет на пользователя? Как пользовательский интерфейс влияет на пользователя? Когда вы переходите на продвинутые этапы, UX становится гораздо более стратегическим, как в «как мы создаем страницу, чтобы пользователь хотел зарегистрироваться?»

Что нужно искать при найме дизайнера UX …

• Как и в случае с дизайнами пользовательского интерфейса, вы хотите «проверить диск» на предыдущих сайтах или приложениях у вашего кандидата. Легко ли они использовать? Вы наслаждаетесь опытом использования своего сайта?
• Если у вас нет бюджета, чтобы нанять отдельного дизайнера UX, попросите кандидатов в других областях об их опыте UX. Эти обязанности иногда могут обрабатываться как кроссовер от разных команд; менеджер по продуктам или маркетолог могут объяснить, что они хотят UX, а затем команда разработчиков обрабатывает визуальный дизайн и реализацию.

Как насчет сайтов с шаблонами?

—

Как насчет того, используете ли вы сайт шаблонов, например WordPress, Squarespace или Wix? Вам все еще нужна полная команда? Вам нужен кто-то еще?

Какой вам больше всего нужен?
—

К настоящему моменту вы должны быть в состоянии рассказать обо всем, что касается веб-дизайна и разработки, и вы знаете, что «UI vs UX» не так точна, как «UI + UX». Вопрос в том, какой из них вам следует уделять первоочередное внимание, если вы можете «Нанимать специалистов для всех?»

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

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

Веб-дизайн

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

Веб-разработка

• ошибок (функции сайта не работают должным образом)
• безопасность в Интернете и предотвращение взлома
• слишком много ошибок 404
• слишком много неудачных поисков DNS
• сайт в оффлайне
• определенный контент не загружается

UI

• Плохая навигация
• Отсутствие вариантов настройки
• отсутствие вариантов социального обмена
• жалобы на «как это сделать» или «где я могу найти это»

УБ

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

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

Хотите нанять веб-дизайнера или специалиста по UI / UX?

Найдите наше сообщество профессиональных дизайнеров для вашего идеального матча.

Вот 8 веб-сайтов с действительно потрясающим дизайном пользовательского интерфейса [2021]

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

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

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

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

1. Medium
2. Virgin America
3. Airbnb
4. Boosted Boards
5. Dropbox
6. Pitch
7. Frank and Oak
8. Semplice Labs

Итак, если вам интересно, как оценить качество пользовательского интерфейса — или даже отлично — как решить? Я имею в виду, вы можете определить, нравится ли вам внешний вид пользовательского интерфейса, и, конечно, вы можете использовать интерфейс, чтобы убедиться, является ли он интуитивно понятным и простым. Но есть ли что-нибудь более объективное? Более формализованный?

Как узнать, хорош ли дизайн пользовательского интерфейса веб-сайта?

Лично я всегда обращаюсь к характеристикам удобства использования, определенным исследовательской компанией Nielsen Norman Group.

Nielsen определяет удобство использования с помощью следующих пяти характеристик; обучаемость, эффективность, запоминаемость, ошибки и удовлетворение.

• Обучаемость: Может ли пользователь выполнять свои задачи с небольшими трудностями?
• Эффективность: Позволяет ли интерфейс пользователю выполнять задачи своевременно?
• Запоминаемость: Какова вероятность того, что после ухода с веб-сайта пользователь вспомнит, как им пользоваться при следующем посещении?
• Ошибки: Какие шаги предпринимает интерфейс, чтобы уменьшить вероятность ошибки пользователя, и как они позволяют пользователям исправить ошибку?
• Удовлетворенность: Нравится ли пользователю взаимодействовать с дизайном?

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

1. Medium

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

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

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

2. Virgin America

Потерпите меня на этом.Лишь на мгновение.

Когда дело доходит до помощи пользователям в завершении процесса бронирования рейса, Virgin America была одной из первых — если не , но и — первой, которая поставила интересы пользователя во главу угла. Для большинства бронирование авиабилетов — это рутинная работа. Подобно тому, как посудомоечная машина избавляет нас от необходимости мыть посуду, сайт Virgin America лишил их интерфейса, чтобы привлечь внимание к самому важному вопросу: «Куда вы хотите пойти?» Удалив весь окружающий контент, пользователь мог немедленно начать процесс бронирования.

И да, сайт сейчас может выглядеть немного устаревшим, но он заслуживает своего места в этом списке как своего рода новатор в дизайне интерфейса, ориентированного на пользователя. К сожалению, после слияния с Alaska Air их подход к пользовательскому интерфейсу стал значительно более загроможденным.

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

Источник: Work & Co

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

3. Airbnb

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

Airbnb, как и Virgin America, уделяет приоритетное внимание тому, чтобы начать бронирование проживания прямо с главного экрана. В сочетании с характерным использованием разговорных текстов, таких как «Что мы можем помочь тебе найти, Эдвард?» ниже и полезный текст подсказки, пользователь одновременно и вежливо приглашен и направлен , чтобы начать планирование своего пребывания.

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

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

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

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

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

4. Boosted Boards

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

Вы достаточно впечатлены, любознательны, и теперь пора посмотреть, что стоит за всей этой бравадой.Щелкнув по кнопке «Купить сейчас», вы перейдете к делу — интерфейс лишен цвета, за исключением светящихся оранжевых колесиков доски, и вам будет предоставлена ​​только самая важная информация: изображение, максимальная скорость, ассортимент, цена, время доставки и, конечно же, «Купить сейчас». Что тебя останавливает? Очень мало.

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

5. Dropbox

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

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

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

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

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

6. Pitch

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

Прощай, PowerPoint, привет, Питч.

Как только вы попадаете на их домашнюю страницу, вы можете сказать, что огромное количество мыслей было вложено в каждый отдельный элемент. Вы только рассмотрите слоган.«Все руки на колоду» играют по-разному; Это не только мгновенно узнаваемая идиома, но и пробуждает дух сотрудничества — центральную черту Pitch — и техно-болтовню о «встречах всех рук». Наконец, «колода» — это умная ссылка на презентационную колоду. Золотая звезда тому, кто это придумал!

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

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

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

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

Мне нравится это прикосновение, но, к сожалению, опыт в целом вызывает беспокойство, с большим контрастом между дешевым Ryanair-blue и белым, стремительным динамизмом анимации и повторением призыва к действию. кнопки при каждой возможности.

Старая поговорка о том, что меньше, да лучше , очень часто применима к пользовательскому интерфейсу. Другие приложения, которые создали фантастические возможности для целевой страницы, включают Blinkist и Slack. Приложение для чтения Blinkist получило награды за дизайн своей продукции. А хороший дизайн, очевидно, заложена в ДНК компании. Просто посмотрите на великолепную цветовую палитру ниже, как они направляют внимание пользователя к главному призыву к действию из своего императивного слогана и как они помещают свой продукт в центр экосистемы основных продуктов для чтения типичного миллениала — книги по самосовершенствованию, Kindle и хипстерские очки.Так много общения, так эффективно.

7. Frank and Oak

Frank and Oak, розничный торговец одеждой, специализирующийся на СМИ и образе жизни, использует свой пользовательский интерфейс, чтобы привлечь внимание пользователей и их вкус стиля. Хотя с точки зрения UX это довольно простой процесс покупок в Интернете, компания использует смелые фотографии и чистую типографику без засечек, чтобы передать индивидуальность бренда и его целевую аудиторию. Несмотря на некоторые смелые маркетинговые сообщения, ориентированные на продажи — — 20% скидка — , имидж их бренда прочно отпечатывается с самого первого контакта с компанией.Классный, чистый, близкий и личный.

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

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

К настоящему времени вы уже знаете, что это одни из самых важных моих критериев для хорошего дизайна пользовательского интерфейса!

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

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

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

8. Semplice Labs

Один из моих любимых примеров великолепного и функционального пользовательского интерфейса можно найти в Semplice Labs, портфолио WordPress, созданном суперзвездой дизайнером Тобиасом Ван Шнайдером, который разработан для Spotify, BMW, Google и даже НАСА. Достаточно сказать, что он знает, что делает.

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

Заключение

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

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

Хотите узнать больше о дизайне пользовательского интерфейса? Ознакомьтесь с этими замечательными статьями:

7 правил хорошего дизайна веб-интерфейса | Джером Калумбу

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

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

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

• С кем вы разговариваете ?: Рассмотрите свою аудиторию, чтобы писать контент на основе потребностей пользователей.
• Не отвлекайтесь: Подумайте о том, чтобы писать в среде с низким качеством воспроизведения, например в текстовом редакторе, чтобы не отвлекаться на визуальные эффекты или форматирование текста;
• Будьте человечны: Используйте как второе лицо (Вы) при обращении к пользователю, чтобы сделать ваш контент доступным и интересным.
• Ответьте на вопросы пользователя: При посещении веб-сайта у пользователя возникают определенные вопросы. Ваш экземпляр должен дать ответы на эти вопросы.
• Не говорите многословно: Будьте максимально краткими и ясными.
• Сделайте ваш контент доступным для сканирования : Разбейте контент на заголовки, подзаголовки, абзацы, выдвигающиеся цитаты и списки. Помните: пользователи не читают страницы, а сканируют их.
• Напишите простым языком: Избегайте использования сокращений, жаргона и сложных слов, которые заставят пользователя задуматься.
• Избегайте стен из слов: Не забудьте разбить копию на небольшие части, чтобы ее было легче обрабатывать и читать. Большие блоки текста трудно обрабатывать.
• Голос и тон: Подумайте, какие эмоции вы хотите вызвать своим сообщением. Например Friendly? Неофициальный? Формально? Я объясню этот момент более подробно в правиле №6 ниже ;
• Избегайте Lorem Ipsum: Использование текста Lorem Ipsum побудит вас сосредоточиться на бессмысленном дизайне, который, вероятно, будет позже искажен, когда реальный контент будет на месте.

При этом контент всегда должен стоять на первом месте. Как однажды сказал Джеффри Зельдман:

«Контент предшествует дизайну. Дизайн без содержания — это не дизайн, а украшение ». —Джеффри Зельдман

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

Фото UX Indonesia на Unsplash

В своей статье «Мои пять заповедей для создания каркасов» Пол Боаг подтверждает преимущества создания дизайна с рисованных эскизов:

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

— Paul Boag

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

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

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

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

Если вы хотите вызвать доверие и привлечь внимание людей к вашему интерфейсу, вам следует подумать о применении художественного направления к вашему дизайну, чтобы создать отличительную индивидуальность. В своей книге «Art Direction for the Web» Энди Кларк сказал, что art-direction:

«Использует методы дизайна, чтобы намеренно вызвать эмоциональный отклик у кого-то, когда он читает статью, использует продукт или посещает веб-сайт»

— Энди Кларк

Чтобы направить свой дизайн на искусство, задайте себе следующие вопросы:

1. Как я хочу, чтобы пользователь чувствовал себя при взаимодействии с сайтом?
2. Что я хочу, чтобы они сказали?

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

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

UX vs UI: в чем разница в веб-дизайне?

размещено на 02.04.2019

Если вы работаете с агентством веб-дизайна или веб-разработчиком над созданием нового веб-сайта, вы, вероятно, слышали термины пользовательский интерфейс (UX) и пользовательский интерфейс (UI).Оба являются важными аспектами дизайна веб-сайта и необходимы для создания успешного веб-сайта. Хотя они связаны и работают в тесном сотрудничестве, это не одно и то же.

Что такое UX веб-сайта?

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

В частности, для веб-сайтов UX относится к опыту пользователей, когда они взаимодействуют с вашим веб-сайтом, и этот опыт должен быть плавным, оптимизированным и приятным.Согласно исследованию Blue Fountain Media, 43% интернет-пользователей считают простоту использования главным приоритетом в улучшении их работы в сети, более важным, чем безопасные транзакции или конфиденциальность.

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

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

Что такое пользовательский интерфейс веб-сайта?

Пользовательский интерфейс

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

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

Как UX и UI работают вместе

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

Хороший интерфейс привлечет людей на ваш сайт; хороший UX удержит их там.

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

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

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

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

Чтобы гарантировать, что вы получаете от своего сайта наилучшие результаты, а также предлагаете посетителям наилучший опыт, ваш сайт должен быть ориентирован как на UX, так и на UI: UX, чтобы сделать ваш сайт полезным и функциональным, UI, чтобы сделать его красивым и приятным. использовать.

---

Если вам нужна помощь с вашими потребностями в цифровом маркетинге, свяжитесь с Web Solutions сегодня.

Начало работы

---

Продолжайте читать:

OR_cup-of-knowMorning Cup of Know

Веб-дизайн, веб-разработка, UI и UX: в чем разница и что вам нужно?

В чем разница между веб-дизайном и разработкой? А как насчет UI против UX? Что означают эти подразделения? Почему так много аббревиатур ?? Разве технические специалисты не хотят, чтобы все было удобно !?

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

Иллюстрация OrangeCrush

Вот для чего эта статья. Если вы разрабатываете свой первый веб-сайт или просто хотите лучше понять отрасль, здесь мы объясним и проанализируем четыре из наиболее часто используемых и наиболее проблемных терминов в современных технологиях: пользовательский интерфейс, UX, веб-дизайн и веб-разработка. Прочитав это, вы не только узнаете, что делает каждая область, но и на какой из них вам нужно сосредоточить больше всего внимания в своем бизнесе.

Азбука ИТ

—

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

• Веб-дизайн — обширная зонтичная категория для всего, что связано с дизайном визуальных элементов и удобством использования веб-сайта. И UI, и UX-дизайн, а также многие другие области включены в веб-дизайн.
• Веб-разработка — Техническая часть создания веб-сайта с упором на код.Веб-разработка далее делится на «интерфейсную» и «внутреннюю», как описано ниже.
• Пользовательский интерфейс (UI) — Специализация веб-дизайна, связанная с элементами управления, которые люди используют для взаимодействия с веб-сайтом или приложением, включая отображение кнопок и управление жестами.
• User Experience (UX) — Еще одна специализация веб-дизайна, касающаяся поведения и ощущений пользователя при использовании сайта или приложения. UX-дизайн инкапсулирует многие другие области, но рассматривает их с точки зрения пользователя.

Каркас нового дизайна веб-сайта через Pexels

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

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

• Веб-дизайн : Если страница загружается слишком долго, значит, на ней слишком много контента или слишком сложный контент. Файлы изображений можно сжимать, ресурсы можно настраивать и реэкспортировать, а страницы можно обрезать от лишнего содержимого.
• Веб-разработка : Чтобы ускорить загрузку контента, мы можем попробовать лучшее сжатие файлов, чтобы уменьшить размеры файлов контента, CSS-спрайты для экономии полосы пропускания или сеть доставки контента для сокращения времени загрузки в определенных географических регионах.
• UI : Элементы управления должны быть максимально отзывчивыми, поэтому интерфейс должен быть достаточно простым, чтобы интерактивность происходила мгновенно.
• UX : Вероятность того, что пользователь «откажется» (покинет ваш сайт всего через несколько секунд), увеличивается с каждой секундой загрузки, поэтому мы должны уделять первоочередное внимание сокращению времени загрузки на домашней и целевой страницах, прежде чем решать проблему. по всему сайту.

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

Иногда вы найдете кого-нибудь, кто заявляет, что делает все это:

• Дизайнеры, которые умеют писать код, иногда называют себя универсальным пакетом, но на самом деле они более ограничены, чем два отдельных специалиста (хотя иногда это может быть разумным наймом, если у вас простой сайт).
У дизайнеров пользовательского интерфейса
• много общих навыков с веб-дизайнерами, поэтому некоторые люди будут использовать эти названия как взаимозаменяемые.
• UX и UI часто объединяют вместе, учитывая, что они оба являются узкими специализациями.
• UX часто рассматривается как навык в других профессиях, даже за пределами дизайна, например, управление продуктом.

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

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

Итак, кто из этих специалистов может помочь вам в достижении конкретных бизнес-целей? И на что следует обращать внимание при их приеме на работу? Давайте теперь подробнее рассмотрим каждый из них.

Веб-дизайн

—

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

Дизайн домашней страницы Figgy & Plum от DSKY

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

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

Дизайн целевой страницы Chef Brain от Vallentin

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

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

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

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

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

После утверждения прототип отправляется разработчику для кодирования.

На что обращать внимание при приеме на работу веб-дизайнера…

• Прежде всего вам нужно знать, чего вы хотите, прежде чем вы сможете найти для себя лучшего веб-дизайнера.Из-за множества специализаций дело не в том, хороший дизайнер или плохой, а в том, подходят ли они вам.
• Обратите внимание на их портфолио. Делая упор на графический дизайн, у каждого веб-дизайнера есть свои уникальные художественные стили.
• Ищите мастерство в тех аспектах, которые вы цените. Если у вас сайт с большим количеством текста, посмотрите, как они обрабатывают типографику, удобочитаемость и макет страницы. Если вы создаете дизайн веб-сайта электронной коммерции, посмотрите, знают ли они, что делает страницу хорошего продукта.Ознакомьтесь с лучшими дизайнерами веб-сайтов электронной коммерции здесь.
• Совместимо ли предпочитаемое ими программное обеспечение с тем, что использует остальная часть вашей команды? Существует множество различных программ для дизайна — Adobe Photoshop, Illustrator, InDesign и Sketch, а также программное обеспечение для создания прототипов, такое как UXPin или Balsamiq. Проконсультируйтесь с другими сотрудниками, чтобы узнать, какие у вас есть варианты.
• Спросите своего дизайнера об их процессе проектирования и его сроках. У всех дизайнеров есть свои собственные методы и циклы проектирования, поэтому еще раз проверьте, нанимаете ли вы кого-то, кто соответствует культуре вашей компании, а также ее графику.

Веб-разработка

—

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

Веб-разработка делится на две основные категории:

Внешний интерфейс (он же на стороне клиента, ): код отображения веб-сайта (или приложения) на экране.Интерфейсный разработчик отвечает за воплощение видения веб-дизайнера в жизнь, обычно используя такие компьютерные языки, как HTML, CSS и JavaScript. Естественно, не все, что задумал дизайнер, реально осуществимо, поэтому интерфейсный разработчик часто работает с дизайнером взад и вперед.

Back-end (он же на стороне сервера ): «Front-end» извлекает из цифровой системы ресурсов, размещенных на сервере. Внутренний разработчик управляет этими скрытыми ресурсами, кодируя данные в базе данных и оптимизируя их доставку.Они используют такие языки, как PHP, Ruby, Python, Java или .Net.

Точно так же разработчик full-stack — это тот, кто может заниматься как внешней, так и внутренней разработкой. Иногда они являются разумным вариантом для стартапов, которые не могут позволить себе более одного найма, но в идеале у вас должна быть целая команда разработчиков с разными специализациями.

На что обращать внимание при приеме на работу веб-разработчика…

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

Пользовательский интерфейс (UI)

—

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

Дизайн иконок от тонгала

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

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

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

Дизайн иконок от Meileelogo

Дизайн пользовательского интерфейса часто совпадает с другим полем, которое называется интерактивный дизайн с аббревиатурой «IxD».Дизайн взаимодействия специализируется на всех способах взаимодействия пользователя с системой, включая интерфейс, а также такие области, как всплывающие окна, окна чата и окна ошибок. Поскольку дизайн взаимодействия так сильно подчеркивает поведение пользователя, он представляет собой нечто среднее между UI и UX-дизайном.

На что обращать внимание при приеме на работу дизайнера пользовательского интерфейса…

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

Взаимодействие с пользователем (UX)

—

Во многих отношениях UX похож на область веб-дизайна с точки зрения пользователя. Как макет веб-страницы влияет на пользователя? Как пользовательский интерфейс влияет на пользователя? Когда вы переходите к продвинутым этапам, UX становится гораздо более стратегическим, например, «как мы создадим страницу, чтобы пользователь захотел зарегистрироваться?»

Дизайн баннера в формате GIF от Марии Дзядюли

Как вы понимаете, UX-дизайн также включает в себя многие другие области веб-дизайна.Многие люди говорят о «UI vs UX», но правда в том, что они работают вместе, а не конкурируют. На самом деле, совпадений так много, что все веб-дизайнеры могут извлечь выгоду из того, что немного знают о UX. Именно так UX стал отдельной дисциплиной — наем отдельного UX-специалиста снимает кучу других обязанностей с остальной команды.

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

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

На что обращать внимание при приеме на работу дизайнера UX…

• Как и в случае с дизайном пользовательского интерфейса, вы хотите «протестировать» предыдущие сайты или приложения вашего кандидата. Они просты в использовании? Вам нравится пользоваться их сайтом?
• Если у вас нет бюджета, чтобы нанять отдельного дизайнера UX, спросите кандидатов в других областях об их опыте в области UX. Эти обязанности иногда могут выполняться как перекрестные усилия разных команд; менеджер по продукту или маркетолог может объяснить, каким должен быть UX, а затем команда дизайнеров займется визуальным дизайном и реализацией.

А как насчет шаблонных сайтов?

–

А что если вы используете сайт-шаблон, например WordPress, Squarespace или Wix? Вам все еще нужна полноценная команда? Вам нужен кто-нибудь лишний?

Дизайн темы WordPress от Майка Барнса

Сайты-шаблоны следуют большинству тех же правил, за одним важным исключением:

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

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

Какой из них вам нужен больше всего?

–

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

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

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

Веб-дизайн

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

Веб-разработка

• ошибок (функции сайта не работают должным образом)
• Интернет-безопасность и предотвращение взломов
• слишком много ошибок 404
• слишком много неудачных поисков DNS
• Сайт отключен
• Не удается загрузить определенный контент

UI

• плохая навигация
• Отсутствие опций настройки
• Отсутствие возможностей публикации в социальных сетях
• жалоб на «как мне это сделать» или «где я могу это найти»

UX

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

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

Хотите узнать больше о веб-дизайне? Ознакомьтесь с нашей статьей о том, как создать сайт!

10 основных советов по дизайну UI (пользовательского интерфейса)

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

И ключ к этому — думать в первую очередь и всегда о своем пользователе.

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

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

1. Знайте своих пользователей

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

Чтобы достичь такого уровня эмпатии, требуется нечто большее, чем тщательный анализ статистики. Это требует знакомства с людьми, которые используют ваш сайт. Это означает разговаривать с ними лицом к лицу, наблюдать, как они используют ваш продукт (и, возможно, другие), и задавать им более глубокие вопросы, чем «Что вы думаете об этом дизайне?»

Каковы их цели? Что мешает им достичь этих целей? Как веб-сайт может помочь им преодолеть эти проблемы или обойти их?

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

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

2. Определите, как люди используют ваш интерфейс

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

Tinder: пользовательский опыт приложения буквально определяется легкостью и импульсивностью простого смахивания.

Люди используют веб-сайты и приложения двумя способами: напрямую (взаимодействуя с элементами интерфейса продукта) и косвенно (взаимодействуя с элементами пользовательского интерфейса, внешними по отношению к продукту).

Примеры прямого взаимодействия

• ‍Нажатие кнопки
• Проведение карты
• Перетаскивание элемента кончиком пальца

Примеры непрямого взаимодействия

• Указание и щелчок мышью
• Использование команд клавиш / ярлыки
• Ввод в поле формы
• Рисование на планшете Wacom

‍Иногда взаимодействие оказывается слишком простым.

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

3. Устанавливайте ожидания

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

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

Задание ожиданий с помощью дизайна

• Выделение кнопки, которая соответствует желаемому действию
• Использование широко понятного символа (например, корзины для кнопки удаления, знака плюса для добавления чего-либо или увеличительного стекла для поиска ) в сочетании с копией
• Выбор цвета с релевантным значением (зеленый для кнопки «перейти», красный для «стоп»)

Установка ожиданий с копией

• Написание четкой копии кнопки
• Обеспечение направленной / обнадеживающей копии в пустых состояниях
• Выдача предупреждений и запрос подтверждения

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

‍В InVision щелчок по значку корзины не приводит к немедленному удалению экрана. Вместо этого он спрашивает, уверены ли вы, и сообщает, что это невозможно отменить.

4. Предвидеть ошибки

> Человеку свойственно ошибаться; прощать, божественный.

Александр Поуп, «Эссе о критике»

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

1. Предотвратить ошибки до того, как они произойдут
2. Предоставить способы исправить их после того, как они произойдут

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

Предвидеть ошибки часто менее неприятно, чем пытаться исправить их постфактум. Это потому, что они возникают до того, как может наступить удовлетворительное чувство завершения, которое приходит с нажатием кнопки «Далее» или «Отправить».Вот когда действительно появляются подробные сообщения об ошибках.

Когда вы пишете сообщения об ошибках, убедитесь, что они делают две вещи:

1. Объясните проблему. Например: «Вы сказали, что родились на Марсе, который люди еще не колонизировали. Пока что.»
2. Объясните как исправить. Например: «Пожалуйста, войдите в место рождения здесь, на Земле».

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

Принцип предупреждения ошибки пользователя называется принципом poka-yoke. Poka-yoke — это японский термин, который переводится как «защита от ошибок».

5. Дайте обратную связь — быстро

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

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

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

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

Просто убедитесь, что все происходит быстро. Usability.gov определяет любую задержку более 1 секунды как прерывание. Более 10 секунд — сбой. И последний щедрый: примерно на половину U.S. Население, 3 секунды достаточно, чтобы вызвать отскок.

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

6. Тщательно продумайте размещение и размер элементов.

Закон Фиттса, фундаментальный принцип взаимодействия человека с компьютером (HCI), гласит:

Время обнаружения цели зависит от расстояния до цели и ее размера. цели.

Другими словами: чем ближе и / или крупнее объект, тем быстрее вы можете навести на него курсор (или палец). Это, очевидно, имеет всевозможные последствия для взаимодействия и методов проектирования пользовательского интерфейса, но три из наиболее важных:

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

Сделайте кнопки для наиболее распространенных действий крупнее и заметнее.

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

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

7. Не игнорируйте стандарты

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

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

Это практическое правило объясняет, почему в строке меню Документов Google представлены почти все те же параметры, что и в Microsoft Word до Vista:

‍ Строка меню Microsoft Word до Vista.

Строка меню Google Docs, 2015 г.

‍

Это также объясняет, почему Pocket пришлось изменить расположение кнопки архива в своем приложении для Android несколько лет назад.

‍‍Изменение одной кнопки для большего соответствия шаблонам проектирования Android повысило вероятность продолжения использования Pocket у новых пользователей на 23%.

До осени 2013 года кнопка архивации находилась в верхнем левом углу экрана — именно там, где в спецификациях Android должна быть кнопка «Вверх». Pocket хотел сосредоточить внимание людей на опыте чтения, а не дублировать существующий аппаратный элемент управления, но непоследовательное размещение заставляло новых пользователей случайно закрывать и архивировать статью, которую они читали, вместо того, чтобы просто возвращаться к своему списку чтения, как ожидалось.

Это крошечное изменение «увеличило вероятность [новые пользователи] продолжать использовать Pocket с этого момента на 23%.

8. Сделайте ваши интерфейсы легкими для изучения

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

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

Эта идея согласуется с законом Теслера о сохранении сложности, который гласит, что дизайнеры пользовательского интерфейса должны делать свои интерфейсы как можно более простыми. Это может означать, если возможно, замаскировать сложность приложения за упрощенным интерфейсом.Популярным примером продукта, не соблюдающего этот закон, является Microsoft Word.

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

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

Совет от профессионалов: избегайте использования «узнать больше» и аналогичного неспецифического текста в ссылках и кнопках. Почему? Потому что он не сообщает пользователям, о чем они «узнают больше». Часто люди просто просматривают страницу в поисках ссылки, которая ведет их туда, куда они хотят перейти, и повторение 15 раз «узнать больше» не помогает.Это особенно актуально для пользователей программ чтения с экрана.

9. Упростите процесс принятия решений

Слишком большая часть Интернета кричит на нас: «Баннеры» внезапно расширяются, превращаясь в полноэкранную рекламу. Появляются модальные окна, умоляющие нас подписаться на блоги, которые у нас еще не было возможности читать. Межстраничные видеоролики останавливают нас, заставляя смотреть, как драгоценные секунды тикают очень-очень медленно. И даже не заставляйте меня начинать с виджетов, всплывающих окон, всплывающих подсказок…

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

Это влияет практически на все, что мы создаем:

• Общие макеты
• Меню навигации
• Страницы с ценами
• Индексы блога
• Каналы контента
  

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

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

Связанные чтения: UX vs UI: ключевые различия, которые должен знать каждый дизайнер

10.Слушайте данные

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

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

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

Итак, настройте аналитику для своего сайта и регулярно анализируйте ее. Существует множество различных инструментов аналитики, но я рекомендую Google Analytics и / или Mixpanel, в зависимости от типа проекта.

Mixpanel фокусируется на событиях, поэтому он собирает данные на основе действий посетителя на вашем сайте, в то время как Google Analytics более ориентирован на поведение, давая вам время сеанса, источники трафика и т. Д. Хотя оба инструмента могут предоставлять обе формы данных, они действительно сияют в своих сферах деятельности, поэтому выбирайте то, что лучше всего соответствует вашим потребностям.

Примечание: оба этих инструмента бесплатны для определенного количества точек данных. Webflow и аналогичные платформы обычно упрощают настройку аналитики за счет простого обмена ключами API.

Ссылки по теме: 17 полезных инструментов для UI / UX дизайнеров

Отличный дизайн взаимодействия на сайтах Webflow

Многие дизайнеры, использующие Webflow, применили эти рекомендации для создания интуитивно понятных и увлекательных взаимодействий. Вот несколько примеров.

Расширяющееся круговое меню для навигации

Уолдо Брудрик создал забавное анимированное меню для мобильных и настольных компьютеров. При загрузке страницы кружок в правом нижнем углу означает «Меню». При щелчке он раскрывается, показывая доступные страницы, и изменяется на X, позволяя пользователю закрыть меню и переориентировать контент.

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

Ты купишь этой девушке выпить?

Дизайнер Шейн Хёрт собрал это удивительное интерактивное дерево решений, чтобы помочь вам решить, покупать ли девушке выпить или нет. Дизайн включает в себя тонну контента, но позволяет вам сосредоточиться на поставленной задаче: ответить на текущий вопрос и двигаться к своему решению. Как сделать интерфейс простым, Шейн.

Редизайн Uniqlo

Дизайнер Тим Ноа однажды делал покупки на веб-сайте Uniqlo, когда понял, насколько сложна и уникальна их навигационная система.Вдохновленный, он решил «воссоздать это, но более удобным для планшетов и мобильных устройств».

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

Примечание: этот редизайн был исключительно личным проектом и никоим образом не связан с Uniqlo.

Lead Sport Accelerator

В начале 2017 года дизайнер Яро Квастенберг запустил сайт, который действительно демонстрирует мощь визуального взаимодействия в Webflow: Lead Sport Accelerator.

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

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

Хорошо, вы освоили основы

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

‍

Дизайн пользовательского интерфейса в современных веб-приложениях — Smashing Magazine

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

Что такое пользовательский интерфейс?

«То, как вы выполняете задачи с помощью продукта — что вы делаете и как он реагирует — это интерфейс» — Джеф Раскин

Дизайн пользовательского интерфейса — это не только кнопки и меню; речь идет о взаимодействии между пользователем и приложением или устройством, а во многих случаях — о взаимодействии между несколькими пользователями через это устройство. Это означает, что дизайн пользовательского интерфейса не о том, как выглядит продукт, а о том, как он работает.Речь идет не только о расположении кнопок и выборе цветов, но и о выборе правильных инструментов для работы. Нужны ли кнопки для конкретного интерфейса? Если да, то что должны делать эти кнопки? Что мне нужно предоставить пользователям, чтобы они могли понять, как работает мое приложение, и с легкостью выполнить то, что они хотят делать?

Дополнительная литература по SmashingMag:

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

Что делает отличный пользовательский интерфейс?

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

1. Ясность : интерфейс позволяет избежать двусмысленности, делая все понятным с помощью языка, потока, иерархии и метафор для визуальных элементов.Понятные интерфейсы не нуждаются в руководствах. Они также гарантируют, что пользователи делают меньше ошибок при их использовании.
2. Concision : Легко сделать интерфейс понятным, слишком уточнить и пометив все, но это приводит к раздуванию интерфейса, когда на экране одновременно отображается слишком много всего. Если на экране слишком много элементов, найти то, что вы ищете, будет сложно, и интерфейс станет утомительным в использовании. Настоящая проблема в создании отличного интерфейса — сделать его лаконичным и понятным одновременно.
3. Знакомство : что-то знакомое, когда вы вспоминаете предыдущую встречу с ним. Даже если кто-то впервые использует интерфейс, некоторые элементы могут быть вам знакомы. Вы можете использовать метафоры из реальной жизни, чтобы передать смысл; например, вкладки в виде папок часто используются для навигации по веб-сайтам и в приложениях. Люди узнают их как элементы навигации, потому что им знакома метафора папки.
4. Отзывчивость : Это означает несколько вещей.Во-первых, отзывчивость означает скорость: хороший интерфейс не должен казаться вялым. Во-вторых, интерфейс должен обеспечивать хорошую обратную связь с пользователем о том, что происходит, и о том, успешно ли обрабатывается ввод пользователя.
5. Согласованность : Обеспечение единообразия интерфейса для всего приложения важно, поскольку оно позволяет пользователям распознавать шаблоны использования. Как только ваши пользователи узнают, как работают определенные части интерфейса, они смогут применить эти знания к новым областям и функциям, при условии, что пользовательский интерфейс соответствует тому, что они уже знают.
6. Aesthetics : хотя вам не нужно делать интерфейс привлекательным, чтобы он выполнял свою работу, создание чего-то хорошего сделает время, которое пользователи проводят за вашим приложением, более приятным; и более счастливые пользователи могут быть только хорошо.
7. Эффективность : Время — деньги, а отличный интерфейс должен делать пользователя более продуктивным за счет ярлыков и хорошего дизайна. В конце концов, это одно из основных преимуществ технологии: она позволяет нам выполнять задачи с меньшими затратами времени и усилий, делая большую часть работы за нас.
8. Прощение : Все делают ошибки, и то, как ваше приложение обрабатывает эти ошибки, будет проверкой его общего качества. Легко ли отменять действия? Легко ли восстановить удаленные файлы? Хороший интерфейс не должен наказывать пользователей за их ошибки, а должен предоставлять средства для их исправления.

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

Набор инструментов для проектирования визуальных интерфейсов

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

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

Вот основные строительные блоки визуального дизайна интерфейса:

Расположение и расположение

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

Форма и размер

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

Цвет

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

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

Контрастность

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

Текстура

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

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

Практические методы создания эффективных пользовательских интерфейсов

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

Используйте пустое пространство для построения отношений

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

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

Закругленные углы определяют границы

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

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

Передайте смысл с помощью цвета

Цвет — отличный инструмент для передачи смысла; например, для определения различных элементов.При желании вы можете использовать цветовое кодирование, чтобы различать разные типы кнопок в вашем приложении. Красный можно использовать для деструктивных кнопок, таких как удалить и удалить, синий — для стандартных кнопок, а зеленый — для действий сохранения и обновления. Цветовое кодирование также можно использовать для различения различных частей данных, созданных пользователем, на обзорных экранах, чтобы упростить их сканирование.

Прямое внимание

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

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

Тени и затемненный фон для фокусировки

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

Подчеркните основные действия

Многие приложения имеют экраны, на которых отображаются основные и второстепенные действия. Например, если вы создаете проект в приложении для управления проектами, основная форма, вероятно, будет иметь поля для названия проекта, крайнего срока, уровня приоритета и т. Д.Внизу вы можете увидеть кнопку «Создать». Часто рядом с ней также отображается кнопка или ссылка «Отмена». Действие отмены менее важно, потому что оно обычно не нужно вашим пользователям, поэтому вы можете уменьшить его визуальный «вес». Например, вы можете сделать кнопку «Создать», а «Отменить» — простой гиперссылкой без визуального оформления. Это смещает фокус на основное действие и помогает пользователю быстрее найти его после завершения заполнения формы.

MobileMe затемняет фон вокруг модальных окон и применяет к ним тени.Это переключает внимание пользователя на окно, блокируя шум внизу.

Больше эффективности с блочными ссылками

Используйте дополненные блоки ссылки для облегчения наведения курсора. Веб-приложения полагаются на строительные блоки HTML для их построения, что означает, что они интенсивно используют элемент привязки (более известный как «ссылка»). Элемент привязки по умолчанию является «встроенным», что в основном означает, что его ширина и высота покрывают только текст внутри него. Это, в свою очередь, означает, что размер интерактивной области ссылки равен размеру самого текста, который во многих случаях может быть слишком маленьким для пользователей, чтобы по нему было удобно нажимать.Мы можем применить padding к элементу привязки, чтобы сделать его больше.

Обратите внимание, насколько более заметна кнопка «Создать клиента» по сравнению с кнопкой «Отмена» в этой форме создания клиента Ballpark.
MobileMe использует дополненные ссылки на боковой панели навигации. Большие интерактивные области позволяют быстрее навести на них курсор мыши, что повышает удобство использования.

Для ссылок в списке, например на боковой панели, превращение якорей в «блоки» может быть еще лучшим решением. Вы можете указать тип элемента с помощью свойства CSS display; поэтому указание привязки как «блока» превратит его в элемент блока, что означает, что его высота и ширина больше не будут соответствовать размеру текста внутри него, а по умолчанию будут охватывать всю ширину контейнера.Это идеально подходит для списков ссылок на боковой панели.

Используйте глаголы как ярлыки

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

Backpack отлично использует глаголы для кнопок и ссылок, обеспечивая ясность для каждого выбора.

Автофокус / повторная фокусировка при вводе

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

Tadalist позволяет быстро и последовательно вводить список дел. Когда вы пишете задачу и нажимаете «Enter», приложение добавляет новый элемент, а затем автоматически снова фокусируется на текстовом поле, готово к дальнейшим действиям.
Backpack отлично использует глаголы для кнопок и ссылок, обеспечивая ясность для каждого выбора.

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

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

Чтобы упростить интерфейс, используйте элементы управления наведением, которые отображаются только при наведении курсора на определенную область. Так, например, при наведении указателя мыши на запись, которую вы хотите отредактировать, появится кнопка редактирования, но она будет скрыта для всех остальных записей.

Twitter показывает кнопки «Ответить» и «Добавить в избранное» при наведении курсора на каждое сообщение.
Basecamp позволяет вам прикреплять к сообщению несколько файлов, но одновременно показывает только одно поле вложения. Элементы управления

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

Расширяющиеся формы

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

Ярлыки внутри полей ввода

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

MobileMe сжимает экран входа в систему, перемещая метки текстовых полей внутри самих текстовых полей.

Контекстно-зависимые элементы интерфейса

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

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

Иконки

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

Иконки

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

Сделайте отзывчивым с помощью индикаторов загрузки

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

Индикаторы загрузки отлично подходят для короткого времени ожидания, но что, если на выполнение действия уходит минута или больше? Хотя вы ничего не можете сделать с самим временем загрузки (при условии, что вы уже сделали все, что в ваших силах), вы можете что-то сделать с ожиданием ваших пользователей.Найдите время, чтобы развлечь или проинформировать. Например, многие приложения отображают интересные подсказки и подсказки во время длительного ожидания. Если пользователь ничего не делает продуктивным, по крайней мере, он может узнать что-то новое.

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

Сделать отзывчивым при нажатых состояниях кнопок

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

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

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

Полезные пустые состояния

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

Рекламируйте особенности

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

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

Отменить

Одной из наиболее востребованных функций настольных приложений является надежный ярлык отмены. Случайно изменили форматирование диаграммы, над которой вы работаете? Нет проблем: нажмите Ctrl / Cmd и Z на клавиатуре, и приложение сделает шаг назад и восстановит документ до состояния до вашего последнего действия. Отменить — важный инструмент для упрощения интерфейсов, и его также можно использовать в веб-приложениях. Например, вы можете либо интегрировать знакомое сочетание клавиш, либо отображать временные уведомления со ссылками на отмену в них.

Yammer показывает полезное примечание под основной областью ввода, касающееся функции «следовать». Когда пользователи прочитают его, они могут закрыть его, используя маленький крестик справа.
Writeboard позволяет восстановить вашу работу в течение двух месяцев после ее удаления.

Восстановить

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

Диалоги подтверждения

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

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

Заключение

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

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

Это означает, что вам не нужно настраивать интерфейс на 100% с первого раза.Если что-то не работает, вы можете это изменить. Наблюдая за тем, как пользователи взаимодействуют с вашим интерфейсом, вы начнете хорошо понимать, насколько хорошо он работает и где возникают трения — где вещи замедляют работу ваших пользователей. Если какие-либо части пользовательского интерфейса нуждаются в улучшении, вы можете очень легко обновить их для всех своих пользователей. Это подход кайдзен к дизайну интерфейса: небольшие, постепенные, регулярные улучшения. Так что не беспокойтесь о том, чтобы все стало идеально с первого раза; вместо этого повторяйте по ходу работы, и вскоре вы получите отличный интерфейс, который эволюционировал благодаря реальному использованию.

Что такое дизайн пользовательского интерфейса (UI) и почему он важен?

Что такое дизайн пользовательского интерфейса и почему он важен?

Агентство веб-разработки F5 Studio предоставляет услуги дизайна UI UX, поэтому мы хотим поделиться с вами конкретным опытом.

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

Пользовательские интерфейсы бывают трех форматов:
Графические пользовательские интерфейсы (GUI). Пользователи взаимодействуют с визуальными представлениями на цифровых панелях управления. Рабочий стол компьютера — это графический интерфейс.
Интерфейсы с голосовым управлением (VUI). Пользователи взаимодействуют с ними через свои голоса.Самые умные помощники Siri на iPhone и Alexa на устройствах Amazon — это VUI.
Интерфейсы на основе жестов. Пользователи взаимодействуют с пространствами 3D-дизайна с помощью движений тела: например, в играх виртуальной реальности (VR).

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

Вы озадачены ролью дизайнера пользовательского интерфейса? Руководство от toptal.com поможет вам понять, как нанять идеального дизайнера пользовательского интерфейса.

ПОЧЕМУ В ВЕБ-ДИЗАЙНЕ ВАЖЕН ХОРОШИЙ ИНТЕРФЕЙС ПОЛЬЗОВАТЕЛЯ?

Почему UI важен в веб-дизайне?
Из опыта агентства веб-разработки F5 Studio в дизайне корпоративных веб-сайтов мы знаем, что хороший пользовательский интерфейс важен в том смысле, что он помогает вашей целевой аудитории четко видеть ваши продукты. Он разработан таким образом, чтобы отображать предлагаемые вами услуги без двусмысленности, чтобы привлечь внимание ваших посетителей и удержать их на вашем сайте.

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

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

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

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

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

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

Когда цифровое агентство предоставляет расширенные услуги SEO, специалисты по SEO сосредотачиваются на информационной архитектуре веб-сайта.
Будет ли UI-дизайн по-прежнему важен для SEO в 2021 году? За последние несколько лет Google и другие поисковые системы внесли много изменений в результаты поиска и представили обновленный алгоритм, основанный на оценке пользовательского интерфейса и пользовательского опыта, чтобы получить более надежную и качественную информацию.Итак, UI UX-дизайн — один из важнейших способов поисковой оптимизации в 2021 году.

Кроме того, пользовательский интерфейс — очень важная часть дизайна мобильного приложения.

Выбор элементов дизайна пользовательского интерфейса

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

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

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

Вам также может понравиться: В чем разница между UX и UI дизайном?

Лучшие практики дизайна пользовательского интерфейса

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

Помните следующие практики хорошего дизайна пользовательского интерфейса.

1. Простые интерфейсы лучше всего — используйте понятный язык и избегайте несущественных элементов.
2. Поддерживайте согласованность, используя общие элементы пользовательского интерфейса. Используйте элементы, которые знакомы пользователям. Это гарантирует, что дела будут выполняться быстро. Это также гарантирует пользователю комфорт и удовлетворение.
3. Используйте продуманные и продуманные макеты страниц. Постарайтесь привлечь внимание к наиболее важным аспектам сайта.
4. Цвета и текстуры должны использоваться надлежащим образом, чтобы привлечь внимание пользователя к конкретному или данному компоненту.См. Сообщение F5 Studio о веб-дизайне для обычного бизнеса
   
5. Связь является ключевым моментом. Когда что-то идет правильно или неправильно, пользователь должен уметь это понимать. Убедитесь, что ваш сайт использует настройки по умолчанию и эффективно взаимодействует с вашими пользователями.
6. Не игнорируйте типографику. Так же, как типографика вашего веб-сайта важна для вашего бренда, она также влияет на удобство использования.

Если вам нужен эффективный пользовательский интерфейс бизнес-сайта, вам следует подумать:

1. Пользователи быстро оценивают дизайн и заботятся об удобстве использования и привлекательности.
   На самом деле посетителей веб-сайта волнует не ваш дизайн, а то, чтобы их задачи выполнялись легко и с минимальными усилиями.
   Таким образом, ваш дизайн должен быть «невидимым». Пользователи должны сосредотачиваться не на этом, а на выполнении задач.
   Итак, поймите контексты и потоки задач ваших пользователей (которые вы можете найти, например, на картах пути клиента), чтобы настроить лучший, наиболее интуитивно понятный пользовательский интерфейс, обеспечивающий бесперебойную работу.
Интерфейсы
2. также должны быть приятными (или, по крайней мере, без разочарований).
   Когда дизайн пользовательского интерфейса предсказывает потребности пользователей, они могут наслаждаться более персонализированным и захватывающим опытом.Радуйте посетителей, если вы хотите, чтобы они продолжали возвращаться на сайт.
Интерфейсы
3. должны отражать ценности бренда и укреплять доверие пользователей.

Эти лучшие практики проектирования пользовательского интерфейса основаны на 10 правилах разработки пользовательского интерфейса

Веб-дизайнеры

F5 Studio используют лучшие практики дизайна пользовательского интерфейса, и вы можете увидеть примеры дизайна пользовательского интерфейса на нашей странице работ. Также нам нравится креативный подход в дизайне пользовательского интерфейса. Мы комбинируем разные стили, чтобы создать отличный веб-дизайн. Вы знаете о последних тенденциях в стилях дизайна пользовательского интерфейса? В этой статье мы объясняем, как использовать неоморфизм в дизайне пользовательского интерфейса на бизнес-сайте.

5 ошибок, которых следует избегать при разработке пользовательского интерфейса

1. Отсутствие дизайна, ориентированного на пользователя: эту часть легко игнорировать, поскольку это один из важных аспектов дизайна пользовательского интерфейса. При проектировании следует учитывать потребности, предпочтения,
   проблем пользователей. Если вы этого не сделаете, это может негативно повлиять на ваш бизнес и привести к его краху.
2. Не узнать больше о целевой аудитории: Опять же, этот момент больше иллюстрирует то, о чем мы только что говорим. Вместо того, чтобы проектировать, руководствуясь собственными предпочтениями и вкусами, лучше проектируйте, как если бы вы были заказчиком.Просто подумайте о том, что бы понравилось покупателю, и, если возможно, проведите опрос или собеседование с некоторыми потенциальными клиентами, чтобы по-настоящему понять, что им нужно.
3. Чрезмерное использование динамических эффектов: Использование слишком большого количества анимационных эффектов не является синонимом отличного дизайна. Таким образом, отказ от чрезмерной декоративной анимации может помочь оптимизировать взаимодействие с пользователем.
4. Отказ от дальнейшего изучения: давление соблюдения сроков и большая рабочая нагрузка могут заставить дизайнера избегать изучения других возможностей, чтобы получить вдохновение и проявить больше творчества, прежде чем он разработает свой план дизайна.
5. Слишком много крафтинга заранее. Особенно на ранней стадии дизайна, мы просто хотим иметь правильное представление о дизайне и начать работу. Однако такая концепция не всегда бывает эффективной. Иногда изучение других источников может открыть нам некоторые удивительные вещи.

РЕЗЮМЕ

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

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

.