Маленькая черная книга интуитивного веб-дизайна приложений

Веб-приложение, которое нелегко использовать, не заслужит много сердец.

Но разработка удобного интерфейса тоже не шутка.

Что хотят мои пользователи? Как они обнаружат все потрясающие функции, которые у меня есть? Как мне превратить их из обычных браузеров в евангелистов? Какие цвета мне выбрать? А шрифты? И список продолжается…

В сегодняшнем руководстве мы рассмотрим все эти вопросы (и даже больше!), Поделимся общими принципами эффективных, хорошо принятых приложений и объясним все секреты «интуитивного» компонента.

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

Что на самом деле делает дизайн «Feel» интуитивно понятным

Вот в чем дело: нет двух одинаковых пользователей.

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

Вам нужно решить две основные проблемы:

• Понять, что пользователь уже знает, и спрятать дизайн со знакомыми элементами.
• Сделайте процесс изучения чего-то нового прямо и прямо.

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

Но как новые продукты могут использовать фактор «знакомства»?

Одним из вариантов является использование общих шаблонов проектирования или схем.

Позвольте мне объяснить.

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

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

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

Но сначала давайте разберемся, что «схемы» имеют отношение ко всему этому.

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

• Большинство людей думают, что кнопки кликабельны.
• Вы ожидаете найти свой профиль / логин в правом верхнем углу рядом с полем поиска.
• Конверт распознается как электронная почта / значок контакта и т. Д.

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

Итог: креативность важна, но не стоит выходить за рамки ваших дизайнов ради сохранения пользовательского контента.

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

Джаред Спул, «Что делает дизайн кажущимся интуитивным?» от MFA Interaction Design на Vimeo ,

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

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

Но вам нужно больше, чем это, не так ли?

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

Я объединился с нашими гуру UX / UI и заставил их раскрыть несколько ценных коммерческих секретов.

Как добавить простоту на ваш сайт

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

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

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

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

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

Для вас это переходит в следующее:

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

Скорость - это все : мы живем в мире высоких темпов. В соответствии с исследование 10-секундная задержка, опубликованная Nielsen Norman Group, часто заставляет пользователей немедленно покинуть сайт. А для вновь прибывшего поколения Z временной интервал уменьшился до 6-8 секунд.

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

Почему эстетика является ключевым элементом повышения удобства использования

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

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

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

Знаете ли вы, что случилось?

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

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

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

Как использовать фактор «привлекательности» с гештальт-принципами

Термин «гештальт» означает «единое целое» - стремление группировать и организовывать визуальные элементы на основе определенных принципов.

Представлено Рудольфом Арнхеймом в « Искусство и визуальное восприятие: психология творческого взгляда ”, Эти шесть принципов могут сделать ваши проекты более связными, связанными и унифицированными. Вот как:

Сходство : когда разные объекты выглядят одинаково (например, форма, размер, цвет и т. Д.), Виды часто группируют отдельные элементы в шаблон или новую большую картинку. Чем больше сходств имеют отдельные элементы, тем больше чувство согласованности. В этом случае легко сделать один элемент «попсовым», слегка изменив его, тем самым нарушив шаблон.

Фото от Дж. Д. Хэнкок // Flickr Creative Commons

Продолжение : мы предпочитаем выделять одну непрерывную фигуру (линию, путь, кривую), а не отдельные линии.

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

Близость заставляет нас создавать групповые ассоциации между близко расположенными элементами. Когда отдельные элементы выглядят одинаково, мы склонны воспринимать их в целом:

Принцип « рисунок / земля» заставляет нас выделять и отделять объекты от окружающего фона. Мы можем видеть передний план и задний план как две разные плоскости фокуса одновременно. Пример, который все знают, это изображение двух лиц / вазы:

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

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

Помните, наш ум ограничен в конце концов.

Как сделать ваш продукт еще более интуитивным

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

Делать выбор между двумя вещами сложно. Сделать выбор из двадцати альтернатив еще сложнее.

Итак, чем меньше, тем лучше, когда дело доходит до эффективного юзабилити, конверсии и более высокого ROI? Ну, это не так просто.

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

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

Проблема паралича выбора была решена ученым из Колумбийского и Стэнфордского университетов. В рамках своих исследований они провели «эксперимент с вареньем».

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

Каковы были главные результаты?

Из 242 клиентов, прошедших более широкий выбор, 60% фактически остановились, чтобы попробовать джем. Напротив, только 40% из 260 клиентов, прошедших показ ограниченного выбора, остановились.

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

Вот как вы можете применить принципы закона Хика и паралича решений к веб-дизайну:

Самое важное правило веб-дизайна

Есть намного больше правил, законов и лучших практик, которые могут помочь вам создавать лучшие проекты, например Закон Фитта , Правило третей а также Золотое сечение и больше.

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

Готовы к этому?

Не слушайте своих пользователей.

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

Вместо этого внимательно наблюдайте за тем, что они делают.

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

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

Вот отличная история от Джиллиан Моррис, прекрасно иллюстрирующая этот момент на основе ее личного опыта работы с продуктом. Короче говоря - полное изменение дизайна приложения и пользовательского интерфейса, которое обожали пользователи, привело к нескольким разочарованным электронным письмам… и значительному всплеску роста!

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

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

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

Написано Romexsoft 25 марта 2016 г.

Елена Я Елена - писатель и консультант по цифровому маркетингу. Я играю словами, чтобы улучшить конверсию и люблю тестировать новые хаки роста.