джерело: shutterstock

Так, редизайн (частина 2)

Як підійти до перепроектування в мобільному світі

Постановка мети перепроектування

Обговорення з різними командами дозволяють нам збирати конкретні потреби від усіх зацікавлених сторін, переконуючись, що кожен належним чином враховується під час процесу переробки дизайну та що кінцевий продукт реалізує свій повний потенціал. Ключова частина цього процесу включає раннє залучення керівників продуктів, дизайнерів та інженерів. Це значно знизить шанси на здивування, коли ми розпочнемо наступний крок, виконання. Ці дискусії допомагають посилити нашу увагу, встановити чітке бачення та мету перероблення. Це будує загальне розуміння того, як повинен виглядати, відчувати та функціонувати кінцевий продукт; діалогове вікно малює словесну картину дизайну та допомагає в розробці справжнього фреймворку (інструкції щодо UX / UI та інструментарій). І гарантує, що всі вирівняні у застосуванні кращих дизайнерських практик, які перетворять Sing! в просту, доступну, захоплюючу та бажану платформу для наших користувачів.

джерело: shutterstock

План запуску

Зміни особливості функції

Перш ніж розпочати редизайн, нам потрібно було визначити стратегію запуску, яка забезпечить успіх оновлення. У попередній дискусії ми знайшли Sing! Потрібно змінити свою глобальну навігацію для покращення виявлення функцій. Це означає перехід від колись галузевої навігації до гамбургерів до нижньої навігації. Це суттєва зміна рівня продукту. Ми повинні повернутися до дошки для малювання та переглянути: які основні особливості та яка розумна, функціональна ієрархія навігації. Перше питання полягає в тому, чи має зміни в навігації бути окремим випуском від оновленого дизайну або якщо він повинен бути переведений у випуск оновленого дизайну. Як ми знаємо, з минулих випробувань та ретельного огляду існуючих галузевих досліджень, обидва ці зміни матимуть значний вплив на продуктивність продукту. Історично, коли Smule представив нову функцію чи дизайн, процес спрацював так:

1. Створіть гіпотезу
2. Проектуйте та побудуйте функцію
3. Відпустіть функцію користувачам
4. Виміряйте та проаналізуйте продуктивність нової функції
5. Оцініть, чи досягла особливість поставленої мети чи підтверджена гіпотеза
6. Обґрунтуйте початкову гіпотезу

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

Виберіть платформу та блокуйте ресурси

Після прийняття першого головного рішення про випуск цих змін послідовно у двох окремих випусках, наступним питанням було, чи випускати спочатку на iOS або Android, враховуючи такі фактори: (1) Усі ці зміни в дизайні самі по собі є високим ризиком; (2) Ми не можемо дозволити собі зробити тест A / B для підтвердження гіпотези; (3) У нас дуже обмежені проектні та інженерні ресурси. Виходячи з цих факторів, ми погодилися, що впровадження цих змін на одній платформі є кращим варіантом мінімізації ризику. Але яка платформа першою? У порівнянні з Sing! iOS, співай! Android мав менше функцій та гірший показник залучення та утримання, ніж Sing iOS. Це означає, що менш ризиковано застосовувати зміни та зміни дизайну навігації для Sing! Спочатку Android. Це рішення допомогло знайти та заблокувати необхідні проектні та інженерні ресурси. У нас дуже худорлява структура та невелика команда. Нам пощастило, що один візуальний дизайнер і чотири інженери приєднаються до мене, щоб працювати над двофазним співом! Проект перепроектування Android Однією з проблем у цьому моменті є переконання, що ми повністю розуміємо та розширюємо необхідні проектні роботи. Про це піде мова в наступному розділі виконання дизайну.

джерело: shutterstock

Розробимо дизайн!

Обсяг проектних зусиль

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

(1) Створіть та включіть нову навігаційну парадигму, не змінюючи поточний візуальний дизайн.

