Уже три года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-март 2013 ^[1].

Паттерны и Best Practices

This is Responsive — Tips, Resources and Patterns for Responsive Web Design ^[2]
Коллекция паттернов, статей и других полезных материалов по адаптивному дизайну. Все примеры можно пощупать, это работающий код.

Exploring Ten Fundamental Aspects Of M-Commerce Usability ^[3]
Большая статья Baymard Institute для Smashing Magazine с выдержками из их свежего исследования мобильных интернет-магазинов.

Finally, Google Has Come Up With A Predictable, Intuitive Sidebar Navigation Design ^[4]
Google включил в официальные гайдлайны Android привычный по современным приложениям сайдбар. Детально описана механика его работы ^[5]. Кстати, на недавно прошедшей конференции Google I/O было много интересных выступлений о дизайне для Android:

• Презентация Android Design for UI Developers с конференции Google I/O ^[6].
• Презентация Structure in Android App Design с конференции Google I/O ^[7].
• Презентация Agile UX Research Practice in Android с конференции Google I/O ^[8].

Infinite Scrolling — Let's Get To The Bottom Of This ^[9]
Yogev Ahuvia подробно описывает сильные и слабые стороны бесконечного скроллинга на странице. Он хорош для слабоструктурированного контента и плохо работает в тех случаях, когда пользователю необходимо изучать элементы списка.

GoodUI ^[10]
Jakub Linowski запустил новый проект GoodUI, собирающий коллекцию паттернов, хорошо работающих для «продающих» интерфейсов. Это простые примеры и описания, работающие еще и как набор эвристик.

Setting Type for User Interfaces ^[11]
Billy Whited рассказывает о разнице в использовании текста в сервисных и контентных продуктах. Он описывает особенности чтения и их влияние на работу с разным объемом текста.

Designing Search — Displaying Results ^[12]
Tony Russell-Rose описывает типовые паттерны страницы поисковой выдачи. В зависимости от задачи необходимо балансировать набор информации в элементе списка результатов с тем чтобы обеспечить легкое сканирование страницы и при этом — минимизацию переходов за подробной информацией.

SIX UX ^[13]
Сайт SIX UX использует видео-сервис Vine для хранения библиотеки паттернов интерфейсной анимации. Это шестисекундные записи интересных взаимодействий с сайтами и мобильными приложениями.

Position Of Navigation Buttons Affects The Usability Of Apps For Kids ^[14]
Sabina Idler приводит результаты пользовательских исследований навигации среди детей, использующих планшетные приложения. Лучше всего работает размещение элементов навигации снизу, на большом расстоянии друг от друга.

New Layouts for the Multi-Device Web ^[15]
Luke Wroblewski описывает детали работы своего сервиса Polar на разных устройствах и разных разрешениях. Он предлагает достаточно интересный механизм адаптивности, который учитывает не только разрешение, но и способ ввода — например, на тач-ноутбуках контент лучше не центрировать, а прижимать к краю.

Userium — Usability checklist ^[16]
Финнский юзабилист Nina Patkai составила обширный чеклист распространённых UX-ошибок. Многие элементы чеклиста отсылают к развёрнутым статьям о смысле ошибки и о том, как сделать правильно.

Понимание пользователя

Cognitive Overhead, Or Why Your Product Isn’t As Simple As You Think ^[17]
Статья David Lieb из компании Bump на очень важную тему — разнице между визуальной и когнитивной сложностью. Зачастую, стремясь упростить первичное восприятие интерфейса, усложняется его регулярное использование.

Anatomy of Intuition ^[18]
Maurice McGinley описывает очень интересную теорию в качестве замены некорректному понятию «интуитивной понятности». Он предлагает использовать термин «доступность» и подробно аргументирует, почему.

Task model cheat sheet ^[19] (PDF)
Richard Caddick из компании CXPartners подготовил удобную шпаргалку по анализу пользовательских задач. Прямая ссылка на PDF ^[20].

Semantic environments and information architecture ^[21]
Jorge Arango пишет о концепции «информационной (или семантической) среды». Это важный аспект проектирования интерфейсов, который определяет ожидания пользователей и правила взаимодействия с продуктом.

