FAQ Recover your password Activation Registration

Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ

- 637.9
VK
FAQ Recover your password Activation Registration
WEB DESIGN
Добро пожаловать на огонёк к Web-разработчикам!
Группа для web-разработчиков, смотрим видео, задаем вопросы, обмениваемся опытом, в общем совершенствуем свои знания коллеги!!!


Источники

http://designmojo.ru/design/trends/
Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
Глобальные тренды веб-дизайна в 2017

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

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

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

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

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

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

?w=800&ssl=1

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

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

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

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

?w=800&ssl=1

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

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

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

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

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

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

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

?w=800&ssl=1

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

Мэр города Энтони Лионс заявляет:

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

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

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

Источник http://designmojo.ru/design/trends/globalnye-trendy-veb-dizajna-v-2017/ Автор: Диана Сиддикви

0

0

107

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
3 основных тренда в веб-дизайне на Октябрь

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

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

Вот что в тренде в этом месяце:

1. ТЕКСТ БЕЗ ГРАНИЦ

Было время, когда каждый элемент дизайна веб-сайта имел свое место. Сейчас это не всегда так.

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

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

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

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

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

?w=1340&ssl=1

?w=1340&ssl=1

?w=1340&ssl=1

2. БОЛЬШЕ, ЧЕМ ЖИЗНЕННЫЕ ОБЪЕКТЫ

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

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

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

То, что является сложной задачей в негабаритных и еще больших по размерам элементах, чем в жизненном дизайне, это создать баланс. Большим объектам требуется много места и балансирующих элементов, чтобы дизайн не чувствовался странным или резким. Westward Leaning делает это с помощью большого количества пробелов вокруг изображения очков; Famoudache использует яркий цвет и веселую типографику, чтобы компенсировать «плавающие» анимированные усы; DTSi использует большие текстовые и геометрические слои для смягчения видео с глазом.

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

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

?w=1340&ssl=1

?w=1340&ssl=1

?w=1340&ssl=1

3. ПОЛЫЕ ФИГУРЫ

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

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

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

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

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

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

?w=1340&ssl=1

ВЫВОД

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

Источник http://designmojo.ru/design/trends/3-osnovnyx-trenda-v-veb-dizajne-na-oktyabr/ Автор: Елизавета Гуменюк

0

0

89

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
Ребрендинг YouTube

У нас есть слово “труба” в трубе. Это странно. Никто не понимает что это значит.

Кристофер Бетинг, начальник креативного отдела YouTube

Последние 12 лет, логотип YouTube представлял собой сплошной анахронизм. “Труба” —  это сленговое название телевизора, работающего при помощи электронно-лучевой трубки. Но ни “трубы”, ни телевизоры не имеют прямого отношения к крупнейшему Показать полностью... видеосервису в мире, на который ежемесячно заходят более 1,5 млрд человек. Потоковое видео теперь можно посмотреть практически с любого экрана, который подключен к интернету.

Наконец бренд получил самое серьезное обновление за всю историю своего существования. Логотип YouTube изменился, сместив акцент со слова “Tube” на знакомую всем кнопку “Play”, которая уже стала культовой для компании.

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

?resize=600%2C400&ssl=1

Мелисса Смит, UX-исследователь, демонстрирует новую функцию мобильного приложения YouTube в офисе компании в Сан-Бруно, Калифорния
Хотя сегодняшняя смена логотипа является наиболее серьезным апдейтом в истории YouTube, это не полная трансформация, как например произошло с изменением серебристой “U” в логотипе Uber на обратную “C”.

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

Это эволюция, а не революция

—  Кристофер Бетинг

Задача редизайна YouTube состоит в том, чтобы связать множество приложений сервиса с самыми разными аудиториями по всему миру. То, что началось в 2005 году исключительно как десктопный сайт, сегодня существует на телефонах, планшетах, игровых приставках и, внезапно, на телевизорах. Более того, YouTube — это уже не один бренд. За последние несколько лет он породил семейство сервисов: YouTube Kids, Gaming, TV, Red и Music. Создатели вдруг почувствовали, что весь этот колоссальный рост просто напросто улетает в трубу.

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

—  говорит Кристофер

