Важнейший скилл интерфейсного диза
01. Один из важнейших скиллов дизайнера интерфейсов - способность прорабатывать edge и corner-кейсы интерфейса.
02. Т.е. уметь задавать себе вопросы «а что будет если данных станет дохуя» и не упускать эти вопросы при проектировании.
03. Навык важный, потому что от проработанности edge-состояний интерфейса, зависит насколько он будет гибким и изящным (а еще от рукожопости диза, но об этом потом).
04. Развивать эту штуку, как кажется, не оч сложно. Надо просто с десяток раз показать разработке сырые макеты, и навык сразу же разовьется.
01. Один из важнейших скиллов дизайнера интерфейсов - способность прорабатывать edge и corner-кейсы интерфейса.
02. Т.е. уметь задавать себе вопросы «а что будет если данных станет дохуя» и не упускать эти вопросы при проектировании.
03. Навык важный, потому что от проработанности edge-состояний интерфейса, зависит насколько он будет гибким и изящным (а еще от рукожопости диза, но об этом потом).
04. Развивать эту штуку, как кажется, не оч сложно. Надо просто с десяток раз показать разработке сырые макеты, и навык сразу же разовьется.
👍16❤4😁2
Очень хотелось сегодня что-то опубликовать. Уже неделю пишу один пост, и все никак не закончу, а выложить что-то хотелось.
Хороших выходных ✨
Хороших выходных ✨
❤14
Данные в макетах - 1
01. Интерфейс в ваших макетах должен выглядеть точно так, как его будет видеть юзер. Другими словами, всегда нужно забивать реалистичные, отличные друг от друга данные!
02. Если вы забиваете разные данные - вы проверяете интерфейс на гибкость. Можете увидеть не очевидные edge-кейсы и сразу же их отработать. Например, придумать правила поведения элементов.
03. Разберём пример на картинке ↑↑↑
Дизайнер заранее выяснил, какие данные могут быть в табличке. Примерил их. После «примерки» стало очевидно, что табличка не справляется с отображением данных. В итоге, дизайнер решил, увеличить высоту ячеек, чтобы влезало больше текста.
04. Решение может не самое идеальное, но важно, что дизайнер учел состояние системы, когда данных стало много.
05. Совет: запросите табличку с реалистичными данными перед началом проектирования. Чтобы не выдумывать и знать с чем имеете дело.
01. Интерфейс в ваших макетах должен выглядеть точно так, как его будет видеть юзер. Другими словами, всегда нужно забивать реалистичные, отличные друг от друга данные!
02. Если вы забиваете разные данные - вы проверяете интерфейс на гибкость. Можете увидеть не очевидные edge-кейсы и сразу же их отработать. Например, придумать правила поведения элементов.
03. Разберём пример на картинке ↑↑↑
Дизайнер заранее выяснил, какие данные могут быть в табличке. Примерил их. После «примерки» стало очевидно, что табличка не справляется с отображением данных. В итоге, дизайнер решил, увеличить высоту ячеек, чтобы влезало больше текста.
04. Решение может не самое идеальное, но важно, что дизайнер учел состояние системы, когда данных стало много.
05. Совет: запросите табличку с реалистичными данными перед началом проектирования. Чтобы не выдумывать и знать с чем имеете дело.
❤14
Данные в макетах - 2
01. Допустим дизайнер начал забивать реалистичные данные. Но просто забивать данные это ещё не все. Нужно еще проследить чтобы данные мэтчились друг с другом.
02. Посмотрим на примеры ↑↑↑
С первого взгляда кажется, что нормально. Данные разные, ничего не повторяется. Но если вчитаться, окажется, что суммы/разницы/итоги подсчета не сходятся. Конечно, в рамках стандартных проблем продуктовой команды, это вообще не проблема.
03. Но основная жопо-боль произойдет, когда дизайнер пойдет показывать эти макеты бизнес-заказчикам, а эти ребята триггеряться на любые мелочи. Как только они увидят данные в макетах, обсуждение сразу уйдет в попытки дизайнера объяснить, мол «не обращайте внимание это только макеты».
04. Совет все тот же: заранее спросите какие логические операции происходят между данными; а если не уверены в своих подсчетах - попросите вас перепроверить сведущим людям.
01. Допустим дизайнер начал забивать реалистичные данные. Но просто забивать данные это ещё не все. Нужно еще проследить чтобы данные мэтчились друг с другом.
02. Посмотрим на примеры ↑↑↑
С первого взгляда кажется, что нормально. Данные разные, ничего не повторяется. Но если вчитаться, окажется, что суммы/разницы/итоги подсчета не сходятся. Конечно, в рамках стандартных проблем продуктовой команды, это вообще не проблема.
03. Но основная жопо-боль произойдет, когда дизайнер пойдет показывать эти макеты бизнес-заказчикам, а эти ребята триггеряться на любые мелочи. Как только они увидят данные в макетах, обсуждение сразу уйдет в попытки дизайнера объяснить, мол «не обращайте внимание это только макеты».
04. Совет все тот же: заранее спросите какие логические операции происходят между данными; а если не уверены в своих подсчетах - попросите вас перепроверить сведущим людям.
❤7
Данные в макетах - 4 (десерт)
01. Из примеров выше может показаться. что, весь секрет работы с данными в том, чтобы заранее запросить всю инфу. Но это еще не всё.
02. Мне кажется, самое важное - это не откладывать на потом и забить все данные вначале. С каждой следующий итерацией кол-во макетов растёт, а объем работы увеличивается. Если будете откладывать это на конец, потом придется потратить несколько часов на абсолютно тупую ручную деятельность. Забьете данные вначале — не придется потом по тупому все перебивать.
03. Может показаться, что такой проблемы нет если собрать хороший компонент. Но это ровно до той ситуации, пока вам не придется его пересобирать из-за непредусмотренного типа данных )))
04. Кстати, у меня в команде есть один лайфхак как упростить эту еблю с компонентами. Напишу об это как-нибудь потом…
01. Из примеров выше может показаться. что, весь секрет работы с данными в том, чтобы заранее запросить всю инфу. Но это еще не всё.
02. Мне кажется, самое важное - это не откладывать на потом и забить все данные вначале. С каждой следующий итерацией кол-во макетов растёт, а объем работы увеличивается. Если будете откладывать это на конец, потом придется потратить несколько часов на абсолютно тупую ручную деятельность. Забьете данные вначале — не придется потом по тупому все перебивать.
03. Может показаться, что такой проблемы нет если собрать хороший компонент. Но это ровно до той ситуации, пока вам не придется его пересобирать из-за непредусмотренного типа данных )))
04. Кстати, у меня в команде есть один лайфхак как упростить эту еблю с компонентами. Напишу об это как-нибудь потом…
❤12
Картинкохранилище
Я раньше собирал красивые картинки в Скрап. Это вроде как был чей-то студенческий проект из школы Горбунова. Так вот, Скрапп был крут тем, что под него настраивался шорткат на маке. Я просто тыкал на 3 кнопочки, делал скриншот и ВСЁ. Самое кайфовое - он сам сохранял соурс где сделан скрин. Т.е. никаких копирований и переносов url.
С переходом на M1 Скрап перестал работать на компе, а сейчас ещё и траблы с входом начались. Крч отстой.
В итоге, с 3-й попытки, я начал на постоянке пользоваться Ареной. Она не такая удобная как скрапп, но там много прикольных каналов. Сейчас я просто ввел себе в привычку по выходным полчаса-часик серфить интернет и сохранять в Арену.
Я это все к чему? Если вы сидите в Арене - кидайте в комменты свои и не свои интересные каналы. Подписывайтесь на мои каналы, сохраняйте картинки.
Я раньше собирал красивые картинки в Скрап. Это вроде как был чей-то студенческий проект из школы Горбунова. Так вот, Скрапп был крут тем, что под него настраивался шорткат на маке. Я просто тыкал на 3 кнопочки, делал скриншот и ВСЁ. Самое кайфовое - он сам сохранял соурс где сделан скрин. Т.е. никаких копирований и переносов url.
С переходом на M1 Скрап перестал работать на компе, а сейчас ещё и траблы с входом начались. Крч отстой.
В итоге, с 3-й попытки, я начал на постоянке пользоваться Ареной. Она не такая удобная как скрапп, но там много прикольных каналов. Сейчас я просто ввел себе в привычку по выходным полчаса-часик серфить интернет и сохранять в Арену.
Я это все к чему? Если вы сидите в Арене - кидайте в комменты свои и не свои интересные каналы. Подписывайтесь на мои каналы, сохраняйте картинки.
❤10
Чизайн
Картинкохранилище Я раньше собирал красивые картинки в Скрап. Это вроде как был чей-то студенческий проект из школы Горбунова. Так вот, Скрапп был крут тем, что под него настраивался шорткат на маке. Я просто тыкал на 3 кнопочки, делал скриншот и ВСЁ. Самое…
В комментариях все хвалят Eagle. Хочу услышать мнение оппозиции. Кому Eagle не понравился? )))
«Подкладывание» действий
01. Постоянно сталкиваюсь со штукой, которую называю «подкладыванием действия». Обычно все они связаны с введением чего-то в инпуте. Например, введением названия или поискового запроса. Это работает примерно везде: в ноушене, в спотифае, в фигме…
02. Механика оч простая. Юзер куда-то кликает, а следующим действием система сама фокусит инпут для ввода. Т.е. юзеру не нужно тащить курсор и самому кликать на инпут.
03. С точки зрения проектирования, всё просто. Если вы четко знаете юзер флоу, и знаете, что после клика на кнопку_X обычно происходит действие_Y, то почему бы не избавить юзера от лишних кликов, и подсветить инпут.
04. Польза, тоже очевидна. Юзер быстрее делает свои дела и не переключает внимание на курсор.
05. В теории, есть обратная сторона этой радости. Мол, когда вероятных «следующих действий» слишком много, а мы подсвечиваем какое-то одно. Я думаю это что-то из «темных паттернов» и в здравом уме никто не будет так делать. Если я не прав – скидывайте примеры в комменты )))
01. Постоянно сталкиваюсь со штукой, которую называю «подкладыванием действия». Обычно все они связаны с введением чего-то в инпуте. Например, введением названия или поискового запроса. Это работает примерно везде: в ноушене, в спотифае, в фигме…
02. Механика оч простая. Юзер куда-то кликает, а следующим действием система сама фокусит инпут для ввода. Т.е. юзеру не нужно тащить курсор и самому кликать на инпут.
03. С точки зрения проектирования, всё просто. Если вы четко знаете юзер флоу, и знаете, что после клика на кнопку_X обычно происходит действие_Y, то почему бы не избавить юзера от лишних кликов, и подсветить инпут.
04. Польза, тоже очевидна. Юзер быстрее делает свои дела и не переключает внимание на курсор.
05. В теории, есть обратная сторона этой радости. Мол, когда вероятных «следующих действий» слишком много, а мы подсвечиваем какое-то одно. Я думаю это что-то из «темных паттернов» и в здравом уме никто не будет так делать. Если я не прав – скидывайте примеры в комменты )))
👍7
Привет! Знаю, я давно не писал сюда. Но жизнь в эмиграции это то ещё приключение. Две недели назад я переехал в Сербию 🇷🇸, надеюсь на долго. Так что если кто-то живет в Белграде - пишите, поболтаем о жизни в Сербии.
❤11
Навигация в аэропорту Белграда
01. Что с ней не так? Да то что слова на сербском и на английском выглядят идентично. Конечно, если пассажиру будет очень нужно, он остановится и разберется. Но это супер плохой сценарий. Навигация в аэропорту должна быть такой, чтобы прочесть можно было без остановки, пока ты пассажир идёт получать багаж или спешит на рейс (pic. 1).
02. Как это решить? Универсальным дизайнерским инструментом - увеличением контраста. Самое базовое, что можно быстро исправить - изменить цвет и яркость английского текста (pic. 2).
03. А вообще, по-хорошему, стоит заменить и шрифты и иконку багажа, а то она на мешок похожа. Я выбрал не лучшие шрифты, но замысел понятен. Иконку не трогал (pic. 3).
01. Что с ней не так? Да то что слова на сербском и на английском выглядят идентично. Конечно, если пассажиру будет очень нужно, он остановится и разберется. Но это супер плохой сценарий. Навигация в аэропорту должна быть такой, чтобы прочесть можно было без остановки, пока ты пассажир идёт получать багаж или спешит на рейс (pic. 1).
02. Как это решить? Универсальным дизайнерским инструментом - увеличением контраста. Самое базовое, что можно быстро исправить - изменить цвет и яркость английского текста (pic. 2).
03. А вообще, по-хорошему, стоит заменить и шрифты и иконку багажа, а то она на мешок похожа. Я выбрал не лучшие шрифты, но замысел понятен. Иконку не трогал (pic. 3).
👍10
К предыдущему посту ↑↑↑
01. История с навигацией напомнила мне старый пост про иконки. Поучительная часть всё та же — чтобы проверить как работает ваша навигация - переведите её на два не родных вам языка.
02. Разберём на примере (см. на картинки ↑↑↑). Как видно, родной язык мы считываем даже когда контрасты одинаковые (рис. 1), разница кириллицы и латиницы, конечно, этому помогает. Но стоит поменять знакомый нам, русский язык, на что-то другое, как сразу всё путается (рис. 2) латинское написание индонезийского тоже этому помогает. И вот представьте себе туриста из Китая или Японии, который привык к иероглифам, а тут «эти ваши» латинские и кириллические буквы. С помощью контрастов (рис. 3,4) мы помогаем разделить 2 «похожих» языка и задаём систему; т.е. условный турист запомнит: «сереньким и снизу это англ., туда и буду смотреть».
03. Это всё довольно грубый пример. Но, я хочу обратить внимание на когнитивную ловушку, в которой наш мозг быстрее выделяет из инфо-шума знакомые и понятные вещи. Если вы ловите себя на том, что «глаз замылился» или не понимаете «работает ли дизайн» - имеет смысл позвать кого-то со стороны или поменять язык навигации / интерфейса / etc.
01. История с навигацией напомнила мне старый пост про иконки. Поучительная часть всё та же — чтобы проверить как работает ваша навигация - переведите её на два не родных вам языка.
02. Разберём на примере (см. на картинки ↑↑↑). Как видно, родной язык мы считываем даже когда контрасты одинаковые (рис. 1), разница кириллицы и латиницы, конечно, этому помогает. Но стоит поменять знакомый нам, русский язык, на что-то другое, как сразу всё путается (рис. 2) латинское написание индонезийского тоже этому помогает. И вот представьте себе туриста из Китая или Японии, который привык к иероглифам, а тут «эти ваши» латинские и кириллические буквы. С помощью контрастов (рис. 3,4) мы помогаем разделить 2 «похожих» языка и задаём систему; т.е. условный турист запомнит: «сереньким и снизу это англ., туда и буду смотреть».
03. Это всё довольно грубый пример. Но, я хочу обратить внимание на когнитивную ловушку, в которой наш мозг быстрее выделяет из инфо-шума знакомые и понятные вещи. Если вы ловите себя на том, что «глаз замылился» или не понимаете «работает ли дизайн» - имеет смысл позвать кого-то со стороны или поменять язык навигации / интерфейса / etc.
👍12