Инновации в дизайне Инновации всегда были частью человеческого опыта.

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Инновации в дизайне Инновации всегда были частью человеческого опыта.

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

- Впечатлить других дизайнеров и поднять свой авторитет в индустрии.

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

157

1362

В избранное

0

Другие статьи канала Chulakov Design

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Поиск не по продукту

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

157

2632

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Будьте осторожны, если размещаете рекламу на сайте

Никто не любит рекламу, но для бизнеса она может быть полезна. Как найти баланс между раздражением пользователя и целями бизнеса?Из исследований Norman Nielsen Group мы знаем:
1. Ни один вид рекламы не воспринимается положительно.
2. Неанимированные баннеры оцениваются лучше, чем анимированные.
3. Интерактивные баннеры более убедительны.
4. Положительное отношение к сайту повышает доверие к рекламным объявлениям.Если вы размещаете рекламу на сайте, обратите особое внимание на ее размер, местоположение, эстетику и соотношение рекламы с общим дизайном.Реклама не должна отвлекать пользователей от их основных целей.Убедитесь, что домашняя страница оптимизирована в качестве отправной точки для изучения сайта, гарантируя, что реклама помогает пользователям определить тип сайта и визуально привлекательна.Google просит четко обозначать и маркировать рекламу. Например, «на правах рекламы», «реклама», «рекламный блок», «спонсорские ссылки» и т. д.

157

2386

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Слайдер не работает

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

157

5188

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

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

DribbbleВ недавнем посте мы писали о том, почему дизайнеры так любят инновации.Одной из причин было желание выделиться и прославиться в сообществе. Dribbble считается лучшим инструментом для продвижения себя как дизайнера.Давайте разберем проблемы с этим инструментом.
1. Тут не задумываются над тем, как будут взаимодействовать люди с их интерфейсами, даже если это концепты, что приводит общий пользовательский опыт к стагнации.
2. Тут не решают никакую проблему своим дизайном. Это лишь визуально привлекательное изображение, чтобы набрать лайки.
3. Тут в основном мыслят одним экраном и не продумывают полные пользовательские сценарии. Это сужает мышление самого дизайнера.
4. Тут редко показывают реальные интерфейсы, а это значит, что большинство интерфейсов существует без ограничений, дизайнер сам придумывает правила, по которым играть.Самым ярким примером такого бездумного отношения к дизайну стал восходящий тренд на dribbble, неоморфизм. Кто-то решил выделиться, объединить привычный минимализм со скевоморфизмом, остальные быстро подняли хайп и теперь пророчат замену минимализма. Хотя этот стиль и смотрится визуально привлекательно, он абсолютно не жизнеспособен.Мы живем в динамичное время, и, вместо того чтобы стремиться вернуть прошлое, лучше думать о том, как улучшить настоящее и сделать жизнь людей удобнее и приятнее.

157

4872

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Объяснение всему

Когда только начинаешь заниматься дизайном, думаешь, будто для этой профессии нужно обладать определенными сакральными знаниями и иметь чуйку на хороший дизайн. И это правда, только знания совсем не сакральные, а чуйка не обязательна (со временем она вырабатывается сама).Все, что связано с дизайном, непременно объяснено в первую очередь психологией человека. Для каждого элемента интерфейса и механики есть объяснение психологическим законом или, к примеру, когнитивными предубеждениями, которых насчитывается больше
100.Если вы только начинаете заниматься дизайном или задумываетесь над этим, то изучите гештальт-принципы: они лежат в основе всего, что мы делаем визуально как дизайнеры. Так вы будете совершенствовать ваш UI. А дальше усложняйте и изучайте, что влияет на поведение человека, чтобы прокачивать ваш UX.

157

2895

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Брови заголовков

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

157

5639

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

По умолчанию

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

157

1873

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

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

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

157

1728

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Где разместить сообщение об ошибке?

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

157

1875

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Раскладушки