Кристофер Бетинг — дизайнер из Франции, который присоединился к Google шесть лет назад и был с YouTube последние три года. Именно он возглавил кампанию по переосмыслению логотипа.

Поскольку YouTube превратился в целое семейство сервисов, а также из-за того, что он адаптируется под каждый экран и формат видео, Бетинг и его команда ощущали потребность в экспериментах с динамичным брендом. “У нас был символ, который напоминал букву “Y”; мы сделали его динамичным и анимированным. При просмотре видео, он “вытягивал” образцы цветов из картинки на экране. Также он мог брать фотографию канала. Так у нас мог появиться динамичный элемент, который бы пересекался с остальными элементами сервиса”, — рассказывает Крис.

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

?resize=600%2C400&ssl=1

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

В проведенном исследовании поведения потребителей команда сотрудников обнаружила, что многие пользователи ассоциируют кнопку “Play” и само слово YouTube как одно целое.
“Это сыграло важную роль в принятии итогового решения”, —  Кристофер Бетинг. Так, команда дизайнеров решила совместить кнопку с названием сервиса, после чего было решено взяться за их модернизацию. “Старый логотип и шрифт будто бы из прошлого, более того, он был вручную изменен таким образом, что буква U в Tube — не та же, что U в You. Они отличались”, — говорит Бетинг.

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

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

?resize=600%2C400&ssl=1

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

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

Для обновления цвета кнопки “Play”, команда пыталась найти что-то среднее между всеми оттенками красного. И они остановились на #FF0000, который назвали “очень чистый красный, отлично подходящий для видеосервиса”.

?resize=300%2C600&ssl=1


Новый шрифт, логотип и цвет видны сегодня на настольных и мобильных версиях YouTube. Главная цель сейчас — приспособить новый стиль под все сервисы компании. “Если мы отклонимся от стиля основного продукта, наши пользователи всегда расскажут нам. Пока что реакция одна — эй, да это же YouTube”, говорит Кристофер.
Настольные и мобильные приложения обновляются в соответствии с эстетикой Material Design, которая используется во всех продуктах Google. “Мы уверены, что Material Design — отличный выбор для нас”, — говорит Роберт Томпсон, руководитель отдела проектирования экрана просмотра видео и навигации. Material Design помогает сделать сайт более удобным и читабельным, перенося контент на передний план.

Переход обновленного стиля сервиса на Material Design позволяет выстраивать общий язык дизайна в постоянно расширяющейся вселенной приложений Google.

Эволюция сайта YouTube

?resize=600%2C300&ssl=1

?resize=600%2C300&ssl=1

?resize=600%2C300&ssl=1

?resize=600%2C300&ssl=1

?resize=600%2C299&ssl=1

?resize=600%2C300&ssl=1

?resize=600%2C300&ssl=1

?resize=600%2C299&ssl=1

?resize=600%2C300&ssl=1

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

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

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

?resize=300%2C536&ssl=1

Например, возьмем такую простую вещь, как формат видео. Когда YouTube только начинал, у него был один вариант — горизонтальные прямоугольники. Но теперь видео могут быть и вертикального формата. Раньше это означало, что пользователь получит плохой опыт от использования сервиса, потому что такие видео занимали лишь часть экрана. “Одна из вещей, которые мы ненавидели всем коллективом — черные полосы”, — говорит Бронштейн — “Маленькая картинка и черные полосы”.

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

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

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

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

?resize=600%2C286&ssl=1

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

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

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

Находить жесты, которые будут понятны всей полуторамиллиардной аудитории сразу — это то, к чему стремится команда разработчиков YouTube. “Мы пытаемся создать общий язык для всех наших приложений, используя дизайн для создания эффекта последовательности”, — говорит Мануэль Бронштейн.

Мы всегда стремимся сделать YouTube более человечным

Мануэль Бронштейн

Статью Бена Поппера перевел Саша Каша

Источник http://designmojo.ru/design/inspiration/rebrending-youtube/

0

1

86

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
4 скрытых изъяна, которые убивают ваши конверсии

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

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

Вполне возможно, что в вашем дизайне содержатся некоторые изъяны, приводящие к отказам. Вот несколько вещей, которые вы, возможно, просмотрели.

