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

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

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

Патерни і Best Practices
Usability Heuristics for Bots
Kevin Scott адаптував класичні евристики Якоба Нільсена для ботів. В кінці статті про оцінює за ним трьох реальних ботів. В продовження теми:


Usability Heuristics for Bots

Smart Responsive Design Patterns, Or When Off-Canvas isn't Good Enough
Віталій Фрідман зробив огляд сучасних цікавих рішень в адаптивному дизайні, коли потрібно представити складні форми, візуалізацію та інші нестандартні рішення.



The Current State Of Authentication — We Have A Password Problem
Drew Thomas описує сучасні способи авторизації на заміну звичним логіну та паролю. Він порівнює їх надійності та складності реалізації.

On Icons
Відмінні думки iA на вічну тему піктограм — чи можна використовувати їх без підписів чи краще вибрати абсолютну зрозумілість з текстовими назвами кнопок і інших елементів управління. Вони призводять чудову аналогію в кінці — іконки це прикметники і прислівники у тексті; текст не повинен втрачати зв'язність без них, але вони можуть додати емоційності і акцентів в помірній кількості. До речі, вони зробили гру для iOS на тему іконок.

On Icons

Hamburger Menus
Капітанська стаття Nielsen/Norman Group на тему шкоди іконки бургера. З корисного — цифри їх дослідження на тему. Щоправда, всі ці публікації забувають про те, що в деяких випадках навігація вторинна — наприклад, в сучасних новинних сайтах, де помінявся формат споживання контенту.

Листи розсилки


Розбір анімації в мобільних додатках


Val Head — Designing Interface Animation
Val Head дописує книгу «Designing Interface Animations» для Rosenfeld Media. Вийде до кінця року.

Inline validation in forms — Designing the experience
Mihael Konjević проаналізував способи валідації форм в десятці продуктів. Висновки не дуже нові, але аналіз корисний. Також вийшли корисні поради Chris Coyier по технікам валідації форм за допомогою HTML і CSS і ще одна стаття на тему.

Cartography Comparison
Ще одне докладне порівняння карт від Google і Apple.

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


Гайдлайны платформ і компаній
Гоп-шаблоны
Команда кемеровській дизайн-студії П'ятий Вимір зробила шикарний набір гоп-шаблонів для презентації дизайну. Завантажити.

Гоп-шаблони

iOS 10
На WWDC 2016 була показана iOS 10. Це великий ривок по інтеграції основних рішень ОС і сторонніх додатків, робить екосистему ще більш цілісною.

iOS 10

Додатки мають кілька форматів представлення і точок виклику. По-перше, змінилися повідомлення на екрані блокування і в самому центрі повідомлень — вони стали схожі на ті що в годинах, а контент не обмежений висотою. Більше того, тепер прямо звідси можна викликати загальну інформацію через 3D touch (яка інтерактивна), плюс звичні швидкі дії у новому вигляді. А сам центр повідомлень нарешті виводить звичайний список входять по хронології, без дурної угруповання з додатком. Android і iOS стали ще ближче.

По-друге, додатків з'являються віджети (по натисненню на 3D touch по іконці), які можна швидко додавати в стрічку віджетів (доступна через свайп ліворуч на екрані блокування). По-третє, вони інтегровані в Siri. По-четверте, сторонні додатки зможуть інтегруватися в основні інтерфейси — наприклад, дзвонилки зможуть показуватися на екрані блокування як стандартний телефонний дзвінок і потрапляти в історію дзвінків.

Цікаво, що великий шматок презентації показував досить щільну роботу з вхідною інформацією без догляду з екранів блокування та оповіщення, а це здоровий шлях до відмови від нескінченного процесу менеджменту око..., тьху, запущених додатків. Це те, що намагався робити Windows Phone і те, про що говорить Golden Krishna у своєму #NoUI.

За оновленим програмам здається, що дуже спустошений візуальний мову платформи після iOS 7 нарешті додасть характеру. нової музики з'явилися жирні заголовки, тайли і смачні тіні у обкладинок. Елементи управління прийшли до єдиного знаменника на основі меню швидких дій (і навіть поносимая усіма панель швидких дій стала стрункішою з ними). Біля назв фотоальбомів купа варіантів написів, повідомлення так взагалі торжествують експресією у вигляді анімаційних спец.ефектів. Жваво виглядає новинне додаток і управління розумним будинком. Мабуть, не просто так Джоні Айв пропав з радарів — його бездушна монохромна уніфікація була не сильно краще, ніж циганщина Худоби Форстала.

З цікавих інтерфейсних рішень:
  • Загальний буфер обміну з усіма iOS — і macOS-пристроями. Скопіював на ноутбуці, вставив в телефоні.
  • Швидкий переклад з мови эмоджи на звичний і навпаки. Вони стали сленгом, зрозумілим не всім, так що це спростить спілкування.
  • Підказки найближчих місць в картах, зав'язані на календар і звички.
  • CarPlay якимось чином зміг виводити карти на центральну панель інструментів, при тому що зазвичай автовиробники сильно затискають сторонні інтеграції.
  • При наборі на клавіатурі підказуються дані контактів, це наступний крок в їх корисності.
  • Голосова пошта нарешті буде мати текстову транскрипцію.
  • Фотопросмотрщик навчився виділяти людей на фото, причому це працює і без інтернету.
  • Неактивний телефон реагує на підняття — автоматом спалахує екран.
  • Apple Pay буде працювати і в мобільному інтернеті, тому що Luke Wroblewski може поставити ще одну галочку в списку справджених концептів.
  • Годинник дозволять авторизуватися на Маці, просто перебуваючи поруч з ним. Це одна з чотирьох сфер застосування розумних годин і браслетів, яка не особливо розвинена в наявних продуктах.


З новин візуального програмування   повчання Swift для дітей. Великий розбір з відео-врізками. А за кореневої ссылке всі основні екрани і ефекти. Інші матеріали:


Apple Watch
На WWDC 2016 показана watchOS 3. Знову все стало швидше, для навігації між додатками з'явився док (тепер бічна кнопка викликає його замість контактів), більше фітнес-можливостей (у тому числі для інвалідів-колясочників), з'явилася панель швидких аналогічно iOS, додався рукописний ввід, а також можливість швидкого виклику служби порятунку (цікаво, що годинник відправляють лікаря мед.картку пацієнта з програми Health). Ну і доступ стороннім додаткам до того, що раніше могли використовувати тільки Apple.

Tokens in Design Systems
Шикарнейшее керівництво Nathan Curtis з використання змінних в дизайн-системах. У минулому році Salesforce показали цікаву ідею з токенами, які лунають дизайн-систем на різних платформах, і Nathan описує схему роботи такого мультиплатформного рішення.

Tokens in Design Systems

Інші новини дизайн-систем:


BBC GEL 2.0
Нова версія BBC GEL вийшла з бети. Наприклад, з'явився чудовий розділ правилами створення інфографіки, дуже простий і наочний, а на GitHub є исходники системи сіток.

Шаблони дизайну для ботів і месенджерів


Дизайн у Facebook


Material Design


Розуміння користувача
Intercom on Jobs-to-be-Done
Intercom випустили міні-книгу, присвячену методиці jobs to be done. Директор з досліджень Sian Townsend нещодавно виступала з оглядом методу і досвідом компанії щодо її використання. Вони адаптували її основні посили, заточені під офлайновий бізнес, для інтернет-сервісів. Основні посили у вигляді статті. В продовження теми:


eBay MIND Patterns
Книга eBay, присвячена accessibility. Вона описує 4 ключових складових забезпечення доступності (MIND): повідомлення, введення даних, навігація і поступове розкриття інформації, а також 4 принципу (POUR): сприйняття, можливість вчинення дій, зрозумілість і надійність. Інші матеріали на тему:


Designing A Dementia-Friendly Website
Laurence Ivil і Paul Myles пишуть про те, як адаптувати сайти для людей, які страждають маразмом в медичному сенсі. Вони опитали групу людей, страждаючих цим психічним захворюванням, і склали рекомендації для дизайнерів. Перевод.

Інформаційна архітектура, концептуальне проектування, контент-стратегія
How to apply a design thinking, HCD, UX or any creative process from scratch
Dan Nessler переосмислив класичну діаграму «подвійного алмазу» і запропонував її розгорнутий варіант. Вона показує конкретні методи і підходи, які застосовуються на кожному з етапів розбіжності/сходження. Перевод.

How to apply a design thinking, HCD, UX or any creative process from scratch

How to Build a Customer Journey Map that Works
Детальна інструкція Steve Offsey з побудови Customer Journey Map.

How to Build a Customer Journey Map that Works

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


Eureka Think and Design Process
Компанія Lumiknows, що спеціалізується на проектуванні послуг та дизайн-дослідженнях, опублікувала свій робочий процес, частково заснований на дизайн-мислення.

Six Patterns for Modeling Concepts
Dan Brown з EightShapes описує патерни для опису концептуальних моделей. А всюдисущий Stephen Anderson вже готує нову колоду карт, що полегшує вибір відповідного підходу.

