Connect with us

Дизайн и прототипирование

Почему вам стоит бояться призрачных кнопок

Вы видели эти элементы не раз: полностью прозрачные кнопки, состоящие только из контура и текста. Дизайнер Бартоломью Фиш рассмотрел историю появления этого тренда и его потенциальное влияние на компании.

Анна Гуляева

Опубликовано

/

     
     

Введение: что такое призрачные кнопки?

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

Призрачные кнопки – кнопки с контуром без цветной заливки – стали достаточно популярны. Они так называются из-за своей прозрачной природы — так как у кнопок нет заливки, они выглядят просто как фон (обычно это фотография). Каждый раз, когда я их вижу, я задаюсь вопросом: дизайнеры провели A/B-тестирование кнопок? Может быть дело в моем опыте в оптимизации конверсии, может быть в повсеместности этих кнопок. Но в любом случае, у меня с ними проблема.

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

Откуда появились призрачные кнопки?

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

1984 — Apple выпускает первый Macintosh

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

Apple использовали подход скевоморфизма, когда дизайнер стилизует цифровые инструменты и концепции с оглядкой на их копии из реального мира. Например, ранние версии приложения “Заметки” были похожи на реальные желтые блокноты. Визуальная метафора должна была помочь новым пользователям понять, как использовать приложение, которое было просто цифровой версией желтого блокнота для записей.

2001 — команда в Razorfish запускает первый сайт, который адаптируется под экран пользователя, audi.com

2004 — Кэмерон Адамс создает пример макета, зависимого от разрешения

2007 — выход первого iPhone

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

2008 — каждый второй человек в мире имел мобильный телефон

2010 — выход первого iPad

2010 — Итан Маркотт создал термин “адаптивный веб-дизайн” (Responsive Web Design)

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

Плоский дизайн

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

Когда мы начали видеть призрачные кнопки?

Мы начали видеть призрачные кнопки в 2014. Стал популярным Tumblr-блог под названием websiteswithghostbuttons, а Дэниел Клоппер впервые написал твит о призрачных кнопках.

Некоторые считают, что призрачные кнопки происходят из head-up display-дизайна (HUD-интерфейс должен давать информацию, не ограничивая поле обзора летчика или водителя). Сложно сказать, откуда именно появились призрачные кнопки, но мы можем рассмотреть некоторые из ранних примеров.

С релизом Windows Phone 7 и Windows 8 Microsoft представила дизайн-систему под названием Metro. Она включала в себя использование ярких цветов, простых шрифтов и призрачных кнопок.

Среди всех первопроходцев, самое большое влияние на тренд оказал релиз iOS 7. В этой статье Apple подчеркнула, что пользовательские интерфейсы должны быть “ненавязчивыми и уважительными” и они должны “отступать, выделяя ваш контент”, а не соревноваться с ним. Немногие люди сегодня поспорят с философией Apple: контент должен быть самым важным элементом, а интерфейс должен его поддерживать.

Как дизайнеры используют призрачные кнопки?

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

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

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

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

Последствия использования призрачных кнопок

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

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

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

Разборчивость: Если кнопка помещена на богатом по содержанию изображении или видео, пользователю может быть сложно понять, что написано на кнопке.

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

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

Потенциальное влияние на конверсию может стоить компаниям денег. Существует несколько исследований о влиянии разных типов кнопок на конверсию. Elevated Third устроили тестирование в своей рассылке: одна версия письма содержала призрачную кнопку, а другая — цветную. Они обнаружили, что версия с цветной кнопкой превзошла второй вариант почти на 7%.

В другом тесте сайт ConversionXL обнаружил 20% снижение количества кликов (на основании 10 тысяч посещений), проверяя следующие изображения:

Nielsen Norman Group недавно выпустила исследование, в котором сделала вывод, что “плоские UI-элементы привлекают меньше внимание и создают неуверенность”. В исследовании NNG обнаружила, что пользователи проводили на 22% больше времени на сайтах со слабыми обозначениями – на сайтах, на которых не было понятных кнопок и ссылок. Так как предметом исследования была видимость элементов, пользователям надо было завершить задачу как можно быстрее. Больше времени на странице — больше когнитивной нагрузки для пользователя.

Уже появились реакции на публикацию исследования NNG, в которых говорится, что исследование было направлено не совсем на плоский дизайн. Шон Декстер из Cigna написал статью под названием “Плоский дизайн: почему вам стоит задать вопросы исследованию NNG о модном стиле”. В своем тексте он отмечает, что один из самых наглядных примеров в исследовании сравнивает кнопку с заливкой и призрачную кнопку – изучает контраст, а не плоский дизайн. Проблема с этим наблюдением заключается в предположении, что призрачные кнопки являются другой проблемой, не связанной настолько тесно с плоским дизайном. Аргумент о том, что исследование NNG было сосредоточено главным образом на слабых и сильных обозначениях, а не на плоском дизайне, не лишен смысла. Но я не думаю, что будет преувеличением сказать, что многие реализации плоского дизайна пострадали от недостатка контраста.

Пример из исследования NNG

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