(2) Створіть новий дизайн, який розгортає нові правила UX / UI, з новими кольорами, шрифтами та значками.

Другий крок вимагає дизайнерських досліджень, визначення нових правил проектування та визначення способу застосування правил до обох платформ. Поглиблена думка та рішення потрібні для: Який основний колір Співу! Які правильні нові шрифти, які нові значки та як ми тестуємо ці дизайнерські концепції. Визначення безлічі рішень, необхідних для завершення кожного кроку в новому дизайні, допомогло мені придумати приблизний графік цього майбутнього випуску.

Створіть новий дизайн навігації

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

1. Знайдіть правильну навігаційну структуру, яка відповідає вашому продукту.

Вплив розмірів пристроїв, таких як: мобільні пристрої порівняно з ноутбуком порівняно з настільним комп’ютером та iPad, змушує критично швидко прийняти рішення щодо "форми", яка повинна використовуватися в процесі проектування. Ще більше ускладнює це рішення - коливання розміру мобільного пристрою. Мобільні пристрої мають різні розміри екрана, які можуть становити до 3,5 дюймів або до 13 дюймів. Створення простої, але масштабованої навігаційної парадигми, яка спочатку підходить до найменшого екрана - запорука успіху. Коли ми вивчали конструкції навігації за допомогою наявних додатків у 2014 році, ми виявили, що існує три основні типи. (1) стандарт iOS (навігація по головному екрану), (2) стандарт Android (навігація по гамбургеру) та (3) налаштовані відповідно до потреб розробника. Ми зрозуміли, що рішення про навігаційну парадигму не повинно прийматися на основі платформи, а, скоріше, це повинна бути парадигма, яка найкраще відповідає природі або використанню продукту. Наприклад, якщо продукт орієнтований на досвід створення, як-от Instagram та Sing !, то головна навігація по екрану - чудовий варіант; якщо продукт орієнтований на досвід перегляду, наприклад електронну пошту чи новинний продукт, то навігація по гамбургеру більше підходить для цього досвіду; і, нарешті, якщо продукт має одну з основних цілей використання, наприклад Uber і Snapchat, застосувати створення спеціалізованої навігаційної конструкції для задоволення потреб цього продукту.

2. Організуйте функції навколо тем

Співайте! з'єднує людей за допомогою музики, що означає соціальну взаємодію та створення музики - дві основні теми для організації функцій продукту. Першим кроком, який ми здійснили у перегляді навігації, було розміщення кожної функції, запропонованої у відрізку "соціальної взаємодії" або "створення музики". Ми виявили, що деякі функції не вміщуються в жодному відрі, а деякі можуть вміщуватися в обох. Для таких функцій, як реєстрація, які не входили в жодне відро, ми створили третє відро з позначкою "інше". Для функцій, які можуть вміститися в будь-якому відрі, ми ставимо їх у обидва відра для подальшого розгляду. Наступним кроком є ​​ранжування функцій у кожному відрізку на основі даних, цілей продукту та досліджень користувачів. В кінцевому підсумку нам потрібно було визначити, що цікавить наших користувачів, якими функціями ми хотіли б, щоб наші користувачі мали взаємодію, і як ми могли найкраще вести їх туди. Завдяки цій рейтинговій вправі ми мали досить гарне уявлення про те, як слід упорядкувати ці функції виходячи з їхнього відра та його відносної важливості.

3. Встановіть чітку ієрархію інформації для навігації

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

Після раундів дизайнерських ітерацій новий Android Sing! навігаційний дизайн був випущений у ІV кварталі 2014 року. Як кількісне, так і якісне дослідження, ми виявили, що новий дизайн навігації різко покращив виявлення як функцій "створення музики", так і "соціальної взаємодії". В результаті утримання наших користувачів зросло різко і статистично значимо.

джерело: shutterstock

Почнемо переробку

Стратегія перепроектування

