Уже четыре года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-май 2014.
Паттерны и Best Practices
Baymard: E-Commerce Search Usability — An Original Research Study
Новый отчет от Baymard Institute об исследовании поисковых интерфейсов на сайтах e-commerce. В ближайшее время они начнут публикацию выдержек из отчета. Анонс.
- Первая выжимка, про обработку наиболее популярных поисковых запросов.
- 8 шаблонов дизайна полей с автозаполнением.
Share: The Icon No One Agrees On
«Поделиться/Share» — иконка, о которой никак не могут договориться, Min Ming Lo разбирает наиболее распространенные варианты. В продолжение темы:
- Дмитрий Фадеев об иконке Share: некоторые абстрактные концепции сложно представить при помощи физических объектов.
Radio Buttons: Always Select One?
Kara Pernice из Nielsen/Norman Group глубоко и методично разбирается с радио-кнопками.
Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study
Curt Arlege, задаваясь вопросом: действительно ли так тяжело считываются контурные иконки, провел свое исследование. Результат не совсем однозначный.
Веб-анимация в действии
Перевод статьи Rachel Nabors об анимации в вебе.
Digital Design & User Experience — 7 Profitable Best Practices!
Avinash Kaushik, эксперт веб-аналитики, о UX, мобильной стратегии, электронной коммерции. Много интересного, точные наблюдения, мелкие детали. Например, вместо стратегии «сначала мобильные» он предлагает подход «только мобильные», раздeляет пользователей на две основные поведенческие группы — «направленные на деятельность» и «направленные на размышление».
Call to Idea — Get Inspired!
Хорошо оформленная пополняемая коллекция паттернов проектирования для веба. Логины, регистрации, пустые состояния, формы, списки и многое другое.
When Bars Point Down
Новая тенденция в инфографике — использование столбцовых диаграмм, направленных вниз, вместо традиционного вправо или вверх. Хорошо подходит для иллюстрации негативных либо отрицательных явлений: безработица, смертность и т.п.
5 Tips to Get Donations on Nonprofit and Charity Websites
Janelle Estes из Nielsen/Norman Group о том, как с помощью дизайна повысить сбор пожертвований на благотворительных сайтах.
Понимание пользователя
What Is The Most Underrated Word In Web Design?
Хороший детальный разбор нюансов концепции «аффордансов» от Натальи Постоловской. Она выделяет несколько типов аффордансов и разбирает их на примере мобильного приложения.
Persona Empathy Mapping
Nikki Knox из Cooper Consulting дает инструкцию по использованию методики persona empathy mapping. Она позволяет детальнее описывать персонажей, учитывая нюансы их ожиданий и ощущений.
Eliciting user goals
David Travis о том, как исследовать и описывать цели пользователей. В первой части он разбирает два подхода — интервью и фреймворк «Jobs to be done» Clayton Christiansen.
Facebook Reveals Huge Psychology Experiment on Users
Спорное исследование Facebook по управлению эмоциями, в котором, того не ведая в прошлом году приняло участие почти 700 000 англоязычных пользователей. Изучалось настроение постов пользователей при изменении количества позитивных либо негативных постов в ленте новостей. Само исследование и в целом про манипулирование эмоциями.
“Do you trust me enough to answer this question?” Trust and Data Quality
Caroline Jarrett о том, как создать у пользователей чувство доверия при вводе запрашиваемой информации.
Проектирование и дизайн экранов интерфейса
Google Design
Google представил на конференции I/O свою единую дизайн-идеологию Material Design и единый подсайт на основном домене. Это унифицированный адаптивный подход к интерфейсам на всей линейке устройств и устройств — веб, мобильные, планшеты, носимые девайсы, ТВ, авто. Под «материальным» дизайном они понимают отчасти отсылку к скеоморфизму — не боятся использовать тени, подчеркивать материальность объектов, усиливают роль анимации. Его суть хорошо раскрывает Mathias Duarte, теперь уже вице-президент компании по дизайну, до этого сделавший прорывную WebOS.
Можно сказать, что визуально это развитие текущего стиля Android с акцентом на цветную шапку (вместе с подкраской статус-бара) и круглую дефолтную иконку основного действия. Последняя очень здорово обыграна на разных экранах, например, находясь на стыке шапки и контента по горизонтали и продолжая линию пиктограмм по вертикали. Продолжается активное использование карточек как основы идеологии, становится больше тайлов а-ля metro. Сайдбар остался на месте, несмотря на то что недавнее обновление Google+ многозначительно отказалось от него. Ну и обновился фирменный шрифт Roboto, который судя по всему должен стать основой и для веб-сервисов (концепт Quiz App показывает, как это может быть).
Есть много параллелей с показанным в iOS8: механизм уведомлений с быстрыми действиями, которые сразу видны на экране при появлении; связка смартфона и Chromebook; хаб для сбора данных носимых устройств Google Fit. Стеки окошек используются активнее, диалоги меняются в духе карточек Google Now, наконец-то понятным стал режим выделения/copy/paste. Забавно, что общие для всего интерфейса навигационные иконки назад/на главную/запущенные становятся похожими на фирменные четыре символа PlayStation. Большая коллекция экранов.
Обновленный Android TV также использует унифицированный дизайн. Он же виден в автомобильной платформе, четко прослеживается в часах (кстати, круглая кнопка основного действия как один из главных элементов визуальной идентификации, кажется, пришла именно оттуда). На базе идеологии Material Design выйдет новая версия ключевой ОС — Android L. Причем благодаря инициативе Android One с референсным устройством, количество телефонов с дефолтным интерфейсом увеличится. А дизайн ТВ, авто и часов сторонние производители и вовсе не смогут поменять. Так что после захвата рынка Google плотно занялся решением дизайнерских проблем. И показал одну из сильнейших концепций, работающую на таком огромном масштабе. В продолжение темы:
- Дизайн-гайдлайны (PDF) и обычная страница.
- Видео-презентация идеологии.
- Огромная галерея экранов смартфонного и планшетного интерфейса.
- Фреймворк Polymer, который является основой для адаптивных веб-приложений с единым дизайном. На сайте проекта есть онлайн-конструктор, позволяющий собирать их интерактивные прототипы вживую. И несколько демо-приложений (например, опросник Topeka). Они очень наглядно показывают вся идеология в действии с кучей всевозможных контролов, переходов и состояний.
- Экраны Android TV, также использующего Material Design.
- Собрал смартфонные экраны в Pinterest.
- Обзор интерфейса Android L Developer Preview.
- Сильные дизайнеры в индустрии комментируют Material Design.
- Накануне Google I/O LG выложил видео-презентацию визуального языка для своих смартфонов. Он сильно перекликается с Material Design и iOS7.
Apple iOS 8
2 июня была представлена iOS8, серьезно расширившая возможности платформы. С интерфейсной точки зрения это эволюция прошлогоднего радикального редизайна с добавлением некоторых новых паттернов — круговые меню а-ля Path, работа с виджетами в нотификационном центре, открытые попапов с оставлением предыдущего окна на заднем плане, расширенные возможности взаимодействия приложений через меню шаринга, пиктограммы в диалоговом меню, ограниченное использование карточек (Health), развитие стиля иконок, двухсторонний свайп по строке а-ля Mailbox и другие небольшие детали. Также интересно, как эта стилистика легла на новую MacOS — отличный пример единого визуального языка по всей экосистеме (с нормальными иконками настроек и Сафари! И пока, Lucida Grande).
Одно из самых эффектных — возможности кросс-канального взаимодействия между устройствами, зашитое на уровне ОС. Сценарии перехода между девайсами станут еще более гладкими (если, конечно, все это будет работать как в демонстрации). Ну и теперь iOS является хабом для взаимодействия с авто, умным домом, носимыми устройствами (если все это, конечно, будет поддержано производителями). Список всего анонсированного.
Но самое крутое — это новый язык программирования Swift, очередной шаг к визуальному программированию. Гайдлайны iOS настолько минималистичны, что разработчику не нужен дизайнер. А среда разработки достаточно проста, чтобы дизайнер сам мог создавать конечные решения. Руководство по нему. Как оказалось, к нему приложил руку Bret Victor, один из главных евангелистов визуального программирования (UPD: как оказалось позже, не факт или все-таки факт). Советую всем перечитать или открыть для себя его программную статью Magic Ink. В продолжение темы:
- Галерея скриншотов интерфейса из презентации.
- UI Kit для Sketch.
- Коллекция всех промосайтов Apple к WWDC ’14.
- Записи сессий с WWDC '14.
- Tobias Frere-Jones критикует Helvetica в MacOS.
- Дежурный пост о том, что было заимствовано из Android (и Windows Phone).
- Safari сможет сканировать данные кредитной карты для быстрого ввода в формы.
- Благодаря более тесной связке iOS и MacOS записывать скринкасты можно будет без сторонних приложений.
- Все о Swift в одном месте.
- Элементы пользовательского интерфейса в PSD для дизайна приложений под OS X Yosemite.
- Еще один кит для OS X Yosemite. Более аккуратный, плюс создатель обещает обновлять его в процессе развития бета-версии.
Android Wear
- Roman Nurik рассказывает о кейсе проектирования и дизайна приложения для Android Wear.
- Введение Android Wear.
- Дизайн для Android Wear.
- Обзор Samsung Gear Live на Android Wear. Видео работы.
- 1300 концептов циферблата для конкурса Motorola.
Axure Flat UI Kit — The most comprehensive UI library for Axure
Большая библиотека элементов для Axure в плоском стиле. Для мобильных, планшетов и веба.
Pixate
Многообещающий инструмент для создания мобильных интерактивных прототипов. Возможность визуализации анимаций, как от времени, так и от взаимодействия. Мгновенный «нативный» запуск на устройстве. Симпатичный интерфейс.
InVision
- Мощные дополнения к продукту — автоматический импорт из PSD, AI и .sketch, а также контроль версий.
Adobe Fireworks
Framer.js
Инструмент для прототипирования мобильных приложений Framer, который позволяет «пощупать» сложные взаимодействия и анимации в браузере. Правда, он требует базовых знаний в верстке и скриптах.
- Как Framer помог команде Potluck прокачать продукт эффектными анимациями.
- Создатели Framer.js выпустили Framer Studio — специальный редактор кода, заточенный под мобильное прототипирование. Live preview, интеграция с Фотошопом и Скетчем, кофескрипт на борту. Стоит $50.
Sketch
- Простой способ импорта сайтов в Скетч.
- Плагин для создания всех иконок, необходимых для iOS, на основе одной максимального размера.
- Шаблон, в котором содержатся предустановки всех плюс-минус часто используемых на вебе геометрических размеров.
- Серия статей на Хабре от despoth. Части 2, 3 и 4.
- Сайт с обучающими статьями и ресурсами.
- Приложение для экспорта страниц и нарезки из документов, работающее из командной строки от разработчиков Sketch.app. Инструмент призван облегчить весь процесс дизайна: от скетчей до нарезки, которую использует разработчик. Подробнее.
Design Principles for Wireframing
Chris Bank продолжает серию статей о принципах протипирования.
Bootsketch
Тема для Bootstrap 3 для создания интерактивных wireframes.
Гайдлайны для веб-проектов
Юлия Мархадаева из питерской студии Nimax пишет о подходе компании к созданию дизайн-гайдлайнов. Статья краткая, но в ней отличный пример такого документа (PDF).
Пользовательские исследования и тестирование, аналитика
What If There Was A Bot That Could Detect Ugly Websites?
Компания EyeQuant, предоставляющая одноименный сервис eye tracking-исследований, работает над экспериментальным продуктом, который позволит автоматически определять привлекательность интерфейса и дизайна для пользователей.
Нюансы A/B-тестирования
- Когда следует и когда не следует проводить А/В-тестирование мобильных приложений.
- Русский перевод статьи, заложившей начало этой цепочки.
- Примеры выдвижения гипотез для А/В тестирования на основе анализа дизайна.
- Иллюзорные результаты А/В-тестирования. Kiss Metrics провели математическое моделирование трех стратегий тестирования: «ученый», «нетерпеливый маркетолог» и «реалист».
Empirical Development of Heuristics for Touch Interfaces
Rebecca Baker и Xiaoning Sun пробуют адаптировать классические эвристики Jakob Nielsen и Rolph Molich для тач-интерфейсов. Они проводят серию экспериментов на устройстве и эмуляторе, делая вывод о том, что в целом классический подход работает с оговорками. В продолжение темы:
Perfectly executing the wrong plan (выступление Tomer Sharon)
Замечательное выступление Tomer Sharon на Google I/O 2014 o типичных ошибках стартапов и o Lean User Research.
Визуальное программирование
Новые скрипты
- Скрипт для мгновенного визуального улучшения ввода данных кредитной карты.
- Библиотека для анимирования элементов интерфейса с интересным подходом для описание таких анимаций.
- Подробно про градиенты в SVG.
- Хорошо настраиваемый HTML5-шаблон для сайта или веб-приложения.
- О том, как правильно внедрить поддержку сенсорных экранов. Чтобы жесты, включая мультитач, корректно работали везде: от iOS до Windows Phone.
- Скрипт для постраничной навигации с поддержкой управление с клавиатуры.
- Красивый удобный сервис для генерирования CSS3-анимаций.
- Интересные эффекты перехода между изображениями на фоне страницы.
- Инструмент для подбора и хранения палитр цветов.
- Плагин для jQuery Velocity.js. Небольшой туториал.
- Скрипт для реализации комментариев как на Medium или на старой версии Драйв.ру. Хорошо выглядит, работает без глюков, легко встраивается в любой нормально написанный существующий проект.
- Библиотека для реализации мультитач-жестов с поддержкой большинства десктопных и мобильных операционных систем. Скромный размер библиотеки, примеры, легкость использования и танцующий MCHammer на гитхабе.
- Плеер для гифок, встраиваемый за 2 секунды.
- Хороший инструмент для онлайн-генерации всех возможных видов Favicon.
- Неплохая библиотека для отрисовки диаграмм различной сложности.
Odyssey
Интересный инструмент для журналистов, дизайнеров, путешественников всех мастей и вообще любых творцов. Можно комбинировать карты, изображения, видео и другие медиа- в красивую историю. Библиотека находится в стадии активной разработки и многое еще не реализовано. Исходный код открыт, а разработчики активно ищут помощь для реализации новых фишек.
Метрики и ROI
Choosing the Right Metrics for User Experience
Pamela Pavliscak разбирает комплексный подход к метрикам, которые будут полезны и бизнесу, и продуктовым дизайнерам. Она приводит различные наборы показателей, отслеживаемые в компаниях, и предлагает единый набор, полезный всем участникам продуктовой команды.
Управление интерфейсными проектами, процессами и командами
Building a Design Culture in an ‘End-Up’ Technology World
John Maeda и Becky Bermont о важности формирования дизайн-культуры в компании на примере eBay. Она позволяет формировать правильное отношение к дизайну и развивать всю команду в нужном направлении.
Crossing the Great UX–Agile Divide
Тему agile и UX уже давно обсосали со всех сторон, но Mike Bulajewski заходит по-новому, с точки зрения философии организации труда. Он описывает позицию разработчиков, настаивающих на чистом варианте методологии, хотя она и не совсем годится в таком виде для дизайна.
Everyone is doing strategy right now
Leisa Reichelt из команды GOV.uk когда-то начала писать книгу о UX-стратегии. После завершения большей части она осознала, что изначально ошибалась во многих вещах. И выпустила серию статей как памятник недописанной книге. Продолжение:
- Стратегии не существуют обособленно.
- Стратегия, быстрая и медленная.
- Стратегия, как командный спорт.
- Модульная стратегия.
10 Tips for Acing your Interview at the Whiteboard
Josh Seiden о проведении собеседования дизайнеров с созданием скетчей на маркерной доске.
The Practitioners of Web Information Architecture in Small and Medium Enterprises
Исследование австралийского малого и среднего бизнеса на предмет того, как они справляются с задачами дизайна.
Продуктовый менеджмент и аналитика
Principles of Product Design
Joshua Porter описывает свои 19 принципов продуктового дизайна.
Кейсы
Современные редакционные CMS
- Scoop, новая CMS NY Times.
- Google, возможно, готовит CMS как платформу для сторонних изданий.
- Tempest CMS от Say Media. Обзор от CTO компании.
- Разработчики The Guardian рассказывают о том, как они создавали свой редактор для панели администратора. По их мнению, основная проблема существующих решений (например, TinyMCE) в недостаточных возможностях кастомизации. В результате получился Scribe.
- Команда экспериментальной CMS Editorially, включая Jason Santa Maria и Mandy Brown, становится частью Vox Media. Еще немного про это. Chorus станет еще более космическим.
The container model and blended content
В преддверии запуска нового дизайна The Guardian Nick Haley рассказывает о заложенных в него принципах. Они активно используют идеологию «контейнеров», хорошо описанную Konstantin Weiss из Information Architects. Я был на его презентации в рамках UX Poland на эту тему и он очень подробно описал ее (жаль, все еще нет слайдов). По сути речь идет о наработках одностраничных сайтов, примененных для крупных продуктов. Мы, кстати, с конца прошлого года развиваем свой фреймворк для контент-проектов, основанный на похожей модели — готовлю презентацию о нем к осени. В продолжение темы:
История
The history of Android
Сверхподробная статья с анализом каждой из крупных и минорных версий платформы. Кажется, все экраны всех интерфейсов — просто золото!
Тренды
Эстетика футуристических интерфейсов
Глубокое и детальное исследование визуального и интерфейсного языка киношных, игровых и в целом футуристических интерфейсов. Очень и очень круто.
Software is Eating Hardware — Lessons for Building Magical Devices
Adam MacBeth, который работал над iPod, Jawbone, Pencil, пишет об особенностях создания новых устройств. В продолжение темы:
- Кейс лондонской Berg, которая из дизайнерской студии превратилась в компанию, занимающуюся гаджетами.
Virgin America website says bye-bye to booking wizard, hello to avatars
Virgin America представили бета-версию своего нового сайта, основанную на подходе mobile first. Его запуск получил достаточное обсуждение в среде проектировщиков, так как предлагаются интересные идеи к процессу бронирования авиабилетов. В продолжение темы:
- Отечественная Eviterra пошла по этому пути много лет назад. По сути одностраничная форма, постепенно подгружающаяся по мере ввода информации, очень динамичная по взаимодействию и хорошо фокусирующая пользователя. Жаль, что с точки зрения бизнеса не срослось. Фил Ахназаров и Николай Заярный рассказывали о деталях интерфейса на UX-Среде.
- Юзабилити-исследование сайтов авиакомпаний и агрегаторов от Jeff Sauro.
Flat vs Realism
Эффектный промо-сайт про отличия плоского и реалистичного дизайна в виде истории.
Автомобильные интерфейсы
- Интервью с калифорнийской группой UX-исследователей Mercedes Benz.
- Сайт платформы Android Auto. И обзор ее интерфейса.
Why We Need to Tame Our Algorithms Like Dogs
Dan Saffer об опыте взаимодействия и взаимной эволюции людей и алгоритмов: «Люди должны приручить алгоритмы, подобно тому, как наши предки приручили собаку.»
Salesforce Wear Developer Pack — Open-Source Starter Apps, Toolkits and More
SalesForce запускает собственную достаточно обширную инициативу по созданию приложений для носимых устройств. Они верят в то, что часы, браслеты и очки могут быть полезны для бизнес-приложений. На специальном сайте собраны примеры кода и дизайна для шести устройств.
Профессиональное развитие
A UX Career Framework — Driving Conversations Between Managers and Employees
Ian Swinson, UX-директор Salesforce, рассказывает о своем подходе к управлению каръерой дизайнеров.
Hunting Unicorns — What makes an effective UX Professional
Презентация Patrick Neeman о скиллах продуктового дизайнера.
Beyond User Experience — Onward and Upward
Luke Chambers описывает шесть наиболее популярных и понятных путей для профессионального развития специалиста по интерфейсу. Это продукт- проект-менеджмент, фасилитация, обучение, стратегический консалтинг и создание своего собственного бизнеса.
Why Developers Need to Learn Design
В последние годы много пишут о том, должен ли дизайнер уметь верстать. Stephen Caver выдает обратную мысль о том, что разработчики должны понимать дизайн.
Everything You Need to Know About Design on the Web
Еще одна коллекция статей, инструментов и других ресурсов, в целом по дизайну.
Enabling a Career Shift from User Experience to Service Design
Laura Keller пишет об опыте перехода специалиста от проектирования продуктов к проектированию услуг.
Важные люди в отрасли
Most Creative People 2014: A Q&A With The Designers Of Dropbox
Интервью с командой дизайнеров Dropbox, одной из самых сильных и динамично развивающихся. О процессе, инструментах, общих принципах.
Shum guides Microsoft's design renaissance
Оказывается, полгода назад Albert Shum стал директором по пользовательскому взаимодействию Microsoft. Помимо всего прочего он главный идеолог metro-дизайна, пришедший в компанию из Nike в 2007 году.
UX Design Interviews (Medium)
Еще одна курированная лента на Medium — серия дизайнерских интервью.
Susan Kare
Susan Kare, одна из первых цифровых дизайнеров, автор иконок первого Mac и вообще одна из самых легендарных личностей в продуктовом дизайне, рассказывает о том, как она работала в Apple.
Spotify’s Design Lead on Why Side Projects Should Be Stupid
Жизнь, как проект — интервью с Tobias van Schneider, главой дизайна Spotify.
Материалы конференций
Conferences Roundup — Upcoming Web Design Events (Jun. – Dec. 2014)
Основные международные UX-конференции второй половины 2014 года.
Conference Review: UX STRAT 2013, part 3: Day 2
Продолжение обзора выступлений конференции UX Strat 2013, проходившей 9-11 сентября в Georgia, Atlanta.
ServDes. Conference 2014 Lancaster
Материалы конференции ServDes 2014, проходившей 9-11 апреля в Lancaster, UK. Она посвящена проектированию услуг и customer experience.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну и Павлу Скрипкину.
Автор:
