7 шагов конкурентного анализа сайтов

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

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

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

#анализ #маркетинг

​​5 советов по улучшению дизайна кнопок

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

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

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

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

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

В эпоху сенсорных экранов мы обычно измеряем их типичным размером кончика пальца по отношению к плотности экрана. При масштабе 1x квадрат размером от 44 до 48 точек становится комфортным для нажатия. Некоторые приложения, такие как Tinder, экспериментировали с увеличением кнопок призыва к действию до 50 точек (высота) и отметили довольно хорошие результаты. Конечно, вы не можете увеличить кнопку слишком сильно, но стоит попробовать размер в 50–60 точек.

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

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

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

Метки, написанные только заглавными буквами, очевидно, легче центрировать, но лучше всего придерживаться выравнивания по базовой линии (или просто выровнять по первой заглавной букве и игнорировать нисходящие y, j и g)

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

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

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

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

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

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

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

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

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

#UX #UI #Деструктивность

Принцип сходства в визуальном дизайне

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

#Design #UI

Социальное доказательство

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

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

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

#Psychology

Чему Pixar может научить UX-дизайнеров, и при чем тут сторителлинг?

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

В 2011 году бывшая сотрудница Pixar Эмма Коутс (сейчас она работает в Google Assistant) написала в Твиттере трэд, который потом превратился в «22 правила сторителлинга от Pixar». Мы же выделили самые важные из них. Эти 8 правил могут помочь связать нужды пользователей и ваши решения.
Читать статью

#Pixar #UX

20 примеров крутых геометрических паттернов, и как их использовать в дизайне

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

-Прямоугольники/квадраты: баланс и традиции;
-Круги: бесконечность, защита и женственность;
-Треугольники: стабильность, энергия и агрессия;
-Ромб: яркость и современность;
-Шестиугольник: единство и баланс.

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

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

#патерны

Компоненты Figma с фиксированным соотношением сторон

До появления Figma Auto Layout наши дни были мрачными и полными ужасов. Чтобы отобразить разные состояния одного и того же элемента, нам приходилось создавать массу компонентов. С Auto Layout 2.0 все изменилось. Стало намного проще изменять кнопки, списки и карточки. Но, едва поставив последнее обновление, мы уже жаждем новых функций…

1.Асимметричные внутренние отступы.
2.Отрицательные внутренние отступы.
3.Фиксированное соотношение сторон.
Читать далее

#AutoLayout

5 шагов для улучшения ваших навыков UI дизайнера

Простые и полезные способы улучшить свои дизайны

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

#UI

Графический дизайн для соцсетей: 7 практических советов

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

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

#GraphicDesign

Заставь свои деньги двигаться

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

#MotionDesign #UI

Серьезные ошибки UX, мешающие продажам

Найдите и исправьте их с помощью этого руководства.

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

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

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

Читать статью

#UX

Лучшие практики UI-дизайна

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

Читать статью

#UI #Design

9 трендов в дизайне интерфейсов в 2020 году

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

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

#Trends #Design

​​Дизайнерское исследование или четкие принципы? Когда можно нарушать правила в дизайне

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

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

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

#DesignLessons

​​10 правил юзабилити. Разбираемся на примерах

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

#UXLessons

Отзывчивый веб-дизайн и учёт высоты окна браузера

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

#WebDesign #UX

Как анимировать интерфейсы в After Effects

Анимация — неотъемлемый скилл для UX/UI дизайнера, если вы претендуете на позицию выше, чем Junior. Ни для кого из дизайнеров не секрет, что самый продвинутый инструмент для анимации — After Effects.

Нужно ли разбираться в таком сложном инструменте, если есть более простые программы. Мой ответ — да. Вы не сделаете в Principle, Proto.io… то, что можно сделать в AE, и рано или поздно придется изучать возможности этой программы. Тем более YouTube кишит туториалами практически под любую задачу.

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

#AE | #WebDesign | #интрфейсы