Chulakov Design
Дизайн
Подписаться
Думать как пользователь

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться

Стиль

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

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

Далее необходимо определиться с основными элементами фирменного стиля.

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

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

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

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

Атмосфера сайта подсознательно остается в памяти, и очень важно правильно ее передать.

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

Chulakov Design
Дизайн
Подписаться

Чистый дизайн

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться

Цвет ссылки

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

С развитием интернета и внедрением в поведение людей определенных паттернов, раскрашивать каждую ссылку стало необязательным. В больших сервисах нет возможности выделять цветом все второстепенные ссылки, иначе акцент с важной информации переместится на менее важную. Люди привыкли, что заголовок новостей, имя или аватарка профиля могут быть кликабельными. В менее очевидных примерах помогает использование глагола (например, “показать весь список”) или понятных иконок. Если нужно показать кликабельность большого блока, вводятся плашки. Главная страница Яндекса на 95% кликабельна, но цветовые акценты расставлены в соответствии с задачами компании и пользователя.

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

Chulakov Design
Дизайн
Подписаться
Хорошая ошибка Часто ошибка — точка трения сервиса с пользователем.

Хорошая ошибка

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

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

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

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

Понятной Избегайте формулировок вроде «Что-то пошло не так» или «Ошибка 000013b147». Людям это ни о чем не говорит. Лучше объясните, что и почему произошло, что нужно исправить или заполнить, используя понятный людям язык.

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

Спокойной Сообщение не должно быть драматичным. Не шокируйте пользователя по пустякам.

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

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

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

Chulakov Design
Дизайн
Подписаться
10 правил подачи проекта

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


1. Расскажите про аналитикуЗа каждым макетом кроется большая аналитическая работа. Важно показать клиенту, что все ваши решения обоснованы научно, а не строятся на собственном мнении и интуиции.


2. ИдеяТак же, как и аналитика, идея проекта не всегда лежит на поверхности. Расскажите о принципах и приемах, которые вы вложили в свою работу.


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


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


5. ДеталиОбычно макеты широкие, и поэтому их нельзя показать 1:
1. Покажите какую-нибудь деталь крупным планом и объясните, чем она интересна.


6. КопирайтТекст важен всегда и везде. Потрудитесь написать что-нибудь интересное и цепляющее.


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


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


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


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

Chulakov Design
Дизайн
Подписаться
Поправка на пользователя

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

Если перевернуть смартфон и попробовать понажимать по ссылке, например, chulakov.ru, вы заметите, что это сделать стало сложнее.

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

Разработка таких незримых решений и есть неотъемлемая часть дизайна.

Chulakov Design
Дизайн
Подписаться
Moodboard Часто дизайнеры недооценивают значение мудборда.

Дизайнер работал целую неделю, но клиент остался недоволен: дизайнер не попал в настроение и не оправдал ожиданий.

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

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

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

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

Chulakov Design
Дизайн
Подписаться
Игровые механики

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


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

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

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться
Презентация проекта Презентация проекта так же важна, как и проделанная работа.

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

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться
​​Информационная архитектура

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

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

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

Как сделать информационную архитектуру?По-разному. Иногда ее расписывают в гугл-документах или с помощью программ вроде Mindmap. Мы советуем рисовать ее в виде блок-схемы. Смотрите прикрепленный файл.

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

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

Chulakov Design
Дизайн
Подписаться
​​Дизайн пустоты

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

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

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

Chulakov Design
Дизайн
Подписаться
Спасибо за ваш заказ

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

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

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

Chulakov Design
Дизайн
Подписаться
Заголовок утвержден

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


1. Запросите исходные материалы: тексты, логотипы, фотографии, HEX’ы фирменных цветов. В идеале
- брендбук компании. Работать с реальным материалом
- всегда большое преимущество: он выглядит выигрышнее «заглушек» и рыбных текстов, проще и привычнее для восприятия клиента.


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


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


4. Узнайте сразу, чего бы клиент точно НЕ хотел. Не использовать траурный черный. Не делать гигантские промозаголовки. Не делать «как в андроиде». Исключить острые углы. Ни слова по-русски. Все это реальные требования клиентов, которые не были оговорены сразу и обернулись проблемами для дизайнера впоследствии.


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


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


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

Chulakov Design
Дизайн
Подписаться
Контентмейкер« У меня нет контента для сайта», — часто звучит такая фраза от дизайнеров.

Контентмейкер

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

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

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться
Please stand by Скорость Интернета за последние 15 лет выросла в десятки раз.

Please stand byСкорость Интернета за последние 15 лет выросла в десятки раз. Это развязало руки дизайнерам в плане проявления своего богатого внутреннего мира. Никого уже не удивит рассчитываемый в реальном времени 3D-объект или 4k-видео в потоковом режиме.

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


0. НикакойБез прелоадера, безусловно, обойтись можно, но лишь в том случае, если вы можете гарантировать быструю загрузку контента
- менее 1 секунды.Бывает такое, что жмете по ссылке
- экран гаснет и становится пустым. Вы сидите и гадаете: страница грузится, или что-то пошло не так? Может, обновить страницу? Или подождать? О, вот что-то появилось!


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


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


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

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

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

  • "Записки Дизайнера" (про дизайн и только про него 157 157 157
  • (Не) только немецкий 157 157 157
  • #анямастерконтента 157 157 157
  • #Фудтех 157 157 157
  • 10 идей и трендов дня 157 157 157
Показать весь рейтинг
Загрузка ...