Простий спосіб презентувати свої UX-рішення потенційному клієнту

Дана стаття є прикладом осмислення і викладу деяких робочих моментів з практики UX проектувальника. З'явилося розуміння, що при вирішенні певних завдань я використовую певний підхід до розробки екранів інтерфейсу, який цілком уже «устаканився» і застосовується мною регулярно. Підхід простий і зрозумілий! І що найголовніше, він ефективно презентує мої ідеї потенційному клієнту…



Десь з середини 2016 року мої статті почали неспішно повертати мені інвестиції (як саме, я опишу в планованому незабаром дайджест-пості, який буде приурочений до першої річниці мого перебування на Хабре). Зі мною зв'язувалися власники найрізноманітніших продуктів з найрізноманітнішими проблемами. Стали звучати цікаві запитання, пропозиції і з'явилися цікаві завдання. Цікавих кейсів накопичилося дуже багато, але розповісти про багатьох з них прямо зараз не вийде: або заважає NDA, або потрібно чекати N місяців девелопменту, щоб одночасно і про кейс почитати, і сходити користувальницький досвід отримати. Я впевнений що всякий раз, коли ми плескали по руках з клієнтом — цьому сприяв саме мій спосіб демонстрації моєї готовності вирішувати його завдання. Ну або як мінімум він додавав мені більше шансів на успіх.

Про це спосіб я й хотів би розповісти нижче…

Спершу коротко і своїми словами зайвий раз про різницю між UI і UX:

Перше (UI) — це завжди одна або кілька картинок з дизайном інтерфейсу, у яких не відбита різниця в станах. Наприклад, макет картки товару в кошику. Або черговий dashboard, від яких вже дурновато. Друге (UX) — це серія кадрів, перегорнувши яку, видно шлях користувача від початку сценарію до кінця. Як правило, така серія має єдиний фундамент, але від кадру до кадру змінюються певні стани, розташування елементів, їх колір, стиль.

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

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

Що у нас є на старті? Функціонал листування (чати); підпапки, за яким чати розкидані. Потрібно придумати елегантне і просту логіку, щоб переробляти все, що зроблено «до» по-мінімуму.

До речі, це класична ситуація і один з самих цікавих типів завдань в дусі «Ой начебто все вже розроблено, але ми тут згадали, що забули дещо!». Або коли продукт обростає фічами і функціоналом, і його-то необхідно вклинюється у вже готові екрани. Втім, в цьому немає ніяких проблем, якщо ви будуєте дизайн інтерфейсу за Вашим певним правилам. В таких випадках завжди можна щось «розсунути» і новий функціонал гармонійно впишеться і без користувальницької болю.

Отже… Як же, взаємодіючи віддалено, максимально точно передати клієнтові своє рішення або показати, чому треба довірити розробку тобі, а не іншим? Для початку, нам потрібно щось на зразок плану по цій конкретній задачі! Як його знайти? Якщо включити уяву, то готові рішення можуть бути поблизу. Давайте згадаємо, як і в яких додатках ми переміщаємо контент або деякі сутності. Мені на розум відразу проситься поштовий клієнт. Там ми виділяємо один лист, або декілька. Можемо видалити або перемістити в папку. Здається підходить!



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

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

  • треба переходити в режим переміщення чатів" для того, щоб не плодити зайвого функціоналу і не засмічувати екран.
  • треба продумати за якими критеріями виділяти контакти для переміщення
  • треба задати послідовність сценарію, щоб рухати користувача по потрібному шляху
  • треба організувати вибір папки для переміщення, враховуючи, що їх може бути і 10, і 20, а можливо і більше
  • треба сказати користувачеві «видихай, все закінчилося добре!»
Вже що-то намацали! План є… Тепер підрахуємо. Тут як мінімум 5 кадрів різних станів інтерфейсу. Можливо, з'явиться необхідність у проміжних станах. Нульовим кадром треба вважати стартове стан екрану на початку сценарію. Виходить вже 6. Настав час побудувати оптимальний user experience покадрово. Соррі за блюр, але це NDA, а значить доводиться розмазувати картинки. Давайте нарешті перейдемо до мого дизайну:

Кадр 0

«Стартове стан»


Зараз ми в чаті. Є всі елементи, про які я згадав вище. В блоці з контактами є іконка папки і стрілки. Це і буде нашим вмикачем режиму переміщення чатів. Ми натискаємо і потрапляємо в…

Кадр 1

«Режим переміщення»


Бачимо явище нових контролів. Аватарки стали круглими чекбоксами! Значить можна вибрати. Мені здається це елегантне рішення, щоб зайвих чекбоксов не плодити і не думати як впихнути невпи%уемое в блоці. Select зверху горить, а решта контроли inactive. Значить буде квест про те, як їх активувати. Натискаємо далі і викликаємо…

Кадр 2

«Попап можливостей»