How Brainstorming Questions, Not Ideas, Sparks Creativity
Warren Berger пропонує альтернативний спосіб проведення брейнштормов, де завдання учасників — задавати якомога більше питань. Він використовується в Microsoft, MIT та інших організаціях і дозволяє ширше дивитися на проблему.

Virtual Reality: Inside google's Innovation Lab
Забавна відео-інструкція з дизайн-мислення від Google для шоломів віртуальної реальності. По контенту нічого нового, але формат подачі цікавий. Супровідна стаття.



Why is Sketching (Still) Important (To Design)?
James Self і Eujin Pei розмірковують про роль скетчів в сучасному дизайн-процесі. Трохи капітанства, але корисного для впорядкування знань — як саме вони просувають розуміння проблеми і рішення.

Інструкція зі створення контенту для корпоративного сайту
Переклад відмінної статті Content Company про те, як вважати ROI для контенту на сайті. Сам підхід «поставити мету → визначити метрики → вимірювати і покращувати» не новий, але цікаво його застосування до контенту.

Проектування та дизайн екранів інтерфейсу
Adobe Creative Cloud, оновлення від літа 2016
Вийшло літнє оновлення Adobe CC (версія 2015.5). Багато нового в Фотошопі. Покращена робота з бібліотеками CC, розумна обрізка заповнення порожніх місць, визначення шрифту по картинці, розумна обробка осіб, проста обтравка по масці, можливість експортувати макети Comet, робота з артбордами, загальна продуктивність. Повний список. До речі, Illustrator теж може експортувати в Comet.

Adobe CC 2015.5

Sketch 39 Beta
Вийшла бета-версія Sketch 39. З'явилося хмарне сховище документів і зачатки адаптивності. Крім цього, Bohemian Coding змінює систему ліцензій на Sketch   тепер вона купується не на мажорну версію, а на 10 великих оновлень. У зв'язку з цим забирається точка і наступні релізи будуть 39, 40 і т. д.

Sketch 39

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


Craft by InVision LABS
InVision вже потихеньку роздає бета-версію нового Craft з інтегрованим Silver Flows, так що з'являється все більше демонстрацій з перших рук: Marc Andrew, Yap Kwang Yik.

Крім цього Craft навчився використовувати JSON в якості джерела даних для прототипів. Це дуже хороші новини для тих, хто хоче зробити прототипи ще ближче до реального продукту.



ProtoPie — Code-free prototyping tool for smart devices
ProtoPie, новий інструмент для прототипування на мобільних. Анімація, жести, підтримку сенсорів і все таке. Давненько ніхто не намагався вийти на цей перегрітий ринок.



AREA 17 Design techniques
Дизайн-студія Area17, що спеціалізується на новинних сайтах, опублікувала свою внутрішню методичку по роботі над проектами. Їх робочий процес зав'язаний на Adobe Illustrator і не використовує дизайн-системи, але все одно досить цікавий.

Area 17 Design Techniques

The Ideal Design Workflow
Keaton Herzer іронізує з приводу великої кількості інструментів для дизайнерів та описує робочий процес з нескінченним перемиканням між ними. Переклад.

Pixel Density Demystified
Peter Nowell написав своє керівництво по щільності екранів для дизайнерів. Переклад.

Principle


UXPin


InVision


Affinity Designer для Windows
Бета-версія векторно-растрового редактора для Windows стала доступною всім.

Огляди інструментів прототипування


Інструменти паблишинга
  • Поки The Grid запрягали пару років, тематикою алгоритмічного дизайну зацікавився Wix, мастодонт серед конструкторів сайтів. Вони анонсували Advanced Design Intelligence, схожий за змістом на The Grid підлозі-автоматизований спосіб створення сайтів для непрофесіоналів. На відео все більш прозаїчно, просто добротні шаблони. Але він стане доступний протягом цього літа і буде цікаво поколупати наживо.


The 2016 Subtraction.com Design Tools Survey
Стартував новий опитування серед дизайнерів на тему використовуваних інструментів від Khoi Vinh. Форма.

Trump Ipsum — Make Placeholder Text Great Again!
Генератор текстів-заглушок для прототипів і макетів з фразами в дусі Дональда Трампа.

Користувальницькі дослідження і тестування, аналітика
Лабораторія дослідження інтерфейсів в Яндексі
Оглядова стаття про те, як працює UX-лабораторія Яндекса. Деталей мало, але розповіді про дослідження в компанії складно знайти, так що збираємо по крихтах.

Little Book of Design Research Ethics
IDEO випустили міні-книгу про етику користувальницьких досліджень.

On the Internet, nobody knows you're a bot participant
Поради команди Salesforce про те, як відбраковувати результати віддаленого тестування на предмет відповідей від ботів.

