Без шелухи

Угадайка и неленивый интерфейс

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

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

https://antonz.ru/guess/

Регистрация без регистрации

Разобрался с идентификацией в интернет-магазине, спасибо ребятам, которые просветили меня в личке.

Совсем забыл, что большинство людей используют один-два пароля для всего на свете. Соответственно, ввести «универсальный» пароль им легко, а пользоваться автосгенерированным, напротив, невозможно (его же не запомнить).

Вариант «почта вообще без пароля» большинство в реальной жизни не встречало, поэтому проигнорировало.

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

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

1. При покупке магазин даже не заикается о регистрации (цель человека — купить, а не зарегистрироваться).

2. Если человек указал в заказе эл. почту, магазин регистрирует его автоматически.

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

Таким образом, нет ни явного этапа регистрации, ни пароля. И это проще, чем вход через соцсети. Счастье!

«Показать все»

Месяц назад я написал о приёме «показать все», а сегодня перечитал заметку и понял, что ничего не понял ツ Это верный признак, что не хватает наглядного примера.

Добавил его, теперь стало кристально ясно:
https://antonz.ru/show-all/

Задачка: приглашение обновить ОС

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

— Обнови меня немедленно.
— Обнови меня чуть позже.
— Насладись описанием новой версии.

Как видите, варианта «пшла прочь» не предусмотрено. Если выбрать «позже», айось немедленно подсунет второе модальное окно (уже на весь экран), в котором потребует подтвердить твёрдое намерение обновиться ночью. Если и в этом окне выбрать неприметную надпись «напомнить позже», то айось вернётся на следующий день и начнёт всё с начала.

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

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

Что делать?

Разбор: https://antonz.ru/os-update-puzzle/

Пейджинг, ещёкалка и бесконечный скрол

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

Мой голос — за одну из них:
https://antonz.ru/paging/

Контроль версий для дизайнеров

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

Может чего не понимаю, но сдаётся мне, что всё это типичное «не то». Дизайнеры зачем-то изобретают велосипед, хотя программисты всё уже давно придумали.

Никто не пользуется отдельными графическими инструментами для контроля версий. Программист просто берёт среду разработки, в которой пишет код (IDE, integrated development environment) и подключает её к репозиторию в Гите (это самая популярная система контроля версий). А IDE делает всё остальное — синхронизирует изменения, переключает ветки, показывает историю, удобно отображает diff-ы версий.

Логично у дизайнеров сделать точно так же. Только вместо IDE должны выступать Sketch, Figma или Adobe XD. Зачем зоопарк отдельных тулов?

Задачка: бардак в Телеграме

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

Павел сказал, что гордится идеей каналов в телеграме. «Это как СМИ, только лучше», — сказал он. И продолжал:

> Когда каналов становится много, работать с ними неудобно. Приходится массово мьютить, но это не спасает — всё равно засоряют список контактов и мешаются с чатами. Больше того, если рабочие чаты ведутся в телеграме — они мешаются с личной перепиской, и всё это превращается в неуправляемое месиво.

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

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

Разбор: https://antonz.ru/telegram-puzzle/

Задачка: Яндекс-музыка и медленный интернет

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

Давайте поможем Яндекс-музыке и предложим, что делать при запуске приложения, если интернет медленный или его вовсе нет. Чем больше при этом пользы для человека — тем лучше ツ

Разбор: https://antonz.ru/yandex-music-puzzle/

Урл как интерфейс

Для меня урл (URL) на сайте или в веб-приложении — часть интерфейса. Поэтому он должен быть хорош.

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

https://antonz.ru/url-as-interface/

Задачка: город в интернет-магазине

Давайте попробуем новую рубрику — интерфейсные задачки? Я описываю проблему, вы предлагаете, как решить её с помощью интерфейса. Задачки будут небольшие, рисовать макеты не потребуется, ну только если сами захотите ツ Лучшие решения опубликую здесь и в блоге, со ссылкой на автора (если он не захочет остаться неизвестным)

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

Раньше магазин показывал каждому посетителю при входе такой попап:

> Ваш город — «Санкт-Петербург». Мы угадали?
> ДА / НЕТ

Но пришёл новый директор по маркетингу и категорически требует попап убрать — он, мол, бесит покупателей.

Что делать, чтобы и маркетолога удовлетворить, и покупателям по ценам и доставке не наврать?

Разбор: https://antonz.ru/delivery-city-puzzle/

Как упорядочить информацию в интерфейсе, revisited

Мне кажется, что от мнемоники LATCH (положение, алфавит, время, категория, иерархия) больше вреда, чем пользы. Поэтому я слегка переиначил её и развил. Получилась мнемоника СПРАВКА ツ

https://antonz.ru/no-more-latch/

Избегайте настроек

11 лет назад ребята из 37signals (ныне Basecamp) написали книгу о создании продуктов — Getting Real. Книга немного наивная, но некоторые советы прошли проверку временем.

Грабли, на которые лично я каждый раз наступаю, описаны в главе «Избегайте настроек». О том же самом писал Раскин в книге «Об интерфейсе»: настройки — это перекладывание с больной головы на здоровую.

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

