Наполняйте пустые экраны, чтобы люди с них сразу не уходили, повышался отклик, сервис выглядил полнее.

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

Нет заметок? Создайте заметку с полезными советами по фишкам приложения!
В поиске ничего не нашлось? Просто посмотрите что у нас есть!
404? Тут ничего нет, но у нас есть новости и акции. Смотрите!

Опубликовал на Медиуме свою историю про жесткую критику. Всё то же самое, что и в канале, но с кайфовой обложкой и чуть сжатее.
https://designpub.ru/критикуешь-не-жести-e6dafbdb27b2

Как рассчитать время прочтения статьи

Время прочтения — крутая фишка, которая помогает клиентам сервиса оценить заранее есть ли у них время на прочтение материала или нет. Если вы хотите сделать такое у себя и вам надо передать решение разработчику, ловите готовую инструкцию.

Время на чтение статьи рассчитываем так:
Средняя скорость чтения взрослого человека — 1500 знаков в минуту. Если взять количество знаков в статье и поделить на 1500, получим количество минут. Каждая картинка прибавляет к общему времени +0,2 минуты. Округляем до большего целого числа уже после 0,3 включительно. Запас взят, чтобы не сильно обманывать ожидания людей, что читают медленнее среднего.

Например у нас есть статья на 4315 знаков с двумя картинками.

4315/1500=2,87
2,87+0,2×2 картинки= 3,27

Округляем до 3 минут чтения.

Если бы знаков было 4 350, то мы бы получили 4 минуты чтения, округлив 3,3 до 4.

Как медленный интерфейс влияет на поведение пользователя
Относительно очевидное, но интересное исследование.

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

https://habr.com/en/post/223705/

Адаптивные иконки от гугла

Я тут проворонил, что на гугл теперь иконки адаптивные и мой шаблон для них не работает. Поправлю на днях. Если вы тоже проворонили — потратьте полчаса и адаптируйте иконку для вашего Андроид-приложения.

Соль
Теперь разрабам нужно отдавать отдельно фон и главный элемент на иконке. В формате noscript. Размер 108×108, но вписана иконка дожна быть в 72×72. Если так не делать, то ваша восхитительная квадратная иконка на андроид будет подпирать углами круг.

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

В статье показано какие крутые теперь иконки у гугла, есть исходник для Скетча, Фигмы, Иллюстратора и даже Аффинити. Кроме того, есть приложение, чтобы поиграться с иконками.
https://medium.com/google-design/designing-adaptive-icons-515af294c783

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

О как круто показана плотность записей на квест. Сразу видно когда больше шансов попасть на нужное время.

Да, тут нет детализации когда именно забито время, но примерно оценить свои шансы это помогает.

Такой календарь был бы полезен при записи к конкретному стоматологу или СТО.

— Давай это сделаем как у Эппл
— А не пойти бы тебе…

Когда я только пришел в дизайн мобилок, я часто слышал такой ответ. Я сильно ориентировался на стандартные приложения Эппл. Думал, что раз они сделали такой элемент, значит разработчикам под iOS тоже будет раз плюнуть. А вот хер там плавал!

Сделать поиск, как в календаре, чтобы сверху появлялся — это нестандартно. Низкий селект — тоже. Карточки, как в эпп-сторе — Пфффф. Оказалось Эппл даёт разработчикам весьма скудный набор стандартных компоненов, которые почти никак нельзя изменять. Любое отличие дизайна от стандарта означало, что разработчик будет писать компонент с нуля.

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

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

Опс, картинка отлепилась

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

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

https://designpub.ru/как-рассчитать-время-прочтения-статьи-3e1819e36769

Кастом или натив

Когда дизайнер придумывает, как будет работать его приложение, у него есть выбор: сделать элемент нативным (стандартным) или кастомным. Например, он может взять сегмент селектор как у Эппл, а может придумать свой, который будет подходить по стилю лучше. Что это значит для продукта:

Нативный:
1. Будет работать быстро, сразу, из коробки. Если он глючит, то глючит сразу по всей системе.
2. Работает только так, как его придумали разработчики Эппл или Гугл.
3. Добавить его очень быстро.
4. Ему нельзя добавить поведение или сильно изменить внешний вид. В iOS у него вообще почти никак не изменить внешний вид.

Кастомный, нестандартный:
1. Будет работать как напишут. Могут быть баги в зависимости от версии оси, ориентации телефона, фазы луны, чего угодно
2. Работает так, как его придумал создатель. Можно найти элемент в интернете и разбираться в том, как его кто-то создал, а можно его написать самому.
3. Если писать самому — это долго. А может и нет, спросите у вашего разработчика. Одно ясно — нужно придумать все состояния: активный, заблокированный, с длинными надписями, короткими, иконками, заливкой, выбранный, не выбранный, маленький, большой, на нажатие, при загрузке.
4. Зато полный контроль над поведением и внешними видом, максимальная творческая свобода.

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

И почаще общайтесь с разработчиками.

Обычно, снежок на сайте под Новый год — пошлый ход, но у 2ГИС вышло невероятно уютно. А ещё можно настроить силу снегопада.

Если какое-то решение кажется пошлым и заезженным, возможно, оно просто недостаточно хорошо сделано =)

https://2gis.ru/

Кинопоиск подвёл свои итоги года. Зацените как минимум ради хайпового дизайна — на каждый элемент можно навести, он подвигается, перельётся. Любое действие приведёт к шутке или вспомнит мем уходящего года.
https://www.kinopoisk.ru/special/itogi2019/

​​Не, ну не прелесть ли так креативить?)

Любой процесс сложнее, чем выглядит сначала

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

«Пфф, изи» — думает дизайнер и рисует скрепочку с подписью «Добавить фотографию».

А потом всплывают проблемы:
1. А что если нужно загрузить несколько фотографий?
2. А сколько максимум фотографий можно загрузить?
3. А если фотография весит гигабайт?
4. А какие форматы можно грузить?
5. А если пользователь на телефоне не дал разрешение на загрузку фотографий, то что?
6. Фотографии долго грузятся на сервер, а загрузку мы не рисовали.
7. Что делаеть, если четыре фотографии загрузились, а пятая нет?

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

Для примера, посмотрите на схему регистрации от Павла Шерера. Он расписал почему такая, вроде бы простая вещь, как регистрация — сложный процесс и показал всю логику в схемах. Прелесть как полезно!
https://sherer.pro/blog/registracija-i-login-na-steroidah/

Ищу дизайнера интерфейсов к нам в команду на проект для S7

Предложение актуально для Новосибирска и всех желающих туда переехать.

В наш отдел дизайна True Engineering нужен настоящий дизайнер интерфейсов. Который сможет задать правильные вопросы менеджеру, оценить время и сделать задачу точно в срок. Сможет спроектировать решение и защитить его перед коллегами и бизнесом. Устойчив к критике и не уйдёт в обиду, если его решение не примут. Вместо этого он разберется что не так и предложит лучше решение. Посоветуется с программистами во время отрисовки дизайна и проследит, что решение реализуют так, как задумывалось.

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

Если интересно — пишите @e_vinichenko
Если вы не уверены, что подходите, но хотите попробовать — пишите тоже.

Полные условия вакансии https://novosibirsk.hh.ru/vacancy/34737204
О нашей компании https://trueengineering.ru/

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