How to Assign the Severity of Usability Problems
Пам'ятка Jeff Sauro про те, як визначати серйозність виявлених проблем в інтерфейсі.

Візуальне програмування та дизайн у браузері
Autofill — What web розробники should know, but don't
Відмінна стаття Jason Grigsby про методи браузерного автозаповнення, які можна використовувати у веб-формах. Це хороший спосіб полегшити роботу з формами в додавання до грамотно реалізованої валідації. Переклад.

Autofill   What web розробники should know, but don’t

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


Нові скрипти


CSS-анімація


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


UX-стратегія і менеджмент
UX Design in Action
UXPin випустили нову книгу UX Design in Action, в якій автори поспілкувалися з керівниками великих дизайн-команд в 3M Health Care, Autodesk, Kaplan Education, Slack і Sumo Logic на тему того, як працює дизайн в цих компаніях. Здається, UXPin нарешті дають можливість почитати книгу прямо в браузері, без завантаження PDF.

UX Design in Action

Fast Co.Design зробили кілька статей на її основі:


A Sense of Where You Are
Tom Broxton з Facebook проаналізував хід проектів в компанії, в яких він брав участь чи бачив зі сторони і виділив точки, в яких починається хаос. Його песимістичні оцінки виявлялися більш правдивими, а красиві процедури швидко розбивалися об ітерації в дрібницях. Він не дає готових рецептів лікування, скоріше вказує на конкретні точки, в яких гарний план руйнується.

A Sense of Where You Are

Цілепокладання для дизайнерів


Побудова дизайн-культури


The UX of Hiring for UX Positions
Величезна стаття Dan Maccarone і Sarah Doody про процесі найму дизайнерів. В продовження теми:


Collaboration & Creativity — Getting into the Right Mindset
Dan Brown пише про психологію робочих груп і поширених образах мислення дизайнерів, які впливають на продуктивність праці. Він розбирає три підходи до роботи, які допомагають сформувати здорове групова взаємодія.

Traditional User Experience Is at a Crossroads
Серія статей Jim Nieters про зміни дизайну в усталених компаніях. Друга частина.

Expand Your Influence — 6 Communication Techniques Designers Can Use to Earn Trust
Michael Hawley дає поради дизайнерів на тему правильного спілкування з менеджерами і розробниками. Як правильно будувати спілкування, критику та інші обговорення так, щоб замість конфліктів створювати спільне бачення.

Which Letter-shaped will Employees and Future Leaders be?
Термін «T-подібні фахівці» з'явився ще в 1991 році і з тих пір він став основним способом розвитку фахівців. Ну і, звичайно ж, багато бізнес-коучі не змогли залишити це просто так і наплодили аналогічних термінів, використовуючи інші букви алфавіту. Esin Akay зібрала разом опису T-, I-, M-, E — і інших буквоподобных фахівців. Кажуть, є ще і квадрато-образные.

Always Show Your Work — Why designers write on the walls (and why you should, too)
Переклад статті George Aye з Greater Good Studio, в якій він розповідає, як зібрати недорогу робочу зону для проектних обговорень з мудбордами, концептами та іншими артефактами. Наприкінці наводиться список фурнітури для збірки.

Продуктовий менеджмент та аналітика
A/B-тестування


Кейси
Objects in Space
Нещодавно кардинально оновився додаток VSCO і це один з найсміливіших редизайнів останнього часу. Хоча ця стилістика і зустрічалася концептах і нішевих виданнях, вперше її ризикнув застосувати масовий продукт. У блозі компанії розповідається про те, як робилася сітка. Друга стаття, групування.

Objects in Space

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

Building the Gyroscope App
Розповідь про те, як робилося мобільний додаток Gyroscope для занять спортом.

here's How Asana Won With Its Product Redesign
Ще одна стаття про те, як робився редизайн Asana. Детальніше про стратегії запуску, коли зміна інтерфейсу і візуального стилю зробили двома окремими завданнями, щоб не фрустрировать користувачів.

Історія
How the Bloomberg Terminal Made History — And Stays Ever Relevant
Історія терміналів Bloomberg для трейдерів. Вони, по суті, є ще однією екосистемою нарівні з Apple і WIntel, зі своїми програмами, залізом та інтернетом.

How the Bloomberg Terminal Made History   And Stays Ever Relevant

Тренди
Алгоритмічний дизайн
Я давно цікавлюся темою алгоритмічного дизайну і збираю матеріали і приклади на тему, але тема спливала від випадку до випадку. За 4 роки скупчився пара десятків прикладів і півдюжини статей у прив'язці до продуктового дизайну, але до цієї весни все це були скоріше окремі сплески без усякої системи. Зробив короткий того, що це і чому це дуже важливо.

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

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