Складные, или Foldable, смартфоны потихоньку надвигаются, и важно быть готовым к изменению рынка, потому что это изменение неизбежно коснется всех дизайнеров интерфейсов.Разные типы устройствСейчас рынок представляет собой два типа складываемых устройств.Бесшовное
- например Galaxy Z Flip.Со швом
- например Windows Surface Duo.Наличие шва между экранами очень сильно влияет на пользовательский опыт. Если устройство бесшовное, то в разложенном состоянии у пользователя один большой экран;
если же у устройства есть шов, то экрана два, а это уже пространство для многозадачности. Впрочем, устройства и с одним экраном позволяют справиться с многозадачностью на программном уровне.Основная проблемаПри создании раскладывающихся устройств основная их фишка является и основной проблемой. Так, исследования показывают, что взаимодействие с элементами, находящимися рядом или на шве, значительно ухудшается из-за изгиба. Например, книги, журналы и газеты всегда стараются избегать место изгиба и шва.Как подобные экраны влияют на опыт и о чем нужно будет думать дизайнерам?
1. Как отобразится ваша страничка или приложение, если пользователь оставит устройство в полусогнутом состоянии, то есть буквой L? Логично будет разделять экран приложения на две части, как, например, в приложении «Камера» Samsung уводит всю функциональную часть в нижнюю половину экрана.
2. Как будет отображаться веб-страничка на устройстве со швом? На какой половине экрана располагать поиск? Как организовывать чтение новостей или статей на двух экранах сразу? Например, Microsoft ввел в своем браузере отображение веб-страниц на двух экранах как в книге, а чтение происходит с помощью горизонтального перелистывания.ВыводыЕсть еще масса вопросов, которые предстоит решить дизайнерам, и, вообще, неизвестно, приживутся ли данные устройства на рынке, но факт того, что мы стоим на пороге нового этапа адаптивного дизайна, вдохновляет. Мы все же советуем погрузиться в эту технологию, изучить принципы ее работы, чтобы ваши продукты были классными и хорошо функционировали на абсолютно любых устройствах.

157

2471

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Бланк-форма Проблема Заполнение полей очень туманно, непонятно и примитивно.

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

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

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

157

5255

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Визуальное мышление

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

157

5359

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Расстояния в типографике Просто и без воды про расстояния в интерфейсной типографике.

Расстояния в типографикеПросто и без воды про расстояния в интерфейсной типографике.Вертикальные расстояния:
1. Размер шрифта. Убедитесь, что ваши размеры контрастны между собой и при этом соотносятся. Для этого создавайте градацию размеров. Минимальная разница в размерах
- 25%.
2. Расстояние между строк (интерлиньяж). Идеальное расстояние между строк
- 120–140% от размера шрифта, но это правило можно нарушать. Если, к примеру, шрифт довольно крупный, то 120% будут создавать дыру между строками. Совет простой: расстояние между строками обратно пропорционально размеру шрифта. То есть чем больше шрифт, тем меньше интерлиньяж.Горизонтальные расстояния:
1. Длина строки. Оптимально 65 символов вместе с пробелами. Людям так удобно читать, не слишком длинно и не слишком коротко.
2. Расстояние между буквами (трекинг). Трекинг можно использовать в некоторых случаях. Например, у вас есть подпись к заголовку, написанная капсом. Разработчик шрифта, скорее всего, выверяет расстояния между строчными, нежели между прописными, поэтому буквы кажутся немного сжатыми. Чтобы решить это, просто увеличьте трекинг на 5%
- и ваша надпись станет как надо.

157

1900

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

Плагины

Сегодня поделимся с вами, какими плагинами в Figma мы в Студии пользуемся на постоянной основе.Better File Thumbnails
- удобный плагин, чтобы быстро создать обложку для файла.Easing Gradient
- полезный плагин, чтобы создать плавный градиент, особенно хорошо работает для градиентов-затемнений над фотографией.Font Master
- отличный инструмент, с помощью которого можно быстро разобраться в стилях шрифтов и почистить ненужное.Insert Big Image
- обходим ограничение фигмы, когда нужно загрузить большую картинку без потери качества, например, если нужно загрузить скриншот целой страницы какого-нибудь сайта.OnePlus Measure
- крутой и функциональный плагин, чтобы создавать гайды для интерфейсов.Style Organizer
- поможет разобраться с большим количеством цветов и все упорядочить.Text Prettier
- используйте этот плагин на каждом вашем тексте: исправляет кавычки, висячие предлоги, длинное тире и многое другое, сильно помогает.Typescales
- позволяет быстро создать типографическую систему.Text Styles Generator
- работает вместе с Typescales: после того как сгенерировали систему, переводим ее в стили с помощью этого плагина.Ну и конечно же, Unsplash
- чтобы по-быстрому поставить какую-нибудь фотографию в интерфейс.

157

1262

В избранное

0

Chulakov Design

Дизайн 21.04 в 11:08

Подписаться

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

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

157

5107

В избранное

0

Инновации в дизайне Инновации всегда были частью человеческого опыта.

Другие статьи канала Chulakov Design

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

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

Где разместить сообщение об ошибке?

Бланк-форма Проблема Заполнение полей очень туманно, непонятно и примитивно.

Расстояния в типографике Просто и без воды про расстояния в интерфейсной типографике.

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

Рейтинг авторов