Підходячи до оновлення мобільних додатків, одне основне питання полягає в тому, на якій інструкції з дизайну платформ (iOS та Android) слід слідувати та застосовувати команду дизайнерів. Деякі компанії почали спочатку створювати стиль інтерфейсу iOS, а потім перенесли стиль дизайну iOS на свій продукт Android. Це дуже ефективний підхід до проектування та побудови функцій для другої платформи. Деякі компанії взяли різні мови дизайну для кожної з платформ. Мета цього методу - відповідати стандарту плоского дизайну (iOS) та дизайну матеріалів (Android) на кожній платформі. У кожного підходу є плюси і мінуси. Перший метод економить багато часу для команди розробників, ігноруючи той факт, що користувачі Android та користувачі iOS можуть по-різному використовувати та взаємодіяти з додатками. Другий підхід є більш зручним для користувачів та платформ, але може створити непослідовність у дизайні, заплутати користувачів, якщо вони змінювати платформи, а також уповільнити процес розробки. Для переробки дизайну для Sing! Ми вирішили розробити власний настанов щодо стилю, що інтегрує плоский дизайн із матеріальним дизайном, зберігаючи незначні, але унікальні відмінності для кожної платформи. У цьому випадку редизайн був узгоджений з оригінальним характером Sing !, який успішно залучив мільйони користувачів. На основі кількісних даних та якісних досліджень користувачі iOS та Android мають різні відмінності у використанні продукту. Підтримуючи різницю платформ у нашому посібнику зі стилів, поважається поведінка наших користувачів та дозволяє нам підтримувати високий рівень збереження користувачів.

джерело: shutterstock

Важливість підбору кольору

Існує так багато способів, як дизайнер може вибрати колір як для Бренду, так і для товару. Через новий дизайн Sing! Ми виявили, що наступні три кроки добре працювали для нас.

Крок 1 - Пошук основного кольору для представлення ідентичності вашого бренду

Ми розпочали процес вибору нового кольору, зрозумівши, хто є нашим поточним співтовариством користувачів та хто наша майбутня цільова аудиторія. Співайте! це веселе, примхливе і приємне додаток. Спільнота вітає, заохочує і пристрасно створює музику. Це приваблює людей, які вірять у самовираження, оптимізм та насолоджуються створенням музики індивідуально та у співпраці. Як одне з додатків Smule, особистість Sing! є всеосяжним, справжнім, оптимістичним, освіжаючим та захоплюючим. Маючи на увазі ці риси характеру, ми досліджували дошки настрою, які, як нам здавалося, можуть представляти ці почуття, і вибрали основний колір для представлення Sing! Це не було завершенням процесу. Вибір кольору дуже суб'єктивний. Знаючи, що цей діапазон основних кольорів мав би бути постійною присутністю на екрані за екраном протягом усього часу, ми хотіли мати високий рівень впевненості, що наші користувачі вважають його привабливим і що він «працював» належним чином на кожному екрані до його завершення. Ми провели якісне тестування на нових користувачів та існуючих енергоспоживачів, щоб зрозуміти, як вони відреагували на новий колір при застосуванні до існуючого дизайну. Ці відгуки допомогли нам краще зрозуміти, що їм подобається, а що їм не подобається і чому. Це дало нам чіткий напрямок для наступного раунду дизайнерських ітерацій.

Крок 2 - Створення палітри кольорів з основного кольору