1. Визуальная иерархия

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

Вот, для примера, домашняя страница MailChimp:

&resize=w704

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

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

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

&resize=w704

А вот тепловая карта, показывающая, куда падал взгляд посетителей:

&resize=w704

Вы заметите, что ярко-красная надпись «NO FEES» привлекла больше всего внимания. Ее проблема заключается в том, что хоть она и привлекает внимание, она не интерактивна, и не имеет никакой, связанной с конверсиями цели. Как результат – внимание пользователей уходит с наиболее важных частей страницы.

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

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

2. Нечёткая передача ценности

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

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

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

&resize=w704

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

&resize=w704

3. Некачественный процесс оформления заказа

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

&resize=w704

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

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

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

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

&resize=w704

Они показывают стоимость каждого товара, и варианты доставки.

Также, процесс оформления можно дополнить индикатором завершения:

&resize=w704

Это поможет вашему дизайну выглядеть более организованно.

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

4. Устаревшее оформление веб-сайта

В электронной коммерции, первое впечатление – это всё. Какое у вас складывается первое впечатление, когда вы видите эту страницу?

&resize=w704

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

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

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

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

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

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

Джеффри Эйзенберг, генеральный директор BuyerLegends.com, говорил об этом, когда советовал веб-мастерам создавать сайты, фокусирующиеся на «убеждении», а не на «конверсиях»:

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

Заключение

Создание веб-сайта – это не ракетостроение. Однако, определение идеального баланса элементов, который приведет к удовлетворительному уровню конверсий потребует экспериментов. Всегда тестируйте и оптимизируйте.

Каждой платформе потребуется своя формула конверсий. Не становитесь жертвой обобщений.

Перевод статьи Патрика Долакия

Источник: searchenginewatch.com

0

0

119

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
53 технических термина, которые вы должны знать как UX-дизайнер

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

Тестирование A/B

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

Agile

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

Android

Android — это мобильная операционная система, разработанная Google. Она устанавливается на целый ряд мобильных телефонов и планшетов.

API

Это интерфейс прикладного программирования. API — это то, как компьютеры и веб-приложения обмениваются информацией друг с другом. Пример: приложение находит текущую погоду в Сиднее, отправив сообщение API weather.com. Затем API weather.com отвечает структурированным ответом.

Тестирование автоматизации

Тестирование автоматизации — это когда QA (обеспечение качества) использует инструмент автоматизации для проведения тестов в программном приложении.

Аватар

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

Вack-end (разработка)

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

Beacon

Технология Beacon позволяет мобильным приложениям понимать свою позицию в микро локальном масштабе. Она может отправлять релевантный контекстный контент пользователям на основе их местоположения. Кроме того, она использует технологию Bluetooth.

Бранч (ветвь)

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

Хлебные крошки (навигационная цепочка)

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

Баг

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

Кэш

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

Чат-бот

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

CMS

CMS – это система управления контентом. Это компьютерное приложение, которое создает и управляет цифровым контентом.

Программное обеспечение CRM

CRM — система управления взаимоотношениями с клиентами. Это программное обеспечение, которое хранит контактную информацию клиента (например, имена, адреса и т.д.).

Коммит

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

CSS

CSS — это каскадные таблицы стилей. CSS описывает, как элементы HTML должны отображаться на экране. HTML — это структура, CSS — стиль, а Javascript — это поведение.

Смайлы

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

Фронт-энд (разработка)

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

Github

GitHub — это веб-сервис для разработчиков. Он помогает с совместной работой над проектами по разработке.

GIF

GIF — формат графики. GIF — это бесконечный цикл изображений или видеоклипов.

Хак

Хак — это быстрое решение той или иной проблемы, но не всегда самое хорошее.

HTML

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

Гибридное приложение

Гибридное приложение — это приложение, объединяющее элементы как собственных, так и веб-приложений.

IP адрес

Адрес протокола — уникальный адрес, идентифицирующий устройство в Интернете или локальной сети.

iOS

Это мобильная операционная система, созданная и разработанная Apple, которая поддерживает iPhone, iPad и iPod.

Итерация / Итеративная разработка

Итеративная разработка — это способ разбить разработку программного обеспечения на более мелкие части. Итерация в контексте Agile — это заданный период времени (обычно между 1-4 неделями).