Адаптация Q-Methodology для HCI ^[22] (PDF)
Подробное описание адаптации Q-Методологии для использования в поле Human Computer Interaction. Сам по себе метод — это одно из простых, однако очень эффективных средств для получения информации о приоритетах и мнениях людей о самих себе (пользователей, потребителей, ...). Т.е. определение внутренней структуры установок и мнений. Является количественным и качественным одновременно. Разработан психологами, одна из его адаптаций много лет широко применяется в рекламе и маркетинге.

Control and Transparency ^[23]
Ilana Westerman рассказывает об исследовании ожиданий и отношения пользователей относительно настроек приватности веб-сервисах и приложениях. Оно проводилось в США, Канаде и Мексике, но будет полезно и нам.

Проектирование структуры и экранов интерфейса

SketchMine ^[24]
Приложение для дизайнеров и проектировщиков Sketch стремительно набирает популярность благодаря широким возможностям и скорости работы. Недавний толчок к его развитию дало фактически сворачивание работы над Fireworks ^[25], который близок по духу. Сайт SketchMine собирает шаблоны и стенсилы для Sketch.

Facebook Brand Assets ^[26]
Facebook выложил свои маркетинговые гайдлайны. Помимо айдентики они описывают детали интерфейса различных версий продукта и дают общие рекомендации по их использованию.

Keynote, PowerPoint and Photoshop UI Templates for BlackBerry 10 Apps ^[27]
Шаблоны для проектирования приложений BlackBerry 10 в PowerPoint и Keynote. Комплект включает типовые экраны, элементы интерфейса, стандартные иконки и обозначения жестов.

Metaphorical Analysis ^[28]
Cyd Harrell и Jodi Leo пишут о том, как создавать метафоры для интерфейсов и сопроводительных артефактов. Это отличный способ рассказать о сложных концепциях и емко показать инсайты.

VERSUS IO ^[29]
Сервис Versus IO позволяет наглядно сравнить физические размеры и характеристики современных смартфонов. Еще одна таблица сравнения экранов и размеров популярных устройств ^[30].

Android cheatsheet for graphic designers ^[31]
Отличная памятка по проектированию и дизайну интерфейсов для Android-смартфонов.

Gettin' HIGgy With It — Architecting a flexible iPhone experience without ditching Human Interface G ^[32]
Отличнейший обзор паттернов навигации в iPhone-приложениях, описываемых официальными Human Interface Guidelines. Автор предлагает понятные и умеренно-короткие цепочки переходов между экранами для разных задач.

Expanded user journey maps — Combining several UX deliverables into one useful document ^[33]
Rian van der Merwe предлагает интересный формат документации, совмещающий в себе несколько близких по духу — бизнес-цели и УТП, customer journey maps, УТП, план по контенту. Пока доступен только промежуточный пример, но описание достаточно подробное и звучит многообещающе.

Information Wayfinding — A Not-So-New Metaphor ^[34]
Tyler Tate пишет о том, как различаются принципы чтения и навигации сайтов и книг. Это первая статья из серии, посвященной поиску информации в цифровых продуктах. Еще один материал на тему ^[35].

InVision – Free Web & Mobile Mockup and UI Prototyping Tool ^[36]
Вышла вторая версия онлайн-инструмента проектирования InVision. Теперь это полнофункциональное решение, позволяющее проводить весь процесс работы над задачей, включая тестирование, утверждения и общение с заинтересованными лицами.

Flinto – iPhone and iPad Prototyping ^[37]
Новый онлайн-инструмент для проектирования приложений для iPhone и iPad. Позволяет в простом режиме объединить статические картинки в интерактивный прототип и обсудить их с клиентами и коллегами. Еще один подобный сервис — Brief ^[38].

WireKit — An iPhone App Wireframing Kit ^[39]
Симпатичный шаблон для проектирования iPhone-приложений в Adobe Photoshop.

KSS — Knyle Style Sheets ^[40]
Инструмент для создания интерактивных UI-стайлгайдов. В паре с BDD фронтэнда дает существенно больший контроль при разработке UI больших проектов. Это крутая основа для т.н. живой документации ^[41].

Пользовательские исследования и тестирование

User Research Methods — Has-beens and Stars ^[42]
Статья Jim Ross о том, почему некоторые из методов исследования пользователей приживаются и распространяются, а другие — остаются мало применимыми. Что выдержало проверку временем, а что — осталось в истории.

A Collaborative Lean UX Research Tool ^[43]
Tomer Sharon рассказывает о методе быстрых пользовательских исследований, позволяющих обойтись без тяжелого в составлении и чтении отчета. Такой подход требует полного вовлечения от всех участников процесса, зато помогает ускорить принятие решений и сократить промежуточные артефакты.