Другий крок - побудова палітри кольорів з основного кольору. Мета - створити набір кольорів від основного кольору, масштабується від світлого до темного. Існує кілька способів створення цієї кольорової палітри. Наш підхід полягав у створенні двох наборів кольорових поєднань: від основного кольору до білого та від основного кольору до чорного. Для Sing !, ми вирішили встановити 8 кроків між цими двома сумішами. Кінцевим результатом стала палітра кольорів, що складається з 19 кольорів, включаючи основний. Це дало нам достатньо широкий діапазон кольорів для повного спектру передбачуваного використання, тобто: акцентний колір, колір тексту, колір значка, кольори роздільника та колір тла. Колір акценту повинен працювати в гармонії з основним кольором, в той час як він ще може виділятися самостійно. Блокування основного та акцентного кольору встановлює основу для вибору кольору тексту. Колір тексту відіграє критичну роль у всьому дизайні інтерфейсу. Це впливає на читаність вмісту та те, як користувачі можуть відповідати на дзвінки до дій. Щодо кольору тексту, ми знаємо, що нам потрібно досягти балансу роботи в гармонії з нашим основним кольором, забезпечуючи при цьому достатню кількість контрасту, щоб він виділявся. Найпростішим і безпечним рішенням є вибір чорного і білого, двох найбільш домінуючих кольорів для тексту. Однак знаючи Співайте! вітаємо і весело, а наші користувачі креативні та пристрасні, ми вважаємо, що використання чорного та білого може бути трохи тьмяним. Отже, ми використовували нашу основну палітру кольорів, щоб знайти колір тексту. Через декілька раундів дослідження та тестування ми вибрали три кольори для обертання між заголовками, копією тіла, CTA (заклик до дії) та текстом контексту.

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

Крок 3 - Правила: Застосування варіантів кольорів до екранів

Що я маю на увазі, встановлюючи правило використання кольору, це те, що нам потрібно встановити основні кольорові програми, акценти кольорових додатків, текстові кольорові програми та інші кольорові програми дизайну. Доопрацювання палітри кольорів не означає, що робота виконана. Необхідно розробити правила щодо того, як ці кольори можуть бути застосовані до кожного елемента інтерфейсу в додатку, досягаючи чіткої ієрархії інформації. Працюють кольори, вибрані на першому та другому кроках, чи насправді залежить від двох частин: як ми визначаємо стандарти застосування (правила) та як вони цілісно працюють на кожному екрані. З кроків 1 і 2 ми мали грубую ідею, що може включати ці правила. Зараз саме час додати деталі та доопрацювати правила. Це також означає розуміння того, як колір може представляти інформацію про товар, коли він узгоджується із наміром продукту та створює ієрархію програми. Після того, як ми встановимо норму кольору, досить важливо перевірити її та отримати реальний, вимірний, відгук від користувачів. Тестування в реальному світі, тобто застосування кольорових змін до існуючого дизайну, дозволило нам прочитати, чи працює колірне правило за призначенням чи ні. Результати також дають нам знати, чи потрібно нам коригувати та налаштовувати правила та під якими умовами користуватися. Щоб прискорити процес тестування, ми не перевіряли правила кольорів на кожному екрані. Натомість ми вибрали екрани, які залучають найбільше трафіку або мають найскладніші UX та UI-шаблони для проведення тесту на колір. На цьому етапі потрібно було перевірити дві речі. Здійснення дизайнерської роботи на комп’ютері не означає, що вона добре працює на мобільних пристроях, особливо це стосується телефонів Android. Ми також хочемо перевірити, як колір CTA та читабельність тексту відображаються на мобільних пристроях. Другий тест, який ми зробили, був тестом на дальтонізм. Ми хотіли переконатися, що сірий шрифт нового дизайну може прочитати кожен, і що на вибір кольорів не вплинуло жодна кольорова сліпота користувача.

Налаштування стильових рекомендацій та правил застосування

