Как изучается опыт пользователя и что такое UX/UI

Участники проекта «Бременские консультанты» Андрей Мисюрев и Настя Алифирова рассказали, как НКО использовать UX/UI дизайн. На фото: Андрей Мисюрев. Фото: Глеб Пайкачев.
Участники проекта «Бременские консультанты» Андрей Мисюрев и Настя Алифирова рассказали, как НКО использовать UX/UI дизайн. На фото: Андрей Мисюрев. Фото: Глеб Пайкачев.

20 июля 2017 года в Санкт-Петер­бур­ге состо­ял­ся митап Теп­ли­цы соци­аль­ных тех­но­ло­гий «UI/UX дизайн для НКО». Участ­ни­ки узна­ли, что такое опыт поль­зо­ва­те­ля и уви­де­ли, как он при­ме­ня­ет­ся на кон­крет­ных при­ме­рах.

На встре­че высту­пи­ли Андрей Мисю­рев и Настя Али­фи­ро­ва из коман­ды про­ек­та «Бре­мен­ские кон­суль­тан­ты».

Что такое UX/UI?

На этот вопрос Андрей Мисю­рев отве­тил одним слай­дом:

Слайд из презентации Андрея Мисюрева
Слайд из пре­зен­та­ции Андрея Мисю­ре­ва.

На этом слай­де моло­дой чело­век полу­ча­ет опыт поль­зо­ва­те­ля, дру­гой толь­ко соби­ра­ет­ся, а кто-то уже пере­ду­мал. Тру­ба, язык и мороз – это интер­фейс.

UX (User eXperience) дизайн – ком­плекс­ный под­ход к вза­и­мо­дей­ствию интер­нет-поль­зо­ва­те­ля с интер­фей­сом сай­та, мобиль­но­го при­ло­же­ния или про­грам­мы. Он при­зван раз­ра­бо­тать мак­си­маль­но удоб­ный и лег­кий для вос­при­я­тия про­дукт для целе­вой ауди­то­рии. UX дизайн отве­ча­ет за то, как про­дукт функ­ци­о­ни­ру­ет и какие эмо­ции вызы­ва­ет у поль­зо­ва­те­лей.

UI (User interface) дизайн – узкое поня­тие, кото­рое вклю­ча­ет набор гра­фи­че­ски оформ­лен­ных инстру­мен­тов. Напри­мер, кноп­ки, меню, слай­де­ры. UI дизайн при­зван помочь поль­зо­ва­те­лю нала­дить вза­и­мо­дей­ствие с сай­том или про­грам­мой.

Когда дизай­нер рабо­та­ет над зада­чей, он дол­жен отве­тить на вопро­сы с трех сто­рон:

  • Со сто­ро­ны людей – зачем нужен новый про­дукт.
  • Со сто­ро­ны тех­но­ло­гий – как это осу­ще­ствить тех­ни­че­ски и воз­мож­но ли это в прин­ци­пе.
  • Со сто­ро­ны биз­не­са – целе­со­об­раз­но ли это эко­но­ми­че­ски, воз­мож­но ли так зара­бо­тать, за что будут пла­тить день­ги.
Работа дизайнера на диаграмме Венна. Слайд из презентации Андрея Мисюрева
Рабо­та дизай­не­ра на диа­грам­ме Вен­на. Слайд из пре­зен­та­ции Андрея Мисю­ре­ва

«Опыт поль­зо­ва­те­ля лежит как раз там, где люди, а интер­фейс поль­зо­ва­те­ля там, где тех­но­ло­гии. Рань­ше дизай­нер не думал о том, что есть опыт поль­зо­ва­те­ля. Он про­сто отве­чал на эти вопро­сы и нахо­дил пере­се­че­ния, то есть здесь мы ниче­го осо­бо ново­го не при­ду­мы­ва­ем». Андрей Мисю­рев.

Как изучается опыт пользователя?

