Не убить дизайнера

— Кнопки недостаточно круглые, картинки недостаточно яркие, тексты слабые, и вообще все не так и не то.
— А что «то»?

В закладки

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

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

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

Родилась простая идея — подойти к сайту, как к процессу. Рисуем схемы и помним, что они — идеальные, т.е. описывают только часть реальности. Это важно. Итак.

1. Кто?
Любой сайт, продающий или информационный — неважно, обслуживает аудиторию с определенными целями. Необходимый минимум информации о ней легко собрать через входящие/исходящие контакты. Так были выделены 4 основные категории клиентов:

  • фанаты
  • быстрые
  • сомневающиеся
  • бизнес

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

Под каждую категорию прописали цели:

  • найти конкретную марку товара и надежный сервис
  • сделать заказ быстро и особенно не думать
  • найти информацию для принятия решения о товаре/ надежности сервиса
  • все перечисленное + оформить документы

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

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

4. Проектируем интерфейс.
Можно быстро на бумаге, лучше, но дольше, — в программной среде. Ничего удобнее, чем интерактивная Axure 7, мы не нашли. Рисуем весь функционал, что пришел в голову, не стесняемся. Не забываем смотреть исследования, о том, как пользователь воспринимает информацию — F/Z паттерны и диаграмма Гутенберга вам в помощь.

Нарисовали вашего сферического коня в вакууме? Расслабляться и радостно бежать к дизайнеру рано. Пора свериться с суровой пользовательской реальностью — смотрим вебвизор, метрики и аналитики. Составляем 2-4 реальных пользовательских сценария, смотрим в каких точках они совпадают/не совпадают с нашими идеальными выкладками, и что, в конечном итоге, мешает сделать заказ. Думаем, какой функционал и/или информация помогут привести реальные сценарии к желаемому.

А теперь критикуем проект интерфейса на предмет простоты и удобства восприятия. Несколько правил:

  • Никакого функционала «на всякий случай». Если без него можно обойтись — не публикуем
  • Если для достижения цели нужно больше трех кликов, ваш сайт/приложение не работает
  • Кнопка/анимация, которую не хочется потрогать, не работает.
  • Первой проектируем мобильную версию. Справились с ювелирной работой — десктопную версию нарисуете в два щелчка.

Сделали? Вот теперь у вас есть цельное видение сайта — можно идти к дизайнеру.

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

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

Г.П. Щедровицкий
методолог

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Анна Сретенская", "author_type": "self", "tags": [], "comments": 15, "likes": 2, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 29969, "is_wide": false, "is_ugc": true, "date": "Fri, 01 Dec 2017 12:50:01 +0300" }
{ "id": 29969, "author_id": 109416, "diff_limit": 1000, "urls": {"diff":"\/comments\/29969\/get","add":"\/comments\/29969\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/29969"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

15 комментариев 15 комм.

Популярные

По порядку

Написать комментарий...
2

"Если для достижения цели нужно больше трех кликов, ваш сайт/приложение не работает"

Господи, ну хватит уже про три клика-то заливать, не пещерные же люди.

http://uxmyths.com/post/654026581/myth-all-pages-should-be-accessible-in-3-clicks

Ответить
0

Как знать - поведение наших пользователей это правило подтверждает.

Ответить
1

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

Ответить
0

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

Ответить
3

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

Ответить
1

сколько кликов вы совершили на vc.ru, чтобы написать этот комментарий?

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

0

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

Ответить
1

Гуру веб-разработки могут проходить мимо - статья для чайников от бизнеса

Вы специально выгоняете не дилетантов в вопросе веб-разработки в начале статьи, чтобы они не засрали её, т.к. она необъективна и ничего не имеет общего с реальностью?

Ответить

Комментарий удален

Комментарий удален

0

Как надоело это постулирования мобайл верст. У меня на сайте 70% десктоп. Что я ради одной трети должен жертвовать 2/3 посетителей?

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления