Интуитивно понятный интерфейс. Ну-ка посчитайте, как часто вы слышите/читаете это словосочетание? А может, сами частенько говорите? ;)

Я всегда при этом задаюсь разными коварными вопросами: кому понятный? Насколько понятный? И так далее… Помнится, не раз спорили, к примеру, с Капитаном о сайтах вообще (последний такой случай).

Это присказка. А вот и сказка. Я не писала и не планирую писать проплаченные посты: посты, в которых я должна позитивно высказаться о том, кто мне заплатит. Именно так я отвечаю всем желающим купить пост. Но иногда — мне на радость — попадаются адекватные люди, готовые рискнуть . Я не беру денег, но обещаю высказать о сервисе/сайте/компании то, что думаю. Честный риск? :))

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

Сама я машину не вожу (и — о боги — не собираюсь). Зато у меня есть отличный подопытный: мама — опытный водитель и неопытный интернетчик:) Я посадила маму за свой компьютер, открыла сайт zavodi.by и предложила найти актуальную для нее сейчас резину…

Итак, после кратенькой инструкции — что это за сайт — мама начала искать…

Открытия, которые она сделала, были откровениями и для меня.

Например, неопытный интернетчик не сразу понимает, как можно искать :)) Тем более, что «быстрый поиск» () на самом-то деле не такой уж и маленький, правда? И от расширенного () отличается совсем на чуть-чуть… Честно говоря, БЫСТРЫЙ поиск лично я (вместе с мамой:)) сделали бы поменьше…

Второе открытие вечера: мама хоть и заядлый водитель, но не помнит наизусть все параметры шин (да, и без того есть, что запоминать…) Потому главной заминкой стало вспоминание правильных параметров… Маленькая ссылочка «Интервал » даже для меня казалась неочевидной (хоть я и не автомобилист, но зато в Сети живу постоянно…)

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

Отдельно хочу отметить страницу, на которой владельцы сайта сообщают, что в базе нет подходящих шин. Обычному пользователю в этот момент в глаза бросается то, что крупнее и ярче, то есть: логотип Нокиан и текст про них. И всё… На месте разработчиков я бы уделила внимание этой маленькой, но важной странице, выделив хотя бы чуть ярче само сообщение и инструкцию «Что же делать дальше?» ().

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

Отдельно хочу отметить, что сервис сделан таким образом, что «заказ резины производится через нашего менеджера! Это сделано для того, чтобы максимально быстро и качественно обслужить ваш запрос. » Такой подход экономит нам — покупателям — время и нервы (вспомним частые конфликты таких площадок, например, как Онлайнер, на предмет «кто виноват»: площадка или продавцы в каждом конкретном случае).

То, что будет важно большинству белорусов: сайт «легкий» и грузится довольно быстро и без затруднений (как известно: «Пока россияне смотрят YouTube, белорусы читают Википедию «. Так вот zavodi.by по весу вполне соответствует Вики уровню:))).

Мой приговор? zavodi.by рискнули не зря (особенно учитывая, что им нет и месяца, насколько я понимаю). Я о том, что подобные сервисы полезны во многих сферах. А уж как облегчится моя жизнь теперь, когда мне не нужно будет искать маме по всему байнету подходящие шины:-D Конечно, работы над проектом еще много, есть куда расти и развиваться, но стартовая точка, по-моему, неплоха.

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

Главное в интуитивном дизайне то, что он незаметен. Дизайн понятен, когда пользователи могут сосредоточиться на задаче, не останавливаясь ни на секунду. Такой дизайн направляет внимание людей на важные задачи.

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

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

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

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

Проблема с проектированием интерфейсов: интуитивно понятный для кого?

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

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

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

Текущие знания и целевые знания

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

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

Концептуальные модели

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

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

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

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

Если сайт не соответствует ментальной модели пользователя, он посчитает сайт сложным в использовании, не интуитивным.

Изучите своих пользователей

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

Есть два отличных способа выяснить это:

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

Юзабилити-тест «Стоя за плечом» . Попросите людей воспользоваться сайтом, выполнить набор задач и прокомментировать свой мыслительный процесс. Это также можно сделать удаленно. Это определит целевые знания.

В обоих случаях вы наблюдаете и записываете, не вмешиваясь. Вы быстро определите основные проблемы. 10 испытуемых обычно дают представление о 90% трудностей.

Когда можно считать сайт интуитивно понятным?

Дизайн интуитивно понятен, когда текущие знания соответствуют целевым знаниям.

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

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

Другими словами, вы либо делаете UI настолько простым, что не требует обучения, либо добавляете понятные инструкции, подсказки, которые легко заметить.

Лучший пример первого условия — поиск Google . Его невозможно использовать неправильно.

Хорошим примером второго условия является Wufoo . Когда начинаете создавать свою первую форму, инструкции помогают вам и процесс обучения кажется естественным.

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

Интуитивная навигация и поиск

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

Как они ищут то, что нужно? С помощью навигации, конечно. Тут возникает сложность: если на сайте много контента, как структурировать его таким образом, чтобы это имело смысл?

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

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

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

Людям комфортнее пользоваться сайтами, к которым они привыкли

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

Типичные привычные элементы:

• Клик по логотипу, расположенному в левом верхнем углу всегда должен возвращать на главную страницу.
• Последняя ссылка в горизонтальном меню или нижняя в вертикальном меню – это контакты.
• Контактная информация должна быть представлена в нижней части сайта.
• Будьте последовательны: навигация и другие важные элементы должны оставаться в одном и том же месте на любой странице сайта.
• Ссылки выделяются на фоне обычного текста.
• Если пользователи могут скролить вниз, полоса прокрутки должна быть хорошо видна.
• Текст с выравниванием по левому краю легче читать, чем выровненный по правому краю.
• Отображайте всплывающие справочные сообщения и уведомления,
• При проектировании веб интерфейсов сайта используйте понятные, которые пользователи могут понять.

Из любого правила есть исключения, но нововведения сложны и рискованны. Сделайте так, чтобы интерфейс сайта соответствовал ожиданиям людей.

Будьте осторожны с редизайном

20% пользователей тратят 80% своих доходов в интернете. И именно на этих людях отражается смена дизайна. Они привыкли к тому, как все работает, и когда вы переделываете сайт, то меняете его, в первую очередь, для них.

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

Крупный продавец потратил 100 миллионов долларов на редизайн, в результате чего продажи упали на 20%. Юридической фирме пришлось закрыться. В расписании врача и авиакомпании серьезные задержки. Их сайты/приложения перестали быть интуитивными для большинства пользователей.

Нужно ориентироваться на самых важных покупателей. Интерфейс сайта должен быть наиболее интуитивным для них. Не пытайтесь угодить всем.

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

Это правило работает в случае, если у вас большая аудитория. Если на вашем сайте небольшой трафик из-за дизайна, смело меняйте его.

За свой относительно небольшой опыт работы (порядка 6 лет) я довольно часто слышал фразы опытных и начинающих программистов - «Я чувствую, что это должно работать», «У меня есть ощущение, что этот метод работать не будет», «Давайте сделаем интуитивно-понятный интерфейс» и так далее. Всё это - проявление интуиции в процессе разработки и программировании.
О ней и пойдёт дальше разговор.

Взято с сайта oprah.com

Для начала хотелось бы определить само понятие «интуиция».

Интуи́ция (позднелат. intuitio - «созерцание», от глагола intueor - пристально смотрю) - метод решения задач посредством единомоментного подсознательного вывода, основанный на воображении, эмпатии и предшествующем опыте, «чутьё», проницательность .

«Википедия»

Интуиция (от лат. intueri – пристально, внимательно смотреть) - мыслительный процесс, состоящий в практически моментальном нахождении решения задачи при недостаточной осознанности логических связей.

Интуиция (от лат. intueri - пристально, внимательно смотреть) - знание, возникающее без осознания путей и условий его получения, в силу чего субъект имеет его как результат «непосредственного усмотрения»

Основой данных определений является то, что интуиция - это некий способ принятия решения. Оснований у этого способа может быть несколько: это и предшествующий опыт, и воображение, и иррациональное «чутьё», и т.д.

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

Поэтому, прежде всего, хотелось бы разделить «интуитивное» программирование на 2 составляющих: - оптимистическое и пессимистическое

Оптимистическое интуитивное программирование

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

Интуиция, основанная на опыте

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

Большое количество примеров использования такой интуиции в процессы работы описал Дмитрий Чепель из Acronis в своей статье на Хабре . Если Вы ещё не читали, обязательно прочитайте.

Я бы хотел предложить вам другой пример-эксперимент. Ниже приведён пример кода на языке Sidef (я надеюсь не многие из Вас знают его). Попробуйте не особо вникая в детали, догадаться о чём он:

Loop { var swapped = false { |i| if (arr > arr[i]) { arr = arr swapped = true } } * arr.end swapped || break } return arr

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

Я уточнил у них, каким образом они смогли догадаться - и самым популярным ответом было:
«Мы увидели знакомые куски кода и сразу предположили что это такое».

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

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

Интуиция, основанная на логике

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

Но что, если взять для примера следующий кусок кода на Python:

Def sum(a, b): ... def mult(a, b): ... def subtract(a, b): ... def divide(a, b): ... def calculate(a, b, strategy): ... calculate(4, 2, sum) #6 calculate(4, 2, mult) #8 calculate(4, 2, subtract) #2 calculate(4, 2, divide) #??
Даже не видя исходного кода, мы «интуитивно» чувствуем, каким будет результат выполнения последней функции в списке.

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

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

Интуитивно-понятный интерфейс

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

Ожидания же эти формируются на основе 2 составляющих - нашего предыдущего опыта и логических закономерностей и предположений.

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

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

Интуиция как иррациональное

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

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

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

Пессимистическое инстинктивное программирование

Но интуиция может нести и негативный характер при разработке.

Как упоминалось выше «иррациональная» интуиция является одновременно и палочкой-выручалочкой и опасным инструментом в руках программиста.

Опираясь на такие инстинктивные решения мы теряем уверенность в написанном нами коде, в котором начинает происходить «магия».

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

В качестве заключения

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

P.S. Для тех, же кому интересна тема интуции в разработке ПО, советую почитать

26 декабря 2016 в 22:23

Интуитивное программирование

• Отладка ,
• Программирование ,
• Совершенный код

За свой относительно небольшой опыт работы (порядка 6 лет) я довольно часто слышал фразы опытных и начинающих программистов - «Я чувствую, что это должно работать», «У меня есть ощущение, что этот метод работать не будет», «Давайте сделаем интуитивно-понятный интерфейс» и так далее. Всё это - проявление интуиции в процессе разработки и программировании.
О ней и пойдёт дальше разговор.

Взято с сайта oprah.com

Для начала хотелось бы определить само понятие «интуиция».

Интуи́ция (позднелат. intuitio - «созерцание», от глагола intueor - пристально смотрю) - метод решения задач посредством единомоментного подсознательного вывода, основанный на воображении, эмпатии и предшествующем опыте, «чутьё», проницательность .

«Википедия»

Интуиция (от лат. intueri – пристально, внимательно смотреть) - мыслительный процесс, состоящий в практически моментальном нахождении решения задачи при недостаточной осознанности логических связей.

Интуиция (от лат. intueri - пристально, внимательно смотреть) - знание, возникающее без осознания путей и условий его получения, в силу чего субъект имеет его как результат «непосредственного усмотрения»

Основой данных определений является то, что интуиция - это некий способ принятия решения. Оснований у этого способа может быть несколько: это и предшествующий опыт, и воображение, и иррациональное «чутьё», и т.д.

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

Поэтому, прежде всего, хотелось бы разделить «интуитивное» программирование на 2 составляющих: - оптимистическое и пессимистическое

Оптимистическое интуитивное программирование

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

Интуиция, основанная на опыте

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

Большое количество примеров использования такой интуиции в процессы работы описал Дмитрий Чепель из Acronis в своей . Если Вы ещё не читали, обязательно прочитайте.