Javascript

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

Модем

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

MVP

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

NFC

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

Открытый исходный код

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

Парное программирование

Пара-программирование — это когда два программиста работают вместе. Один пишет код, а другой просматривает его.

Рефакторинг / Рефакторинг кода

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

Отзывчивость

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

SaaS

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

Scrum (разработка программного обеспечения)

Scrum — это итеративная гибкая платформа разработки программного обеспечения для управления разработкой продукта.

SDK

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

SEO

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

Спринт

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

Технический долг

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

Тестирование устройства

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

VPN

Виртуальная частная сеть. VPN позволяет создать безопасное соединение с другой сетью через Интернет.

Каскадная модель

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

Источник Перевод: Елизавета Гуменюк

0

2

104

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
Красивые примеры реализации моушен дизайна на веб-сайтах

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

Что такое Motion Design?

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

Сложно достоверно сказать, когда возникло само понятие Motion Graphics. Известно что оно употреблялось еще в XIX веке, но прочно вошло в обиход как термин только, пожалуй лишь в 1960 году, когда Джоном Уитни(John Whitney) была основана компания Motion Graphics Inc. И наконец популярным этот термин стал после выхода книги Триш и Криса Мейер(Trish and Chris Meyer’s) об использовании Adobe After Effects под названием «Creating Motion Graphics».

Хабрахабр

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

А различные трехмерные логотипы телеканалов? Мы привыкли к ним, к этой необычной анимации. Сейчас и титры к фильмам – не просто бегущие строки и буквы. Часто это настоящее произведение искусства, которое тоже — Motion Design.

А вы знали, что в среднем в мире 12 минут из каждого часа вещания телевидения — это работа моушн дизайнеров?

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

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

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

— моушн-дизайн – новый современный тренд, поэтому используется, если бренд хочет идти в ногу со временем;

— это эффектный прием, незаменимый для создания вау-эффекта;

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

Некоторые веб-сайты используют Motion Design для презентации продуктов, например Apple.

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



Pipefy

?w=1340&ssl=1

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

Figma

?w=1340&ssl=1

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



ZenDesk

?w=1340&ssl=1

ZenDesk Bot демонстрирует минималистичный и простой пример моушн-дизайна. Просто, но очень интересно.



Museum of Science + Industry

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



Adidas

?w=1340&ssl=1

Целевая страница Adidas Climazone использует прокрутку в качестве сигнала к началу анимации. По мере того, как пользователь пробирается вниз по странице, графика и изображения меняются.



Stripe Sigma

?w=1340&ssl=1

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

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

Автор: Ольга Мульченко

Источник http://designmojo.ru/design/inspiration/motion-design-krasivye-primery-realizacii-na-veb-sajtax/

0

0

112

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
Страницы 404

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

Первая «4» — означает, что ошибка на стороне клиента, «04» — означает конкретную ошибку «Not Found». В компании EDISON Software философски считают, что пользователь не может ошибиться, что он всегда прав, Показать полностью... он на сайте компании.

Кому в пятницу нечего делать или кто в поисках вдохновения — добро пожаловать под кат, там подборка лучших (и худших) 404 страниц.

Начнем с самых животрепещущих сайтов, а потом перейдем к «попсовым».

https://habrastorage.org/webt/59/ce/39/59ce394a9228a609575248.jpeg

PornHub

https://habrastorage.org/webt/59/ce/3a/59ce3a8cd83ec553696593.jpeg

Старая версия 404 Хабра



Новая версия 404 Хабра



Virgin.com




Google



Aliexpress.com



Coolhunting.com



Mashable.com



Источник https://habrahabr.ru/company/edison/blog/338994/

0

0

137

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
Осторожно! Злая собака! Или как укротить форму регистрации

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

Предистория

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

Итак. Вот он товар, вот оно оформление. Поехали, как говорится.
Первое же поле «Электронная почта» оказалось преградой.



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

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



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

Наконец письмо с паролем, тыкаю на кнопку «Перейти к покупкам». Опять оказываюсь на главной, перехожу к своим покупкам, в корзину т.е.



