Java, UX, HTML, CSS, WEB-design

5 тактик интерактивного дизайна для визуальных дизайнеров

Краткое описание по статье 5 тактик интерактивного дизайна для визуальных дизайнеров

Название: 5 тактик интерактивного дизайна для визуальных дизайнеров . Краткое описание: [ad_1] ⭐ Джефф Г . Дата публикации: 20.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Джефф Готельф

  • 0 Комментарии

5 тактик интерактивного дизайна для визуальных дизайнеров

  • 9 минут чтения

  • UX-дизайн, дизайн, юзабилити, пользовательский интерфейс, дизайн взаимодействия, графический дизайн

Краткое резюме ↬

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

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

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

Дальнейшее чтение на SmashingMag:

  • Как вы проектируете взаимодействие?
  • 10 принципов эффективного веб-дизайна
  • Принципы дизайна: композиционный баланс, симметрия и асимметрия
  • Дизайн взаимодействия в облаке

1. Поговорите со своими клиентами

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

Еще после прыжка! Продолжить чтение ниже ↓

Скульптура с графическим дизайном
Изображение предоставлено: Кристиан Бьорнар

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

Понимание вашей аудитории требует общения с целевыми пользователями. Эти разговоры могут происходить на различных форумах. Хотя безличные подходы, такие как опросы, работают достаточно хорошо, ничто не сравнится с личным общением с вашими клиентами. В зависимости от того, на кого вы ориентируетесь в своей работе, найти свою целевую аудиторию может быть так же просто, как пойти в местную кофейню, купить несколько подарочных карт на 5 долларов и завязать там разговоры с посетителями. Большинство людей с радостью обменяют 10-15 минут обмена своим мнением на подарочную карту кофейни. Другие способы найти пользователей — размещать объявления на таких веб-сайтах, как Craigslist, вытаскивать имена из списков ваших клиентов, обращаться к торговым организациям (для определенных типов пользователей, таких как медсестры) и проводить время в местах, где ваша аудитория проводит время (например, музыка болельщики на концерте).

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


Личный документ. (Изображение: Тодд Заки Варфель)

2. Ориентируйте пользователя

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

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

Amazon нет страницы результатов
Amazon хорошо справляется со своей страницей без результатов.

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

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

3. Чем проще, тем лучше

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

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

4. Дизайн для диалога

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

Подумайте о витамине
Думайте, что витамин поддерживает разговор со своими читателями.

5. Рабочий процесс: понимание того, что было до и после

Визуальное оформление красивое. Он тоже статичен. Интерактивный дизайн выстраивает рабочий процесс от страницы к странице и от состояния к состоянию. При разработке каждой страницы подумайте, что пользователь может делать на этой странице и как следующий шаг процесса вписывается в рабочий процесс. Если вы только что добавили на страницу форму регистрации, подумайте, что произойдет, когда пользователь нажмет кнопку «Отправить». Страница обновится? Будет ли страница подтверждения? Что делать, если в форме есть ошибки? Что, если пользователь нажмет кнопку «Назад»? Все это компоненты рабочего процесса опыта. Каждая страница или состояние — это всего лишь один небольшой компонент в потоке кликов пользователя. Проблема в том, что у каждого пользователя может быть относительно уникальный поток кликов, в зависимости от того, как они попали на ваш сайт и почему они пришли. Вы использовали свои знания о пользователе, чтобы сориентировать его, и предоставили простой интерфейс, который создает с ним успешный диалог: теперь убедитесь, что каждое взаимодействие имеет логический следующий шаг. Этот следующий шаг должен вписываться в опыт и визуальный язык, которые вы создали, чтобы опыт казался цельным и последовательным. Именно эти элементы повышают доверие к бренду и повышают доверие пользователей к вашему дизайну.

Бонусный совет: разберитесь со своими «материалами»

Джонатан Айв, дизайнер iPod (среди прочего), продвигает идею о том, что дизайнеры всех типов должны понимать материал, с которым они работают. Это относится и к интерактивному дизайну. Понимание «материалов», из которых состоит сеть, имеет решающее значение. Беглое знакомство с HTML, CSS, JavaScript и связанными с ними технологиями только улучшит ваше понимание среды и даст реалистичный взгляд на ваши проекты. Отличным ресурсом для этого является группа разработчиков, которые будут реализовывать вашу работу. Регулярно обсуждайте с ними свой дизайн и оцените, осуществимы ли ваши предложения с учетом технологий, которые они используют. А еще лучше начать изучать основы самостоятельно. Вам не нужно становиться звездным программистом, но достаточное знание того, как ведет себя среда, в которой вы работаете, может значительно повлиять на взаимодействие, которое вы разрабатываете.

Резюме

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

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — 5 тактик интерактивного дизайна для визуальных дизайнеров

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»