http://ivanzviahin.by/blog/tags/missiya/ It is my diary. I’m ivan zviahin, an designer, manager, car enthusiast. Ivan Zviahin en E2 (v3849; Aegea) Ivan Zviahin ivanzviahin@gmail.com It is my diary. I’m ivan zviahin, an designer, manager, car enthusiast. no 146 http://ivanzviahin.by/blog/all/avprinciples/ Sat, 06 Feb 2021 13:01:59 +0000 Ivan Zviahin http://ivanzviahin.by/blog/all/avprinciples/ <p>av.by — сайт о покупке и продаже автомобилей. Мы развиваем проект с 2001 года, и сегодня он входит в число наиболее посещаемых ресурсов байнета. Сейчас в нашей базе около 70 000 объявлений о продаже автомобилей из Беларуси. Помимо сайта, у нас есть и мобильное приложение для Android и iOS с суммарной месячной аудиторией более 250 000 пользователей. Каждый месяц av.by посещает более 1 200 000 человек.</p> <h2>Миссия</h2> <p>Помогает всей компании глобально держать фокус в принятии решений.</p> <div class="e2-text-picture"> <img src="http://ivanzviahin.by/blog/pictures/ms.jpg" width="2533" height="2560" alt="" /> </div> <h2>Делаем для Зои Ивановны</h2> <p>Зоя Ивановна — наша ключевая из персон. Сделав понятно, доступно и очевидно для неё — сделаешь хорошо и для других персон. Персоны сделаны на основании множества проведенных пользовательских интервью.</p> <div class="e2-text-picture"> <img src="http://ivanzviahin.by/blog/pictures/ps_1.jpg" width="2560" height="2524" alt="" /> </div> <p>Чтобы объяснить что-то сложное, переводим на «мамин» язык. Не боимся использовать местоимения и предлоги. Характер и интонация как у дружелюбного соседа, который разбирается в автобизнесе и конструкции автомобиля. У этого соседа есть чувство юмора, но он не нарушает личных границ. Мы застолбили несколько принципов для текста в интерфейсе:</p> <ul> <li>сразу даём на ответ на потенциальный вопрос человека,</li> <li>не используем техническую терминологию,</li> <li>говорим коротко, но без потери смысла.</li> </ul> <h2>Опираемся на сущности</h2> <p>Мы называем сущностью ключевой и сложный объект системы. Ключевой потому что важно для бизнеса. Сложный потому что состоит из множества атомов. Например:</p> <div class="e2-text-picture"> <img src="http://ivanzviahin.by/blog/pictures/essence.jpg" width="1757" height="1228" alt="" /> </div> <p>От маленького превью до бесконечно большой карточки. Маленький организм разрастается, элементы меняют внешний вид, но остаются на прежних местах. Почему мы сосредоточены на сущностях? Целостность узнаётся пользователем, переиспользуется в коде и не требует проверок, тестирования. Единообразие помогает принимать быстрые и не случайные решения в проектировании.</p> <p>Список сущностей: объявление — главная сущность продукта, финансовое предложение, организация. На картинке показана сущность объявления.</p> <h2>Учитываем все разделы</h2> <p>Мы сфокусированы на автомобилях, но не забываем про остальные разделы транспорта. Синтаксис кнопок и подписей должен подходить к любому виду транспорта. Единство и универсальность ради экономии.</p> <div class="e2-text-picture"> <img src="http://ivanzviahin.by/blog/pictures/fin.jpg" width="1757" height="713" alt="" /> <div class="e2-text-caption">Пример на «Финансах»</div> </div> <p>В заголовке мы не используем название раздела, чтобы получилась универсальная конструкция «Кредиты и лизинг на покупку автобуса или автомобиля или ещё какого другого транспорта...». Кастомизация заголовка не бесплатная, а пользы не приносит. Но если тачки отметить важно, делаем кастомизацию для других разделов транспорта.</p> <h2>Фокусируемся на главной платформе</h2> <p>Фокус на платформе зависит от количества аудитории, которая пользуется этой платформой. У нас исторически сложилось так:</p> <ul> <li>Для физлиц — Android. Затем идёт мобильный WEB. В конце iOS, десктопный WEB — на сдачу.</li> <li>Для юрлиц — WEB десктопный. Мобильный WEB — на сдачу. В мобильных приложениях нет интерфейса для юрлиц.</li> </ul> <p>Для экономии сил и времени для второстепенных платформ мы применяем в основном только <a href="https://ivanzviahin.by/blog/all/urovenprorabotki/">промежуточные сценарии — это второй уровень проработки интерфейса.</a></p> <h2>Помним про статусы объявлений</h2> <p>Ох, много доработок было сделано из-за того, что мы забывали про это. Во время проектирования мы сфокусированы на прямом и очевидном пути Зои Ивановны. Но иногда упускаем крайние состояния и вспоминаем о них во время разработки. Точнее разработчики и тестировщики об этом напоминают.</p> <div class="e2-text-picture"> <img src="http://ivanzviahin.by/blog/pictures/status-2.jpg" width="1628" height="942" alt="" /> </div> <p>Добавь в <a href="https://ivanzviahin.by/blog/all/check-list-to-verify-the-interface/">свой чек-лист</a> пункт: «Собрать макет, когда объявление изменит свой статус». Если это уместно в данной задаче.</p> <h2>Не пачкаем фотографии</h2> <p>Чтобы сделать хорошие фотографии, нужно подобрать место и время съёмки, найти сильные ракурсы, сделать десятки кадров, а затем выбрать самые удачные. Мы не рискуем испортить этот труд ради компактности нескольких элементов. Пользовательские фотографии для нас бесконечно важны.</p> <div class="e2-text-picture"> <img src="http://ivanzviahin.by/blog/pictures/photo.jpg" width="1628" height="489" alt="" /> <div class="e2-text-caption">Стало ← было</div> </div> <p>Всё вместе отвлекает от фотографии, а по-отдельности:</p> <ul> <li>элементы управления и навигации не видны на светлом фоне, а попытки вынести их на отдельный визуальный слой вынуждают использовать графические костыли,</li> <li>яркие лейблы отвлекают от акцента — цвет авто и отражение на капоте,</li> <li>каунтер начинает неудачно участвовать в композиции,</li> <li>6% фотографии скрыто.</li> </ul>