18 заметок с тегом

ux

/core.php, line 2
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

/core.php, line 2
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

/core.php, line 2
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

/core.php, line 2
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

/core.php, line 2
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

Проходит ли сайт Булавки тест Гугла Masterful Mobile Web?

Гугл опубликовал исследование готовности сайтов к пользователям со смартфонами (вместо ПК). Я не могу сейчас осилить и проверить наши интернет-магазины, но сделать это с одним сайтом — Булавка — можно. Я буду указывать соответствует ★ ли сайт требованиям Гугла или нет ☆, по возможности с комментариями. Сортировка списка по убыванию: чем ближе к концу списка, тем меньше сайтов (Европе, Ближнем востоке и Африке) выполняют эти условия. По США в выборке нет, в России дела обстоят лучше.

Тест Retail Masterful Mobile

  1. Дизайн страниц. ★ Страницы должны быть выдержаны в стиле бренда.
  2. Внешнее связывание. ★ Это замороченная хрень, суть которой в том, чтобы направлять пользователя куда надо, а не просто на главную страницу.
  3. Последовательный опыт. ★ Использование одинаковых на вид версий сайта как для настольных ПК, так и для смартфонов, чтобы пользователь не путался в интерфейсе при переходе между устройствами.
  4. Нет новых табов. ★ Все ссылки открываются внутри текущего таба.
  5. Призыв к действию. ★ В русском переводе звучит тупо, но это просто, когда вы вместо «Поиск» на кнопке пишите «Искать».
  6. Достоверные отзывы. ☆ А вот этого у нас на сайте нет. Есть в фейсбуке, но не на сайте. Причем также косячат только 6% магазинов, которые исследовал Гугл. В нашем случае это связано с тем, что много товаров идет в малом количестве. Стоит только купить одну рубашку, как она пропадает из выдачи и кто теперь к ней будет отзыв читать, если у нас такой больше нет? Но это очень важный элемент и его надо внедрять.
  7. Разборчивые заголовки. ★ В целом у нас с этим проблем нет, кроме страницы товара. Там предстоит много работы.
  8. Достаточно времени на оформление заказа. ★ Согласно мнению Гугла, нужно давать не менее 30 мин на возню в Корзине, до того, как данные в ней будут сброшены. Я точно знаю, что товары в Корзине у нас могут лежать несколько дней, но точное время для указания адреса доставки и проч. предстоит еще выяснить ))
  9. Заметный поиск. ★ Форму поиска нельзя прятать за словами или иконками — лучше, чтобы ее было всегда сразу видно.
  10. Хороший вывод результатов поиска. ☆ С этим мы справляемся неидеально. Если искать «мужские кроссовки», то на первой странице действительно будут мужские кроссовки и скорее всего вы найдете, что искали. Однако, всего поиск выдаст более 600 товаров на такой запрос, а у нас нет столько кроссовок для мужчин. После правильных результатов пойдут кроссовки для мальчиков, потом другие товары для мужчин, что вроде логично, но не то, что мы ищем.
  11. Информация о доступности товара. ★ Если у нас нет товара вообще, то мы его не показываем в выдаче. Если вы используете старый адрес и там товара уже нет, то его нельзя заказать и там что-то написано об этом.
  12. Доступность аккаунта. ★ С любой страницы вы можете создать новый аккаунт. Более того, вы можете заказать у нас товары, без создания аккаунта.
  13. Высококачественные изображения. ★ При клике на фото, вы можете разглядеть у нас самые грязные подробности товара.
  14. Доступный горизонтальный вид. ★ Нужно, чтобы сайт нормально работал и в горизонтальном мобильном виде.
  15. Подходящие результаты. ★ Здесь у нас все нормально, потому что хотя мы вам и выдаем 600 результатов по кроссовкам, но самые первые будут тем, что вы искали.
  16. Нет всплывающих окон. ★ У нас есть слои, но окон нет.
  17. Демонстрация активности. ★ Нужно, чтобы пока грузится контент, была какая-то анимированная заглушка, чтобы ждать было веселее. Прямо гифок у нас нет, но и загрузка у нас не долгая. Вместо анимации мы используем цветные блоки, которые появляются в местах, где загрузится фото. Так что в целом, при загрузки страницы, не будет складываться ощущения, что что-то сломалось и все встало.
  18. Незагроможденность страниц. ★ Нужно, чтобы на страницах хватало «воздуха» и необходимых отступов между блоками. У нас небольшой бардак на странице товара, но в целом все ок.
  19. Перелистываемые изображения. ★ Нужно, чтобы ваши фотки можно было листать жестами с помощью пальцев, а не только кликая на кнопку/иконку «Далее». На Булавке это работает.
  20. Легко сравнить. ★ Это не о том, что товары можно сравнивать между собой. Речь идет о верстке описания товара таким образом, чтобы легко было читать его свойства: в виде списка, таблицы и т. п.
  21. Удобнен для пальцев. ★ Нужно, чтобы по вашим ссылкам, чекбоксам, кнопкам и иконкам было легко нажимать пальцем — чтобы они не были слишком мелкими или находились слишком близко друг к другу или хитареа не была увеличена там, где стоило ее увеличить.
  22. Изолированный процесс покупки. ★ Когда вы начинаете оформлять заказ, на экране не должно быть ничего лишнего, что могло бы вас увести со страницы. Нужно, чтобы пользователь сосредоточился на заказе и не отвлекался на другие элементы.
  23. Прогресс-бар. ☆ При оформлении заказа, как правило, бывает несколько шагов. Гугл требует, чтобы эти шаги были отображены в виде прогресс-бара и я с ним согласен. У нас сейчас все шаги на одном экране, поэтому у нас этого нет (потом сделаем).
  24. Безопасность. ★ Требуется использовать протокол HTTPS.
  25. Наличие фильтров. ★ У нас одни из лучших фильтров в узнете для интернет-магазинов.
  26. Без скрытых расходов. ★ В идеале на странице товара должна быть указана максимально возможная цена товара сразу: с учетом налогов (если есть), стоимости доставки и так далее. Этого всего мы сразу не пишем, но при оформлении, у нас добавляется только (ожидаемая) стоимость доставки.
  27. Сохранение позиции прокрутки страницы. ★ Нужно, чтобы после возвращения назад, пользователь попадал на то же место в списке товаров, откуда он перешел на страницу товара, а не в начало списка.
  28. Формы по-божески. ☆ Гугл требует, чтобы к формам были подсказки, названия форм были снаружи и выравнивание текста было по левому краю. Мы используем формы как у них в material design, что на вид не то, о чем они просят в этом тесте.
  29. Автозавершение форм. ★ Требуется, чтобы при поиске выпадали подсказки, не требующие полного ввода слова.
  30. Упрощенные платежи. ★ Нужно давать возможность платить через платежные системы или сканировать карты. Мы используем оплату через Клик и Пейми, кроме прочих вариантов. К слову, только 75% магазинов отвечает этим требованиям.
  31. Доступность важной информации. ★ Гугл хочет, чтобы ссылки на информацию о способах оплаты, доставки, размерах были легко доступны.
  32. Обязательные поля. ★ Обязательные поля должны быть явно отмечены как обязательные.
  33. Сохраненные данные. ★ У нас это есть, наверное, просто мы не делаем так, что где-то потом надо сохранять данные, потому что все формы на одной странице.
  34. Подсказки в формах. ☆ У нас их нет. Если мы пишем, что нам нужен ваш адрес электронной почты, то не пишем зачем (понятно из контекста).
  35. Отсутствие карусели. ★ Внезапно, Гугл против слайдера (карусель). Я давно говорю об этом, но клиенты все еще любят ставить слайдер. Гугл допускает использование карусели, если она сделана хорошо и в меру. Значит, она не грузится долго и она не содержит много слайдов.
  36. Количество результатов. ★ Теперь начинается интересное. Здесь и далее указанный функционал поддерживается только на 66% интернет-магазинов, т. е. все, что ниже как минимум треть игнорирует и это плохо. Гугл считает эффективным показывать пользователям сколько элементов было найдено. Мы так и делаем (см. выше про 600 кроссовок).
  37. Очевидная цена. ★ Итоговая сумма за заказ должна быть очевидной с выпиской всех нюансов (налоги, скидки и т. д.).
  38. Номерная клавиатура. ☆ Если в форме нужно ввести только цифры, должна выходить номерная клавиатура. Не зря я статью эту пишу, у нас это не так. Во всяком случае в форме с номером телефона, но мы это точно исправим.
  39. Автозаполнение. ★ Не знаю, почему это отдельная категория, но об этом уже говорилось, просто в этот раз речь идет о регистрации, например, а не о поиске, где автозаполнение чаще используют.
  40. Кликабельные номера телефонов. ★ О, да, я всегда топлю за это. Номера телефонов должны быть кликабельны в адаптивном дизайне, чтобы можно было позвонить по тапу. 42% магазинов игнорируют этот важный и простой в реализации пункт.
  41. Озвучивание дефицита. ☆ Ну такое. Гугл хочет, чтобы мы сразу писали, если на складе осталось мало таких товаров, но многие маркетологи всегда так пишут, чтобы люди торопились заказывать, хотя на самом деле им некуда торопиться.
  42. Показать больше. ★ Уж не знаю откуда такая проблема, но согласно отчету 43% магазинов не имеют заметную ссылку «Далее», «Показать еще», «Следующая» и т. д. У нас с этим все ок.
  43. Оповещение о бесплатной доставке. ☆ Это хорошая фича, которой на Булавке нет. Нужно показывать пользователю сколько нужно заказать, чтобы получить бесплатную доставку. Например: закажите товаров еще на 2000 сумов, чтобы получить бесплатную доставку.
  44. Множественный выбор фильтров. ★ Наверняка вы бывали на сайтах, где выбираешь пункт в фильтрах и тебе начинает перегружать страницу с новыми результатами. Потом ты выбираешь второй другой пункт и снова обновляются данные. Гугл считает, что так поступают только козлы и надо дать пользователю сначала все выбрать как ему надо и потом по команде кнопки «Применить» или аналогичной, обновить результаты.
  45. Гостевые покупки. ★ Ваш магазин должен давать возможность покупать без обязательной регистрации. Привет, Амазон.
  46. Предлагаемый контент. ☆ Эта история тянет свои ноги из того, что в США очень часто используются почтовые индексы и к ним все привязано. Поэтому Гугл хочет, чтобы ваша форма подгоняла адрес, стоит только ей указать индекс (zip code).
  47. Помощь при отсутствии результата поиска. ★ Если ваш клиент искал и ничего не нашел (нет у вас таких товаров или он сделал что-то не так), то вы должны на такой странице дать какие-то подсказки или контакты. У нас есть подсказки по поиску.
  48. Дополнительные продажи. ☆ Нужно, чтобы если клиент покупает фонарик, вы предлагали ему купить батарейки и еще лучше, если вы дадите скидку на набор фонарик+батарейки. В Булавке этого нет по разным причинам, но многие магазины, продающие технику имеют такой функционал.
  49. Следующие шаги. ★ На странице с результатами поиска должно быть больше возможностей: фильтры, предложения на карте, сортировка. На Булавке есть подкатегории и фильтр цены, но нет сортировки, например.
  50. Ошибки в реальном времени. ☆ Например, если пользователь в форме электронной почты вводит русские буквы, то следует сразу показывать ошибку и выделять форму. Не потом, когда он нажмет кнопку, а сразу.
  51. Сменные изображения. ☆ Если у вас есть несколько размеров, цветов или типов товаров, которые идут в одной группе (например, разные цвета носков), то следует дать возможность пользователям посмотреть на эти другие товары, а не ограничиваться выбором цвета/объема и т. д. На Булавке такого нет, у нас вообще нет понятия выбор цвета. Для каждого другого цвета создается отдельное описание товара. Этот функционал надо делать.
  52. Увеличиваемые изображения. ★ Есть зум — молодец, нет — пока. Более половины сайтов не дают увеличить фото, дичь какая-то.
  53. Дата доставки. ☆ Мы не указываем дату доставки, потому что любой товар по всему Узбекистану мы доставляем за два дня. Удобнее, конечно, писать, но у нас многие и не заметят. Это актуально, если доставка затягивается на три дня и более.
  54. Повторный поиск. ☆ Нужно иметь возможность легко удалить поисковый запрос (обычно через иконку ✕) или изменить его (например: при бронировании отеля, настройки поиска должны сохраняться в полях, чтобы при изменении условий, не нужно было выбирать все заново). У нас нет иконки ✕, потому что в том месте стоит иконка поиска, которая работает как кнопка (что уже странно). Нужно подумать, как это исправить.
  55. Расшариваемость. ☆ Хочет кнопки для публикации страницы с товаром в соцсетях. Только 40% интернет-магазинов имеют встроенные в сайт инструменты для шаринга. Я думаю, что в целом звучит требование логично и хорошо, но на практике люди очень редко шарят товары. Смысла в этом не много. Все, что им нужно: добавить в избранное, переслать другу.
  56. Преимущества регистрации. ★ На странице регистрации мы пишем для чего это нужно, но так делают далеко не все.
  57. Иконки подписаны. ☆ У нас не подписаны. В целом у нас мало иконок в интерфейсе, а там, где они есть мы бережем место. Однако! В планах есть увеличить в два раза высоту верхнего блока, потому что есть подозрение, что люди не понимаю на какой сайт попали, так как у нас там вместо надписи Bulavka, сделана только одна буква «В.».
  58. Гостевой список желанных покупок (вишлист). ☆ Он на Булавке есть, но требуется регистрация. Сейчас уже не помню, с чем это связано. 70% сайтов не имеют вишлиста для гостей (без авторизации).
  59. Исправление ошибок в поиске. ☆ Вот это хорошее замечание. Если вы в поиске Булавки напишите «джинсы», то найдете, что искали. Однако, с джиинсами это уже не прокатит, а должно.
  60. Сохранение истории поиска. ☆ Гугл хочет, чтобы вы сохраняли историю поиска товаров в интернет-магазине. Это относится в том числе к неавторизованным пользователям. Из всего перечня требований к интернет-магазинам — это соблюдается реже всего (24%).

