Юрий Ветров: тенденции UX/UI дизайна и впечатляющие решения

В Интервью Теплице Юрий Ветров рассказал о тенденциях UX/UI дизайна и посоветовал компании, на которые стоит равняться при разработке it-продукта. На фото Юрий Ветров. Снимок предоставил эксперт.
В Интервью Теплице Юрий Ветров рассказал о тенденциях UX/UI дизайна и посоветовал компании, на которые стоит равняться при разработке it-продукта. На фото Юрий Ветров. Снимок предоставил эксперт.

Все боль­ший инте­рес наби­ра­ет алго­рит­ми­че­ский дизайн, авто­мо­биль­ные и голо­со­вые интер­фей­сы, с каж­дым годом уве­ли­чи­ва­ет­ся спрос на вир­ту­аль­ную и допол­нен­ную реаль­ность. Такие тен­ден­ции в UX/UI дизайне назвал руко­во­ди­тель пор­таль­ной дизайн-коман­ды в Mail.Ru Group Юрий Вет­ров.

В интер­вью замре­дак­то­ру Теп­ли­цы Ната­лье Бара­но­вой экс­перт рас­ска­зал по каким кри­те­ри­ям сей­час раз­ра­ба­ты­ва­ют сай­ты и чем при­ме­ча­те­лен рос­сий­ский опыт созда­ния дизайн про­дук­тов. Так­же Юрий Вет­ров посо­ве­то­вал ком­па­нии, на кото­рые сто­ит рав­нять­ся, и назвал любо­пыт­ные обра­зо­ва­тель­ные кур­сы.

— Вы ведете дайджест продуктового дизайна, каждый месяц выбираете актуальные новости и делайте подборки по теме интерфейсов. Как по-вашему изменился UX/UI дизайн за пару лет? Какие появились тенденции?

— Актив­ный инте­рес в про­фес­си­о­наль­ном сооб­ще­стве вызы­ва­ют несколь­ко тен­ден­ций. Во-пер­вых, это алго­рит­ми­че­ский дизайн. Как исполь­зо­вать алго­рит­мы для постро­е­ния интер­фей­са, под­го­тов­ки вспо­мо­га­тель­ной гра­фи­ки и кон­тен­та, а так­же пер­со­на­ли­за­ции. Во-вто­рых, авто­мо­биль­ные интер­фей­сы. Как сде­лать их совре­мен­ны­ми, тем более, что их спо­соб вла­де­ния и исполь­зо­ва­ния на поро­ге мас­штаб­ных изме­не­ний.

В-тре­тьих, дизайн-систе­мы. Как уни­фи­ци­ро­вать дизайн линей­ки про­дук­тов для того, что­бы повы­сить их каче­ство и уско­рить выход на рынок. В-чет­вер­тых, это голо­со­вые интер­фей­сы. И, в-пятых, смешанная/дополненная/виртуальная реаль­ность. Непо­нят­но, выжи­вут ли они на потре­би­тель­ском рын­ке, но в про­фес­си­о­наль­ной сре­де потен­ци­аль­ный спрос огром­ный.

Еще одна инте­рес­ная тен­ден­ция послед­них лет — дизайн-коман­ды про­дук­то­вых ком­па­ний мас­со­во заве­ли бло­ги и они ста­ли одним из самых инте­рес­ных источ­ни­ков инфор­ма­ции.

В то же вре­мя очень быст­ро сошел хайп про умные часы, носи­мые устрой­ства (про­из­во­ди­те­ли схло­пы­ва­ют­ся один за одним) и боты в мес­сен­дже­рах, кото­рые вос­тре­бо­ва­ны толь­ко в кор­по­ра­тив­ной сре­де.

— Отличается ли российский опыт от мирового? Какие особенности у нас?

