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

Для объяснения своего «видения» есть разные решения:

1. «Живой» гид

Хорош всем, кроме того, что просто выбешивает, когда он тебе не нужен. Так как машина никогда не знает, нужен ли он тебе или нет, то выбешивает эта штука всегда. Я не знаю ни одного человека, который не прокликал бы всё максимально быстро, чтобы уже начать пользоваться продуктом.

2. Контекстные подсказки

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

Гитхаб даёт хороший пример, какими должны быть подсказки: не только про «что», но и про «зачем». Напишу подробнее про это когда-нибудь.

Существуют также скрытые подсказки, на которые никто никогда не нажимает, потому что все уверены сами во всём быстрее разберутся.

3. Отдельная База знаний

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

Извлекаем пользу

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

Давайте просто учитывать это:

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

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

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

4. В конце это уже небольшая кнопочка «Помощь» в углу экрана — аналог базы знаний.

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

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

№62

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

В принципе, решение.

Однако, чего я до сих пор не понимаю, зачем делать недействительным предыдущий код сразу после отправки следующего? Какую проблему безопасности это решает? Что мешает оставить валидными все коды, в течение тех 3 минут, которые отводятся на их активацию?

Отправил себе целых 5 кодов?

Отлично! Вводи любой, ведь они все предназначены для тебя и отправлены на твой личный номер телефона. Как только ты войдёшь, мы их все деактивируем, чтобы потом никто ими не воспользовался, А если твой телефон уже находится в руках злоумышленников, то какая разница получат они один пароль или три?

Хозяйке на заметку

Некоторые скрывают введённые символы звёздочками. Делать, этого для смс-кода разумеется не нужно. Пока пользователь его не ввёл, код нельзя подглядеть, а после не имеет смысла — он становится недействительным.

Точка всё сделала правильно, а Сбербанк — нет.

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

Не делайте так.

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

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

Но для начала поделюсь, что я осуществил свою давнюю мечту с летающими пиццами и корзиной-коробкой!

Смотрите, красота какая:

При добавлении пиццы текст в кнопке меняется с «Выбрать» на «Ещё одну», а сама карточка подсвечивается.

Выбор ингредиентов

Все пиццы существуют в 2 размерах: 23 и 31 см. Любую можно заказать на толстом или тонком тесте. В каждую можно добавить до 10 дополнительных ингредиентов.

Отсюда пицца тоже красиво улетает в корзину.

Сложно было с IIKO. Размер и тесто там не являются параметрами пиццы, это... Разные пиццы! То есть на каждую пиццу на сайте, в базе IIKO приходится четыре — каждая со своим айдишником. Ингредиенты у каждой пиццы тоже уникальные: поэтому необходимо каждый синхронизировать с тремя ему подобными.

В общем, жопа!

Конструктор акций

На сайте есть много разных акции. Акции со скидками на самовывоз, доставку или на то, и другое вместе. Все акции подразделяются на 2 категории: комбо-наборы (просто набор товаров по определённой цене) и скидка на N-ую пиццу. Для второго варианта пришлось писать целый конструктор:

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

Самое сложное, естественно, под капотом, потому что все акции полностью создаются и хранятся в IIKO, мать её!

Иллюстрации

Единственное, на что не повлияла интеграция с IIKO — эти замечательные иллюстрации:

Вкратце расскажу, для чего нужна Eatty, и как она делалась.

Eatty, чтобы есть вовремя!

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

Началось всё естественно с проблемы

Все программы для подсчёта съеденных калорий или БЖУ (белков, жиров и углеводов) работают примерно одинаково: ты вводишь свою дневную норму, потом — сколько съел, а они показывают сколько грамм чего тебе осталось до 12 ночи. В полночь всё почему-то обнуляется, и если вдруг ты объелся с вечера, то наутро начинаешь с чистого листа. Неудивительно, что в таких условиях сложно держать среднесуточную норму в норме — рассуждали мы каким-то вечером с моим другом Николаем Сынковским за стаканом виски.

Везде всё одинаково: (дневная норма) − (съеденное) = (осталось).

Внимание вопрос! Если ты съел 45% нормы, а сейчас 3 часа дня, стоит ли есть и как много? Я для себя ответа так и не нашёл и часто сталкивался с ситуацией, что норма исчерпывается к вечеру, а жрать охота.

И первоначальная идея Eatty была в том, чтобы считать БЖУ не за какой-то день, а за последние 24 часа. Но, когда для математических расчётов мне необходимо было вычислить cреднечасовую норму БЖУ, я всё понял:

Какие к чёрту граммы? Почему именно сутки? Нахрена вообще знать, сколько тебе осталось съесть?!

Самый понятный вариант, это показывать как долго тебе хватит, того, что ты только что съел:

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

Мелочь: в соотвествии с принципами МРП (минимально-рабочего продукта) иконка в кнопке «Настроек» заменена буквой S (Settings)

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

Знакомьтесь,
Protty, Fatty и Carby!

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

Первый релиз!

Добавил подсказки по граммовке: сколько лучше съесть в данный момент.

Время сделал «абсолютным»: то есть хватит не на 3 часа, а до полудня.

С появлением персонажей переименовал кнопку «Feed yourself» в «Feed», намекая, что заботиться надо уже не о себе.

Результат

Сам я начал пользоваться Eatty два месяца назад, в конце декабря, и за это время я не только не вышел за пределы нормы, но сумел снизить количество жиров на 20% (я на жировой безуглеводной диете, и жиры для меня — основной источник энергии, так что 20% — это действительно результат).

P.S Локализация

Изначально делал программу на английском языке, сейчас хочу перевести в первую очередь на русский. В связи с этим, жду от всех предложений по русскоязычным именам для Protty, Fatty и Carby (это белки, жиры и углеводы).

По рекомендации Быстроновского решил попробовать Воркфлоуи и пришёл в полный восторг!

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

Ребята просто изобрели «кирпич», благодаря которому собрать всё, что угодно:

Задачник

Причём могу до бесконечности дробить задачи на подзадачи, писать к задачам заметки, а к заметкам ставить задачи.

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

База данных

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

Система контроля версий

Можно смотреть с чего всё начиналось (интересно, а редакторы используют git?)

Как мне кажется, в этом сервисе можно делать вообще всё, что угодно. Единственный минус: мобильное приложение — полное говно!

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

В качестве хранилища выступает майкрософтовское облако «Скайдрайв», чьё лого весьма удачно и логично вписалось в интерфейс.

Всё сделано красиво — во время копирования или восстановления соответствующие стрелочки соответствующе анимируются.

Попробовать и купить программу по-прежнему можно в маркетплейсе, почитать описание — в моих работах.

Изначально, программа называлась МТС баланс, но со временем в неё добавилась поддержка других операторов, из-за чего сменилось название, и в эту заметку добавились курсивные слова.

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

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

Ну и на закуску иконочки:

Часть 2: Настройки