UX и UI: основные понятия дизайна цифрового продукта

UX дизайн отвечает за то, как продукт функционирует и какие эмоции вызывает у пользователей. Изображение сделано в www.canva.com
UX дизайн отвечает за то, как продукт функционирует и какие эмоции вызывает у пользователей. Изображение сделано в www.canva.com

В июне 2017 года кор­ре­спон­ден­ты Теп­ли­цы будут подроб­но рас­ска­зы­вать о двух фор­мах дизай­на циф­ро­вых про­дук­тов: опы­та поль­зо­ва­те­ля (UX – User eXperience) и поль­зо­ва­тель­ских интер­фей­сов (UI – user interface). Так­же мы пого­во­рим о дизайн-мыш­ле­нии, юза­би­ли­ти сай­та, чело­век-ори­ен­ти­ро­ван­ном дизайне (human-centered design), сер­вис-дизайне (service design) и посо­ве­ту­ем, как улуч­шить сайт неком­мер­че­ской орга­ни­за­ции. В этой ста­тье мы раз­бе­рем основ­ные поня­тия, кото­рые сто­ит знать при изу­че­нии UX и UI дизай­на.

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

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

Для поль­зо­ва­те­ля крайне важ­но на инту­и­тив­ном уровне изу­чать ваш сайт. Но если он непо­ня­тен для него, вы може­те поте­рять чита­те­ля.

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

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

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

Термины в UX дизайне

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

2. Кон­текст ана­ли­за исполь­зо­ва­ния (Context of Use Analysis) – сбор и ана­лиз подроб­ной инфор­ма­ции о потен­ци­аль­ных поль­зо­ва­те­лях. Для это­го про­во­дят­ся интер­вью, семи­на­ры, опро­сы, рабо­та с фокус-груп­па­ми.

3. Лег­ко обу­ча­е­мый (Easy to Learn) – аспект удоб­ства исполь­зо­ва­ния. Он при­зван облег­чить поль­зо­ва­те­лям вза­и­мо­дей­ствие с интер­фей­сом, при этом потра­тив мини­маль­ное вре­мя на его изу­че­ние.

4. Эффек­тив­ность, про­из­во­ди­тель­ность (Efficiency) – сво­е­го рода коэф­фи­ци­ент полез­но­го дей­ствия, важ­ный атри­бут юза­би­ли­ти сай­та. Прин­цип таков: чем мень­ше поль­зо­ва­тель занял вре­ме­ни и чем мень­ше при­ло­жил уси­лий, что­бы най­ти какой-либо эле­мент на сай­те, тем эффек­тив­нее про­дукт.

Еще по теме: 60+ полез­ных инстру­мен­тов и ресур­сов для дизай­не­ров

5. Фаси­ли­та­тор (Facilitator) – чело­век, кото­рый обес­пе­чи­ва­ет ком­му­ни­ка­цию в груп­пе раз­ра­бот­чи­ков. Он ула­жи­ва­ет кон­фликт­ные ситу­а­ции, сле­дит за про­ве­де­ни­ем встреч и помо­га­ет участ­ни­кам скон­цен­три­ро­вать­ся на целях. По сути это про­вод­ник, кото­рый помо­га­ет всей коман­де достичь наи­луч­ше­го резуль­та­та, най­ти общий язык, сфор­му­ли­ро­вать конеч­ную цель. В про­цес­се рабо­ты он созда­ет ком­форт­ную атмо­сфе­ру.

6. Фокус-груп­па (Focus Group) – груп­пы потен­ци­аль­ных поль­зо­ва­те­лей ваше­го про­дук­та, кото­рые фор­ми­ру­ют­ся, что­бы полу­чить от них обрат­ную связь. Мне­ние фокус-групп важ­но на эта­пе пла­ни­ро­ва­ния про­дук­та, сбо­ра всех тре­бо­ва­ний к нему. Участ­ни­ки выска­зы­ва­ют свое мне­ние о про­то­ти­пах, зада­чах, стра­те­ги­ях, выбран­ных для созда­ния про­дук­та.

7. Инфор­ма­ци­он­ная архи­тек­ту­ра (Information Architecture) – про­цесс орга­ни­за­ции инфор­ма­ции, кото­рый вклю­ча­ет струк­ту­ру, дизайн, макет и нави­га­цию. Он поз­во­ля­ет сотруд­ни­кам и поль­зо­ва­те­лям нахо­дить нуж­ную инфор­ма­цию и управ­лять ею. Напри­мер, инфор­ма­ци­он­ная архи­тек­ту­ра опре­де­ля­ет раз­ме­ще­ние эле­мен­тов на стра­ни­це, их нави­га­цию, связь самих стра­ниц.

8. Интер­фейс (Interface) – неотъ­ем­ле­мая часть любо­го про­дук­та. Это объ­ект, сре­да, набор инстру­мен­тов, с помо­щью кото­рых поль­зо­ва­тель вза­и­мо­дей­ству­ет с гото­вым про­дук­том. Напри­мер, кноп­ки, галоч­ки, тек­сто­вые поля, под­сказ­ки, пере­клю­ча­те­ли на сай­те. По сути, интер­фейс ведет за собой поль­зо­ва­те­ля.