UXkids — A blog about children and media ^[44]
Компания UXKids специализируется на пользовательских исследованиях детских интерфейсов. В ее блоге публикуются полезные статьи на эту тему.

Seven Ways to Test the Effectiveness of Icons ^[45]
Jeff Sauro описывает семь способов тестирования пиктограмм в интерфейсах. Они включают себя разные способы описания ассоциаций и метафор, влияние контекста, поиск и восстановление в памяти.

10 Metrics For Testing Website Navigation ^[46]
Jeff Sauro приводит десять метрик, помогающих тестировать навигацию сайта.

PowWow — Schedule User Research ^[47]
Сервис PowWow облегчает планирование пользовательских исследований. Это надстройка над Google Calendar, облегчающая работу с респондентами.

My place or yours? How to decide where to run your next usability test ^[48]
David Travis о лабораторном (в собственной или в сьёмной юзабилити лаборатории), удаленном, полевом юзабилити тестировании. Сильные и слабые стороны каждого из подходов к пользовательскому тестированию.

Seven Tips for Writing Usability Task Scenarios ^[49]
Jeff Sauro дает рекомендации по поводу составления сценариев для юзабилити-тестирования. Они позволят сделать их понятными, непротиворечивыми и проходимыми, что напрямую влияет на репрезентативность полученных в ходе исследования данных.

Eight Lessons in Mobile Usability Testing ^[50]
Tania Lang дает серию полезных советов о тестировании мобильных интерфейсов. Она рассказывает о программных инструментах и оборудовании, а также особенностях проведения таких исследований.

How to Measure Learnability ^[51]
Jeff Sauro пишет о способах оценки обучаемости пользователей работе с интерфейсом. Он предлагает считать ее как изменения юзабилити за период времени, а значит и процесс тестирования должен повторять одну и ту же задачу в разных условиях.

Using Card Sorting To Test Information Architecture ^[52]
FAQ по тестированию информационной архитектуры от Jeff Sauro, отчасти обратный метод к карточной сортировке.

Управление интерфейсными проектами и процессами

Key UX Strategy Methods, Tools, and Deliverables / Communicating UX Strategy ^[53]
В новой колонке UXMatters обсуждается UX-стратегия, ее суть и способы проведения в жизнь. Среди ответов есть мои. Кстати, 8-11 сентября в Атланте пройдет первая конференция по UX-стратегии ^[54]. А в этом выпуске онлайн-журнала было еще несколько полезных материалов на тему:

• Разные модели создания продукта и UX-стратегия для них ^[55].
• Почему крупные компании имеют проблемы в UX и как правильно решать их ^[56].
• Интересная модель UX-стратегии ^[57].

Stop Doing What Youre Told ^[58]
Презентация Stephen P. Anderson, призывающая проектировщиков и дизайнеров критически относится ко всем входящим от клиентов и менеджеров требованиям, они зачастую подменяют задачу решением. Автор дает исчерпывающий список заблуждений и ложных посылов, которые приводят к провалу проектов.

Collaboration Experience ^[59]
Gregg Bernstein из MailChimp рассказывает о примерах организации рабочего пространства, которые улучшают коммуникацию и облегчают обмен проектной информацией. Он перечисляет успешно сработавшие практики в крупнейших компаниях вроде Adobe и Pixar.

Методологии, процедуры, стандарты

Getting Your Web Site’s Structure Right ^[60]
Nathaniel Davis пишет о том, что в разговоре с клиентами и другими заинтересованными лицами уместнее использовать термин «структура сайта» вместо «информационной архитектуры». Для обсуждения прикладных задач этого достаточно чтобы сохранить смысл и при этом не грузить заказчика специализированными терминами.

Кейсы

The Re-Imagining of Microsoft ^[61]
Совместная презентация Albert Shum из Microsoft и Todd Simmons из Wolf Ollins о том, чего стоит поменять продукты и имидж такой компании, как Microsoft. Они рассказывают, что именно произошло за последние 4 года и на каких принципах строилась работа.

Making Medium.com ^[62]
Интереснейший кейс работы над недавно запущенным сервисом Medium от создателя Blogger и Twitter. Это правильный подход к сотрудничеству агентства и продуктовой компании, ну и в целом к созданию новых продуктов с нечетко определенной концепцией.

