Pull to refresh
VK
Building the Internet

Интерфейсный дайджест, апрель-май 2013

Reading time 10 min
Views 11K
Уже три года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-март 2013.

Обзор свежих материалов, апрель-май 2013

Паттерны и Best Practices


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

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

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



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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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


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

Кейсы


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


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

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

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

Тренды


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

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


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



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

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

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

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


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

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

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

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


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

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

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

Свежие ссылки можно также отслеживать в одноименной Facebook-группе.
Tags:
Hubs:
+34
Comments 5
Comments Comments 5

Articles

Information

Website
vk.com
Registered
Founded
Employees
5,001–10,000 employees
Location
Россия
Representative
Миша Берггрен