— В Рос­сии доста­точ­но мощ­ный интер­нет-рынок. Мало где, кро­ме США и Китая, есть ком­па­нии уров­ня Mail.Ru Group и Яндек­са, кото­рые могут соста­вить кон­ку­рен­цию Facebook и Google. А там, где есть инте­рес­ные реаль­ные зада­чи, есть и рост спе­ци­а­ли­стов, в том чис­ле по дизай­ну циф­ро­вых про­дук­тов. При­чем рост осо­знан­но­сти того, что хоро­ший дизайн важен для про­дук­тов, начал­ся лет шесть назад — плюс-минус одно­вре­мен­но со всем осталь­ным миром.

Конеч­но, в Крем­ни­е­вой долине в разы боль­ше интер­нет-ком­па­ний и денег, поэто­му они могут поз­во­лить себе решать более нише­вые про­бле­мы, а зна­чит рас­ти быст­рее. Но по срав­не­нию с Евро­пой мы бод­рее.

Еще по теме: 6 попу­ляр­ных UI-фрейм­вор­ков, с помо­щью кото­рых мож­но сде­лать удоб­ный и отзыв­чи­вый сайт

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

— Какие версии сайтов сейчас принято разрабатывать? Какой их главный критерий?

— Уни­вер­саль­ность — важ­ный кри­те­рий. Она может касать­ся раз­но­го. Во-пер­вых, под­держ­ки раз­ных плат­форм и устройств. С этим все более-менее разо­бра­лись. Во-вто­рых, уче­та поль­зо­ва­те­лей с физи­че­ски­ми и тех­но­ло­ги­че­ски­ми огра­ни­че­ни­я­ми. Тут часто не хва­та­ет пони­ма­ния или ресур­сов. Дру­гое дело, что нуж­но пони­мать, насколь­ко вели­ка доля этих ситу­а­ций в вашем про­дук­те.

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

Под­держ­ка тре­бо­ва­ний доступ­но­сти (accessibility) на вид все­гда будет иметь неболь­шую ауди­то­рию, но для круп­ных ком­па­ний даже неболь­шой про­цент будет зна­чи­тель­ным, если смот­реть в абсо­лют­ных чис­лах. Да и для сред­них и неболь­ших эти­че­ская сто­ро­на со вре­ме­нем будет ста­но­вит­ся важ­нее.

— Какие продуктовые решения вас удивили за последнее время?

— При­ве­ду несколь­ко при­ме­ров алго­рит­ми­че­ско­го дизай­на на прак­ти­ке, это то что сей­час впе­чат­ля­ет боль­ше все­го. Скрипт Netflix — выре­за­ет пер­со­на­жей для посте­ров, накла­ды­ва­ет тек­сты и дела­ет авто­ма­ти­че­ские экс­пе­ри­мен­ты со всем этим. Насто­я­щая магия!

Пример как работает скрипт Netflix. Изображение: скриншот с сайта medium.com
При­мер как рабо­та­ет скрипт Netflix. Изоб­ра­же­ние: скрин­шот с сай­та medium.com

Инте­рес­ней­ший экс­пе­ри­мен­таль­ный инстру­мент от уни­вер­си­те­та Стэн­фор­да и Adobe, кото­рый зна­чи­тель­но упро­ща­ет рабо­ту кино-мон­та­же­ра. Он сам пред­ла­га­ет гото­вый кусок филь­ма на осно­ве отсня­тых сцен.

Wolff Olins пред­ста­ви­ли пол­но­стью живую айден­ти­ку бра­зиль­ско­го сото­во­го опе­ра­то­ра Oi, кото­рая реа­ги­ру­ет на звук. Такое точ­но невоз­мож­но сде­лать без твор­че­ско­го парт­нёр­ства с алго­рит­ма­ми.

Это новые про­фес­си­о­наль­ные гори­зон­ты, в кото­рых инстру­мен­ты поз­во­ля­ют тво­рить насто­я­щие чуде­са.

