Удержание контекста юзера
01. Кажется, все сходятся в мысли, что один из ключей к созданию хорошего дизайна / интерфейса / продукта / etc., в том, чтобы точно понимать контекст и цели пользователя. Штука бесспорная, полностью с этим согласен!
02. Бывают такие ситуации, когда дизайнер либо не достаточно вникал в контекст, либо не может удерживать его в своей голове. Часто в такой ситуации оказываются начинающие дизайнеры. Они, как правило, фокусируются на вещах вроде: «вот бы хорошо собрать компонент» или «сейчас придумаю фичу, которую еще никто не придумывал». Заканчивается это всё не очень хорошо.
03. Чтобы фиксить такое в своей команде, я периодически делаю следующую штуку. Рядом с макетом кладу пикчу с чувачком (картинка вверху поста), и мы с дизайнером выписываем все вопросы, которые задает себе пользователь при попадании на этот экран. Далее я оставляю дизайнера наедине с этими вопросами и ухожу.
04. Вопросы и контекст, мы либо выяснили до этого, либо формулируем из собственного смежного опыта.
05. Фактически, это пресловутое создание персон, но не такое напыщенное. Ну знаете, если вы берётесь описывать «персону пользователя», то это сразу приобретает налет «большого исследования» и затягивается на миллиард лет. А нарисовать вопросы рядом с пикчей это 10 минут совместной работы.
01. Кажется, все сходятся в мысли, что один из ключей к созданию хорошего дизайна / интерфейса / продукта / etc., в том, чтобы точно понимать контекст и цели пользователя. Штука бесспорная, полностью с этим согласен!
02. Бывают такие ситуации, когда дизайнер либо не достаточно вникал в контекст, либо не может удерживать его в своей голове. Часто в такой ситуации оказываются начинающие дизайнеры. Они, как правило, фокусируются на вещах вроде: «вот бы хорошо собрать компонент» или «сейчас придумаю фичу, которую еще никто не придумывал». Заканчивается это всё не очень хорошо.
03. Чтобы фиксить такое в своей команде, я периодически делаю следующую штуку. Рядом с макетом кладу пикчу с чувачком (картинка вверху поста), и мы с дизайнером выписываем все вопросы, которые задает себе пользователь при попадании на этот экран. Далее я оставляю дизайнера наедине с этими вопросами и ухожу.
04. Вопросы и контекст, мы либо выяснили до этого, либо формулируем из собственного смежного опыта.
05. Фактически, это пресловутое создание персон, но не такое напыщенное. Ну знаете, если вы берётесь описывать «персону пользователя», то это сразу приобретает налет «большого исследования» и затягивается на миллиард лет. А нарисовать вопросы рядом с пикчей это 10 минут совместной работы.
🔥22❤5👍3
Важнейший скилл интерфейсного диза
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