Как написать пользовательский сценарий?

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

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

Из чего состоит сценарий:

1. Цель, которую мы преследуем.
2. Основной сценарий.
3. Альтернативные сценарии, дополнительные.
4. Конечный результат.

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

Во-первых, на примере приложения для РЖД(рис.1)

Цель этого приложения — попасть на поезд без бумажного билета.

 

Рис.1 Приложение РЖД

 

Рис.2. Шаг первый

Все начинается с того, что человек просто покупает билет на сайте РЖД (рис.2).

 

Рис.3 Шаг второй

Следующим шагом пользователь должен увидеть эту поездку в приложении (рис.3). Он видит активные элементы, с датами, городом и временем.

 

Рис.4. Шаг третий

Дальше на  человек на вокзале должен найти свой поезд, путь и вагон (рис.4). Видно поезд, время, путь (определяется непосредственно на вокзале), вагон, место. То есть человеку не нужно распечатывать и доставать бумажные билеты и вся информация, которая ему нужна в данной ситуации видна на экране.

 

 

Рис. 5 Альтернативный сценарий

Во-вторых, может быть альтернативный сценарий (рис.5). Человек может захотеть вызвать такси до вокзала и здесь есть ссылка на такси. И может получить push-уведомление, чтобы не пропустить поезд за какое-то время.

 

Рис.6 Шаг четвертый

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

 

Рис.7  Шаг пятый

Дальше мы уже в поезде. Человек может найти свое место в поезде.На последнем экране, что важно (рис.7).

 

Рис.8 Шаг шестой

Есть альтернативный сценарий (рис.8). То есть мы заботимся о человеке больше и думаем не только о том, как ему добраться до дома, т.к. это его конечная цель, в свою квартиру, отель и т.д. И мы даем альтернативный сценарий: сообщить по смс друзьям,родственникам, что все ок и где, во сколько будет встреча. Можно вызвать такси с вокзала. И подключить вайфай. То есть заботимся о человеке чуть больше, делая следующий шаг. И даем ему с комфортном добраться домой (рис.9).

 

Рис. 9 Шаг седьмой

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

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

Сценарий –стратегия. Описывайте ключевые точки процесса глобально, от начала до конца.

Инсайт – это наблюдение за поведением человека.
Возможно, это наблюдение за поведением, возможно наблюдение за какими-то мыслями.

Рис.1 Инсайт

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

Инсайт: что это и как его найти?

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

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

Различают следующие из них:
● Детальное изучение пользователя, его интересы и потребности, при этом следует уделить внимание чувствам и ощущениям;
● Глубокое погружение в проблему и анализ полученных сведений. Это поможет обозначить возможные пути решения проблемы;
● Обдумывание намеченных вариантов, это помогает отбросить несостоятельные идеи;
● На завершающем этапе проводится тестирование.

Что такое Инсайт и как его использовать?

— Инсайт у кошатников такой: «я купил кошке штуку для царапанья, а она все равно дерет ковер». Это определенный инсайт. Но инсайт не может быть про всех. Он может быть на какую-то категорию: для парней, для кошатников, для пилотов. Это какое-то наблюдение.
В твоем случае, не знаю найдем мы ли какой-то инсайт сходу про музыку. Допустим, я перед тем, как куда-то пойти, жду пока моя песня загрузится в телефон и тогда я выхожу, чтобы идти по улице и слушать трэк. То есть, жду пока они загрузятся с домашнего вай-фая, чтобы пока иду до метро, успеть их прослушать. Вот это мое наблюдение, и оно есть инсайт.
— И как его использовать?
— А дальше креативщики на этом инсайте используют какой-то креатив. То есть, если я увижу в принте, что «чувак, тебе больше не надо ждать пока твои песни загрузятся от вай фая и вот тебе 4g и симкарта, держи.». К примеру, я сегодня опоздал на работу, потому что песни скачивал.
— А мы потом на last.fm решаем эту проблему?
— Типа того. Вот это наблюдение – это инсайт.
— А дальше ты уже в принте или как-то креативным слоганом эту ситуацию обыгрываешь.
— И если действительно я так делаю, опаздываю на работу, потому что песни скачивал, то это только для меня. Остальные не поймут вообще.
— И тогда можно наделать разных инсайтов? Те, кто опаздывал, кто еще что-то?
— Да, да.
— И потом разом это запускается?
— Последовательно. Потому что если раньше было, то сейчас все делятся по маленьким сегментам, кусочкам по нишам. Вот почему инсайт, это какая-то небольшая категория людей, но которую ты очень хорошо понимаешь. И ту уже не можешь взять рупор и сказать кому эти хот доги, тебе нужно подойти и каждому сказать, что они для программистов. В рупор все, потому что орут. А задача инсайта подойти и лично каждому сказать, что ему нужно.

Итак, что такое инсайт? Он запускает механизм формирования мысленных образов и ощущений, которые относятся к каким-то давно забытым воспоминаниям или переживаниям.

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

Онлайн-курсы по дизайн-мышлению

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

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

Все слышали в программировании про эти понятия. Простыми словами я расскажу о Frontend и Backend:  что это такое? Давайте быстро пробежимся.

Frontend и backend, чем они отличаются?

Есть допустим стартовая страница Яндекса (рис.1). Мы видим на ней дизайн, видим страницу.

