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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paper

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

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

Mailbox

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

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

105842
Погода на Олимпе

Мы перевели приложение Weather of Olympus. Оно заинтересовало нас стилистикой текстов — в них боги Олимпа дают свои комментарии по поводу текущей погоды в стихах. Обычно перевод стилизованных тексов и стихов мало кто делает качественно. Мы попробуем сделать хорошо.

В приложении 6 погодных состояний и 12 богов, всего — 60 различных сообщений. Мы перевели 12 экранов — по одному на каждого бога, по 2 на каждое состояние погоды.

У каждого бога есть карточка с его идентификацией.

Арес — бог войны.

Деметра — богиня урожая.

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

Дословный перевод: Аид выпускает облака преисподней, и теперь все дивятся темным теням на земле.

Дословный перевод: Гермес изобрел какой-то погодный механизм. Облака приближаются — не заставляйте его повторять два раза!

Рифма у некоторых стихов вольная, а в паре случаев и вовсе отсутствует.

Дословный перевод: Эта погода — торжество жизни и любви. После дождя Ирида может показать вам радугу!

Дословный перевод: Солнце встает — просыпайся, человечество! Прометей предлагает: соберитесь вместе и сделайте все достойно.

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

При переводе стихов мы вдохновлялись «Илиадой» Гомера. Некоторые из стихов мы перевели, опустив некоторые обороты, и добавив кое-что от себя, чтобы по-русски стихи звучали органично. Это нельзя назвать минусом локализации, так как достигнута главная задача — сохранить стилистику.

Например, в первой карточке слово «precaution» переводится как «мера предосторожности», что не вписывается в греческую стилистику текстов.

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

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

Грозные тучи в гневе Арес посылает! Молва говорит, что лишь теплые вещи от них укрывают! (Дословно: Арес посылает военный сигнал в виде темных облаков! В качестве меры предосторожности приготовь свои теплые вещи)

Ярость Зевса в небе темном собирается! Даже тучи, страхом объятые, прочь разлетаются! (Дословно: Зевс и его ярость надвигаются на нас! Даже облака боятся его гнева, потому что он не верит в драмы!)

Без солнца остался весь небосклон. Возрадуйся снегу! — велел Аполлон. (Дословно: Узри, человек! Аполлон запретил солнцу светить! Пойди и постарайся хорошо провести время со снегом!)

Напрасно рыбак свой гарпун кантовал! Ибо лед Посейдона все реки сковал! (Дословно: Рыбак, разве ты не видишь, что Посейдон заморозил воду! Пойди попей кофе и не пытайся давить!)

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

Гера не в духе, олимпийцы рыдают, а их слезы дождем с неба спадают! (Дословно: Гера заставляет большинство олимпийцев рыдать! Видишь, это их слезы падают с неба!)

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

Солнце иль тучи — выбирать нет причин. Аид говорит: «Горд Олимп и тем, и другим!» (Дословно: Нет причины предпочитать солнце или облака! Аид говорит: и то, и другое заставляет Олимп гордиться!)

Афина вам дарует весеннюю погоду и прогнать желает все беды и невзгоды! (Дословно: Афина диет вам эту весеннюю погоду и хочет, чтобы вам стало лучше!)

В такую погоду жизнь и любовь торжествуют! А после дождя Ирида радугу дарует! (Дословно: Эта погода — торжество жизни и любви… После дождя Ирида может показать вам радугу!)

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

Возрадуйтесь, поля, молящие об урожае! Деметрой дождь священный послан, что землю орошает! (Дословно: Поля бедствуют, все фермы молят о зерне! Хорошая новость — Деметра дает вам этот священный дождь!)

Гермес доставляет новости в срок! Покуда солнце сияет — бери у жизни урок! (Дословно: Новости от Гермеса никогда не приходят поздно. Когда видишь солнце — начинай действовать!)

Стихотворные комментарии небожителей — ключевая особенность приложения, выделяющая его среди множества других приложений о погоде. При обычном дословном переводе приложение утратило бы эту фишку и превратилось бы в обычное погодное приложение со странными подписями, вроде: «Арес кидает в тебя огненными шарами; он свиреп! Если ты достаточно смел, то используй его щит против него же!»

193147
Упрощение во вред

Перевод статьи Meng To «Simplifying For The Wrong Reasons»

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

Скрытое навигационное меню

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

В Windows 8 появилось меню Charms, подобное стартовому меню из предыдущих версий операционной системы, только оно всегда скрыто. С одной стороны, это делает интерфейс менее загроможденным, но с другой — наличие этого меню неочевидно, и многие пользователи даже не знают о его существовании. И, например, чтобы выключить компьютер, потребуется сделать целых 4 клика: Charms > Настройки > Питание > Выключить.

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

Флэт-дизайн

Флэт-дизайн не опирается на знакомые людям метафоры из реальной жизни. В то время как некоторые из этих метафор могут быть безвкусными и отвлекающими (как например в Find My Friends), существуют хорошие метафоры, основанные на физике, анимации, звуках и жестах.

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

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

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

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

Отсутствие интерфейса

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

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

Используя естественный язык, Fantastical со 100% точностью может предположить, что за событие вы хотите добавить в календарь. Заметьте, что мы все еще используем интерфейс (клавиатуру), и что такого результата не удалось бы добиться при использовании голоса. Наши технологии до этого еще не дошли.

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

192886
Новый сайт. Новая услуга.

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

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

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

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

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

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

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

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

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