Как устроен современный дизайн: желания, участие и мнение пользователей важнее всего

Современный дизайн основан на простых принципах: пользователь должен получать удовлетворение и приятные впечатления от использования сервиса или приложения. Изображение сделано в www.canva.com
Современный дизайн основан на простых принципах: пользователь должен получать удовлетворение и приятные впечатления от использования сервиса или приложения. Изображение сделано в www.canva.com

Как повы­сить кон­вер­сию на сай­те с помо­щью юза­би­ли­ти? Поче­му орга­ни­за­ции сто­ит внед­рить дизайн-мыш­ле­ние для реше­ния про­блем? С помо­щью каких инстру­мен­тов мож­но создать пер­со­на­ли­зи­ро­ван­ный про­дукт, вос­тре­бо­ван­ный у целе­вой ауди­то­рии? Замре­дак­то­ра Теп­ли­цы Ната­лья Бара­но­ва изу­чи­ла несколь­ко под­хо­дов: дизайн-мыш­ле­ние, сер­вис-дизайн и чело­ве­ко-ори­ен­ти­ро­ван­ный дизайн. Имен­но эти мето­ды помо­га­ют глу­бо­ко про­ана­ли­зи­ро­вать опыт поль­зо­ва­те­лей с помо­щью иссле­до­ва­ний, создать про­то­ти­пы, и про­те­сти­ро­вать их, раз­ра­бо­тать сер­вис­ные и про­дук­то­вые стра­те­гии.

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

Дизайн-мышление

Дизайн-мыш­ле­ни­ем (design thinking) назы­ва­ют про­цесс, кото­рый ори­ен­ти­ро­ван на поиск новых реше­ний для ком­плекс­ных про­блем в раз­ных обла­стях. Осо­бен­ность дизайн-мыш­ле­ния в том, что фокус пере­хо­дит на твор­че­ский про­цесс и кре­а­тив­ность. Имен­но такой путь помо­жет решить зада­чи и про­бле­мы самым неожи­дан­ным спо­со­бом.

Попу­ля­ри­за­то­ром этой мето­до­ло­гии стал осно­ва­тель одной из самых извест­ных дизайн-ком­па­ний в мире IDEO Дэвид Кел­ли. Фило­со­фия ком­па­нии осно­ва­на на том, что сотруд­ни­ки IDEO учат кли­ен­тов думать как дизай­не­ры. Это помо­га­ет улуч­шить каче­ство рабо­ты. Келл­ли так­же исполь­зу­ет дизайн-мыш­ле­ние и в инсти­ту­те дизай­на Стэн­форд­ско­го уни­вер­си­те­та, что­бы помочь сту­ден­там рас­крыть свой твор­че­ский потен­ци­ал.

Выступление Дэвид Келли на TED Talks

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

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

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

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

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

Юзабилити

По мне­нию руко­во­ди­те­ля отде­ла ана­ли­ти­ки авто­ма­ти­зи­ро­ван­ной реклам­ной систе­мы SeoPult Рус­ла­на Бай­бе­ко­ва, юза­би­ли­ти (usability) — это нау­ка о том, что­бы сде­лать какую-либо вещь или сер­вис удоб­нее. «Напри­мер, есть сай­ты, кото­ры­ми удоб­но поль­зо­вать­ся, а есть те, кото­ры­ми не удоб­но. Послед­ние могут лег­ко поте­рять вни­ма­ние поль­зо­ва­те­ля. Имен­но с помо­щью юза­би­ли­ти мож­но повы­сить кон­вер­сию на сай­те», — отме­тил на хака­тоне Теп­ли­цы Рус­лан Бай­бе­ков.

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

Рус­лан Бай­бе­ков сове­ту­ет исполь­зо­вать ясный при­зыв к дей­ствию, посто­ян­ную нави­га­цию в целом (а не на каж­дой стра­ни­це раз­ную), важ­ные дей­ствия обо­зна­чать кноп­ка­ми. Кон­такт­ная инфор­ма­ции долж­на быть доступ­на, не нуж­но исполь­зо­вать огром­ные выпа­да­ю­щие окна меню.

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

Юза­би­ли­ти состо­ит из двух про­цес­сов: раз­ра­бот­ка и тести­ро­ва­ние. Под раз­ра­бот­кой юза­би­ли­ти (Usability Engineering) пони­ма­ют созда­ние прак­ти­че­ских реше­ний для полу­че­ния про­дук­та, рабо­та­ю­ще­го и удоб­но­го для поль­зо­ва­те­ля. Она состо­ит из несколь­ких эта­пов: сбо­ра дан­ных, тре­бо­ва­ний к сай­ту, созда­нию и тести­ро­ва­нию про­то­ти­пов, их оцен­ке, ана­ли­зу про­блем и раз­ра­бот­ке дру­гих реше­ний нави­га­ции и повтор­но­го тести­ро­ва­ния.

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

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

Сервис-дизайн

