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

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

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

Патерни і Best Practices
Motion Table
Крута наочна періодична таблиця анімації. Не все годиться для використання в інтерфейсах, але дуже корисно для систематизації знань.

Motion Table

Intercom on Onboarding
Intercom випустили книгу про onboarding. Витяг з неї, що розповідає про основні принципи.

Intercom on Onboarding

New E-Commerce Checkout Research   Why 68% of Users Abandon Their Cart
Baymard випустили новий звіт, присвяченим причин відмови від купівлі інтернет-магазинах. Цікаво, що близько 60% з них просто вивчали ціни і товарні пропозиції та не збиралися купувати, тому що ці втрати повернути неможливо. Перша витяг про валідації полів.

New E-Commerce Checkout Research   Why 68% of Users Abandon Their Cart

The Mighty Ellipsis
John Saito з Dropbox розбирає типові ситуації при проектуванні інтерфейсів, в яких варто використовувати три крапки.

Поштові розсилки


Подання інтерфейсу на вигляді карток


Гайдлайны платформ та компаній
Free iPhone 7 Mockup
А і перший шаблон iPhone 7 від LStore. Для Photoshop і Sketch.

Free iPhone 7 Mockup

Ще кілька:


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


Шаблони Android-телефонів


Шаблони пристроїв Apple SVG
SVG iPhone 6 від Lex Кeller. Він також виклав шаблони iPhone 5SE MacBook Pro.

Розуміння користувача
A Usable Guide to Cognitive Dimensions
Fabio Muniz описує фреймворк когнітивних аспектів, які важливо враховувати при проектуванні інтерфейсів. Він посилається на класичну роботу Thomas Green Marian Petre 90х, де вони з'явилися уперше.

A Usable Guide to Cognitive Dimensions

Innovation and UX   Towards an Adaptive and Motive-Based Approach User Experience Magazine
Clemens Breuninger, Benjamin Dennig і Sebastian Klein пишуть про те, як враховувати прагматичні (особливості використання), гедоністичні (особисті вподобання і особливості) і символічні (соціальні) якості продукту при роботі над інтерфейсом.

The Persuasive Pattern Card Deck
Ще один набір гральних карт для дизайнерів інтерфейсів. Це особливості психології користувачів, які важливо враховувати в роботі. Anders Toxboe розповідає, як працював над ним.

Jobs-to-be-Done


Accessibility


Інформаційна архітектура, концептуальне проектування, контент-стратегія
James Kalbach «Mapping Experiences»Mapping Experiences
У травні вийшла книга James Kalbach «Mapping Experiences», присвячена роботі з усіма видами карт experience. UXmatters публікує главу 4 з неї — вона про те, як почати роботу над такою картою.

Проектування і дизайн екранів інтерфейсу
Figma   The collaborative interface design tool
Продукт вийшов з бети. Це Google Docs для дизайнерів   кілька людей можуть працювати над інтерфейсом одночасно.

Figma   The collaborative interface design tool

Adobe XD: Вересневе оновлення
У вересневому оновлення бета-версії з'явилася можливість перегляду прототипів на Android і iPhone, а також багато інших корисних речей   легше зрозуміти висоту екрану, простіше працювати з густинами екрану, зручніше ділитися прототипами, більше можливостей анімації. Судячи з що цьому анонсі немає тизера наступного, на найближчій конференції Adobe MAX покажуть щось зовсім велика начебто версії для Windows і ключовий функціональності. Переклад.



Інші новини інструменту:


Sketch 40
Вийшов Sketch 40. Зміни в основному дрібні. Перевод.

Sketch 40

Інші новини інструменту:


InVision


Flinto


Сучасні інструменти паблишинга


Microsoft Visio


Огляд інструментів для створення дизайн-специфікацій: Avocode, Sympli і Zeplin
Переклад статті Миколи Бабича, де він в деталях порівнює інструменти для передачі макетів і ресурсів розробникам. Він описує інтерфейс і можливості Avocode, Sympli і Zeplin.

Designing for Television, part 2
Друга частина пам'ятки дизайну інтерфейсів для ТБ від Molly Lafferty з This Also.

Designing Interface Animation
A List Apart опублікували уривок з книги Val Head «Designing Interface Animations»   главу 9, присвячену створенню гайдлайнов для анімації.

BrowserStack   Cross Browser Testing Tool
Сервіс BrowserStack емулює перегляд сторінки різних браузерах, екранах, пристроях для тестування верстки. Не дешево, але здорово економить час, так і закупити набір пристроїв точно буде не дешевше.

Користувальницькі дослідження і тестування, аналітика
Karen Holtzblatt & Hugh Beyer   Contextual Design (2nd Edition)Karen Holtzblatt & Hugh Beyer   Contextual Design (2nd Edition)
У грудні виходить друге видання однієї і найвпливовіших книг в області UX   знаменитої «Contextual Design» Карен Хольцблатт і Х'ю Баєра. Перше видання, до речі, до дотепер активно продається і кожній другій книзі UX є посилання на неї. Вона вперше вийшла ще в 1997 році і відміну від більшості інших книг, майже не застаріла, так як вона не про технології, а про глибоке вивчення людей.

Нове видання повністю переписано, стало товщі на 100 сторінок, і в нього додана підтримка CoolConcept, яким Карен займалася останні роки. А саме вона з'ясовувала, які чинники роблять продукт крутим очах користувачів. Також книга включає в себе досвід використання Contextual Design реальних проектах на пртяженіі останніх 18 років. Крім цього, додатково розкрито питання задоволення користувальницьких мотивів у сучасної гетерогенному середовищі. Найдешевша ціна не поточний момент   на сайті видавництва.

You Can Change A Standardized Questionnaire?
Jeff Sauro радить дотримуватися стандартних форматів опитувальників начебто SUS в користувальницьких дослідженнях. Але якщо завдання все-таки необхідно скорегувати його, він підказує, як не зганьбитися.

Опитування користувачів


A/B-тестування


Візуальне програмування і дизайн у браузері
Introducing OpenType Variable Fonts
Adobe, Apple, Google і Microsoft задружились і розширили формат OpenType   тепер підтримуються параметричні шрифти! Це інтерполяція накреслень з кількох базових, якою експериментували останні роки. Відкривається нова епоха в веб-типографіці.

Introducing OpenType Variable Fonts

Інші матеріали на тему:


Designers Guide to Web Performance Optimization
Розумна пам'ятка основ оптимізації продуктивності веб-сервісів для дизайнерів від Jon Yablonski. Загальні принципи, робота з анімацією, шрифти, зображення та графікою.

Нові скрипти


Framer


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


Робота кольором вебі


Flexbox


Введення даних на мобільних


UX-стратегія і менеджмент
UX-стратегія практиці. Частина 4   Від дизайн-команди до дизайн-культури
На UXmatters вийшла четверта частина з моєї серії статей про UX-стратегію, присвячена всім аспектам дизайн-менеджменту. Для того щоб у сучасному світі виходило вдало вписуватися в динамічний виробничий процес, а компанія могла працювати на ринку бадьоро, оновлюючи продукти і пропонуючи нові, потрібно потурбуватися трьома речами   команда, лідери і культура. Робочий процес створення дизайну також важливий, але він став гігієнічним вимогою — це обов'язкове, але далеко не достатня умова для сильної дизайн-команди. Він повинен бути і повинен бути продуманим. Але для успіху куди важливішими спільні цінності. Версія англійською (розбито на дві публікації).

UX-стратегія на практиці. Частина 4   Від дизайн-команди до дизайн-культури

Ще на тему управління дизайн-командами:


Managing Design work with Discovery Kanban at Optimizely
Продовження розповіді про дизайнерському канбане в Optimizely. Дуже цікава структура дошки, зав'язаної на «подвійний алмаз»   ній окремо показано вивчення проблеми і виробництво рішення.

Managing Design work with Discovery Kanban at Optimizely

5 Questions New UX Leaders Should Ask In Their First Month
Dave Malouf розповідає про своєму досвіді дизайн-менеджменту в компанії Rackspace. Він дає п'ять порад новому главі дизайну в    чого почати вивчення поточної ситуації і як планувати зміни.

Design Reviews   Going Beyond the Surface
Поради щодо організацію критики дизайну від команди Google. Вони ділять роботу над продуктом на три етапи   концептуальна частина, виробництво і запуск з зворотним зв'язком. Для кожного з них свій фокус і свої запитання до результатами роботи дизайнера.

Design Reviews   Going Beyond the Surface

The Agile Manifesto for Designers
Маніфест agile для дизайнерів від Andrew Croce. Тема не раз озвучена, але корисно в скарбничку.

Every Company Needs An Innovation Tool Kit
Soren Kaplan пише про те, як впровадити інструментарій для інкрементальних і більш великих інновацій в компанії. Вона наводить приклад Adobe, Intuit і інших компаній, які зробили цю роботу системною.

Every Company Needs An Innovation Tool Kit

UX Leadership Roles   Multiple Paths
Margaret Hanley розбирає шляху розвитку дизайн-менеджерів. Вона описує суть і обов'язки кількох ролей у рамках управління дизайном.

Great Products don't Happen By Accident
Переклад статті Jon Lax на основі презентації, якою він пропонує цікавий підхід до систематизації методів роботи дизайнерів. Він наводить приклад тренерів американського футболу, у яких завжди є набір ігрових партій для будь-якої ситуації. Це відмінно лягає і на процес роботи над продуктом.

Продуктовий менеджмент і аналітика
Цілепокладання з допомогою OKR
У останнім часом метод OKR (objectives & key results) для постановки і відстеження цілей компанії і продукту все популярніша, але хороших матеріалів не так багато. Євген Ємельянов написав чудову статтю з прикладами на тему того, як використовувати його. Він відмінно підходить і для довгострокового планування роботи і розвитку дизайн-команд.

Цілепокладання з допомогою OKR

Методології, процедури, стандарти
Опитування: Доопрацювання проф. стандарту «Фахівець з дизайну графічних і користувальницьких інтерфейсів»
Стандарт зараз активно допрацьовується і ініціативна група проводить опитування   зрозуміти, що входить в обов'язки UX-професіоналів Росії та країн СНД. Опитування анонімне, знадобиться близько 15 хвилин. Його результати будуть опубліковані.

Кейси
Редизайн мобільного додатку банку «Відкриття»
Дизайн-команда Redmadrobot в деталях розповідає про редизайні мобільного банку «Відкриття».

Редизайн мобільного додатку банку «Відкриття»

Інші кейси редизайну:


Co-designing with Hosts
Як дизайн-команда Airbnb проводила сесії ко-дизайну з користувачами для того, щоб поліпшити інтерфейс для орендарів.

Як змінювався дизайн великих продуктів


Історія
How Star Trek artists imagined the iPad… nearly 30 years ago
Ще один розповідь про тому, як перехід до графічним інтерфейсами від фізичних кнопок допоміг знімальній групі Star Trek заощадити на виробництві декорацій і створити більш футуристичний антураж.



Тренди
Innovation by Design Awards 2016
Fast Company вибрала переможців своєї премії Innovation by Design 2016. Цікаво подивитися на список 35 кращих додатків  думку experience цілому переклад). Місцями це якийсь міжсобойчик серед постійних авторів видання, але і свіжі речі.

Innovation by Design Awards 2016

Алгоритмічний дизайн


Автомобільні інтерфейси
  • Fantasy теж створили команду для роботи з автомобільними інтерфейсами.  перший концепт.
  • Volvo запустили сайт The Future of Driving якому розповідають про своїх нових концептах. Поки він тільки один   приладова панель і інтер'єр Concept 26.


Боти і мессенджери


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


Experiencing the next mutation   User characteristics, defining success, and a new way to research mutative patterns
Liam Spradlin розвиває концепт «мутаційного дизайну». Він виступав в IDEO і кількох інших компаніях і краще зрозумів особливості ідеї.

Для загального і професійного розвитку
Russian Design Cup 2016
10 жовтня Однокласники і Mail.Ru Group запускають п'ятий Russian Design Cup. Це найстаріший і найвідоміший турнір для російськомовних дизайнерів, який проходить з 2012 року   минулого року ми зібрали 210 учасників і більше 300 рішень.

