- PVSM.RU - https://www.pvsm.ru -

Интерфейсный дайджест, июнь 2013

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

Обзор свежих материалов, июнь 2013

Паттерны и Best Practices

In Defense of Floppy Disks — The Vocabulary of the Interface [2]
Иконку сохранения в виде дискеты ругают все кому не лень. Но небольшое исследование Lis Pardi показывает, что она отлично работает даже для молодой аудитории, которая не сталкивалась с физическим прообразом.

The State Of Responsive Web Design [3]
Сверхполезный обзор текущего состояния технологий адаптивного дизайна от Stéphanie Walter. Она рассказывает о механизмах показа изображений и другого медиа-контента, компоновки страницы, работы с навигацией и методами ввода, оформления таблиц.

Color and user experience [4]
Ashley Karr кратко описывает нюансы использования цвета в интерфейсах. Она также приводит значения конкретных цветов в американской культуре.

Three Reasons We’ve Outgrown Mobile Context [5]
SuAnne Hall сводит вместе идеи Luke Wroblewski и Karen McGrane и пишет о том, что понятие «мобильного контекста использования» устарело и опираться на него нельзя. В статье много полезной статистики и примеров того, почему разделения на «мобильный» и «основной» контент и функционал быть не должно.

Findability is a Content Problem, not a Search Problem [6]
Mark Baker пишет о том, что проблемы при поиске пользователями нужной информации касаются в первую очередь организации контента, а не работы поисковых инструментов. Он делает обзор основных концепций и теорий в этой области и подкрепляет выводы статистикой.

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

Sense-making in Cross-channel Design [7]
Jon Fisher, Simon Norris и Elizabeth Buie опубликовали подробнейшее теоретическое исследование проблемы взаимодействия пользователя с продуктом сразу по нескольким каналам. Они предлагают интересную классификацию каналов и проводят небольшой эксперимент для подтверждения своих гипотез.

Google’s Dead-Simple Tool For Making UX Decisions — 2 Jars Of Marbles [8]
Fast Co.Design рассказывает о простом и очень наглядном методе проектирования интерфейсов, применяемом дизайн-командой Android в Google. Чтобы нивелировать любой негативный момент в интерфейсе нужно дать пользователю три позитивных вещи, так что дизайнеры стараются поддерживать этот баланс.

Content Sharing and Social Networking Buttons [9]
Небольшое исследование того, как и в каких случаях пользователи делятся ссылками с друзьями. Для одних ситуаций востребованы стандартные кнопки соц.сетей, в других случаях люди отправляют их по почте.

Usability for Senior Citizens [10]
Обзор проблем во взаимодействии пожилых людей с современными сайтами и приложениями от Якоба Нильсена.

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

iOS 7 [11]
10 июня была представлена iOS7, кардинально изменившая внешний вид платформы и усилившая важность интерфейсной анимации. Те кто вкладывался в metro-/flat-design не прогадали, хотя некоторая адаптация все равно потребуется. Полезные материалы:

Designing Down from Science Fiction — A Staged Approach [19]
Dan Turner в деталях описывает метод проектирования интерфейсов через концепции научно-фантастических фильмов, описанный в книге Nathan Schedroff и Chris Noessel «Make It So». Это отличный способ «продажи» сложных идей и необычных концепций, а также хорошая вариация на тему дизайн-мышления.

Jetstrap — The Twitter Bootstrap Builder Tool [20]
Онлайн-конструктор Jetstrap позволяет на лету собирать прототипы интерфейсов на основе фреймворка Bootstrap. Бесплатна работа только с одним проектом.

Hosting a Page Description Workshop [21]
Page Description Diagrams — это подзабытый инструмент проектирования конкретных экранов интерфейса, который оказался слишком абстрактным в качестве проектного артефакта. Но это отличный инструмент для сбора требований и Colin Butler с Andrew Wirtanen описывают формат рабочей сессии для их построения.