Сер­вис-дизайн (service design) — отдель­ный вид дизай­на, кото­рый пол­но­стью отве­ча­ет потреб­но­стям поль­зо­ва­те­ля. Впер­вые курс по сер­вис-дизай­ну был про­чи­тан еще в 1991 году в Меж­ду­на­род­ной шко­ле дизай­на горо­да Кельн. Сего­дня мно­гие инсти­ту­ты вклю­ча­ют этот курс в про­грам­му маги­стра­ту­ры.

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

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

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

Для ана­ли­за в сер­вис-дизайне суще­ству­ет несколь­ко инстру­мен­тов. Напри­мер, план ком­му­ни­ка­ции поль­зо­ва­те­ля (blueprint), в кото­ром про­пи­сы­ва­ют­ся все уров­ни вза­и­мо­дей­ствия поль­зо­ва­те­ля с про­дук­том. Затем состав­ля­ет­ся кар­та пути поль­зо­ва­те­ля (Customer Journey Map), состо­я­щая из марш­ру­та дей­ствия и точ­ки кон­так­та меж­ду сто­ро­на­ми (Touchpoints). В это поня­тие вхо­дят момен­ты, когда поль­зо­ва­тель напря­мую вза­и­мо­дей­ство­вал с сер­ви­сом. В слу­чае сай­та, напри­мер, под­пи­сал­ся на рас­сыл­ку ново­стей, зада­вал вопро­сы через фор­му обрат­ной свя­зи.

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

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

Человеко-ориентированный дизайн

Чело­ве­ко-ори­ен­ти­ро­ван­ный дизайн (Human Centered Design) — под­ход к созда­нию про­ек­тов, в кото­рых клю­че­вую роль игра­ют потреб­но­сти людей. Это зна­чит, что ком­па­ния в первую оче­редь изу­ча­ет жела­ния и запро­сы потре­би­те­лей.

Спе­ци­а­ли­сты про­ек­та «Бре­мен­ские кон­суль­тан­ты» уве­ре­ны, что реше­ние, кото­рое про­ду­мы­ва­ет коман­да, долж­но быть жела­е­мым людь­ми, реаль­но осу­ще­стви­мым и жиз­не­спо­соб­ным для биз­не­са.

Конечный продукт, проект или решение должно быть востребовано на стыке трех сфер. Изображение: скриншот с сайта: www.bremenconsultants.ru
Конеч­ный про­дукт, про­ект или реше­ние долж­но быть вос­тре­бо­ва­но на сты­ке трех сфер. Изоб­ра­же­ние: скрин­шот с сай­та: www.bremenconsultants.ru

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

Напри­мер, дирек­тор по раз­ви­тию в кон­сал­тин­го­вой ком­па­нии для НКО New Philanthropy Capital Трис Лам­ли убеж­ден, что сего­дня НКО за осно­ву всех успеш­ных про­дук­тов долж­ны исполь­зо­вать чело­ве­ко-ори­ен­ти­ро­ван­ный дизайн.

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

Стратегии UX/UI

Гра­мот­но про­ра­бо­тан­ный дизайн помо­жет при­влечь к ваше­му ресур­су новых посе­ти­те­лей и сто­рон­ни­ков. Имен­но поэто­му важ­но исполь­зо­вать две фор­мы дизай­на циф­ро­вых про­дук­тов: интер­фейс вза­и­мо­дей­ствия с поль­зо­ва­те­лем (UX – User eXperience) и поль­зо­ва­тель­ский опыт (UI – user interface). UX име­ет реша­ю­щее зна­че­ние для успе­ха ваше­го сай­та. Если поль­зо­ва­те­ли будут иметь поло­жи­тель­ный опыт вза­и­мо­дей­ствия с вашим сай­том, то они вер­нут­ся к вам не один раз.

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

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

1. Стра­те­гия – цели созда­ния про­ек­та и потреб­но­сти ауди­то­рии. Нуж­но опи­сать буду­щий веб-сайт, про­дукт с точ­ки зре­ния ожи­да­ний как поль­зо­ва­те­лей, так и раз­ра­бот­чи­ков. Сто­ит отве­тить на такие вопро­сы: для чего мы созда­ем про­дукт, какие цели ста­вим, для кого мы его созда­ем, какие зада­чи мы помо­жем решить поль­зо­ва­те­лям и поче­му они будут поль­зо­вать­ся имен­но нашим сер­ви­сом?

2. Воз­мож­но­сти – опи­са­ние функ­ци­о­на­ла, кото­рый будет досту­пен для поль­зо­ва­те­ля.

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

4. Ком­по­нов­ка – про­то­ти­пи­ро­ва­ние. Созда­ет­ся при­мер­ная струк­ту­ра сай­та, наи­бо­лее эффек­тив­но рас­по­ла­га­ют­ся все эле­мен­ты.

5. Поверх­ность – визу­аль­ное оформ­ле­ние. Про­ду­мы­ва­ет­ся внеш­ний вид сай­та с точ­ки зре­ния конеч­но­го поль­зо­ва­те­ля. Учи­ты­ва­ет­ся и про­ра­ба­ты­ва­ет­ся все: кон­тент, изоб­ра­же­ния, фор­мы, меню, вклад­ки, кноп­ки.

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