Смена лого Google Maps

Смена лого Google Maps

Карты гугла обновили логотип и я, как преданный пользователь сервиса, ощутил на себе всю "прелесть" этого мероприятия. Под постом будет картинка До обновления и После.

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

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

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

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

Чинить баги по TDD

Один из кейсов, которые я рассмотрю на своём мастер-классе 26 октября (https://tdd.timepad.ru/event/1074439/?utm_source=telegram&utm_medium=messenger&utm_campaign=mypost-bugs) — это исправление багов по TDD.

Вот прилетает к нам задача, скажем «Жму на кнопку — не работает». Обычно мы чиним такие баги весьма тупо — поднимаем фронт и бек, придумываем гипотезу, и начинаем дебажить: вносим исправление и жмём на кнопку. Если заработало — отлично, если нет — просто перебираем дальше гипотезу за гипотезой. Иногда мы перебираем гипотезы настолько беспорядочно, что даже не убираем следы предыдущих попыток.

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

Правильный процесс выглядит так: открываем контроллер в API, куда ходит кнопка, а дальше ставим под сомнение каждый нижележащий метод, проговаривая про себя гипотезы, к примеру: «я сомневаюсь, что метод get_users() не возвращает неактивных пользователей». Если сразу не находим теста, который доказывает обратное — пишем свой. Если тест падает — отлично, у вас уже есть тест, и остаётся только написать код. Если написанный тест не падает — git checkout --, и ставим под сомнение следующий метод.

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

Специальные организмы

Специальные организмы

Год назад мы перестроили процесс работы команды с китом в Figma и перестали проебываться с правками по десяткам экранов разом.

Для этого в общей теории атомарности мы вели специальные организмы.

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

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

1. Атомы
Базовые элементы-одноклеточные. Отвечают за стиль и используются много раз. Атомом бывает фигура или иконка.

2. Молекулы
Сумма атомов, основа дизайна: это целостный элемент, например кнопка, инпут, меню или тапбар. Отвечает за разметку (расстояния).

3. Организмы
Это состояния молекулы, которые передают цвет и отображение атомов. Например, состояния кнопки: при наведении или при нажатии.

4. Специальные организмы
Отвечают за текст и иконки и конкретный текст внутри сценария.

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

Время — невосполнимый ресурс

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

Если 1 ноября вы запускаете на рынок новый корм для кошек, то к 1 октября у вас полюбому должны быть нарисованы макеты банеров для наружки, а к середине октября запущен сайт, который рассказывает о продукте. Если банеров или сайта не будет, то продукт банально никто не возьмёт с полки — результат вашей работы пропадёт.

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

Единственное, что вы не сможете сделать, когда опаздываете — это добавить себе ещё неделю, чтобы закончить проект: машину времени пока не изобрели. Пожертвовать деньгами или качеством — можно. Уменьшить проработку — можно. Добавить себе срок — нет.

Время стоит беречь не только в проектах, но и в личной жизни. Всё так же — если уже 20:00, а вы ещё не ходили в спортзал, то вы никак не можете сделать так, чтобы сейчас стало 18:00 — вы можете только не пойти в спортзал. Если вы приехали на работу в метро, а по дороге слушали музыку или изучали новинки в Arcades — вы просто приехали на работу на метро. А эти же 40 минут можно было потратить на чтение книги или спокойно поспать.

Берегите время.

Почему мы предпочитаем делать юзабилити-тесты финсервисов вживую?

Почему мы предпочитаем делать юзабилити-тесты финсервисов вживую?

Есть три группы ограничений, которые уводят в общение тет-а-тет.

1. Технические.
– Мы тестируем интерфейсы и важно видеть, как именно люди держат телефоны. Поэтому для удалённых тестов нужны камера и штатив.
– Надо рассылать инструкции, просить пользователя установить необходимое оборудование и подключить наушники. Уходит минут 20 на настройку и технические неполадки.
– Многие респонденты просто технически не продвинуты и не могут всё подготовить.
Эта возня отъедает время общения и терпение респондента.

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

3. Секьюрность.
– Мы работаем с чувствительными данными клиента, тестируя финансовые сервисы иногда на данных пользователя. В онлайне запустить такое сложно. У пользователя меньше доверия — он может опасаться, что лишние люди увидят экран.
– С другой стороны, мы работаем с банками-заказчиками под NDA и должны гарантировать, что новый продукт не утечёт за пределы команды дизайна, разработки и тестов до запуска проекта.

Иногда от этого приходится отходить, например, когда респонденты из Европы или США. Всё это грозит двойной потерей качества — из-за онлайна и языковых барьеров.

Артур Абраров написал, чем отличаются нативные приложения на iOS и Android (Material Design).

Выжимки из части пунктов:

3. Общепринятый размер экрана для Андроида — 360 × 640 dp. Для Айоса проектируют под размеры iPhone 5 (320 × 568 pt) или iPhone X (375 × 812 pt).

5. В Андроиде есть встроенный инструмент для навигации назад — Android Navigation Bar. Стрелка «Назад» возвращает пользователя по пройденному пути на шаг назад как внутри приложения так и между ними.

6. В Material каждый компонент находится в конкретном месте на оси Z. Надо осознанно подходить к созданию теней.

8. Для верхнеуровневой навигации Айос рекомендует только Tab bar. Андроид — Navigation Drawer (если пунктов больше 5), Bottom Navigation Bar (от 2 до 5 пунктов) и Tabs.

10. В отличие от Segmented Controls в Айосе, между Tabs в Андроиде можно переключаться свайпами. Если используете Tabs, не добавляйте на экран элементы с похожими жестами: карусель картинок или карточки со взаимодействием свайпами.

12. В Андроиде пользователь может раскрыть Navigation Drawer жестом Edge Swipe слева вправо. Этот жест нельзя использовать для чего-то иного вместе с Navigation Drawer. В Айосе жест возвращает пользователя к материнской странице.

13. Поиск может быть в виде иконки. В Айосе она открывает отдельный компонент Search Bar. В Андроиде поле поиска отображается в Top App Bar. В Айосе поле поиска можно спрятать под Navigation Bar и отобразить его, сдвинув содержимое страницы свайпом вниз. Не стоит этим же жестом обновлять содержимое страницы.

15. В Айосе нет аналогов:
— Navigation Drawer — бургерное меню;
— Banner — сообщить важную информацию и предложить связанные действия;
— Snackbar — кратко сообщить о результате пользовательского действия;
— Chips — показать введённый пользователем контент вместе с дополнительными данными или элементами управления;
— Floating Action Button — закреплённая кнопка основного действия;
— Standard Bottom Sheet — страница, часть которой закреплена в нижней части экрана.

16. В Андроиде нет аналогов:
— Page Control — показать, на какой из страниц находится пользователь;
— Toolbar — панель с элементами управления;
— Steppers — кнопки увеличения и уменьшения чисел, например, количества копий для печати;
— Popover — всплывающая панель, например, для настройки текста в читалках и браузерах.

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

22. В Айосе дата выбирается с помощью барабана. В Андроиде — календаря или поля ввода.

23. В Айосе название поля находится внутри поля и исчезает во время ввода текста. Material рекомендует поднимать название при вводе текста, выделять основным цветом его и полосу под текстовым полем.

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

30. В Айосе можно потрясти телефон, чтобы появился диалог отмены последнего совершённого действия.