Дайджест продуктового дизайну, квітень 2016

Уже шість років я публікую регулярні огляди свіжих статей по темі інтерфейсів, нових інструментів і колекцій патернів, цікавих кейсів та історичних оповідань. З стрічок кількох сотень тематичних підписок відбирається приблизно 5% стоять публікацій, якими цікаво поділитися. Попередні матеріали: квітень 2010-березень 2016.



Патерни і Best Practices
How to run a user-centred photoshoot
James Chudley описує, як студія CXPartners ставила завдання фотографу для підготовки ілюстрацій до сайту з адаптивним дизайном. Правильна постановка полегшує кадрування для використання в різних розмірах на різних пристроях.

How to run a user-centred photoshoot

The Cruelest Opt-Out Forms
Колекція форм відписки від розсилок, які сльозливо і з гумором переконують користувача залишитися.

The Cruelest Opt-Out Forms

Illustration in Product Design — Calculated, not cute
Meg Robichaud з Shopify розповідає про зростаючу роль ілюстрації в сучасних цифрових продуктах. Вони дозволяють краще розповісти про бренд і передати його цінності.

Illustration in Product Design   Calculated, not cute

Офлайнова робота інтерфейсів


Email Toolbox
Jason Rodriguez з Litmus зібрав свою колекцію корисних матеріалів щодо розсилок. Статті, інструменти, приклади і т. п. В продовження теми:


Progress Indicators in Mobile UX Design
Нік Бабич розбирає індикатори завантаження і приклади їх використання. Переклад.

Дослідження Baymard Institute


Onboarding


Анімація


Гайдлайны платформ і компаній
Bots UI kit for Messenger Platform
А ось і перший шаблон для дизайну ботів. UI Kit для Sketch, що дозволяє опрацьовувати ботів для Facebook Messenger.

Bots UI kit for Messenger Platform

BBC GEL Beta
BBC запустила бета-версію нового покоління GEL.

BBC GEL Beta

Дизайн-системи


Inside Hearst's New Agile Design Process
Theresa Mershon, креативний директор Hearst Digital, розповідає про дизайн-системі видавництва, працює над парою десятків журналів. Це дуже схоже за духом на нашу платформу, але так часто буває, коли різні компанії вирішують подібну задачу. Текстова версія і приклад типового гайдлайна видання.

Hollywood Mockuuups
Відмінний першоквітневий спец.проект від Mockuuups — шаблони телефонів з відомих фільмів. Можна показати на промо-сайті, що твоїм сервісом користується Залізна людина, наприклад.

Hollywood Mockuuups

Інші жарти на тему:
  • Space design guidelines   першоквітневий версія гайдлайнов material design, розширена до космічних масштабів. Видео-презентация.
  • І про невдалі першоквітневі жарти. Gmail додав в основний інтерфейс другу кнопку відправки листа, яка відправляла всім адресатам гифки і ховала всі відповіді від них входять! Вийшов сильний потік скарг в службу підтримки та пасхалку відкотили.


Material Design


<a href=«dribbble.com/shots/2654480-Windows-Phone-8-1-Ui-Kit-Free-Sketch-Download>Windows Phone 8.1 UI Kit (Sketch)
Шаблон дизайну під Windows Phone 8.1 для Sketch. Враховуючи вмирання платформи навряд чи актуальний, але до купи корисний.

Розуміння користувача
Evolution of Insight
Чудова інтерактивна хронологія появи важливих наукових теорій та експериментів, що вплинули на маркетингові, а пізніше і власні дослідження.

Evolution of Insight

Accessibility


Інформаційна архітектура, концептуальне проектування, контент-стратегія
OOUX — A Foundation for Interaction Design
Півроку тому вийшла стаття про об'єктно-орієнтований UX, чомусь наробила шуму, хоча в ній говорилося про стандартній практиці аналізу вимог до сутностей, яку просто призабули в сучасному lean-світі. Sophia Voychehovski написала продовження, краще розкриває думку. Правда, автор навіщо-то протиставляє свій підхід сценарної, хоча це просто справа смаку і звички.

