Данные в макетах - 2

01. Допустим дизайнер начал забивать реалистичные данные. Но просто забивать данные это ещё не все. Нужно еще проследить чтобы данные мэтчились друг с другом. 

02. Посмотрим на примеры ↑↑↑
С первого взгляда кажется, что нормально. Данные разные, ничего не повторяется. Но если вчитаться, окажется, что суммы/разницы/итоги подсчета не сходятся. Конечно, в рамках стандартных проблем продуктовой команды, это вообще не проблема.

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

04. Совет все тот же: заранее спросите какие логические операции происходят между данными; а если не уверены в своих подсчетах - попросите вас перепроверить сведущим людям.

Картинкохранилище

Я раньше собирал красивые картинки в Скрап. Это вроде как был чей-то студенческий проект из школы Горбунова. Так вот, Скрапп был крут тем, что под него настраивался шорткат на маке. Я просто тыкал на 3 кнопочки, делал скриншот и ВСЁ. Самое кайфовое - он сам сохранял соурс где сделан скрин. Т.е. никаких копирований и переносов url.

С переходом на M1 Скрап перестал работать на компе, а сейчас ещё и траблы с входом начались. Крч отстой.

В итоге, с 3-й попытки, я начал на постоянке пользоваться Ареной. Она не такая удобная как скрапп, но там много прикольных каналов. Сейчас я просто ввел себе в привычку по выходным полчаса-часик серфить интернет и сохранять в Арену.

Я это все к чему? Если вы сидите в Арене - кидайте в комменты свои и не свои интересные каналы. Подписывайтесь на мои каналы, сохраняйте картинки.

«Подкладывание» действий

01. Постоянно сталкиваюсь со штукой, которую называю «подкладыванием действия». Обычно все они связаны с введением чего-то в инпуте. Например, введением названия или поискового запроса. Это работает примерно везде: в ноушене, в спотифае, в фигме…

02. Механика оч простая. Юзер куда-то кликает, а следующим действием система сама фокусит инпут для ввода. Т.е. юзеру не нужно тащить курсор и самому кликать на инпут.

03. С точки зрения проектирования, всё просто. Если вы четко знаете юзер флоу, и знаете, что после клика на кнопку_X обычно происходит действие_Y, то почему бы не избавить юзера от лишних кликов, и подсветить инпут.

04. Польза, тоже очевидна. Юзер быстрее делает свои дела и не переключает внимание на курсор.

05. В теории, есть обратная сторона этой радости. Мол, когда вероятных «следующих действий» слишком много, а мы подсвечиваем какое-то одно. Я думаю это что-то из «темных паттернов» и в здравом уме никто не будет так делать. Если я не прав – скидывайте примеры в комменты )))

Навигация в аэропорту Белграда

01. Что с ней не так? Да то что слова на сербском и на английском выглядят идентично. Конечно, если пассажиру будет очень нужно, он остановится и разберется. Но это супер плохой сценарий. Навигация в аэропорту должна быть такой, чтобы прочесть можно было без остановки, пока ты пассажир идёт получать багаж или спешит на рейс (pic. 1).

02. Как это решить? Универсальным дизайнерским инструментом - увеличением контраста. Самое базовое, что можно быстро исправить - изменить цвет и яркость английского текста (pic. 2).

03. А вообще, по-хорошему, стоит заменить и шрифты и иконку багажа, а то она на мешок похожа. Я выбрал не лучшие шрифты, но замысел понятен. Иконку не трогал (pic. 3).

К предыдущему посту ↑↑↑

01. История с навигацией напомнила мне старый пост про иконки. Поучительная часть всё та же — чтобы проверить как работает ваша навигация - переведите её на два не родных вам языка.

02. Разберём на примере (см. на картинки ↑↑↑). Как видно, родной язык мы считываем даже когда контрасты одинаковые (рис. 1), разница кириллицы и латиницы, конечно, этому помогает. Но стоит поменять знакомый нам, русский язык, на что-то другое, как сразу всё путается (рис. 2) латинское написание индонезийского тоже этому помогает. И вот представьте себе туриста из Китая или Японии, который привык к иероглифам, а тут «эти ваши» латинские и кириллические буквы. С помощью контрастов (рис. 3,4) мы помогаем разделить 2 «похожих» языка и задаём систему; т.е. условный турист запомнит: «сереньким и снизу это англ., туда и буду смотреть».

03. Это всё довольно грубый пример. Но, я хочу обратить внимание на когнитивную ловушку, в которой наш мозг быстрее выделяет из инфо-шума знакомые и понятные вещи. Если вы ловите себя на том, что «глаз замылился» или не понимаете «работает ли дизайн» - имеет смысл позвать кого-то со стороны или поменять язык навигации / интерфейса / etc.