Tools for Mobile UX Design [22]
Steven Hoober описывает свои инструменты для проектирования мобильных приложений. Это программы, канцелярия, примеры спецификаций и других артефактов. А Lennart Hennings пишет о скетчах мобильных интерфейсов [23].

Five Ways To Prevent Bad Microcopy [24]
Bill Beard пишет о том, как готовить хорошие микро-тексты в интерфейсах — подписи к формам, сообщения об ошибках и т.п.

User Inter Faces — Sample avatars for interface design [25]
Сервис User Inter Faces поможет с аватарами для прототипов и дизайн-макетов. Он генерирует матрицу пользователей с настраиваемыми размерами.

Fries — Create sexy Android-like UI using HTML, CSS, and JavaScript [26]
Фреймворк Fries позволяет собирать Android-приложения на HTML. Это быстрый способ прототипирования на основе дефолтного дизайна ОС.

Starters Guide to iOS Design [27]
Полезная памятка для начинающих в проектировании и дизайне приложений для iPhone и iPad от Ben Taylor.

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

Secrets From Facebook's Mobile UX Testing Team [28]
Nate Bolt, руководитель исследовательской команды Facebook, рассказывает о том как происходят пользовательские исследования в компании. Они делают ставку на удаленные исследования — это позволяет застать пользователя в нужный момент в естественной среде. В дополнение рассказ о том, как тестировали Facebook Home [29].

Using Paired Interviews to Understand the Current and Future Perspectives of Teenagers [30]
Catalina Naranjo-Bock описывает метод пользовательских исследований с помощью парных интервью. Она рассказывает о своем исследовании подростков и том, как такой подход сработал на практике.

Метрики и ROI

Design ROI — Measurable Design [31]
Шикарнейший исследовательский проект студентов финского университета Aalto, посвященный ROI проектирования и дизайна. Он начинается с детального исследования текущего состояния отрасли и предлагает конкретные методы оценки. Также недавно вышло исследование Watermark Consluting [32], которое показывает, что крупнейшие компании были более успешными на рынке при условии серьезных инвестиций в customer experience.

Associating UX Changes to the Net Promoter Score [33]
Jeff Sauro подробно описывает, как начать считать и анализировать метрику Net Promoter Score для продуктов компании. Крайне полезная пошаговая инструкция.

Measuring The Visual Appeal of Websites [34]
Jeff Sauro описывает методы оценки эстетической привлекательности интерфейса продукта. Это особенно интересно в свете всеобщей минимализации визуального дизайна.

10 Things to Know About the System Usability Scale (SUS) [35]
Jeff Sauro описывает особенности использования метрики SUS (System Usability Scale).

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

Design in Teams [36]
Интереснейший блог Guido Stompff о современных продуктовых командах, в которых сложный процесс коллективного рождения и развития идей дает куда больший результат, чем работа мифического гения-одиночки, воспеваемого в народе. Автор готовил к защите научную работу и публикует материалы из исследования к ней.

Replacing «Requirements Gathering» with Something That Works [37]
Отличная статья Jared Spool о том, почему этап сбора требований из классических схем процесса проектирования интерфейсов — это миф и самообман. Он полагается на то, что заказчик точно и исчерпывающе знает требования к продукту и они не меняются по ходу проекта, что обычно не так. А Scott Sehlhorst подсказывает, как уйти от карго-культа в описании требований [38].

Управление длинными UX-проектами [39]
Обзор проблемных ситуаций в проектах по проектированию интерфейсов, справедливый для сервисной компании от Ильи Бельника. Правда, для продуктовой компании ситуация сильно отличается — об этом говорится в предыдущей ссылке.

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

Softer side of change [40]
Mike Clark предлагает совместить теорию реинжиниринга бизнес-процессов и дизайн-мышление для того чтобы предлагать не просто интересные идеи, но и конкретные планы изменений в компаниях.

The unbearable lightness of Design Thinking [41]
Guido Stompf размышляет о том, почему дизайн-мышление так восхваляется дизайнерами и зачастую вызывает насмешки у топ-менеджмента. Он описывает четыре пути поиска продуктовых идей и решений, которые востребованы разными участниками проектной команды и то, насколько они различаются в деталях и мировоззрении.

