Подсказки
Когда вы делаете какой-то продукт, вы не можете быть уверены в том, что все «очевидные» решения в нём очевидны для всех. У всех людей разный опыт, и все по-разному видят идеальный интерфейс и сценарий.
Для объяснения своего «видения» есть разные решения:
1. «Живой» гид
Хорош всем, кроме того, что просто выбешивает, когда он тебе не нужен. Так как машина никогда не знает, нужен ли он тебе или нет, то выбешивает эта штука всегда. Я не знаю ни одного человека, который не прокликал бы всё максимально быстро, чтобы уже начать пользоваться продуктом.
2. Контекстные подсказки
В нужном месте и в нужное время, но очень краткие, чтобы не захламлять основной продукт.
Гитхаб даёт хороший пример, какими должны быть подсказки: не только про «что», но и про «зачем». Напишу подробнее про это когда-нибудь.
Существуют также скрытые подсказки, на которые никто никогда не нажимает, потому что все уверены сами во всём быстрее разберутся.
3. Отдельная База знаний
Позволяет максимально подробно всё описать, так как нет никакого ограничения на объём, кроме здравого смысла. Но заставляет пользователя постоянно прыгать от процесса решения задачи к справочнику, что чрезвычайно неудобно. Кроме того, часто бывает, что нужная информация находится в небольшом абзаце, но чтобы её найти, необходимо читать весь параграф.
Извлекаем пользу
Все эти способы — разные виды компромисса между желанием объяснить пользователю, что и как делать, и попыткой избавиться от визуального мусора: чем больше человек пользуется продуктом, тем больше подсказки ему начинают мешать, становятся мусоров. Но, ребята, мы же знаем (можем узнать), как часто пользователь был на этой странице, сколько раз он заполнил эту форму и так далее.
Давайте просто учитывать это:
- В первый заход форму разбиваем на простые и короткие шаги. Расписываем пользу по этому вашему Кэмпу. Аналог гида, но в нужное время и нужном месте.
- Во второй раз пользователь уже примерно знает, что и как работает — от эффекта гида можно уже избавиться. Оставляем контекстные подсказки, короткие и ёмкие.
- Чуть позже сокращаем всё до ссылок или всплывающих подсказок. Пользователь уже хорошо ориентируется, подсказки могут понадобиться только в редких случаях.
- В конце это уже небольшая кнопочка «Помощь» в углу экрана — аналог базы знаний.
Всё просто. Мы учили пользователя, когда ему это было нужно, и перестали лезть со своими советами, когда он уже стал самостоятельным.
С регистрацией по смс
Ну я уверен у всех были случаи, когда ты нажимаешь «Получить смс», долго ждёшь и ничего не получаешь, нажимаешь «Отправить ещё раз», наконец вводишь полученный код... и он недействительный, так как это был первый код, а тебе нужен второй. Тебе отправляют ещё один код, и вот приходит следующий, а ты уже и не знаешь это уже второй или третий и ждать ли ещё, и что вообще где.
№62
В «Точке» интересно решили это проблему. Каждый код имеет свой номер. Я сначала поржал над ними — привет от одноразовых паролей Сбербанка — но когда столкнулся с вышеозначенной проблемой, понял весь смысл всего этого.
В принципе, решение.
Однако, чего я до сих пор не понимаю, зачем делать недействительным предыдущий код сразу после отправки следующего? Какую проблему безопасности это решает? Что мешает оставить валидными все коды, в течение тех 3 минут, которые отводятся на их активацию?
Отправил себе целых 5 кодов?
Отлично! Вводи любой, ведь они все предназначены для тебя и отправлены на твой личный номер телефона. Как только ты войдёшь, мы их все деактивируем, чтобы потом никто ими не воспользовался, А если твой телефон уже находится в руках злоумышленников, то какая разница получат они один пароль или три?
Хозяйке на заметку
Некоторые скрывают введённые символы звёздочками. Делать, этого для смс-кода разумеется не нужно. Пока пользователь его не ввёл, код нельзя подглядеть, а после не имеет смысла — он становится недействительным.
Точка всё сделала правильно, а Сбербанк — нет.
А вот ошибиться с цифрой намного легче.
А новая ошибка — это новая смс... Время, деньги...
Не делайте так.
Тайтлы
Тайтл сайта — интересная штука. Поисковики обращают на них очень большое внимание, а живой человек видит их только в двух случаях:
- В поисковой выдаче
- Когда ищет нужную вкладку в бразере
В первом случае хочется осмысленной человеческой речи. Задаёшь вопрос — получаешь ответ (разумеется с ключевиками):
Но когда дело доходит до табов, осмысленная речь перестаёт работать. Попробуйте, к примеру, найти тут ресторан «Фарфор»:
Здесь помог бы каталогизированный подход, когда коротко и ясно:
В теории можно менять тайтл джаваскриптом, чтобы в выдаче отображался осмысленный заголовок, а при посещении сайта — навигационный. Но непонятно, как к этому отнесутся сами поисковики.
Делаем калькулятор калорий
Основной проблемой, с которой столкнулись наверное все пользователи Eatty! был ммм... первый функциональный экран программы:
Никто не понял, что с этим делать и откуда брать дневную норму.
Я изначально сознавал, что нужен какой-то калькулятор, но решил отказаться от него на первом этапе, так как программа из-за отсутствия базы продуктов всё равно подходила только хардкорщикам: кто ещё будет высчитывать количество БЖУ в куриной грудке и грече.
Настало время!
Я провёл короткое исследование. Большинство калькуляторов сложны: надо указывать свой пол, возраст, рост, вес, уровень физической активности, а также цель: похудеть, поправиться или не меняться.
Так выглядит самый приличный калькулятор на сайте Soylent:
Теория
Вначале рассчитывается норма метаболизма — сколько потребляет организм в состоянии покоя. Для мужчин и женщин формулы разные:
М: 10×Вес + 6.25×Рост − 5×Возраст + 5
Ж: 10×Вес + 6.25×Рост − 5×Возраст − 161
В зависимости от физической активности норма умножается на значение от 1,2 до 1,6. После чего уменьшается на 15—25% при похудении, любо увеличивается на то же значение при наборе массы.
Упрощаем
Целых 6 пунктов, попробуем выкинуть половину.
Сначала выкидываем физическую активность. Она не нужна, так как в Eatty! будет сжигание еды (упс, спойлер).
5/6
Разница в росте у людей примерно 15%, можно пренебречь. Гнаться за точностью не имеет смысла: содержание БЖУ в продуктах варьируется, поэтому даже если всё точно взвешивать — погрешности неизбежны.
4/6
Следующее — цель: похудение, набор веса или ничего не менять. Появляется идея, что цель и текущий вес можно заменить одним параметром: желаемым весом. Логика подсказывает, если указать желаемый вес ниже текущего, дневная норма также будет ниже, и ты похудеешь, если выше — то наоборот.
3/6
Остаётся три параметра: пол, возраст и желаемый вес. Отлично!
Хотя нет, не отлично. Убираем всё интерфейсное говно:
Вот теперь отлично!
Всё это, а также много другое, уже доступно в последнем релизе Eatty!
Воркфлоуи
По рекомендации Быстроновского решил попробовать Воркфлоуи и пришёл в полный восторг!
Сервис прост до гениальности: весь интерфейс состоит из одной-единственной страницы (этот факт сам по себе доставляет отдельный интерфейсный оргазм). Поразительно, насколько надо иметь чистый незамутнённый разум, чтобы придумать такое.
Ребята просто изобрели «кирпич», благодаря которому собрать всё, что угодно:
Задачник
Причём могу до бесконечности дробить задачи на подзадачи, писать к задачам заметки, а к заметкам ставить задачи.
В Воркфлоуи невероятно быстро создаётся древовидная структура, что позволяет разбить задачи на сотню мелких и с удовольствием их выполнять, получая за каждую свой укольчик дофамина.
База данных
Записываю отсылки к другим, на мой взгляд, интересным книги. Здесь же записываю свои впечатления.
Система контроля версий
Можно смотреть с чего всё начиналось (интересно, а редакторы используют git?)
Как мне кажется, в этом сервисе можно делать вообще всё, что угодно. Единственный минус: мобильное приложение — полное говно!
Мама и настройки Айфона
Моя мама — настоящая кладезь полезной информации для дизайнера интерфейсов. Она уже лет 15 не пользовалась компьютером вообще, а до этого только эпизодически, поэтому её когнитивный опыт в этой области практически равен нулю. С этой точки зрения очень познавательно наблюдать за её реакция на привычные для меня вещи.
Вчера учил её включать и выключать сотовый интернет на телефоне для экономии батарейки. Сначала устроил ей демонстрацию выключения с объяснениями, потом попросил включить интернет, чтобы убедиться, что урок закрепился в памяти.
С первым шагом проблем не возникло: настраивать работу телефона надо в настройках, всё логично.
Второй шаг вызвал некоторые затруднение:
«Сотовая связь» больше похоже на работу сотовой сети в целом, а не интернета в частности. Мама задала резонный вопрос: «Если я сотовую связь выключу, до меня смогут дозвонится?» Объяснил, что это просто кривой перевод (в общем-то так и есть), и лучше просто запомнить.
Третий шаг вызывает ступор:
Начинаю осторожно подсказывать:
— Видишь два переключателя? Какой из них выключен?
— Верхний
— Ну и что надо сделать чтобы включить интернет?
— Я не знаю, — отвечает мама — тут под ним написано выключите интернет, и я не понимаю, что надо нажать, чтобы его включить...
И тут я понимаю, что не знаю, почему в этой подсказке написана такая хрень. Если бы её не было, переключатель однозначно показывал бы, в каком состоянии находится интернет, и что надо сделать, чтобы его включить. То есть подсказка вместо того, чтобы подсказывать, запутывает.
После такого совсем по-другому начинаешь смотреть на то, что делаешь.
Теги в Файндере: переосмысление
Когда в Файндере только появились теги, они мне не понравились. Я почему-то считал, что теги должны быть глобальными и перманентными. Отсюда и появились такие странные и ненужные штуки, как текущий и важный теги. С тех прошло какое-то время, изменился характер моей работы (проектов стало больше), и жизнь наконец заставила меня понять, как на самом деле надо использовать теги.
Для каждого нового проекта я создаю тег по его названию и помещаю в сайдбар. Все входящие и исходящие файлы, касающиеся проекта, отмечаются этим тегом, что позволяет в один клик найти всё, что нужно. После того, как проект закрыт, тег выкидывается из сайдбара, но не удаляется, что позволяет при необходимости снова вернуть его в работу.
Такая организация оказалась настолько удобной, что я даже передвинул теги на самый верх сайдбара, задвинув свои обычные папки, которыми теперь почти не пользуюсь:
Теперь мне очень хочется, чтобы файндеровские теги использовались и в почте, но пока приходится довольствоваться папками.
Беда кастомных клавиатур
Вот несколько клавиатур Айфона для разных языков:
Русская, Китайская, Арабская (тут, кстати, иконка «стереть» смотрит в неправильную сторону)
Их всех объединяет расположение кнопки смены языка. На всех клавиатурах она расположена точно в одном и том же месте, благодаря чему сменить раскладку можно очень быстро, так как не нужно возюкать глазами и пальцем по экрану туда-сюда.
Но тут врываются кастомные клавиатуры во главе с эпловской Эмоджи...
...и начинается тупняк!
Неочевидная проблема заключается в том, что даже если кастомной клавиатурой пользуешься раз в месяц, она мешается каждый раз, когда случайно проскакиваешь мимо нужного языка.
Поэтому, если когда-нибудь будете делать Айос-клавиатуру, пожалуйста, начните с такого шаблона:
Спасибо!
Дизайн вкладок
Вкладки — распространенный элемент интерфейса для переключения контента внутри одного окна. И очень важно понимать, какая из них (а значит и какой контент) в данный момент является активной.
Если вкладок три и более, то всё просто — активная та, что отличается от других. Но когда их в блоке всего две (о возможности такого дизайнеры похоже часто забывают при отрисовке элементов), то с пониманием могут быть проблемы.
У правильных вкладок есть четкие границы, фон неактивных вкладок совпадает с фоном страницы, а активная вкладка заметно выделяется.
Если убрать границы, будет как у Эйрбнб. С одной стороны активная вкладка ярко выделяется, однако совпадение фона у контента и неактивной вкладки сильно смущает:
Если пойти дальше и отказаться от фонового выделения (как это сделали в Инстаграме), то получатся настоящие «вкладки Шрёдингерра»:
Тут настолько всё плохо, что если включить мозг и начать думать, то скорее придешь к неверному выводу.
Когда будете рисовать вкладки — начните с двух.
Теги в Файндере
Пытаюсь приучить себя использовать в работе файндеровские теги. Пока придумал только отмечать тегом «Current» те проекты, над которыми работаю в данный момент. В принципе, это удобно — открывать одну папку вместо того, чтобы бродить по диску (спотлайт по файлам и папкам и у меня отключен, чтобы продлить жизнь ССД).
Привыкание идёт очень медленно, потому что не хватает нескольких важных вещей:
- Возможность переименовать файл или папку только в тегах.
В обычной жизни файл или папка лежит внутри ещё какой-то папки, поэтому и именуется в соотвествии с контекстом. Например, Windows 8 с картинки — это дизайн Моего баланса для Виндовс 8, но как это понять? - Создание папок, существующих только внутри тегов
В продолжение к 1-му пункту тоже неплохо бы помогло в организации. Есть, к примеру, у вас проект с сотней файлой, но работаете в данный момент вы только с двумя: отмечаете их тегом и кладёте в псевдо-папку. Удобно! - Открывать новое окно файндера с выбранным тегом
Мне кажется, это настолько очевидно, что я очень удивился, когда не обнаружил такой возможности. Новое окно можно открывать с любой папкой, но не с тегом.