Клієнт про це не просив, але я сам роблю «запас» функціоналу. Мало яка складна вибірка буде потрібно. Наприклад, у папці багато непрочитаного і треба упорядкувати вибірку саме за ним. Або банально mass select, щоб не прокликивать кожен чек-бокс. До речі, гей, LinkedIn, може заглянеш в цей пост? Після того, як в ньому почали дублюватися нотифікації про додавання контакту ще і в лічку — то все, вважайте, що лички більше немає. Потрібна листування втрачається в цьому смітті. Впроваджувати «вибрати тільки непрочитані» LinkedIn не поспішає. Вибачте, відволікся. Отже, ми з турботою подали користувачам можливість різного вибору. За нашим сценарієм нехай він тепер клацне і виконає…

Кадр 3

«Мас-селект»


Користувач таким чином вибирає всі нечисленні контакти. Помітили, як активувалися верхні контроли? Маленький квестик, згаданий вище, успішно пройдено! Потім клацне на нижній контакт і…

Кадр 4

«Деселект»


Деселектнет його, показавши нам «магію» зворотного перетворення чекбокса у аватар. Вірніше сказати в аватарную заглушку, т. к. користувач поки ще не додав свою фотку. Наступний клік робиться по елементу «Move» і…

Кадр 5

«Вибір папок»


Нашому погляду з'являється попап зі списком папок. Залишилося вибрати будь-яку, куди хочемо перемістити всі діалоги. Залишилося показати кадр, де ми говоримо користувачеві, що…

Кадр 6

«Успіх, старина!»


Все пройшло добре! Кількість елементів скоротилося, успішний досвід користувача підтвердили, написавши «Done!». З турботою про нього залишаємо можливість зробити undo. А раптом стався miss-click і бесіди «відлетіли» не в ту папку? Перестрахуватися не завадить. Нехай попап плавно зникає через пару секунд.

Кадр 7

«Повертаємо стан»


Це просто для повноти картини. Повертаємо стан, коли чати переміщені, попап зник, і режим переміщення відключився.

Сценарій завершено. Що далі?
Тепер залишилося вирішити питання як продемонструвати рішення клієнта. В наші дні вже наплодилося досить софта, щоб з розкадровки зібрати імітацію інтерфейсу. Це дозволяє зробити Axure, Invisionapp, Pixate і т. п… Проте по-перше: треба освоїти будь-яку з цих програм і витратити час; а по-друге: не факт, що це варто того, адже наш таск не такий глобальний. Я бачу тут два простих варіанти:

Перший. Зібрати всі кадри в просту GIF-анімацію і заротировать по колу. Інструментів для цього достатньо і Photoshop з цим справляється чудово. Мінус тільки в «черствість» анімації. Плюс — це швидкість створення і презентації. Ось що вийшло:



Другий. Трохи більш витончений і зажадає трохи більше часу на реалізацію. Однак, імітує реальний інтерфейс майже на 100%. Суть в тому, що з екрану записується відео, в якому всі вищевикладені кадри перемикаються один за одним, а мишею імітується діяльність. Мінус в тому, що потрібна деяка вправність і репетиція синхронного перемикання кадрів. Плюс — майже неможливо відрізнити від працюючого продукту:


От і все. Абзац тексту до листа в якості опису. Аттачим файли, посилання, відео і т. п… Добре, якщо спершу клієнт побачить анімацію. Потім, якщо захоче, може пройтися по кадрам і розібрати деталі. Це часто не зайве.

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

Розгорнутий власний сценарій
Я намагаюся максимально розгорнути власний сценарій в окремій задачі. План тут дуже допомагає. У своєму прикладі я почав з mass select, а потім зняв вибірку з нижнього контакту. А міг би тупо прокликать їх по черзі зверху вниз…

Широке мислення одно use-features
Здатність мислити широко дозволяє знаходити і розробляти «фішки», про яких клієнт і не підозрював. Я намагаюся поставити себе на місце користувача — це допомагає мені знаходити use-features та удосконалити функціонал. Можна іноді запитувати себе «А що тут ще може знадобитися користувачу?».

Дотримання своїх правил інтерфейсу
Все нові «фішки» я продовжую підпорядковувати правилами і гайдлайнам інтерфейсу, з яких починається кожна нова розробка. Правила інтерфейсу — це те, що я описую в документації на фінальній стадії проекту (стилі, шрифти, відступи, кольору, поведінку і відгук елементів тощо). Таким чином будь-яка Ваша нова use-фіча буде виглядати більш цілісний з продуктом. Швидше за все клієнт її схвалить!

Мабуть, тепер точно все. Бажаю Вам бути на одній хвилі з вашими клієнтами. Робіть трохи більше, ніж від Вас потрібно в конкретному таске і це зробить Вас ближче до успіху…

Якщо Вам сподобався даний матеріал, то я готовий співпрацювати...Як UX/UI-дизайнер я можу бути корисний для вашого мобільного/десктопного продукту! Розробляю інтерфейси для будь-яких систем і платформ. Надаю послуги по юзабіліті консалтингу. Використовую інженерно-итуитивный підхід для побудови оптимальних користувальницьких сценаріїв. Володію вроджену здатність поставити себе на місце користувачів і виявити можливі неоптимальності їх майбутнього досвіду. Розумію, що в хорошому інтерфейсі багато що будується на дрібницях, тому педантично ставлюся до кожного пікселю. Пишіть у скайп: creativiter / або поштою: kamushken@gmail.com


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.