Как проектировать цифровые продукты для людей с инвалидностью

В Москве рассказали про опыт создания веб-сервисов и продуктов для людей с инвалидностью. На фото: Валерия Курмак. Фото: Мария Борисёнок.
В Москве рассказали про опыт создания веб-сервисов и продуктов для людей с инвалидностью. На фото: Валерия Курмак. Фото: Мария Борисёнок.

22 авгу­ста 2017 года при под­держ­ке Impact Hub Moscow состо­ял­ся митап Теп­ли­цы соци­аль­ных тех­но­ло­гий «Про­ек­ти­ро­ва­ние digital-про­дук­тов». Участ­ни­ки позна­ко­ми­лись с прин­ци­па­ми про­ек­ти­ро­ва­ния сер­ви­сов для людей с инва­лид­но­стью и осно­ва­ми про­ве­де­ния UX иссле­до­ва­ний.

На встре­че высту­пи­ли Вале­рия Кур­мак, UX-спе­ци­а­лист, аccessibility экс­перт, веду­щий ана­ли­тик поль­зо­ва­тель­ско­го вза­и­мо­дей­ствия в Сбер­банк-Тех­но­ло­гии, и Нико­лай Кочу­бе­ев, руко­во­ди­тель про­ек­тов сту­дии No Logo.

Валерия Курмак. Фото: Мария Борисёнок.
Вале­рия Кур­мак. Фото: Мария Бори­сё­нок.

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

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

«Иссле­дуя поль­зо­ва­тель­ский опыт (UX), мож­но улуч­шить, а то и вовсе создать новый про­дукт. Напри­мер, недав­но вышед­ший в iTunes трек, состо­я­щий из 10 минут тиши­ны, вошел в топ-30, посколь­ку реша­ет насущ­ную про­бле­му поль­зо­ва­те­лей iPhone.Тысячи людей гото­вы пла­тить день­ги, что­бы избе­жать про­слу­ши­ва­ния пер­вой пес­ни из сво­е­го плей­ли­ста». Вале­рия Кур­мак

Исследование Сбербанка про людей с особыми потребностями

По дан­ным Феде­раль­ной служ­бы госу­дар­ствен­ной ста­ти­сти­ки, на 1 янва­ря 2016 года в Рос­сии насчи­ты­ва­ет­ся 12,7 мил­ли­о­на инва­ли­дов и 40 мил­ли­о­нов мало­мо­биль­ных граж­дан.

В декаб­ре 2016 года Сбер­банк пре­зен­то­вал резуль­та­ты иссле­до­ва­ния в рам­ках про­ек­та «Осо­бен­ный банк». Про­ект рас­счи­тан на кли­ен­тов с осо­бы­ми потреб­но­стя­ми:

  • людей с мен­таль­ны­ми или пси­хи­че­ски­ми нару­ше­ни­я­ми;
  • людей с нару­ше­ни­ем опор­но-дви­га­тель­но­го аппа­ра­та;
  • людей с нару­ше­ни­ем слу­ха;
  • людей с нару­ше­ни­ем зре­ния;
  • людей с одно­вре­мен­ным нару­ше­ни­ем слу­ха и зре­ния.

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

«Основ­ная про­бле­ма – это ком­му­ни­ка­ция. Обще­ство мало кон­так­ти­ру­ет с людь­ми с инва­лид­но­стью. У нас мно­го сте­рео­ти­пов и мало зна­ний о их потреб­но­стях. Напри­мер, незря­чие люди поль­зу­ют­ся интер­фей­са­ми, и циф­ро­вые про­дук­ты для них не менее важ­ны, чем для зря­чих людей». Вале­рия Кур­мак

Слайд из презентации исследования Сбербанка.
Слайд из пре­зен­та­ции иссле­до­ва­ния Сбер­бан­ка.

Как люди с инвалидностью пользуются компьютером?

Вале­рия Кур­мак рас­ска­за­ла про основ­ные прин­ци­пы созда­ния интер­фей­са для людей с раз­ны­ми нару­ше­ни­я­ми.

  • Незря­чие люди поль­зу­ют­ся циф­ро­вы­ми про­дук­та­ми с помо­щью голо­со­во­го интер­фей­са и кла­ви­а­ту­ры с шриф­том Брай­ля. Для них на сай­те долж­на быть пра­виль­но выпол­нен­ная html-верст­ка. Это поз­во­ля­ет удоб­но ори­ен­ти­ро­вать­ся на сай­те, вос­при­ни­мать и управ­лять кон­тен­том.
  • Важ­но, что­бы все нетек­сто­вые эле­мен­ты (напри­мер, кар­тин­ки или икон­ки «Поиск) были под­пи­са­ны.
  • Если на сай­те при­ве­де­на таб­ли­ца, кото­рая не сде­ла­на в таб­лич­ной фор­ме, то чело­век не смо­жет ее про­чи­тать.
  • Текст ссыл­ки дол­жен давать чет­кое пони­ма­ние, куда попа­дет чело­век при нажа­тии. Не сто­ит назы­вать ее «здесь» или «читай­те тут».
  • Кап­ча пол­но­стью бло­ки­ру­ет сце­на­рий пути для незря­че­го чело­ве­ка. Кап­ча – ком­пью­тер­ный тест, исполь­зу­е­мый для того, что­бы опре­де­лить, кем явля­ет­ся поль­зо­ва­тель систе­мы: чело­ве­ком или ком­пью­те­ром.
  • Адап­тив­ная верст­ка сай­та поз­во­ля­ет поль­зо­ва­те­лю настро­ить такой раз­мер кон­тен­та, кото­рый удо­бен имен­но для него. Кро­ме того, адап­тив­ная верст­ка под­стра­и­ва­ет кон­тент ваше­го сай­та под любое мобиль­ное устрой­ство.

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