По итогам выходит, что 41 пункт из 60 Булавка поддерживает, но 19 — нет. Это почти 33%, что довольно много. Я не думаю, что можно отвечать всем требованиям, но еще пунктов на 10 улучшить пользовательский опыт вполне себе можно, займемся этим.

16 апреля   ux   веб-дизайн   навигация   сайты

Как улучшить дизайн вашего сайта или приложения ясно-понятно: 61 совет по юзабилити

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

Просто сайт, чтобы была картинка по теме

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

  1. Делайте заголовки заметными: с помощью размера, контрастного цвета, жирности.
  2. Ведите пользователей по визуальной иерархии: должно быть понятно, что на экране самое важное, второстепенное и наименее важное. Добиться этого можно через акценты, размеры, контрастность, порядок, группирование, использования свободного пространства.
  3. Используйте макет с одной колонкой, так сложнее что-то испортить.
  4. Ставьте объекты внахлест, чтобы показать преемственность.
  5. Длинные списки в меню группируйте по значению.
  6. Заголовки размещайте ближе к своим абзацам, а не между своим и другим абзацем.
  7. Выделяйте элементы, которые требует внимания. Например, форма с ошибкой.
  8. Убирайте ненужную информацию с экрана.
  9. Используйте всплывающие окна для подтверждения действия. Затемняйте или отделяйте иначе фон, чтобы такое окно было хорошо видно.
  10. Удалите все рамки в дизайне, если они не сделаны специально, чтобы отделить или выделить объект.
  11. Удалите очевидные инструкции, которые повторяют то, что ясно из контекста.
  12. Элементы, если они есть ниже границы экрана, должны попадать на эту границу, чтобы было видно, что дальше есть что-то еще.
  13. Популярные функции размещайте ближе к пользователю, чтобы он мог быстро до них добраться и не искал.
  14. Используйте предиктивный ввод текст. Это когда в форме пишите «узб...» и вам тут же предлагается использовать «Узбекистан» (например).
  15. Популярный выбор показывайте сразу. Например, если у вас 80% клиентов из Ташкента, то доставку в Ташкент укажите как по умолчанию.
  16. Не забывайте показывать важную информацию на карточке товара. Например: цену или размеры.
  17. Если вид станет слишком сложный, показывайте подобные данные при наведении курсора.
  18. Для выбора из 2-4 элементов используйте переключатели или вкладки вместо выпадающего списка.
  19. Продублируйте популярный выбор в начале выпадающего списка.
  20. Если позволяют ваши технологии, используйте предиктивный ввод текста вместо длинного выпадающего списка.
  21. Наглядно показывайте прогресс и статус текущей процедуры. Вместо «Ждите ответа...» показывайте прогресс-бар и оставшееся время, например.
  22. В сложных схемах детально показывайте текущий статус. Не допускайте сложных схем.
  23. В пошаговых инструкциях также указывайте общее количество шагов, а не только текущий.
  24. Показывайте количество элементов в текущей группе. Например: товары в категории, результаты в поиске, отзывы в рейтинге и т. п.
  25. По возможности используйте адрес почты в качестве логина вместо пользовательского имени (username).
  26. Добавьте клавиатурные сокращения для повторяющихся команд.
  27. Там, где будет удобнее, добавьте возможность перетаскивать элементы вместо другого способа сортировки/добавления.
  28. Предупреждайте о минимальных требованиях. Например, при добавлении фото на сайт или создании пароля.
  29. Не показывайте необязательные элементы в формах. Если они необязательные, зачем их показывать?
  30. В кнопках используйте повелительное наклонение. Например: вместо «поиск» следует писать «найти»; вместо «далее» следует писать «продолжить».
  31. Еще лучше, если в кнопках будут описаны конкретные действия. Например: вместо «Отправить» следует писать «Оформить заказ». Но не переусердствуйте, не стоит использовать фразы вроде «Открыть этот файл» или «Отменить регистрацию нового пользователя», если итак очевидно, о чем речь.
  32. Показывайте, что будет, перед тем как пользователь совершит действие, которое увидит не только он. Например, опубликует фото или статью.
  33. Используйте небольшое знакомство с продуктом для новых пользователей. Покажите, что можно сделать вместо того, чтобы сказать, что пока ничего нет.
  34. Покажите сколько еще времени работает ваш офис, не только время работы.
  35. Недавние события пишите не датой, а недавностью: 30 мин назад, 2 дня назад и т. д.
  36. Не заставляйте пользователей считать. Используйте капчу, которая сама вычисляет ботов.
  37. Показывайте, где в приложении или на сайте пользователь сейчас находится. Выделяйте текущий пункт меню или отмечайте его.
  38. В сложноустроенных сайтах используйте «градусник» навигации. Он покажет структуру и текущее положение пользователя на сайте.
  39. Полезную информацию размещайте в начале заголовка. Например: «Входящие (2) — Почта» вместо «Почта — Входящие (2)».
  40. Выделяйте популярный выбор. Например, в таблице с тарифами.
  41. Выводите сообщения о результате действия после важных событий. Например: письмо отправлено, изменения сохранены.
  42. Выделяйте выбранный пункт в длинных меню. Меню длинным лучше не делать, но если иначе нельзя, выделяйте фоном или цветом тот пункт, на который пользователь навел курсор.
  43. Используйте контрастные цвета. Около 10% населения страдает от некорректного восприятия цвета и похожие оттенки для них сливаются в одинаковые.
  44. Заранее предотвращайте неверные действия. Например, если пользователь хочет загрузить слишком большой файл, сказать об этом нужно до того, как он его загрузит.
  45. Если ждать операции слишком долго (что уже плохо), разбейте задачу на подзадачи и показывайте, что уже прошло и что предстоит обработать. Так ожидание будет не на столько утомительным, как если просто сообщить: осталось 28 мин.
  46. Автоматически запоминайте содержимое всех форм без нажатия кнопок со стороны пользователя. Всегда лучше запомнить и потом удалить, чем вообще не запоминать и потерять информацию из-за инцидента.
  47. Избегайте использование название форм внутри самих форм, если после ввода курсора она исчезнет. Название формы всегда должно присутствовать на экране.
  48. Важные подсказки показывайте перед формой, а не после когда пользователь уже введет данные и продолжит чтение формы ниже. Под формой можно размещать второстепенные подсказки.
  49. Необязательные поля лучше не использовать (п. 29), но если все же решили: отмечайте те поля, которых меньше, а не наоборот. Например: если у вас меньше необязательных полей, то отмечать нужно их; если же меньше обязательных, то отмечать следует обязательные.
  50. Информацию об обязательных полях указывайте в самом начале формы, а не в конце, когда форму пользователь уже заполнит.
  51. Кликабельные и интерактивные элементы должны выглядеть так, чтобы было понятно, что с ними можно делать и как.
  52. По умолчанию используйте красный цвет для критических ошибок, оранжевый цвет для стандартных ошибок и зеленый для успешно совершенных действий.
  53. Различающиеся важные пункты списка ставьте вперед. Например:
    Ташкент — главный офис
    Коканд — региональный офис
    Джизак — региональный офис
    Карши — региональный офис
    вместо
    Главный офис в Ташкенте
    Региональный офис в Коканде
    Региональный офис в Джизаке
    Региональный офис в Карши
  54. Удалите из таблиц рамки, они только мешают. Для группировки данных лучше использовать расстояния. В длинных таблицах фиксируйте первую строку с описанием ячеек, а также добавляйте изменение оттенка фона строки при наведении курсора.
  55. Поддерживайте различные форматы ввода (например для дат).
  56. Помните, что если можно что-то испортить, то вам это сделают. Не допускайте возможности совершить ошибку. Например: если нельзя забронировать какие-то даты, то календарь не должен давать такую возможность вообще — эти даты должны быть некликабельными. Однако, убирать их совсем нельзя, иначе календарь будет выглядеть незагрузившимся.
  57. Критические действия в меню отделяйте или выделяйте (например удаление аккаунта или выход).
  58. Всегда давайте возможность удалить аккаунт из вашего сайта или приложения. Можно удалять не сразу, но предупредить, что удаление началось и через неделю аккаунт (профиль) будет полностью удален. До этого времени пользователь может отменить удаление (мало ли психанул).
  59. В вертикальном меню ставьте ссылку на всю строку, а не только на текст в строке.
  60. Давайте понятные описание ошибок и сразу предлагайте какое-то решение.
  61. Запоминайте предыдущие поисковые запросы пользователя и предлагайте их в предиктивном вводе. Позволяйте их удалить.

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

