Connect with us

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

Простые правила успешности мобильного приложения: часть 2

В первой части мы разобрали “Эффективность использования” и “Обработка ошибок”, а в этой части мы продолжим рассмотрение факторов, оказывающих влияние на опыт пользователей.

USABILITYLAB

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

/

     
     
[pullquote align=right]

igor
Игорь Мыслинский, проектировщик пользовательских интерфейсов
[/pullquote]

В первой части мы разобрали “Эффективность использования” и “Обработка ошибок”, а в этой части мы продолжим рассмотрение факторов, оказывающих влияние на опыт пользователей.

Простота обучения

На сколько быстро пользователь разберется в вашем приложении?

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

1. Приложение для широкого круга лиц с неопределенными особенностями

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

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

2. Приложение для корпоративного использования

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

3. Специализированное приложение

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

4. Игровое приложение

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

Запоминаемость

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

1. Простота оформления – ваш друг

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

2. Будьте последовательны, оформляйте похожие сущности одинаково

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

3. Обновления – зло или благо?

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

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

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

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

4. Рассказывайте и показывайте

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

Субъективное восприятие

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

Опрятный внешний вид

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

Приложение должно соответствовать уже существующему фирменному стилю компании-производителя

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

Грамматические ошибки

Проверяйте грамматические и стилистические ошибки. Малограмотность ни к чему хорошему еще не приводила. Даже если вы “молодая, динамично развивающаяся компания с горящими глазами” – не совершайте грамматических ошибок. Пользователи заметят, запомнят и могут не простить. Вспомните как Shazam приходил на рынок в русской версии? Сколько было веселых скриншотов с моментом распознавания музыки!

В Рунете много ресурсов о грамматике, правилах русского языка. Самый известный – http://www.gramota.ru. Рекомендуем использовать.

Также существует бесчисленное множество программ, приложений для проверки правописания различной степени применения. Самый знаменитый http://www.orfo.ru.

Если вы не доверяете программам и роботам, обратитесь к корректору.

Оправдание ожиданий пользователя

При установке и начале использования вашего приложения у пользователя есть уже сформированные ожидания. Если в результате работы пользователь получает подтверждение своим ожиданиям, то вы получаете “очки лояльности”. В противном случае, приложение будет удалено или просто будет храниться в телефоне.

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

Лояльность, установки, рекомендации, “время жизни” приложения у пользователя – все это в конечном итоге зависит от разработки, когда учтена не только стабильная работа приложения, но и грамотном применении юзабилити.

USABILITYLAB
Комментарии Facebook
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

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

Как потерять доверие пользователей к продукту и чем это чревато?

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

AppTractor

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

/

Автор:

Изображение с сайта Kayako.com

Когда я была маленькая, родители сдавали меня на лето на дачу к бабушке. Дама она была очень строгая и не разрешала мне включать телевизор, потому, что не доверяла ему (или мне :)) Аргумент был простой – «у телевизора даже экран бьет током, возьмешься за вилку – тебя убьет!». Ну как тут поспоришь?

Доверие – либо полное, либо его нет. Ощущением доверия измеряется человеческое счастье. Громко звучит? Тем не менее, так и есть. Человек не может чувствовать себя счастливым, если тревожится, что дверь могла не закрыться, утюг не выключился, будильник не прозвенит, календарь не сообщит о мероприятии, изменения не сохранятся и др.

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

Кривизна, кустарщина

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

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

Страница статистики сервиса товарных рекомендаций Retail Rocket

– Оля, ты – дизайнер, ты это видишь, а нормальным людям на такое плевать!

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

God is in the detail, – народная мудрость

Непонятный нейминг

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

Пример ниже – кусочек «Настроек поведения» CallbackHunter – сервиса колл-трекинга. Не поняла, что означают загадочные цифры и что будет, если я их поменяю. При наведении на знаки вопроса всплывают подсказки, но ясности они не добавляют.

Фрагмент настроек сервиса колл-трекинга CallbackHunter

Например, подсказка у первого пункта Mouse motion speed гласит Average mouse motion speed analysis. Почему оно равно 9.8, осталось для меня тайной, в чем это 9.8 измеряется – тоже. Если вы понимаете что это все значит – напишите в комментариях, пожалуйста.

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

Сообщения об ошибках