Design Council — Design for Public Good ^[63]
Большое исследование правительств Великобритании, Финляндии и Дании о том, насколько полезны инвестиции в дизайн государственных услуг. Документ также включает описание методов работы и серию кейсов. Прямая ссылка на PDF ^[64].

Редизайн. Музыка VK ^[65]
Кейс перепроектирования музыкального приложения для Windows 8 от Константина Кичинского. Статья интересна не только пошаговым описанием процесса тюнинга, но и хорошей подборкой паттернов плееров для платформы. Вторая ^[66], третья ^[67] и четвертая часть ^[68].

Тренды

User Experience Benchmarks for Tablets and Smartphones ^[69]
Интереснейшие отчеты Pfeiffer Consulting о том, как используются планшеты, и в первую очередь стремительно растущие 7". Большинство текущих публикаций описывает experience работы с 10"-планшетами, а вот про 7" материалов совсем мало.

Valve looks to sweat levels and eye controls for future game design ^[70]
Valve начала тесты геймплея, основанного на биофидбеке. На видео штатный психолог объясняет базовые принципы работы системы.

First Look: How The Google Glass UI Really Works ^[71]
Подробная презентация того, как устроен интерфейс Google Glass на техническом и пользовательском уровнях. Другие материалы:

• Официальное обучающее видео ^[72].
• Интерфейсные гайдлайны ^[73].
• Подробный обзор всех нюансов использования, включая интерфейс и эргономику ^[74].
• Обзор от Luke Wroblewski ^[75].
• Подробный обзор всех встроенных и сторонних приложений ^[76].

What is Customer Experience Management? Did Pine and Gilmore get it wrong? ^[77]
Термины UX и «юзабилити» слегка девальвировались, когда их начали использовать все кому ни попадя и то же самое сейчас происходит с проектированием услуг. Steven Walden из компании Beyond Philosophy пишет о том, что стоит считать customer experience management, а что нет. Еще одна статья на тему ^[78].

Rethinking Mobile First ^[79]
Fred Wilson говорит, что к идеологии «mobile first» нужно относиться осторожно, поскольку с точки зрения бизнеса распространение и развитие продукта для смартфонов имеет много сложностей, а успешных примеров совсем мало. Он ссылается на статью Vibhu Norby ^[80], который описывает собственный опыт запуска исключительно мобильного продукта.

User Experience Awards 2013 ^[81]
Список и презентации победителей User Experience Awards 2013. Рулят контекстные системы с алгоритмами взаимосодействия (проактивные системы).

Device Motion in Application Design ^[82]
Luke Wroblewski рассказывает о том, как использовать сенсоры пространственной ориентации в современных ноутбуках. В смартфонах это привычное дело, а вот в компьютерах они появились сравнительно недавно и хороших примеров работы с ними почти нет.

Firefox OS Simulator ^[83]
Mozilla опубликовала эмулятор своей мобильной Firefox OS. Это надстройка для Firefox, позволяющая изучить весь интерфейс готовящейся к выходу операционной системы.

Steampunking interaction design ^[84]
Интересный разбор стимпанк-движения с точки зрения проектирования интерфейсов. Статья описывает принципы дизайна таких продуктов и то, как их можно применить в классическом UX.

Книга Дональда Нормана «Дизайн вещей будущего» ^[85]
Институт «Стрелка» выпускает новую книгу Дональда Нормана "Дизайн вещей будущего ^[86]". Доступен отрывок из нее. Кстати, скоро выходит и полностью переработанный «Дизайн привычных вещей» ^[87].

Профессиональное развитие

Sharpening Up Your Soft Skills ^[88]
Mia Northrop перечисляет навыки специалиста по интерфейсам помимо выполнения основных задач, которые делают его более комплексным. И приводит примеры из разных областей, в которых ценятся разные наборы таких навыков.

Проект Futurologists ^[89]
«Футурологи» говорят о будущем UX, его ограничениях и проблемах. Формат необычный — сжатые двухминутные мысли на тему от ведущих отечественных специалистов.

UXBastards ^[90]
Независимый подкаст на коленке. Интервью и частные мнения на актуальные вопросы в сфере проектирования опытного взаимодействия, дизайна пользовательских интерфейсов, создания и развития интернет продуктов и сервисов.

Свежие ссылки можно также отслеживать в одноименной Facebook-группе ^[91].

Автор: jvetrau

Источник ^[92]