Рис.1 Страница Яндекса ( дизайн)

Если нажать код этой страницы, мы увидим код этой страницы в браузере (рис.2).

Рис.2 Frontend

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

Backend – это огромные сервера, которые располагаются в самом Яндексе (рис.3).

Рис.3 Backend

Frontend или Backend, что выбрать?

Для ответа на этот вопрос важно понять, чем отличается frontend от backend. Давайте на примере разберем.

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

 Поэтому frontend —  это:

• html
• css
•  java script
• frameworks
• Jquery, Angular, Backbone, Closure, Extj

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

Backend:

1. Php
2. Rails
3. Ruby
4. Python
5. C#
6. Java
7. .NET
8. SQL
9. Node.js
10. Django
11. Xamarin
12. Swift

Frontend и Backend в работе веб-дизайнера

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

Инсайт – «озарение», невысказанная в явном виде мысль про товар или его свойства, с которой можно легко согласиться, но о которой раньше потребитель не думал в явном виде. Как применяется инсайт в рекламе?

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

1. «Да, это про меня!» — всегда скажет человек на правильный инсайт. Инсайт в рекламе должен быть близок человеку. Он является его неотъемлемой частью жизни. То есть в инсайте человек узнает себя.
2. Правда. Правильный рекламный инсайт передает настоящие и иногда скрытые переживания человека, истинные мотивы покупки товара.
3. Открытие. Инсайт в рекламе раскрывает что -то новое из жизни человека, позволяет взглянуть на вещи под новым углом, стимулирует переоценку существующих знаний и опыта.

Один из примеров хороших рекламных инсайтов рассмотрим ниже.

Инсайт в рекламе P&G

P&G: Почему вы покупаете стиральный порошок?

Мама: Потому что я хочу, чтобы одежда была чистая.

P&G:Почему вы хотите, чтобы одежда была чистая.

Мама: Потому что я хочу, чтобы мой ребенок опрятно выглядел в школе

P&G: Почему вы хотите ,чтобы ваш ребенок опрятно выглядел в школе?

Мама: Потому что я хочу ,чтобы о нем хорошо думали.

P&G:Почему вы хотите, чтобы о нем хорошо думали?

Мама: Потому что если о моем ребенке хорошо думают, значит я хорошая мама!

Рис.1 Инсайт в рекламе от P&G

В этом ролике (рис.1), суть в том , что P&G не продает просто порошок, а продает мамам гордость их детей, ощущение “хорошей мамы”. Именно на этом построены их рекламы.

Инсайт в рекламе отвечает на вопросы:

1. Как думает человек?
2. Что думает человек?
3. Почему он себя ведет именно так?
4. Что он по-настоящему чувствует?

Еще один пример инсайта в рекламе Axe.

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

Рис.2 Инсайт Axe

Рис.3 Ролик Axe

Рис.4 Ролик Axe

Axe продает мужчинам не только дезодорант, а привлекательность для женщин. (рис.2,3,4).

Где искать рекламный инсайт

1. Заблуждения
2. Противоречия
3. Неудовлетворенные потребности
4. Тайные удовольствия
5. Использование не по назначению
6. Раздражение

5 способов найти инсайт для рекламы

1. Хорошие рекламные инсайты описывают цели и аудиторию, а не товар или услугу

Многие не хотят ввязываться в ремонт, даже когда он необходим и даже запланирован. То есть строительная компания не говорит нам про материалы, не продает нам валики, ролики и прочее. Они показывают жизненную ситуацию, в которой человек сам себя найдет. В ремонте главное — начать, немножко похоже на пословицу и опять же на ситуацию, в которой можно чуть-чуть улыбнуться и узнать себя рис.5,6).

Рис.5 Инсайт в рекламе от компании Большая Медведица

Рис. 6 Инсайт в рекламе от компании Большая Медведица

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

Люди покупают стальные входные двери ради спокойствия. Это инсайт, который использовался компанией дверей в своей рекламе. (рис.7). И дальше (рис.8) Мы продаем спокойствие, то есть обыгрывается преимущество их категории, их дверей .

Рис.7 Инсайт в рекламе компании дверей

Рис.8 Преимущество компании дверей как рекламный инсайт

3. Хороший инсайт в рекламе объясняет то , как люди хотят себя чувствовать, а не то, как они думают.

У многих россиян существует такое обсуждение – «для своих всегда делают лучше».

Рис.9 Ролик «для своих всегда делают лучше»

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

4. Хорошие рекламные инсайты фокусируются на постоянных, а не на сиюминутных ценностях.

Carhartt — бренд, который гордится тем, что он не подвержен влиянию моды. 100 лет эта компания делала спецодежду. Рабочие знали этот бренд именно таким (рис.10).

Рис. 10 Бренд Carhartt

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

Рис.11 Распространение моды на бренд

Оставаясь верным своим ценностям, бренд становится сильнее, не подвергаясь влиянию модных течений (рис.11)

5. Хорошие инсайты в рекламе стимулируют создание новых идей , а не культивируют старые.

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

Рис.12 Рекламный инсайт о боязни потерять прав

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

Как найти инсайт для рекламы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис.3 Google Analytics Experiments

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

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

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

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

 

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

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

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

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

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

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

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

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

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