Одна из самых сложных вещей в Клике и Пейми

Это авторизация в приложении. Просто какой-то лютый лабиринт из паролей, кодов, тачайдиев и регистраций.

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

▪️При первом входе в подобное приложение есть регистрация, потом пароль для нее (чтобы вы могли зайти в аккаунт на их сайте), потом код подтверждения, потом пин-код (блокирует доступ к приложению), еще есть тач-айди (слава богу) и может быть еще какой-нибудь пин-код для кабинета в USSD. Аааааа!!!1

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

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

▪️И упаси бог вас забыть пароль к аккаунту! Чтобы его восстановить, нужно запускать процедуру восстановления, которая скорее всего приведет к блокировке доступа вообще. Количество попыток ограничено и время, когда вы можете ввести снова увеличивается в геометрической прогрессии и непонятно к какому времени добавляются новые минуты. В итоге вы вынуждены будете звонить в поддержку с просьбой все сбросить к едреней фене. К слову, если видите, что что-то идет не так, лучше сразу звоните — решится быстрее.

▪️Отдельно стоит упомянуть коды из СМС, которые нужно ввести, если ты все забыл и захотел создать новый пароль. Вы отправляете запрос на код, он приходит и в Андроидах сразу сам вставляется — вам не нужно ничего делать. На первый взгляд — ура! успех!, однако все не так просто. Вам сразу показывается окно, где предлагают ввести новый пароль и если вы человек, то решите, что здесь надо ввести код из СМС. Ввели, все хорошо. И вот настал день, когда вам нужно зайти в приложение по паролю… а оно помнит ваш код из СМС в качестве пароля. Оно, но не вы. Снова… в нашем… зале!..