Участники митапа. Фото: Мария Борисёнок.
Участ­ни­ки мита­па. Фото: Мария Бори­сё­нок.

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

  • Исполь­зуй­те инстру­мен­ты про­вер­ки кон­траст­но­сти (напри­мер, Colour Contrast Analyser).
  • Для выде­ле­ния важ­ной инфор­ма­ции, не исполь­зуй­те толь­ко цвет. Исполь­зуй­те так­же знач­ки, икон­ки.
  • Для людей с нару­ше­ни­ем слу­ха важ­но исполь­зо­вать суб­тит­ры в меди­а­кон­тен­те.
  • Для людей с нару­ше­ни­ем опор­но-дви­га­тель­но­го аппа­ра­та важ­но предо­ста­вить воз­мож­ность управ­лять всем сай­том с помо­щью кла­ви­а­ту­ры, без исполь­зо­ва­ния мыши.
  • В мобиль­ных при­ло­же­ни­ях эле­мент нажа­тия дол­жен быть доста­точ­ным, что­бы его мож­но было нажать.
  • Для людей с мен­таль­ны­ми нару­ше­ни­я­ми важ­ны кон­крет­ные понят­ные и про­стые инструк­ции

Иссле­до­ва­ние Сбер­бан­ка. 

Пре­зен­та­ция Вале­рии Кур­мак.

Нико­лай Кочу­бе­ев, руко­во­ди­тель про­ек­тов сту­дии No Logo, рас­ска­зал о про­цес­се созда­ния сай­та сер­ви­са сопро­вож­де­ния людей с огра­ни­чен­ны­ми воз­мож­но­стя­ми здо­ро­вья «IntraLife» и посо­ве­то­вал, какие инстру­мен­ты в рабо­те исполь­зу­ет UX-спе­ци­а­лист.

Принципы разработки

Нико­лай при­вел основ­ные пра­ви­ла раз­ра­бот­ки про­дук­тов, кото­рых при­дер­жи­ва­ют­ся совре­мен­ные сту­дии:

  • адап­тив­ный дизайн и созда­ние мобиль­ной вер­сии сер­ви­са;
  • визу­а­ли­за­ция и ани­ма­ция всех эле­мен­тов интер­фей­сов;
  • раз­ра­бот­ка в соот­вет­ствии со стан­дар­та­ми material design;
  • раз­ра­бот­ка в соот­вет­ствии с про­то­ти­пом и кон­цеп­том;
  • при­о­ри­тет на раз­ра­бот­ку уни­каль­ной гра­фи­ки;
  • соблю­де­ние автор­ских прав;
  • воз­мож­ность касто­ми­за­ции. Поль­зо­ва­тель дол­жен иметь воз­мож­ность адап­ти­ро­вать финаль­ный про­дукт под себя.
Николай Кочубеев. Фото: Мария Борисёнок.
Нико­лай Кочу­бе­ев. Фото: Мария Бори­сё­нок.

Основные UX-понятия

  • Вайр­фрейм – это образ дизай­на низ­кой точ­но­сти, кото­рый пока­зы­ва­ет: основ­ную груп­пу кон­тен­та (что?), струк­ту­ру инфор­ма­ции (где?), опи­са­ние и базо­вую визу­а­ли­за­цию вза­и­мо­дей­ствия меж­ду интер­фей­сом и поль­зо­ва­те­лем (как?).
  • Про­то­тип – это при­бли­жен­ная вер­сия дизай­на к финаль­но­му про­дук­ту, поз­во­ля­ю­щая сыми­ти­ро­вать вза­и­мо­дей­ствие меж­ду поль­зо­ва­те­лем и интер­фей­сом.
  • Мок­а­пы – это гра­фи­че­ские наброс­ки, ста­тич­ный образ про­дук­та.

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

Участники митапа. Фото: Мария Борисёнок.
Участ­ни­ки мита­па. Фото: Мария Бори­сё­нок.

Инструменты прототипирования

  • Линей­ка про­дук­тов Adobe Creative Cloud.
  • Adobe Muse поз­во­ля­ет дизай­не­ру пол­но­стью свер­стать адап­тив­ный кон­цепт сай­та на HTML5, CSS3.
  • Adobe XD – ком­плекс­ное реше­ние задач раз­ра­бот­ки дизай­на интер­фей­са и его тести­ро­ва­ния на раз­лич­ных деск­топ­ных, мобиль­ных и план­шет­ных устрой­ствах.
  • Zeplin – пла­гин, поз­во­ля­ю­щий гене­ри­ро­вать руко­вод­ство по сти­лю, исход­ни­ки и спе­ци­фи­ка­ции на осно­ве XS/Photoshop исход­ни­ков.

Пре­зен­та­ция Нико­лая Кочу­бе­е­ва