Следующие шаги: Осмысленный дизайн

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

  1. Используйте призрачные кнопки как вторичные призывы к действию
  2. Подумайте о контрасте, ясности и разборчивости
  3. Больше постоянства
  4. Тестируйте, тестируйте, тестируйте!

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

Дизайн ориентированных на данные интерфейсов

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

 

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Инструменты дизайна и прототипирования – что используют разработчики приложений

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

AppTractor

Опубликовано

/

Автор:

Дмитрий Нор, директор компании SkySoft

  

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

После того, как требования известны, мы приступает к созданию прототипа. В основном мы используем программу Balsamiq Mockups, так как в ней можно делать прототипы для веб-сайтов и мобильных приложений. Программа простая и очень удобная. И с помощью нее можно решить практически любые задачи по созданию прототипов. Иногда мы используем Axure RP. Выбор программы зависит от задач проекта и в основном он делается так: в чем удобнее, там и рисуем.

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

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

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

Дина Мильштейн, руководитель отдела дизайна EastBanc Technologies

    

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

На старте проекта для каждого мобильного приложения мы вырабатываем дизайн-концепцию на 5-10 экранов и согласовываем с заказчиком.

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

Прототипирование UI/UX — бумага и Sketch

Чтобы разобраться, как будет работать мобильное приложение, мы делаем первые наброски на бумаге, а потом переносим их в Sketch. Мы прошли путь от Photoshop к Sketch, эргономичной программы, сделанной для разработки интерфейсов. От Photoshop категорично не отказываемся, он идеально подходит для работы с растрами. Выбор инструмента всегда зависит от задачи. Всё должно быть уместным.

Нужен цифровой бренд-бук. Если его нет — надо создать

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

Иллюстрации в Illustrator

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

Интерактивный прототип — Invision

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

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

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

Анимация и поведение — Flinto

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

Нарезка и передача в разработку — Zeplin

Дальше двигаемся итерациями: отрисовали, согласовали с заказчиком, отдали разработчикам в Zeplin. И так до финального релиза — методично и кропотливо трудимся над разделами в рамках согласованной концепции, сохраняя первоначальное качество.

Качественный результат гарантирован процессом

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

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

Евгения Горбунова, Finch

  

Мы уже 10 лет создаем приложения для крупных брендов вроде ТНТ, Спартака, ТВ-3, Столото. В нашей работе мы используем достаточно стандартный набор инструментов: Sketch, Zeplin, Sympli, Adobe Photoshop, Adobe Illustrator.

Для дизайна макетов в основном используем Sketch. Что касается самого процесса разработки дизайна, то тут всегда по-разному. Обычно мы работаем по алгоритму «бумага» → «прототип» → «дизайн». То есть наш дизайнер сперва тратит время на поиска решения на бумаге, затем начинает рисовать прототипы и макеты в Sketch и только после этого занимается дизайном. На последнем этапе, как правило, клиенты оставляют наибольшее количество правок: цвета не те, иконки другие, форму стоит поменять и т.д. Поэтому у нас бывали случаи, когда после финального дизайна, мы начинали все по новой и вновь ныряли с головой в проект, чтобы найти другое решение.

Ольга Костина, ведущий UI/UX дизайнер Seven Winds Studio

   

В нашей студии разработка дизайна мобильных приложений происходит следующим образом. На основе ТЗ создаётся прототип. До настоящего времени мы использовали для прототипирования NinjaMock, но планируем перейти на другую платформу. Сейчас присматриваемся к другим сервисам, среди которых Marvel, Invision и Flinto.

Дизайн интерфейса создаём в Sketch, и затем экспортируем готовые экраны в Zepelin для работы верстальщиков с ними. Иногда, наравне со Sketch, используем Figma. Этот сервис удобен тем, что над одним проектом могут работать несколько дизайнеров одновременно, и все изменения сохраняются в одном проекте, c которым впоследствии работают те, кто верстает экраны.

Юлия Гулюк, Grapheme

    

Раньше для проектирования и разработки интерфейсов мы использовали связку Sketch Zeppelin, а для демонстрации дизайна клиенту мы создавали интерактивные прототипы в Marvel или Invision. Когда макет дизайн был утвержден, мы прибегали к помощи моушн-дизайнера, чтобы упростить коммуникацию с верстальщиками. Он визуализировал идеи команды дизайнеров, чтобы разработчикам можно было наглядно объяснить, какие эффекты задумали дизайнеры и как их нужно реализовать. В общем, это был достаточно сложный процесс. Он требовал применения различных инструментов и отнимал много времени специалистов. Особенно много времени и сил уходило на коммуникацию. Но самым большим недостатком этого подхода была невозможность установить Sketch на любые другие платформы, кроме macOS.

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

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

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

Подкаст AppTractor: дизайн мобильных приложений

Комментарии
Продолжить чтение

Дизайн и прототипирование

UX и UI мобильных приложений: что связывает дизайн и маркетинг