Иногда настройки во благо — если речь о персонализации, через которую человек выражает свою индивидуальность (вроде аватарки в профиле).

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

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

Как упорядочить информацию в интерфейсе

Часто при проектировании UI нужно показать на экране список однотипных объектов: людей, товаров, статей. И возникает вопрос — как их организовать?

Классический ответ дал в 1989 году Ричард Вурман, автор термина «информационная архитектура». Он предложил мнемонику LATCH:

— Location, положение объекта: магазины на карте.
— Alphabet, алфавит: список контактов в телефоне.
— Time, время: расписание на день.
— Category, категория: товары в магазине.
— Hierarchy, иерархия.

Это модель намного лучше, чем ничего. Но, если честно, она очень так себе.

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

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

Как уменьшить дерготню в интерфейсе

Чем меньше человек взаимодействует с интерфейсом, тем ему легче жить. Уменьшить интерактивность интерфейса помогут три приёма:

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

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

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

Это третья и последняя заметка по книге Брета Виктора «Волшебные чернила». Предыдущие две:

- Фокус на представлении вместо функции
- Как угадать намерение пользователя

💰 Купить в 1 клик

Покупку одной кнопкой, без оформления заказа, придумал лично Джеф Безос, основатель Амазона. Придумал, поставил задачу команде, взяли в работу, сделали. Презентуют. Безос заходит на страницу книги, жмёт «купить в 1 клик» и... Получает окошко с подтверждением «Точно купить? Да / Нет».

Джеф сожрал продакт-менеджера, а разработчиков заставил окошко убрать. Так на Амазоне появилась покупка в 1 клик.

А кнопка «купить в 1 клик», которая торчит в каждом втором интернет-магазине, на самом деле означает «перезвоните мне». М-м-маркетологи, м-м-мать.

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

Я рад, что большинству интересна идея Брета Виктора о фокусе на представлении информации при проектировании софта. Тогда продолжаем ツ

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

Как определить контекст:

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

Из внешней среды
— Дата и время (обычно — сегодня и сейчас). Так Яндекс показывает погоду.
— Географическое положение (обычно — здесь). Так Гет с ходу предлагает вызвать такси туда, где находится человек.
— Физическое окружение (освещенность, шум, погода, температура). Так айфон убавляет яркость экрана в сумерках.
— Информация от других программ (не включать будильник, если горит экран телефона). Так до сих пор никто не умеет делать ツ

Из истории взаимодействия с человеком
— Последний выбор. Подробности см. в статье о выборе в интерфейсе.
— Обучение предпочтениям. Умная лента Фейсбука и рекомендации Амазона.

Явно запросить у человека
Самый плохой вариант. Интерактивность требует на одно действие больше: помимо «увидеть» и «обдумать» — «сделать».

Волшебные чернила Брета Виктора

Мне немного стыдно, но я только на прошлой неделе начал читать книгу Брета Виктора Magic Ink. Ребята, это что-то невероятное (и кстати, в ней раскрыта тема выбора «за человека», о которой я писал пару недель назад).

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

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

Поэтому вместо функций Брет предлагает фокусироваться на представлении информации:

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

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

Книга бесплатная. Средних размеров (на 3 часа чистого чтения), язык тяжеловесный.

http://worrydream.com/MagicInk/

Как сделать пользователя экспертом

Спорим, вы не прочитали вчерашнюю статью Кэти Сьерры о прокачивании пользователей? Ничего, это норма (c)

А там всё просто, на самом деле: три инструмента, как сделать из новичка эксперта. Вот они, с моими комментариями:

1️⃣ Дать как можно больше примеров «как надо». Например, приложение для медитации Headspace полностью состоит из примеров: надеваешь наушники и делаешь, что говорят. И это намного быстрее обучает правильной медитации, чем любой другой подход.

2️⃣ Устроить практику из серии коротких упражнений с моментальной обратной связью и возрастающим уровнем сложности. Практика легко встраивается в обучающие приложения вроде тренажера английского, но с «обычными» приложениями сложнее. Наверно, для них подойдут обучающие мини-сессии, расставленные в подходящих местах продукта.

3️⃣ Нарисовать карту пути совершенствования, которая отвечает на вопрос «каких результатов я смогу добиться и когда». Тоже больше подходит для обучающих приложений, мне кажется. Для обычных приложений в голову приходят только программы лояльности. Например, издательство МИФ наглядно показывает путь постоянного покупателя к максимальной скидке в 15%.

Хороший продукт «прокачивает» пользователей

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

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

Люди рассказывают о продукте, если он помог им почувствовать себя крутыми. У Тильды отличное «сарафанное радио», не потому что у нее вагон фич, а потому что она помогает любителю сделать профессиональный и красивый сайт за один день.

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

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

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

https://habrahabr.ru/post/231711/

Редактура и голосовой интерфейс московского метро

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

1. Реклама. Её просто не должно быть — никто не имеет права гадить мне в мозг без моего согласия.
2. Плохой текст. О нём и хочу поговорить.

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

— По техническим причинам
— Пурга о конечной станции
— Мозговые слизни на эскалаторе