9. Сов­мест­ная раз­ра­бот­ка (Participatory Design) – про­цесс, в кото­рый вклю­че­ны раз­ра­бот­чи­ки, пред­ста­ви­те­ли биз­не­са и поль­зо­ва­те­ли. Все они рабо­та­ют вме­сте для созда­ния реше­ния. Напри­мер, раз­ра­бот­чи­ки актив­но при­вле­ка­ют поль­зо­ва­те­лей к про­цес­су про­ек­ти­ро­ва­ния, что­бы быть уве­рен­ны­ми в вос­тре­бо­ван­но­сти функ­ций про­дук­та.

10. Плю­ра­ли­сти­че­ский под­ход к юза­би­ли­ти (Pluralistic Usability Walkthrough) – метод тести­ро­ва­ния юза­би­ли­ти, кото­рый исполь­зу­ет­ся для оцен­ки дизай­на на ран­ней ста­дии. В этом тести­ро­ва­нии участ­ву­ют поль­зо­ва­те­ли и раз­ра­бот­чи­ки интер­фей­са.

11. Про­то­тип (Prototype) – пер­во­на­чаль­ный дизайн интер­фей­са или про­дук­та, кото­рый нужен для полу­че­ния отзы­вов от поль­зо­ва­те­лей, участ­ни­ков про­ек­та и заин­те­ре­со­ван­ных спе­ци­а­ли­стов.

12. Рас­кад­ров­ка (Storyboard) – спо­соб иллю­стри­ро­ва­ния вза­и­мо­дей­ствия чело­ве­ка и про­дук­та в опи­са­тель­ном фор­ма­те. Рас­кад­ров­ка может состо­ять из серии рисун­ков, эски­зов и опи­са­ния к ним. Она рас­ска­зы­ва­ет исто­рию о том, как поль­зо­ва­тель тести­ру­ет и оце­ни­ва­ет про­дукт.

Термины в UI дизайне

1. Аффор­данс (Affordance) – эле­мент, кото­рый опи­сы­ва­ет, куда кли­ка­ют поль­зо­ва­те­ли. Не всю инфор­ма­цию на сай­те мож­но пере­дать сло­ва­ми, имен­но аффор­дан­сы стре­лок помо­га­ют поль­зо­ва­те­лю понять, что будет, если он нажмет на какую-либо кноп­ку. Пра­виль­ное исполь­зо­ва­ние этих эле­мен­тов помо­жет улуч­шить инту­и­тив­ность интер­фей­са.

2. Кас­кад­ные таб­ли­цы сти­лей (Cascading style sheets, CSS) – так назы­ва­ет­ся фор­маль­ный язык. Он исполь­зу­ет­ся для опи­са­ния внеш­не­го вида веб-стра­ниц, напи­сан­ных с помо­щью язы­ков раз­мет­ки HTML и XHTML. CSS исполь­зу­ет­ся, напри­мер, для того, что­бы задать шрифт, цвет и рас­по­ло­же­ния отдель­ных бло­ков на веб-стра­ни­цах.

Еще по теме: Алек­сандр Хри­сто­лю­бов: дизайн-мыш­ле­ние – мето­до­ло­гия поис­ка новых реше­ний

3. Систе­ма управ­ле­ния кон­тен­том (Content management system, CMS) – про­грам­ма, кото­рая поз­во­ля­ет сов­мест­но созда­вать, редак­ти­ро­вать и управ­лять кон­тен­том на сай­те.

4. Ани­ма­ция (Animation) – моде­ли­ро­ва­ние дви­же­ния путем быст­ро­го появ­ле­ния изоб­ра­же­ний в после­до­ва­тель­но­сти.

5. Нави­га­ция, меню (Navigation) – это фор­ма, систе­ма ссы­лок, кото­рая поз­во­ля­ет поль­зо­ва­те­лю пере­ме­щать­ся по сай­ту либо при­ло­же­нию.

6. Пустое про­стран­ство (Negative Space) – часть стра­ни­цы, кото­рая не содер­жит тек­ста или изоб­ра­же­ния.

7. Мет­ки (Labels) – назва­ния для кно­пок и дру­гих эле­мен­тов для нави­га­ции по сай­ту.

8. Путь (Path) – марш­рут, кото­рый про­хо­дит поль­зо­ва­тель на веб-сай­те.

9. «Что видишь, то и полу­чишь» (What you see is what you get) – это свой­ство веб-интер­фей­сов или про­грамм, в кото­рых макет выгля­дит похо­жим на конеч­ную про­дук­цию и может быть пред­став­лен в виде печат­ной вер­сии или пре­зен­та­ции. Такую функ­цию выпол­ня­ют «визу­аль­ные редак­то­ры».

Основ­ные тер­ми­ны UX дизай­на пере­чис­ле­ны в спра­воч­ни­ке Usability Body Knowledge, а UI – на обра­зо­ва­тель­ном сай­те Usability.gov