2018   ux   наша марка

Думайте о маме

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

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

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

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

2018   ux

Почему дети неотрывно сидят в Ютубе

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

Что происходит

У этого видео на картинке выше почти 600 млн просмотров. Там просто показано как из пластилина сделать платье для кукол. Это даже не новый клип Бионсе (у него всего 28 млн просмотров). Давайте я еще раз скажу: пятьсот восемьдесят три миллиона просмотров видео про пластилин.

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

Конечно, виноваты не игры и не Ютуб, а родители, которые не смотрят за ребенком. Да, нужно его развлекать, телефон не давать, играть с ним и все такое. Но также мы с вами знаем: чтобы все так и было, нужно жить в лесу, а мы с вами не в лесу.

Моя почти двухлетняя дочь 40 минут сидела в Ютубе вообще не отвлекаясь на окружающий мир, в том числе когда я ее звал по имени. Бесконечная лента новых роликов (это важно) настолько ее завлекает, что она умеет находить иконку Ютуба в телефоне даже, если ее переместить. Спасибо Гуглу, приложение удалить нельзя и даже убрать с рабочего стола куда-то глубже. Если не удалось это сделать на рабочем столе (если это другой телефон), то она заходит в браузер и там видит иконки просмотренных сайтов и тапает прямо в Ютуб.

