Уже почти пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-декабрь 2014.
Паттерны и Best Practices
Новое о принципах дизайна
- Принципы дизайна Marissa Mayer.
- Code Academy толково описывают принципы, которыми они руководствовались при недавнем редизайне.
- Вторая часть принципов Code Academy.
Современные подходы к рекламе
User Flow Patterns
Видео-коллекция паттернов, посвященная интерфейсной анимации и мелким деталям взаимодействия.
Formstack Form Conversion Report
Исследование по конверсии в формах за 2014 от Formstack. Интересный отчет для тех, кто хочет соизмерить свои результаты со «средними по больнице». Прямая ссылка на PDF.
Showing Passwords on Log-In Screens
Luke Wroblewski о том, почему и как нужно показывать пользователям пароли в мобильных приложениях.
Using decision tables to support contextual targeting in your UI
Harry Brignul предлагает методику определения мест в интерфейсе и подходящего момента для того чтобы спросить у пользователя информацию или предложить доп.услугу. В целом похоже на то, о чем говорит Dan Saffer в «Microinteractions». В продолжение темы:
The Art of alt — Writing Great Descriptive Text For Images
Советы по написанию альтернативных текстов к изображениям от Dudley Storey.
Timing Guidelines for Exposing Hidden Content
Aurora Bedford рекомендует временные задержки при отображении контента, показываемому по наведению курсора мыши (мага-меню, каскадные меню, дополнительный контент и т.п.).
- Показать визуальный фидбек 0,1 с после наведения мыши в интерактивную область.
- Подождать 0,3-0,5 с (чтобы избежать случайного наведения).
- Если курсов все-ещё находится в области взаимодействия, показать скрытый контент в течение 0,1 с.
- Показывать контент, пока курсор мыши не покинет интерактивную область дольше, чем на 0,5 с (чтобы избежать случайного скрытия контента).
Are Mobile Websites Truly Less Usable Than Desktop Websites?
Jeff Sauro исследует юзабилити мобильных и традиционных веб-сайтов и обнаружил интересное явление — мобильные версии иногда выигрывают по метрикам простоты использования.
Новое о бургерном меню
- Выдержки из выступления Mike Stern из Apple на WWDC2014, в котором он подробно высказывается на тему бургерного меню.
- Еще один эксперимент Exis Web на тему.
- Еще один эксперимент от Redbooth.
Новое о письмах рассылки
- Кусок из книги Jason Rodriguez «Professional Email Design». Очень базовые вещи, но все равно полезно с учетом ограничений среды на все что только можно.
- Сама книга Professional Email Design.
The Magnifying-Glass Icon in Search Design: Pros and Cons
Исследование Kathie Sherwin о дизайне полей поиска и об использовании иконки с Лупой. Выводы: следует визуально выдеалять поле поиска; иконка с лупой достаточно различима пользователями и использовать на кнопке надпись «Поиск» уже не обязательно; сама иконка должна быть как можно более простой, крупной и контрастной. В продолжение темы:
- Эксперимент компании Viget.
- Katie Sherwin о типичных ошибках проектирования настраиваемого поиска на сайтах.
Ode to a Microinteraction: Amazon Kindle’s «Time to Read»
Dan Saffer восторгается микро-взаимодействием «Time to Read» в Amazon Kindle.
Top 3 IA Questions about Navigation Menus
Kathryn Whitenton кратко и емко отвечает на три частых вопроса о навигации. Сколько категорий оптимально, нужно ли сортировать их по алфавиту, отказываться ли от эффектов наведения курсора с учетом распространения тач-ноутбуков и планшетов.
Понимание пользователя
Общая психология (курс лекций МГУ)
Полный курс лекций по современной общей психологии. Очень качественный материал. Позволяет начать изучать психологию человека
Designing for Different Online Personality Types
Liraz Margalit приводит свою классификацию поведенческих типов пользователей сайтов электронной коммерции. Она выделяет 5 моделей поведения: «хочу всё и сразу»; ориентированные на определенный бренд; рациональные посетители; «оптимизаторы»; satisfiers.
Phones Aren’t Flat — Designing for Real People in Diverse Contexts
Еще одна статья Steven Hoober об особенностях использования мобильных — как особенности использования в различных ситуациях и людьми с ограниченными возможностями ухудшают привычные предустановки вроде минимальной зоны нажатия. Он также отмечает проблемы с жестами из-за края экрана — учитывая популярность чехлов, зачастую их невозможно выполнить.
At 90, She’s Designing Tech For Aging Boomers
В IDEO работает 90-летняя дизайнер Barbara Beskind — она помогает лучше понимать пожилую аудиторию.
Inside the Largest Virtual Psychology Lab in the World
Riot Games использует big data и эксперименты с интерфейсом для изменения поведения миллионов игроков League of Legends. Сейчас это, наверное, одна из самых больших исследовательских площадок. Размах экспериментов не сравним с традиционными университетскими психологическими исследованиями. Просто жемчужина.
Use-Dependent Cortical Processing from Fingertips in Touchscreen Phone Users
Исследование пользователей смартфонов с сенсорным экраном от A.D.Gindrat, M.Chytiris, M.Balerna, E.M.Rouiller и Arko Ghosh, которое подтверждает, что их использование меняет наш . Ситуация схожа со спортсменами и музыкантами. Ждем исследование, подтверждающее рост пальцев от больших экранов.
Evidence Based Design Journal
Толковый электронный журнал на тему исследования поведения пользователей в разных контекстах. Он понимает дизайн в достаточно широком смысле, но многое применимо и к нашей работе.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Running a CX Journey Mapping Design Session
Методичка по созданию customer journey map от Mike Alber, использовавшаяся для его мастер-класса в Oracle. В презентации очень и очень круто расписаны метрики эффективности дизайн-решения, которые можно отслеживать и улучшать.
Designing Digital Strategies, part 2 — Connected User Experiences
Sofia Hussain пишет серию статей о цифровой стратегии и методике ecosystem map (карта экосистемы). Напоминает CJM, но без четко определенной последовательности шагов и без оси времени.
Проектирование и дизайн экранов интерфейса
Skala Bjango
Компания Bjango в 2014 году занималась развитием своего современного инструмента для дизайнеров Skala (так называлась их утилита для показа макета из Photosop в телефоне). Они регулярно выкладывают отчеты об изменениях и вот один из свежих с кусочками интерфейса.
UX App — Prototyping and Interaction Design for User Experience Experts
Новый инструмент для интерактивного прототипирования интерфейсов. Совместная работа с прототипом, неплохой визуальный редактор, библиотека компонентов, мультиэкранные прототипы, анимации — стандартный набор. Ставка сделана на возможность создания сложных интерфейсных решений, с помощью визуального «программирования» — конструктора этаких процедур, условий и переходов.
Gravit
И еще один современный инструмент для дизайнеров. Изначально он развивался как набор десктопных приложений, но в связи с дороговизной такого подхода переходит в браузер.
Para
Инструмент для параметрического «прототипирования» иллюстраций. Вы создаете векторные формы с помощью привычных инструментов, а потом можете добавить им интерактивное распределение и задать другие параметры. Есть вступительное видео, чтобы было понятнее.
Markly
Markly подключается к Photoshop и Sketch для Windows и Mac и облегчает подготовку спецификаций к макетам. Обещает автоматическое обновление документов при изменении макетов.
Cinematic Continuity on UI Design
Серия статей от Claudio Guglieri, дизайн-директора Fantasy Interactive, о применении принципов кинематографии в дизайне интерфейсов. В первой части рассказывается о принципе непрерывности.
Ultimate Guide to Prototyping
144 страницы кейсов, разборов и советов от UXPin по протипированию интерфейсов. Уроки для Photoshop & Sketch на сладкое.
Новое для Material Design
- Tim Smith показывает процесс дизайна иконки приложения Inbox, прошедшей 250 итераций. Опять же привлекались аутсорсеры — известная студия B-Reel помогала с концептами.
- Неофициальный редизайн Dropbox.
- Официальный редизайн Trello.
- CSS-фреймворк Materialize.
Новое для iOS8
- Большой бесплатный шаблон для дизайна iPhone-приложений для Photoshop и Sketch от Invision и UI8. Дизайн отличается от базового, но все равно полезен.
Новое для Apple Watch
- Концепты известных приложений от Huge Inc.
- Один из редких концептов серьезного productivity-приложения, а не просто адаптация Foursquare.
Новое для Sketch
- Плагины для Sketch.
- Плагин с палитрой цветов material design.
- Сообщество в Slack.
- Еще одна коллекция ресурсов.
- Плагин позволяет использовать CSS при определении стилей слоев.
Новое для Framer
- Patrick Wong из Lyft о прототипировании с помощью связки Framer и Pixate.
- Framer теперь позволяет расшаривать работающие прототипы в вебе.
Сравнения инструментов
Пользовательские исследования и тестирование, аналитика
Predictive Customer Analytics 101: The Correlation
2 февраля выходит новая книга Jeff Sauro «Customer Analytics for Dummies». В его блоге выложена глава, посвященная корреляции. Книга на Amazon.
The Guide to Usability Testing
Свежая книга от UXPin с гайдом по юзабилити-тестированию и поддержке дизайн-решений.
17 Usability Testing Myths and Misconceptions
Jim Ross развенчивает 17 мифов о юзабилити-тестировании.
Why You Should Do a Dry Run Every Time You Test Remotely
Хорошая статья про пользу пилотного юзабилити-тестирования — для того, кто в этом сомневается.
Native Tap
Сервис Native Tap для тестирования приложения на разных устройствах.
Learning from Closed Card Sorts with Different Inputs
Kevin Sheldon протестировал и сравнил три подхода к карточной сортировке — заданные категории и необходимость вспомнить элементы интерфейса; заданные категории и элементы интерфейса и необходимость распределить их; уже распределенные элементы интерфейса по категориям и возможность внести изменения. Третий вариант дал лучшие результаты, хотя почему-то не приводится еще один популярный подход — заданные элементы интерфейса и возможность определить свои категории.
How Confident Do You Need To Be In Your Research?
Jeff Sauro приводит примеры доверительных интервалов для разных ситуаций и задач.
Comprehensive review of UX tools for your website
Неплохой список инструментов для пользовательских исследований и тестирования от UI Patterns.
Stop Accosting People in Coffee Shops
Laura Klein о «партизанских» исследованиях — что можно и что нельзя узнать с их помощью, а также почему они часто используются неправильно.
Визуальное программирование и дизайн в браузере
Живые гайдлайны и компонентные системы
- Brad Frost готовит книгу об идеологии Atomic Design. На сайте можно прочитать черновик.
- Brad Frost о будущих направлениях развития живых гайдлайнов и компонентных дизайнерско-технологических систем.
- Еще одна достаточно крупная коллекция.
- В прошлом году многие известные сервисы опубликовали свои подходы к работе с CSS. Некоторые из них раскрывают интересные детали организации работы по дизайну. В частности, у Medium хорошо задаются базовые параметры дизайна, а у Groupon очень мощная компонентная система.
Slalom — Towards declarative touch interactions
Ralph Tomas описывает Slalom, придуманную систему для быстрого и краткого описания взаимодействия элементов друг с другом. С помощью этой системы (которая, по сути, является упрощенной системой решения задач удовлетворения ограничений) просто задавать взаимодействие одного элемента с другим или множеством, то есть легко прототипировать весьма нетривиальные интерфейсные подходы. Сам Slalom вырос из другой статьи про прототипирование анимаций и взаимодействий с помощью физических моделей.
The When, Why and How of Designing in Browser
Brooke Kao на тему дизайна в браузере. В продолжение темы:
Новое для Bootstrap и Foundation
Новое о веб-шрифтах
- CSS-шаблон для определения базовых параметров шрифтового оформления текста.
- Популярность шрифтов среди самых популярных сайтов.
Compositing And Blending In CSS
Sara Soueidan рассказывает о возможностях современных браузеров по эффектам наложения слоев. Все больше вещей можно делать без участия Фотошопа.
Новые скрипты
- Интересная реализация бургер-меню, чем-то похоже на Jolla.
- Скрипт для поддержания актуального года копирайта в футере.
- Смешной эффект для модального окна.
- Легкая библиотека для реализации анимаций (<4 KB, выдает 60 FPS даже на мобильном).
- Скрипт для имитации процесса набора текста реальным человеком.
- Typist, еще один скрипт для имитации процесса набора текста.
- Решения для отображения и анимации названий полей ввода.
- 100 самых популярных скриптов 2014 года на CodePen.
- Подборка лучших скриптов 2014 года от Codrops.
- Набор иконок на чистом CSS.
- Philip Walton собирает справочник по багам flexbox и их кросс-браузерным решениям.
- Хороший скрипт прилипающей шапки.
- Четыре динамических варианта работы с корзиной в e-commerce.
- Скрипт динамической панели фильтров.
- Варианты анимации меню.
- Еще одна серия примеров превращения иконки бургера в крестик.
Новое о CSS-анимации
- В инспекторе Chrome появилась удобная возможность управления CSS-анимацией. Здорово упростит отладку!
- О нюансах аппаратного ускорения для CSS-анимации.
Работа с SVG
- Оптимизация SVG для веба и его способов доставки до клиента.
- Инструмент для оптимизации SVG-файлов.
- Плагин для GreenSock, упрощающий SVG-анимацию.
- Готовые наборы SVG-иконок.
Новое о Form
Icon Fonts
Шаблоны, фреймворки и инструменты для работы со шрифтовыми иконками, а также готовые наборы.
Designing For Print With CSS
Отличная методичка Rachel Andrew о том, как с помощью CSS готовить печатные версии страниц. Причем возможности настолько обширные, что можно получить на выходе хорошую книжную верстку со всеми особенностями от обложки и содержания до колонтитулов и сносок. Также предлагается скрипт-генератор PDF.
Creating Well-Behaved Sites With The Page Visibility API
Dudley Storey разбирает page visibility API в браузерах, который позволяет аккуратно выключать проигрывание различных медиа на сайте, если его вкладка неактивна. Отличный способ бесить пользователя меньше, хотя старые браузеры не поддерживают его.
Управление интерфейсными проектами, процессами и командами
A Quick Guide to Evaluating UX Roles for Non-UX People
Jacob Harris предлагает очень интересную модель оценки UX-специалистов, нужных для команды проекта. По двум параметрам (сложность взаимодействия и предметной области) менеджер проекта может определить набор нужных навыков и людей.
UX Leadership, Part 2: What Great Leaders Must Do
Вторая и очень мощная часть серии Jim Nieters и Pabini Gabriel-Petit о UX-менеджерах и лидерстве.
UX Strategy — Goals and the future state
Четвертая часть из серии статей Austin Govella о UX-cтратегии — цели и пути их достижения. Также вышли часть 5 и 6.
Designing the Hiring Process
Michael Owens о том, как правильно нанимать дизайнеров с кучей мнений сильных специалистов отрасли.
UX Project Checklist
Не очень системный, но достаточно интересный чеклист важных этапов работы над интерфейсом. К каждому этапу дается справочная статья.
Framing a Sense of Direction
Guido Stompff о том, как команды работают над инновационными решениями.
Designing With Your Clients
Paul Boag о ко-дизайне как способе улучшить взаимоотношения дизайн-студий и клиентов.
Hold A Kickoff Meeting Before Diving Into The Design
Толковая методичка по проведению kick-off от Chris Bank из UXPin.
Pixelapse + Dropbox
Dropbox купил Pixelapse, облегчающий проектную работу для дизайнеров и проектировщиков. Он помогает хранить версии макетов, быстро публиковать их из исходников и обсуждать с клиентами.
Новое о дизайн-спринтах
Продуктовый менеджмент и аналитика
Open Strategy
Курируемый сборник лучших (по мнению авторов) инструментов для открытия своего дела. Содержимое разделено на рубрики: исследование потребителей, онлайн аналитика и аудит, тренды, планирование рекламы и т.п. Можно подписаться на регулярную почтовую рассылку.
The Experience Makes the Product, Not the Features
Lee Dale о том, как работать с возражениями при запуске MVP и не перегружать интерфейс первого релиза.
Split Metrics — Increase conversion of App Store page
Сервис для A/B-тестирования описания приложения в AppStore и Google Play. Создает посадочную страницу, мимикрирующую под дизайн магазина.
Кейсы
Кейсы редизайна
- Масштабируемый интерфейс Android-приложения Onefootball.
- Дмитрий Плотников подробно рассказывает о редизайне Мегаплана. Один из самых интересно описанных кейсов с правильным фокусом на бизнес.
<a rel="nofollow" href="https://medium.com/yakostro/ux-ae8a3b12a3b7">Особенности работы UX-дизайнера в «железном» проекте
Особенности работы над интерфейсом в «железном» проекте на примере «Симкомата». Илья Александров поделил статью на две части: об особенностях «железа» и <a rel="nofollow" href="https://medium.com/yakostro/ux-2-b39e19def99a">описание конкретных решений и кейсов. Будет интересно для практикующих проектировщиков.
Новое о редакционных CMS
- Рассказ про админку «Сетка» внутри Look At Media.
- Рассказ про админку «Монитор» проекта Meduza.
- О работе технической команды Медузы.
Redesigning Museums for Good
В прошлом году frog design провела несколько воркшопов по редизайну UX посетителей мемориальных музеев. Презентация Roberta Tassi рассказывает о воркшопах в Кингали, Руанда и в Амстердаме.
История
‘Human error’ — Still undefined after all these years
Steven Shorrock о понятии «человеческая ошибка» в эргономике — его истории, эволюции и сегодняшнем понимании термина.
Tablet UX Research From the Pioneer Days
Jakob Nielsen вспоминает свой опыт исследования планшетных интерфейсов в 1992 году для GO PenPoint.
The ATM is Dead. Long Live the ATM!
История появления банкоматов, их текущие проблемы и перспективы.
The Fascinating History of the Search Icon
Keith Ohlfs о том, как он предложил иконку лупы для поиска в NeXT — кажется, впервые.
The Untold Story of the Invention of the Game Cartridge
История создания игровых картриджей, которые переформатировали рынок и, возможно, повлияли на то, как распространяются приложения.
A Critical, Creative UX Community — CLUF
Длинный, но очень интересный материал Gilbert Cockton об истории трансформации дисциплины UX и ее мировоззрения относительно научности методов, роли исследований и исследователей, креативного.
Краткая история становления UX от Dirk Knemeyer
Тренды
The Future of Large UX Design Firms
Прокомментировал для UXMatters тренд покупок дизайн-студий продуктовыми компаниями. Все это было еще до истории с Teehan+Lax, но в русскоязычной версии для Цукерберг Позвонит это уже отразилось. В продолжение темы:
- Teehan+Lax переходят в Facebook. Шок, конечно! Самое время соревноваться в составлении списка потенциальных кандидатов на покупку в этом году :) Кстати, выяснились не очень приятные детали этой сделки — нанимают только трех основателей, 40 сотрудников Teehan+Lax остаются ни с чем. Не очень соответствует тем красивым заявлениям, которые описаны в их прощальном письме.
- Eric Portelance о главных уроках работы в Teehan+Lax.
- Оказалось, летом Pricewaterhouse Coopers купили новозеландскую Optimal Usability (теперь она называется Optimal Experience).
- В 2013 году Facebook купил HotStudio.
- John Rousseau из Artefact Group хорошо рассуждает на эту тему.
- И еще одна толковая статья Robert Fabricant на тему.
Прогнозы на 2015
- Предсказания от Craig Tomlin, Rich Gunther, Jan Jursa и Daniel Szuc.
- О профессии data scientist, которая станет одной из самых горячих в следующем году.
- Тренды на 2015 от frog Design.
- Тренды описывают ведущие UX-специалисты для UX Magazine.
- Обзор основных трендов с выставки CES 2015. В этом году там достаточно вяло, интересного мало.
- Прогнозы Dan Sung для носимых устройств в 2015.
Microsoft HoloLens
В рамках развернутой презентации Windows 10 Microsoft показал абсолютно крышесносный концепт HoloLens. Это интерфейс дополненной реальности, который с помощью очков позволяет отображать в реальном окружении голографические объекты и дает возможность манипулировать ими. Уже есть API для Windows, которые позволяют разрабатывать для него.
В отличие от Google Glass, многие сценарии использования которого ограничивались камерой, и Oculus Rift, который предполагает достаточно узкие условия применения, этот концепт открывает очень интересные перспективы для работы проектировщика и дизайнера. Это взаимодействие с реальной средой, привязка элементов интерфейса к объектам в ней. Противопоставлять их, наверное, не очень правильно, но это мощное направление развития профессии, да еще и поддержанное одной из ведущих платформ. Зато технологические издания уже называют Эппл новым Майкрософтом двухтысячных (и The Verge).
Доступны его видео-презентация и эксклюзив от Wired. У R&D Microsoft по прежнему один из самых сильных послужных списков. Причем ведет проект Alex Kipman — один из главных инициаторов Kinect. Не факт, что оно взлетит — у Google Glass пока все не очень, да и Майкрософт любит рассказать красивую картинку будущего и выпустить только кусочек из нее. Но следить за этим направлением нужно точно.
The State of Responsive Web Design
Kezz Bracey описывает состояние адаптивного дизайна на начало 2015 года.
The Human Side of Automation
Дональд Норман об опасностях пути постепенной автоматизации машин.
7 Controversial Usability Predictions Results
В 2010 году Craig Tomlin сделал 7 предсказаний насчет развития юзабилити. В чем-то он угадал, в чем-то ошибся.
Для общего и профессионального развития
The Need for Design History in HCI
Carl DiSalvo пишет о том, что дисциплине HCI не хватает внимания к истории дизайна в целом и взаимодействию в частности.
Трезво мыслящие дизайнеры
- Федор Подрезов из Parallels на эту же тему.
- Еще одна исповедь на тему от дизайнера SimilarWeb.
- Cap Watkins перешел в BuzzFeed. Если у него все получится, это будет еще один сильный кейс превращения стремной в плане дизайна компании в системную.
We’ve Lost the Guts to Think
Размышления о роли и задачах дизайнера в широком смысле. Статья скорее философская, ней много полезных отсылок на не менее интересные материалы.
UX Companion
Приложение UX Companion для iPhone содержит глоссарий методов, терминов и понятий, использующихся при проектировании интерфейсов.
UX Thought of the Day
Коллекция цитат о работе над интерфейсами от компании UI Engineering. Каждый день по полезной мысли.
Salary Trends for UX Professionals
Jacob Nielsen обновил свою статью о тенденциях американских зарплат в UX от 1997 года. Последние несколько лет суммы держатся на относительно стабильном уровне, хотя есть небольшое снижение для начинающих. Средняя годовая зарплата по США для начинающего $63 000 и $90 000 для профессионала с 5 годами опыта (до налогов). Первые 10 лет карьеры прирост зарплаты составляет $5 000 в год, потом снижается до $3 000.
Design for Dasein — Understanding the Design of Experiences
«Дизайн для дазайн» — новая книга Thomas Wendt о связи между феноменологией (основанной на философии Гуссерля и Хейдегера), проектированием взаимодействия и дизайн . На сайте есть видео выступлений Томаса на Interaction 2014 и LeanUX 2014 на эту тему.
Люди и компании в отрасли
AMA: I’m Manoela Ilic, Co-founder of Codrops
Сессия с Manoela Ilic из Codrops. Правда, в основном благодарят :) Она также говорит о том, что многие скрипты делаются на основе концептов Dribbble и Behance. После этого они активно распространяются по промо-сайтам и веб-сервисам и постепенно становятся стандартами. Это в тему здравого отношения к таким соц.сетям.
Материалы конференций
Videos online of Service Design Global Conference 2014
Видео выступлений с конференции Service Design Global Conference 2014, проходившей 7-8 октября в Стокгольме, Швеция.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову и Евгению Соколову. Все больше материалов в обзорах появляется благодаря им.
Автор: jvetrau