Thirteen Tenets Of User Experience [42]
Robert Hoekman Jr предлагает свои 13 принципов/заповедей хорошего UX. Причем это не конкретные эвристики и паттерны, а скорее общепрофессиональные установки.

Design principles to choose the right ideas [43]
Henk Wijnholds показывает, как можно использовать дизайн-принципы компании на практике. Они позволяют проверить, насколько новые функции и их интерфейсная реализация соответствует духу продуктовой стратегии.

Book Excerpt: Design For Care [44]
Отрывок из книги Peter H. Jones «Design for Care: Innovating Healthcare Experience», которую недавно выпустили Rosenfeld Media. Информация о книге [45].

Кейсы

Google Visual Assets Guidelines [46]
Команда дизайнеров Google выложила на Behance некий прообраз гайдлайна по использованию дизайн-стилистики и оформлению интерфейсов компании. Вторая часть [47].

История

A brief history of content strategy [48]
История дисциплины контент-стратегии, интерес к которой активно растет в последние годы. Впервые заговорили о ней в 1997-1998, а в 2009 году произошел взрыв интереса.

Тренды

Jason Grigsby — The Immobile Web @ An Event Apart [49]
Заметки о выступлении Jason Grigsby, посвященному современным телевизионным интерфейсам. Хороший обзор современных трендов в отрасли и ее текущего состояния.

5 Reasons Why Your Email Marketing MUST be Designed for Mobile [50]
Craig Tomlin рекомендует уделять особое внимание виду писем рассылки на мобильных. Он приводит много статистики говорящей о том, что это направление стремительно растет и описывает проблемы текущих технологических решений.

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

Автор: jvetrau

Источник [52]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/dizajn-interfejsov/37727

Ссылки в тексте:

[1] апрель 2010-май 2013: http://www.jvetrau.com/digest/

[2] In Defense of Floppy Disks — The Vocabulary of the Interface: http://boxesandarrows.com/icon-survey-results/

[3] The State Of Responsive Web Design: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

[4] Color and user experience: http://interactions.acm.org/blog/view/color-and-user-experience

[5] Three Reasons We’ve Outgrown Mobile Context: http://www.uxmatters.com/mt/archives/2013/06/three-reasons-weve-outgrown-mobile-context.php

[6] Findability is a Content Problem, not a Search Problem: http://everypageispageone.com/2013/05/28/findability-is-a-content-problem-not-a-search-problem/

[7] Sense-making in Cross-channel Design: http://journalofia.org/volume4/issue2/02-fisher/

[8] Google’s Dead-Simple Tool For Making UX Decisions — 2 Jars Of Marbles: http://www.fastcodesign.com/1672657/google-s-dead-simple-tool-for-making-ux-decisions-2-jars-of-marbles

[9] Content Sharing and Social Networking Buttons: http://uxmag.com/articles/content-sharing-and-social-networking-buttons

[10] Usability for Senior Citizens: http://www.nngroup.com/articles/usability-for-senior-citizens/

[11] iOS 7: http://www.apple.com/ios/ios7/

[12] Гайдлайны по переводу приложения на iOS7: https://developer.apple.com/library/prerelease/ios//design/index.html#//apple_ref/doc/uid/TP40013289

[13] Версия в публичном доступе: http://www.slideshare.net/evgenybelyaev16/transition-guide

[14] Версия в публичном доступе: http://www.slideshare.net/evgenybelyaev16/mobile-hig-22784587

[15] Версия в публичном доступе: http://www.slideshare.net/evgenybelyaev16/ui-kit-uicatalog

[16] UI Kit от Teehan+Lax: http://www.teehanlax.com/tools/ios7/

[17] UI Kit для OmniGraffle: http://stenzils.com/

[18] Пиктограммы для использования в приложениях: http://www.pixeden.com/media-icons/tab-bar-icons-ios-7

[19] Designing Down from Science Fiction — A Staged Approach: http://uxmag.com/articles/designing-down-from-science-fiction-a-staged-approach

