Ильяхов, заметки с тегом: интерфейс

Не ставьте ссылки куда попало

Sun, 10 Feb 2019 22:12:52 +0300

Куда не стоит ставить ссылки в информационном продукте:

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

На заголовок. Допустим, у вас раздел статьи посвящён теме, к которой у вас есть источник. Чтобы сослаться на источник, вы решили остроумно поставить ссылку в заголовок, типа «весь этот раздел подтверждается вот этой ссылкой». Но читатель не понимает, что по ссылке. Плюс, заголовок большой и важный, и вы таким образом только стимулируете человека от вас поскорее сбежать. Оно вам надо?

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

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

Как же правильно? Читайте об этом в статье «Как ставить ссылки».

Принцип «Пусть потеет машина» в калькуляторах и интерактивных статьях

Sat, 04 Aug 2018 18:21:00 +0300

Бирман в Школе редакторов рассказывал о принципе «Пусть потеет машина». Это значит, что если какую-то работу можно перебросить с человека на машину, это и надо сделать.

Например:

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

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

Если я пишу в такси «строител», машина должна угадать, что я в Москве и хочу поехать на улицу строителей.

То же самое, когда вы делаете интерактивные спецпроекты, калькуляторы и другие информационно-развлекательные игрульки:

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

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

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

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

Ошибка в том, чтобы написать некий алгоритм с кучей переменных, а потом попросить читателя эти переменные заполнить. А правильно — заполнить всё самим. Пусть лучше машина держит в памяти 2 МБ статистических данных, чем мы попросим пользователя эти данные для нас достать.

Зыс из юзер экспириенс.

Успешно

Fri, 31 Mar 2017 18:06:05 +0300

Осторожнее со словом «успешно».

Нет	Да
Платеж успешно отправлен	Платёж отправлен
	Деньги ушли
	10 000 ₽ отправлены
	Отправили 10 000 ₽ Станиславу Миляеву (если он сдаст монтаж)
Данные успешно сохранены	Сохранено
Я успешно закончила МГУ	Я закончила МГУ
	Я закончила МГУ с красным дипломом
	У меня высшее филологическое образование, поэтому я могу квалифицированно пояснить за парцелляцию
Более 20 лет успешно проводит тренинги	Проводит тренинги 20 лет

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

Сотрудник МВД отчитался об успешном завершении операции → Операция завершена успешно, задержаны все женщины и дети

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

На иллюстрации — фрагмент гравюры «Ростовщики» Томаса Роуландсона, Лондон, 1784 г.

Лимиты в интернет-банке

Tue, 02 Feb 2016 13:39:40 +0300

В Альфа-банке установка лимита выглядит так:

Если вы не введете число большее или равное нулю, вы лох:

Что тут непонятного:

Я сейчас отключу снятие наличных? Или я установлю лимит на все, кроме снятия наличных?

Какая разница между «ограничением на весь срок» и «сроком действия лимита»?

География — это где мне можно снимать деньги или нельзя?

Что сейчас произойдет?

Можно я не буду решать уравнение «больше или равно нулю»?

Сначала разберемся с переключалками. Если просто подружить их с заголовком и убрать слово «тип операции», уже будет понятнее. А если вставить числа в предложения, станет еще лучше:

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

Тут есть проблема: есть ощущение, что мы тут «разрешаем платежи и наличку», что автоматически означает, что мы запрещаем интернет-платежи. Может показаться, что если я хочу отключить интернет-платежи, нужно снять эту галочку и нажать «сохранить», а это не так. Решаем:

Заодно добавили под кнопку объяснение, что сейчас произойдет.

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

Так-то мне нужно было отключить платежи в интернете. В Тиньков-банке это делается вот так:

На покупки в месяц лимит не установлен.
На снятие наличных в сутки лимит сто тысяч.
Операции в интернете выключены.
Чтобы сохранить, потребуется ввести СМС-код.

Спасибо, все ясно.

«Не буду щас читать, попозже». Нужен совет дизайнера

Wed, 20 Jan 2016 14:45:13 +0300

В понедельник я в порыве прокрастинации выкатил четвертую версию «Советов».

Главная фишка новой версии — в рубрикаторе появились цитаты и картинки. Раньше была просто гора ссылок:

Стала гора ссылок с иллюстрациями:

По всем правилам, это должно было отразиться на кликабельности. Я ожидал какую-то такую карту кликов:

Вот подлинная карта кликов спустя 3 дня:

Сломалась статистика? Мало данных? Нет, на первом экране клики распределены ожидаемо — все кликают в «Что такое инфостиль» и в бургерную кнопку:

Отдельно отличилась незаметная навигашка, которая прилипла к верхнему краю экрана. Слово «Хвастается» — вторая по кликабельности ссылка на этом экране.

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

Не ставьте ссылки на слова «здесь», «тут» и «тыц»

Mon, 02 Nov 2015 16:47:58 +0300

Нет	Да
Мои работы вы можете посмотреть тут	Мои работы — в портфолио на Бехансе
Как события развивались дальше, мы рассказываем здесь	Что было дальше — в репортаже Ильи Азара
Новый альбом «Холзи» качайте тут: тыц	Новый альбом «Холзи» на Саундклауде

Интерфейс — все еще зло

Tue, 23 Dec 2014 12:37:41 +0300

Я с детства «компьютерный мальчик»: всем все чиню, настраиваю, собираю, чищу. Я знаю ХТМЛ, КСС, немного ПХП и Яавскрипта. В студенчестве за ночь поднимал и полностью настраивал сайт на Вордпрессе с нестандандартным дизайном. Могу поставить оптибей, воткнуть в ноутбук твердотельный диск и перелить на него системный партишен. На общем фоне я в компьютерах не беспомощный.

Но до чего же бесит. Вечер, хочу посмотреть сериал.

Захожу на «Турбик». Говорит, нет денег на счете, сериал не покажу.
Кликаю в трех местах, чтобы пополнить счет.
Иду за телефоном, чтобы отправить СМС для пополнения счета.
Отправляю СМС. Ответ: подтвердите, что вы хотите платить.
Подтверждаю.
Ответ: у вас не хватает денег.
Иду в мобильный банк. Ввожу пароль.
Выбираю свой шаблон для платежа. Решил пополнить на пять тысяч, чтобы до весны не мешал жить. Из-за необычной суммы просит ввести код безопасности.
Жду код безопасности.
Еще немного жду. Приходит
Ввожу код безопасности.
Повторяю СМС с оплатой.
«Подтвердите, что хотите оплатить»
Подтверждаю.
Обновляю «Турбик»: деньги пришли.
Иду в список сериалов. Минуту борюсь с тупым бесконечным списком сериалов.
В итоге ищу через поиск по странице. Нашел.
Захожу в сериал — Флеш-плеер устарел.
Ах ты ж сука!
Иду на сайт Адоба.
Скачиваю установщик.
Монтирую установщик, запускаю приложение.
Со всем соглашаюсь, прокликиваю.
«Закройте все браузеры, а то я не могу тут установиться».
Закрываю. Кликаю «Продолжить».
Установилось.
Запускаю браузер.
Захожу на Турбик, ввожу пароль
Нахожу сериал, нахожу серию.
Смотрю.

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

И умом-то я понимаю, что все эти подтверждения и пароли — это все для моей же безопасности, чтобы никто не утащил мои деньги. Но так если подумать — это сплошные костыли. Работать должна машина, а заставляют работать меня. Чувствуешь себя вот так:

Адский алгоритм, через который я прошел, получился из-за цепочки плохих дизайнерских решений.

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

Какие-то решения откровенно импотентские: почему нельзя обновлять флеш-плеер незаметно, не спрашивая меня? Я не должен знать, что у меня какой-то системный модуль устарел. У меня Андроид, но даже он мне обновляет приложения незаметно. И на самом «Турбике» не мешало бы вынести код для пополнения счета на главную страницу, когда у меня кончаются деньги. Сейчас этот код скрыт за двумя экранами.

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

Интерфейс — все еще зло. Все, кто делают интерфейс невидимым — молодцы.

Вы невнимательное говно, попробуйте еще раз

Mon, 29 Sep 2014 10:54:26 +0300

Хочу купить книжку на Озоне. Заполнил анкету, ввел пароль, получаю вот такое:

Здесь плохо сразу всё.

Меня просят быть внимательным, как будто я допустил ошибку по невнимательности. Ошибку я не допускал. То, что у них в базе есть мой адрес, не мои проблемы.
Мне предлагают попробовать еще раз. Как будто если я еще раз заполню анкету, проблема решится.
Я не знаю, что делать дальше. Другой почтовый адрес я не хочу вводить, много чести. Что теперь делать, непонятно.

Давайте поможем Озону.

Обязательные поля

Все, кто был у меня на курсе, знают, что обязательные поля — моветон. Чтобы пользователь сообщил вам настоящие сведения о себе, объясните пользу в его мире:

Пароль пришлем письмом.

Ошибка

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

Другое дело.