Оффтоп Олег Чулаков
693

Chulakov Design #4: откуда берется UX, качество сервиса, сущности в дизайне, анализ конкурентов, клиентов и ЦА

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

В закладки

Больше заметок вы найдете здесь.

3 стороны

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

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

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

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

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

Качество на каждом этапе

Чем отличается процесс создания плохого интерфейса от хорошего?

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

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

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

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

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

После этого идет backend (что для дизайнера еще более дремучий лес, чем frontend), а также тестирование.

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

Анализ конкурентов

Анализ конкурентов является важным этапом UX-исследования. Кто-то его пропускает, кто-то чересчур им злоупотребляет.

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

«Да зачем вообще смотреть на их сайт?»

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

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

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

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

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

Откуда берется UX

UX — (User Experience, опыт взаимодействия) опыт и впечатления, получаемые пользователем от работы с интерфейсом. Так звучит самое распространенное определение UX. Сегодня мы постараемся понять, что стоит за этими словами.

От чего зависит опыт использования и восприятие интерфейса человеком?

  • Функциональность — интерфейс умеет все, что необходимо. Сайт или интерфейс говорит все, что нужно, и когда это нужно;
  • Удобство — интерфейс понятен, в нем быстро можно разобраться. Человек полностью понимает, что произойдет на следующем этапе, нет никаких неожиданностей;
  • Надежность — все функции работают быстро и стабильно;
  • Удовольствие — высшая эмоциональная ступень интерфейса. Дизайнер заботится о том, чтобы пользователю было приятно работать с сервисом.

Что нужно сделать, чтобы интерфейс обладал этими характеристиками?

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

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

О сущностях

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

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

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

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

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

Написать
{ "author_name": "Олег Чулаков", "author_type": "self", "tags": [], "comments": 1, "likes": 5, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 38084, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 38084, "author_id": 2389, "diff_limit": 1000, "urls": {"diff":"\/comments\/38084\/get","add":"\/comments\/38084\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38084"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

1 комментарий 1 комм.

Популярные

По порядку

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

1

Проектирование пользовательского опыта.....Оооо господи Иисусе.... Ux/Ui это и есть дизайн, зачем его разделять на две отдельные профессии, это уже другой разговор о бессмысленных вещах. Тот кто считает что дизайн это передвижение кнопок по морям разноцветных пикселей или рисование красивых картиночек, невежа просто. Ux — это проектирование логической части, как, что, откуда, куда и зачем. Это тот самый скелет на который "UI - ущербы" натягивают материал и выкладывают на дрибббл в поисках заветного — Great work! Look at my sasao!

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

Ответить

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

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" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления