UXPUB 🇺🇦 Дизайн-спільнота: Ольга Тушич

Рефреймінг: де і як дизайнеру красти рішення

Ольга Тушич — Tue, 31 Mar 2026 07:57:34 +0000

У 2020 році Нова Пошта будувала новий термінал із сортувальними стрічками у три поверхи. Рішення супер — три конвеєри обробляють втричі більше посилок, а площі займають як один. Економія! Але є нюанс: як спустити з третього поверху посилку вниз, до вантажівки? Поставити звичайні пандуси-транспортери — займає надто багато місця, а місце дороге, вся економія зійде нанівець. Скидати вниз? Посилки потрощаться. Механічні ліфти — знову ж, дорого.

Поки всі чухали потилиці, один із співробітників, який щойно повернувся з відпустки, запропонував поставити для спуску посилок… горки. Спіральні горки як в аквапарку чи на дитячих майданчиках.
І що ви думаєте? Ця система успішно працює. В цю саму мить, ймовірно, на якійсь з цих горок катається моя посилка з кросівками.

Якщо ви зараз подумали “ну це ж було очевидне рішення” — ні. До того моменту ніхто не додумався до такого. Тому що всі мислили в категоріях транспортування вантажів, а не «плавного переміщення об’єктів вниз під дією гравітації». Різниця в формулюванні — різниця в рішеннях, які взагалі приходять у голову.
Це і є рефреймінг.

Як воно працює

Рефреймінг — це одна з технік ідеації, яка загалом входить в арсенал латерального мислення, тобто мислення «за рамками».

Рефреймінг складається з трьох послідовних кроків:

Абстракція: треба з формулювання проблеми прибрати всі нішеві деталі та доменну специфіку. Наприклад: замість “як упакувати сонячні панелі в ракету, де місця вкрай мало” — “як компактно скласти велику плоску конструкцію”.
Пошук аналогій: потрібно прикинути, в яких ситуаціях або в яких індустріях відбувається щось схоже, і подивитись, як там вирішують цю проблему. Наприклад: хто ще вирішує задачу “компактно скласти велику плоску річ”? Орігамі!
Адаптація рішення: обрати найбільш вдале рішення і підлаштувати його під ваші умови. Приблизно так зробили НАСА, і у 1995 році на орбіту вийшов супутник SFU із панелями, складеними за патерном Міури.

Рефреймінг в дизайні інтерфейсів

Одразу зроблю застереження: перш ніж бігти ламати стереотипи, виходити за рамки і всьо такоє — обов’язково проведіть аналіз конкурентів.

По-перше, може у якогось із них уже є хороше рішення, яке достатньо буде вкрасти і трохи докрутити. Нам платять не за те, щоб ми велосипеди винаходили :)

По-друге, Jacob’s Law прямо каже, що користувачі очікують що ваш продукт працюватиме «як всі». Вони не хочуть звикати до нових патернів і ментальних моделей. Тож щоби робити «геть не як у всіх» — у вас мають бути ну капець які вагомі аргументи.

Але якщо ви вже прошерстили конкурентів і виявили, що жоден з них навіть близько не вирішив проблему, яку треба вирішити, — тоді настає час рефреймінгу.

Рослини і цикли

Моя студентка робила застосунок по догляду за кімнатними рослинками. Їй треба було, щоб користувач міг трекати стан рослини по днях: відмічати, коли, наприклад, пожовтів лист, коли її поливали чи підживлювали, і щоби застосунок давав прогнози цвітіння.

Жодні рішення конкурентів її не влаштовували, і за допомогою рефреймінгу вона вийшла на… Flo. Застосунок для відстеження менструацій. Ну а шо? Прогнози — є. Трекати події та симптоми — є. Все є, лишається адаптувати під контекст рослинництва.

MarTech

У мене був проєкт, де потрібно було показати етапи створення креативів для рекламної кампанії. Умовно, у вас в кампанії має бути 3 рілза і 3 пости. Для одного рілза потрібно сценарій, 2 відеозйомки і фінальний монтаж, другий рілз — просто відеозйомка і монтаж, для одного поста — фотосесія і чернетка тексту, для іншого — відеозйомка, текст і монтаж. Деякі процеси можуть йти паралельно, деякі — тільки послідовно. І це все треба якось укласти в хронологічному порядку, щоби замовник реклами в будь-який момент міг зрозуміти, як просувається підготовка.

Таблиця не підходить, бо не відображає наочно хронологію і взаємозв’язки. Канбан — те саме. Діаграма Ганта — наче і хронологію показує, і взаємозв’язки, але виглядає надто заморочено для клієнта.

Рішення? Я стала шукати візуальне відображення процесів з кількома паралельними треками, з взаємопов’язаними етапами. І далеко ходити не довелось! Екрани прокачки скілів персонажа в RPG або розвитку технологій у стратегіях типу Civilization. Здавалося б — де Цива і де MarTech?

Осяяння “на вимогу”

Нерідко чудові ідеї запозичень приходять і без формального застосування рефреймінгу. Так, наприклад, у 2000-х лікарі Great Ormond Street Hospital випадково побачили по телеку, як у Формулі-1 машині міняють колеса. Вони помітили аналогії з роботою в реанімації, тоді проконсультувалися з механіками Формули-1, оптимізували деякі процеси — і це врятувало багато життів.

Та ми, дизайнери, не можемо покладатись чисто на везіння — нам потрібні робочі техніки, щоб такі осяяння викликати контрольовано. Для нас це має бути рутиною, а не чудесним співпадінням.

В вакансіях часто пишуть «think outside the box». Так от рефреймінг — оце буквально воно і є. Користуйтесь.

Амбівалентність UI-стилів: від мінімалізму до ар-нуво

Ольга Тушич — Thu, 10 Oct 2024 18:03:21 +0000

Чи траплялись вам ситуації, коли замовник просить запхати на перший екран форму заявки, кнопку зворотнього зв’язку, картинку (бажано дві), соціальні мережі, цитату-відгук та перелік послуг - і водночас наполягає, щоб це був "чистий мінімалізм"?

Мені - траплялись. І я дослідила, чому таке відбувається: не тільки з мінімалізмом, а й взагалі.

Якщо відкинути банальні аргументи - як-то погане брифування, міскомунікація, неосвічений замовник - і поглянути на проблему ширше…

На Дріблі - як на “дикому Заході”

Світ сьогодні змінюється значно швидше, ніж 50 років тому. Нові стилі виникають і поширюються блискавично, як це було з неоморфізмом, що завірусився в кінці 2018го. В лічені місяці Dribbble був переповнений макетами в стилі, який не мав навіть назви(!) - не кажучи вже про системний аналіз та формалізацію його рис. Не всім щастить так, як Material-у, з його гарненькою документацією.

Та й зі "старими" стилями проблем не менше: багацько їх беруть початок в графічному дизайні 100-річної давнини - із плакатів, обкладинок книжок, тощо. А в плакатах, як ви знаєте, не було ані кнопок, ані інпутів. От і думай: як би Гропіус намалював цю checkout form?

А намалювати ж можна що завгодно, і назвати це як заманеться. Те, що деякі українські школи подають як “ар-нуво” - арочні форми, шрифт з засічками, зірочки-квіточки - англійською називається… frasurbane. Ну, очевидно ж, нє? Власне, оригінальній фрезербейн - це стиль інтер’єру 90х, який до ар-нуво не має жодного стосунку. Але ось так дивно він перекочував в веб-дизайн і став тим, чим став.

За нестачі універсальної термінології один і той же стиль можна тлумачити зовсім по-різному. Я бачила кейс, коли дівчині замовили редизайн сайту в стилі необруталізм - от тільки її тімлід уявляв це як власне бруталізм, а клієнти… як неофлет. Можете прикинути, скільки було правок :) Так, подібні питання вирішуються роботою з референсами. Проте навіть із референсами поки ви дійдете взаєморозуміння - можете трошки посивіти.

Все тече, все міняється

Окрім проблем з класифікацією, стилі інтерфейсів ще й зазнають істотних змін з часом. І я говорю не тільки про візуальні атрибути, а про їхню функціональну суть. Більшість стилів починались як конкретна практична ідея:

Скевоморфізм: перенесемо зображення реальних предметів на екрани, щоб користувачі відчували себе в знайомому середовищі.
Мінімалізм: викинемо все зайве; краса в простоті.
Бруталізм: відмовимося від декору - бо те, що добротно працює, не може бути некрасивим.

А далі з ними поступово відбуваються перетворення:

фетишізація: стиль стає об'єктом захоплення і сприймається як модний тренд, засіб демонстрації статусу
естетизація: маркетинг змінює наші уявлення про те, що вважати привабливим, “продає” нам нові стандарти краси та розкоші
стилізація: фокус уваги переходить з функціональної ідеї суто на візуальні атрибути, які можуть ще й гіперболізуватись для підсилення враження
комерціалізація: стиль адаптується під масового користувача, без огляду на початкову концепцію.

Так сталося, наприклад, із бруталізмом в інтерфейсах. Порівняйте ранні бруталістичні сайти, як-от Craigslist, із сучасними. Сьогоднішній бруталізм зовсім не «сирий» — він щедро та ретельно декорований. Акцидентна типографія, навмисне спотворені картинки, окреслений “каркас” (нащадок верстки на таблицях) - це вже не голий функціонал, а саме імітація незграбності, wannabe-бунтарство.

Подібні перетворення притаманні не тільки UI, а й іншим культурним сферам. Гіпсові панелі “під цеглу” для імітації лофта, гламурний та вилизаний "cottage-core", “олд мані естетік” з аліекспреса - все це результати таких трансформацій.

Що ж з цим робити?

Не подумайте поганого, я в жодному разі не нию що “дизайн вже не той” і “раніше все було справжнім, а зараз - одні фейки”. Стилі еволюціонують — це природний процес, і боротися з ним не варто, але важливо враховувати та розуміти ці зміни. Бо ж власне функціональні ідеї нікуди не зникають. Той-таки скевоморфізм, що довгий час вважався модним "табу", зараз знайшов своє місце у сфері AR/VR. Так, наприклад, концепція IKEA VR Experience побудована на ідеї максимально реалістичної взаємодії користувача з майбутнім інтер'єром. Колись у нас були лише "книжкові полички" в Kindle, тепер - цілі маєтки :)

Повертаючись до питання, заданого на початку статті… Мудборди та класифікація стилів - це прекрасно, але це не панацея від всього. Бажано розуміти, що саме має на увазі замовник коли називає вам певний стиль: його стару версію або нову, візуальну “обгортку” чи функціональну ідею. Фігма стерпить все: можна намалювати монохромний макет з аскетичною типографією та геть не мінімалістичним наповненням - і це буде окей! Амбівалентність стилів UI - наша нова реальність. Що раніше ми її визнаємо, тим краще для наших нервових клітин.

Модель Кано. Практичний посібник з пріоритезації фіч продукту

Ольга Тушич — Mon, 17 Jun 2024 09:17:06 +0000

Модель Кано - це інструмент для пріоритезації певних функцій (фіч) продукту згідно їх важливості для користувачів. Винахідник цієї методики, професор Кано, вважав що різні фічі задовольняють людей в різній мірі, в залежності від рівня реалізації конкретної фічі.
Кано класифікує фічі за п'ятьма категоріями:

must have (basic needs)
performance
attractive (delighters)
indifferent
reverse.

Порівняємо такі опції: замок на дверях туалету, регулювання температури води і led-підсвітка води.
Замок на дверях туалету - це must-have. Якщо немає дверей, або двері без замка взагалі - люди будуть страшенно недовольні. Якщо замок є і працює добре - ну, їм просто ОК.
Регулятор температури води - це performance фіча. Якщо тече тільки холодна - люди недовольні. Чим плавніше можна підбавить гарячої водички - тим люди щасливіші.
LED-підсвітка - це attractive фіча, або її ще називають delighter. Коли підсвітки нема - людям ОК. Коли підсвітка є, навіть сама найпростіша - люди уже дивуються і радіють. Коли підсвітка міняє колір в залежності від температури - вони в захваті.

Сам Кано ілюстрував свою теорію графіком з плавними кривими. Він служить для пояснення концепції, але фактично під час досліджень ми ним не користуємось: дуже важко зробити градацію якості (чи ступеня реалізації) фічі. Особливо коли треба пріоритезувати одночасно велику кількість фіч. Тому дослідники використовують простіший підхід: вимірюють задоволення користувачів коли фіча є, і коли її немає.

Механіка дослідження

1. Формуємо список фіч, які треба пріоретизувати.

