Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-октябрь 2015.
![Дайджест продуктового дизайна, ноябрь 2015](https://habrastorage.org/getpro/habr/post_images/8b5/1a3/a91/8b51a3a913f9051826e97a4afc2c97aa.png)
Josh Clark — Designing for Touch
Josh Clark пару недель назад выпустил новую книгу «Designing for Touch» в издательстве A Book Apart. На A List Apart доступна одна из глав, о том, как пользователи держат устройства. На эту тему много писали Steven Hoober и Luke Wroblewski, но тут собрано все и сразу в одном материале.
![Josh Clark — Designing for Touch](https://habrastorage.org/getpro/habr/post_images/df7/2b6/475/df72b6475a6d340cba1118eabc565a68.jpg)
The State Of Airline Websites 2015 — Lessons Learned
Joshua Johnson делает разбор сайтов 20 авиакомпаний на предмет интерфейсных паттернов. Главная страница, поиск и бронирование.
![The State Of Airline Websites 2015 — Lessons Learned](https://habrastorage.org/getpro/habr/post_images/f9e/c1c/f0a/f9ec1cf0a6fee436c5c5c45896f2f554.jpg)
Long-Term Exposure to Flat Design — How the Trend Slowly Makes Users Less Efficient
Kate Meyer рассказывает о долгосрочном исследовании интерфейсов с плоским дизайном в NN/g. Много конкретных ответов на опасения в том, что такая стилистика зачастую убивает аффорданс и затрудняет работу с продуктом. Более молодые пользователи действительно имеют меньше проблем с этим и они более охотно исследуют дизайн, но комфорта даже им это не добавляет.
![Long-Term Exposure to Flat Design — How the Trend Slowly Makes Users Less Efficient](https://habrastorage.org/getpro/habr/post_images/5bb/d1d/8b0/5bbd1d8b09069ff7a0f6cefece451d7e.png)
Design Principles: Choosing the Right Patterns
Gustavs Cirulis о том, что важно использовать паттерны осмысленно. Он приводит пример из опыта Intercom, где они сравнивали навигационные решения и примеряли под конкретную ситуацию.
![Design Principles: Choosing the Right Patterns](https://habrastorage.org/getpro/habr/post_images/68b/871/f07/68b871f07c17de676880a9a2e2460958.png)
Cайты каких российских компаний адаптивные — интернет-магазины, сервисы, digital-агентства
Компания ADN Digital Studio провела исследование отечественных интернет-магазинов на мобильных. У кого есть мобильные версии и приложения.
Состояния интерфейса
Mobile Inline Form Validation
Три года назад Steven Hoober подробно описывал способы валидации форм в мобильных интерфейсах. Спустя три года он говорит о том, что сообщения об ошибках являются анти-паттерном и лучше вообще не доводить дело до них. С момента написания статьи 2012 года он практически не использовал описанные в ней паттерны.
![Mobile Inline Form Validation](https://habrastorage.org/getpro/habr/post_images/8d9/16e/e8c/8d916ee8cdafe09a2c4792634efbedfa.png)
Письма рассылки
![Designing with constraint: Twitter's approach to email](https://habrastorage.org/getpro/habr/post_images/408/450/fda/408450fdaf62ad63c7bfb1729cfc97b5.png)
Исследования Baymard Institute
![The State of Mobile E-Commerce Search and Category Navigation](https://habrastorage.org/getpro/habr/post_images/94d/de5/8e3/94dde58e318b5450837fa672e6614a15.jpg)
Onboarding
Мобильные паттерны
iOS 9
![iOS 9 Design Guidelines](https://habrastorage.org/getpro/habr/post_images/cd1/f48/f4f/cd1f48f4f976d6ade555ab8a69f49a5c.jpg)
Material Design
![Exploring Meaningful Motion on Android](https://habrastorage.org/getpro/habr/post_images/820/933/cca/820933cca4a98b28c60705b7589adcfb.png)
Apple TV
![If it’s not an iPhone, it’s not an iPhone](https://habrastorage.org/getpro/habr/post_images/99a/70b/eac/99a70beacb81f0c39a62729ccadc1937.png)
Apple Watch
iPhone 6
Шаблоны Android-телефонов
Why We’re Addicted To Our Smartphones, But Not Our Tablets
Интересные выкладки Liraz Margalit из ClickTale о том, почему смартфоны воспринимаются как более персональные устройства, в отличие от планшетов. Помимо того, что они просто чаще используются, есть и психологическая привязанность.
User Research With Small Business Owners — Best Practices and Considerations
Chelsey Glasson и Aidan Bryant о проведении исследований с представителями малого бизнеса. Эти люди постоянно заняты и требовательны к инструментам, так что есть много особенностей работы с ними.
Карты эмпатии
![Adapting empathy maps for UX design](https://habrastorage.org/getpro/habr/post_images/0f6/366/bc7/0f6366bc75ffc6f908ed9ce723839cf0.jpg)
Скорость работы интерфейса
![Why Performance Matters, Part 2: Perception Management](https://habrastorage.org/getpro/habr/post_images/d33/0ce/d66/d330ced669a83e6dbb1cc8c5ca7c335c.png)
Персонажи
![Same Findings, Different Story, Greater Impact: A Case Study in Communicating Research](https://habrastorage.org/getpro/habr/post_images/f81/545/c33/f81545c33d7e19655e7ea835c79a80d4.jpg)
Интерфейсы, которые убивают
![iPad и толстые пальцы чуть не привели к авиакатастрофе](https://habrastorage.org/getpro/habr/post_images/873/0f1/3ed/8730f13ed7a1c1393521ec2c103f1990.jpg)
Дизайн для детей
Accessibility
Что такое Use Case и зачем они нужны?
Анна Абрамова рассказывает об одной из лучших техник проектирования взаимодействия пользователя и программы.
Sketch 3.4
Вышел Sketch 3.4 (по ссылке большой список нововведений и исправлений). Yap Kwang Yik сделал обзор наиболее интересных улучшений.
![Sketch 3.4](https://habrastorage.org/getpro/habr/post_images/107/c35/6e4/107c356e44f8f0f2df5532fefd9b0b33.jpg)
Правда, версия оказалась глючной и Bohemian Coding пришлось тут же выпускать обновление 3.4.1, а следом и 3.4.2. В результате всей этой канители разработчики решили уйти из AppStore. Приложение будет распространяться и обновляться с сайта Bohemian Coding. Другие материалы:
Adobe Photoshop CC 2015
![Photoshop CC 2015 and Fuse CC](https://habrastorage.org/getpro/habr/post_images/3a4/e79/ce8/3a4e79ce8a53e2c430cb2edfd116b98b.png)
Adobe Project Comet — User experience, prototyping and design app
Better Icon Design in 6 Easy Steps
Отличный набор простых правил для создания качественных пиктограмм/иконок от Scott Lewis из IconFinder. Вдогонку:
![Better Icon Design in 6 Easy Steps](https://habrastorage.org/getpro/habr/post_images/a59/3bc/3db/a593bc3db870c1c67d740d21e4d6e364.png)
Animaticons — Animated GIF Icons
Создатели проекта Animaticons пошли против тренда модных форматов и запустили библиотеку настраиваемых анимированных иконок в GIF. Не очень future-friendly, зато дешево и сердито. Вдогонку:
![Animaticons — Animated GIF Icons](https://habrastorage.org/getpro/habr/post_images/320/dd3/64c/320dd364c04639a5f0b7447a5c28dd5a.png)
T-Shirt, Tank Top and Clothing Mockups
Онлайн-сервис PlaceIt от компании Breezi позволяет быстро и дешево примерить принты на одежду. Набор макетов постоянно пополняется и сейчас там несколько десятков хороших шаблонов.
Обзоры инструментов прототипирования
Floid
10 User Research Myths and Misconceptions
Jim Ross опровергает мифы и заблуждения о пользовательском тестировании.
10 Things I Learned About UX By Being Drunk
Richard Littauer за $250 проверяет сайты в пьяном состоянии. Он рассказывал о том, чему научился за время тестирования дизайна в пьяном виде.
![The User is Drunk](https://habrastorage.org/getpro/habr/post_images/fea/099/46d/fea09946ddf4e0c9221ef23f5c123feb.jpg)
An Interview with Alfonso de la Nuez, CEO of UserZoom
Интервью с CEO одного из старейших сервисов удаленных пользовательских исследований UserZoom, которые получили внушительные инвестиции в $34 млн.
![An Interview with Alfonso de la Nuez, CEO of UserZoom](https://habrastorage.org/getpro/habr/post_images/ad6/35a/91c/ad635a91cc758434e0ffe53fd17a4964.jpg)
Picking the Right Methods to Improve Navigation
Отличная памятка по тестированию навигации от Jeff Sauro. Какими пользовательскими исследованиями можно ответить на конкретные вопросы по ней.
A/B-тестирование
Опросы
Живые гайдлайны и компонентные системы
Envato Sites — Envato Sites Website Builder by Envato & ThemeForest
Envato запустили свой конструктор сайтов Envato Sites в партнерстве с Theme Forest. Теперь все это многообразие бесплатных тем не придется прикручивать вручную. Чуть подробнее про запуск.
Веб-типографика
![Using System UI Fonts In Web Design: A Quick Practical Guide](https://habrastorage.org/getpro/habr/post_images/878/429/708/878429708bdea62ec7c2ac4fb80b2b47.png)
CSS-анимация
Шрифтовые иконки
Работа с SVG
Flexbox
Режимы наложения слоев в CSS
Работа с Bootstrap и Foundation
![Foundation 6 is Here](https://habrastorage.org/getpro/habr/post_images/608/fae/b01/608faeb011ae9f196f22856b9fd5de2b.jpg)
Framer
![Design Virtual Reality](https://habrastorage.org/getpro/habr/post_images/a7a/3da/6d5/a7a3da6d5cb33bb7d473ee9454ab4855.png)
Webflow
How We Fixed Our Icon Problem
Перевод статьи Bobby Grace из Trello о том, как компания систематизировала работу с пиктограммами в интерфейсе.
Новые скрипты
Дизайн-лидеры
![Design Leadership: What's Next?](https://habrastorage.org/getpro/habr/post_images/e69/800/9b0/e698009b02951cb278f27c5d7e0c11ff.jpg)
Построение дизайн-культуры
UX-стратегия
Как нанимать дизайнеров
![On Building Digital Capacity And Attracting Talent](https://habrastorage.org/getpro/habr/post_images/d21/248/aef/d21248aef9431e3667de04a5e19638fb.jpg)
Почему «нет» — ключевое слово при создании продукта?
Олег Якубенков сделал перевод тезисов Intercom, плюс добавил еще одну подборку советов от Intercom.
Growth hacking is bullshit
О том, почему стоит смотреть на систему метрик и находить баланс между малыми мелкими задачами и большими стратегиями. И не надо верить в существование «серебряной пули».
![Growth hacking is bullshit](https://habrastorage.org/getpro/habr/post_images/846/10a/3af/84610a3af8996fe6b070cbf1ac1a0d6d.png)
Hooked on a Feeling
Презентация Stephen P. Anderson о разнице между требованиями к продукту и experience.
Parts without a Whole — What has design thinking become in organizations?
Команда сайта This is Design Thinking провела опрос 400 практикующих дизайнеров и менеджеров на тему использования практик дизайн-мышления в крупных и не очень компаниях. По факту они выпустили электронную книжку/отчет, в котором собраны инсайты.
![Parts without a Whole — What has design thinking become in organizations?](https://habrastorage.org/getpro/habr/post_images/122/c42/e64/122c42e6441325cb3f89868e0a2828d7.png)
IBM’s Design-Centered Strategy to Set Free the Squares
Большой и достаточно подробный рассказ о том, как IBM обратил внимание на дизайн и пришел к потребности нанять 1000 дизайнеров. Рассказ о Phil Gilbert, который пришел вместе с купленной компанией Lombardi Software и с одобрения CEO Virginia Rometty начал внедрять практики дизайн-мышления, повышать общую дизайн-культуру и массово нанимать людей. Видео.
![IBM’s Design-Centered Strategy to Set Free the Squares](https://habrastorage.org/getpro/habr/post_images/9f6/a06/be2/9f6a06be20831255506468493fe33a5e.jpg)
Кейсы редизайна
The ultimate ecommerce CRO & UX case study — RS Components
Хороший кейс с системным подходом к улучшению конверсии сайта. От формулирования проблемы, до индивидуальной работы над большим набором компонентов сайта.
И еще один кейс про интернет-магазин. Самым интересным в этой истории является второй эксперимент, когда смена изображений в каталоге дала прирост CTR в 15,9%. Лишний пример того, что работая исключительно с контентом можно получить значительный прирост показателей. Оптимизация контента становится все более актуальной темой.
Непрошенные редизайны
Enterprise Software Design — A Call to Arms
Очень хорошая философская статья Tom Hobbs о том, как интерфейсы потребительских приложений превратились в комфортные и человеколюбивые и том, как такую же трансформацию запустить и для корпоративного ПО. Системно, глубоко, вдохновляюще.
![Enterprise Software Design — A Call to Arms](https://habrastorage.org/getpro/habr/post_images/c3d/1e3/3ed/c3d1e33ed5a085c09eee470a5d6f8b02.png)
Автомобильные интерфейсы
Виртуальная реальность
![Cable Usability in VR](https://habrastorage.org/getpro/habr/post_images/2a1/e33/91e/2a1e3391e0e0e4451913865f5731350c.png)
Тренды в СМИ
Uideo
Андрей Якушев добавил к своему агрегатору видео с конференций международную версию с англоязычными выступлениями.
![Uideo](https://habrastorage.org/getpro/habr/post_images/624/4ef/6e5/6244ef6e52bdd2cb2ac078c8814ac8b3.png)
Tilda Education: Дизайн к цифровой среде
Команда Tilda Publishing запустила первый онлайн-курс в рамках своей школы дизайна.
![Тильда: Дизайн в цифровой среде](https://habrastorage.org/getpro/habr/post_images/893/dd0/ff4/893dd0ff4df9fa9806e705c1ba5c087d.jpg)
Why We Should Really Be Concerned About the Visual Identity for the Tokyo Olympics
Сильный материал по философии современного дизайна от Ian Lynam. Он разбирает две истории олимпийской айдентики (Мехико ’68 и Мюнхен ’72) как примеры системной работы над визуальным языком на масштабе международного мероприятия и сопоставляет их с провальным процессом вокруг Токио 2020, который символизирует бездушный краудфандинг за три копейки. Не совсем про интерфейсы, но касается любых приложений дизайна и затрагивает в том числе цифровые продукты.
![Why We Should Really Be Concerned About the Visual Identity for the Tokyo Olympics](https://habrastorage.org/getpro/habr/post_images/7f9/396/c90/7f9396c90cfcf0aea6b4771b9d369428.jpg)
Эргономист № 42, ноябрь 2015
Вышел свежий номер. Алексей Копылов особо отметил упоминаемую в этом журнале статью Увеличение конверсии пользовательского интерфейса путем объективного юзабилити-тестирования на основе анализа электроэнцефалограммы пользователя.
Time for Us All to Ditch Spec Creative Pitches
Инициатива #SayNoToSpec от студии Zulu Alpha Kilo, которая рекомендует отказываться от участия в тендерах и пробных работах. Zak Mroueh перечисляет пять проблем, из-за которых студия изменила свою политику. Они записали отличный ролик на эту тему — попытались запросить то же самое у представителей других отраслей, которые, естественно, были в шоке.
Relevance is a State of Mind
Dan Brown из EightShapes рефлексирует на тему того, что делать более зрелым UX-специалистам для того чтобы оставаться релевантными и как не беситься, когда с придыханием слышишь о «новой методологии», которой на деле уже десяток лет. Он советует двигаться в сторону менторства, используя свой широкий профессиональный опыт.
Jarrod Drysdale — My Designer Is Driving Me Crazy!
Книга Jarrod Drysdale «My Designer is Driving Me Crazy!» для клиентов и менеджеров, которая учит их правильно работать с дизайнерами. Доступна в альтернативных форматах вроде видео-курса и почтовой рассылки.
![Jarrod Drysdale — My Designer Is Driving Me Crazy!](https://habrastorage.org/getpro/habr/post_images/16f/d03/775/16fd037752d1225f933b7a6c885af9ac.jpg)
Шуточки про дизайнеров за 400
Дизайн в Facebook
How Apple Is Giving Design A Bad Name
Don Norman и Bruce Tognazzini, легендарные дизайнеры Apple в 70е-90е, о теперешнем состоянии проектирования интерфейсов в Apple. О том, как и почему процессы дошли до сегодняшнего состояния. По ходу получает и Google. Такого мощного заряда Дон и Тог давно не выдавали.
![How Apple Is Giving Design A Bad Name](https://habrastorage.org/getpro/habr/post_images/296/669/99e/29666999e54029f1ac4414342712c7f7.jpg)
Сессии AMA
Назначения дизайнеров
Google SPAN 2015: New York & London
В прошлом году Google провел свою первую дизайн-конференцию FORM, в этом она проходит под названием SPAN уже в двух городах — Нью-Йорке и Лондоне.
![Google SPAN 2015](https://habrastorage.org/getpro/habr/post_images/fa7/d79/dc9/fa7d79dc9787d047051d318b66562958.png)
По результатам выходит книга SPAN Reader с публикациями выступающих (они доступны в вебе по ссылкам в конце статьи). Вышли и другие материалы, в том числе видео панельной дискуссии, посвященной современным инструментам прототипирования и добротному продуктовому дизайну.
Каким-то образом получил приглашение на лондонскую часть, хотя заявку не подавал. Уже опубликовали видео-записи оттуда. Я был там, советую посмотреть панельную дискуссию про инструменты прототипирования, выступления Luna Maurer про ручной генеративный дизайн и Ken Wong про виртуальную реальность. А также Davide Fornari про механический генеративный дизайн — спокойно по подаче, но сама история бомба.
O’Reilly Design Conference 2016
O’Reilly запустили свою дизайн-конференцию, O’Reilly Design Conference. Она пройдет 19-22 января в Сан-Франциско, США. По составу и формат обещает быть одной из самых мощных. Mary Treseler, которая отвечает за нее, дает развернутое интервью UXMatters о том, что будет.
![O’Reilly Design Conference 2016](https://habrastorage.org/getpro/habr/post_images/521/dab/6dc/521dab6dc4e5374f66323890b91b7600.jpg)
RSD4 — Relating Systems Thinking to Design
1-3 сентября 2015 года в Banff, Канада, прошла конференция Relating Systems Thinking and Design, посвященная сложным системным проблемам, которые может решать дизайн. Часть видео материалов уже доступна. Остальные появятся на канале.
![RSD4 — Relating Systems Thinking to Design](https://habrastorage.org/getpro/habr/post_images/4c5/497/dbf/4c5497dbffebc951c076452010272e54.jpg)
Свежие ссылки можно также отслеживать в одноименной Facebook-группе или получать раз в месяц по почте. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
Подписаться на рассылку. Письмо приходит один раз в месяц.
![Дайджест продуктового дизайна, ноябрь 2015](https://habrastorage.org/getpro/habr/post_images/8b5/1a3/a91/8b51a3a913f9051826e97a4afc2c97aa.png)
Паттерны и Best Practices
Josh Clark — Designing for Touch
Josh Clark пару недель назад выпустил новую книгу «Designing for Touch» в издательстве A Book Apart. На A List Apart доступна одна из глав, о том, как пользователи держат устройства. На эту тему много писали Steven Hoober и Luke Wroblewski, но тут собрано все и сразу в одном материале.
![Josh Clark — Designing for Touch](https://habrastorage.org/getpro/habr/post_images/df7/2b6/475/df72b6475a6d340cba1118eabc565a68.jpg)
The State Of Airline Websites 2015 — Lessons Learned
Joshua Johnson делает разбор сайтов 20 авиакомпаний на предмет интерфейсных паттернов. Главная страница, поиск и бронирование.
![The State Of Airline Websites 2015 — Lessons Learned](https://habrastorage.org/getpro/habr/post_images/f9e/c1c/f0a/f9ec1cf0a6fee436c5c5c45896f2f554.jpg)
Long-Term Exposure to Flat Design — How the Trend Slowly Makes Users Less Efficient
Kate Meyer рассказывает о долгосрочном исследовании интерфейсов с плоским дизайном в NN/g. Много конкретных ответов на опасения в том, что такая стилистика зачастую убивает аффорданс и затрудняет работу с продуктом. Более молодые пользователи действительно имеют меньше проблем с этим и они более охотно исследуют дизайн, но комфорта даже им это не добавляет.
![Long-Term Exposure to Flat Design — How the Trend Slowly Makes Users Less Efficient](https://habrastorage.org/getpro/habr/post_images/5bb/d1d/8b0/5bbd1d8b09069ff7a0f6cefece451d7e.png)
Design Principles: Choosing the Right Patterns
Gustavs Cirulis о том, что важно использовать паттерны осмысленно. Он приводит пример из опыта Intercom, где они сравнивали навигационные решения и примеряли под конкретную ситуацию.
![Design Principles: Choosing the Right Patterns](https://habrastorage.org/getpro/habr/post_images/68b/871/f07/68b871f07c17de676880a9a2e2460958.png)
Cайты каких российских компаний адаптивные — интернет-магазины, сервисы, digital-агентства
Компания ADN Digital Studio провела исследование отечественных интернет-магазинов на мобильных. У кого есть мобильные версии и приложения.
Состояния интерфейса
Mobile Inline Form Validation
Три года назад Steven Hoober подробно описывал способы валидации форм в мобильных интерфейсах. Спустя три года он говорит о том, что сообщения об ошибках являются анти-паттерном и лучше вообще не доводить дело до них. С момента написания статьи 2012 года он практически не использовал описанные в ней паттерны.
![Mobile Inline Form Validation](https://habrastorage.org/getpro/habr/post_images/8d9/16e/e8c/8d916ee8cdafe09a2c4792634efbedfa.png)
Письма рассылки
![Designing with constraint: Twitter's approach to email](https://habrastorage.org/getpro/habr/post_images/408/450/fda/408450fdaf62ad63c7bfb1729cfc97b5.png)
Исследования Baymard Institute
![The State of Mobile E-Commerce Search and Category Navigation](https://habrastorage.org/getpro/habr/post_images/94d/de5/8e3/94dde58e318b5450837fa672e6614a15.jpg)
Onboarding
- onboardX, еще один сервис для добавления всплывающих подсказок в интерфейс.
- Перевод на русский истории о том, как приложение Hopper переделало onboarding.
Мобильные паттерны
- Thierry Meier разбирает паттерны сортировки и фильтрации на мобильных.
- Zoltan Kollin перечисляет проблемные паттерны в мобильных приложениях. Скрытая навигация, иконки без подписей, жесты без аффордансов, бесполезные обучающие экраны, непродуманные пустые экраны.
Гайдлайны платформ и компаний
iOS 9
![iOS 9 Design Guidelines](https://habrastorage.org/getpro/habr/post_images/cd1/f48/f4f/cd1f48f4f976d6ade555ab8a69f49a5c.jpg)
Material Design
- Шикарнейший разбор базовых принципов кода для анимации в material design от Joe Birch. Что можно делать стандартными средствами.
![Exploring Meaningful Motion on Android](https://habrastorage.org/getpro/habr/post_images/820/933/cca/820933cca4a98b28c60705b7589adcfb.png)
Apple TV
- Полезнейшая статья Ben Hersh о его опыте дизайна для нового Apple TV. Он многократно повторяет, что это не смартфон и не нужно повторять его паттерны и интерфейсные решения в телевизоре.
![If it’s not an iPhone, it’s not an iPhone](https://habrastorage.org/getpro/habr/post_images/99a/70b/eac/99a70beacb81f0c39a62729ccadc1937.png)
Apple Watch
iPhone 6
Шаблоны Android-телефонов
Понимание пользователя
Why We’re Addicted To Our Smartphones, But Not Our Tablets
Интересные выкладки Liraz Margalit из ClickTale о том, почему смартфоны воспринимаются как более персональные устройства, в отличие от планшетов. Помимо того, что они просто чаще используются, есть и психологическая привязанность.
User Research With Small Business Owners — Best Practices and Considerations
Chelsey Glasson и Aidan Bryant о проведении исследований с представителями малого бизнеса. Эти люди постоянно заняты и требовательны к инструментам, так что есть много особенностей работы с ними.
Карты эмпатии
![Adapting empathy maps for UX design](https://habrastorage.org/getpro/habr/post_images/0f6/366/bc7/0f6366bc75ffc6f908ed9ce723839cf0.jpg)
Скорость работы интерфейса
- Вторая часть статьи Дениса Мишунова о скорости работы интерфейсов. Он говорит об особенностях восприятия и том, как использовать активное ожидание, холодный старт и псевдо-завершение загрузки для ускорения видимой работы продукта.
![Why Performance Matters, Part 2: Perception Management](https://habrastorage.org/getpro/habr/post_images/d33/0ce/d66/d330ced669a83e6dbb1cc8c5ca7c335c.png)
Персонажи
- Mabel Chan из SalesForce о том, как правильно преподносить персонажей команде и заказчикам. Как примерно одни и те же результаты исследований имели абсолютно разную востребованность среди коллег.
![Same Findings, Different Story, Greater Impact: A Case Study in Communicating Research](https://habrastorage.org/getpro/habr/post_images/f81/545/c33/f81545c33d7e19655e7ea835c79a80d4.jpg)
Интерфейсы, которые убивают
- Плохо спроектированный интерфейс для пилотов на iPad чуть не угробил самолет авиакомпании Qantas. Пилот промахнулся при указании высоты из-за толстых пальцев, так что самолет ударился хвостом о полосу при взлете из-за неверных параметров.
![iPad и толстые пальцы чуть не привели к авиакатастрофе](https://habrastorage.org/getpro/habr/post_images/873/0f1/3ed/8730f13ed7a1c1393521ec2c103f1990.jpg)
Дизайн для детей
Accessibility
- Инициатива крупных интернет-компаний и американских университетов по обучению сотрудников принципам доступности.
- Facebook запустил новую инциативу для сотрудников — «2G-вторники». Сотрудники могут понять, каково использовать продукт с медленным и плохим интернетом в Индии. У нас есть специальная сеть wi-fi для этого.
- Дико популярный во многом благодаря Tinder жест свайпа имеет проблемы с accessibility. Он перкликается с некоторыми системными жестами мобильных платформ.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Что такое Use Case и зачем они нужны?
Анна Абрамова рассказывает об одной из лучших техник проектирования взаимодействия пользователя и программы.
Проектирование и дизайн экранов интерфейса
Sketch 3.4
Вышел Sketch 3.4 (по ссылке большой список нововведений и исправлений). Yap Kwang Yik сделал обзор наиболее интересных улучшений.
![Sketch 3.4](https://habrastorage.org/getpro/habr/post_images/107/c35/6e4/107c356e44f8f0f2df5532fefd9b0b33.jpg)
Правда, версия оказалась глючной и Bohemian Coding пришлось тут же выпускать обновление 3.4.1, а следом и 3.4.2. В результате всей этой канители разработчики решили уйти из AppStore. Приложение будет распространяться и обновляться с сайта Bohemian Coding. Другие материалы:
- Хорошая наглядная шпаргалка по горячим клавишам от Meng To.
- Плагин Fluid, который позволяет делать автоматические адаптивные лейауты в духе iOS.
- Мощный справочник по работе со Sketch 3 от Meng To.
Adobe Photoshop CC 2015
- Ноябрьское обновление Photoshop CC 2015. Улучшенные артборды, экспорт в SVG, развитие тач-интерфейса и библиотек Creative Cloud.
![Photoshop CC 2015 and Fuse CC](https://habrastorage.org/getpro/habr/post_images/3a4/e79/ce8/3a4e79ce8a53e2c430cb2edfd116b98b.png)
Adobe Project Comet — User experience, prototyping and design app
Better Icon Design in 6 Easy Steps
Отличный набор простых правил для создания качественных пиктограмм/иконок от Scott Lewis из IconFinder. Вдогонку:
![Better Icon Design in 6 Easy Steps](https://habrastorage.org/getpro/habr/post_images/a59/3bc/3db/a593bc3db870c1c67d740d21e4d6e364.png)
Animaticons — Animated GIF Icons
Создатели проекта Animaticons пошли против тренда модных форматов и запустили библиотеку настраиваемых анимированных иконок в GIF. Не очень future-friendly, зато дешево и сердито. Вдогонку:
- Sara Souiedan подробно сравнивает плюсы и минусы анимации в SVG и GIF. По всем показателям кроме поддержки в старых браузерах GIF, конечно же, проигрывает.
![Animaticons — Animated GIF Icons](https://habrastorage.org/getpro/habr/post_images/320/dd3/64c/320dd364c04639a5f0b7447a5c28dd5a.png)
T-Shirt, Tank Top and Clothing Mockups
Онлайн-сервис PlaceIt от компании Breezi позволяет быстро и дешево примерить принты на одежду. Набор макетов постоянно пополняется и сейчас там несколько десятков хороших шаблонов.
Обзоры инструментов прототипирования
- Перевод двух частей обзора инструментов от Tes Mat: Proto.io, Pixate, Origami, Framer, Form и Principle, Flinto для Mac, Tumult Hype.
Floid
Пользовательские исследования и тестирование, аналитика
10 User Research Myths and Misconceptions
Jim Ross опровергает мифы и заблуждения о пользовательском тестировании.
10 Things I Learned About UX By Being Drunk
Richard Littauer за $250 проверяет сайты в пьяном состоянии. Он рассказывал о том, чему научился за время тестирования дизайна в пьяном виде.
![The User is Drunk](https://habrastorage.org/getpro/habr/post_images/fea/099/46d/fea09946ddf4e0c9221ef23f5c123feb.jpg)
An Interview with Alfonso de la Nuez, CEO of UserZoom
Интервью с CEO одного из старейших сервисов удаленных пользовательских исследований UserZoom, которые получили внушительные инвестиции в $34 млн.
![An Interview with Alfonso de la Nuez, CEO of UserZoom](https://habrastorage.org/getpro/habr/post_images/ad6/35a/91c/ad635a91cc758434e0ffe53fd17a4964.jpg)
Picking the Right Methods to Improve Navigation
Отличная памятка по тестированию навигации от Jeff Sauro. Какими пользовательскими исследованиями можно ответить на конкретные вопросы по ней.
A/B-тестирование
- Craig Sullivan об опыте A/B-тестирования: долгий путь от восторга к разочарованию, и, наконец, к адекватному использованию.
- Мощная презентация от Chris Johnson из Spotify о том, как компания ставила гипотезы по запуску новой функциональности и проверяла их.
Опросы
Визуальное программирование и дизайн в браузере
Живые гайдлайны и компонентные системы
- eBay готовится анонсировать собственный CSS-фреймворк. Они рассказали о том, как он учитывает и контролирует грамотную реализацию accessibility.
- Brad Frost на тему использования реальных данных в прототипах. Эти возможности постепенно появляются в его фреймворке Pattern Lab.
- ThoughtBot о том, как важно работать с цветами семантически.
- Nathan Curtis о том, как провести рабочую сессию для систематизации паттернов на существующем продукте. И аналогичная статья от Charlotte Jackson.
Envato Sites — Envato Sites Website Builder by Envato & ThemeForest
Envato запустили свой конструктор сайтов Envato Sites в партнерстве с Theme Forest. Теперь все это многообразие бесплатных тем не придется прикручивать вручную. Чуть подробнее про запуск.
Веб-типографика
- Jakob Nielsen о том, как тестировать тексты в продуктах на предмет разборчивости, читабельности и понятности.
- Marcin Wichary рассказывает об экспериментах Medium по использованию основного шрифта текущей платформы пользователя. Это, само собой, дает выигрыш по скорости загрузки, хотя не так-то просто сделать аккуратно.
- CSS-код для выделения текста маркером построчно.
- Закрывается Fontdeck, один из старейших сервисов аренды шрифтов, в том числе для веба.
- Хорошие размышления Robin Rendle на тему адаптивной и параметрической типографики в вебе.
![Using System UI Fonts In Web Design: A Quick Practical Guide](https://habrastorage.org/getpro/habr/post_images/878/429/708/878429708bdea62ec7c2ac4fb80b2b47.png)
CSS-анимация
Шрифтовые иконки
- Tyler Sticka советует отказаться от иконочных шрифтов в пользу SVG. Они были временным костылем при переходе к векторной графике, но имеют уйму проблем с accessibility и работе в специфических браузерах.
Работа с SVG
- IconFactory о том, как готовить иконки для нового Safari в MacOS.
- Толковая памятка Sara Souiedan по поводу экспорта графики в SVG. Как оптимизировать структуру и код.
Flexbox
Режимы наложения слоев в CSS
Работа с Bootstrap и Foundation
- Вышла новая версия фреймворка Foundation 6. В блоге Zurb рассказывается о нововведениях (в пакет вошла, кстати, недавно анонсированная библиотека для анимации Motion UI).
![Foundation 6 is Here](https://habrastorage.org/getpro/habr/post_images/608/fae/b01/608faeb011ae9f196f22856b9fd5de2b.jpg)
Framer
- Framer теперь умеет прототипировать виртуальную реальность.
- Как анимировать SVG.
- Как бывшие 37 Signals использовали Framer при работе над Basecamp 3.
![Design Virtual Reality](https://habrastorage.org/getpro/habr/post_images/a7a/3da/6d5/a7a3da6d5cb33bb7d473ee9454ab4855.png)
Webflow
How We Fixed Our Icon Problem
Перевод статьи Bobby Grace из Trello о том, как компания систематизировала работу с пиктограммами в интерфейсе.
Новые скрипты
- Эффект дождя на WebGL.
- Кудесник сумасшедшей интерфейсной анимации Олег Соломка сделал свою JS-библиотеку Motion для нее.
- Волна вдохновения эффектом объемного параллакса в новом Apple TV вышла за рамки имитации оригинала. Скрипт от Mary Lou для интернет-магазинов позволяет показать товары в интерьере с эффектом объемного параллакса.
- Скрипт для анимированного многоуровневого вертикального меню.
- Трансформацией иконки бургера в стрелку и наоборот через переставление линий уже никого не удивишь, так что пора идти дальше. Скрипт от Luis Manuel делает это с дополнительными спецэффектами.
UX-стратегия и менеджмент
Дизайн-лидеры
- Отличный материал на тему требований к современным дизайн-лидерам. Мнения глав дизайна и ключевых руководителей 3M, Intuit, Microsoft, Pepsico, Philips и Rei.
![Design Leadership: What's Next?](https://habrastorage.org/getpro/habr/post_images/e69/800/9b0/e698009b02951cb278f27c5d7e0c11ff.jpg)
Построение дизайн-культуры
UX-стратегия
- Сервис GridMark для описания уровней зрелости компаний и команд. Не очень графичный, но для начала систематизации хорош.
Как нанимать дизайнеров
- Andy Budd о том, как правильно подходить к найму дизайнеров. Важно перейти от перечисления требований и навыков к описанию задач и проблем, которые нужно решить.
![On Building Digital Capacity And Attracting Talent](https://habrastorage.org/getpro/habr/post_images/d21/248/aef/d21248aef9431e3667de04a5e19638fb.jpg)
Продуктовый менеджмент и аналитика
Почему «нет» — ключевое слово при создании продукта?
Олег Якубенков сделал перевод тезисов Intercom, плюс добавил еще одну подборку советов от Intercom.
Growth hacking is bullshit
О том, почему стоит смотреть на систему метрик и находить баланс между малыми мелкими задачами и большими стратегиями. И не надо верить в существование «серебряной пули».
![Growth hacking is bullshit](https://habrastorage.org/getpro/habr/post_images/846/10a/3af/84610a3af8996fe6b070cbf1ac1a0d6d.png)
Hooked on a Feeling
Презентация Stephen P. Anderson о разнице между требованиями к продукту и experience.
Методологии, процедуры, стандарты
Parts without a Whole — What has design thinking become in organizations?
Команда сайта This is Design Thinking провела опрос 400 практикующих дизайнеров и менеджеров на тему использования практик дизайн-мышления в крупных и не очень компаниях. По факту они выпустили электронную книжку/отчет, в котором собраны инсайты.
![Parts without a Whole — What has design thinking become in organizations?](https://habrastorage.org/getpro/habr/post_images/122/c42/e64/122c42e6441325cb3f89868e0a2828d7.png)
Кейсы
IBM’s Design-Centered Strategy to Set Free the Squares
Большой и достаточно подробный рассказ о том, как IBM обратил внимание на дизайн и пришел к потребности нанять 1000 дизайнеров. Рассказ о Phil Gilbert, который пришел вместе с купленной компанией Lombardi Software и с одобрения CEO Virginia Rometty начал внедрять практики дизайн-мышления, повышать общую дизайн-культуру и массово нанимать людей. Видео.
![IBM’s Design-Centered Strategy to Set Free the Squares](https://habrastorage.org/getpro/habr/post_images/9f6/a06/be2/9f6a06be20831255506468493fe33a5e.jpg)
Кейсы редизайна
- Перевод кейса о создании приложения Google Primer.
- Еще одна небольшая история от дизайн-команды Hopper. Как они упростили процесс бронирования билетов настолько, что пришлось снова добавлять шаги.
- Raven Yu о работе над интерфейсом платежного терминала Bindo POS 3.0.
- Wired о переосмыслении раздела событий в Facebook.
- Рассказ о редизайне SwiftKey для Android.
- Толковая история работы над приложением Gyroscope для занятий спортом. Anand Sharma уже писал о начале работы над ним в прошлом году.
- Case Study Club, еще одна коллекция кейсов.
The ultimate ecommerce CRO & UX case study — RS Components
Хороший кейс с системным подходом к улучшению конверсии сайта. От формулирования проблемы, до индивидуальной работы над большим набором компонентов сайта.
И еще один кейс про интернет-магазин. Самым интересным в этой истории является второй эксперимент, когда смена изображений в каталоге дала прирост CTR в 15,9%. Лишний пример того, что работая исключительно с контентом можно получить значительный прирост показателей. Оптимизация контента становится все более актуальной темой.
Непрошенные редизайны
Тренды
Enterprise Software Design — A Call to Arms
Очень хорошая философская статья Tom Hobbs о том, как интерфейсы потребительских приложений превратились в комфортные и человеколюбивые и том, как такую же трансформацию запустить и для корпоративного ПО. Системно, глубоко, вдохновляюще.
![Enterprise Software Design — A Call to Arms](https://habrastorage.org/getpro/habr/post_images/c3d/1e3/3ed/c3d1e33ed5a085c09eee470a5d6f8b02.png)
Автомобильные интерфейсы
- Исследование университета Юты говорит о том, что голосовые интерфейсы тоже не до конца безопасны. Взаимодействие с ними способно отвлечь внимание водителя на период до 27 секунд.
Виртуальная реальность
- Студия Block Interval пишет о юзабилити кабелей при работе над интерфейсами виртуальной реальности. Как не дать пользователю запутаться в них. Вообще у них в блоге много толковых публикаций на тему. Например, о важности аудио-дизайна и том, опасно ли провоцировать слишком сильные эмоции.
![Cable Usability in VR](https://habrastorage.org/getpro/habr/post_images/2a1/e33/91e/2a1e3391e0e0e4451913865f5731350c.png)
Тренды в СМИ
- Alexis Lloyd из NYT Labs размышляет на тему будущего публикаций на медиа-сайтах. Сейчас идет много шума на тему того, отъедят ли Фейсбук и Эппл трафик у изданий с помощью своих проприетарных форматов, но эти форматы устарели сами по себе. Он предлагает смотреть в сторону атомарного контента и того, как работает Википедия.
Для общего и профессионального развития
Uideo
Андрей Якушев добавил к своему агрегатору видео с конференций международную версию с англоязычными выступлениями.
![Uideo](https://habrastorage.org/getpro/habr/post_images/624/4ef/6e5/6244ef6e52bdd2cb2ac078c8814ac8b3.png)
Tilda Education: Дизайн к цифровой среде
Команда Tilda Publishing запустила первый онлайн-курс в рамках своей школы дизайна.
![Тильда: Дизайн в цифровой среде](https://habrastorage.org/getpro/habr/post_images/893/dd0/ff4/893dd0ff4df9fa9806e705c1ba5c087d.jpg)
Why We Should Really Be Concerned About the Visual Identity for the Tokyo Olympics
Сильный материал по философии современного дизайна от Ian Lynam. Он разбирает две истории олимпийской айдентики (Мехико ’68 и Мюнхен ’72) как примеры системной работы над визуальным языком на масштабе международного мероприятия и сопоставляет их с провальным процессом вокруг Токио 2020, который символизирует бездушный краудфандинг за три копейки. Не совсем про интерфейсы, но касается любых приложений дизайна и затрагивает в том числе цифровые продукты.
![Why We Should Really Be Concerned About the Visual Identity for the Tokyo Olympics](https://habrastorage.org/getpro/habr/post_images/7f9/396/c90/7f9396c90cfcf0aea6b4771b9d369428.jpg)
Эргономист № 42, ноябрь 2015
Вышел свежий номер. Алексей Копылов особо отметил упоминаемую в этом журнале статью Увеличение конверсии пользовательского интерфейса путем объективного юзабилити-тестирования на основе анализа электроэнцефалограммы пользователя.
Time for Us All to Ditch Spec Creative Pitches
Инициатива #SayNoToSpec от студии Zulu Alpha Kilo, которая рекомендует отказываться от участия в тендерах и пробных работах. Zak Mroueh перечисляет пять проблем, из-за которых студия изменила свою политику. Они записали отличный ролик на эту тему — попытались запросить то же самое у представителей других отраслей, которые, естественно, были в шоке.
Relevance is a State of Mind
Dan Brown из EightShapes рефлексирует на тему того, что делать более зрелым UX-специалистам для того чтобы оставаться релевантными и как не беситься, когда с придыханием слышишь о «новой методологии», которой на деле уже десяток лет. Он советует двигаться в сторону менторства, используя свой широкий профессиональный опыт.
Jarrod Drysdale — My Designer Is Driving Me Crazy!
Книга Jarrod Drysdale «My Designer is Driving Me Crazy!» для клиентов и менеджеров, которая учит их правильно работать с дизайнерами. Доступна в альтернативных форматах вроде видео-курса и почтовой рассылки.
![Jarrod Drysdale — My Designer Is Driving Me Crazy!](https://habrastorage.org/getpro/habr/post_images/16f/d03/775/16fd037752d1225f933b7a6c885af9ac.jpg)
Шуточки про дизайнеров за 400
Дизайн в Facebook
Люди и компании в отрасли
How Apple Is Giving Design A Bad Name
Don Norman и Bruce Tognazzini, легендарные дизайнеры Apple в 70е-90е, о теперешнем состоянии проектирования интерфейсов в Apple. О том, как и почему процессы дошли до сегодняшнего состояния. По ходу получает и Google. Такого мощного заряда Дон и Тог давно не выдавали.
![How Apple Is Giving Design A Bad Name](https://habrastorage.org/getpro/habr/post_images/296/669/99e/29666999e54029f1ac4414342712c7f7.jpg)
Сессии AMA
Назначения дизайнеров
Материалы конференций
Google SPAN 2015: New York & London
В прошлом году Google провел свою первую дизайн-конференцию FORM, в этом она проходит под названием SPAN уже в двух городах — Нью-Йорке и Лондоне.
![Google SPAN 2015](https://habrastorage.org/getpro/habr/post_images/fa7/d79/dc9/fa7d79dc9787d047051d318b66562958.png)
По результатам выходит книга SPAN Reader с публикациями выступающих (они доступны в вебе по ссылкам в конце статьи). Вышли и другие материалы, в том числе видео панельной дискуссии, посвященной современным инструментам прототипирования и добротному продуктовому дизайну.
Каким-то образом получил приглашение на лондонскую часть, хотя заявку не подавал. Уже опубликовали видео-записи оттуда. Я был там, советую посмотреть панельную дискуссию про инструменты прототипирования, выступления Luna Maurer про ручной генеративный дизайн и Ken Wong про виртуальную реальность. А также Davide Fornari про механический генеративный дизайн — спокойно по подаче, но сама история бомба.
O’Reilly Design Conference 2016
O’Reilly запустили свою дизайн-конференцию, O’Reilly Design Conference. Она пройдет 19-22 января в Сан-Франциско, США. По составу и формат обещает быть одной из самых мощных. Mary Treseler, которая отвечает за нее, дает развернутое интервью UXMatters о том, что будет.
![O’Reilly Design Conference 2016](https://habrastorage.org/getpro/habr/post_images/521/dab/6dc/521dab6dc4e5374f66323890b91b7600.jpg)
RSD4 — Relating Systems Thinking to Design
1-3 сентября 2015 года в Banff, Канада, прошла конференция Relating Systems Thinking and Design, посвященная сложным системным проблемам, которые может решать дизайн. Часть видео материалов уже доступна. Остальные появятся на канале.
![RSD4 — Relating Systems Thinking to Design](https://habrastorage.org/getpro/habr/post_images/4c5/497/dbf/4c5497dbffebc951c076452010272e54.jpg)
Свежие ссылки можно также отслеживать в одноименной Facebook-группе или получать раз в месяц по почте. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
Подписаться на рассылку. Письмо приходит один раз в месяц.