Что связывает дизайн и маркетинг? Что такое UX/UI дизайн? И почему хорошо спроектированное приложение и грамотная маркетинговая кампания — это залог успеха проекта? Рассказывает Татьяна Гуменюк, дизайнер агентства Netpeak.

Netpeak

Опубликовано

/

Автор:

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

Чем отличается UX от UI дизайна?

В идеале дизайн объединяет в себе форму и функции, свойства и эстетические проявления. UX (User Experience) дизайн отвечает за функции и свойства, это процесс создания продукта, который полезен, легок в использовании и приятен для взаимодействия. Задача UX дизайнера — привести пользователя к конечной цели, помочь ему «решить проблему».

UI дизайн — это визуальное оформление «изделия»: какие использовать цвета, удобно ли будет человеку попадать пальцем в кнопки, читабельным ли будет текст.

Задача UX/UI дизайна — «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?», нравится или не нравится.

Разница между UI и UX-дизайном

С чего начинается UX?

У исследований, которые проводят на первых этапах UX дизайна есть много общего с маркетинговыми. Например, анализ конкурентов и рынка, определение ЦА и бизнес модели.

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

Зачем проводить бенчмаркинг дизайнеру?

  1. Определить сильные и слабые черты оцениваемых объектов.
  2. Расширить понимание рынка и бизнес-домена*.
  3. Развить собственное видение проекта и выработать новые идеи.
*Бизнес-домен (в рамках разработки ПО) — предметная область, которая определяет набор стандартных требований, специальной терминологии и функциональности (например, развлечения, туризм и путешествия или социальные сервисы).

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

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

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

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

11 советов от мастеров мобильного UX

Четыре правила создания удобного дизайна

UI (User Interface) — это то, что у многих людей сразу ассоциируется со словом «дизайн»: цвета, графика, иконки и логотип. Это средство связи между человеком и системой. Для того, чтобы дизайн был удобен, решал проблему и «продавал» продукт существует ряд правил и тенденций, которым следуют UX/UI дизайнеры для достижения своей цели:

  1. Упрощение пользовательского взаимодействия. Когда пользователь взаимодействует с приложением, у него есть определенная цель. И, как правило, чем меньше усилий пользователь прилагает для достижения этой цели, тем лучше пользовательский опыт. Хороший пример — дизайн линейного пути, когда каждый шаг пользователя сопровождается выполнением только одного действия.
  2. Цвет как функциональный элемент. Выбор цвета продиткован не только  эстетикой, это часть пользовательского взаимодействия. Цвет — инструмент акцентирования на главном. Например, дизайнеры могут использовать цвета, чтобы установить визуальное различие между разными типами уведомлений.
  3. Диалоговый дизайн. Пользователи часто использует только три приложения, и как минимум одно из них — мессенджер. Люди любят общаться. Поэтому чатботы и голосовые помощники, усиленные искусственным интеллектом, стали трендами последних лет.
  4. Эмоциональное взаимодействие. Даже в эпоху интерфейсов командной строки мы использовали эмотиконы (смайлики), чтобы донести до других свои чувства. Людям свойственно устанавливать эмоциональную связь со всеми используемыми продуктами. Как следствие, при взаимодействии с продуктами мы ожидаем реакций похожих на человеческие.

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

10 законов UX-дизайна

Чем схожи дизайн и маркетинг?

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

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

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

Мобильные UX-паттерны, которые вы используете неправильно

Выводы

  1. Задача UX/UI дизайна — «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?», нравится или не нравится.
  2. UX (User Experience) дизайн отвечает за функции и свойства, это процесс создания продукта, который полезен, легок в использовании и приятен для взаимодействия. UI дизайн — это визуальное оформление «изделия»: какие использовать цвета, удобно ли будет человеку попадать пальцем в кнопки, читабельным ли будет текст.
  3. Чтобы дизайн был удобен, решал проблему и «продавал» продукт существует ряд правил, которым следуют UX/UI дизайнеры для достижения своей цели:
  • диалоговый дизайн;
  • цвет как функциональный элемент;
  • упрощение пользовательского взаимодействия;
  • эмоциональное взаимодействие.

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Подкаст AppTractor: дизайн мобильных приложений

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

AppTractor

Опубликовано

/

Автор:

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

В классическом понимании творчества, как художества, мы делаем арты, цветовые схемы, рисунки для служебных страниц. Важно понимать, что есть художник и есть дизайнер.  Это другое. Тут красота в удобстве и в том, какими способами ты можешь сделать что-то удобнее – в этом и заключается творчество. Художеств у нас и правда не очень много. Для нас творчество в том, насколько классно и креативно мы можем решить проблему. Если ты решаешь проблему классно, то тебе разрешат все. Если ты решаешь проблему приложения путем того, что у тебя единорог пробегает по экрану – то ты делаешь единорога. Правда, надо доказать, что единорог решит ее. К сожалению, часто проблему решают очень простые решения, без единорогов.

Комментарии
Продолжить чтение

Дизайн и прототипирование

Забавные экраны ввода пароля

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

AppTractor

Опубликовано

/

Автор:

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

Комментарии
Продолжить чтение

Реклама

Наша рассылка

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

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.