Я бы хотел предложить вам другой пример-эксперимент. Ниже приведён пример кода на языке Sidef (я надеюсь не многие из Вас знают его). Попробуйте не особо вникая в детали, догадаться о чём он:

Loop { var swapped = false { |i| if (arr > arr[i]) { arr = arr swapped = true } } * arr.end swapped || break } return arr

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

Я уточнил у них, каким образом они смогли догадаться - и самым популярным ответом было:
«Мы увидели знакомые куски кода и сразу предположили что это такое».

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

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

Интуиция, основанная на логике

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

Но что, если взять для примера следующий кусок кода на Python:

Def sum(a, b): ... def mult(a, b): ... def subtract(a, b): ... def divide(a, b): ... def calculate(a, b, strategy): ... calculate(4, 2, sum) #6 calculate(4, 2, mult) #8 calculate(4, 2, subtract) #2 calculate(4, 2, divide) #??
Даже не видя исходного кода, мы «интуитивно» чувствуем, каким будет результат выполнения последней функции в списке.

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

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

Интуитивно-понятный интерфейс

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

Ожидания же эти формируются на основе 2 составляющих - нашего предыдущего опыта и логических закономерностей и предположений.

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

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

Интуиция как иррациональное

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

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

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

Пессимистическое инстинктивное программирование

Но интуиция может нести и негативный характер при разработке.

Как упоминалось выше «иррациональная» интуиция является одновременно и палочкой-выручалочкой и опасным инструментом в руках программиста.

Опираясь на такие инстинктивные решения мы теряем уверенность в написанном нами коде, в котором начинает происходить «магия».

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

В качестве заключения

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

P.S. Для тех, же кому интересна тема интуции в разработке ПО, советую почитать

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

Существенной частью того, что принято называть «простота в использовании», является интуитивное понимание пользователем веб-интерфейса лендинга/отдельной страницы сайта. Так мы подходим к определению интуитивного дизайна (Intuitive design): когда посетитель видит такой дизайн, он точно знает, что ему делать.

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

Интуитивный дизайн фокусируется на положительном пользовательском опыте (User eXperience, UX), что, в конце концов, и делает его практически синонимом научного дизайна.

Проблема с проектированием интуитивных интерфейсов: интуитивно понятный для кого?

Почему существует так много лендингов/сайтов, которые заставляют людей ломать голову над выполнением конверсионной задачи? Почему бы не сделать все веб-ресурсы интуитивно понятными? Это ведь то, что хочет каждый — потенциальный клиент, маркетолог, веб-дизайнер?

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

Никакого объективного критерия интуитивно понятного дизайна не существует: только сам пользователь чувствует, понятно ли ему, что делать на веб-странице или же нет.

Большинство лендингов/сайтов разработаны с благими намерениями: никто не хочет осложнить жизнь посетителям. Эти лендинги даже интуитивно понятны — но, как правило, дизайнеру ! Обычный разработчик редко когда тратит время, чтобы посмотреть, как средней представитель целевой аудитории будет пользоваться его веб-продуктом.

Человек всегда смотрит на мир со своей собственной точки зрения, и когда он проектирует что-то, он неосознанно конструирует этот объект (неважно, автономный лендинг или SaaS-платформу как таковую) «под себя», то есть для людей, обладающих примерно таким же уровнем компьютерных навыков, приблизительно таким же опытом использования интерфейсов подобного типа и т. д.

Важно усвоить вот что: разработка интуитивного дизайна начинается с понимания пользователей (target group): нужно выяснить, что для них интуитивно понятно, а что нет.

Понимание целевой аудитории невозможно без знания концепции «актуального/текущего уровня знания против требуемого уровня знаний» (Current Knowledge VS. Target Knowledge).

Актуальные знания VS Требующиеся знания

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

Это то, что Джаред Спул (Jared Spool), выдающийся специалист по веб-интерфейсов, называет «текущим уровнем знаний» (Current Knowledge).