Як завжди в конкурсі сильні призи   MacPro за перше місце і пара тузів у рукаві для другого і третього. А    потужне журі з п'ятіркою відмінних вітчизняних дизайнерів: Антон Ярусів (Інновацій), Дмитро Карпов (Британка, Scream School, Bang! Bang! Education), Сергій Попков (AIC), Леонід Ивахов (Однокласники) і Юрій Вітрів (Mail.Ru Group). Зворотній зв'язок дуже важлива для розвитку навичок, а більшість рішень Russian Design Cup крім оцінки по кільком параметрам супроводжуються ще й коментарем про сильних і слабких сторонах. Підключайтеся.

Ukrainian Design Cup 2016

What to Do If Someone Steals From You 7 Times a Day
Андрій Бурмістров з Icons8 пише про цікавий досвід компанії боротьбі з нелегальним використанням їх іконок.

Люди і в галузі
UX-Середовище AMA: Інноваційні
На питання сьомого AMA від UX-Середовища і vc.ru про дизайні в компанії Інноваційної відповідають Антон Ярусів, Родіон Арсеньєв, Слава Кутеев, Мікаел Гелецян і Євген Муравйов. У компанії одна з найсильніших дизайн-команд Рунеті, яка робить відмінні продукти і добре влаштувала внутрішню культуру. При цьому сфера інтересів досить незвичайна   Інновацій займається іграми (портал 4Game), дитячим парком KidZania Москва і онлайн-кінотеатром Ayyo. Вкрай цікаво, як їм вдається поєднувати все це і робити хороші продукти кожній з областей.

UX-Середовище AMA: Інноваційні

UX-Середовище AMA: AIC
На питання дев'ятого AMA від UX-Середовища і vc.ru про дизайні в студії AIC відповідають Сергій Попков, Микола Іванов, Андрій Абрамов, Ильназ Хасаншин, Сергій Кірєєв і Дмитро Ігошин. Компанія постійно яскраво заявляє про собі сильними проектами і регулярними нагородами, ділиться власними думками і робить якісні переклади статей, а нещодавно анонсувала свою школу дизайну. Багато компаній роблять корисні для співтовариства речі, але AIC   одні з найпомітніших у останнім часом.

UX-Середовище AMA: AIC

Курированные стрічки на Medium


Дизайн IBM


Шрифт для держави
Команда опублікувала першу версію інтерфейсного шрифту, який компанії AIC і Лабораторія Артема Геллера розробляють у рамках проекту дизайну державних систем спільно з компанією ParaType. Саша Королькова, арт-директор ParaType, вважає важливим завданням розвиток кирилиці і розширення кругозору користувачів шрифтів. До жаль, сьогодні досить мало кириличних шрифтів, розрахованих під актуальні практичні задачі, і інтерфейсний шрифт, спроектований спеціально для російської мови, дуже потрібен.

Шрифт для держави

Саша запропонувала саме такий, на перший погляд неочевидний дизайн шрифту. Завданням було створити серйозну, але максимально доброзичливу візуальну середу, тому перед нами гуманістичний гротеск, близьке до голландським шрифтів. Зазвичай такі шрифти використовуються для друку, а не екрану, тому малюнок потрібно було адаптувати для інтерфейсів. По-перше, пропорції шрифту завужені, між відстані і зростання рядкових знаків збільшені, а виносні елементи максимально короткі, що типово для шрифтів такого призначення. Круглі знаки мало оквадрачены, щоб збільшити кількість білого всередині і змусити букви виглядати більше. Шрифт зберіг компактність і підходить для набору великих масивів тексту/документації, але не «чорнить» на екранах маленьких девайсів. Цій меті служать тонкі з'єднання штрихів і тонкі штрихи в центрі складних літер, наприклад, «в» і «з». Команді цікаво ваша думка.

Матеріали конференцій
UX STRAT 2015
Звіт про першому дні презентацій конференції UXSTRAT, яка проходила 8-10 вересня в Athens, Georgia (США). Вона присвячена дизайн-стратегії і збирає потужний склад тематичних спікерів.

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

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

0 коментарів

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