7 ресурсів веб-дизайну Google для покращення вашого UX

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

Матеріал конструкції - кран

Більшу частину моєї кар’єри було зосереджено на розробці веб-досвіду та пошуку можливостей для їх покращення. У мене була можливість співпрацювати з деякими найкращими командами з веб-розробок у будь-якій уявній галузі. Кожна команда, з якою я працюю, має свій набір унікальних проблем та обмежень у ресурсах. Часом може здатися непосильним для створення веб-досвіду, який є інтуїтивним, надійним, швидким та привабливим. Але з усіма вільними ресурсами сьогодні там ніколи не було кращого часу інвестувати в Інтернет. Цей перелік ресурсів допоможе вам та вашій команді витягнути якомога більше цінності від інвестицій у веб-розробки.

1. Web.Dev & 2. Маяк

Аудит ефективності роботи маяка

Коли ви витрачаєте незліченну кількість годин на перегляд свого веб-сайту, ви можете пропустити можливості для вдосконалення. Іноді важко з'ясувати, чому певна сторінка відображається повільно. Найкращий спосіб вдосконалитись - це відступити і отримати іншу перспективу. Web.Dev призначений для кожної команди веб-розробників. Серцем Web.Dev є Маяк - автоматичний інструмент з відкритим кодом, створений для покращення якості веб-сторінок. Ви можете запустити аудит Маяка на будь-якій веб-сторінці. Цей інструмент надає детальний звіт про ефективність, доступність, прогресивні веб-додатки тощо. Аудит власного досвіду ніколи не був простішим. Ваша команда повинна розглянути можливість встановлення крос-функціональних цілей і безпосередньо додати рекомендації Маяка до ваших продуктів. Якщо продуктивність буде у вашій дорожній карті (вона повинна бути), то цей інструмент стане вашим найкращим другом. Якщо ви все ще хочете отримати більше ресурсів для підвищення швидкості свого веб-сайту, ознайомтеся з цією повною подією.

Рекомендовані орієнтири:

<2s Перша зміст фарби (FCP)
<3 показник швидкості (SI)
<5 інтерактивного часу (TTI)

Для кого це? - Усі. Менеджери продуктів. Інженери. Дизайнери. Маркетологи.

3. Галерея

Галерея, можливо, є одним із найбільш недостатньо використаних інструментів дизайну.

Однією з найважливіших частин розробки успішного веб-сайту є отримання зворотного зв’язку з користувачами та користувачами. Галерея дозволяє легко організувати та співпрацювати над дизайном виробів. Цей проект, що працює на матеріалі, є необхідним для будь-якого UXer. Цей інструмент спільної роботи дозволяє завантажувати проектні роботи, отримувати зворотній зв'язок та відстежувати зміни - швидко та ефективно. Користувальницький інтерфейс не може бути простішим у використанні, особливо якщо ви користувач gSuite. Як бонус цей інструмент доступний для ANDROID та IOS.

Для кого це? - Дизайнери та менеджери продуктів

4. Робоча скринька

Хочете створити прогресивний веб-додаток? Workbox полегшує роботу. Оскільки PWA отримують все більший оберт, розробники шукають способи побудувати найкраще в класі веб-додаток. Workbox - це посібник із покроковими кодовами та багато кращих практик. Якщо ви розробник і думаєте про оновлення свого веб-сайту до PWA, Workbox є обов'язковим.

Для кого це? - Менеджери продуктів та інженери

5. Кольоровий інструмент

Ви думаєте про те, щоб зробити редизайн або запустити свій сайт вперше? Настійно рекомендую використовувати інструмент Color Design Color. Цей інструмент дозволяє створювати, ділитися та застосовувати власні кольорові палітри до вашого інтерфейсу. Просто введіть шістнадцятковий колір, і він забезпечить основну колірну гамму з альтернативами Light and Dark. Цей інструмент не тільки допоможе вам перейти на новий рівень свого бренду, але і забезпечить дотримання найкращих практик щодо доступності. Цей простий, але ефективний інструмент дозволяє легко ділитися на Android, iOS і навіть CodePen. Також настійно рекомендую редактор тем матеріалів.

Для кого це? - Дизайнери

6. Студія даних

Розблокуйте силу своїх даних за допомогою інтерактивних інформаційних панелей та цікавих звітів, які надихають на розумніші бізнес-рішення. Покращення вашого веб-досвіду - це зусилля команди. Data Studio - це простий спосіб отримати важливі тенденції залучення користувачів. Я бачив безліч інструментальних панелей спеціальної студії даних, як-от Мобільна інформаційна панель електронної комерції без тертя (зроблена моїм однолітком Дамлою Какіркою). Data Studio дозволяє створювати власні представлення даних та додавати коментарі для будь-якого члена команди для інтерпретації даних. Це також дозволяє вам легко підключати свої дані з електронних таблиць, аналітики, Google Ads тощо. Найкраща частина Data Studio - це простота. Незалежно від вашої ролі, ви можете перетворити необроблені дані в проникливі показники та виміри. Тільки коли ви думаєте, що це не може покращитися, ви зрозумієте, що не потрібно вводити код або запити.

Для кого це? - Усі. Менеджер по продукції. Інженери. Дизайнери. Маркетологи.

7. Інформаційна панель CrUX

Інформаційна панель звіту про досвід користувачів Chrome (CrUX) - це загальнодоступний набір даних про ефективність користувачів. Усі дані про ефективність, включені до звіту, базуються на реальних умовах, зібраних у користувачів Chrome, які увімкнули синхронізацію історії перегляду та ввімкнули статистичну звітність про використання. Цей інструмент побудований на Data Studio і автоматично синхронізується з останніми наборами даних, і його можна легко налаштувати та поділитись з усіма членами вашої команди.

Для кого це? - Менеджери продуктів та інженери

Я сподіваюся, що цей список може впорядкувати ваш робочий процес або краще допомогти вашій команді ділитися цілями. Якщо ви шукаєте конкретні рекомендації щодо того, як можна оптимізувати продуктивність, зручність використання та доступність, читайте - UX Trends I спостерігали в Google як мобільний UX Lead. Якщо у вас є інші інструменти, які ви рекомендуєте, залиште їх у розділі коментарів нижче.

- @RyanWarrender