Pull to refresh
VK
Building the Internet

Интерфейсный дайджест, сентябрь 2013

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


Паттерны и Best Practices


iOS7 Before and After Pics
Коллекция сравнений скриншотов известных и не очень приложений, которые успели обновиться к выходу iOS7. Показаны версии до и после. Также на эту тему:

Why cards are the future of the web
Paul Adams хвалит вид представления информации в виде карточек, популярный на мобильных, как особенно удобный для восприятия и работы. Android повсеместно использует его, а вот Apple, к сожалению, отходит от карточек в iOS7.

How to create mood boards — 40 expert tips
40 советов по созданию мудбордов от Paul Wyatt. Статья описывает задачи их создания, примеры и инструменты.

An Insider's View of Mobile-First Design — Don't Make These Mistakes
Luke Wroblewski описывает несколько полезных интерфейсных приемов при создании мобильных приложений на основе своего опыта работы над Polar. Он говорит об ускорении загрузки данных и вписывании вспомогательных сценариев в основные.

Learning from Board Games
Применяем принципы из дизайна настольных игр для проектирования приложений. Полезная статья Jim Ross, в которой он разбирает паттерны обучения не-цифровых интерфейсов.

Designing Effective Carousels
Kara Pernice, NN/g даёт советы по эффективному дизайну «карусели» с изображениями.

Embedded Mobile Browser Use
Интересные факты о распространенности встраиваемых браузеров на iOS и Android. Они сильно отстают от стандартных браузеров по возможностям, при этом имеют значительную долю в общем количестве просмотров. Luke Wroblewski рекомендует не забывать об оптимизации мобильных сайтов и для них.

Onboarding Techniques and Examples for Your New Users
Krzysztof Kozak описывает несколько примеров дизайна, который облегчает начальную адаптацию пользователей в мобильных и веб приложениях — туториалы, помощники для первого использования, подсказки поверх экрана. Техники давно известные, но примеры хорошие.

Marcin Treder — The User Experience Guide Book for Product Managers
Новая электронная книга от Marcin Treder и UXPin об основах UX для продукт-менеджеров. И еще одна его книга, про UX для стартапов.

Lifting the lid on the iOS 7 UIPicker
Sean Woodhouse разбирает обновленный элемент управления «барабан» в iOS7 и приходит к печальным выводам — он очень слабо проработан и имеет массу интерфейсных проблем. И еще про проблемы в консистентности интерфейса и баги iOS7.

Optimizing UI icons for faster recognition
Алла Холматова об эффективном дизайне иконок: «Иконические (напоминающие реальные обьекты) знаки воспринимаются быстрее и проще, чем символические (отображающие абстрактные концепции). Контурные иконки и иконки с заливкой воспринимаются одинаково эффективно. Текстовые подписи облегчают восприятие.» Несколько опросов на Polar, в которых пользователи за полные иконки. Правда, не очень понятно насколько репрезентативны оба проведенных исследования.

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


Internet Activity Bias Causes Lumpy User Behavior
Очень важный материал от Jakob Nielsen, в котором он говорит об опасности установления причинно-следственной связи между изменениями в продукте и пользовательской активностью на основе только данных веб-аналитики. Он приводит два исследования от Yahoo! и eBay, в которых маркетинговая активность случайно пересекалась с другими событиями.

Email on Mobile Devices
Исследование MailChimp об использовании электронной почты на мобильных устройствах. Jenn Downs рассказывает о том, как они проводили его.

The Who, What, and When of iPhone and iPad Usage
Исследование компании Flurry об использовании iPhone и iPad различными поведенческими группами. Аналогичное исследование об использовании Android-смартфонов и планшетов.

Mad Libs for Designers — Ideating Based on User-Generated Scenarios
Jared S. Bauer и Julie A. Kientz рассказывают о методе совместного с пользователями дизайна, когда они сами описывают поведение системы в зависимости от контекста.

Replacing The User Story With The Job Story
Интересный подход к описанию пользовательских сценариев. Alan Klement предлагает фокусироваться не на персонаже, а на триггере события.

Five Approaches To Creating Lightweight Personas
Пять подходов по созданию облегчённых версий персонажей/профилей пользователей в случае, когда нет возможности провести полноценное исследование. Иметь гипотезу о целевой аудитории, пусть даже основанную на неполной информации — лучше чем ничего.

How to Conduct a Top-Task Analysis
Jeff Sauro описывает метод анализа и выбора наиболее приоритетных сценариев использования продукта. Это, по сути, что-то вроде KJ Method — пользователи выбирают пять наиболее ценных для них задач, которые решает продукт, после чего определяются наиболее востребованные.

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