Experience Mapping


GOV.uk


Проектування та дизайн екранів інтерфейсу
Adobe Experience Design CC
Вийшла друга бета Adobe XD. Поліпшена робота з сітками, текстом, базовими об'єктами, контентом. В продовження теми:




Easee


Sketch




Principle


Marvel


Flinto


Gravit


Прапори країн світу


Користувальницькі дослідження і тестування, аналітика
5 reasons why your first user research activity should be a usability test
David Travis радить починати впровадження користувальницьких досліджень в компанії з юзабіліті-тестування. Це самий простий і зрозумілий метод, після успіху якого буде простіше переходити до інших.

5 reasons why your first user research activity should be a usability test

UsabilitySquare
Сервіс UsabilitySquare дозволяє отримувати зворотний зв'язок за своїм прототипам і макетів від інших фахівців по інтерфейсах. Завантажуєте зображення, задаєте питання, отримуєте думки колег по цеху. Поки що активність не дуже велика, але цікавий формат.

Updraft — Feedback tool for Web iOS Android apps
Сервіс Updraft інтегрується в мобільні сайти та програми дозволяє збирати зворотний зв'язок від бета-користувачів і тестувальників. Поки доступні версії для вебу і iOS.

UserZoom


Візуальне програмування та дизайн у браузері
Framer Auto-Code
Новий Framer робить роботу більш візуальної. Тепер з блоками інтерфейсу можна працювати прямо на екрані пристрою праворуч від коду. Завдяки цьому можна грубо накидати прототип, а потім вже в коді тюнінгувати взаємодії і експериментувати. Крім того, є наочна панель властивостей як проміжний інструмент, де параметри можна змінювати як в типових графічних редакторах. Це здорово знижує поріг входу і наближає Framer до заповітам Брета Віктора, одного з головних апологетів візуального програмування. Анонс російською.



Більше матеріалів:


Origami Studio
На конференції F8 дизайн-команда Facebook показала Origami Studio, нове покоління свого інструменту Origami (його творець Brandon Walkin нещодавно покинув компанію). Він став цілком самостійним — його відв'язали від Quartz Composer, хоча принцип їх роботи залишився. Полегшується робота з однорідними списками і матрицями елементів, які використовують реальні дані, можна використовувати компоненти Android і iOS, доступний попередній перегляд на пристрої без підключення по дроту, зміни відображаються в прототипі без перезапуску.

На цьому тижні зробили якісний стрибок відразу два інструменту для візуального програмування, так що Bret Victor повинен бути задоволений. Публічно доступний він стане пізніше, але вже зараз Facebook хвалиться, що його використовують 200 дизайнерів компанії. Відео анонсу з F8.

Sympli
Інструмент для передачі дизайну від дизайнерів розробникам вийшов з бети. Основна його відмінність від аналогів підтримки Photoshop і Sketch, а також розширення для IDE (Android Studio і XCode), крім роботи з вебом.

