Сущности в веб-дизайне и интерфейсах

Что такое сущности в интерфейсе?

Сущность — это атом интерфейса (рис.1).

Сущности в веб-дизайне и интерфейсах

Рис.1 Сущность — атом интерфейса

В этом примере с яндексом, сущность – это кнопка, краеугольная плоскость.

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

Есть сущность, которую мы максимально используем и в нашем интерфейсе адаптируем. На примере логотипов можно увидеть эту сущность (рис.2). Логотип фольксваген менялся со временем, но у него есть определенная узнаваемость.

Сущности в веб-дизайне и интерфейсах

Рис.2 Сущность на примере логотипов автомобилей

Даже у apple, все время сохранялся этот логотип яблока (рис.3).

Сущность на примере логотипов автомобилей

Рис.3 Сущность на примере логотипов 

И у RENAULT всегда был ромб, он менялся, исчезли полоски, но сущность ромба всегда сохранялась (рис.4).

Рис.3 Сущность на примере логотипов

Рис.4 Сущность на примере логотипов 

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

Рис.4 Сущность на примере логотипов

Рис.5 Сущность на примере лапок птиц

Про рыб, ровно тоже самое (рис.6). Набор плавников, дальше есть разная форма, разное количество плавников. Но сущность рыбы, она есть, она ясна и понятна.

Рис.5 Сущность на примере лапок птиц

Рис.6 Сущность на примере плавников рыб

Поэтому не создавай разных сущностей без необходимости, а по-разному создавай то, что есть.

Ну а если тебе интересен веб дизайн, то посмотри мой бесплатный мастер-класс об этой профессии:

А / Б тестирование

А/Б тестирование – это маркетинговый инструмент для повышения эффективности работы интернет-ресурса.

C помощью АБ тестов повышают конверсию посадочных страниц, подбирают оптимальные заголовки объявлений в рекламных сетях, улучшают качество поиска (рис.1).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.1 Как работает А/Б тест

А/Б тестирование и A/B тесты

А/Б тест – это просто две страницы. Очень похожие, у них есть одно какое-то изменение. У одной серенькая кнопочка, у другой красненькая. На нее заливаются люди, трафик так называемый. И дальше мы уже смотрим результаты. В оригинальной версии – это 1 %. То есть, то количество людей, которые нажали эту кнопочку. На другую нажали 4,5% из 100. То есть этот вариант выиграл.

Сейчас по шагам. Этапы А/Б тестирования:.

  1. Определить цель.
  2. Выдвинуть гипотезы
  3. Создать два варианта страницы.
  4. Настроить эксперимент в сервисе.
  5. Запустить трафик.
  6. Определить победителя.

У нас может быть идея, давайте покрасим иконку в красный цвет, потому что красный яркий цвет, привлечет внимание и будут чаще кликать (рис.2).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.2 Журнал А/Б тестирования

Цель АБ тестирования

Цель у нас  — регистрация. И результат измеряется в измени процента. У вас должна быть идея, что сделать реально на сайте. И предположение зачем вы это делаете.

Есть сервис Google Analytics (рис.3).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.3 Google Analytics Experiments

При А/Б тестировании эксперименты располагаются во вкладке поведение. Нажимаем создать «Эксперимент». Выбираем цель, то есть ту метрику, о которой мы говорили. Дальше нажимаем «далее» и мне предлагают выбрать две страницы. Здесь у вас должны быть сверстаны заранее страницы, на которые вы будете направлять людей. Он находит эти две страницы, у меня они две одинаковые.

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

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

Дальше проходит какое-то время, вы запускаете трафик, людей, и видите результаты (рис.4).

 

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.4 Анализ результатов

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

Сервисы для А/Б тестирования (рис.5).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.5 Сервисы для А/Б тестирования

Google Analytics – он бесплатный, есть Optimizely  — это западный сервис, VWO, Unbounce (рис.6)

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.6 Сервисы для А/Б тестирования

Принцип у них похожий. Единственное, что в Google Analytics странички уже должны быть готовыми, сверстанными, мы просто подставляем код. В других сервисах можно подвигать блоки уже в самом сервисе. Но они опять же платные.

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

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

Основы дизайна: пространство и соотношение фигуры и фона

Соотношение фигуры и фона

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

Continue reading

В тренде интерфейсов – плоский минимализм

Минимализм в веб-дизайне

На смену 3D и скевоморфизму пришли двухмерность и минималистичный дизайн сайта. И хотя этот тренд распространился практически повсеместно, давайте попытаемся разобраться, почему это произошло и какое влияние оказывает на дизайн интерфейсов в целом. Эдриан Тейлор, поделился несколькими советами и размышлениями относительно проектирования плоских интерфейсов.

Continue reading

Аутентичный дизайн

Аутентичный дизайн

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

Что же такое аутентичный дизайн?

Continue reading

Основы дизайна: визуальное восприятие и принцип гештальта

Принципы гештальта в дизайне

Стивен Брэдли, создатель таких популярных блогов, как: Основы дизайна: элементы, атрибуты и принципы и CSS анимация и современный веб-дизайн, подробно рассмотрел принципы гештальта в дизайне и их влияние на сайтостроение.

Continue reading

Новый подход к созданию форм авторизации

Формы авторизации

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

Continue reading