Опасности очаровашек в дизайне

Автор оригинала: John Saito
  • Перевод

Заметка о том, как очаровашки приводят к проблемам


image

Первая ассоциация со словом “очаровашки” — все те милые глазу и сердцу вещи, от который тепло разливается по всему телу. Плюшевые игрушку. Капкейки. Обнимашки.

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

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

Очаровашки мешают


image

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

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

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

image
Эпичный сайт Моримото

Очаровашки дают голос вашему бренду. Они “оживляют” ваш продукт.

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

У очаровашек есть срок годности


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

Я прекрасно помню тот момент, когда я впервые включил свой телефон на Андроиде и увидел эти кружочки:

image

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

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

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

Очаровашки субъективны


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

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

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

Очаровашки невозможно оценить


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

Просто сравните лексику, используемую большими глобальными брендами (слева) с лексикой в интерфейсе менее известных компания (справа):

image
«Добро пожаловать в Microsoft Teams, новую платформу Office 365, основанную на чатах.»
vs «Мессенджер для команд, меняющих мир!»


image
«Начните прямо сейчас. Docs готовы к работе тогда, когда к работе готовы вы. Создайте документ в вашем браузере или скачайте приложение на своё мобильное устройство.» vs «Урежьте бессмыслицу в своей работе. Попинайте по нашим шинам прямо сейчас. Начните нам платить только тогда, когда полюбите наш продукт.»

image
«Софт для менеджмента и планирования мероприятий.» vs «Превратите ваше мероприятия в Рев-Ген (от слова Революция) мероприятие.»

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

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

Когда же стоит быть очаровательным?


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

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

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

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

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

image
Познакомьтесь с новыми Sites

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

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

Поддержка публикации — компания Edison, которая разрабатывает SDK для слежения за географическими объектами и систему оперативного учета сети магазинов «Мебель для дома».
Edison
96,84
Изобретаем успех: софт и стартапы
Поддержать автора
Поделиться публикацией