Для изу­че­ния опы­та вза­и­мо­дей­ствия поль­зо­ва­те­ля с уже гото­вым про­дук­том под­хо­дят ана­ли­ти­че­ские сер­ви­сы такие, как Яндекс.Метрика, Google Analytics, Яндекс Веб­ви­зор. По ним мож­но понять, какие бло­ки не удоб­ны или не инте­рес­ны поль­зо­ва­те­лю. Для того что­бы най­ти реше­ние выяв­лен­ных про­блем, нуж­но изу­чать людей, понять, кто они и зачем им нужен этот про­дукт.

Дру­гой спо­соб – это «про­гул­ка» по сай­ту или сер­ви­су, то есть сле­же­ние за после­до­ва­тель­но­стью дей­ствий или кли­ков поль­зо­ва­те­ля. Про­гул­ку мож­но смо­де­ли­ро­вать или прой­ти непо­сред­ствен­но с поль­зо­ва­те­лем.

Еще по теме: Тести­ру­ем юза­би­ли­ти сай­та: мето­ды и инстру­мен­ты

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

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

«К при­ме­ру, если мы берем двер­ной про­ем, то экс­тре­маль­ным поль­зо­ва­те­лем будет не тот, кто через него лег­ко про­хо­дит, а напри­мер тот, кто про­хо­дит через него с четырь­мя коляс­ка­ми или с боль­шим коли­че­ством паке­тов, слиш­ком высо­кие или низ­кие люди». Андрей Мисю­рев

При рабо­те над новым про­дук­том изу­че­ние опы­та поль­зо­ва­те­ля начи­на­ет­ся с изу­че­ния ауди­то­рии и темы, с кото­рой он свя­зан.

Об этом рас­ска­за­ла по видео­свя­зи Настя Али­фи­ро­ва на при­ме­ре созда­ния фанд­рай­зин­го­вых стра­ниц для Цен­тра лечеб­ной педа­го­ги­ки, кото­рые сей­час нахо­дят­ся в раз­ра­бот­ке. Центр соби­ра­ет день­ги на созда­ние сен­сор­ной ком­на­ты для детей с огра­ни­чен­ны­ми воз­мож­но­стя­ми. 

  • Узнай­те деталь­ную инфор­ма­цию о про­ек­те. В слу­чае сен­сор­ной ком­на­ты коман­да нача­ла с пони­ма­ния цен­но­стей, кото­рые дает сен­сор­ная ком­на­та, изу­чи­ла спе­ци­аль­ную лите­ра­ту­ру по сен­сор­ной инте­гра­ции. Они выяс­ни­ли, что инте­гра­ция полез­на вооб­ще всем, а не толь­ко осо­бым детям. Сен­сор­ная инте­гра­ция раз­ви­ва­ет­ся через очень про­стые вещи: ката­ние в гама­ке, лаза­нье по тун­не­лю, тро­га­ние раз­лич­ных фак­тур раз­лич­ных пред­ме­тов. Имен­но вызы­ва­е­мые ощу­ще­ния ока­зы­ва­ют поло­жи­тель­ное воз­дей­ствие. Так коман­да поня­ла, что нуж­но гово­рить про ощу­ще­ния. Сотруд­ни­ки Цен­тра так­же рас­ска­за­ли, что хотят веж­ли­во­го и дру­же­люб­но­го отно­ше­ния к детям. Так сфор­ми­ро­вал­ся язык и инто­на­ция, с кото­рой нуж­но гово­рить про про­дукт.
  • Обра­ти­тесь к экс­пер­там. Через экс­пер­тов коман­де ста­ло ясно, что люди извне мало зна­ют про осо­бых детей, про их жизнь и потреб­но­сти. Это зна­чит, что о про­бле­ме необ­хо­ди­мо рас­ска­зы­вать через понят­ный опыт.
  • Опре­де­ли­тесь с ауди­то­ри­ей. 

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

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

Работа с интерфейсом

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

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

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

Примеры использования UI/UX дизайна, которые упоминались на встрече:

Митап состо­ял­ся при под­держ­ке Откры­то­го про­стран­ства.