Она смотрела там ролики про цвета. Это тупейшее видео, где авторы, прикрываясь образовательным элементом собирают показы, чтобы заработать легкие деньги. Типичный сюжет: в кадре разноцветные предметы или игрушки и с ними что-то делают. Обычно, считают или показывают по одному. Иногда зеленый Спайдермен катается на зеленом тракторе, а красная Ледибаг соответственно на красном. Это называется «Изучаем цвета». Никогда не ищите в поиске Ютуба learning colors — вас эти ролики потом будут преследовать везде.

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

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

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

Формула успеха зомбирующего ролика такова: яйца с сюрпризами + простая песенка (Daddy FInger, например) + все разноцветное и кислотных оттенков.

Типичный канал для детей

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

Какой нужно быть скотиной, чтобы эксплуатировать детскую природу в угоду своих финансовых интересов?

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

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

Помните то видео наверху за 600 млн просмотров? Посмотрите теперь сюда:

Топовые поставщики мерзкого видеоконтента для детей

Первый ролик имеет миллиард четыреста миллионов просмотров. Это вымагучая песня «Джонни, Джонни! Йес, папа?», которая начинается всегда одинаково, но продолжать можно как угодно. Я ее слышал раз 200, наверное.

Ютуб — тоже молоды. Он устроен так, что если ты что-то посмотрел, то похожий контент тебе будут показывать снова и снова. Это же относится к создателям роликов. Если у вас случилось удачное видео, то нужно делать еще больше таких роликов (а не других) и тогда он будет больше их рекомендовать. Все эти молодые мамаши и безумные видеостудии знают это, поэтому снимают миллионы однотипных роликов. По запросу learning colors находится более 6 млн видео. Кому в этом мире нужно столько видео про изучение цветов?

Что делать

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

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

Другой вариант — блокировать Ютуб на роутере, но это не так просто как может показаться. У Ютуба туева хуча (это очень много) айпи-адресов и максимум, что вы сделаете — это сможете заблокировать переход на сайт через браузер по прямому адресу, что никак не повлияет на приложение (которое на некоторых Андроидах удалить нельзя).

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

Хорошие мультфильмы (на мой взгляд): Три кота, Тима и Тома, Леди Баг и Суперкот, Рапунцель (для детей от 4-х лет), Том и Джерри, Новые приключения Пчелки Майи, Летающие звери, Дружные мопсы, Голди и мишка.

Не фонтан, но ок: Маша и медведь, Свинка Пепа, Фиксики, Доктор Плюшева, Ми-мимишки, Смешарики, София Прекрасная, Томас и его друзья, Суперкрылья, Роботы-поезда.

Я бы не рекомендовал: Барбоскины, Шопкинс (!), Клуб Винкс и все, где есть какой-то большой набор кукол, которые отличаются только цветом и прической. Такие сериалы изначально делают для продажи мерчанта.

Короче говоря: берегите своих детей от Ютуба!

Ранее Ctrl + ↓