Хотела тут недавно купить биткоины через приложение Coinbase. Вместо того, чтобы провести транзакцию оно сообщило мне «It looks like an unknown error occurred while processing the buy…». Гайз, если вы сами не знаете, что за ошибка у вас произошла – как мне вам доверять свои деньги и криптовалютный кошелек? В поддержку они мне, кстати, тоже не ответили :(

Сообщение об ошибке в мобильном клиенте криптовалютной биржи Coinbase

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

Попап ошибки в системе аренды недвижимости RentLinx

Отображение состояний

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

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

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Экран «Спасибо за заказ» в приложении доставки еды Just Eat

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Статусы заказа и интерактивная карта сервиса доставки Glovo

Защита от дурака

Часто слышу от программистов «А зачем пользователь туда полез? Сам виноват». А вот и не так! Если продукт разрешил пользователю «туда полезть» и накосячить, то виноват продукт, вернее, команда, которая его сделала.

Есть масса способов защитить пользователя от ошибок – от масок ввода и принципа «не набирай, а выбирай» до возможности отмены.

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

Функция отмены отправки письма в Gmail

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

Раньше у меня был ноутбук Sharp, у него тоже была кнопка на клавиатуре и она работала мгновенно. Поверьте мне, когда в процессе работы ты случайно промахиваешься мимо Backspace, тыкаешь в Power и теряешь контроль над ноутбуком минут на 10 – это боль.

Платежи и все, что с ними связано

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

На скрине выше форма оплаты в сервисе покупки авиабилетов Southwest Airlines. Выбран радиобатон Credit Card. Но над формой мы видим пункт PayPal, да еще такой заметный с суммой и иконкой. Зачем? К чему он относится? Ну и вообще всего много и как-то кривовато.

Итого

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

Дальше у сервиса есть два пути – либо оправдать ожидания, либо разочаровать пользователя. Каждая нестыковка съедает часть доверия. Если их много – клиент раздражается, начинает чувствовать себя неуверенно, ждать подвоха и сомневаться во всем.

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

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

Источник: https://olgashavrina.com/.

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

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

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

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

Анна Гуляева

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

/

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

Вы решили купить новую обувь. Вы открываете 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. Тестируйте, тестируйте, тестируйте!

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

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

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

 

Анна Гуляева
Комментарии Facebook
Продолжить чтение

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

Snapchat ждет редизайн

Чтобы справиться с замедлением Эван Шпигель объявил о планах сделать редизайн приложения.

Леонид Боголюбов

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

/

Snap Inc. сегодня объявил о результатах работы в третьем квартале 2017 года. Они ниже ожиданий – за три месяца прибавилось 4.5 миллиона пользователей (против ожидаемых 8), а рекламные ставки снизились на 60% по сравнению с прошлым годом. Snap заработал 207.9 миллиона, что заметно меньше прогнозируемых 235.5 миллионов. На Spectacles компания потеряла 40 миллионов долларов.

Чтобы справиться с замедлением Эван Шпигель объявил о планах сделать редизайн приложения. Он наконец признал то, что Snapchat трудно использовать и отметил, что сейчас компания уже работает над значительным упрощением социальной сети:

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

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

 

 

Леонид Боголюбов
Комментарии Facebook
Продолжить чтение

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

11 оптических иллюзий в визуальном дизайне

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

Анна Гуляева

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

/

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

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

1. Иллюзия деления треугольника пополам

Выравнивание треугольника по центру тяжести

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

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

Которая версия математически центрирована?

Существует две теории этой занимательной иллюзии:

  • Неправильное масштабирование по постоянству. Иллюзия содержит элементы перспективы, которые увеличивают в нашем восприятии размеры более удаленных объектов, например, равносторонний треугольник может восприниматься как плоская картинка дороги в перспективе, когда верхняя вершина уходит в бесконечность, а нижнее основание выглядит как ближняя часть дороги.
  • Центр гравитации/центр области. Если зрителя просят найти точку середины, в конечном счете они найдут центр тяжести с равным распределением частей над ним и под ним. Центр тяжести равностороннего треугольника лежит ниже его середины, и существуют доказательства того, что люди выбирают в качестве центра нечто среднее между этими точками.

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

Шучу, эта статья не посвящена геометрии (но формула все равно верна). Центр тяжести может быть расположен на 1/3 расстояния от каждой стороны до противоположной вершины. Этот метод можно применить и к другим формам.

2. Вертикальная горизонтальная иллюзия

Это прямоугольник? Это самолет? Нет… это квадрат?!

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

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

Изображение в этом посте Facebook имеет соотношение сторон 1:1

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

3. Полосы Маха

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

Техническое объяснение этого эффекта заключается в латеральном торможении, из-за которого темные участки кажутся более темными, а светлые ещё более светлыми. Хотя этот эффект довольно незаметен в мире визуального дизайна, полосы Маха могут стать настоящим препятствием для стоматологов. Рентгеновский анализ зубов создает полутоновые изображения, используемые для анализа аномальных отклонений. Полосы Маха могут привести к ложноположительному диагнозу, если они не были идентифицированы.

4. Иллюзия Геринга

Оно живое!

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

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

5. Сетка Германна

Появляться или не появляться, вот в чем вопрос.

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

На пересечении линий появляются серые точки

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

6. Иллюзия одновременного контраста

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

Текст на разных сторонах имеет одинаковый цвет

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

7. Иллюзия Манкера-Уайта

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

Причина иллюзии Манкера-Уайта… вы догадались, латеральное торможение.

8. Акварельная иллюзия

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

Это визуальное явление, известное как акварельная иллюзия, зависит от сочетания яркости и контрастности контура, которое приводит к эффекту распространения цвета.

Белый цвет внутри кнопки словно приобретает легкий оттенок цвета границы.

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

9. Иллюзия Ястрова

Размер имеет значение?

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

Благодаря этой иллюзии мы воспринимаем одинаково изогнутые края разными

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

10. Иллюзия Корнсвита

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

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

Эта иллюзия создает похожий эффект, как и две вышеупомянутые, но кое в чем она отличается:

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

11. Иллюзия Мюллера-Лайера

Отклонение для оптимального визуального восприятия

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

Без отклонения буква e в LinkedIn и буква z в Amazon кажутся несбалансированными

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

Зачем нам нужно отклоняться от высоты в типографике?

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

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

Другие значимые иллюзии:

Анна Гуляева
Комментарии Facebook
Продолжить чтение

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

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков веб и мобильных приложений!

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

Популярное

X

Спасибо!

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