Тогда «требуемые знания» (Target Knowledge) — это тот уровень квалификации, который позволит представителю целевой аудитории легко пользоваться вашим лендингом, сайтом, SaaS-решением.

Слева направо: No Knowledge — никаких знаний; Current Knowledge — текущий уровень знаний; Target Knowledge — требуемые знания; All Knowledge — максимально возможные знания.

Разница между этими двумя уровнями — Current Knowledge и Target Knowledge — называется разрывом в знаниях (Knowledge Gap). Задача дизайнера заключается в разработке интерфейса, минимизирующего разрыв в знаниях у посетителей — между тем, что они знали, перед тем как появились на ресурсе, и тем, что им надлежит знать, чтобы использовать веб-страницу должным образом.

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

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

Концептуальные модели

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

Поясним на примере: положим, есть некто, никогда не приобретавший товары online, но обладающий опытом покупок offline. Мы усаживаем его перед компьютером, показываем ему веб-интерфейс Amazon.com и говорим: «Можешь покупать товары здесь!».

Теперь у этого человека наряду с концептуальной моделью «оффлайн магазина» появляется концептуальная модель «онлайн магазина». Чем больше процесс интернет-шопинга будет напоминать обычную покупку, тем прочнее будет поведенческий «покупательский» паттерн пользователя, связанный с конкретной концептуальной моделью «Amazon — это интернет-магазин», потому что 2 вида пользовательского опыта — online и offline — будут максимально близки.

Но вот если пользователь уже пользовался онлайн-шоппингом, но на другом веб-ресурсе, то его концептуальная модель сайта eCommerce будет отличаться от упомянутой выше: возможно, что интерфейс Amazon.com не оправдает его интуитивные ожидания.

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

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

Знайте своих пользователей!

Для разработки интерфейса, воспринимаемого потенциальными посетителями как «интуитивно понятный», нужно оценить текущий и требуемый уровни знаний target group. Другими словами: что пользователи уже знают, и что они должны знать?

Существуют два эффективных способа оценки уровня знаний целевой аудитории:

• «Полевые исследования» (Field studies): вы просто идете к своим потенциальным клиентам и наблюдаете их поведение в интернете в привычной для них «среде обитания». Этого вполне достаточно, чтобы составить представление об их текущем уровне знаний.
• Юзабилити-тест типа «Стоя за плечом» (Over the shoulder usability tests): пригласите несколько представителей своей target group принять участие в тесте, попросите их выполнить набор задач на ваших страницах. Пусть пользователи комментируют свои действия вслух, говоря все, что они думают. Подобный тест можно провести и в удаленном режиме.

В обоих случаях вы наблюдаете и делаете заметки, не вмешиваясь в происходящее. Тест-группы из 10 участников достаточно для того, чтобы выяснить 90% проблем юзабилити.

Когда лендинг можно использовать интуитивно?

Упоминавшийся ранее Джаред Спул еще в 2005 году провел исследования на эту тему, результатом чего стала статья «Что делает дизайн интуитивно понятным?» (What Makes a Design Seem "Intuitive"?).

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

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

Другими словами, вы либо делаете ваши лендинги настолько простыми, что выполнение конверсионных задач не потребует от посетителя обучения, либо снабжаете веб-страницы инструкциями, советами, списками часто задаваемых вопросов (FAQ), хорошо заметными и действительно способными «на ходу» обучить пользователя.

Лучшее доказательство правоты первого тезиса — интерфейс поискового гиганта Google. Вы никак не сможете использовать его неправильно, там попросту нет «кривой обучения» (Learning Curve) — любому пользователю даже с минимальным уровнем знаний понятно, что делать.

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

Получается, что существует два способа создать интуитивный дизайн.

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

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

Впрочем, можно одновременно использовать оба метода.

Интуитивно понятные навигация и поиск по сайту

3 года назад Майк Вольпе (Mike Volpe), эксперт по , создал круговую диаграмму, наглядно иллюстрирующую запросы, предъявляемые посетителями к дизайну веб-ресурсов (понятно, что диаграмма была результатом тщательных исследований).