Однією з цілей і наслідків оновлення є створення системи масштабування, що показує, як застосовуються кольори, шрифти та піктограми на основі інформаційної ієрархії та контексту функції. Потім ця система стає біблією для майбутніх дизайнерських зусиль, роблячи їх більш ефективними та менш громіздкими. Визначення правил програми є критичним кроком у всьому цьому процесі. Якщо ми запитаємо себе, як виглядає успішний стандарт дизайну, правила повинні нас перевіряти, як контейнер не дозволяє води розливатися, якщо його правильно використовувати. Правила повинні бути досить загальними, щоб охопити всі різні випадки користувальницького інтерфейсу, а також достатньо обмежуючими для того, щоб направляти дизайнерів на прийняття правильних рішень. Вони повинні забезпечити послідовну, модульовану структуру, але все ж дають простір для творчості. Вони діють як набір лего. Ви можете будувати все, що завгодно, але не в межах керівних принципів взаємозв'язку та взаємозалежних блоків. Ви все ще можете будувати нові іграшки зі своїми леготами та додавати правила до своїх рекомендацій. Поки ви продовжуєте використовувати блоки, що з’єднують пластик, і ваш письмовий набір інструкцій, ви можете скористатись більшою мірою в будь-якому місці. Як керівні принципи взаємодії з людьми Apple, так і керівні принципи дизайну матеріалів Google є чудовими структурами дизайну, які відповідають цьому Замість того, щоб застосовувати різні правила на різних платформах, як ми обговорювали у вищезазначених частинах, ми вирішили розробити власний керівний стиль, який інтегрує плоский дизайн та дизайн матеріалів.

Такий підхід дав нам багато місця для втілення ідентичності бренду під час перероблення та розробки моделей UX та UI, що відповідають обом платформам, дотримуючись особливих поведінки користувачів кожної платформи. Один із прикладів: дизайн матеріалів для iOS та Android має різні мови використання графіки значків. У Sing! Половина наших щоденних активних користувачів приїжджають з міжнародних країн. Це означає, що ми покладалися на графіку значків для передачі функцій продукту, щоб зменшити можливі помилки в текстовому інтерфейсі. Будучи невеликою командою, створення та виготовлення однієї іконки лише для однієї платформи вимагало багато часу та енергії у візуального дизайнера. Маючи єдину іконографічну іконографію, ми допомогли нам зосередитись на розглянутій вище справі, скорочуючи при цьому час на розробку та розробку.

джерело: shutterstock

Дизайн модулів та побудова екранів

Створюйте нові екрани

Це момент істини. Це той крок, якого чекали дизайнери, від цього кроку виходить багато захоплюючих та креативних речей. Візуальні зміни, зовнішній вигляд із чіткою ієрархією справді роблять весь виріб захоплюючим та новим. Ми використовували Flinto для створення прототипу і ділилися ним у нашій команді продукту та дизайну, а також у наших споживачів енергії та збирали відгуки від усіх них. Спільний доступ до прототипу Flinto дозволив кожному використовувати та взаємодіяти з новим дизайном на своєму пристрої. Це допомагає реальним користувачам бачити та взаємодіяти з новим дизайном, розробляючи набір питань та відгуків, до яких слід звернутись до початку розробки.

Співпрацюйте з інженерами для створення дизайну

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

QA дизайн

Незалежно від того, наскільки хороші ваші інженери, є ймовірність, що вони не виконали щось так, як планували дизайнери. Секрет побудови цілісного і цілісного дизайну з файлу ескізів полягає в тому, щоб чітко визначити і погодити Design QA в остаточний процес збирання. Найефективнішим способом спілкування дизайнерських намірів було насправді сидіти з інженерами та діяти в ролі парного програміста. Симулятор з Xcode може допомогти дизайнеру бачити поодинокі екрани з реальними даними на різних пристроях, таких як iPhone 5, iPhone 6, iPhone 7 та iPad одночасно. Тим часом інженери також можуть бачити екрани різними мовами одночасно. Надання правильних налаштувань з різних мов також додатково зменшить ризик появи помилок у користувальницькому інтерфейсі, спричинених локалізацією.

На цьому етапі нова конструкція готова до доставки. І вся команда готова почути від наших користувачів про те, наскільки їм подобається новий, свіжий і приємний досвід нашої перебудови та переробки.

Але зачекайте ... Це не означає, що ми закінчилися. У наступній частині я поділюсь деякими наступними кроками, розуміннями після випуску та додатковими оновленнями цієї ініціативи з переробки дизайну.

джерело: shutterstock