— На какие компании и организации стоит равняться, делая it-продукты?

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

  • Microsoft. Несмот­ря на высо­ко­мер­ное отно­ше­ние мно­гих дизай­не­ров к ком­па­нии, они при­ло­жи­ли руку к огром­ней­ше­му коли­че­ству важ­ней­ших идей и кон­цеп­ций для интер­фей­сов и ком­пью­те­ров в целом. В 2010 году их metro-дизайн опре­де­лил совре­мен­ный под­ход к визу­аль­но­му дизай­ну циф­ро­вых про­дук­тов, а сей­час они реша­ют новую амби­ци­оз­ную зада­чу — свя­зать еди­ной дизайн-систе­мой Fluent экран­ные интер­фей­сы и сме­шан­ную реаль­ность.
  • Google. Material Design пока­зал, как мож­но уни­фи­ци­ро­вать про­дук­ты на самых раз­ных плат­фор­мах, а инве­сти­ци­он­ное кры­ло Google Ventures дела­ет важ­ную рабо­ту, пере­упа­ко­вы­вая дизайн-про­цес­сы с теми же дизайн-сприн­та­ми.
  • IBM. Ком­па­нии боль­ше ста лет и она посто­ян­но умуд­ря­ет­ся пере­и­зоб­ре­тать себя. Сей­час они реша­ют сверх­ин­те­рес­ную зада­чу — мас­шта­би­ро­ва­ние дизай­на в орга­ни­за­ции на 350 000 сотруд­ни­ков. У них шикар­ный визу­аль­ный язык, адап­ти­ро­ван­ные мето­до­ло­гии про­ек­ти­ро­ва­ния и уйма дру­гих нара­бо­ток.
Визуальный язык IBM. Изображение: скриншот с сайта: www.ibm.com
Визу­аль­ный язык IBM. Изоб­ра­же­ние: скрин­шот с сай­та: www.ibm.com
  • Mail.Ru Group. Наша ком­па­ния пере­и­зоб­ре­та­ет себя и актив­но меня­ет­ся в плане дизай­на. Хотя все еще есть за что погно­бить, слож­но не заме­тить каче­ствен­ный рывок за послед­ние лет пять — пере­за­пу­ще­но огром­ное коли­че­ство про­дук­тов, на рынок вышло мно­го новых сер­ви­сов, запу­ще­на дизайн-систе­ма Paradigm, наши кон­фе­рен­ции и кон­кур­сы помо­га­ют раз­ви­вать про­фес­си­о­наль­ное сооб­ще­ство.
  • Яндекс. Ком­па­ния здо­ро­во обно­ви­ла свои про­дук­ты несколь­ко лет назад под еди­ным визу­аль­ным язы­ком, раз­ви­ва­ет шко­лу дизай­на, под­дер­жи­ва­ет шикар­ней­ший жур­нал «Шрифт» и дела­ет мно­го дру­гих ини­ци­а­тив для сооб­ще­ства.
  • Shopify. Одна из самых сба­лан­си­ро­ван­ных дизайн-команд с луч­шим бло­гом. Они запу­сти­ли одну из луч­ших на рын­ке дизайн-систем Polaris, исполь­зу­ют впе­чат­ля­ю­щей систем­но­сти под­ход к иллю­стра­ци­ям, очень гра­мот­но инте­гри­ру­ют поль­зо­ва­тель­ские иссле­до­ва­ния в про­дук­то­вую рабо­ту.
  • ustwo. Одна из самых ярких дизайн-сту­дий, кото­рая поми­мо сво­ей хито­вой игры Monument Valley зани­ма­ет­ся авто­мо­биль­ны­ми интер­фей­са­ми и вир­ту­аль­ной реаль­но­стью. Помог­ла Google с дизай­ном Android Wear и раз­ви­ти­ем Cardboard. Их под­ход к рабо­те здо­ро­во вдох­нов­ля­ет.
  • Ex-Adaptive Path / Capital One. Покуп­ка этой извест­ной UX-ком­па­нии круп­ным бан­ком ста­ла одной из пер­вых — за послед­ние годы их нако­пи­лись десят­ки. Поми­мо инте­рес­ных про­ек­тов, они орга­ни­зо­вы­ва­ли одни из луч­ших кон­фе­рен­ций: MXConference по дизайн-менедж­мен­ту, UXWeek, Service Design Week, мастер-класс UX Intensive. Фор­мат рабо­ты внут­ри кор­по­ра­ции поме­нял­ся, но они всё так­же рас­ска­зы­ва­ют инте­рес­ней­шие вещи и про­дол­жа­ют делать кон­фе­рен­ции.