Ввожу данные для оплаты и опять просят пароль! Да что ж такое-то сегодня! Ах, ну да… сначала же вход, потом покупки. Написали бы «Вернуться на сайт» или «Завершить вход», мелькает мысль. Лезу в почту, смотрю пароль. Начинаю вводить данные заново.

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

Исследования

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

Согласно данным глобального исследования взаимовлияния онлайн- и офлайн-торговли Nielsen 53% россиян покупают онлайн одежду и аксессуары, 38% — книги и музыку, столько же — электронику. 34% — заказывали через интернет билеты на различные мероприятия, 33% — косметику и средства для ухода за собой, 30% брали путевки и оплачивали отели и билеты.

Если говорить о частоте покупки, возьмем самый крупный поток одежда и аксессуары, то: 44% приобретают одежду в интернете 2-3 раза в год, а 33% – почти каждый месяц. (исследования Google «Покупатели одежды в интернете: кто они и каковы их потребительские привычки»)

Еще, если верить Исследованиям Яндекс «Развитие розничной онлайн-торговли в России» в 2016 году 64% российских интернет-покупателей совершили хотя бы одну незапланированную покупку. Женщины оформляли заказы спонтанно чаще мужчин: 70% против 58%. Респонденты говорят, что к импульсивным покупкам их подталкивали скидки и акции магазинов.

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

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

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

Расследования

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

М.Видео

Приятно, что не нападают на тебя сразу с требованием о регистрации, но при оформлении товара ты все таки должен ввести и имя, и почту и телефон. Позже либо почта, либо телефон станут твоим логином. Ну а пароль нужно придумать после совершения покупки. Обязательно требование 8 знаков, и чтобы там была как минимум 1 цифра 1 буква и 1 строчная буква. Спасибо, что все же объясняют мне преимущество регистрации, а не молча требуют, практически прижав к стенке.





Озон

Требует те же сведения, что и М.Видео. Регистрирует автоматом. Сложнозапоминаемый пароль приходит на почту, изменить на что-то более приятное можно в личном кабинете. Забыл изменить? Сам виноват. Жестких требований к паролю я не обнаружила, кроме того, что он не должен быть короче 6 символов

"

Lamoda

Все так же предсказуемо. Но пароль на почту, как в Озоне мне так и не пришел. Пришлось для повторного входа просить восстановление пароля. Ограничения по количеству символов. Не меньше 6.



Wildberries

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



МИФ

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

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

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

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



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

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

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

Что делать

Подумав над всей этой ситуацией, решила придумать более щадящий способ оформления заказа.
Сказать свое твердое НЕТ не только лишним полям, но и насилию над своей памятью.

1) Убрать поле «Имя»

Об ненужности этого поля хорошо написал в своей заметке Илья Бирман
ilyabirman.ru/meanwhile/all/ask-for-name Добавить тут нечего.

2)Убрать поле «Электронный адрес»

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

3) Оставить только номер телефона

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



В заключение

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

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





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

А как же рассылка, спросите вы?

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

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

0

0

124

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
Преимущества адаптивной верстки

Рост конверсии с мобильных устройств

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

Увеличение мобильного трафика из поисковиков

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

Экономия денег и времени

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

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

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

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

Смартфоны - 320-480;
Планшеты – 768 – 1024;
Ноутбуки и компьютеры – 768 – 1024;
Ноутбуки и компьютеры – 1824 (максимальная ширина).

0

1

142

Аватар
Web Design | Веб-дизайн ПРИМЕРЫ, НОВОСТИ, УРОКИ
Все люди постоянно в поисках каких-либо фишек и ноу-хау. Они ищут интересненькие ходы, чтобы результат увеличился в десятки раз. И как показала наша практика, всё это если и увеличивает прибыль, то только в небольших размерах. Когда по-настоящему могут изменить ситуацию только основы. И как правило, такие темы всегда остаются за Показать полностью... И зря! Время менять приоритеты.

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

Я ЗНАЮ, ЧТО НИЧЕГО НЕ ЗНАЮ

Если вы прочитали до этого момента и еще не знаете наверняка нужен вам вообще landing page или нет, то вам в помощь статья “Отличие лендинга от сайта: кто победит?”.

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

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

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

0

1

131

Наверх