Protein Dynamics
Нова система прототипування зі змішаним оточенням. Імпорт з Sketch у вектор, робота з артбордами як з екранів додатки, повна відповідність структури макета у векторі структурі в HTML, створення переиспользуемых компонентів в інтерфейсі програми (HTML, React, SVG, XJST, підтримка останнього стандарту ES2015, Babel CoffeeScript для опису логіки і багато іншого.

Нові скрипти


Bootstrap і Foundation


Веб-типографіка


З концепту на Dribbble код


Інструменти паблишинга


Webflow


Xcode для дизайнерів


Flexbox


Метрики і ROI
A Checklist For Planning A UX Benchmark Study
Чекліст щодо проведення порівняльних досліджень від Jeff Sauro.

UX-стратегія і менеджмент
Юрій Вітрів — Дизайн з вихлопом
П'ята презентація серії про UX-стратегії на практиці про аналітику і дослідження в роботі дизайнерів. Дизайнери дуже захоплюються вузькопрофесійних мовою і цінностями, які незрозумілі менеджерам продуктів. Краще перевести біль користувачів на мову бізнесу, адже проблеми користувачів — це те, з чим працюють і продуктологи, вони повинні бути спільною турботою. Тоді і впроваджувати зміни стане простіше, і вихлоп від них буде потужнішою.



Презентація говорить про трьох шарах занурення дизайнерів у світ продукту — краща інтеграція в усі етапи продуктової роботи, розуміння цілей і завдань бізнесу, сприяння інноваціям. У найближчі тижні буду підкручувати її за результатами зворотного зв'язку, а влітку вона вийде у вигляді статті, але вже зараз досить цілісно. В продовження теми:


Buzzfeed Product Design Roles 2.0
BuzzFeed переосмислили своє розуміння дизайнерських ролей в компанії. Вони сильно виросли за останній рік і хочуть відповідати новим завданням. І саме круте   команда опублікувала внутрішній документ з описом ролей. Золото!

Buzzfeed Product Design Roles 2.0

В продовження теми:


Design Maturity Survey
Artefact Group зробили чудовий опитувальник на тему зрілості дизайну в компанії. Він дозволяє оцінити організацію по 5 параметрам — емпатія, майстерність, характер, продуктивність і вплив дизайну. Fast Co Design зробили огляд ключових висновків з відповідей 300 компаній, вже пройшли опитування.

Design Maturity Survey

В продовження теми:


UX-лідери


Tom Greever — Articulating Design Decisions
O'reilly випустили книгу Tom Greever «Articulating Design Decisions». UXMatters публікує главу 4 з неї.

Настановні зустрічі


Продуктовий менеджмент та аналітика
Encryption is not Binary
На прикладі зростаючого попиту на захист даних, Scott Sehlhorst показує, як важливо детально вивчати запити користувачів. Цілком можливо, що вони мають на увазі під цим щось більш просте і базове, ніж технічні фахівці.

Кейси
Шрифт Яндекса — Yandex Sans
Яндекс розробили свій власний шрифт Yandex Sans за допомогою Christian Schwartz і Іллі Рудермана. Костя Горський докладно розповідає про процес роботи над ним. Перші сторінки з нової гарнітурою.

Шрифт Яндекса &amp;nbsp; Yandex Sans

Break This Safe
Непоганий розповідь про роботу над грою Break this Safe для Apple Watch. Як обмеження платформи впливали на ігрову механіку і дизайн інтерфейсу.

Непрохані редизайны
  • На диво адекватний концепт iOS 10 від Federico Viticci і Sam Beckett. Вони розбирають реальні проблеми у використанні iPhone і iPad і пропоную поліпшення для їх вирішення, в тому числі для поліпшення планшетів як пристроїв для реальної роботи. Не все розумно, але сам підхід дуже правильний.


Посадочні талони


Тренди
The Future of Design — When you come to a fork in the road, take it
Donald Norman сильний професійної філософії дизайну. Він описує два можливих шляхи розвитку професії — як ремесло і як спосіб мислення. Хоча вони пов'язані між собою, дійсно глибоке занурення в кожне з напрямків вимагає різних навичок.

Месенджери і боти


6/ THIS is what a WeChat transaction actually looks like (ordering McDonalds); not a chat but an app-within-an-app. pic.twitter.com/bEKCBnpuHW  Connie Chan (@conniechan) 1 квітня 2016 р.



Designing For The Internet Of Emotional Things
Відмінна стаття Pamela Pavliscak про те, як продукти можуть аналізувати емоції користувача і враховувати їх при побудові інтерфейсу. Приклади продуктів і рішень, поради по процесу, книги та статті по темі.

Designing For The Internet Of Emotional Things

Прогнози на 2016


The End Of App Stores As We Know Them
Hugh Durkin пророкує, що магазини додатків в звичному вигляді скоро скінчаться.

Бачення майбутнього від Microsoft


Автомобільні інтерфейси


Віртуальна реальність


Для загального і професійного розвитку
Data USA: Designers
Cesar Hidalgo з MIT Media Lab запустив за допомогою Deloitte і Datawheel шикарний сайт Data USA з відкритими даними за професіями та галузями в США. Тут є в тому числі дуже докладний профіль дизайнера. Вітчизняний ринок стає все більш зрілим і хоча б більш простої версії такого аналізу не вистачає.

Data USA: Designers

Юрій Вітрів — Дайджест продуктового дизайну, випуск 2
Для онлайн-конференції UX-Марафон зібрав дайджест продуктового дизайну за перший квартал 2016 у вигляді презентації. Минулий в такому форматі виявився затребуваним.



iA Dictionary
Компанія iA опублікувала свій внутрішній словник для спілкування з клієнтами. У ньому як серйозні опису по справі, так і жарти з внутрішньої культури.

Design Facts
Сайт Design Facts збирає історичні факти та актуальні зараз цифри, що стосуються різних сфер дизайну. Відмінний матеріал для тих, хто хоче організувати сеанс «Своєї гри» на тему.

Онлайн курси Studyboom
Освітня майданчик для дизайнерів інтерфейсів — курси від професійних дизайнерів для початківців фахівців. Готуються програми більш складних рівнів і з суміжних областей. Автори можуть самі створювати повноцінний курс для подальшого продажу.

Стажистам


Жарти про дизайнерів за 400


Make This Year — Step-by-step lessons from top makers
Щомісячні розсилки для тих, хто давно хоче робити сайд-проект у своїй компанії — хлопці діляться досвідом.

How Many People Does It Take To Make A Text In Your App Look «Pro»?
Іван Бойко звертає увагу на тему на кордоні UX і UI.

Люди і компанії в галузі
Airbnb Design
AirBnB запустили сайт про дизайн в компанії. Статті, анонси і все таке. Наприклад, Alex Schleiffer розповідає про дизайн-системи компанії DLS (Design Language System).

Airbnb Design

AMA: Дизайн-команда Avito
На питання про дизайн в Avito відповідають Іван Волков, Лев Гончаренко, Євген Бєляєв, Олег Ващуков, Іван Бєлобородов, Олег Фролов, Андрій Ткаченко, Ілля Карпов і Кирило Половников. Це один з найбільших продуктів в рунеті, який працює над зміною дизайну флагманського сервісу та розширює лінійку продуктів. Цікаво дізнатися, хто стоїть за цими поліпшеннями і як дизайн-команда бачить майбутнє Avito.

AMA: Дизайн-команда Avito

<a href=»medium.com/usethics-doc/об-сайт-168df1c9d203 Про сайт! Usethics
Usethics оновили свій сайт. Влад Головач розповідає про роботу над ним і в цілому дилемі шевця без чобіт.

Покупки дизайн-студій великими компаніями


Призначення дизайнерів


Сесії AMA


Матеріали конференцій
Clarity Conference
31 березня-1 квітня 2016 в Сан-Франциско пройшла перша конференція Clarity за дизайн-систем. Конспекти та інші матеріали:


Clarity Conference 2016

Interaction16


Свіжі посилання можна також відслідковувати в однойменній Facebook-групі або отримувати раз на місяць поштою. Спасибі всім, хто також публікує посилання в ній, особливо Геннадію Драгуну, Павлу Скрипкину, Дмитру Подлужному, Антону Артемову, Денису Єфремову, Олексію Копилову, Тарасу Бризицкому і Євгену Соколову. Все більше матеріалів в оглядах з'являється завдяки їм.

Підписуйтесь на розсилку! Лист приходить один раз на місяць.

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

0 коментарів

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