<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>UX/UI дизайн</title>
	<atom:link href="https://www.ux-ui.top/feed" rel="self" type="application/rss+xml" />
	<link>https://www.ux-ui.top</link>
	<description>Проектирование пользовательских интерфейсов</description>
	<lastBuildDate>Sun, 18 Sep 2022 17:33:43 +0000</lastBuildDate>
	<language>uk</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>7 кінцевих результатів ux: що я робитиму як ux-дизайнер?</title>
		<link>https://www.ux-ui.top/ux-navchannya/7-kinczevyh-rezultativ-ux-shho-ya-robytymu-yak-ux-dyzajner.html</link>
					<comments>https://www.ux-ui.top/ux-navchannya/7-kinczevyh-rezultativ-ux-shho-ya-robytymu-yak-ux-dyzajner.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Fri, 11 May 2018 09:32:09 +0000</pubDate>
				<category><![CDATA[UX навчання]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=787</guid>

					<description><![CDATA[Що створює UX-дизайнер? У статті ми розглянемо концепцію кінцевих результатів UX – цей термін описує результати процесу UX-дизайну різних етапах. Результати, створені UX-дизайнерами, відрізняються в залежності від їхньої ролі у команді дизайнерів, а також в залежності від методів та інструментів, які використовуються кожною цією роллю. Ми розглянемо деякі з найпоширеніших типів результатів.]]></description>
										<content:encoded><![CDATA[<p>[vc_row gap=&#8221;20&#8243; equal_height=&#8221;yes&#8221; wrap_container=&#8221;yes&#8221; conditional_render=&#8221;%5B%7B%22value_role%22%3A%22administrator%22%7D%5D&#8221; css=&#8221;.vc_custom_1661949750862{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;border-left-color: #262626 !important;border-left-style: solid !important;border-right-color: #262626 !important;border-right-style: solid !important;border-top-color: #262626 !important;border-top-style: solid !important;border-bottom-color: #262626 !important;border-bottom-style: solid !important;}&#8221;][vc_column width=&#8221;1/6&#8243;][vc_single_image image=&#8221;3112&#8243; alignment=&#8221;center&#8221; el_class=&#8221;custom_post_style_autor&#8221;][/vc_column][vc_column width=&#8221;5/6&#8243;][vc_column_text el_class=&#8221;custom_post_style_autor&#8221;]Оригінал статті: <a href="https://www.interaction-design.org/literature/article/7-ux-deliverables-what-will-i-be-making-as-a-ux-designer">https://www.interaction-design.org/literature/article/7-ux-deliverables-what-will-i-be-making-as-a-ux-designer</a><br />
Автор: Андреас Камнінос<br />
Переклад та адаптація:[/vc_column_text][/vc_column][/vc_row][vc_row wrap_container=&#8221;yes&#8221; conditional_render=&#8221;%5B%7B%22value_role%22%3A%22administrator%22%7D%5D&#8221;][vc_column][vc_empty_space][vc_row_inner][vc_column_inner][vc_column_text]<em>Що створює UX-дизайнер? У статті ми розглянемо концепцію кінцевих результатів UX – цей термін описує результати процесу UX-дизайну різних етапах. Результати, створені UX-дизайнерами, відрізняються в залежності від їхньої ролі у команді дизайнерів, а також в залежності від методів та інструментів, які використовуються кожною цією роллю. Ми розглянемо деякі з найпоширеніших типів </em><em>результатів.</em></p>
<p>Процес UX-дизайну зазвичай спирається на щось схоже на підхід дизайнерського мислення, який складається з п’яти основних етапів:</p>
<ul>
<li>Розуміння почуттів користувачів (вивчення аудиторії)</li>
<li>Визначення проблеми (визначення потреб користувачів)</li>
<li>Створення ідей (генерація ідей для дизайну)</li>
<li>Прототипи (перетворення ідей на конкретні приклади)</li>
<li>Тест (оцінка дизайну)</li>
</ul>
<p>Перші два етапи (розуміння почуттів користувачів та визначення проблеми) часто групуються в термін “Дослідження користувачів”, тобто розуміння сутності користувачів і того, як це впливає на їхні потреби. На кожному етапі можна використовувати низку інструментів та методів. Кожен інструмент або метод може надавати інший тип висновку (UX-результат), але тут ми зосередимося на деяких типах, що найчастіше використовуються, щоб надати вам огляд того, що вам належить створювати в ролі UX-дизайнера.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]</p>
<h2><strong>Результати досліджень користувачів</strong></h2>
<p>[/vc_column_text][vc_column_text]<span style="font-size: 20px;"><strong>Персони</strong></span></p>
<p>Персона – це вигаданий персонаж, який дизайнери створюють як свого роду стереотип користувача. Він представляє типових користувачів, їх цілі, мотивації, розчарування та навички. Інша інформація, така як демографія та освіта, доповнює персону. Залежно від обсягу проєктів дизайнери генеруватимуть кілька різних персонажів, щоб охопити якомога більшу частину аудиторії. Створення персони допомагає дизайнерам співпереживати користувачам та демонструвати повне розуміння того, хто вони та чого хочуть досягти.[/vc_column_text][vc_single_image image=&#8221;3131&#8243; img_size=&#8221;Full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: Rosenfeld Media, Flickr. Copyright terms and license: CC BY 2.0</i></p>
<p><em>Приклад особи користувача. Демографія, здібності, навички, цілі та мотивації представлені або графічно, або в тексті.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<span style="font-size: 20px;"><strong>Розкадрування</strong></span></p>
<p>Розкадрування – це ідея, запозичена з кіноіндустрії. По суті, це комікс, який описує дії користувача та обставини, за яких вони виконуються. Сила цієї ідеї полягає в тому, що вона не тільки демонструє, що робить користувач, але також показує середовище, яке може вплинути на те, як і чому користувач робить щось.[/vc_column_text][vc_single_image image=&#8221;3133&#8243; img_size=&#8221;full&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: Rosenfeld Media, Flickr. Copyright terms and license: CC BY 2.0</i></p>
<p><em>Розкадрування допомагає візуалізувати дії користувачів, а також середовище, в якому вони відбуваються. Хоча здебільшого вона застосовується для розуміння почуттів користувачів, розкадрування також можна використовувати на етапі створення ідей, щоб допомогти проілюструвати деякі варіанти дизайну.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<span style="font-size: 20px;"><strong>Карта подорожей споживача</strong></span></p>
<p>Карта подорожі споживача (також відома як карта досвіду) є діаграмою, яка відображає кроки (тобто процес), вжиті користувачем для досягнення конкретної мети. Прокладаючи процес на часовій шкалі, дизайнери можуть зрозуміти зміни в контексті, а також мотиви, проблеми та потреби на цьому шляху. Визначивши основні камені спотикання для користувачів, дизайнери можуть краще зрозуміти їхні проблеми та почати бачити, на якому етапі шляху продукт чи послуга можуть підійти, щоб допомогти користувачеві.[/vc_column_text][vc_single_image image=&#8221;3134&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: Tobias Maier, Wikimedia. Copyright terms and license: CC BY-SA 3.0</i></p>
<p><em>Приклад карти подорожі споживача, що зображає процес ухвалення рішення про купівлю квитка Rail Europe. На кожному кроці процесу дизайнери виклали досвід користувачів, розглядаючи, які дії вони роблять, що вони думають, і як вони почуваються в міру того, як просуваються до успіху у вирішенні свого завдання. Зрештою, також намічені можливості для покращення нинішнього досвіду.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]</p>
<h2><strong>Результати створення ідей</strong></h2>
<p><span style="font-size: 20px;"><strong>Мозковий штурм</strong></span></p>
<p>Мозковий штурм – це процес, при якому команда розробників генерує ідеї про те, як розв’язувати проблеми та можливості, виявлені на етапі дослідження користувачів. Концепція тут залежить від генерації якомога більшої кількості ідей (навіть якщо вони цілком божевільні), щоб дизайнери могли згодом відсіяти непотрібне та звести їх до ідей, які здаються найперспективнішими. Центральним моментом є те, що члени команди можуть досліджувати всі кути та області; дійсно, найкращі рішення можуть іноді виникати з найбожевільніших уявлень.[/vc_column_text][vc_single_image image=&#8221;3135&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: visualpun.ch, Flickr. Copyright terms and license: CC BY 2.0</i></p>
<p><em>Мозковий штурм часто робиться з великою кількістю стікерів, де дизайнери записують всі свої ідеї. Потім можна обговорити ці стікери, ієрархічно структурувати, групувати на теми й організовувати так, щоб вони представляли візуальну карту кращих ідей, створених для розв’язання проблеми дизайну.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<span style="font-size: 20px;"><strong>Маршрут користувача (User Flow)</strong></span></p>
<p>User flow – проста діаграма, яка описує кроки, які користувач повинен зробити з вашим продуктом або послугою для досягнення мети. На відміну від карти подорожі споживача, у user flow враховується лише те, що відбувається з вашим продуктом (тобто ігноруються всі зовнішні фактори). Ці діаграми можуть допомогти дизайнерам швидко оцінити ефективність процесу, необхідного для досягнення мети користувача, і можуть допомогти визначити як (тобто виконання) великих ідей, визначених за допомогою мозкового штурму.[/vc_column_text][vc_single_image image=&#8221;3136&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: Teo Yu Siang and <a title="What is Interaction Design?" href="https://www.interaction-design.org/literature/topics/interaction-design">Interaction Design</a> Foundation. Copyright terms and licence: CC BY-NC-SA 3.0</i></p>
<p><em>Приклад діаграми user flow, яка показує дії користувача у програмі.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]</p>
<h2><strong>Результати прототипування</strong></h2>
<p><strong>Карти сайту</strong></p>
<p>Карти сайту показують ієрархію та структуру навігації веб-сайту. Такі карти також часто створюються для мобільних програм. Вони служать для того, щоб показати, як контент буде організований в “екранах” або розділах, і як користувач може перейти з одного розділу вашої послуги до іншої.[/vc_column_text][vc_single_image image=&#8221;3137&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: Teo Yu Siang and <a title="What is Interaction Design Foundation?" href="https://www.interaction-design.org/literature/topics/interaction-design-foundation">Interaction Design Foundation</a>. Copyright terms and licence: CC BY-NC-SA 3.0</i></p>
<p><em>Приклад карти сайту, яка показує, як організовується контент на веб-сайті, і як користувачі можуть перейти від розділу до розділу. Тут дизайнер показує ієрархію шляхом нумерації розділів вмісту (наприклад, 2.0 є «батьківським» розділом та 2.1 є підрозділом).</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<span style="font-size: 20px;"><strong>Прототипи з низькою точністю</strong></span></p>
<p>Коли ваші карти сайту будуть готові, ви можете почати робити нариси того, як розміщуватиметься контент на кожному екрані. Прототип з низькою точністю пропускає будь-які деталі візуального дизайну та служить приблизним посібником, щоб дозволити дизайнерам зрозуміти, як і де вони мають розміщувати контент. Прототипи з низькою точністю можуть починатися як намальовані ескізи (вони відмінні, тому що їх швидко і дешево створювати; ви можете легко викинути їх, якщо передумаєте), а потім більш уточнені у вигляді вайрфреймів, намальованих на комп’ютері, які надають більш вірну інформацію на реальному екрані Але у них все ще не вистачає деталей візуального дизайну.[/vc_column_text][vc_single_image image=&#8221;3138&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: VFS digital design, Flickr. Copyright terms and license: CC BY 2.0</i></p>
<p><em>Приклади насувних вручну (ліворуч) та на комп’ютері (праворуч) прототипів з низькою точністю.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<span style="font-size: 20px;"><strong>Прототипи з високою точністю</strong></span></p>
<p>Ці прототипи на щабель вище прототипів із низькою точністю. Часто вони називаються ідеально-піксельними прототипами (pixel-perfect prototypes), тому що вони намагаються показати всі візуальні та типографічні деталі продукту, як це було б показано на цьому екрані. Вони враховують розміри фізичного екрана та створюються у розмірі, що відповідає розміру фізичного пристрою. Хоча ці прототипи вимагають набагато більше часу для створення у порівнянні з прототипами з низькою точністю, вони часто є прикладом ілюстрації, яку ви хотіли б показати клієнту чи зацікавленій особі.[/vc_column_text][vc_single_image image=&#8221;3139&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: amire80, Wikimedia. Copyright terms and license: CC BY-SA 3.0</i></p>
<p><em>Приклади прототипів з високою точністю (піксель-ідеальний) для мобільного додатка. Попри те, що вони виглядають як скріншоти із завершеного реального додатку, вони трохи більше, ніж макет! На жаль, багато клієнтів, схоже, вважають, що на цьому етапі ви повинні бути дійсно близькі до фактичного завершення всього проєкту, тому будьте обережні та дайте чітко зрозуміти, що ці прототипи є трохи більше ніж красиві візуальні ефекти без коду за ними!</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<span style="font-size: 20px;"><strong>Інтерактивні прототипи</strong></span></p>
<p>Прототипи з низькою і високою точністю, розглянуті вище, є не що інше, як набір статичних зображень. Щоб краще оцінити ваші проєкти, ви можете перетворити ці прототипи на інтерактивну демонстрацію, націлену на відображення того, як взаємодія може працювати з ними. Програми для комерційного прототипування дозволять визначити активні області, переходи та події, щоб створити інтерактивний прототип, який охоплює user flow та демонструє взаємодію без необхідності писати жодного рядка коду. У деяких випадках ви можете використовувати набагато більш простий інструмент, наприклад PowerPoint або Keynote. Навіть краще, можна використовувати ці інтерактивні прототипи в ранніх тестах користувачів, перш ніж будь-який код буде написаний. Таким чином, ви можете переконатися, що ваш дизайн, ймовірно, буде працювати добре, перш ніж перейти до дорогого та трудомісткого процесу розробки коду.[/vc_column_text][vc_video link=&#8221;https://youtu.be/AmXkqZ4dJhE&#8221;][vc_column_text]<em>Приклад того, як можна створити інтерактивний прототип з таким простим інструментом, як програма для презентацій Keynote від Apple.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]</p>
<h2><strong>Результати оцінки</strong></h2>
<p><span style="font-size: 20px;"><strong>Звіт з юзабіліті</strong></span></p>
<p>Після того, як ви створите дизайн (навіть якщо це буде тільки інтерактивний прототип), ви можете почати оцінювати його за допомогою реальних користувачів. Оцінка може здійснюватися у різних формах. Ви можете попросити деяких користувачів спробувати ваш дизайн, а потім взяти інтерв’ю у них або працювати з ними у фокус-групі. Це приклад якісної оцінки. Ви можете привести користувачів до лабораторії та попросити їх виконати певні завдання за допомогою свого прототипу, а самі вимірюватимете такі речі, як кількість помилок, кількість кліків або час, витрачений на виконання завдання. У лабораторії можна використовувати спеціальне обладнання, таке як камери стеження за очима, щоб дізнатися, на що спрямована увага користувачів при навігації по певному дизайну. Ви також можете попросити їх виконати те саме завдання, використовуючи прототипи, які пропонують альтернативні варіанти виконання дизайну, так ви можете порівняти їх і побачити, який дизайн краще (спосіб відомий як тестування A/B).</p>
<p>Існує багато способів оцінити дизайн. Незалежно від того, що ви зрештою робите для оцінки, вам доведеться узагальнити ваші висновки у звіті з юзабіліті (зручність використання). Повний юзабіліті-звіт зазвичай містить такі розділи:</p>
<ul>
<li>Довідкова інформація: що ви протестували, де і коли, інструменти та обладнання, які ви використовували, і хто брав участь у дослідженні.</li>
<li>Методологія: як ви оцінювали, які завдання ставили перед користувачами, які дані були зібрані, які сценарії використовувалися, хто був учасниками та їхня демографія.</li>
<li>Результати тестування: аналіз усіх зібраних даних, включаючи ілюстрації, такі як гістограми та текстові описи результатів, а також коментарі користувачів, які можуть бути особливо ілюстративними чи інформативними. Залежно від того, кому ви подаєте звіт, цей розділ може містити кілька технічних подробиць, наприклад, тип статистичного аналізу.</li>
<li>Висновки та рекомендації: що ви порекомендуєте, на основі зібраних вами даних та ваших висновків? Запишіть, що добре спрацювало, що погано і чому. Вкажіть, що потрібно зробити, щоб поліпшити дизайн або просунутися з процесом вперед.</li>
</ul>
<p>Пам’ятайте, що звіт з юзабіліті може бути спрямований на низку інших ролей у вашому проєкті. Менеджери, швидше за все, просто потребуватимуть зведеного резюме та викладення того, як результати впливають на загальний графік проєкту. Інші дизайнери будуть більше зацікавлені у тому, як ви виконували свою оцінку та хотіли б отримати усі деталі. Розробників, ймовірно, зацікавлять лише ваші висновки та рекомендації. Переконайтеся, що ваш звіт структуровано та сформульовано відповідним чином для його аудиторії.[/vc_column_text][vc_single_image image=&#8221;3143&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0</i></p>
<p><em>Приклад звіту з юзабіліті, складеного у зведеній формі. Більшість подробиць повного звіту тут немає, і основна увага приділяється результатам. Однак ця форма ідеально підходить для керівників та менеджерів, які не мають часу та яких не цікавлять усі деталі.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<span style="font-size: 20px;"><strong>Аналітичний звіт</strong></span></p>
<p>Коли продукт розроблений, дизайн був випущений і пропрацював деякий час, ваша компанія може надати вам деякі аналітичні дані про використання. Вивчення цих даних може дати велике уявлення про те, як покращити зручність використання, особливо якщо ці дані містять переміщення користувачів та їхню поведінку у вашому продукті.</p>
<p>Наприклад, ви можете виявити, що багато користувачів веб-сайту електронного продажу не реєструються для завершення покупки. Чи означає це, що процес реєстрації недостатньо простий? Чи це означає, що вони не бачать, що існує такий варіант? Аналітичний звіт містить інформацію з цих даних та виділяє області, де проект може бути покращений. Хоча це привабливо просто вставляти красиві графічні елементи та діаграми, створені автоматично такими продуктами, як Google Analytics, але робота UX-дизайнера полягає не тільки в тому, щоб встановлювати факти, але й інтерпретувати їх. Таким чином, ваш звіт повинен містити дані, а також пояснення та рекомендації про те, що треба робити. Це також корисний запис, щоб ви могли побачити вплив змін дизайну на свій сайт після того, як ви визначили проблеми та спробували їх усунути.[/vc_column_text][vc_single_image image=&#8221;3145&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: pexels, pixabay.com. Copyright terms and license: CC0</i></p>
<p><em>Аналітичний звіт – це більше, ніж просто дані та візуалізація. Він повинен містити ваші власні пояснення поведінки користувачів і рекомендації про те, де можна поліпшити дизайн.</em>[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]</p>
<h2><strong>На закінчення</strong></h2>
<p>У статті 2015 року для Norman Nielsen group, спеціаліст з UX Пейдж Лобхаймер (Page Laubheimer) аналізував тип UX-результатів, який UX-розробники подавали найчастіше. Як повідомляється, найбільш часто створювалися вайрфрейми та прототипи, а також блок-схеми, карти сайтів та звіти з юзабіліті/аналітики.[/vc_column_text][vc_single_image image=&#8221;3146&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0</i></p>
<p><em>Аналіз найчастіше створюваних UX-результатів, згідно з групою Нормана Нільсена. Це показує частоту, з якою професіоналів UX просять створити специфічні результати та поділитись ними. Результати з більш низькою частотою попиту, як і раніше, створюються, але зазвичай ними не діляться з іншими.</em></p>
<p>Це те, що ми вважаємо “класичними” результатами UX, але один важливий момент, який слід мати на увазі, полягає в тому, що хоча ці результати виробляються та передаються іншим, багато інших типів результатів будуть створені, але ними ніколи не діляться з іншими (отже рейтинг нижче в цьому дослідженні).</p>
<p>Щоб створити вайрфрейм, чи не повинен дизайнер мати повне розуміння користувачів та їх потреб? Часто керівництво, клієнти та інші члени команди зацікавлені лише у тому типі результатів, які допомагають їм просувати свої завдання. Враховуючи це, типи результатів, які ви створюєте, можливо, потрібно “налаштовувати” відповідно до того, кому ви збираєтеся їх передавати.[/vc_column_text][vc_single_image image=&#8221;3147&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][vc_column_text]</p>
<p style="text-align: right;"><i>Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0</i></p>
<p><em>На цій діаграмі показані типи результатів, якими найбільш діляться з іншими членами команди розробників та зовнішніми клієнтами. Інтерактивний прототип – це результат, який кожен хоче бачити!</em></p>
<p>У вашій ролі UX-дизайнера вам завжди доведеться створювати результати для кожного етапу процесу дизайнерського мислення. Незалежно від того, чи залишаєте ви їх собі чи ділитеся ними з іншими, ви повинні практикувати свої навички, використовуючи настільки широкий спектр інструментів та методологій, наскільки це можливо, та ознайомитись з усіма типами результатів UX.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]</p>
<h2><strong>Посилання і де дізнатися більше:</strong></h2>
<p>Hero Image: Copyright holder: Mark Congiusta, Flickr. Copyright terms and license: CC BY 2.0</p>
<p>Лобхаймер П. (Laubheimer, P). (2015). Які кінцеві результати UX найчастіше створюються та передаються іншим?</p>
<p><a href="https://www.nngroup.com/articles/common-ux-deliverables/">https://www.nngroup.com/articles/common-ux-deliverables/</a></p>
<p>Teixeira, F. &amp; Braga, C. (2016). Методи та результати UX-дизайну</p>
<p><a href="https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d">https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d</a></p>
<p>Бабич Н. (Babich, N.) (2017). Повний перелік результатів UX</p>
<p><a href="https://uxplanet.org/a-complete-list-of-ux-deliverables-d62ccf1de434">https://uxplanet.org/a-complete-list-of-ux-deliverables-d62ccf1de434</a></p>
<p>Морвілл П. (Morville, P. (2009)) Результати UX</p>
<p><a href="http://semanticstudios.com/user_experience_deliverables/">http://semanticstudios.com/user_experience_deliverables/</a></p>
<p>Гудман, Е. (Goodman, E.) (2012). Як я навчився припинити турбуватися і любити результати взаємодій, 19 (5), 8-9.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ux-navchannya/7-kinczevyh-rezultativ-ux-shho-ya-robytymu-yak-ux-dyzajner.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>User-research: що це таке і навіщо вам потрібно це робити?</title>
		<link>https://www.ux-ui.top/ux-navchannya/user-research-shho-cze-take-i-navishho-vam-potribno-cze-robyty.html</link>
					<comments>https://www.ux-ui.top/ux-navchannya/user-research-shho-cze-take-i-navishho-vam-potribno-cze-robyty.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Thu, 10 May 2018 11:39:21 +0000</pubDate>
				<category><![CDATA[UX навчання]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=820</guid>

					<description><![CDATA[Коли йдеться про дослідження користувача (User-research), багато людей найчастіше думають про тестування зручності використання. У той час, коли тестування зручності використання, яке забезпечує простоту використання вашого дизайну, є важливою частиною дослідження, існує багато інших видів дослідження користувача, які просто необхідні в процесі створення продукту, орієнтованого на користувача.]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="brand-testimonial card">
<div class="brand-image"><img decoding="async" src="https://public-media.interaction-design.org/images/idf-logo.svg" alt="The IDF" width="75" /></div>
<div class="details">Оригінал статті: <a href="https://www.interaction-design.org/literature/article/user-research-what-it-is-and-why-you-should-do-it?ep=ux-ui" rel="nofollow">https://www.interaction-design.org/literature/article/user-research-what-it-is-and-why-you-should-do-it</a></div>
</div>
<p>&nbsp;</p>
<p><em>Коли йдеться про дослідження користувача (User-research), багато людей найчастіше думають про тестування зручності використання. У той час, коли тестування зручності використання, яке забезпечує простоту використання вашого дизайну, є важливою частиною дослідження, існує багато інших видів дослідження користувача, які просто необхідні в процесі створення продукту, орієнтованого на користувача. Спершу ми глибоко вдамося в те, що ж являє собою дослідження користувача (User-research). Потім ми надамо огляд про те, як ви можете використовувати дослідження користувача в процесі розробки вашого дизайну, перераховуючи три основні причини для проведення дослідження користувача, а саме: створити дизайн, який дійсно актуальний, легкий та приємний у використанні й розуміти повернення інвестицій (ROI) вашого UX дизайну.</em></p>
<h2><strong>ЩО ТАКЕ User-research? </strong></h2>
<p>Перш ніж ми розглянемо причини необхідності використання такого дослідження, давайте коротко поговоримо про те, що ми маємо на увазі під виразом User-research &#8211; «дослідження користувача» або «дослідження дизайну», як це іноді називається. Дослідження користувача включає широкий спектр методів. Це може означати все, що завгодно: від етнографічного інтерв&#8217;ю з вашою цільовою групою до класичного вивчення зручності користування для підрахунку метрики або повернення інвестицій (ROI) вашого UX дизайну.</p>
<p><strong>У всіх методах дослідження користувача загальним є те, що вони допомагають поставити людину в центр процесу створення дизайну продукту. </strong>Ви використовуєте дослідження користувача для натхнення вашого дизайну, для оцінки ваших рішень та для вимірювання вашого впливу. Дослідження користувача (та інші види дослідження) – це найчастіше глибоке занурення у кількісні та якісні методики.</p>
<ul>
<li>Опитування та формальні експерименти – це приклади інструментарію кількісних досліджень. Методи кількісного дослідження користувача припускають вимірювання поведінки користувача шляхом, який може бути прорахований та використаний для статистичного аналізу.</li>
<li>Інтерв&#8217;ю та (до певної міри) тести на зручність використання – це інструменти якісного дослідження. Вони частіше досліджують і передбачають отримання глибокого розуміння досвідів та щоденних звичок окремих користувачів чи груп користувачів.</li>
</ul>
<p>Звичайно, будь-яке дослідження має як переваги, так й недоліки. Фактично, будь-яке дослідження може бути використане для досягнення різних цілей. Який спосіб обрати залежить від того, чого ви хочете досягти, також від кількості практичних проблем, таких як: вид проєкту, над яким ви працюєте, ваш бюджет та ваші часові обмеження. Запам&#8217;ятавши це, розгляньмо кілька різних причин, чому вам варто залучати користувачів до процесу дизайну.</p>
<h3><strong>Три хороші причини для того щоб дослідити користувача</strong></h3>
<p>&nbsp;</p>
<p>«Емпатія – це серце дизайну. Без розуміння того, що бачать, відчувають та переживають інші, дизайн – безглузде завдання». &#8211; Тім Браун (Tim Brown), CEO компанії інновацій та дизайну IDEO.</p>
<p>Який тип дослідження користувача вам варто використовувати залежить як від вашого робочого процесу, так і від ваших причин, які спонукали вас робити таке дослідження. Ось три чудові причини для проведення дослідження користувача.</p>
<ol>
<li>Для створення дизайну, який є повністю актуальним для вашого користувача.</li>
<li>Для створення дизайну, який простий та приємний у використанні.</li>
<li>Для розуміння повернення інвестицій (ROI) вашого дизайну UX.</li>
</ol>
<p>&nbsp;</p>
<p>Повернімося до кожної з цих причин.</p>
<p>&nbsp;</p>
<ol>
<li>
<h4><strong>Для створення дизайну, що буде актуальним.</strong></h4>
</li>
</ol>
<p>Найбільш фундаментальна причина для проведення User-research – це те, що вони є єдиним шляхом для розуміння людей, які мають намір користуватися вашим дизайном. Якщо ви розумієте ваших користувачів, ви можете створювати дизайни, які є актуальними для них. Якщо у вас немає чіткого розуміння ваших користувачів, у вас немає жодного шляху, щоб дізнатися, коли ваш дизайн буде потрібним. Дизайн, який нерелевантний для його цільової аудиторії, ніколи не буде успішним.</p>
<p>Якщо ви використовуєте дизайн-мислення, ви повинні знати, що перший крок та ядро ​​процесу – це співпереживання до ваших користувачів. Дослідження користувача – це один із найкращих шляхів для здійснення цього. Проведення різних видів інтерв&#8217;ю та спостережень у контексті того, де вони використовуватимуть ваш дизайн – це загальноприйнятий метод проведення досліджень користувача. Здебільшого ми проводимо цей вид досліджень на початку проєкту, для того, щоб визначитись у тому, що загальний напрямок проєкту є релевантним для потенційних клієнтів та користувачів. В порядку забезпечення того, що ваш дизайн продовжує бути релевантним у процесі прогресу вашого проєкту, перевірки ваших ідей з перспективними користувачами на постійній основі – це життєва звичка, якої потрібно дотримуватись. Запитуйте їх про те, як вони сприймають ваш дизайн та як вони можуть представляти його використання або залучайте їх прямо до процесу дизайну, щоб впевнитися у тому, що ви на правильному шляху.</p>
<p>Розгляньмо приклад: у 2005 році, гігант електроніки на ринку Кореї Samsung зробив низку етнографічних досліджень користувачів, які повністю змінили шлях, яким він йшов під час розробки телевізорів. Об&#8217;єднавши інновації та стратегію консультації ReD Associates, представники Samsung відвідали людей у ​​різних країнах, щоб спостерігати те, як вони живуть і говорити з ними про їхні будинки та роль ТБ у їхніх будинках. Те, що вони дізналися, дуже здивувало їх.</p>
<p>Одночасно Samsung та інші великі ТБ виробники створили ТБ з такими технічними функціями, як високоякісна картинка та звучання. Телевізори були розроблені для того, щоб похвалитись їх технічними можливостями. Але те, що Samsung з&#8217;ясував, коли відвідував людей, було те, що вони дивляться на ТБ більше, як елемент інтер’єру. Тому замість того, щоб демонструвати свій дорогий телевізор з усіма його технологічними можливостями, вони намагалися навіть приховати це.</p>
<p>&nbsp;</p>
<p>Наслідуючи цей інсайт («insight – усвідомлення, розуміння»), Samsung змінив свою стратегію дизайну радикально, переміщуючи вбудовані динаміки для того, щоб зробити телевізор тоншим та створити більш лаконічний, мінімалістичний дизайн, який легко підійде у різноманітні кімнати людей. Технічні можливості були так само важливі, але вони повинні були б бути збалансовані з обраним дизайном, який робив телевізори «стрункими» для людських будинків. «Будинок» став гаслом і Samsung дуже працював над трансформацією. Завдання полягало у тому, щоб уникнути створення вітальні, як демонстраційного залу або спортивного бару та прийти до «гармонії». До 2007 року Samsung примножив свою частку на світовому ТБ – ринку, тому що він довів: щоб продукт був актуальним – потрібно розуміти своїх користувачів.</p>
<figure id="attachment_600" aria-describedby="caption-attachment-600" style="width: 1024px" class="wp-caption alignnone"><img fetchpriority="high" decoding="async" class="wp-image-600 size-large" src="https://www.ux-ui.top/wp-content/uploads/2018/03/To-Create-Designs-1024x682.jpg" alt="" width="1024" height="682" srcset="https://www.ux-ui.top/wp-content/uploads/2018/03/To-Create-Designs-1024x682.jpg 1024w, https://www.ux-ui.top/wp-content/uploads/2018/03/To-Create-Designs-600x399.jpg 600w, https://www.ux-ui.top/wp-content/uploads/2018/03/To-Create-Designs-300x200.jpg 300w, https://www.ux-ui.top/wp-content/uploads/2018/03/To-Create-Designs-768x511.jpg 768w, https://www.ux-ui.top/wp-content/uploads/2018/03/To-Create-Designs-700x466.jpg 700w, https://www.ux-ui.top/wp-content/uploads/2018/03/To-Create-Designs.jpg 1472w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption id="caption-attachment-600" class="wp-caption-text">Author/Copyright holder: Samsung Newsroom. Copyright terms and licence: CC BY-NC-SA 2.0</figcaption></figure>
<p>&nbsp;</p>
<p>Дослідження користувачів, проведене Samsung, змінило стратегію ТБ розробки до фокуса на мінімалістичний дизайн, який підходить до будинків покупців. Хоча телевізори не стали меншими, все екстра-нове було прибрано.</p>
<ol start="2">
<li>
<h4><strong>Створення дизайну, легкого та приємного у використанні</strong></h4>
</li>
</ol>
<p>&#8220;Якщо у користувача виникає проблема, то це наша проблема&#8221;. &#8211; Стів Джобс (Steve Jobs), співзасновник Apple Computers.</p>
<p>У всіх продуктів має бути високий рівень зручності використання («usability» – (від англ.), зручність використання) та тести користувача можуть бути великою допомогою у досягненні цього. Дні, коли запрограмовані технології були інструментом, який використовуватиметься лише експертами, давно минули. Люди очікують від продукту легкості у навчанні та простоти у використанні. Вони очікують взяти їх і зробити з ними все, тільки думаючи про те, чого вони сподіваються досягти, не думаючи про продукти. Якщо досвід вашого користувача поганий &#8211; з&#8217;являються шанси, що люди перейдуть на інший продукт. Поки ви працюєте в полі, де немає конкурентів, високий рівень зручності використання (у поєднанні з високою якістю досвіду користувача) має важливе значення для комерційного успіху будь-якого продукту. Не враховуючи, що ваші користувачі будуть любити вас за створення чудового досвіду користувача. Навіть якщо ви розробляєте продукт для, наприклад, вузько спеціалізованого робочого середовища, де користувачі не мають альтернативи, продукти з високим рівнем зручності використання зроблять робочий процес швидше, безпечнішим та ефективнішим.</p>
<p>WikiWand – це добрий приклад того, як компанія живе, забезпечуючи відмінний досвід користувача. Їхній продукт – це плагін, який змінює дизайн статей Wikipedia і робить їх більш привабливими та дружелюбними для користувача. WikiWand не надає різного контенту з класичної сторінки Wikipedia, але компанія має тисячі користувачів, які хвалять їх за чудовий досвід користувача.</p>
<figure id="attachment_601" aria-describedby="caption-attachment-601" style="width: 735px" class="wp-caption alignnone"><img decoding="async" class="wp-image-601 size-full" src="https://www.ux-ui.top/wp-content/uploads/2018/03/Designs-That-are-Easy.png" alt="" width="735" height="273" srcset="https://www.ux-ui.top/wp-content/uploads/2018/03/Designs-That-are-Easy.png 735w, https://www.ux-ui.top/wp-content/uploads/2018/03/Designs-That-are-Easy-600x223.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/03/Designs-That-are-Easy-300x111.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/03/Designs-That-are-Easy-700x260.png 700w" sizes="(max-width: 735px) 100vw, 735px" /><figcaption id="caption-attachment-601" class="wp-caption-text">Author/Copyright holder: Wikimedia Foundation and WikiWand. Copyright terms and licence: Fair Use.</figcaption></figure>
<p><em>Зліва – класичний інтерфейс Вікіпедії, праворуч – версія WikiWand тієї ж статті. Зміст той самий, але досвід відрізняється.</em></p>
<p>&nbsp;</p>
<p>Коли ви розробляєте або розвиваєте продукт, ви стаєте основним експертом того, як його використовувати та які функції він має. Через те, що ви знаєте свій продукт настільки добре, однак, ви можете також стати сліпим щодо функціональності вашого продукту, яка є складною у використанні. Як дизайнерам, нам потрібен цей рівень розуміння наших продуктів, але це також означає, що ми можемо занадто легко зрушити далеко від тієї ж точки зору, що і наші користувачі. Автор особисто брав участь у багатьох проєктах, де дизайнери чудово знають ідеї інтерфейсу та функціональності продукту, однак відокремити зрозуміле від не дуже зрозумілого насправді складно для них. Ця тенденція бачення речей з погляду цієї професії, то що ми називаємо “deformation professionnelle” – і не відступати, щоб упіймати реальність того, що походить від нового, загального кута, природно.</p>
<p>&nbsp;</p>
<p>Однак, на щастя, ви можете уникнути багатьох проблем зі зручністю використання, дотримуючись різних керівних принципів та емпіричних правил. Але завжди будуть ситуації, коли керівництво не поширюється, або де різні рекомендації кажуть вам різні речі. Ви також можете розробляти цільову групу, таку як діти, де звичайні правила не застосовуються. Це означає, що тестування власного досвіду вашого продукту завжди є гарною ідеєю. Однак, нам треба бути реалістичними тут – це не справа одного пострілу. &#8220;Постійність&#8221; &#8211; це назва гри. Тестування користувача працює краще, коли воно інтегроване, як частина вашого робочого процесу, тому ви можете протестувати ваш продукт інтерактивно і з самої начальної стадії розвитку в майбутньому. Ранні тести – те, що ми можемо зробити на примітивних прототипах – наприклад, використовуючи папір; звідти ми просуваємося до більш вишуканих прототипів, доки не отримаємо щось схоже на кінцевий продукт. Якщо ви тільки починаєте тестувати, коли у вас є майже готовий продукт, ви ризикуєте дуже серйозно у тому, що ваші результати можуть бути занадто запізнілими для внесення великих змін до продукту. Наприклад, якщо все програмне забезпечення вже зроблено або якщо ви не можете змінити дату випуску, то ви матимете проблему. Отже, залишайтеся з вашим дизайном до самого кінця процесу – буває дивно від того, що може виникнути у результаті одинадцятої години тесту &#8220;останньої&#8221; версії, яку ви запланували до випуску.</p>
<p>&nbsp;</p>
<ol start="3">
<li>
<h4>Зрозуміти повернення інвестицій вашого UX дизайну</h4>
</li>
</ol>
<p>Хоча важливість гарного дизайну наразі стала дуже поширеною, UX дизайнери та дослідники досі змушені боротися за ресурси, які здатні виконувати свою роботу.</p>
<p>Виконавці та стейкхолдери іноді не бачать цінність в інвестиціях у дослідження користувачів та в UX – дизайн. Дизайн UX та дослідження користувачів не такі відчутні, як, наприклад, нові функції або виправлення помилок програмного забезпечення. Тому, ігноруючи їхню цінність, може статися все набагато простіше. Якщо ресурсів стає менше, UX часто є однією з перших областей, які можуть зазнавати скорочення. Причина в тому, що наслідки не так одразу відчуваються, як коли ви заощаджуєте на розвиток або в подібних областях. Якщо ви робите скорочення, наприклад, у розробці програмного забезпечення, ви зможете одразу побачити, що наслідки включають скорочення можливостей або наявність багів програмного забезпечення. Однак, якщо ви робите скорочення в UX, ви не відчуваєте наслідків, поки ваш продукт не досягне ваших користувачів. Хоча ми можемо легко посперечатися про цінність UX, це набагато ефективніше, якщо ми можемо продемонструвати це.</p>
<p>Саме тут дослідження, що показують рентабельність інвестицій (ROI) у зусиллях UX, коштують своєї ваги у золоті (або принаймні від ваги видруківок). Якщо ви можете показати, що зміни, які ви внесли в дизайн, призвели до збільшення продажів, призвели до збільшення кількості клієнтів або зробили робочі процеси більш ефективними, у вас є набагато сильніший приклад для інвестицій в UX. Дослідження користувача для вимірювання ефекту вашого дизайну в основному кількісні й можуть приймати різні форми. Ви можете робити тести A/B під час розробки, які порівнюють різні версії вашого дизайну або ви можете робити дослідження після випуску продукту для вимірювання відмінностей у шаблонах використання. З додатками та веб-сторінками ви часто створюєте різні типи аналітики, щоб інформувати про різні шаблони користувача.</p>
<figure id="attachment_602" aria-describedby="caption-attachment-602" style="width: 1024px" class="wp-caption alignnone"><img decoding="async" class="wp-image-602 size-large" src="https://www.ux-ui.top/wp-content/uploads/2018/03/amazon-1024x683.jpg" alt="" width="1024" height="683" srcset="https://www.ux-ui.top/wp-content/uploads/2018/03/amazon-1024x683.jpg 1024w, https://www.ux-ui.top/wp-content/uploads/2018/03/amazon-600x400.jpg 600w, https://www.ux-ui.top/wp-content/uploads/2018/03/amazon-300x200.jpg 300w, https://www.ux-ui.top/wp-content/uploads/2018/03/amazon-768x512.jpg 768w, https://www.ux-ui.top/wp-content/uploads/2018/03/amazon-700x467.jpg 700w, https://www.ux-ui.top/wp-content/uploads/2018/03/amazon.jpg 1473w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption id="caption-attachment-602" class="wp-caption-text">Author/Copyright holder: Robert Scoble. Copyright terms and licence: CC BY 2.0</figcaption></figure>
<p>Гігант інтернет-магазину Amazon – гарний приклад компанії, яка побудувала свій успіх, зосередившись на досвіді клієнта протягом усієї подорожі клієнта та постійно відстежуючи роботу користувача. Засновник та головний виконавчий директор Amazon Джефф Безос стверджує, що краще мати довгострокову орієнтацію на досвід роботи з клієнтами, ніж короткостроковий фокус на прибутки – часто до розчарувань акціонерів Amazon, які віддали б перевагу прибутку тут і зараз. У листі акціонерів у 2013 році він відповів деяким із його критиків, сказавши:</p>
<p>&nbsp;</p>
<p>«&#8230; Я думаю, що довгострокове мислення квадратизує навіть коло. Випереджальне охоплення клієнтів отримує довіру, яка заробляє більше бізнесу у цих клієнтів, навіть на нових бізнес-аренах. Візьміть довгостроковий погляд, де інтереси клієнтів та акціонерів збігаються ».</p>
<p>Amazon рекомендує розробникам постійно проводити тестування A/B різних версій інтерфейсів користувача, щоб вони завжди оновлювалися, і вони надали програмний інструмент, який допоможе легко налаштувати тести. Станом на 2015 рік Amazon був найбільшим інтернет-магазином у світі та найціннішим роздрібним продавцем у США. Тому можна стверджувати, що стратегія Джеффа Безоса була успішною.</p>
<p>Amazon.com відомий своєю особливою увагою до досвіду роботи з клієнтами. Не випадково, що філософія далекоглядності продовжує утримувати компанію на високому рівні, оскільки вона користується віддачею далекосяжних рішень.</p>
<h3>Візьми з собою</h3>
<p>Тут ми показали три вагомі причини для дослідження користувачів, і ми торкнулися того, коли в процесі розробки ви можете інтегрувати дослідження користувачів. Ось ще три причини:<br />
Проводьте дослідження користувачів, щоб забезпечити створення продуктів, які справді стосуються вашої цільової групи.</p>
<p>Проводьте дослідження користувачів, щоб забезпечити чудову роботу ваших продуктів.</p>
<p>Проведіть дослідження користувачів, щоб показати рентабельність ваших проектних зусиль.</p>
<p>Ви можете і повинні виконувати дослідження користувачів на всіх етапах процесу проєктування. Ви вивчаєте, перш ніж розпочинати проєктування, щоб зрозуміти, що потрібно вашій цільовій групі. Ви виконуєте ітераційні тести під час розробки, щоб переконатися, що інтерфейс користувача знаходиться на вірному шляху, і ви зможете виміряти ефект свого дизайну після випуску вашого продукту. Цей підхід «святої трійці» може тримати вас на три кроки попереду, оскільки кожен вимір вашого випуску буде розглянутий, проаналізований та протестований, перш ніж сісти, щоб побачити результати остаточного тесту (ROI), переконайтесь, що ви отримали виграшний проєкт.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ux-navchannya/user-research-shho-cze-take-i-navishho-vam-potribno-cze-robyty.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Принцип послідовності та стандартів у UI дизайні</title>
		<link>https://www.ux-ui.top/ui-navchannya/pryntsyp-poslidovnosti-ta-standartiv-u-ui-dyzayni.html</link>
					<comments>https://www.ux-ui.top/ui-navchannya/pryntsyp-poslidovnosti-ta-standartiv-u-ui-dyzayni.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Thu, 26 Apr 2018 20:51:27 +0000</pubDate>
				<category><![CDATA[UI навчання]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=761</guid>

					<description><![CDATA[Коли ви розробляєте дизайн інтерфейсу користувача, важливо мати на увазі взаємодії, які відбуваються між людським пізнанням і екраном, для якого ви проектуєте. Зробити речі простіше для користувачів означає не примушувати їх до вивчення нових зображень або наборів інструментів для кожного завдання. Скорочення тривалості процесу мислення шляхом усунення плутанини, також є важливим, коли справа доходить до поліпшення досвіду користувача.]]></description>
										<content:encoded><![CDATA[<div class="brand-testimonial card">
<div class="brand-image"><img decoding="async" src="https://public-media.interaction-design.org/images/idf-logo.svg" alt="The IDF" width="75" /></div>
<div class="details"><span style="font-weight: 400;">Оригінал статті:</span><a href="https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design?ep=ux-ui" rel="nofollow">https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design</a></div>
</div>
<p><span style="font-weight: 400;">Автор &#8211; Еуфемія Вонг (Euphemia Wong)</span></p>
<p><span style="font-weight: 400;">Навчитися створювати дизайн з урахуванням послідовності і стандартів та зрозумійте важливість того, щоб включити їх у вашу роботу. Отримані від Якоба Нільсена і Рольфа Моліча (Jakob Nielsen і Rolf Molich) рекомендації по інтерфейсу користувача “Послідовність і стандарти” виявляються в багатьох широко використовуваних продуктах, створених одними з найбільш успішних компаній. Такі продукти, як Adobe Photoshop, випущені ще у 1990-х роках, і Google Gmail, випущені в середині 2000-х років &#8211; це лише деякі з найпопулярніших продуктів, які демонструють це важливе правило. Ця стаття розповість, як розпізнавати послідовність і стандарти та пояснить, чому вони важливі в дизайні інтерфейсу користувача (User Interface Design, UI Дизайн).</span></p>
<h3>Дві основні причини для послідовності і стандартів в UI дизайні</h3>
<p><span style="font-weight: 400;">Коли ви розробляєте дизайн інтерфейсу користувача, важливо мати на увазі взаємодії, які відбуваються між людським пізнанням і екраном, для якого ви проектуєте. Зробити речі простіше для користувачів означає не примушувати їх до вивчення нових зображень або наборів інструментів для кожного завдання. Скорочення тривалості процесу мислення шляхом усунення плутанини, також є важливим, коли справа доходить до поліпшення досвіду користувача.</span></p>
<p><strong>1. Скорочення навчання</strong></p>
<p><span style="font-weight: 400;">Послідовність обмежує кількість способів дій та операцій, які гарантують те, що користувачам не потрібно вивчати нові матеріали для кожного завдання. Крім того, встановлення норм проєктування, таких як виконання угоди платформи, дозволяє користувачам виконувати нові завдання без необхідності вивчення нового набору інструментів. Це може бути простою концепцією, але є багато прикладів, які демонструють відсутність послідовності в їхніх проєктах. Одним із таких прикладів, який показує цю проблему, є веб-сайт Xfinity від Comcast Corporation, американської медіа-компанії. На їхньому сайті не тільки другорядне меню непослідовно майже кожного разу, коли користувач натискає на іншу сторінку, воно також непослідовно стосовно основного меню. Подивімось та порівняємо три різні сторінки веб-сайту: Домашня сторінка, My Xfinity та ТБ (Homepage, My Xfinity, and TV.).</span></p>
<p><em><br />
<img loading="lazy" decoding="async" class=" wp-image-710 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/homepage-of-the-Xfinity-website.png" alt="" width="828" height="490" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/homepage-of-the-Xfinity-website.png 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/homepage-of-the-Xfinity-website-600x355.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/homepage-of-the-Xfinity-website-300x178.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/homepage-of-the-Xfinity-website-768x455.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/homepage-of-the-Xfinity-website-700x415.png 700w" sizes="auto, (max-width: 828px) 100vw, 828px" /></em></p>
<p style="text-align: right;"><i>Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use.</i></p>
<p><em><span style="font-weight: 400;">Це домашня сторінка сайту Xfinity. Зверніть увагу, як анотована область, що виділяє як основний, так і вторинний рядок меню, буде відрізнятися в міру того, як користувач натискає на інші сторінки.</span></em></p>
<p><img loading="lazy" decoding="async" class=" wp-image-711 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/TV-page-of-the-Xfinity-website.png" alt="" width="809" height="478" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/TV-page-of-the-Xfinity-website.png 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/TV-page-of-the-Xfinity-website-600x355.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/TV-page-of-the-Xfinity-website-300x177.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/TV-page-of-the-Xfinity-website-768x454.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/TV-page-of-the-Xfinity-website-700x414.png 700w" sizes="auto, (max-width: 809px) 100vw, 809px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use.</i></p>
<p><em><span style="font-weight: 400;">Це ТВ-сторінка сайту Xfinity. Що вводить користувача в оману, так це те, як кольори, розташування та стилі шрифтів відрізняються від домашньої сторінки.</span></em></p>
<p><em> <img loading="lazy" decoding="async" class=" wp-image-712 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/My-Xfinity-page-of-the-Xfinity-website.png" alt="" width="821" height="485" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/My-Xfinity-page-of-the-Xfinity-website.png 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/My-Xfinity-page-of-the-Xfinity-website-600x355.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/My-Xfinity-page-of-the-Xfinity-website-300x177.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/My-Xfinity-page-of-the-Xfinity-website-768x454.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/My-Xfinity-page-of-the-Xfinity-website-700x414.png 700w" sizes="auto, (max-width: 821px) 100vw, 821px" /></em></p>
<p style="text-align: right;"><i>Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use</i></p>
<p><em><span style="font-weight: 400;">Це сторінка My Xfinity веб-сайту Xfinity. Всі три сторінки, розглянуті вище, мають дуже різні кольори, розташування та стилі шрифтів у меню навігації. Ці відмінності роблять його заплутаним і дезорієнтуючим для користувача, оскільки він більше не відчувається як єдиний сайт, а ніби це три різні компанії.</span></em></p>
<p><strong>2. Усунення плутанини</strong></p>
<p><span style="font-weight: 400;">Користувачі схильні застосовувати правила, які вони зазнали на своєму досвіді за межами вашого сайту або продукту, приносячи набір власних очікувань. Знаючи це, ми повинні пам&#8217;ятати про те, чи ми викликаємо плутанину та відчуження, коли відхиляємося від стандартів та угод дизайну. Крім того, користувачі не повинні витрачати час на те, щоб зрозуміти, чи дійсно різні слова, взаємодії або дії означають те саме в контексті вашого продукту. Плутанина виникає, коли люди не можуть &#8220;зібрати докупи&#8221; інформацію. Коли користувачеві заважають досягти своєї мети, зрозуміло, що вони можуть почувати себе сердитими або засмученими. Не секрет, що плутанина, як правило, викликає розчарування, а розчарування призводить до поганого користувальницького досвіду. Тому ви завжди повинні прагнути усунути плутанину в кожному пункті, де це можливо.</span></p>
<h3>П&#8217;ять способів досягнення послідовності у вашій роботі</h3>
<p><span style="font-weight: 400;">Існує багато аспектів для досягнення послідовності у вашому інтерфейсі користувача. Ось 5 речей, на які можна звернути увагу, щоб поліпшити послідовність ваших проектів.</span></p>
<p><strong>1. Ваш вибір мови</strong></p>
<p><span style="font-weight: 400;">Мова, яку ви використовуєте як у маркетинговій копії, так і у формулюванні, що використовується в шляхах взаємодії користувачів (user flow), може не тільки вплинути на сприйняття вашим користувачем вашого продукту, але й бути плутаниною, коли ви використовуєте іншу термінологію для представлення того самого. Це стосується не тільки вибраних вами термінів, а й тону, в якому ви передаєте повідомлення.</span></p>
<p><span style="font-weight: 400;">Наприклад, якщо ви налякаєте вашого користувача серйозним та загрозливим повідомленням про помилку, коли він переглядає сайт електронної торгівлі, який демонструє спільний дружній тон, це обов&#8217;язково вб&#8217;є хороший user experience.</span></p>
<p><span style="font-weight: 400;">Коли речі означають те саме або виконують одну і ту ж операцію, вони повинні бути представлені таким же чином, як у випадку з поштовим сервісом Google, Gmail. На основі стилю організації клієнтських поштових додатків теки Gmail позначені як “Вхідні”, “Чернетки”, “Надіслані листи” тощо.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-713 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Gmail-displays.jpg" alt="" width="782" height="450" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Gmail-displays.jpg 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/Gmail-displays-600x345.jpg 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Gmail-displays-300x173.jpg 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Gmail-displays-768x442.jpg 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Gmail-displays-345x198.jpg 345w, https://www.ux-ui.top/wp-content/uploads/2018/04/Gmail-displays-700x403.jpg 700w" sizes="auto, (max-width: 782px) 100vw, 782px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: David Bruce Jr. 2011. Copyright terms and licence: CC BY 2.0</i></p>
<p><em><span style="font-weight: 400;">Ярлики тек у версії Gmail 2011 зображають безліч знайомих опцій. Мова, яка використовується для цих тек, показує послідовність, оскільки вона використовує мітки &#8220;Вхідні&#8221;, &#8220;Чернетки&#8221; та &#8220;Спам&#8221; &#8211; вони знайомі всім, хто використовував поштові програми в минулому.</span></em></p>
<p><strong>2. Застосування елементів інтерфейсу користувача так, як вони спочатку визначені</strong></p>
<p><span style="font-weight: 400;">Елементи інтерфейсу користувача, які зазвичай використовуються, такі як вікна повідомлень, рядки меню, значки, смуги прокручування та перемикачі, є графічними елементами, які зазвичай послідовні й мають візуальні зображення, які розуміють користувачі.</span></p>
<p><span style="font-weight: 400;">Наприклад, селективні кнопки (radio buttons) використовуються, коли дозволено лише одну опцію. Прапорці (checkboxes) з іншого боку мають використовуватися лише тоді, коли користувачеві дозволено кілька варіантів. Багато в чому ми можемо бачити, як HTML5 витіснив технологію Flash на кінці 2014 року. Однією з причин є, мабуть, простота застосування та простота використання, яку розробники, дизайнери та користувачі можуть отримати в результаті послідовності та стандартів HTML5 у визначенні їх UI елементів.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-714 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Radio-buttons.png" alt="" width="775" height="446" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Radio-buttons.png 518w, https://www.ux-ui.top/wp-content/uploads/2018/04/Radio-buttons-300x173.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Radio-buttons-345x198.png 345w" sizes="auto, (max-width: 775px) 100vw, 775px" /></p>
<p><em><span style="font-weight: 400;">Селективні кнопки допускають лише один варіант. Тому для вбудованих селективних кнопок HTML розумно поводитись у функціональності так само.</span></em></p>
<p><img loading="lazy" decoding="async" class=" wp-image-715 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Checkboxes.png" alt="" width="786" height="376" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Checkboxes.png 518w, https://www.ux-ui.top/wp-content/uploads/2018/04/Checkboxes-300x144.png 300w" sizes="auto, (max-width: 786px) 100vw, 786px" /></p>
<p><em>Прапорці допускають більше одного варіанта. Тому для вбудованих прапорців HTML має сенс поводитися у функціональності так само.</em></p>
<p><span style="font-weight: 400;">Поганий приклад послідовності у виборі UI елементів представлений у розділі коментарів, який раніше був на веб-сайті BBC. Найбільш високо оцінені коментарі користувачів позначаються стрілкою на південь, але користувачі повинні натиснути стрілку на північ, щоб збільшити рейтинг коментарів. Використання південної стрілки для подання коментарів з найвищою оцінкою також не є інтуїтивним; цифри, що збільшуються, йдуть вгору, а не вниз. Коли користувачі переглядають розділ коментарів на веб-сторінці, вони можуть просто діяти відповідно до стрілок, не читаючи ярлики дій, що може призвести до неправильного вибору.</span></p>
<p><span style="font-weight: 400;">Нездатність використовувати широко застосовувані візуальні зображення змусить користувача свідомо взаємодіяти з інтерфейсом користувача незручним чином, що зменшить швидкість, з якою вони могли б здійснювати навігацію і виконання бажаних завдань.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-716 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/BBC-Comment-section.png" alt="" width="801" height="414" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/BBC-Comment-section.png 788w, https://www.ux-ui.top/wp-content/uploads/2018/04/BBC-Comment-section-600x310.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/BBC-Comment-section-300x155.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/BBC-Comment-section-768x397.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/BBC-Comment-section-700x362.png 700w" sizes="auto, (max-width: 801px) 100vw, 801px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: BBC. Copyright terms and licence: Fair Use.</i></p>
<p><em><span style="font-weight: 400;">Розділ BBC Comment показує стрілку вниз для найвищої оцінки і стрілку вгору для найнижчої оцінки. Це відображення є непослідовним та заплутаним для користувачів, оскільки поняття “найвищий” зазвичай є синонімом стрілки вгору, а “нижній” – синонімом стрілки вниз.</span></em></p>
<p><em> </em></p>
<p><strong>3. Використання різних усталених угод при виборі схеми розташування</strong></p>
<p><span style="font-weight: 400;">Це, звичайно, спірно чи має дизайнер &#8220;копіювати&#8221;, як інші люди планують свої веб-сайти або програми. Однак, коли ви розробляєте з огляду на перспективу та сприйняття користувача, важливо зрозуміти, що люди мають сильну пам&#8217;ять про те, де речі візуально розташовані на екрані. Ви повинні використовувати цю характеристику, резервуючи зазвичай використовувані місця розташування для різних графічних елементів, таких як наявність логотипу в лівому верхньому кутку, поля пошуку в правому верхньому кутку, значок виходу в правому верхньому куті й т.д.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-717 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Microsoft.png" alt="" width="826" height="456" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Microsoft.png 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/Microsoft-600x331.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Microsoft-300x166.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Microsoft-768x424.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Microsoft-700x387.png 700w" sizes="auto, (max-width: 826px) 100vw, 826px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: Microsoft Corporation. Copyright terms and licence: Fair Use.</i></p>
<p><img loading="lazy" decoding="async" class=" wp-image-718 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Apple.png" alt="" width="828" height="454" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Apple.png 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/Apple-600x329.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Apple-300x164.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Apple-768x421.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Apple-700x383.png 700w" sizes="auto, (max-width: 828px) 100vw, 828px" /></p>
<p style="text-align: right;"><small><i>Author/Copyright holder: Apple Inc. Copyright terms and licence: Fair Use.</i></small></p>
<p><em><span style="font-weight: 400;">І Microsoft, і Apple розміщують свій логотип у верхньому лівому кутку, а поле пошуку – у верхньому правому куті їхніх веб-сайтів. Така форма послідовності у схемі розташування допомагає користувачам почуватися менш дезорієнтованими, коли вони переглядають новий та незнайомий сайт.</span></em></p>
<p><strong>4. Дизайн для очікувань користувачів</strong></p>
<p><span style="font-weight: 400;">Переконайтеся, що у вас є можливості та функції, які користувачі очікували побачити на вашому сайті. Наприклад, на сайті авіакомпанії має бути система бронювання квитків, а на сайті обміну музикою має бути медіаплеєр.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-719 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/video-sharing-website-like-YouTube.png" alt="" width="801" height="455" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/video-sharing-website-like-YouTube.png 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/video-sharing-website-like-YouTube-600x341.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/video-sharing-website-like-YouTube-300x170.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/video-sharing-website-like-YouTube-768x436.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/video-sharing-website-like-YouTube-700x397.png 700w" sizes="auto, (max-width: 801px) 100vw, 801px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: Youtube. Copyright terms and licence: Fair Use.</i></p>
<p><em><span style="font-weight: 400;">Очікується, що на сайті відеообміну, такому як YouTube, з&#8217;явиться відеоплеєр. Це чудовий приклад послідовності в тому, що функції та функціональні можливості сайту підтримують те, що очікує користувач.</span></em></p>
<p><strong>5. Створення послідовних візуальних елементів на вашому сайті</strong></p>
<p><span style="font-weight: 400;">Переконайтеся, що візуальні елементи є послідовними на вашому сайті. Контент, елементи інтерфейсу користувача, шрифти, фони і кольори повинні бути в гармонії і відчуватися послідовними в кожній точці взаємодії. Як згадувалося вище, дотримуватися технічних угод, які у формі HTML5 і CSS3, – це із способів збереження послідовності. Тим часом, брендинг та посібник зі стилю допомагає в тому випадку, коли стикаєшся з дизайнерськими рішеннями, такими як кольори та шрифти.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-720 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/example-of-a-style-guide-and-branding-manual.jpg" alt="" width="816" height="612" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/example-of-a-style-guide-and-branding-manual.jpg 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/example-of-a-style-guide-and-branding-manual-600x450.jpg 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/example-of-a-style-guide-and-branding-manual-300x225.jpg 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/example-of-a-style-guide-and-branding-manual-768x576.jpg 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/example-of-a-style-guide-and-branding-manual-800x600.jpg 800w, https://www.ux-ui.top/wp-content/uploads/2018/04/example-of-a-style-guide-and-branding-manual-700x525.jpg 700w" sizes="auto, (max-width: 816px) 100vw, 816px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: Jan-Alfred Barclay. Behance. Copyright terms and licence: CC BY-NC 4.0</i></p>
<p><em><span style="font-weight: 400;">Приклад посібника зі стилю та посібника з брендингу, розробленого для компанії «Goodnyt». Наявність посібника зі стилю та брендингу допоможе вам переконатися, що ваші візуальні елементи послідовні на вашому сайті.</span></em></p>
<p><span style="font-weight: 400;">Поганий приклад послідовності у виборі кольорів та шрифтів можна побачити у версії мобільного інтерфейсу Google Gmail від 2013 року. Хоча можна посперечатися, що &#8220;значення&#8221; в даному випадку не відображено, очевидно, що досвід користувача майже завжди погіршується в результаті будь-яких дивних відмінностей у візуальних елементах між екранами.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-721 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/screenshot-of-the-Gmail-app-s.jpg" alt="" width="734" height="648" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/screenshot-of-the-Gmail-app-s.jpg 590w, https://www.ux-ui.top/wp-content/uploads/2018/04/screenshot-of-the-Gmail-app-s-300x265.jpg 300w" sizes="auto, (max-width: 734px) 100vw, 734px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: Google Inc. Copyright terms and licence: Fair Use</i></p>
<p><span style="font-weight: 400;"> </span></p>
<p><em><span style="font-weight: 400;">Скріншот мобільного інтерфейсу програми Gmail, коли він був вперше представлений у 2013 році, показує непослідовність у виборі кольорових прямокутників та стилів шрифтів.</span></em></p>
<h3>На закінчення</h3>
<p><span style="font-weight: 400;">Послідовність і стандарти визнаються основним принципом дизайну та повинні застосовуватися в усьому вмісті вашого продукту та у всіх взаємодіях усередині нього. Є кілька аспектів послідовності, на які ми можемо звернути увагу при удосконаленні наших дизайнів, включаючи мову, яку ми використовуємо, елементи інтерфейсу користувача, які ми вибираємо, спосіб розміщення нашого сайту, функції та можливості, які ми включаємо, а також візуальні компоненти, які ми визначаємо, такі як колір та шрифт.</span></p>
<p><span style="font-weight: 400;">У той час як послідовність допомагає поліпшити інтерфейс користувача, усуваючи непотрібне навчання і плутанину для ваших користувачів, важливо пам&#8217;ятати, що ви повинні використовувати його, коли це необхідно, не відмовляйтеся через нього від інновацій по дизайнерським ідеям там, де це має сенс.</span></p>
<p><span style="font-weight: 400;">Дотримання стандартів, угод та послідовності – все це має бути тим, що ви повинні використовувати у своїх інтересах. Це звільнить вас від щодо тривіальних дизайнерських рішень. Це допоможе вам заощадити час та звільнить ваш розум, щоб ви могли ще більше покращити свої дизайни та користувальницький досвід для своїх користувачів.</span></p>
<p><strong> </strong></p>
<h3>Посилання і де дізнатися більше</h3>
<p><span style="font-weight: 400;">Щоб знайти додаткову інформацію про “Підвищення пояснювальної сили евристики юзабіліті” Якоба Нільсена, дивіться тут: </span></p>
<p><a href="https://static.aminer.org/pdf/PDF/000/089/679/enhancing_the_explanatory_power_of_usability_heuristics.pdf">https://static.aminer.org/pdf/PDF/000/089/679/enhancing_the_explanatory_power_of_usability_heuristics.pdf</a></p>
<p><span style="font-weight: 400;">Щоб дізнатися більше про різницю між мистецтвом і дизайном, дивіться тут:</span></p>
<p><a href="http://www.hongkiat.com/blog/design-vs-art/">http://www.hongkiat.com/blog/design-vs-art/</a></p>
<p><span style="font-weight: 400;">Щоб дізнатися більше про різні аспекти послідовності, дивіться тут:</span></p>
<p><a href="http://www.sitepoint.com/why-consistency-is-critical/">http://www.sitepoint.com/why-consistency-is-critical/</a></p>
<p><span style="font-weight: 400;">Щоб дізнатися більше про збалансовану послідовність та інновації, будь ласка, дивіться тут:</span></p>
<p><a href="http://www.uxmatters.com/mt/archives/2010/07/achieving-and-balancing-consistency-in-user-interface-design.php">http://www.uxmatters.com/mt/archives/2010/07/achieving-and-balancing-consistency-in-user-interface-design.php</a></p>
<p><em>Hero Image: Author/Copyright holder: GraphBerry. Deviant Art. Copyright terms and license: CC BY-SA 3.0</em></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ui-navchannya/pryntsyp-poslidovnosti-ta-standartiv-u-ui-dyzayni.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Ментальні моделі у дизайні</title>
		<link>https://www.ux-ui.top/ux-navchannya/mentalni-modeli-u-dyzajni.html</link>
					<comments>https://www.ux-ui.top/ux-navchannya/mentalni-modeli-u-dyzajni.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Thu, 26 Apr 2018 10:33:08 +0000</pubDate>
				<category><![CDATA[UX навчання]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=794</guid>

					<description><![CDATA[Ментальні моделі відіграють важливу роль у людино-комп'ютерній взаємодії (HCI) та дизайні взаємодії. Вони ставляться до того, як користувач сприймає навколишній світ і ґрунтуються на переконаннях, а не на фактичній концепції. Однак, якщо ви можете зрозуміти ментальні моделі своїх користувачів, ви можете зімітувати ці моделі у своїх проектах, щоб зробити їх зручнішими та інтуїтивнішими.]]></description>
										<content:encoded><![CDATA[<p><img decoding="async" src="https://public-media.interaction-design.org/images/idf-logo.svg" alt="The IDF" width="75" /></p>
<div class="brand-testimonial card">
<div class="details">Оригінал статті: <a href="https://www.interaction-design.org/literature/article/a-very-useful-work-of-fiction-mental-models-in-design?ep=ux-ui" rel="nofollow">https://www.interaction-design.org/literature/article/a-very-useful-work-of-fiction-mental-models-in-design</a></div>
</div>
<p>&nbsp;</p>
<p>Ментальні моделі відіграють важливу роль у людино-комп&#8217;ютерній взаємодії (HCI) та дизайні взаємодії. Вони ставляться до того, як користувач сприймає навколишній світ і ґрунтуються на переконаннях, а не на фактичній концепції. Однак, якщо ви можете зрозуміти ментальні моделі своїх користувачів, ви можете зімітувати ці моделі у своїх проектах, щоб зробити їх зручнішими та інтуїтивнішими.</p>
<p>Ментальні моделі – це артефакт переконань. Це переконання, які користувач має стосовно будь-якої системи чи взаємодії. Найчастіше переконання, певною мірою, нагадуватиме реальну модель життя. Це важливо, тому що користувачі планують та прогнозують майбутні дії в рамках системи на основі їх ментальних моделей.</p>
<p>Дизайнери можуть використовувати ментальні моделі користувачів, щоб їх продукти повідомляли свою функцію через їхню форму. Однак вони можуть зробити це успішно лише тоді, якщо справді розуміють ментальні моделі свого користувача. Це надто поширена вада у дизайнерів, які будують ідеї на своїх уявних моделях; їх моделі часто надто повні та деталізовані, щоб мати будь-яке відношення до моделі користувача. Це, у свою чергу, призводить до збою в інтерфейсі користувача, коли клієнт не знаходить свою ментальну модель і залишається заплутаним та розгубленим.</p>
<p>Варто зазначити, що ментальна модель не є статичним витвором. Вона здатна до еволюції і може змінюватися на основі використання інших продуктів через взаємодію з іншими користувачами або навчанню з інших джерел.</p>
<p>Концепція ментальних моделей надійшла від книги шотландського психолога Кеннета Крейка “Природа дослідження”. Він сказав, що розум будує &#8220;дрібномасштабні моделі реальності&#8221;, щоб передбачати і пояснювати події.</p>
<p><strong>Практичне правило ментальної моделі (The Mental Model Rule of Thumb)</strong></p>
<p>Враховуючи, що у всіх нас є ментальні моделі взаємодії – це гарне практичне правило припускати це, коли це можливо; Користувачі будуть формувати свої ментальні моделі на основі взаємодії з існуючими програмами та веб-сайтами. Коротше кажучи, вони очікують, що функціональність буде відповідати попередньому досвіду і скрізь, де існує стандартний шаблон інтерфейсу користувача, його слід втілювати у ваших проектах.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-698 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/mental-model-rule-of-thumb.png" alt="" width="802" height="451" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/mental-model-rule-of-thumb.png 635w, https://www.ux-ui.top/wp-content/uploads/2018/04/mental-model-rule-of-thumb-600x337.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/mental-model-rule-of-thumb-300x169.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/mental-model-rule-of-thumb-539x303.png 539w" sizes="auto, (max-width: 802px) 100vw, 802px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: Nathanael Crawford. Copyright terms and licence: CC BY-SA 3.0</i></p>
<p>&nbsp;</p>
<p><strong>Заплутані ментальні моделі</strong></p>
<p>Якоб Нільсен, член-засновник Nielsen Norman Group, пропонує чудове розуміння можливої ​​плутанини у ментальному моделюванні. Це відбувається, коли користувачі не розпізнають ключові різницю між аналогічними (але не ідентичними) частинами системи.</p>
<p>Він зазначає, що багато користувачів не можуть розрізняти поле пошуку в Google та поле введення URL-адреси у браузері. Ці користувачі будуть використовувати Google для пошуку імені відомого веб-сайту, щоб клацнути посилання, а не просто вводити назву та .com у рядку URL. (Проблема, яку Google Chrome, наведений нижче, намагається вирішити, зробивши URL-панель пошуковим інструментом).</p>
<p><img loading="lazy" decoding="async" class=" wp-image-699 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/confused-mental-models.png" alt="" width="808" height="545" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/confused-mental-models.png 1050w, https://www.ux-ui.top/wp-content/uploads/2018/04/confused-mental-models-600x405.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/confused-mental-models-300x202.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/confused-mental-models-768x518.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/confused-mental-models-1024x690.png 1024w, https://www.ux-ui.top/wp-content/uploads/2018/04/confused-mental-models-700x472.png 700w" sizes="auto, (max-width: 808px) 100vw, 808px" /></p>
<p style="text-align: right;"><i>Author/Copyright holder: Axendo. Copyright terms and licence: Public Domain.</i></p>
<p>Схоже, що користувачі знають, що вони можуть ввести матеріал у поле та перейти туди, куди вони хочуть, але не впевнені у функціональності будь-якого поля. Це пояснює, чому браузери стали розглядати поле URL як вікно пошуку в багатьох випадках. Функціональність браузера повинна була змінитися, щоб відповідати ментальній моделі користувача, оскільки сама ментальна модель була занадто спантеличена, щоб легко прийняти шаблон дизайну, з яким зіткнулися користувачі.</p>
<p>Нільсен також пропонує низку загальних заплутаних ментальних моделей, з якими регулярно стикаються деякі користувачі. Вони не розуміють відмінностей між:</p>
<ul>
<li>Windows, що входить до операційної системи, та всередині браузера</li>
<li>Windows та додатками</li>
<li>Іконками та додатками</li>
<li>Командами браузера та командами, які проводяться у додатку</li>
<li>Локальною та віддаленою інформацією</li>
<li>Опціями реєстрації та паролями (наприклад, користувач буде часто реєструватися на будь-якому сайті, якби він намагався увійти до свого облікового запису електронної пошти)</li>
</ul>
<p>&nbsp;</p>
<p><strong>Використання ментальних моделей у дизайні</strong></p>
<p>Варто зазначити, що існує рівень інертності, який потрібно подолати, якщо хочете спробувати змінити ментальну модель людини. Вони розробили розуміння (чи то хибне чи правильне розуміння) концепції – заміна цього потребує деякого часу та зусиль.</p>
<p>Якщо ви збираєтеся кинути виклик ментальної моделі та спробувати її змінити, вам потрібно знати про зусилля, необхідні для подолання цієї інерції. Користувач повинен сприймати цінність, яку він отримує від вашого продукту як найвищу цінність для себе &#8211; в іншому випадку цілком ймовірно, що він може відчути розгубленість і вирушити в інше місце, де навколишнє середовище налаштоване на відповідність до його ментальної моделі.</p>
<p>Найпростіший спосіб дій, коли ви стикаєтеся з конфліктом між дизайном та ментальною моделлю користувача, полягає у зміні дизайну відповідно до моделі користувача. У переважній більшості випадків це буде найкраща дія; вам не доведеться стикатися з цією інертністю, і користувач подякує вам за це.</p>
<p>Якщо ви не можете змінити дизайн для відповідності моделі? Ви повинні зробити додаткові кроки, щоб допомогти ментальні моделі користувача прийняти нову модель. Це означає надання інструкцій, посібників та візуальних сигналів, які допоможуть новій моделі проникнути у свідомість користувача.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-700 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/taking-advantage-of-mental-models.jpg" alt="" width="819" height="614" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/taking-advantage-of-mental-models.jpg 1600w, https://www.ux-ui.top/wp-content/uploads/2018/04/taking-advantage-of-mental-models-600x450.jpg 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/taking-advantage-of-mental-models-300x225.jpg 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/taking-advantage-of-mental-models-768x576.jpg 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/taking-advantage-of-mental-models-1024x768.jpg 1024w, https://www.ux-ui.top/wp-content/uploads/2018/04/taking-advantage-of-mental-models-800x600.jpg 800w, https://www.ux-ui.top/wp-content/uploads/2018/04/taking-advantage-of-mental-models-700x525.jpg 700w" sizes="auto, (max-width: 819px) 100vw, 819px" /></p>
<p style="text-align: right;"><strong> </strong><i>Author/Copyright holder: Nite_Owl. Copyright terms and licence: CC BY-SA 2.0</i></p>
<p>&nbsp;</p>
<p><strong>На закінчення</strong></p>
<p>Ментальні моделі надають дизайнеру найкоротший шлях при розробці інтерфейсу користувача. Вивчаючи ментальні моделі користувача і не покладаючись на власну внутрішню ментальну модель, дизайнер може втілювати ці моделі за допомогою інтерфейсу користувача і створювати досвід, який інтуїтивно зрозумілий та простий у використанні. Це, у свою чергу, призведе до чудового user-experience (користувацького досвіду), в якому користувач може зосередитися на своєму завданні, а не на складному вивченні нових моделей. Ментальні моделі можуть бути складними, але необхідно ретельно подумати, щоб розробити максимально простий для користувача перехід на нову модель.</p>
<p>&nbsp;</p>
<p><strong>Посилання</strong></p>
<p>Додаткове пояснення ментальних моделей можна знайти тут &#8211; <a href="https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/mental-models">https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/mental-models</a></p>
<p>Доповідь Якоба Нільсена про ментальні моделі для групи Nielsen Norman можна знайти тут &#8211; <a href="https://www.nngroup.com/articles/mental-models/">https://www.nngroup.com/articles/mental-models/</a></p>
<p><em>Hero Image: Author/Copyright holder: Rosenfeld Media. Copyright terms and licence: CC BY 2.0</em></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ux-navchannya/mentalni-modeli-u-dyzajni.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Дизайнерське мислення – досвід дарування подарунків</title>
		<link>https://www.ux-ui.top/ux-navchannya/dyzajnerskoe-myshlenye-opyt-darenyya-podarkov.html</link>
					<comments>https://www.ux-ui.top/ux-navchannya/dyzajnerskoe-myshlenye-opyt-darenyya-podarkov.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Mon, 16 Apr 2018 10:44:30 +0000</pubDate>
				<category><![CDATA[UX навчання]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=811</guid>

					<description><![CDATA[Швидкий пост (я надто довго його відкладала!), щоб поділитися деякими спостереженнями, набутими знаннями та роздумами про нещодавнє проведення “проєкту дарування подарунків” Стенфордського інституту дизайну (Stanford Institute of Design's, d.school) із групою колег в австралійській державній службі (The Australian Public Service).]]></description>
										<content:encoded><![CDATA[<p>Автор &#8211; Веббі Клер (Webby Clare)</p>
<p>Оригінал статті: <a href="http://webbyclare.com/design-thinking-the-gift-giving-experience/">http://webbyclare.com/design-thinking-the-gift-giving-experience/</a></p>
<p>Швидкий пост (я надто довго його відкладала!), щоб поділитися деякими спостереженнями, набутими знаннями та роздумами про нещодавнє проведення “проєкту дарування подарунків” Стенфордського інституту дизайну (Stanford Institute of Design&#8217;s, d.school) із групою колег в австралійській державній службі (The Australian Public Service).</p>
<p>Я думаю, що ця сесія дає фантастичну інформацію про те, що таке дизайнерське мислення і чому створення емпатії, прототипування, пошук зворотного зв&#8217;язку та ітерація мають вирішальне значення для досягнення гарних результатів дизайну. Але, можливо, більш важливо, що мені подобається в цьому курсі – так це те, що він допомагає людям розкривати (чи відкривати?) їхній власний творчий потенціал. Люди приступають до курсу з думками: Я не дизайнер, Я не вмію малювати, Я не креативний, але протягом курсу вони створюють дизайн, малюють та видають креативні рішення.</p>
<p>D.school робить це дуже легким для координаторів, надаючи їм практично всі матеріали, необхідні для курсу – керівництво для координатора, аркуші учасників та роздаткові матеріали після курсу (які ви можете безплатно звантажити та використовувати за ліцензією CC BY-NC-SA тут). Примітка – нещодавно випущений віртуальний прискорений курс робить це ще простіше, оскільки він також ефективно забезпечує координатора!</p>
<ol>
<li><img loading="lazy" decoding="async" class="size-medium wp-image-661 alignright" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Prototyping-materials.jpg" alt="" width="225" height="300" /><strong>Матеріали прототипування.</strong> Поряд із видруками керівництва для координатора та роздаткового матеріалу для учасників, єдиними додатковими матеріалами, які потрібно організувати координатору, є матеріали прототипування. Я зробила це досить просто, дешево та легко – я обшукала стаціонарну шафу та свої власні шафи вдома, щоб знайти такі речі, як: шматочки обгорткового паперу, фольги, гумові смуги, кольоровий папір, старі кольорові теки та безліч перероблених пакувальних матеріалів (туалетні рулони) , картонні коробки, пакування для яєць тощо). Я також взяла багато клей-олівців, кнопок, пластиліну та скріпок. По суті все, що я могла легко знайти. Якби я мала більше часу, мені б дуже хотілося додати такі речі, як pipe-cleaners (щітки, дріт) та інші виробні матеріали (я пробувала Officeworks, але схоже у них немає цих матеріалів. Пізніше колега запропонував магазини типу Lincraft або Hot Dollar, які я спробую наступного разу).</li>
<li><strong>Роздруківка роздаткового матеріалу для учасників.</strong> Переконайтеся, що ви вибрали опцію “розібрати за копіями” (collate) на копіювальному апараті під час друку керівництва учасників! Я цього не зробила і в результаті витратила досить багато часу, вручну розбираючи роздруківки (не розумію, чому &#8220;розбір за копіями&#8221; не є за замовчуванням для всіх принтерів / копіювальних апаратів).<br />
<img loading="lazy" decoding="async" class="size-medium wp-image-662 alignleft" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Manually-collating-the-participant-handouts-225x300.jpg" alt="" width="225" height="300" /></li>
<li><strong>Музика/Таймер.</strong> Курс рекомендує, щоб ви показували таймер і програвали музику, але у нас не було доступу до проєктора/гучномовців (плюс була велика офіційна зустріч, яка відбувалася в сусідній кімнаті, тому ми намагалися знизити рівень шуму). Я просто стежила за часом, використовуючи секундомір на моєму iPhone, і він чудово працював для нашої невеликої групи.</li>
<li><strong> Розмір групи.</strong> У нашій групі було 9 осіб, і це дуже гарна кількість для проходження курсу вперше. Я б виразно рекомендувала, щоб уперше координатори намагалися проводити курс із групою з 8-12 осіб. Непарне число учасників було не ідеальним – у результаті у нас була група з трьох осіб (яка не працювала відмінно, але все ж таки давала відчути кожному смак досвіду дизайну), і я злегка маніпулювала тимчасовими рамками та інструкціями, щоб це спрацювало. Ось чому співкоординатор (або деякі помічники) може бути справді корисним – якби була непарна кількість учасників, один зі співорганізаторів міг би брати участь, а не керувати.</li>
<li><strong> Розрахунок часу.</strong> Загалом, я думаю, що розрахунок часу спрацював добре – ми закінчили (включаючи підбиття підсумків/звіт) за 90 хвилин, як і планувалося. Іноді виразно відчувався поспіх (і учасники явно почувалися некомфортно через це), тому я думаю, що варто підкреслити це і заздалегідь дати учасникам знати, що курс буде таким.</li>
<li><strong> Розігрів.</strong> Потрібен був час, щоб учасники розігрілися і справді поринули у досвід. Я помітила, що початкові інтерв&#8217;ю були досить формальними, спокійними, і було кілька невизначених осіб. Але в міру того, як люди просувалися все далі, глибше вдавалися в розмови й почали ясно розуміти можливі ідеї/рішення, розмови стали більш жвавими та захопленими. Якби я знову проводила сеанс із групою учасників, які не знали один одного, я б спробувала провести швидку розминку після того, як пари були встановлені – щось веселе та швидке, щоб учасники творчо мислили та вибудували якийсь початковий зв&#8217;язок/довіру/порозуміння.</li>
<li><strong> Інструкції.</strong> Хоча метою вправи є перегляд досвіду дарування подарунка, деякі з учасників, як і раніше, прагнули створити кращий подарунок для свого партнера. Напевно, це частково тому, що легше проєктувати і фізично прототипувати продукт, а не послугу. Крім того, на першому етапі інтерв&#8217;ю учасникам пропонується запитати один одного, як останній раз вони подарували подарунок, тому деякі мої учасники зосередилися на створенні кращого подарунка для цього конкретного сценарію. Наступного разу я надам учасникам більш загальну інструкцію і, можливо, попрошу їх поділитися не одним досвідом, а кількома (наприклад, останній подарунок, що дає досвід, найпозитивніший досвід, час, коли дарувати подарунок було важко чи неприємно), замість того, щоб фокусуватися тільки за останнім досвідом. За цим потрібно стежити координатору та постійно нагадувати учасникам, що вони розробляють досвід, а не подарунок.</li>
</ol>
<p>&nbsp;</p>
<p>Отже, це були мої ключові набуті знання як координатор…. Але як щодо ключових знань/думок учасників…</p>
<ol>
<li><strong> Зображення проти слів</strong>. Я працюю у середовищі, де ми постійно використовуємо слова! Наше спілкування дуже зосереджено на письмових електронних листах, інструкціях, звітах тощо. д. або усні звіти/відгуки, отримані на зустрічах. Необхідність робити нариси ідей явно було тим, що викликало дискомфорт в учасників. Було багато коментарів на кшталт &#8220;але я не вмію малювати&#8221; та трохи засмучених осіб. Але коли вони вдалися у суть справи та зрозуміли, що їм &#8220;потрібно&#8221; малювати, вони, здавалося, прийняли це (або принаймні стали менше про це турбуватися), бувши меншим, ніж ідеальним художником!</li>
<li><strong> Фокусування на швидкому отриманні кількості</strong>. Знову ж таки, це була важка частина вправи для багатьох учасників. Вигадування безлічі божевільних ідей – це не те, що ми робимо регулярно, але визначення мети (“ви повинні придумати хоча б 5 ідей”) змушує всіх думати трохи ширше (і, можливо, трохи шалено), ніж вони могли б, якби їм просто потрібно було б розібратися з одним рішенням.</li>
<li><strong> Залучення користувачів заздалегідь</strong>. Якби учасникам було запропоновано зробити редизайн досвіду дарування подарунка для свого партнера, не розмовляючи чи не взаємодіючи з ним, тоді результати безперечно були б іншими (і, ймовірно, значно гіршими). Ця вправа чітко демонструє, чому так важливо взаємодіяти з користувачем на ранній стадії процесу та розуміти їхні потреби та бажання.</li>
</ol>
<p>&nbsp;</p>
<p>Вам не потрібно бути досвідченим координатором або мати якесь особливе обладнання для цього сеансу. Завдяки тому, що d.school виконав велику частину роботи з мислення/планування, це швидкий, простий та відносно недорогий спосіб проведення тренінгу для ознайомлення ваших колег з дизайном мислення. Наполегливо рекомендую!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ux-navchannya/dyzajnerskoe-myshlenye-opyt-darenyya-podarkov.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Як візуалізувати ваші якісні результати досліджень користувачів для максимальної ефективності</title>
		<link>https://www.ux-ui.top/ux-navchannya/yak-vizualizuvaty-vashi-yakisni-rezultaty-doslidzhen-korystuvachiv-dlya-maksymalnoyi-efektyvnosti.html</link>
					<comments>https://www.ux-ui.top/ux-navchannya/yak-vizualizuvaty-vashi-yakisni-rezultaty-doslidzhen-korystuvachiv-dlya-maksymalnoyi-efektyvnosti.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Mon, 16 Apr 2018 10:33:06 +0000</pubDate>
				<category><![CDATA[UX навчання]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=806</guid>

					<description><![CDATA[Думаючи про візуалізацію результатів дослідження, у багатьох людей автоматично виникає в думці зображення графіка. У вас також з'являється цей образ? Ви мали б рацію, думаючи, що багато результатів досліджень виграють від графічної візуалізації, демонструючи тенденції та аномалії. Але це переважно справедливо для результатів кількісних досліджень користувачів. Графіки часто є не найкращим способом повідомляти результати від якісних методів дослідження користувачів, таких як інтерв'ю чи спостереження.]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<p>Автор – Дітте Мортенсен (Ditte Mortensen)</p>
<div class="brand-testimonial card">
<div class="brand-image"><img decoding="async" src="https://public-media.interaction-design.org/images/idf-logo.svg" alt="The IDF" width="75" /></div>
<div class="details">Оригінал статті: <a href="https://www.interaction-design.org/literature/article/how-to-visualize-your-qualitative-user-research-results-for-maximum-impact?ep=ux-ui" rel="nofollow">https://www.interaction-design.org/literature/article/how-to-visualize-your-qualitative-user-research-results-for-maximum-impact</a></div>
</div>
<p>&nbsp;</p>
<p><em>Думаючи про візуалізацію результатів дослідження, у багатьох людей автоматично виникає в думці зображення графіка. У вас також з&#8217;являється цей образ? Ви мали б рацію, думаючи, що багато результатів досліджень виграють від графічної візуалізації, демонструючи тенденції та аномалії. Але це переважно справедливо для результатів кількісних досліджень користувачів. Графіки часто є не найкращим способом повідомляти результати від якісних методів дослідження користувачів, таких як інтерв&#8217;ю чи спостереження. Часто кількість учасників цих типів досліджень замало для створення значних графіків. Щобільше, інформацію, яку ви захочете повідомити, іноді не можна перевести до прямого числа (clean number). Покажімо вам, як візуалізувати більш суб&#8217;єктивні та нечіткі дані з якісних методів дослідження користувачів, таким чином, щоб повідомляти основні ідеї іншим зацікавленим сторонам, щоб їм не потрібно було переглядати великі дослідницькі звіти.</em></p>
<blockquote><p>&#8220;Мета візуалізації &#8211; це не зображення, а проникнення в суть&#8221;</p>
<p>– Бен Шнейдерман, заслужений професор університету з інформатики</p></blockquote>
<p>Коли ви ділитесь результатами якісних досліджень користувачів, ви, швидше за все, фокусуєтеся на створенні розуміння життя людей, завдань та взаємодій, які їм необхідно виконати, щоб досягти бажаного чи того, що їм потрібно зробити. Це вірно незалежно від того, чи ви використовуєте дослідження на початкових етапах процесу проєктування (коли дізнаєтеся, що розробляти) або використовуєте його на кінцевих етапах (коли стає зрозуміло, наскільки добре дизайн відповідає його цілям). Залежно від людей, з якими ви спілкуєтеся (наприклад, ваша команда дизайнерів або клієнт), та типу розуміння, який у них має бути (іншими словами, глибоке співчуття до потреб користувача або глобальне відчуття контексту, в якому продукт використовуватиметься), вам потрібно визначити, який вид візуалізації найкраще підходить для результатів.</p>
<p>Уявіть, що ви провели кілька інтерв&#8217;ю з людьми з вашої цільової групи: перевантажені роботою та стурбовані неофіційні опікуни людей похилого віку з ранніми ознаками деменції (недоумство). Вони поділилися з вами деякою важливою інформацією щодо побоювань щодо нового продукту, який має допомогти їм бути більш незалежними у турботі, яку вони надають своїм близьким. Ви використовували методику тематичного аналізу з великою кількістю нотаток, щоб зрозуміти ці дані, і ви виявили чотири категорії побоювань, які важливо розглянути при розробці нового продукту: зміни у відносинах, постійне почуття занепокоєння, відсутність умінь (компетенцій) та нестача особистого часу. Вам потрібно поділитися інформацією з вашою командою, щоб усі дійшли єдиної думки та продовжували дизайнерський процес з однаковим рівнем співчуття до цієї тендітної цільової групи. Крім того, вам необхідно повідомити ці дані своїм клієнтам: управлінській групі організації охорони здоров&#8217;я. Вони сподіваються залучити більше неформальних працівників у процес догляду, оскільки їм необхідно реорганізувати свої бюджети та полегшити навантаження своїх співробітників. Як би ви повідомляли про результати, які виявили? Просто дали б їм короткий список із чотирьох побоювань? Чи надали їм кругову діаграму, що показує частоту згадування певної категорії страхів в інтерв&#8217;ю? Ми б сказали, що це не призводить до глибокого розуміння, якого ви прагнете. Список не є багатонапрямним (імерсивним), щоб викликати будь-який тип емпатії. Тут ми покажемо вам три способи візуалізації ваших результатів, які набагато ефективніші.</p>
<p>&nbsp;</p>
<p><strong>Діаграма подібності</strong></p>
<p>Використовуючи стікери з нотатками для методики тематичного аналізу, щоб дійти висновків з чотирьох основних побоювань, з якими стикається ваша цільова група, ви вже використовували метод візуалізації, який ми б рекомендували: діаграму подібності. Ви взяли цитати та нотатки з інтерв&#8217;ю та написали кожен із них на окремому стікері. Потім ви почали реорганізовувати їх відповідно до подібностей, створюючи теми по ходу роботи. У діаграмі, яку ви створили як інструмент аналізу, є безліч інформації. З усім тим, вам потрібно буде очистити цю діаграму, щоб вона краще зображала інформацію, яку ви хочете повідомити.</p>
<p>Ви можете швидко визначити, що категорії повинні показувати чотири основні побоювання, які ви виявили. Вам потрібно запитати себе, які фрагменти інформації допоможуть вашим колегам-дизайнерам та вашому клієнту зрозуміти, до чого призводять ці побоювання. Який вплив вони надають на життя ваших користувачів? Коли цей страх найпомітніший? Що викликає цей страх? Чи маєте ви певне уявлення про те, що може зменшити цей страх? Вся ця інформація вже буде присутня на стікерах із замітками, які ви зібрали в рамках теми. Тепер вам просто потрібно відфільтрувати найважливіші з них та представити їх ясним та візуально привабливим способом. Ви можете використовувати цитати або ключові слова, а також – якщо ви зробили деякі спостереження – проілюструйте їх зображеннями або малюнками. На зображенні нижче показано, як може виглядати діаграма подібності для цієї мети.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-672 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/most-comom-fears.png" alt="" width="829" height="575" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/most-comom-fears.png 950w, https://www.ux-ui.top/wp-content/uploads/2018/04/most-comom-fears-600x416.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/most-comom-fears-300x208.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/most-comom-fears-768x533.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/most-comom-fears-700x486.png 700w" sizes="auto, (max-width: 829px) 100vw, 829px" /></p>
<p style="text-align: left;"><em>Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0</em></p>
<p><em>Діаграма подібності, де цитати з досліджень користувача групуються навколо чотирьох найбільш поширених побоювань, які ви виявили. Зображення на фоні цієї діаграми подібності, що показує користувача в контексті, допомогло б пожвавити огляд та залучити співчуття.</em></p>
<p>&nbsp;</p>
<p><strong>Карта емпатії</strong></p>
<p>Карта емпатії – чудовий спосіб створити чіткий огляд чотирьох основних областей, на яких ми, як дизайнери, маємо зосередитись, щоб отримати емпатію для нашої цільової групи: що люди говорили, робили, думали та відчували. Це також дуже важливо для нашого клієнта у разі неформальних опікунів – управлінської команди організації охорони здоров&#8217;я – оскільки вони можуть мати певні упередження, засновані на звичайній взаємодії з цільовою групою. Карта емпатії може ініціювати обговорення всередині цієї управлінської команди, і змусити їх визнати, що часто доводиться коригувати свою перспективу. У охороні здоров&#8217;я (але це вірно й для багатьох інших ситуацій), професіонали вважають, що вони можуть говорити за пацієнта або їхню сім&#8217;ю, оскільки їхнє основне завдання – піклуватися про них. Вони схильні забувати, що мають обмежене уявлення про їхнє життя, тому можуть не розуміти всі їхні потреби.</p>
<p>Щоб створити карту емпатії, що базується на результатах ваших інтерв&#8217;ю, ви переглядаєте нотатки та інші матеріали, які ви отримали від своїх якісних досліджень користувачів. Для кожного сектора (або кожної області фокусування) ви вибираєте відповідні цитати та зображення або синтезуєте відповідну інформацію на їх основі. Як ви можете бачити на зображенні нижче, карта емпатії результатів спирається на ті ж дані, що і діаграма подібності, яку ми створили раніше, але передає іншу інформацію. Обидві візуалізації можуть бути доречними для нашого дизайну.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-673 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/informal-caregiver.png" alt="" width="818" height="567" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/informal-caregiver.png 950w, https://www.ux-ui.top/wp-content/uploads/2018/04/informal-caregiver-600x416.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/informal-caregiver-300x208.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/informal-caregiver-768x533.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/informal-caregiver-700x486.png 700w" sizes="auto, (max-width: 818px) 100vw, 818px" /></p>
<p><em>Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0</em></p>
<p><em>Приклад карти емпатії, яка може виникнути в результаті дослідження користувачів у неформальних опікунів пацієнтів з деменцією. Зображення всередині має представляти вашого користувача, щоб підвищити можливість співчуття йому або їй. Ви можете використовувати зображення з особи, яку ви створили.</em></p>
<p>&nbsp;</p>
<p><strong>Карта подорожі користувача</strong></p>
<p>Повернімося до розгляду дизайну, який ми використали для ілюстрації того, як візуалізувати результати якісних досліджень користувачів.</p>
<p>Ви створюєте новий продукт, щоб допомогти неформальним опікунам літніх людей із симптомами легкої деменції бути більш незалежними у тій допомозі, яку вони надають. Одним із предметів, на якому ви, ймовірно, будете зосереджені під час досліджень користувачів, є контекст, у якому неформальні опікуни надають їм допомогу. Можливо, ви поставили собі такі питання, як: Які завдання вони виконують? Коли вони виконують ці завдання? Які дії вони виконують до і після виконання цих завдань? Як вони почуваються, надаючи догляд своїм близьким? Що важливо у ваших результатах, це не лише прямі відповіді на ці питання, але й алгоритм дій (flow), який вони створюють протягом усього життя цих неформальних опікунів. Наприклад, важливо знати, чи можна заздалегідь планувати турботу, яку вони надають та чи часто вони відволікаються іншими видами діяльності. Дуже потужний спосіб передачі цього алгоритму дій за певний період часу включає створення карти подорожі користувача.</p>
<p>Карта подорожі користувача, яку ви бачите на зображенні нижче, показує період одного дня. Ви можете вибрати цей період відповідно до того, що буде підходить для вашого проєкту; іноді тиждень чи місяць були б доречнішими. Ви можете визначити кроки, пов&#8217;язані з турботою про старших протягом звичайного дня, створюючи окремі шляхи для дій, мислення та почуттів, які ви також використовували для своєї карти емпатії. Крім того, ви повинні вказати будь-які точки взаємодії з поточним сервісом, що надається організацією охорони здоров&#8217;я, або будь-якою іншою залученою особою. Зосередьтеся на показі руху користувача через різні точки дотику протягом дня, і на тому, що користувач відчуває стосовно кожної взаємодії у цій подорожі.</p>
<p>Зрештою, ви повинні повідомити вашу команду та клієнта, які взаємодії потрібно змінити, прибрати або ввести.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-674 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/user-journey-map.jpeg" alt="" width="847" height="598" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/user-journey-map.jpeg 950w, https://www.ux-ui.top/wp-content/uploads/2018/04/user-journey-map-600x424.jpeg 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/user-journey-map-300x212.jpeg 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/user-journey-map-768x542.jpeg 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/user-journey-map-700x494.jpeg 700w" sizes="auto, (max-width: 847px) 100vw, 847px" /></p>
<p><em>Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0</em></p>
<p>&nbsp;</p>
<p><strong>На закінчення</strong></p>
<p>Інформаційна візуалізація – це потужна техніка для передачі результатів якісних досліджень користувачів колегам-дизайнерам або клієнту.</p>
<p>Існує три типи візуалізації, які ви можете використовувати. Діаграми подібності найбільше нагадують результати аналізу даних, але ви повинні переробити їх, щоб надати більше ясності людям, які мають зрозуміти цю інформацію. Карти емпатії дають вашій аудиторії чудовий огляд чотирьох важливих областей розуміння користувачів: що люди говорять, роблять, думають та відчувають. Нарешті, карти подорожей користувача представляють послідовність дій користувачів (user flow) за певний проміжок часу. Ви можете використовувати ці три візуалізації разом, щоб викликати глибоке співчуття, що підніме ваш дизайнерський проєкт на наступний рівень.</p>
<p>&nbsp;</p>
<p><strong>Посилання та де дізнатися більше</strong></p>
<p>Тереза ​​Тан (Teresa Tan), Діаграми подібності: додавання кольору до нечітких даних, 2014:</p>
<p><a href="http://www.extractable.com/insights/affinity-diagrams-adding-color-to-fuzzy-data">http://www.extractable.com/insights/affinity-diagrams-adding-color-to-fuzzy-data</a></p>
<p>Річ Крендал (Rich Crandall), Карта емпатії, 2010:</p>
<p><a href="https://dschool-old.stanford.edu/groups/k12/wiki/3d994/empathy_map.html">https://dschool-old.stanford.edu/groups/k12/wiki/3d994/empathy_map.html</a></p>
<p>Кейт Каплан (Kate Kaplan), Картографія подорожі в реальному житті: огляд практикуючих UX, 2016:</p>
<p><a href="https://www.nngroup.com/articles/journey-mapping-ux-practitioners/">https://www.nngroup.com/articles/journey-mapping-ux-practitioners/</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ux-navchannya/yak-vizualizuvaty-vashi-yakisni-rezultaty-doslidzhen-korystuvachiv-dlya-maksymalnoyi-efektyvnosti.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Поля форми введення дати: рекомендації по дизайну UX</title>
		<link>https://www.ux-ui.top/ux-navchannya/polya-formy-vvedennya-daty-rekomendacziyi-po-dyzajnu-ux.html</link>
					<comments>https://www.ux-ui.top/ux-navchannya/polya-formy-vvedennya-daty-rekomendacziyi-po-dyzajnu-ux.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Mon, 16 Apr 2018 10:12:27 +0000</pubDate>
				<category><![CDATA[UX навчання]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=800</guid>

					<description><![CDATA[Форматування поля введення дати може бути незначною деталлю; однак, навіть невеликі взаємодії можуть призвести до зупинки процесу, якщо вони будуть реалізовані неналежним чином. Погано створений дизайн введення дати призводить до засмучених та роздратованих користувачів, які ризикують повністю відмовитися від форми. Гірше того, якщо користувач вказує невірну дату, вся транзакція може бути катастрофою – подумайте, наприклад, як би ви почували себе, якби прийшли в театр у передчутті побачити нове шоу, але дізнаєтеся, що купили квитки на інший день.]]></description>
										<content:encoded><![CDATA[<p>Автор: Энджи Ли (ANGIE LI)</p>
<p>Оригінал статті: <a href="https://www.nngroup.com/articles/date-input/">https://www.nngroup.com/articles/date-input/</a></p>
<blockquote><p><strong>Короткий виклад:</strong> Поля введення дати мають бути однозначними та підтримувати завершення завдання за допомогою правильного шаблону проєктування. Невеликі зміни дизайну можуть запобігти великим помилкам користувача.</p></blockquote>
<p>Форматування поля введення дати може бути незначною деталлю; однак, навіть невеликі взаємодії можуть призвести до зупинки процесу, якщо вони будуть реалізовані неналежним чином. Погано створений дизайн введення дати призводить до засмучених та роздратованих користувачів, які ризикують повністю відмовитися від форми. Гірше того, якщо користувач вказує невірну дату, вся транзакція може бути катастрофою – подумайте, наприклад, як би ви почували себе, якби прийшли в театр у передчутті побачити нове шоу, але дізнаєтеся, що купили квитки на інший день.</p>
<p>Для покращення цього невеликого, але фундаментального внеску необхідно враховувати аспекти для користувачів мобільних пристроїв та глобальної аудиторії. У цій статті обговорюються загальні шаблони введення, обробка помилок та міжнародне введення даних для полів дати.</p>
<p>&nbsp;</p>
<h3><strong>Шаблони введення дати</strong></h3>
<p>Елементи для календарного вибору або календарі (Calendar pickers) – це елементи керування, які зображають повний календарний місяць за один раз. Зазвичай вони показують дні тижня зверху та відповідають метафорі настільних або настінних календарів.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-681 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Example-of-calendar-picker.png" alt="" width="397" height="706" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Example-of-calendar-picker.png 750w, https://www.ux-ui.top/wp-content/uploads/2018/04/Example-of-calendar-picker-600x1067.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Example-of-calendar-picker-169x300.png 169w, https://www.ux-ui.top/wp-content/uploads/2018/04/Example-of-calendar-picker-576x1024.png 576w, https://www.ux-ui.top/wp-content/uploads/2018/04/Example-of-calendar-picker-700x1245.png 700w" sizes="auto, (max-width: 397px) 100vw, 397px" /></p>
<p><em>Приклад calendar picker на мобільному телефоні, показаний у програмі Календаря Google.</em></p>
<p>Calendar pickers повинні використовуватися для заходів, близьких до теперішнього часу – менш ніж за рік. З усім тим, вони можуть розчарувати користувачів, які вибирають дати заздалегідь, тому що вони вимагають надто багато навігаційних дій для отримання бажаного введення; для цих користувачів було б простіше просто запровадити рік.</p>
<p>Calendar pickers особливо корисні щодо вибору діапазону дат. У цих ситуаціях вони часто показують два місяці пліч-о-пліч.</p>
<p><em> <img loading="lazy" decoding="async" class=" wp-image-682 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Calendar-picker.png" alt="" width="766" height="420" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Calendar-picker.png 898w, https://www.ux-ui.top/wp-content/uploads/2018/04/Calendar-picker-600x329.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Calendar-picker-300x165.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Calendar-picker-768x422.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Calendar-picker-700x384.png 700w" sizes="auto, (max-width: 766px) 100vw, 766px" /></em></p>
<p><em>Expedia використовувала м&#8217;яке синє підсвічування, щоб показати діапазон дат для вибраних дат вильоту та повернення. Дати вильоту та повернення у календарі пофарбовані по-різному.</em></p>
<p><strong>Прокручування елементів для вибору дати (date pickers)</strong> на мобільних пристроях є звичайним явищем, але можуть дратувати, якщо елемент вибору (picker) містить багато дат. У таких ситуаціях прокрутка у невеликому просторі повільна та непродуктивна; краще надати користувачам можливість вводити дату безпосередньо.</p>
<p>У програмі Todoist користувачі можуть ввести крайній термін для кожного завдання, використовуючи нескінченний список прокручування. Це не проблема, якщо останній термін відбувається цієї п&#8217;ятниці або суботи, як показано нижче, однак, якщо останній термін &#8211; всього кілька тижнів тому, користувачеві простіше ввести дату самостійно (функціональність, яку додаток також надає)</p>
<p><img loading="lazy" decoding="async" class=" wp-image-683 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/iPhone-Todoist-app.png" alt="" width="397" height="706" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/iPhone-Todoist-app.png 750w, https://www.ux-ui.top/wp-content/uploads/2018/04/iPhone-Todoist-app-600x1067.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/iPhone-Todoist-app-169x300.png 169w, https://www.ux-ui.top/wp-content/uploads/2018/04/iPhone-Todoist-app-576x1024.png 576w, https://www.ux-ui.top/wp-content/uploads/2018/04/iPhone-Todoist-app-700x1245.png 700w" sizes="auto, (max-width: 397px) 100vw, 397px" /></p>
<p><em>Програма iPhone Todoist дозволяє користувачам прокручувати, а також вводити дату самостійно. (Зверніть увагу на перевагу позначення поточної дати &#8220;сьогодні&#8221;: вона усуває будь-яку невизначеність, якщо користувач не пам&#8217;ятає сьогоднішню дату.)</em></p>
<p><strong>Розділені поля дати зі списками, що розкриваються, для місяця, дня і року</strong> вимагають багато непотрібних кроків. Цей метод збільшує вартість взаємодії, додаючи додаткові кліки та прокручування. Ми не рекомендуємо використовувати цей шаблон.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-684 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/DeviantArt.png" alt="" width="772" height="688" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/DeviantArt.png 777w, https://www.ux-ui.top/wp-content/uploads/2018/04/DeviantArt-600x534.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/DeviantArt-300x267.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/DeviantArt-768x684.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/DeviantArt-700x623.png 700w" sizes="auto, (max-width: 772px) 100vw, 772px" /></p>
<p><em>DeviantArt надав список, що розкривається, для кожного розділу поля дати.</em></p>
<p><strong>Самостійне введення дати</strong> &#8211; це найпростіший варіант, але у багатьох випадках він є найефективнішим, особливо коли дата далеко у минулому (наприклад, дата народження) чи майбутньому. Ми рекомендуємо вам дозволяти користувачам самостійно вводити дату, навіть якщо доступні інші методи введення.</p>
<p>&nbsp;</p>
<h3><strong>Рекомендації по дизайну введення дати</strong></h3>
<p><strong>Для обмеженої кількості варіантів дати зробіть перелік відповідних дат.</strong></p>
<p>У деяких випадках користувачі мають лише кілька варіантів вибору дати. Наприклад, Google Express, онлайн-сервіс покупок, дозволяє клієнтам замовляти онлайн-продукти та планувати час доставки. Замість того, щоб пропонувати порожні поля дати або calendar picker з безмежними опціями, Google Express надає короткий список варіантів дати. Будь-які дати, які недоступні, були зафарбовані в сірий і відключені. (Альтернативний варіант &#8211; недоступні дати можуть навіть не включатися до списку.)</p>
<p><img loading="lazy" decoding="async" class=" wp-image-685 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Google-Express.png" alt="" width="759" height="509" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Google-Express.png 1211w, https://www.ux-ui.top/wp-content/uploads/2018/04/Google-Express-600x402.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Google-Express-300x201.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Google-Express-768x515.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Google-Express-1024x687.png 1024w, https://www.ux-ui.top/wp-content/uploads/2018/04/Google-Express-700x469.png 700w" sizes="auto, (max-width: 759px) 100vw, 759px" /></p>
<p><em>Google Express надав список, що розкривається, з варіантами доставки. Вибір, який недоступний, вимкнений та зафарбований у сірий.</em></p>
<p>Загалом ми не рекомендуємо цей метод, якщо є понад 10 дат, оскільки людям може бути складно сканувати й прокручувати великий список дат.</p>
<p><strong>Не вимагайте, щоб користувачі вводили спеціальні символи для відображення дат.</strong></p>
<p>Незалежно від того, який формат користувач вибрав для введення дати (тире, пробіли, косі риски, крапки між компонентами місяця, дня та року), їхній вхід має бути розпізнаний. Щобільше, крайні ліві нулі не повинні впливати на дату. У наведеному нижче прикладі Priceline дата 9-3-17 відхиляється, а приймається 09/08/17, хоча жодних вимог до формату не було видно перед відправкою форми.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-686 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Priceline.png" alt="" width="795" height="432" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Priceline.png 899w, https://www.ux-ui.top/wp-content/uploads/2018/04/Priceline-600x326.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Priceline-300x163.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Priceline-768x417.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Priceline-700x380.png 700w" sizes="auto, (max-width: 795px) 100vw, 795px" /></p>
<p><em>Priceline відхилив дату 9-3-17, навіть не надавши пропозиції про те, як правильно її форматувати. Натомість він повинен був прийняти ії та проаналізувати для користувача.</em></p>
<p><strong>Повідомте про помилки належним чином.</strong></p>
<p>Якщо користувач вводить дату, яка, мабуть, є помилкою, наприклад, 11/81/17, не робить жодних припущень. Забезпечте зворотний зв&#8217;язок користувача та запропонуйте рекомендації щодо усунення помилки.</p>
<p><strong>Усуньте нелогічні варіанти дат</strong></p>
<p>Не допустіть, щоб клієнт обирав нелогічні дати. Очевидно, що доцільність того чи іншого елемента залежатиме від випадку: наприклад, дати старше 130 років малоймовірні для дат народження, але цілком прийнятні для дат документа. Користувачі повинні бути захищені від введення, наприклад, дати повернення, яка знаходиться до дати вильоту або у минулому. Зробіть вибір зрозумілим, відключивши та викресливши опції, які недоступні, або є нелогічними.</p>
<p><strong>Зберігайте роботу користувачів.</strong></p>
<p>Якщо одна й та ж сама інформація щодо дати потрібна у різних частинах форми або запитується пізніше під час виконання завдання, то не змушуйте користувачів двічі вводити цю дату.</p>
<p><strong>Зберігайте діапазони дат постійними.</strong></p>
<p>Уникайте зміщення діапазонів дат для пар відправлення та повернення. Наприклад, якщо листопад-грудень показаний для вильоту, не змінюйте та покажіть грудень-січень для діапазону дат повернення. Зміна може залишитися непоміченою і змусити користувачів помилитися, клацнувши там, де раніше була потрібна дата.</p>
<p><img loading="lazy" decoding="async" class="wp-image-687 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Southwest-Airlines.png" alt="" width="795" height="431" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Southwest-Airlines.png 2048w, https://www.ux-ui.top/wp-content/uploads/2018/04/Southwest-Airlines-600x325.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Southwest-Airlines-300x163.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Southwest-Airlines-768x416.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Southwest-Airlines-1024x555.png 1024w, https://www.ux-ui.top/wp-content/uploads/2018/04/Southwest-Airlines-700x379.png 700w" sizes="auto, (max-width: 795px) 100vw, 795px" /><em>Southwest Airlines змінили діапазон дат повернення, виходячи з вибору дати вильоту. Після вибору дати вильоту 8-16-16 із діапазону дат за липень-серпень діапазон дат повернення змінився, щоб показати серпень-вересень.</em></p>
<p><strong>Якщо ваш сайт обслуговує міжнародних користувачів, ваш формат дати має бути ясним та зрозумілим.</strong></p>
<p>Поля введення дат залежать від культури і можуть викликати серйозні проблеми для користувачів, які звикли до іншого формату. “10/11/2016” може означати 11 жовтня 2016 року для американця, але 10 листопада – для когось із Європи. Дотримуйтесь цих практичних правил розробки дизайну введення дати для глобальної аудиторії:</p>
<ul>
<li><strong>Додайте мітки та розділіть поля</strong>, щоб було зрозуміло, які поля призначені для місяця, дня та року.</li>
</ul>
<p><em><img loading="lazy" decoding="async" class=" wp-image-688 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/date-components.png" alt="" width="417" height="285" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/date-components.png 359w, https://www.ux-ui.top/wp-content/uploads/2018/04/date-components-300x205.png 300w" sizes="auto, (max-width: 417px) 100vw, 417px" />Цей таймер зворотного відліку відокремив компоненти дати та чітко визначив їх.</em></p>
<p>&nbsp;</p>
<ul>
<li><strong>Вкажіть назву місяця</strong>, щоб відокремити її від дня.</li>
</ul>
<p><em><img loading="lazy" decoding="async" class=" wp-image-689 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Tep-Wireless-site.png" alt="" width="735" height="503" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Tep-Wireless-site.png 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/Tep-Wireless-site-600x411.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Tep-Wireless-site-300x205.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Tep-Wireless-site-768x526.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Tep-Wireless-site-700x479.png 700w" sizes="auto, (max-width: 735px) 100vw, 735px" /></em></p>
<p><em>Сайт Tep Wireless, де користувачі можуть орендувати портативні Wi-Fi пристрої, вказав назву місяця для обслуговування своєї глобальної аудиторії</em>.</p>
<p><img loading="lazy" decoding="async" class="wp-image-690 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Eurostar-website.png" alt="" width="783" height="523" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Eurostar-website.png 900w, https://www.ux-ui.top/wp-content/uploads/2018/04/Eurostar-website-600x401.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Eurostar-website-300x200.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/Eurostar-website-768x513.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/Eurostar-website-700x467.png 700w" sizes="auto, (max-width: 783px) 100vw, 783px" /><br />
<em>Веб-сайт Eurostar, показаний англійською (США), підтримував кілька мов, але не сказав, який формат дати він очікував. Тут дату від&#8217;їзду можна прочитати як 2 липня або 7 лютого.</em></p>
<p>&nbsp;</p>
<ul>
<li><strong>Використовуйте елементи календаря (calendar pickers) з чітко визначеними назвами місяців.</strong></li>
</ul>
<p>Деякі фреймворки, такі як Bootstrap, надають елементи календарного вибору (calendar pickers) для підтримки однозначного вибору дати.</p>
<p><img loading="lazy" decoding="async" class=" wp-image-691 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Bootstrap-calendar-picker.png" alt="" width="457" height="447" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Bootstrap-calendar-picker.png 500w, https://www.ux-ui.top/wp-content/uploads/2018/04/Bootstrap-calendar-picker-300x293.png 300w" sizes="auto, (max-width: 457px) 100vw, 457px" /><br />
<em>У календарі вибору (calendar picker) Bootstrap було вказано назву місяця, щоб було зрозуміло, яку дату вибрати.</em></p>
<p><img loading="lazy" decoding="async" class=" wp-image-692 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/calendar-picker-on-the-English-version-of-Ctrip.png" alt="" width="782" height="443" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/calendar-picker-on-the-English-version-of-Ctrip.png 1299w, https://www.ux-ui.top/wp-content/uploads/2018/04/calendar-picker-on-the-English-version-of-Ctrip-600x340.png 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/calendar-picker-on-the-English-version-of-Ctrip-300x170.png 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/calendar-picker-on-the-English-version-of-Ctrip-768x435.png 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/calendar-picker-on-the-English-version-of-Ctrip-1024x580.png 1024w, https://www.ux-ui.top/wp-content/uploads/2018/04/calendar-picker-on-the-English-version-of-Ctrip-700x397.png 700w" sizes="auto, (max-width: 782px) 100vw, 782px" /></p>
<p><em>Вибір календаря на англійській версії Ctrip не позначав назву місяця. Користувачі мали зробити висновок, що місяць настає перед цим днем.</em></p>
<p>&nbsp;</p>
<p><strong>Висновок</strong></p>
<p>Моделі введення дати не створюються однаково. Використовуйте дизайнерські шаблони, які підходять для вашого контексту. Під час розробки полів введення дати підтримуйте введення тексту та враховуйте, чи є у вас міжнародна аудиторія. Уникайте неоднозначних дизайнів, тому що вони можуть змусити людей відчувати роздратування та прикрощі після роботи з вашим сайтом. Дотримуйтесь цих рекомендацій, щоб запобігти відмові від вашої форми та уникнути катастрофічних помилок.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ux-navchannya/polya-formy-vvedennya-daty-rekomendacziyi-po-dyzajnu-ux.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Простий вступ у Lean UX</title>
		<link>https://www.ux-ui.top/ux-navchannya/prostyj-vstup-u-lean-ux.html</link>
					<comments>https://www.ux-ui.top/ux-navchannya/prostyj-vstup-u-lean-ux.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Thu, 12 Apr 2018 08:09:19 +0000</pubDate>
				<category><![CDATA[UX навчання]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=771</guid>

					<description><![CDATA[Lean UX – неймовірно корисна техніка під час роботи над проєктами, у яких використовується метод розробки Agile (гнучкий метод розробки). Традиційні методи UX часто не працюють, коли розробка виконується у стислій термін – недостатньо часу для надання UX так само. По суті, Lean UX та інші форми UX мають однакову мету – забезпечення досвіду користувачів, просто те, як ви працюєте над проєктом, дещо відрізняється. Тож подивімось, як це може працювати.]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="brand-testimonial card">
<div class="brand-image"><img decoding="async" src="https://public-media.interaction-design.org/images/idf-logo.svg" alt="The IDF" width="75" /></div>
<div class="details"><span style="font-weight: 400;">Оригінал статті:</span><a href="https://www.interaction-design.org/literature/article/a-simple-introduction-to-lean-ux">https://www.interaction-design.org/literature/article/a-simple-introduction-to-lean-ux</a></div>
</div>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Lean UX – неймовірно корисна техніка під час роботи над проєктами, у яких використовується метод розробки Agile (гнучкий метод розробки). Традиційні методи UX часто не працюють, коли розробка виконується у стислій термін – недостатньо часу для надання UX так само. По суті, Lean UX та інші форми UX мають однакову мету – забезпечення досвіду користувачів, просто те, як ви працюєте над проєктом, дещо відрізняється. Тож подивімось, як це може працювати.</span></p>
<p>&nbsp;</p>
<h3><strong>Lean UX – що це?</strong></h3>
<p><span style="font-weight: 400;">Lean UX фокусується на досвіді в процесі розробки дизайну та менш орієнтований на кінцеві результати, ніж традиційний UX. Це потребує вищого рівня співпраці з усією командою. Основна мета – зосередитись на отриманні зворотного зв&#8217;язку якомога раніше, щоб його можна було використовувати для прийняття швидких рішень. Суть розробки Agile полягає в тому, щоб працювати у швидких ітеративних циклах, а Lean UX імітує ці цикли для забезпечення гарантії того, що дані, що генеруються, можуть бути використані на кожній ітерації.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-632 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/What-is-Lean-UX.jpg" alt="" width="824" height="463" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/What-is-Lean-UX.jpg 1280w, https://www.ux-ui.top/wp-content/uploads/2018/04/What-is-Lean-UX-600x338.jpg 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/What-is-Lean-UX-300x169.jpg 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/What-is-Lean-UX-768x432.jpg 768w, https://www.ux-ui.top/wp-content/uploads/2018/04/What-is-Lean-UX-1024x576.jpg 1024w, https://www.ux-ui.top/wp-content/uploads/2018/04/What-is-Lean-UX-700x394.jpg 700w, https://www.ux-ui.top/wp-content/uploads/2018/04/What-is-Lean-UX-539x303.jpg 539w" sizes="auto, (max-width: 824px) 100vw, 824px" /></p>
<p style="text-align: left;"><em>Author/Copyright holder: Vimeo. Copyright terms and licence: Public Domain</em></p>
<p>&nbsp;</p>
<h3><strong>Потрібність у прикладаннях в Lean UX</strong></h3>
<p><span style="font-weight: 400;">У традиційному UX проєкт побудований на охопленні та виконанні вимог. Мета – забезпечити, щоб результати були максимально докладними та відповідали вимогам, викладеним на початку проєкту.</span></p>
<p><span style="font-weight: 400;">Lean UX трохи відрізняється. Ви не орієнтовані на детальні результати. Ви прагнете зробити зміни, які покращують продукт тут і зараз – в основному, щоб змінити результат на краще.</span></p>
<p><span style="font-weight: 400;">На практиці це працює шляхом позбавлення від &#8220;вимог&#8221; та використання &#8220;постановки проблеми&#8221;, що повинно призводити до набору припущень, які можуть бути використані для створення гіпотез.</span></p>
<p><span style="font-weight: 400;">Що таке припущення? Припущення – це, власне, висловлювання те, що ми вважаємо правдою. Вони покликані створити спільне розуміння навколо ідеї, що дає можливість усім розпочати. Зрозуміло, що припущення можуть бути невірними та можуть бути змінені під час проєкту, оскільки в процесі команда розвиває найкраще розуміння.</span></p>
<p><span style="font-weight: 400;">Припущення зазвичай генеруються на нараді. Ви об&#8217;єднуєте команду та заявляєте про проблему, а потім дозволяєте команді провести мозковий штурм своїх ідей для вирішення проблеми. У процесі ви генеруєте відповіді на певні питання, які формують ваші припущення.</span></p>
<p><span style="font-weight: 400;">Стандартні питання:</span></p>
<ul>
<li><span style="font-weight: 400;">Хто наші користувачі?</span></li>
<li>Навіщо використовується продукт?</li>
<li>Коли він використається?</li>
<li>У яких ситуаціях він використовується?</li>
<li>Якою буде найважливіша функціональність?</li>
<li>Який найбільший ризик доставлення товару?</li>
</ul>
<p><span style="font-weight: 400;">На кожне запитання може бути більше однієї відповіді. Це призводить до більшої кількості припущень, у порівнянні з тим, що ми могли б практично обробити. Якщо це так, команда може визначити пріоритети у своїх припущеннях, швидко дотримуючись своїх генерацій. Загалом ви визначаєте пріоритетність своїх припущень щодо ризику, який вони представляють (які наслідки виникнуть, якщо це вийде помилковим? Чим серйознішим є наслідок, тим вищий пріоритет) і за рівнем розуміння цієї проблеми (що менше ви знаєте, тим вищий пріоритет).</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-633 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/Assumptions-in-Lean-UX.jpg" alt="" width="828" height="621" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/Assumptions-in-Lean-UX.jpg 640w, https://www.ux-ui.top/wp-content/uploads/2018/04/Assumptions-in-Lean-UX-600x450.jpg 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/Assumptions-in-Lean-UX-300x225.jpg 300w" sizes="auto, (max-width: 828px) 100vw, 828px" /></p>
<p><em>Author/Copyright holder: visualpun.ch. Copyright terms and licence: CC BY-SA 2.0</em></p>
<p>&nbsp;</p>
<h3><strong>Cтворення гіпотези в Lean UX</strong></h3>
<p><span style="font-weight: 400;">Гіпотези, створені Lean UX, призначені для перевірки наших припущень. Існує простий формат, який ви можете використати, щоб швидко та легко створювати свої власні гіпотези.</span></p>
<p><span style="font-weight: 400;">Приклад:</span></p>
<p><span style="font-weight: 400;">Ми вважаємо, що надання користувачам можливості зберігати свій прогрес у будь-який час має важливе значення для користувачів смартфонів. Це дозволить досягти вищого рівня завершення реєстрації. Ми продемонструємо це, коли зможемо виміряти покращення поточної швидкості завершення на 20%.</span></p>
<p><span style="font-weight: 400;">Ми викладаємо своє переконання, чому воно важливе та кому воно важливе. Потім ми зупиняємось на тому, чого очікуємо досягти. Нарешті, ми визначаємо, які докази нам потрібно зібрати, щоб довести, що наше переконання є вірним.</span></p>
<p><span style="font-weight: 400;">Якщо ми виявимо, що немає можливості довести нашу гіпотезу – ми можемо йти у неправильному напрямі, тому що наші результати чітко не визначені.</span></p>
<p><span style="font-weight: 400;">Однією з великих переваг такої роботи є усунення здебільшого “я не думаю, що це гарна ідея” та політичної боротьби з процесом UX-дизайну. Кожна ідея буде протестована та чітко визначено критерії доказів. Немає доказів? Тоді настав час відмовитися від ідеї та спробувати щось ще.</span></p>
<p><span style="font-weight: 400;">Якщо кожен може зрозуміти гіпотезу та очікування від неї, вони, як правило, з радістю чекають, щоб переконатися, що це правда, а не палко обговорюють свою власну суб&#8217;єктивну точку зору.</span></p>
<p>&nbsp;</p>
<h3><strong>Мінімальний життєздатний продукт і Lean UX</strong></h3>
<p><span style="font-weight: 400;">Мінімальний життєздатний продукт (Minimum Via ble Product, MVP) – це основна концепція Lean UX. Ідея полягає в тому, щоб створити найпростішу версію ідеї, протестувати її, і якщо немає жодних цінних результатів, відмовитись від неї. Багатообіцяльні MVP можуть бути включені в подальші етапи дизайну і розробки без особливих проблем.</span></p>
<p><span style="font-weight: 400;">Це чудовий спосіб максимізації ваших ресурсів і одна з причин, чому він так добре працює з розробкою Agile &#8211; це дозволяє проводити безліч експериментів без стереотипів.</span></p>
<p><img loading="lazy" decoding="async" class=" wp-image-634 aligncenter" src="https://www.ux-ui.top/wp-content/uploads/2018/04/minimum-viable-product.jpg" alt="" width="832" height="468" srcset="https://www.ux-ui.top/wp-content/uploads/2018/04/minimum-viable-product.jpg 600w, https://www.ux-ui.top/wp-content/uploads/2018/04/minimum-viable-product-300x169.jpg 300w, https://www.ux-ui.top/wp-content/uploads/2018/04/minimum-viable-product-539x303.jpg 539w" sizes="auto, (max-width: 832px) 100vw, 832px" /></p>
<p><em>Author/Copyright holder: Eric delcroix. Copyright terms and licence: CC BY-NC-SA 2.0</em></p>
<p>&nbsp;</p>
<h3><strong>Дослідження користувачів і тестування в Lean UX</strong></h3>
<p><span style="font-weight: 400;">Дослідження та тестування користувачів за самою природою Lean UX засновані на тих же принципах, що й у традиційних середовищах UX. Проте цей підхід має тенденцію бути “швидким та брудним” – результати мають бути надані до початку наступного Agile Sprint; тому набагато менше уваги приділяється потужним, ретельно документованим висновкам і більше приділяється уваги необробленим, сирим даним.</span></p>
<p><span style="font-weight: 400;">Обов&#8217;язки для досліджень також мають тенденцію поширюватися ширше між усіма членами команди, тому немає “вузького місця”, створеного за наявності єдиного ресурсу дизайну UX, який намагається самостійно виконати всю роботу у стислий термін. Це часто призводить до практичної UX-роботи та підвищує рівень розуміння та підтримки роботи UX у команді розробників.</span></p>
<p><strong> </strong></p>
<h3><strong>Висновок</strong></h3>
<p><span style="font-weight: 400;">Це огляд Lean UX достатнього високого рівня, але, звичайно ж, інформації набагато більше, ніж у цій короткій статті. З усім тим, ці базові концепції повинні дати вам можливість почати рухатися у правильному напрямку, коли справа доходить до реалізації Lean UX у середовищі Agile.</span></p>
<p><em>Header Image: Author/Copyright holder: Rosenfeld Media. Copyright terms and licence: CC BY 2.0</em></p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ux-navchannya/prostyj-vstup-u-lean-ux.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Три рівня дизайну від Дона Нормана</title>
		<link>https://www.ux-ui.top/ux-navchannya/tri-rivnya-dizajnu-vid-dona-normana.html</link>
					<comments>https://www.ux-ui.top/ux-navchannya/tri-rivnya-dizajnu-vid-dona-normana.html#respond</comments>
		
		<dc:creator><![CDATA[UX Editor]]></dc:creator>
		<pubDate>Wed, 11 Apr 2018 08:26:42 +0000</pubDate>
				<category><![CDATA[Продукт]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=780</guid>

					<description><![CDATA[У людському розумі є безліч областей, відповідальних за те, що ми називаємо емоціями; разом ці зони складають емоційну систему. Дон Норман вважає, що емоційна система складається з трьох різних, але взаємопов'язаних рівнів, кожен з яких впливає певним чином на наш досвід у світі. Три рівні – це інтуїтивний, поведінковий та рефлекторний. Інтуїтивний рівень відповідає за укорінені, мимовільні та подібні до тваринних інстинктів якості людських емоцій, які майже повністю не піддаються нашому контролю. Поведінковий рівень належить контрольованим аспектам людських дій, де ми несвідомо аналізуємо ситуацію, щоб розробити спрямовані на мету стратегії, які, швидше за все, виявляться ефективними в найкоротші терміни або з найменшою кількістю дій.]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<div class="brand-testimonial card">
<div class="brand-image"><img decoding="async" src="https://public-media.interaction-design.org/images/idf-logo.svg" alt="The IDF" width="75" /></div>
<div class="details">Оригінал статті: <a href="https://www.interaction-design.org/literature/article/norman-s-three-levels-of-design?ep=ux-ui" rel="nofollow">https://www.interaction-design.org/literature/article/norman-s-three-levels-of-design</a></div>
</div>
<p>&nbsp;</p>
<p><span style="font-weight: 400;">Автор – Андреас Комнінос (Andreas Komninos)</span></p>
<p><em><span style="font-weight: 400;">У людському розумі є безліч областей, відповідальних за те, що ми називаємо емоціями; разом ці зони складають емоційну систему. Дон Норман вважає, що емоційна система складається з трьох різних, але взаємопов&#8217;язаних рівнів, кожен з яких впливає певним чином на наш досвід у світі. Три рівні – це інтуїтивний, поведінковий та рефлекторний. Інтуїтивний рівень відповідає за укорінені, мимовільні та подібні до тваринних інстинктів якості людських емоцій, які майже повністю не піддаються нашому контролю. Поведінковий рівень належить контрольованим аспектам людських дій, де ми несвідомо аналізуємо ситуацію, щоб розробити спрямовані на мету стратегії, які, швидше за все, виявляться ефективними в найкоротші терміни або з найменшою кількістю дій. Рефлекторний рівень за словами Дона Нормана, це “… дім роздумів, свідомої думки, вивчення нових понять та загальних висновків про світ”. Ці три рівні, хоча й класифікуються як окремі виміри емоційної системи, але вони пов&#8217;язані та впливають один на одного, щоб створити наш спільний емоційний досвід у світі.</span></em></p>
<p><span style="font-weight: 400;">В емоційному дизайні: чому ми любимо (або ненавидимо) повсякденні речі, Дон Норман (видатний вчений у галузі когнітивної науки, дизайну та юзабіліті-проєктування) розрізняє три аспекти або рівня емоційної системи (тобто сукупність частин, відповідальних за емоції в людському розумі), а саме: інтуїтивний, поведінковий та рефлекторний рівні. Всі ці рівні чи аспекти дуже пов&#8217;язані та переплітаються в емоційній системі, але впливають на дизайн по-своєму. Нижче наведено три відповідні рівні дизайну:</span></p>
<p><strong>Інтуїтивний дизайн</strong> &#8211; &#8220;Належить до зовнішнього вигляду&#8221;.</p>
<p><span style="font-weight: 400;">Цей рівень дизайну належить до відчутних якостей об&#8217;єкта і до того, які почуття вони викликають у користувача/спостерігача. Наприклад, фамільний старовинний годинник не має більше можливостей або функцій, що визначають час, ніж маленький, безликий годинник на камінній полиці, але інтуїтивні (глибоко укорінені, несвідомі, суб&#8217;єктивні та мимовільні почуття) якості відрізняють ці два об&#8217;єкти в очах власника. Більшість часу, витраченого на розробку продукту, тепер присвячена інтуїтивному дизайну, оскільки більшість продуктів у певній групі (наприклад, пальники/ліхтарики, чайники, тостери та лампи) мають тенденцію пропонувати один й той самий або аналогічний набір функцій, тому зовнішні аспекти допомагають відрізнити продукт від конкурентів. Те, що ми тут маємо на увазі &#8211; це &#8220;брендинг&#8221;, а саме акт розрізнення одного продукту від іншого, для чого застосовують не переваги, які вони пропонують користувачеві, а використовують погляди, переконання, почуття користувачів і те, що вони хочуть відчувати, щоб викликати такі емоційні реакції.</span></p>
<p><span style="font-weight: 400;">Це може бути досягнуто шляхом використання зображень дітей, тварин або персонажів мультфільмів, щоб надати чомусь зовнішнього вигляду молодості або використовувати кольори (наприклад, червоний для &#8220;сексуального&#8221; та чорний для &#8220;страшного&#8221;), форми (наприклад, жорсткі лінійні форми) або навіть стилів (наприклад, Арт-деко), що викликають спогади про деякі епохи. Інтуїтивний дизайн спрямований на те, щоб проникнути в голову користувача/клієнта/спостерігача і використовувати його емоції або для поліпшення досвіду користувача (наприклад, поліпшення загальної візуальної привабливості), або для обслуговування деяких бізнес-інтересів (наприклад, емоційний шантаж клієнта/користувача/спостерігача) , щоб він здійснив покупку, відповідно до цілей компанії/бізнесу/власника продукту).</span></p>
<p><strong>Поведінковий дизайн</strong> &#8211; &#8220;&#8230; <span style="font-weight: 400;">має відношення до задоволення та ефективності використання&#8221;</span>.</p>
<p><span style="font-weight: 400;">Поведінковий дизайн, ймовірно, найчастіше називають зручністю використання (юзабіліті), але ці два терміни здебільшого стосуються практичних та функціональних аспектів продукту або всього того, що ми можемо використовувати у нашому середовищі. Поведінковий дизайн (ми використовуватимемо цей термін замість юзабіліті з цього моменту) зацікавлений, наприклад, у тому, як користувачі виконують свою діяльність, наскільки швидко і точно вони можуть досягти своїх цілей та завдань, скільки помилок користувачі роблять при виконанні певних завдань та наскільки добре продукт враховує як досвідчених, так і недосвідчених користувачів. Поведінковий дизайн, мабуть, найлегше тестувати, оскільки рівні продуктивності можна виміряти, коли фізичні (наприклад, ручки, кнопки, важелі, перемикачі та ключі) або частини об&#8217;єкта, що використовуються, будуть змінені. Наприклад, кнопки, відповідальні за окремі операції, можуть розташовуватися на різних відстанях один від одного, щоб перевірити, скільки часу потрібно користувачеві для виконання двох завдань послідовно. Як альтернатива, частота помилок може бути виміряна з використанням тієї (тих) маніпуляції (ий). Приклади досвіду на поведінковому рівні включають задоволення, що отримується від можливості знайти контакт і негайно зателефонувати на мобільному телефоні, а також легкість друкування на клавіатурі комп&#8217;ютера, складність введення на маленькому сенсорному пристрої, наприклад, iPod Touch та насолоду, яку ми відчуваємо при використанні добре продуманого контролера комп&#8217;ютерної гри (наприклад, на мою скромну думку, панель управління N64). Поведінковий рівень здебільшого стосується емоцій, які ми відчуваємо у результаті виконання або невиконання наших цілей. Коли продукти/об&#8217;єкти дозволяють нам виконувати свої завдання з мінімальними труднощами та невеликими свідомими зусиллями, емоції швидше за все будуть позитивними. Навпаки, коли продукти обмежують нас, змушують нас змінювати чи коригувати наші цілі відповідно до їх обмежень або просто змушують нас бути уважними під час використання, ми більш схильні відчувати досвід негативних емоцій.</span></p>
<p><strong>Рефлективний дизайн</strong> &#8211; &#8220;&#8230; <span style="font-weight: 400;">розглядає раціоналізацію та інтелектуалізацію продукту</span>.</p>
<p><span style="font-weight: 400;">Чи можу я розповісти історію про це? Чи звернена вона до моєї самооцінки, до моєї гордості? Це найвищий рівень емоційного дизайну; представляє свідомий рівень думки, де ми свідомо наближаємося до дизайну; зважуючи свої плюси та мінуси, судячи з нашої більш нюансної та раціональної сторони та витягуючи інформацію, щоб визначити, що це означає для нас як індивідуума. Рефлективне мислення дозволяє нам раціоналізувати інформацію довкілля, щоб проводити поведінковий рівень. Візьмемо, наприклад, розумний годинник (smartwatches) / “Дослідники Jaewon Choi та Songcheol Kim з Корейського університету вивчили наміри клієнтів користуватися розумним годинником за двома основними факторами: сприйняття користувачем пристрою як технологічного нововведення та як розкішного модного продукту. Погляд користувачів на розумний годинник як технологічну інновацію пов&#8217;язаний з їх сприйняттям корисності пристрою та простоти використання (поведінковий рівень). З іншого боку, погляд користувачів на розумний годинник як на розкішний модний продукт пов&#8217;язаний з їх сприйняттям того, наскільки вони будуть радіти годинникам, і з рівнями самовираження, які їм надасть пристрій, тобто здатність виражати себе та покращити свій імідж. І насолода, і самовираження залежить від інтуїтивного рівня (&#8220;Чи виглядають годинники красиво?&#8221;), але також й від рефлекторного рівня (&#8220;Що подумають мої друзі, коли побачать мене в цьому годиннику?&#8221;). Рефлективний рівень взаємодіє з наслідками поведінкового рівня – користувачі можуть змиритися з труднощами та недоліками у зручності використання розумного годинника, тому що вони вважають, що вони отримують інші, нефункціональні переваги від нього. Перша версія розумного годинника Apple мала безліч функціональних недоліків і проблем юзабіліті, але це не завадило компанії отримати другий за величиною світовий дохід у годинниковій індустрії протягом першого ж року продажу!</span></p>
<h3><strong>На закінчення</strong></h3>
<p><span style="font-weight: 400;">Тут ми представили три рівні дизайну від Дона Нормана: інтуїтивний, поведінковий та рефлекторний. Інтуїтивний рівень дизайну належить до першого враження від дизайну, як з погляду сприйняття користувачем продукту, так і з погляду почуттів, які виникають у користувача через цей продукт. Поведінковий рівень ставиться до досвіду використання цього продукту. Ми часто думаємо про цей рівень, коли ми думаємо про досвід користувача. Рефлекторний рівень належить міркуванню користувача про продукт як до, під час, так і після використання. Всі три рівні поєднуються, щоб сформувати увесь досвід продукту.</span></p>
<p><span style="font-weight: 400;">Нижче слідує ідеальне відео: три способи гарного дизайну роблять нас щасливими від Дона Нормана</span></p>
<p><iframe loading="lazy" title="The three ways that good design makes you happy | Don Norman" width="500" height="281" src="https://www.youtube.com/embed/RlQEoJaLQRA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3><strong>Посилання і де дізнатися більше</strong></h3>
<p><span style="font-weight: 400;">Choi, J., &amp; Kim, S. (2016). “Чи є розумний годинник IT-продуктом, чи модним продуктом? Дослідження факторів, що впливають на намір використовувати розумний годинник.” Комп&#8217;ютери у поведінці людини, 63, 777-786.</span></p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/ux-navchannya/tri-rivnya-dizajnu-vid-dona-normana.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Вступ в основні техніки формування ідей, які є серцем дизайн-мислення</title>
		<link>https://www.ux-ui.top/dyzajn-myslennya/vstup-v-osnovni-tehniky-formuvannya-idej-yaki-ye-serczem-dyzajn-myslennya.html</link>
					<comments>https://www.ux-ui.top/dyzajn-myslennya/vstup-v-osnovni-tehniky-formuvannya-idej-yaki-ye-serczem-dyzajn-myslennya.html#respond</comments>
		
		<dc:creator><![CDATA[Victor Makhankov]]></dc:creator>
		<pubDate>Thu, 01 Mar 2018 12:27:45 +0000</pubDate>
				<category><![CDATA[Дизайн Мислення]]></category>
		<guid isPermaLink="false">https://www.ux-ui.top/?p=829</guid>

					<description><![CDATA[Формування ідей чи ідеація – це серце процесу дизайн-мислення. Існує сотні технік створення ідей, такі як мозковий штурм, скетчінг (“швидкий малюнок”), скампер (SCAMPER) та прототипування. Деякі техніки – це перейменовані або трохи адаптовані версії фундаментальніших технік. Тут ви ознайомитеся з найкращими техніками, а також дізнаєтесь, коли та чому їх використовують.]]></description>
										<content:encoded><![CDATA[<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="brand-testimonial card">
<div class="brand-image"><img decoding="async" src="https://public-media.interaction-design.org/images/idf-logo.svg" alt="The IDF" width="75" /></div>
<div class="details">Оригінал статті: <a href="https://www.interaction-design.org/literature/article/introduction-to-the-essential-ideation-techniques-which-are-the-heart-of-design-thinking?ep=ux-ui" rel="nofollow">https://www.https://www.interaction-design.org/literature/article/introduction-to-the-essential-ideation-techniques-which-are-the-heart-of-design-thinking</a></div>
</div>
<p>&nbsp;</p>
<p>Автори – Рікке Дем та Тео Сіанг (Rikke Dam, Teo Siang)</p>
<p>Формування ідей чи ідеація – це серце процесу дизайн-мислення. Існує сотні технік створення ідей, такі як мозковий штурм, скетчінг (“швидкий малюнок”), скампер (SCAMPER) та прототипування. Деякі техніки – це перейменовані або трохи адаптовані версії фундаментальніших технік. Тут ви ознайомитеся з найкращими техніками, а також дізнаєтесь, коли та чому їх використовують.</p>
<p><em>” Ідеація – це метод дизайнерського процесу, коли ви концентруєтеся на генерації ідей. Розумово він є процес “поширення” з погляду концепцій і результатів. Ідеація забезпечує як паливо, так і вихідний матеріал для створення прототипів та передачу інноваційних рішень до рук ваших користувачів.” &#8211; </em>d.school, An Introduction to Design Thinking PROCESS GUIDE</p>
<p>&nbsp;</p>
<p><strong>Як формувати ідею</strong></p>
<p>Ви формуєте ідею, об&#8217;єднавши свій свідомий та несвідомий розум. Ви поєднуєте свої раціональні думки та свою уяву. Наступні техніки – найважливіші техніки, які допоможуть вам та вашій команді формувати ідеї:</p>
<p><strong>Найважливіші техніки формування ідей: які з них ви маєте обрати?</strong></p>
<p>Відповідно до природи ідеації надзвичайно важливо використовувати техніки, які підходять типу ідей, які ви намагаєтесь генерувати. Вибрані вами техніки також повинні відповідати потребам команди творців ідей, їхнього рівня креативної продуктивності та їхнього досвіду в сесіях ідеації.</p>
<p>Ось короткий огляд найважливіших технік формування ідей:</p>
<p>&nbsp;</p>
<p><strong>Мозковий штурм (Brainstorm)</strong></p>
<p>Під час сеансу &#8220;мозкового штурму&#8221; ви використовуєте спільну діяльність групи для отримання нових ідей, шляхів створення їх на основі інших ідей. Ідеї ​​поєднуються для створення однієї гарної ідеї, як показано в слогані “1+1=3”. Учасники повинні мати можливість обговорювати свої ідеї вільно та не побоюючись критики. Ви повинні створити обстановку, за якої усі учасники можуть висловлювати дикі та дивні ідеї, які дозволять просунутися набагато далі, ніж за простого логічного осмислення проблеми.</p>
<p>&nbsp;</p>
<p><strong>Мозкове скидання (Braindump)</strong></p>
<p>&#8220;Мозкове скидання&#8221; дуже схоже на &#8220;мозковий штурм&#8221;, але виконується воно індивідуально. Учасники записують свої ідеї на аркуші й потім діляться з групою.</p>
<p>&nbsp;</p>
<p><strong>Письмовий мозковий штурм (Brainwrite)</strong></p>
<p>Письмовий мозковий штурм також дуже схожий на сесію “мозкового штурму”. З усім тим, учасники пишуть свої ідеї на аркуші паперу, а потім за кілька хвилин передають свої записи іншому учаснику, який розвиває ідеї першого учасника і так по черзі. Після ще кількох хвилин окремі учасники передають свої листки комусь ще й процес триває. Через 15 хвилин ви збираєте усі листки та починається загальне обговорення.</p>
<p><em>Письмовий мозковий штурм також дуже схожий на сесію “мозкового штурму”. З усім тим, учасники пишуть свої ідеї на аркуші паперу, а потім за кілька хвилин передають свої записи іншому учаснику, який розвиває ідеї першого учасника і так по черзі.</em></p>
<p>&nbsp;</p>
<p><strong>Мозковий штурм у русі (Brainwalk)</strong></p>
<p>&#8220;Мозковий штурм у русі&#8221; схожий на &#8220;письмовий мозковий штурм&#8221;, але замість передачі листка паперу учасники ходять по кімнаті, безперервно знаходячи нові &#8220;зупинки формування ідей&#8221;, де вони можуть доопрацювати ідеї інших учасників.</p>
<p>&nbsp;</p>
<p><strong>Найгірша можлива ідея (Worst Possible Idea)</strong></p>
<p>Найгірша можлива ідея – високоефективний метод, який ви можете використовувати для отримання потоку креативних ідей та для допомоги тим, хто не настільки впевнений у висловленні себе через “мозковий штурм”. Це також дуже весело. Замість того, щоб прагнути хороших ідей, тим самим підвищуючи тиск на учасників, вимагайте найгіршу ідею з можливих, яку може запропонувати ваша команда. Цей простий метод полегшує будь-які проблеми з занепокоєнням і впевненістю в собі, дозволяючи людям стати більш грайливими та ризикованими, оскільки вони знають, що напевно їхні ідеї не будуть ретельно перевірятися на наявність невідповідності мети. Набагато простіше сказати &#8220;Гей, ні, це не так погано&#8221; ніж протилежне.</p>
<p>&nbsp;</p>
<p><strong>Оскарження припущень (Challenge Assumptions)</strong></p>
<p>Відступіть на крок назад від розв&#8217;язуваного завдання та поставте деякі важливі питання про те, які припущення є у вас про продукт, послугу або ситуацію, де ви намагаєтеся внести новацію. Особливо ефективно заперечувати припущення, коли ви застрягли на поточних парадигмах мислення чи закінчилися ідеї. Отже, це корисно для перезавантаження усієї сесії. Ці характеристики, які ми звикли вважати зрозумілими, є по-справжньому важливими аспектами або вважаються такими, тому що ми звикли до них?</p>
<p>&nbsp;</p>
<p><strong>Карта думок (Mindmap)</strong></p>
<p>&nbsp;</p>
<p>Карта думок – графічна техніка, завдяки якій учасники формують мережу взаємозв&#8217;язків. Щоб розпочати роботу з найпростішою формою карти думок, учасники пишуть постановку проблеми або ключову фразу у середині сторінки. Потім вони пишуть рішення та ідеї, які спадають їм на думку, на цій же сторінці. Після цього учасники поєднують рішення та ідеї за допомогою кривих чи прямих ліній з їх незначними, чи важливими (попередніми, чи наступними) фактами, чи ідеями.</p>
<p>&nbsp;</p>
<p><strong>Скетчінг або &#8220;ескізний шторм&#8221; (Sketch, Sketchstorm)</strong></p>
<p>Цінною вправою під час сесії формування ідей стане вираження ідей та потенційних рішень не лише через слова, а й за допомогою ескізів та діаграм. Візуалізація може дати поштовх новим ідеям, забезпечуючи ширший спектр думок. Ідея робити нариси ваших ідей полягає не в розробці красивих малюнків, які вставлять у рамку та вішатимуть на стіну. Ескізи повинні бути максимально простими та грубими, з достатньою деталізацією, щоб зрозуміти вміст. Це також допоможе вберегти людей від прихильності до своїх маленьких витворів мистецтва.</p>
<p>Ескізи, як перевірений інструмент дизайну, допоможуть вам дослідити сферу вашого дизайну ширше і уникнути пасток, пов&#8217;язаних з фокусуванням на несприятливих дизайнерських рішеннях більш ранішнього часу. Зокрема, ескізи можуть сприяти тому, що ви зможете думати більш відкрито та креативно про свої ідеї під час дизайнерського процесу. Вони допоможуть вам створити багаті ідеї без зайвих переживань щодо їхньої якості. Ескізи допоможуть вам винаходити та досліджувати концепції, швидко записуючи ідеї. Ескізи все зроблять набагато простіше ніж обговорення, критику та обмін ідеями з іншими. Ось чому ескізи – це відмінний інструмент, який допоможе вам та вашій команді відібрати вартісні ідеї.</p>
<p><em>Ескізи мають бути максимально простими та грубими, з достатньою деталізацією, тільки щоб передати сенс.</em></p>
<p>&nbsp;</p>
<p><strong>Техніка розкадрування (Storyboard)</strong></p>
<p>Історії є ключовим засобом комунікації, навчання та вивчення. Розкадрування полягає у розробці візуальної історії, пов&#8217;язаної з проблемою, дизайном чи рішенням, яке ви хочете пояснити чи вивчити. Розкадрування може допомогти вам втілити ситуацію у життя, вона може показати, що відбувається з часом, та дослідити динаміку ситуації. Ви можете використовувати розкадрування після того, як поставите себе на місце інших людей, щоб краще зрозуміти їхнє життя. Ви можете намалювати свої історії. Розкадрування може допомогти вам подати інформацію, яку ви отримуєте під час досліджень. Створюйте сценарії, що складаються з зображень та цитат від користувачів. Якщо ви розробляєте ідеї, можна спробувати грати з різними сценаріями, щоб побачити, куди вони приведуть. Розробите єдину сюжетну лінію з акторами та сюжетом. Спробуйте створити напруженість та увімкніть сюрпризи у свою історію. Викличте емоції та покажіть боротьбу, а в кінці вивчіть і вирішіть сперечання та залиште користувача задоволеним.</p>
<p>Коли ви створюєте своє розкадрування, ви можете шукати натхнення у методі “Сім елементів гарної розповіді Аристотеля”, який ви можете завантажити, видрукувати та використовувати як посібник.</p>
<p>&nbsp;</p>
<p><strong>Рольове розігрування ідей (Bodystorm)</strong></p>
<p>Бодістормірг – це техніка, за якої учасники фізично розігрують ситуації, які намагаються удосконалити. Це може включати вираз рішень ідей за допомогою фізичної активності або прийняття деяких проблемних сценаріїв, які ми намагаємося вирішити. Фізичне розігрування процесів, сценаріїв та подій допомагає фізично залучити команду до формування ідей замість того, щоб будувати теорії щодо проблем. Техніка поєднує аспекти емпатії, мозкового штурму та прототипування в одну вправу з підвищеною енергією та рухом, що допомагає стимулювати більш високу енергію та більш значний досвід.</p>
<p>Бодістормінг може включати налаштування всього простору формування ідей за допомогою реквізиту та артефактів, щоб відтворити деяку подобу реального середовища, щоб перевірити різні сценарії та подивитися, як це може змінити ситуацію. Цей процес також може включати розробку різних кроків, з яких складається шлях клієнта.</p>
<p>&nbsp;</p>
<p><strong>Аналогії (Analogies)</strong></p>
<p>Оповідачі, журналісти, художники, лідери та будь-які інші творчі професії покладалися на створення аналогій як потужного інструменту для спілкування та створення ідей. Аналогія – це порівняння між двома речами, наприклад, як порівняння серця та насоса. Ми постійно спілкуємося, використовуючи аналогії, оскільки вони дозволяють нам висловити нашу ідею або пояснити складні питання зрозумілим та мотивуючим чином.</p>
<p>&nbsp;</p>
<p><strong>Провокація (Provocation)</strong></p>
<p>Провокація – це техніка нестандартного мислення, яка кидає виклик статус-кво та дозволяє вам досліджувати нові реалії. Нестандартне мислення дистанціюється від класичного методу розв&#8217;язання проблем, де ми виробляємо рішення крок за кроком, виходячи з даних.</p>
<p>Креативность &#8211; это путешествие через стимулы с возможно абстрактным или незримым пунктом назначения в уме. Маршрут путешествия неизвестен, и чаще всего вам необходимо изучить несколько путей, чтобы добраться до неизвестного места назначения. Провокации обеспечивают этот механизм для введения нетрадиционности в модели мышления и исследовательский процесс. Провокации сами по себе в большинстве случаев не приводят непосредственно к окончательному решению, хотя они и обеспечивают материал, из которого может быть сформирована новая идея.</p>
<p>&nbsp;</p>
<p><strong>СКАМПЕР (SCAMPER) </strong></p>
<p>Скампер – це нестандартна техніка формування ідей, яка використовує дієслова дії як стимули. Це допомагає нам ставити сім питань, щоб придумати ідеї для покращення чинних продуктів або створення нового продукту.</p>
<p>&nbsp;</p>
<p><strong>Рух (Movement)</strong></p>
<p>Техніка руху також допоможе вам, якщо ви заблоковані у генерації ідей. Ви можете використовувати цю техніку, щоб обходити блокпости у своєму мисленні. Як і техніка провокації, метод руху допоможе вам змусити вашу команду ставити під сумнів статус-кво, перемістити себе та свою команду у нову реальність.</p>
<p>Це є ідеальний “а що якщо?” інструмент. Техніки нестандартного мислення не завжди одразу призводять до конкретних чи корисних ідей, але створюють широкий спектр стимулів мислення, які можна використовувати для узагальнення практичних ідей. Щоб використовувати стимули генерації, потрібний рух, або те, що деякі називають проникливістю чи принциповою розробкою. Цей інструмент допоможе вам визначити теми, принципи, корисні атрибути або тенденції у вашому мисленні, які можна використовувати для створення більш життєздатних та реалістичних ідей.</p>
<p>&nbsp;</p>
<p><strong>Геймштормінг (Gamestorming)</strong></p>
<p>Геймштормінг – це набір ідей та методів вирішення проблем, які навмисно ігрофікуються, щоб значно збільшити рівень взаємодії, енергії та співробітництва під час групових сеансів. Він включає деякі з методів, які ми вже згадували, додаючи ігрофікацію (gamification).</p>
<p>&nbsp;</p>
<p><strong>Декілька прикладів ігрофікованих сесій формування ідей:</strong></p>
<ul>
<li><strong>Акваріум (Fishbowl):</strong> Сесія генерації ідей, під час якої учасники сидять у двох колах – одне менше й одне більше, яке оточує менший. Учасники внутрішнього кола обговорюють свої ідеї та використовують мозковий штурм, тоді як учасники зовнішнього кола слухають, спостерігають та документують ідеї та суть розмови, нічого не кажучи при цьому. Це змушує деяких слухати, а інших брати участь у мозковому штурмі.</li>
<li><strong>Антипроблема (The Anti-Problem):</strong> Ідея ґрунтується на перетворенні проблеми. В антипроблемі є протилежність до реальної проблеми, яку потрібно вирішити. Під час цієї сесії ви намагаєтеся вирішити антипроблему. Це може надихнути вас на те, чого ви не змогли б досягти, зосередившись виключно на реальній проблемі, хоча це може породжувати ідеї, які, як і раніше, пов&#8217;язані з проблемним простором. Ідеї, які ви створюєте, можна буде знову перевернути, щоб повернути їх у сферу реальної проблеми.</li>
<li><strong>Історія для прикриття (Cover Story):</strong> Це передбачає використання шаблону, який змушує учасників створювати легенду, включаючи основне зображення, заголовок, цитати та бічні панелі з відповідними фактами тощо. предметної галузі з використанням основних характеристик.</li>
</ul>
<p>&nbsp;</p>
<p><strong>Обманний мозковий штурм (Cheatstorm)</strong></p>
<p>Cheatstorming менше належить до нових ідей, а більше до ранніх методів формування ідей для прийняття наявного числа ідей та використання їх як вклад або стимул. На відміну від інших технік формування ідей, в яких основна маса створених ідей відкидається, cheatstorming трохи нагадує когнітивну стабільність, повторне використання і не витрачання матеріалу створеного раніше.</p>
<p>&nbsp;</p>
<p><strong>Штурм натовпу (Crowdstorm)</strong></p>
<p>Ще один штурм, який необхідно розглянути, включає цільову аудиторію для створення або коментування та затвердження ідей, що генеруються. Відгуки клієнтів або користувачів важливі на кожному етапі процесу, і залучення їх до вибору та оцінки ідей може призвести до виявлення найкращих та найгірших ідей, які команда могла втратити через сліпі зони. Соціальні мережі, опитування клієнтів, фокус-групи та семінари із спільного дизайну – це усі методи, які стимулюють натовп поділитися своїми думками щодо згенерованих ідей. Цей процес може не забезпечити кінцевого переможця, але він виявить цінну інформацію, яка допоможе вирішити, яку ідею варто вибрати.</p>
<p>&nbsp;</p>
<p><strong>Семінари спільного створення (Co-Creation Workshops)</strong></p>
<p><em>Бувають моменти, коли об&#8217;єднання, дослідження, ідеалізація та прототипування клієнтів або користувачів можуть виявитися корисними при швидкому об&#8217;єднанні. </em>.</p>
<p>Бувають моменти, коли об&#8217;єднання, дослідження, ідеалізація та прототипування клієнтів або користувачів можуть виявитися корисними при швидкому об&#8217;єднанні. Семінари із спільного створення та дизайну поєднують у собі ряд методів дизайн-мислення протягом кількох годин чи кількох днів або навіть тижнів.</p>
<p>Їх можна зробити денними семінарами та проводити кілька разів у різних місцях, щоб прискорити формування висновків та ідей цільового співтовариства. Ці сесії, якщо вони використовуються як разові семінари, зазвичай слідують послідовності, яка включає:</p>
<ul>
<li>Знайомство та початкова розмова, щоб зламати &#8220;лід&#8221; (Introductions and Icebreakers);</li>
<li>Бачення та вправи для визначення цінностей (Vision and Values ​​Exercises);</li>
<li>Вправи емпатії (Empathy Exercises);</li>
<li>Insight Mining;</li>
<li>Розробка проблеми (Challenge Framing);</li>
<li>Формування ідеї (Ideation);</li>
<li>Прототипування (Prototyping).</li>
</ul>
<p>&nbsp;</p>
<p><strong>Прототип (Prototype)</strong></p>
<p>Прототипування саме собою може бути технікою формування ідей. Коли ви створюєте фізичний об&#8217;єкт, вам потрібно приймати рішення і це стимулює формування нових ідей. Ви будуєте, щоби думати.</p>
<p>&nbsp;</p>
<p><strong>Творча пауза (Creative Pause)</strong></p>
<p>Важливим кроком у будь-якому процесі чи сеансі створення ідей є те, що Едвард де Боно згадує у своїй книзі “Серйозна творчість” як творчу паузу. Коли наші нейрони намагаються впоратися зі здавалося б непроникною стіною перешкод, ми можемо легко застрягти у неконструктивних способах мислення. Ми стаємо прив&#8217;язані до ранньої ідеї чи потоку думок або опиняємося у пастці негативних думок, що оточують цей процес. Творча пауза дає нам час, щоб зробити крок назад, замислитися, звільнитися від пасток, котрі ми когнітивно поставили перед собою, і знову взятися до проблеми з оновленою свіжістю розуму. Ми хочемо лідирувати проактивне мислення, а не реактивне, яке часто має негативно орієнтоване ставлення до нього.</p>
<p><em>Творча пауза дає нам час, щоб зробити крок назад, замислитися, звільнитися від пасток, котрі ми когнітивно поставили перед собою, і знову взятися до проблеми з оновленою свіжістю розуму. </em></p>
<p>&nbsp;</p>
<p><strong>На закінчення</strong></p>
<p>Формування ідей – це серце дизайн-мислення. Існує буквально сотні технік формування ідей. Тут ми надали вам огляд кращих технік, а також розкрили, коли та чому їх треба використовувати. Через сутність формування ідей надзвичайно важливо використовувати методи, що відповідають типу ідей, які ви намагаєтесь створити. Методики, які ви оберете, також повинні відповідати учасникам команди з формування ідей, їхньому рівню творчої продуктивності та досвіду участі у сесіях формування ідей.</p>
<p>&nbsp;</p>
<p><strong>Посилання та де дізнатися більше:</strong></p>
<p>Едуард Боно. Серйозна творчість: використання сили нестандартного мислення для створення нових ідей, 1993</p>
<p>Оксана Качур та Пітер Джонс. Bodystorming:</p>
<p><a href="http://designresearchtechniques.com/casestudies/bodystorming/">http://designresearchtechniques.com/casestudies/bodystorming/</a></p>
<p>Co Barry, Посібник з методу Bodystorming. d.school K-12 Lab. 2010:</p>
<p><a href="https://dschool.stanford.edu/groups/k12/wiki/48c54/Bodystorming.html">https://dschool.stanford.edu/groups/k12/wiki/48c54/Bodystorming.html</a></p>
<p>Габріела Гольдшмідт. Глава 9 Візуальна аналогія – стратегія для дизайн-роздумів та навчання</p>
<p>Інноваційні ігри Посібник з методу створення легенд. Conteneo Inc.:</p>
<p><a href="http://www.innovationgames.com/on-the-cover/">http://www.innovationgames.com/on-the-cover/</a></p>
<p>Дейв Грей. Геймштормінг: навчальний посібник для новаторів, порушників правил та прихильників змін, 2010</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ux-ui.top/dyzajn-myslennya/vstup-v-osnovni-tehniky-formuvannya-idej-yaki-ye-serczem-dyzajn-myslennya.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