Комментарии 40

    +17
    Если вам нечего предложить посетителю сайта, кроме очаровашек — вам и очаровашки не помогут.
    Если у вас есть, что предложить — предлагайте именно это, и посетитель оценит даже без очаровашек.
    Не надо мазать мёдом все подряд, некоторые любят кислое или горькое. Но качественную пищу любят все.
      –2
      Один из тех моментов, когда жалеешь, что ты всего-лишь read-only и не можешь поставить плюс.
      Действительно от этих очаровашек уже тошнит, все прям пытаются тебе угодить, думая за меня, что мне нужно, не спрашивая и не интересуясь моим мнением и не давая мне возможности их убрать.
      +3
      Если за сайты на флеше не убивать, то за что тогда?
        +9
        За автоматически проигрываемый звук на всю громкость
          +12
          О, нет!
          За автопроигрывание видеороликов (иногда и со звуком, для особой эпичности, да) встроенных в бэкграунд страницы!
            +4
            Рекламных роликов. На РБК что ли такие (причем запускаются автоматически даже в мобильном браузере)…
              0
              У РКБ ещё один момент за который бы «убил». Клик по любому месту страницы открывает рекламу (у меня лично) Керхера. Ладно. Надо зарабатывать, но! каждый клик (не только первый) по любому месту статьи или пустому месту страницы открывает рекламу в новом окне.
                0

                а с выключенными левыми скриптами, при этом, не работает прокрутка статьи!: Е

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

            Что за лягушки?

            –2
            К слову:
            image
              –5
              Когда я увидел, как эти кружочки трансформируются в логотип, я был поражён.

              Вы, в тот момент, впервые слезли с пальмы?
                +4

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

                  –6
                  где-то на Земле уже существовал человек, который видел её до вас.

                  Да ради бога, я не оспариваю первенства, скорее даже я видел эту анимацию последним (впервые увидел в этой статье), но речь не об этом. Чему тут поражаться? Неужели Вы настолько примитивны. что поражаетесь такой незатейливой фигне?
                    +2
                    Чему тут поражаться? Неужели Вы настолько примитивны. что поражаетесь такой незатейливой фигне?

                    Глядя на мир, нельзя не удивляться!
                      –3
                      Глядя на мир, нельзя не удивляться!

                      Но не стеклянным же бусам, в самом деле.
                        0
                        у Вас пригорело от того, что кому-то кажется что-то милым, хотя Вам это не кажется милым? Вы хоть котиков любите?
                    0
                    Сейчас конец 2016 года, у меня третий по счёту смартфон на андроиде, я пользовался разнообразными планшетами на андроиде, да я даже ставил чёртов андроид на virtual box — и я вижу эту анимацию впервые.Так что ваша правая рука остаётся при вас :)
                      0

                      потому что она появилась то ли в 6, то ли уже даже в 7 андроиде.
                      А куча вендоров, как обычно, перестают выпускать обновления через 20 минут после всемирного релиза модели.

                  +7

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


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


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


                  Программа, в которой был такой помощник — Microsoft Word из пакета Office 95 или 97, я уже не помню точно за давностью.

                    +6
                    Вы так говорите, как будто это плохо) Эту скрепку вспоминают спустя 20 лет выпуска программы, собственно это единственное, что я помню из того как выглядело приложение. По моему, это успех.
                      –1
                      Интересно, сколько ещё пройдёт лет, пока до разработчиков ОС дойдёт, что каждая ОС должна иметь такого живого персонажа? Они ведь уже внедрили голосовых помощников, а про визуальное воплощение пока никак не додумаются.
                        –1

                        Упаси, упаси. Не надо. Голос — хорошо, визуальное — плохо.


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

                          0
                          Это же очень медленно?
                            –1
                            Упаси боги кто-то прислушается и сделает интерфейс голосовым.

                            Лучше графики для вывода не может быть ничего — зрение это вообще основной канал связи мозга с миром.
                            Ввод это отдельная тема споров, но голосовой катастрофически медленен. Лучше клавиатуры лично я вижу только прямой нейроинтерфейс, но до этого ещё ооой как далеко…
                              0
                              Крайне против. Я, например, работаю с графикой и привык иметь дело, в основном, с ней. Я плохо воспринимаю что-то на слух, то, что я услышал либо пропускаю мимо ушей, либо забываю. Да мне даже проще кому-то написать, чем позвонить.
                            0
                            В копилку к упомянутым скрепке и ко и собачке можно добавить джина из Magic Goody.
                            +8
                            Эта скрепка была моим другом и всегда подбадривала в трудные времена своей улыбкой.
                              +2
                              А собачка помогала найти «ценные» файлы в system32.
                                0
                                Да, прикольная была — махала хвостиком и водила носом. Побольше бы таких уместных и ненавязчивых моментов!
                                  0
                                  И читала книгу справа налево
                                    0
                                    И шелестела страницами книги, если забыть закрыть поиск
                                    +1
                                    Для меня встретить здесь человека с таким мнением подобно встрече с инопланетянином. Если это не сарказм, поясните, как вы это воспринимаете. Честное слово, не могу представить технаря, программиста, которому нравились эти персонажи. Они же мешали задать параметры поиска и т.д.
                                      0
                                      Всё просто — мне было около 10 лет, и мне было пофиг на параметры поиска. Я смотрел как мама работает с документами, а скрепочка мне улыбалась и подмигивала.
                                      Со временем мы уже не ценим такие мелочи, нам подавай параметров побольше и поиск побыстрее=(
                                    0
                                    Я до сих пор помню анимацию сохранения.
                                    0
                                    Я думаю разница между большими и «маленькими» компаниями скорее в рынке и таргетинге. Слаку к примеру нет никакого смысла таргетировать свой сайт под энтерпрайз. Их рынок сечас — это небольшие и средние, молодые, динамически развиващиеся стартапы. Именно поэтому оно все такое няшно-хипстерское. Ну мое мнение. Им надо как-то выделяться.
                                      0
                                      Не особенно он и няшно-хипстерский, на самом деле. Ничего такого, кроме 404й страницы, там нет
                                      +1
                                      «Я прекрасно помню тот момент, когда я впервые включил свой телефон на Андроиде и увидел эти кружочки».

                                      А я в этот момент подумал, что Гугл решил разом избавиться от эпилептиков и это вызвало недоумение, за что?
                                        0
                                        >Когда я увидел, как эти кружочки трансформируются в логотип, я был поражён. Это была самая впечатляющая анимация загрузки на моей памяти.

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

                                        >Но, через какое-то время, эта анимация стала казаться скучной и однообразной.

                                        Но она не стала раздражать! Еще один зачет.

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

                                        Самое читаемое