Are Branding Agencies Still Relevant?
Paul Woods з Eden Spiekermann говорить про те, що роль класичних брендінгових агентств розмивається в сучасному цифровому світі. Айдентика у відриві від продукту має все менше значення, так що все активніше використовується підхід «знизу вгору», коли команда, що займається інтерфейсом, визначає айдентики.

Are Branding Agencies Still Relevant?

DesignX — Complex Sociotechnical Systems
Розгорнута стаття Donald Norman і Pieter Jan Stappers про DesignX. Їх розуміння терміна і суті подібних завдань за минулий рік поглибилося. В кінці статті йде цікава дискусія з учасниками семінару на цю тему, що пройшов у грудні 2015 року в Китаї.

Прогнози на 2016


Product Design Industry Report 2016
InVision випустили звіт про дослідження поточного стану професії продуктового дизайнера. Інструменти, процеси, взаємодія дизайнерів та інших учасників продуктового команди та багато іншого. Правда, репрезентативність не дуже зрозуміла — найчастіше такі опитування заточені під Кремнієву долину.

InVision Product Design Report 2016

A Conversation About Fantasy User Interfaces
Шикарнейшее інтерв'ю з Кирилом Гручниковым, який багато років веде сайт Pushing Pixels, де він бере інтерв'ю у дизайнерів інтерфейсів для фантастичних фільмів. Дуже гарні думки на тему того, як і чому вони виходять такими, як є.

A Conversation About Fantasy User Interfaces

Ще на тему:


Your UI is your product's humble compensation for not being telepathic
Цікаві думки Morten Just на тему того, що будь-який сучасний підхід до інтерфейсу — це тимчасова заміна телепатії, свідомо приводить до купи непотрібних дій.

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


Messenger Bot Concept

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


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


Розумні годинник і браслети


Helen Armstrong — Digital Design Theory: Readings from the Field (Design Briefs)
Видавництво Princeton Architectural Press випустило книгу Helen Armstrong «Digital Design Theory: Readings from the Field». Вона присвячена майбутньому професії і, зокрема, розмірковує на тему пост-людино-комп'ютерного взаємодії, коли стає все більше ботів, віртуальних помічників та інших комп'ютерних агентів. Fast Co Design зробили її огляд.


Retrofitting Zooming UI To Legacy Websites: An Impossible Task?
Luca Leone і Anders Schmidt Hansen   ще одні дизайнери, які намагаються повернути інтерес до зумируемым інтерфейсам, оспіваним Джефом Раскиным. Вони пропонують підхід, який дозволяє перевести в ZUI будь-який існуючий сайт або робити новий в рамках підходу.

Unified Design
Cameron Moll розмірковує на тему універсального дизайну. В його розумінні це щось на стику адаптивного і багатоканального дизайну — важливо, щоб для користувача продукт на всіх платформах представляв єдину екосистему. Спадкоємність дизайну, збереження даних і стану процесів.

Голден Крішна — Гарний інтерфейс — невидимий інтерфейс
Видавництво Пітер перевів книгу Golden Krishna на російську. На Хабре є знижка 25% (купон «The Best Interface»).

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

UX як інвестиція

The First Law of Product Experience Design
Matt Snyder з Lucid Software вивів перший закон продуктового дизайну: будь-які знання про користувачів коштують грошей. Це означає, що потрібно завжди тверезо зважувати поточні питання до продукту, доступне час і те, скільки часу і сил займе перевірити гіпотезу. До речі, у дизайн-команди Lucid, які роблять однойменний інструмент для проектувальників, з'явився блог на Medium.

Люди і компанії в галузі
AMA: ONY
Вийшло інтерв'ю з Максом Орловим з ONY на основі шостого AMA від UX-Середовища та vc.ru. Він відповів на запитання про ребрендинг Рамблера і інших проектах компанії. Студія активно працює з інтернет-компаніями і класичним бізнесом над айдентикой і дизайном інтернет-сервісів — серед проектів Рамблер & Co, My.com, Мегафон, Digital October, Максима Телеком (wi-fi в метро) і інші. А на початку Рамблер анонсував ребрендинг самого порталу, над яким працювали ONY. Загалом, студія накопичила солідний багаж яскравих прикладів роботи над айдентикой цифрових продуктів.

AMA: ONY

Сесії AMA


Матеріали конференцій
Upcoming Web Design Conferences (June—December 2016)
Список конференцій по дизайну і веб-розробки на друге півріччя 2016 року.

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

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

0 коментарів

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