— Сейчас появилось много курсов обучения на UX-дизайнера, какие из них вы бы посоветовали?

— Слож­но гово­рить обо всем рын­ке в целом, пото­му что я, ско­рее, участ­во­вал в чужих про­грам­мах, а не делал свои. Поэто­му про­ще рас­ска­зать о тех ини­ци­а­ти­вах, где участ­вую сам:

  • Coursera. Вес­ной 2017 года мы запу­сти­ли онлайн-курс по дизай­ну интер­фей­сов, кото­рый про­во­дит сту­ден­тов от тео­ре­ти­че­ских основ к реаль­ным навы­кам через две учеб­ные зада­чи. Бла­го­да­ря силь­ной мето­ди­че­ской рабо­те полу­чи­лась очень хоро­шая струк­ту­ра из корот­ких уро­ков, кото­рые лег­ко усва­и­ва­ют­ся или про­ма­ты­ва­ют­ся, если нуж­но. Для начи­на­ю­щих это отлич­ный спо­соб при­об­ре­сти навы­ки, а для более опыт­ных — закрыть про­бе­лы в зна­ни­ях. На сере­ди­ну лета через него про­шло 8 тысяч чело­век.
  • Интен­сив в Бри­тан­ской выс­шей шко­ле дизай­на. Мы собра­ли целост­ную про­грам­му на базе мето­до­ло­гии дизайн-сприн­тов. В тече­ние 8 дней сту­ден­ты реша­ют учеб­ную зада­чу, посте­пен­но при­бли­жа­ясь от пони­ма­ния про­бле­мы к финаль­но­му реше­нию. Под­ход инте­ре­сен сво­ей вовле­чен­но­стью — плот­ная команд­ная рабо­та помо­га­ет усво­ить тео­рию на деле.
  • Future London Academy. В тече­ние неде­ли в Лон­доне мы ходим в гости к веду­щим бри­тан­ским дизайн-сту­ди­ям и про­дук­то­вым ком­па­ни­ям: напри­мер, Ustwo, Unit9, Facebook, Twitter, Microsoft, Fjord, Moving Brands, BBC, IDEO. Они в сво­ей есте­ствен­ной рабо­чей сре­де рас­ска­зы­ва­ют о под­хо­дах к рабо­те, све­жих про­ек­тах и новых направ­ле­ни­ях. Для меня это один из луч­ших спо­со­бов рас­ши­ре­ния про­фес­си­о­наль­ных гори­зон­тов. Когда вжи­вую видишь, как рабо­та­ют одни из луч­ших в мире дизайн-команд — это здо­ро­во моти­ви­ру­ет дви­гать­ся впе­ред. Даже если, каза­лось бы, и так при­лич­но зна­ешь. Это курс ско­рее для опыт­ных дизай­не­ров и дизайн-мене­дже­ров.

— Как бы вы сформулировали миссию UX/UI дизайна?

— Я бы ска­зал, что зада­ча дизай­не­ра интер­фей­сов — сде­лать так, что­бы ком­мер­че­ские про­дук­ты мог­ли зара­ба­ты­вать, учи­ты­вая потреб­но­сти и инте­ре­сы поль­зо­ва­те­лей. А после это­го предо­ста­вить нара­бот­ки, создан­ные в такой рабо­те, для неком­мер­че­ских сер­ви­сов, кото­рые часто обде­ле­ны вни­ма­ни­ем про­фес­си­о­на­лов.

Блог Юрия Вет­ро­ва.