Так вот, согласно этой диаграмме, 76% опрошенных самым важным фактором в дизайне ресурса считали простоту поиска по внутреннему контенту (данное исследование в целом касалось сферы eCommerce, заметим). Первым делом, они, конечно, хотели найти меню как таковое.

Вот тут и кроется главный вопрос: если на вашем сайте расположено огромное количество контента, то как грамотно структурировать/каталогизировать его?

Пип Лайа советует применить еще один метод оптимизации offline, так называемый «карточный метод сортировки контента» (Card sorting), сродный чем-то с настоящей карточной игрой с простыми правилами: участникам эксперимента раздают картонные карточки с названиями категорий: «разное», «товары для дома» и т. д.

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

Звучит, возможно, и смешно, но метод этот описан в статье «Card sorting: a definitive guide» (2004) Донны Спенсер (Donna Spencer), австралийского специалиста с мировым именем по оптимизации пользовательского опыта.

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

Пункты меню, разумеется, должны носить значащие названия, ничего абстрактного. Эксперты обычно советуют называть пункты словами-триггерами: «Купить», «Связаться с нами» и т. д.

Самое время вспомнить о так называемом «Законе Кассельса» (Cassells’ Law), названном так в честь эксперта по CRO Google Шейна Кассельса (Shane Cassells):

50 % всех пользователей не покупают, потому что они не могут найти то, что они ищут.

50% of all users don’t buy because they can’t find what they’re looking for

Именно поэтому иметь хороший поиск по контенту не просто важен, а архиважен!

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

У гиганта электронной торговли Amazon огромный ассортимент офферов, потому-то и поиск занимает центральное место в его веб-интерфейсе. Но вы представляете, как Amazon мог бы работать по-другому?

Попутно — убедитесь также, что вы включили «Поиск по сайту» (Site Search) в метрике Google Analytics. Вы заметите, что пользователи, применяющие поисковые запросы, как правило, имеют более высокий коэффициент конверсии (задавая запрос, эти люди уже знают, что ищут).

Люди проводят большую часть своего времени на других сайтах, не на вашем

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

Общепринятые (конвенциональные, утвердившиеся, стереотипные) элементы восприятия веб-страниц таковы:

• нажатие на логотип (в левом верхнем углу) всегда возвращает пользователя на главную/домашнюю страницу;
• последний пункт в горизонтальном меню навигации должен называться «Контакт/Свяжитесь с нами» (либо это нижний пункт вертикального меню);
• контактная информация должна располагаться в футере страницы (footer, «подвал»);
• стремитесь к последовательности и постоянству: навигация и другие важные элементы должны оставаться на одном и том же месте на любой странице ресурса;;
• ссылки должны быть легко отличимы от обычного текста;
• если пользователи могут и должны скроллить страницу, полоса прокрутки должна быть видна и отличима от фона;
• в странах, принадлежащих к европейской цивилизации в широком смысле, пользователь сперва прочитает контент, расположенный слева на странице;
• размещайте справочные сообщения и уведомления на странице блоками;
• используйте самые понятные слова: «Контакты» вместо «Коммуникации».

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

Так мы плавно подходим к последнему пункту нашего поста.

Неоправданный риск редизайна

На конференции An Event Apart в 2012 году Джаред Спул озвучил новый тезис:

редизайн ведет к разрыву уровня знаний пользователей веб-ресурсов.

Закон Парето беспощадно работает и в этой сфере человеческого бытия: те 20% пользователей, что приносят 80% доходов, категорически не приемлют никакой редизайн любимого предприятия eCommerce. Они уже привыкли к тому, как все работает, и когда вы меняете дизайн сайта, вы меняете его против самых платежеспособных, «золотых» клиентов.

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

Вы должны сосредоточиться на наиболее важных покупателях/клиентах. Дизайн должен быть наиболее интуитивно понятен для них. Не пытайтесь угодить всем.

Лучший способ — перманентный малозаметный редизайн по типу «итерация за итерацией» (другими словами, «эволюционный», ESR). Этот способ позволит вам быстро отреагировать на положительный или отрицательный результат, вызванный новыми изменениями.

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