8 (846) 207-35-85

блог

Блог о дизайне и не только

Интерфейсы: корзина

В 1982 году, когда в Эппл выпустили Apple Lisa, люди мало что понимали в компьютерах, и пользователей приходилось обучать, как работать с компьютерными интерфейсами.

Apple Lisa, apple.wikia.com

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

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

Эволюция внешнего вида корзины в МакОС за 30 лет

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

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

То, что система считает файлы пользователя ненужным мусором, еще сильнее подтверждается иконкой корзины. Она показывает своим видом, что здесь стоит навести порядок, а кнопка «Очистить корзину» заставляет думать о файлах в этой папке, как о мусоре. Метафора с мусорной корзиной быстро сформировала привычку постоянно очищать эту папку.

muppet.wikia.com

Для 7-й версии Мак ОС даже сделали программу-игрушку в виде Оскара Ворчуна из шоу Улица Сезам. Он жил в корзине на рабочем столе, выглядывал из нее после каждой очистки корзины и пел песню «Oh, I love trash…». Дети специально удаляли файлы на компьютерах своих родителей, чтобы поиграть с Оскаром.

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

Реклама жесткого диска в 1980, howtogeek.com

Интерфейс хранения данных стоило бы сравнивать не с мусорной корзиной, а с библиотечным архивом. Файлы, отправленные в архив, хранятся пока в нем хватает места. Новые файлы, попадающие в архив, вытесняют собой самые ранние. Любая запись быстро находится, ее содержимое легко просматривается. Пропадает необходимость в кнопке «Очистить», а люди не сожалеют об удаленных файлах. Пропадает само понятие «удалить файл», остается только «отправить в архив». Сегодня облачные хранилища идут по этому пути, не заставляя пользователей беспокоиться о сохранности своих данных.

89391
Почему иногда «плохой» дизайн работает

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

Дитер Рамс: «Хороший дизайн - это как можно меньше дизайна»

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

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

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

Работоспостобность продукта

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

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

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

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

Фейсбук сложный, но им пользуются 700 миллионов человек ежедневно, потому что видят в этом пользу. Сайт Амазона выглядит неидеальным, но это крупнейший интернет-магазин в мире. Посетители с этим смирились, потому что мотивированы пользоваться им.

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

Мотивация пользователей

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

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

Темные паттерны

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

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

Большую коллекцию паттернов смотрите на darkpatterns.org

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

104966
Проблемы стартовых экранов

20% всех скачанных приложений из AppStore пользователи открывают не больше одного раза.

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

Мешают начать

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

Подсказки пытаются объяснить принципы работы, но не дают попробовать их сразу на практике.

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

Не запоминаются

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

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

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

Создают визуальный шум

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

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

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

Как правильно обучать

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

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

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

Paper

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

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

Mailbox

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

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

110392
Самара
Москва
ул. Садовая, 137, 4 этаж
ул. Академика Королева, д. 13, подъезд 4, офис 8
8 (846) 207-35-85
8 (917) 950-25-39
info@river-city.ru
ул. Садовая, 137, 4 этаж
ул. Академика Королева, д. 13, подъезд 4, офис 8
Обратная связь

Напишите нам, если у вас есть вопросы

или вы хотите заказать наши услуги