[20] Jetstrap — The Twitter Bootstrap Builder Tool: https://www.jetstrap.com/

[21] Hosting a Page Description Workshop: http://uxmag.com/articles/hosting-a-page-description-workshop

[22] Tools for Mobile UX Design: http://www.uxmatters.com/mt/archives/2013/06/tools-for-mobile-ux-design.php

[23] о скетчах мобильных интерфейсов: http://uxdesign.smashingmagazine.com/2013/06/24/sketching-for-better-mobile-experiences/

[24] Five Ways To Prevent Bad Microcopy: http://uxdesign.smashingmagazine.com/2013/06/17/five-ways-prevent-bad-microcopy/

[25] User Inter Faces — Sample avatars for interface design: http://uifaces.com/

[26] Fries — Create sexy Android-like UI using HTML, CSS, and JavaScript: http://jaunesarmiento.me/fries/

[27] Starters Guide to iOS Design: http://taybenlor.com/2013/05/21/designing-for-ios.html

[28] Secrets From Facebook's Mobile UX Testing Team: http://www.fastcolabs.com/3007979/open-company/secrets-facebooks-mobile-ux-testing-team

[29] как тестировали Facebook Home: http://www.fastcolabs.com/3008397/open-company/how-facebook-did-ux-testing-facebook-home-fewer-60-people

[30] Using Paired Interviews to Understand the Current and Future Perspectives of Teenagers: http://www.uxmatters.com/mt/archives/2013/06/using-paired-interviews-to-understand-the-current-and-future-perspectives-of-teenagers.php

[31] Design ROI — Measurable Design: http://issuu.com/anttipitkanen/docs/droi_measurabledesign_2012_issuu_en/1

[32] исследование Watermark Consluting: http://www.watermarkconsult.net/blog/2013/04/02/the-watermark-consulting-2013-customer-experience-roi-study/

[33] Associating UX Changes to the Net Promoter Score: http://www.measuringusability.com/blog/ux-changes-nps.php

[34] Measuring The Visual Appeal of Websites: http://www.measuringusability.com/blog/visual-appeal.php

[35] 10 Things to Know About the System Usability Scale (SUS): http://www.measuringusability.com/blog/10-things-SUS.php

[36] Design in Teams: http://designinteams.com/

[37] Replacing «Requirements Gathering» with Something That Works: http://www.uie.com/articles/requirements_gathering/

[38] как уйти от карго-культа в описании требований: http://tynerblain.com/blog/2013/06/25/cargo-cult-requirements/

[39] Управление длинными UX-проектами: http://www.cmsmagazine.ru/library/items/usability/management-long-project/

[40] Softer side of change: http://bridging-the-gap.me/2013/06/10/softer-side-of-change/

[41] The unbearable lightness of Design Thinking: http://designinteams.com/2013/06/15/the-unbearable-lightness-of-design-thinking/

[42] Thirteen Tenets Of User Experience: http://uxdesign.smashingmagazine.com/2013/06/21/13-tenets-user-experience/

[43] Design principles to choose the right ideas: http://www.henkwijnholds.com/design-principles-choose-ideas/

[44] Book Excerpt: Design For Care: http://uxmag.com/articles/book-excerpt-design-for-care

[45] Информация о книге: http://rosenfeldmedia.com/books/design-for-care/

[46] Google Visual Assets Guidelines: http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077

[47] Вторая часть: http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309

[48] A brief history of content strategy: http://firehead.net/2013/06/a-brief-history-of-content-strategy/

[49] Jason Grigsby — The Immobile Web @ An Event Apart: http://www.lukew.com/ff/entry.asp?1742

[50] 5 Reasons Why Your Email Marketing MUST be Designed for Mobile: http://www.usefulusability.com/5-reasons-why-you-must-design-email-for-mobile/

[51] одноименной Facebook-группе: http://www.facebook.com/home.php?sk=group_173955382668026

[52] Источник: http://habrahabr.ru/post/185182/