Interaction cost — Definition
Jacob Nielsen описывает полезную, старую и подзабытую юзабилити метрику — «затраты на взаимодействие». Это очень полезный метод наподобие упрощенного G.O.M.S., позволяющий аргументировать выбор более удобных и понятных решений.

Tools for Mobile UX Design — Adobe InDesign
Steven Hoober рассказывает о том, как он готовит спецификации мобильных интерфейсов в Adobe InDesign. Это в целом неплохой краткий обзор инструмента и его ключевых возможностей для проектировщика. И еще один обзор возможностей Adobe InDesign для проектирования и прототипирования интерфейсов.

Sketch Mirror
Для стремительно набирающего обороты инструмента проектирования и дизайна Sketch выпущено мобильное приложение Mirror, позволяющее просматривать рисуемые макеты на устройстве. Пока это версия для iOS, но готовится приложение и для Android. Еще несколько полезных дополнений к Sketch:

Strikingly — Gorgeous, Mobile-Optimized Sites in Minutes
Сервис Strikingly позволяет быстро собрать шаблонный промо-сайт мобильного или планшетного приложения. Хороший вариант на случай, когда нет времени или ресурсов делать что-то свое.

Adobe Photoshop CC Generator
Вышел официальный плагин Generator для Photoshop CC от Adobe — он облегчает процесс нарезки дизайна мобильных приложений.

Stand In — Prototyping that doesn't suck
Плагин Stand In для Photoshop позволяет легко создавать интерактивные прототипы мобильных приложений на основе PSD-макетов. Marvel — еще один такой инструмент, он синхронизируется с Дропбоксом и показывает прямо на устройствах.

Basiliq от Cloud Castle
Симпатичный скетчевый шаблон для проектирования интерфейсов в Photoshop от компании Cloud Castle. Объекты векторные.

ROCI — Return On Click Investment
Christian Holst из Baymard Institute предлагает интересную концепцию «Return on Click Investment». Это значит, что каждый клик по ссылке на вашем сайте должен как минимум оправдывать ожидания пользователя, иначе доверие к нему теряется.

minimorning — Create a better UX with Axure widget library
Библиотека стенсилов для Axure.

Frontify — Collaboration for Web Designers and Front-End Developers
Еще один сервис для онлайн-спецификации стилистики и поведения интерфейсов. Помогает координировать работу дизайнеров и разработчиков.

Semantic UI — UI is the vocabulary of the web
Аналог Bootstrap для прототипирования интерфейсов прямо в коде.

AppSeed — Turn sketches into functioning prototypes fast
Кикстартеровский проект инструмента для проектирования и прототипирования мобильных интерфейсов. Помимо линковки сфотографированных скетчей он самостоятельно разбирает их на слои и позволяет отредактировать их в Photoshop или прямо на телефоне.

Indigo Studio — Interaction Design Tool
Вышла вторая версия Indigo Studio, многофункционального продукта для проектирования интерфейсов. В дополнение к стандартному набору разных платформ и создания интерактивных прототипов, он позволяет описывать анимации, работать со скетчами, создавать сториборды. Обзор изменений по сравнению с первой версией и видео-обзор.



Google Web Designer
Новый инструмент для дизайнеров от Google. Позиционируется как рекламный, но потенциально в нем можно делать прототипы с анимацией. Правда, пока все дичайше сыро.

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


Mobile Testing Toolbox
Amber DeRosa составила обзор инструментов для модерируемого уделённого мобильного юзабилити тестирования. Это первая часть из серии статей на тему. Ее продолжение.

The 1-page usability test plan
План юзабилити теста от David Travis, который умещается на одной странице. Это отличный способ вовлечь в процесс менеджеров и разработчиков — такой обзорный формат проще дается не-интерфейсным специалистам.

A Book Apart, Just Enough Research
Вышла Just Enough Research, 9я книга серии A Book Apart — введение в дизайн-исследования от Erica Hall. Выдержка из книги с памяткой по проведению интервью.

A Five-Step Process For Conducting User Research
David Sherwin представил короткое и ёмкое руководство по проведению пользовательских исследований, основанное на опыте и практиках компании frog Design.

Метрики и ROI


Measuring Usability ROI for Government Websites
Серия советов Jeff Sauro по улучшению государственных сайтов. Он говорит о том, над чем стоит работать в первую очередь и какие метрики использовать для оценки успешности изменений.

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