2. Складаємо анкету, де на кожну фічу іде 2 питання: функціональне (коли фіча є) та дисфункціональне (коли фічі немає).

Англійською питання формулюються зазвичай як “How would you feel if … ”. Український відповідник “Як би ви почувались, якщо … ” мені здається надто довгим і формальним, тому я переважно пишу так: “Уявіть що є /така-то фіча/. Як вам це?”
Порядок запитань в анкеті не має значення, як на мене. Я ставлю підряд функціональне+дисфункціональне, не перемішуючи. Але деякі дослідники вважають, що краще подавати запитання в рандомному порядку - щоб зменшити bias.

3. На кожне питання передбачаємо 5 варіантів відповідей: дуже добре, очікувано, все одно, можна стерпіти, дуже погано.

Англійською це I would be delighted, I expect that, I don't care, I can tolerate, I would not be happy. Знову ж таки, ви можете адаптувати ton of voice під себе і використовувати більш формальні “Для мене не мало б значення…” або менш формальні “Мені пофіг”.
Порядок відповідей ми ніколи не змінюємо, бо це своєрідна шкала “погано-добре”.

4. Чекаємо на відповіді від мінімум 15 респондентів.

5. Мапимо відповіді кожного респондента по табличці.

Приклад: 
Уявіть що на зсередини дверях туалету є замок. Як вам?
 - Очікувано
Уявіть що туалет не зачиняється зсередини. Як вам?
 - Бісить
“Замок на дверях туалету” - must have.

Якщо вам зустрінеться дивна відповідь, напр. коли фічі немає - людина в захваті, а коли фіча є - теж в захваті, це значить що респондент не зрозумів в чому суть фічі. Таку відповідь ми позначаємо як questionable.

6. Робимо статистичний аналіз важливості фіч: який відсоток людей вважає цю функцію must have, який - attractive, тощо.

Приклад: фіча “Замок на дверях туалету”
must have для 10 з 20 респондентів - 50%
performance для 6 із 20 респондентів - 30%
attractive для 2 із 20 людей - 10%
indifferent для ще 2 із 20 людей - 10%

7. Дискретний аналіз: для кожної фічі дивимось на головну характеристику - ту за котру “проголосував” найбільший відсоток людей.

Must Have - це базовий мінімум. Тобто без такої фічі люди взагалі не користуватимуться продуктом. Однозначно треба включати до MVP.
Performance - чим краще працює така фіча, тим щасливіші користувачі. Можна включати до MVP та поступово покращувати в наступних версіях продукту.
Attractive - це прикольні фішечки, але не обов’язкові. Їх можна не включати до MVP, якщо у вас обмежені ресурси.
Indifferent - це неважливі фічі. Тобто що вона є, що немає - людям все одно. Можна їх взагалі не робити.
Reverse - це фічі котрих користувачі не хочуть мати. Приклад: додавати іржу в воду. Чим менше іржі тече з крану, тим людям краще, а в ідеалі щоб її зовсім не було. З такими штуками треба бути обережними.
Questionable - якщо певна фіча має великий відсоток questionable відповідей, це значить що треба провести дослідження ще раз, з кращим поясненням цієї фічі.

Якщо вам трапиться фіча, де друга за популярністю характеристика відсотково дуже близька до головної, напр. фіча є attractive для 48% людей і performance для 44% людей - позначайте її як must have + performance.
Може статися, що певна фіча є performance для 40% людей, і одночасно reverse для ще 40% людей. Це ймовірно свідчить про те, що у вас в опитуванні є 2 когорти з протилежними потребами.

Головний недолік моделі Кано - вона не пояснює чому фіча потрапила в ту чи іншу категорію, тобто чому саме вона цінна/неважлива для людей. Щоб докопатись до суті питання, потрібні інші методи досліджень - напр. інтерв’ю.

Модель Кано можна використовувати як самостійно, так і в комбінації з іншими техніками пріоритезації, напр. impact-effort matrix. Саме дані з Кано вам чудово підкажуть про impact 🙂

Continious analysis або візуальне представлення фіч на графіку

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

Далі для кожної фічі ви вираховуєте середнє значення відповіді на функціональне та дисфункціональне питання. І розставляєте фічі у вигляді точок на координатній сітці, де вертикальна вісь - це показник функціональний, а горизонтальна - дисфункціональний. Те що потрапить в верхній правий квадрат - це performance, нижній правий кут - must have, тощо.

Це виглядає прикольно для презентації, але на практиці така діаграма менш інформативна аніж дискретний аналіз.

Навіщо взагалі користуватись моделлю Кано? Чому не можна просто запитати користувачів “наскільки сильно ви хочете цю фічу?”

Запитати можна. Проте може статись що респонденти відповідатимуть "так, ця фіча дуже потрібна, і ця, і оця теж" - в результаті виходить, що все потрібне і все важливе, а ви в глухому куті зі своєю пріоритезацією. Вийти з нього допоможе Кано.

Інструменти для проведення аналізу за Кано

Conjointly - прекрасний сервіс, котрий автоматизує опитування та підрахунки за Кано і не тільки. Але він геть недешевий.
Я користуюсь банальними Google Forms та Google Sheets. В крайньому випадку ви можете все порахувати навіть вручну: для опитування за Кано достатньо всього 15-20 респондентів. Це не так вже й багато в порівнянні з іншими методами досліджень.

Іконки як засіб передачі змісту

Ольга Тушич — Sun, 02 Jun 2024 07:27:47 +0000

Емоджі месопотамських фермерів

Іконки зявились набагато раніше за писемність. Приблизно 6-8 тисяч років тому в Месопотамії люди уже використовували в торгівлі глиняні жетони з малюнками продуктів: зерно, птиця, риба. Це були піктограми - тобто зображення певних реальних об’єктів.

Люди користувались піктограмами дедалі більше, “записуючи” таким чином не тільки худобу і рослини, а й природні явища, частини тіла, людей. Згодом з’явились ідеограми - картинки на позначення абстрактних понять. Наприклад, як зобразити “правління”, “ліс” або “туман”? Ці речі не мають чітких впізнаваних контурів, тож люди вигадували картинку яка +- підказує зміст поняття, але зображення уже не таке точне і однозначне.

Такі процеси відбувались в різних культурах: і в Китаї, і в Єгипті, і в Шумері.

Чим далі розвивалася культура, тим важче було вигадувати нові ідеограми, бо поняття ставали ще більш абстрактними, а словниковий запас ріс. Тоді люди придумали комбінувати кілька піктограм чи ідеограм в одну, щоб пояснити якусь складну річ. Наприклад, птах+вода=качка. Паралельно з цим зображення ставали дедалі схематичнішими задля економії часу.

Врешті решт візуальне спрощення ідеограм та зростання “словнику” привели до появи кількох незалежних систем писемності. У фонетичній системі писемності, якою ми з вами користуємось сьогодні, кожна окрема літера просто передає звук, але уже не втілює якесь поняття, як це було в давні часи. (У ієрогліфічній таки втілює, проте це тема окремої розмови). Завдяки абетці ми можемо записати взагалі будь-яке слово, навіть тільки-но вигадане - і інша людина його прочитає!

От тільки для цього треба:
а) знати конкретну абетку
б) розуміти значення цього слова.
Моя бабуся швидше “прочитає” що написав фермер 3 тис. років тому, ніж оце сучасне німецьке слово.

А значить - піктограми повертаються у вжиток!

Скевоморфні іконки в ранніх інтерфейсах

Перші графічні інтерфейси пристроїв зявились у 2й половині минулого століття. Іконки у них були скевоморфні - тобто максимально схожі на об’єкти з реального світу. Папка - папка, файл - аркуш паперу, “корзина” - корзина для паперу, тощо.

Часи минають, проблеми залишаються

Рано чи пізно, створюючи іконки у власних проєктах, ми натрапляємо на ту ж проблему, що й люди тисячі років тому: передача абстрактних і складних понять.

Так, іконку “яблуко” чи символ “+” зрозуміє будь-хто на землі, неважливо звідки він і які мови знає. Але як ви позначите поняття “маркетингові кампанії”, “затвердження креативів”, “KPI”, “вінілові шпалери”, “соус гуакамоле”? Наскільки точно стороння людина вловить значення вашої іконки?

Приклад: людина пише повідомлення виключно іконками. Скільки часу у вас зайняло зрозуміти що він хоче сказати?

Отже, інколи найліпше рішення для передачі змісту - це супроводити вашу іконку-піктограму текстом. Навіть якщо моя бабуся не зможе його прочитати :(