User don’t hate change. They hate you
Christina Wodtke об отношении пользователей к изменениям продукта: «Пользователи не ненавидят изменения. Они ненавидят те изменения, которые не приводят к видимому улучшению, но при этом заставляют их переучиваться.» В случае редизайна срабатывает «эффект 9х»: пользователи в 3 раза преувеличивают достоинства текущего дизайна, компании — в 3 раза преувеличивают достоинства нового продукта. Статья Frank Guo на эту же тему.

Three Design Team Leaders on the State of UX
Дизайн менеджеры Groupon, eBay, Lumension рассказывают о подходе к UX в своих компаниях. Особенно заинтересовала позиция Peter Merholz, вице-президент по Global Design в Groupon, со-основатель Adaptive Path. Он говорит уже не о UX, а о Global Design — когда продуктовые и маркетинговые дизайнеры работают вместе в одном централизованном подразделении.

Building a Cohesive Design Team
Jared Spool делится серетами создания сполоченных дизайн-команд. Они должны быть мультидисциплинарными — не ограничиваться одними дизайнерами, но включать и представителей смежных специальностей. Ориентироваться в первую очередь не на должности и позиции, а на умения членов команды. Успешная команда сначала исследует проблему, а не сразу бросается создание за решения. И, последний из секретов — эффективная внутренняя коммуникация.

Процесс дизайна приложений в SoftFacade
Александр Хмелевский рассказывает о процессе проектирования и дизайна приложений, построенном в компании SoftFacade.



The UX Professionals’ Guide to Working with Agile Scrum Teams
Aviva Rosenstein опросила пару десятков специалистов по интерфейсов о том, как им работается в agile-процессе разработки. Получился отличный обзор удачно работающих механизмов и проблем, а также советов по внедрению проектировщиков в такие команды.

How much does it cost to make an app?
Онлайн-калькулятор стоимости всего процесса дизайна и разработки мобильного приложения. Он в динамике показывает зависимость цены от требований к платформам, функциональности и дизайну. Считается все это для пула аутсорсеров Ooomf, но подход в любом случае интересный.

Dan Brown — Designing Together: The collaboration and conflict management handbook for creative professionals (Voices That Matter)
Этим летом вышла «Инферно» Дэна Брауна, но из-за рекламной шумихой почти незамеченным оказался выход книги его полного тёзки Dan Brown из Eight Shapes. Designing Together — книга об оргаинзации командной работы дизайнеров: как решать рабочие конфликты, каковы признаки сложных ситуаций, секреты работы с дизайнерами обладающими различными типами личности. Интервью о ней.

Кейсы


Унификация интерфейсов: Опыт e-commerce-проектов Mail.Ru
Мои коллеги из команды e-commerce в Mail.Ru здорово описали процесс унификации продуктов, который они провели за последние полтора года. В ходе него они предложили единые подходы к созданию сервисов в вебе и на мобильных.

Smaller, Better, Faster, Stronger
Шикарнейший кейс Chrus Yiu и Sarah Fink о том, как создавались те впечатлившие всех дизайн-гайдлайны британского правительства. Они подключились к проекту в 2006 году и хотя поначалу он шел с трудом, со временем им удалось убедить чиновников и гос.служащих в правильности своей digital-стратегии.

The Truth About Marissa Mayer: An Unauthorized Biography
В неофициальной биографии Мариссы Майер есть очень интересный кусок, в котором рассказывается о процессе редизайна почты и главной страницы Yahoo!.. Листайте до заголовка “Who is this woman and what is she actually saying?” во второй половине материала. Правда, после истории с редизайном логотипа на нее обрушилась критика проф.сообщества.

How Facebook secretly redesigned its iPhone app with your help
Facebook в своем обновлении приложения для iOS7 отказался от сайдбара в пользу классической айфоновской навигации в нижней панели, при том что сайдбар популяризировали именно они. В статье The Verge интересный рассказ о том, почему они это сделали и как они смогли настроить процесс тестирования экспериментальных решений на процент аудитории в нативном приложении. Интересно, пойдет ли сейчас массовая волна отказа от сайдбара — более высокий экран современных айфонов дает возможность снова использовать нижнюю панель. При этом дотянуться пальцем до кнопок в ней куда проще, а свайп слева направо, которые многие применяют для быстрого открытия сайдбара, можно оставить для других действий.

Designing for iOS7 — Perils & Pluses
Отличнейший кейс редизайна приложения Polar для iOS7. Luke Wroblewski наглядно показывает, почему при применении любых официальных гайдлайнов нужно думать своей головой — слепое использование может вести к неэффективным для конкретной задачи решениям. И еще пара материалов на тему:

Проектирование интерфейсов в MMORPG Skyforge
Наши коллеги из игрового подразделения описывают категоризацию игровых интерфейсов и рассказывают о своем выборе подходящей модели для новой игры Skyforge.

Fine-tuning user research to drive innovation
Очень интересный кейс пользовательского исследования сложного бизнес-инструмента, процесс работы в котором сам по себе меняет рабочий процесс сотрудников и поэтому накладывает уйму ограничений и сложностей на процесс изучения пользователей.

Fantasy Interactive — USA Today Case Study @ Offfest Barcelona
История редизайна новостного портала USA Today от Fantasy Interactive. Ребята в прошлом году приезжали с рассказом в Москву и был аншлаг. Их собственное видео об этом кейсе.



История


An Oral History Of Apple Design
Отличнейшая серия публикация Fast Co.Design об истории создания устройств и ОС Apple. В статьях уйма имен людей, которые определяли дизайн компании с начала 90х. Также будет интересна выдержка из книги Hartmut Esslinger, основателя компании frog design и автора «белоснежного» визуального языка пром.дизайна Apple.

The 17 Designs That Bell Almost Used for the Layout of Telephone Buttons
История юзабилити-тестирования кнопочных телефонов 60-летней давности. Как компания Bell Labs выбирала оптимальное расположение кнопок.

Тренды


Проектировщик интерфейсов: кто именно нужен компаниям
Павел Оларь провел исследование российского рынка вакансий для позиции «Проектировщик интерфейсов». Ищут в основном либо проектировщиков с навыками графического дизайна, либо графических дизайнеров, владеющих основами проектирования. Для тех, кто хочет попробовать себя в этой профессии: «Если умеете рисовать, то начинайте читать книги и статьи по проектированию. Владеете теорией — осваивайте азы Photoshop.»

From Paths to Sandboxes
Stephen P. Anderson готовит новую презентацию, посвященную альтернативному взгляду на проектирование сервисов. Он предлагает отказаться от работы по оптимизации конкретных сценариев и создавать площадку с простыми правилами работы, которую пользователи могли бы использовать так как им это больше подходит. Такие сервисы имеют значительно большую вовлеченность и гибкость — почти как игровые миры.

Enabling new types of web user experiences
Scott Jenson размышляет в блоге W3C о том, каким должен быть мобильный веб, для того чтобы его не задавила волна нативных приложений. Он рассматривает три сценария, для которых нужны системные решения — дешевая замена нативных приложений, связка с объектами реального мира и взаимодействие нескольких устройств.

Content as Medium
Matt Gemmell пишет о том, что с появлением планшетов все заигрались в обертки для контентных сервисов и приложений, забыв про то что пользователь приходит в первую очередь за контентом. Он говорит, что медиа — это сам контент, а не устройство на котором тот представлен.

The International Design for Experience Awards by UX Magazine
Сайт UX Magazine запускает свою премию за лучший UX. Планируются два десятка номинаций и очень представительное жюри.

Ученые протестировали первую нейросвязь между двумя людьми
Будущее сегодня — лабораторный эксперимент показывает прямой нейроинтерфейс «Человек-человек». Идеи прямого контроля за чужим телом, ярко выраженные в фильмах типа Геймер или Суррогаты становятся реальностью. Видео.



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


Philosophy of Interaction
Базовая теория для практиков — как использовать философские теории в процессе проектирования интерактивных продуктов. Подробный анализ значения терминов Interaction (процесс) и Interactivity (свойство) с разных позиций. С точки зрения Феноменологии, Здравого смысла, Когнитивных процессов в общем и Процесса восприятия в частности. Отдельно стоит обратить внимание на ссылки на литературу и научные работы по теме.

Your Boss Works for You
Fred Beecher рассказывает о своём начальном опыте перехода из UX-консультантов в UX-менеджеры. Много полезного о том, как помогать своей команде.

Design thinker Don Norman on his stealth startup, Apple vs. Android vs. Microsoft, and experience design
В этом году исполняется 25 лет книге «Дизайн привычных вещей» Дональда Нормана, а 5 ноября выходит ее раширенное и дополненное издание. В свежем интервью с Доном можно узнать, что поменялось в дизайне за это время, его мнение о текущих трендах. Кстати, к новому изданию Amazon делает скидки на бумажные версии его книг.

Материалы конференций


UX Strategy 2013
Презентации с конференции UX Strategy 2013, проходившей 9-11 сентября в Атланте. Обзор нескольких мастер-классов и обсуждение мероприятия участниками.

Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну.
Tags:
Hubs:
+39
Comments 4
Comments Comments 4

Articles

Information

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