Многие особенности современных интерфейсов теперь будет реализовать как никогда просто. Работа такой функциональности, как работа оффлайн станет простой и элегантной. При этом многие из описанных сайтов прекрасно работают и на устаревших браузерах.

Сайты, представленные в подборке, используют такие возможности, как работа оффлайн, встроенный поиск в реальном времени, тег <progress> для реализации индикатора выполнения, хранение информации об элементах в data-* атрибутах, отзывчивая верстка, продвинутые инструменты работы со звуком, видео, холстом и шрифтами, геолокация, использование акселерометра, редактируемое содержимое страницы (атрибут contenteditable), формат векторной графики SVG, CSS-анимация, возможности аппаратного графического ускорения в рамках WebGL. Скоро также появится элегантная реализация механизма Undo-Redo.

Как написал сам автор подборки:

Quite a few of them made my jaw drop with the feeling “I can’t believe this is the native web”. Некоторые из этих сайтов просто поразили меня и заставили подумать: “Не может быть, что это реализовано с помощью нативных для веба технологий”.

Посмотрите только на реализованные без капли Flash диджейские вертушки, аниме-мультфильм, 3D-модель машины формулы 1 и просмотрщик шрифтов, в который файлы со шрифтами можно перетаскивать прямо из локальной папки!

TechCrunch, в свою очередь, дает прогнозы развития HTML5 в 2012 году: мы получим более элегантные и функциональные веб API, в браузеры придет знакомая по телефонам функциональность — push-уведомления, геолокация и т. д., все больше приложений будут реализованы на HTML5, CSS и Javascript и смогут поддерживать работу оффлайн, Microsoft, вероятно, сделает серьезный прорыв на рынке браузеров, развитие магазинов приложений в браузерах получит серьезный толчок к развитию, производители онлайн-игр начнут портировать их в браузер при помощи WebGL, HTML5 займет место Flash на рекламном рынке, а JavaScript станет работать существенно быстрее, Facebook станет играть еще более важную роль в качестве базы для семантического графа интернета.

2011 in review: 20 HTML5 sites that changed the game
The Definitive Guide To HTML5: 14 Predictions For 2012
HTML5: A technical specification for Web developers
HTML 5 Demos and Examples

Креативный директор Fast Company Роберт Фабрикант выделил 5 ключевых уроков, которые мы получили в течение прошедшего года:

• Сейчас стоит следить не за технологическими прорывами, а за тем, как футуристические разработки десятилетней давности приходят в виде приложений для совершения покупок в супермаркетах, умных принтеров и прочих до боли обыденных вещей. «Для многих из нас это все равно, что наблюдать, как твои дети входят во взрослую жизнь».
• Эти технологии постепенно перестают быть игрушками для гиков и проникают в такие критически важные области, как транспорт и другие системы жизнеобеспечения города.
• Чтобы добиться успеха, необходимо строить сервисы, которые позволяют связывать между собой всех людей, а не живут на какой-то одной платформе. А новые семантические технологии помогают нам делать это.
• Чтобы существенно улучшить повседневную жизнь людей, нам все больше нужно уходить от содержимого дисплея и переключаться на физические артефакты, имеющие отношение к используемым продуктам и сервисам.
• Видео — мощнейший инструмент в работе современного проектировщика взаимодействия. Обилие концептуальных видеороликов показывает мощь этого средства для демонстрации и тестирования заложенных в систему идей.

5 Lessons From The Best Interaction Designs Of 2011

Harvard Business Review и Gigaom публикуют свои прогнозы о том, в каких областях стоит ждать прорывных новинок.

• Корпоративные пользователи стали ожидать качества опыта взаимодействия, привычного им по потребительским продуктам: соцсети проникают в рабочее общение, Blackberry сдает позиции как мобильная ОС для корпораций.
• Носимые гаджеты в виде часов, браслетов и прикрепляемых к одежде блоков: Jawbone Up и Fitbit Ultra — лишь первые ласточки. Эти средства, в частности, очень помогают развитию лайф-логгинга — нового хобби человечества, заключающегося в постоянном подсчете всего происходящего: килокалорий, чекинов, прослушанных песен и прочего.
• Революция в гостиной: количество разнообразных мультимедиа-телеприставок наконец должно перейти в качество. Конечно, тут многие возлагают надежды на выход телевизора от Apple.
• Прорыв в банковской сфере, который в первую очередь связан с интеграцией финансовых инструментов в мобильные телефоны (Square, Google Wallet и т. д.).
• Появление Siri заставило поверить в перспективу голосовых и жестовых интерфейсов, не требующих смотреть на экран или прикасаться к устройству.
• Развитие средств для общественного активизма на основе социальных сервисов, открытых API и т. д. Такой «активизм сидя на диване» в западных медиа уже прозвали метким словом slacktivism.
• Приход дополненной реальности в мейнстрим: в первую очередь, активное ее использование в оффлайн-магазинах.

Five big things to watch out for in 2012
Innovative Ideas to Watch in 2012

В статье приведены четыре основные идеи, которые образовательным учреждениям стоило бы позаимствовать у проектировщиков, дизайнеров и архитекторов:

• Культура взаимодействия с конструктивной критикой и вниманием к процессу проектирования, а не только к результату. В традиционных школах слишком большое внимание уделяется конечному результату — сочинению, выполненной контрольной, заполненному тесту. Школьников и студентов нужно обучать эффективной совместной креативной деятельности.
• Внимание к междисциплинарному взаимодействию. Ведь разделение знаний о мире на предметы: математику, физику и литературу — весьма условно.
• Культура поиска решений путем проб и ошибок, постановки и проверки гипотез, разработки и тестирования прототипных решений.
• Гармоничное использование как новейших электронных, так и традиционных средств: карандаша и бумаги, доски, компьютера, современных гаджетов и разнообразных продуктов пост-PC эры.

4 Lessons The Classroom Can Learn From The Design Studio

Такие письма можно рассылать зарегистрированным пользователям, у которых что-то отложено в корзину, или незарегистрированным пользователям, которые успели ввести свой Email. Для этого Линда советует ограничить первый шаг заказа единственным полем ввода для адреса электронной почты.

Линда также советует не тянуть с отправкой и письма и делать это почти сразу после ухода посетителя. Более половины заказов, которые удается заполучить обратно, происходят в течение первых нескольких часов после первого захода.

Это не дейтинг, когда вы берете телефончик, а потом несколько дней не звоните, чтобы сделать вид, что вы очень важный и занятой. Ваша конверсия не повысится от демонстрации подобной терпеливости.

Чтобы завлечь еще часть покупателей, можно через несколько дней присылать им предложение со скидкой. Правда, с этим стоит быть осторожным: если давать такую скидку каждый раз на все товары, то пользователи могу специально забрасывать заказ, чтобы дождаться скидки. Поэтому нужно выбрать отдельные сегменты, на которые распространять такое предложение.

И последний совет: можно использовать сервис Google Remarketing, чтобы показывать баннеры тем, кто ушел с вашего сайта.

8 Tips for Recovering Abandoned Shopping Carts

Большое спасибо всем, кто примет участие.

Ответить на опрос

Стэнфордский университет известен не только как один из лучших в мире вузов, но и как активнейший участник движения по созданию новых возможностей самообразования в интернете. На канале университета в YouTube или iTunes U вы можете посмотреть записи множества различных лекций, в частности серии HCI Seminar за разные годы: это интересные выступления различных специалистов по взаимодействию человека с компьютером и проектированию взаимодействия на отдельные темы. Но недавно появились и записи более структурированного, целостного курса «Введение во взаимодействие человека с компьютером». В курс входит более 40 лекций.

Кстати, университет не останавливается на простом размещении видео. На сайте Stanford Engineering Everywhere есть курсы по программированию и прикладной математике, которые содержат также учебные пособия, расшифровки лекций, домашние задания, экзаменационные вопросы и различные раздаточные материалы. А недавно было объявлено, что в интернете пройдут бесплатные курсы, на которых можно будет даже получать оценки за тесты и домашние задания. Вы можете записаться на курсы по «Введение в искусственный интеллект», «Введение в базы данных» и «Введение в машинное обучение».

Introduction to Human-Computer Interaction Design

Конечно, при составлении портфолио нужно учитывать конъюнктуру рынка труда: что именно сейчас востребовано. Ведь UX специалист может обладать самыми разными компетенциями и опытом работы в различных предметных областях. Вас интересуют мобильные платформы или, шире, гаджеты в целом, или напротив, только игры на iOS? Есть ли у вас опыт проектирования приложений для государственных нужд? А создания сервисов, задействующих множество каналов и сред взаимодействия? Естественно, портфолио должно быть адаптировано к конкретному работодателю, чтобы показать вашу готовность работать над предлагаемыми в этой организации проектами.

Что же особенно отличает UX портфолио от других — это особый акцент на процесс, а не только на результат. Ваше портфолио должно рассказать историю проекта, какие альтернативные варианты рассматривались, какие возникали проблемы и как они разрешались. Кроме того, очень важно видеть и показать свое место в предыдущих проектах и свое видение того, чем вы хотите заниматься в будущем. Уитни Куэсенбери, один из спикеров на UX Марафоне 2011, рассказывает связанную с этим историю из жизни

Когда я заканчивала учиться на театральную специальность, я хотела стать дизайнером по свету. И я вспоминаю разговор, который я имела с моим первым потенциальным работодателем. Он спросил, чем я хочу заниматься. «Стать дизайнером по свету,» снова сказала я. «Да, но какой театр вас привлекает? Вы хотите работать с пьесами, мюзиклами или оперой? С какой компанией вы хотели бы работать?» И тогда я поняла, что до этого я полностью сосредотачивалась на конкретных навыках вместо того, чтобы говорить о более глобальном вопросе: какой театр я хочу создавать.

С тех пор Уитни стала заниматься UX проектированием, но не забыла все, чему ее учили в театральном вузе, а с успехом применяет эти знания в проектировании продуктов и сервисов. На своем вебинаре она расскажет о том, как создавать и применять истории в проектировании опыта взаимодействия.

Portfolios for Independent UX Designers

Журнал Atlantic взял интервью у нового главы лаборатории Джои Ито, а также составил подборку из 9 наиболее значимых, по их мнению, идей, родившихся в MIT Media Lab:

• Ноутбук XO, созданный в рамках программы OLPC — «Каждому ребенку по ноутбуку».
• Технология «электронных чернил»
• Eyenetra — недорогая насадка на камеру мобильного, позволяющая оценить остроту зрения и прописать нужные очки
• Игровой контроллер Guitar Hero
• Электронный программируемый конструктор Lego Mindstorms
• Робопротез ноги Powerfoot Biom
• Обучающая среда программирования для детей Scratch
• Складной автомобиль
• Технология голографических изображений

Конечно, это далеко не все интересные инновации, сделанные в Media Lab: например, там создают множество интересных роботов или очки, позволяющие считывать эмоции людей.

Достигать таких успехов помогает плотное взаимодействие в междисциплинарной команде талантливых специалистов.

Насколько, по вашему мнению, важна физическая компоновка лаборатории, расположение рабочих групп относительно друг друга? На мой взгляд, ее значение трудно переоценить. Это часть работы по управлению Лабораторией в целом: мы стараемся сделать рабочее пространство идеальным. Ведь компоновка влияет на то, как все взаимосвязано, как разные люди встречаются друг с другом. Я считаю, что не все осознают, насколько это важно. Почему в Лаборатории так ценится совместная работа в междисциплинарной команде? Междисциплинарность — чуть ли не основная вещь, которой не хватает в нашем обществе. Это касается науки, экономики, чего угодно. Мы хорошо научились разбираться в своей области, все более и более узкой. В результате, есть столько очень-очень умных людей, которые не понимают, как им не то чтобы работать друг с другом, но даже как разговаривать о чем-то. Как у вас получается заставить разных специалистов эффективно работать вместе? Физик, химик и архитектор будут продуктивно работать вместе только когда они создают что-то настоящее. Они могут сидеть за столом и спорить, но не слушать друг друга. Только в тот момент, когда они начинают вместе что-то создавать, возникает настоящее взаимопонимание.

9 MIT Media Lab Ideas That Are Changing Lives (or Will Soon)
The Startup Man: A Conversation With Joi Ito

The Ultimate Usability Resource Roundup: 60 Great Posts

В сообществе Slashdot разгорелась бурная дискуссия на эту тему. Какие же основные гипотезы о природе живучести факса.

Во-первых, он работает «из коробки», позволяет вставить пачку листов и тут же отправить их партнеру. Пользуясь типичным сканером и электронной почтой, вы будете вынуждены сделать для этого гораздо больше операций. Хотя эта техника многократно превосходит типичный факс по технологическим параметрам, она не поддерживает простого и понятного сценария, нужно пользователям факсов.

Другая причина: ригидность крупных организаций, требующих отправки факсов и привыкших отправлять их, вера в то, что отправка документа по факсу подтверждает его подлинность, а также в то, что телефонная линия лучше защищает конфиденциальную информацию, чем почтовые сервера. Конечно, принуждение к использованию факса к добру не приводит: те, у кого его нет, отправляют факсы через специальные веб-сервисы, что еще менее безопасно и надежно, чем стандартная почта.

Вы можете подробнее ознакомиться с аргументацией сторон на странице Slashdot, где накопилось уже несколько сотен комментариев. Мы же сделаем главный вывод: дайте людям возможность выбора. Пусть как сторонники, так и противники факса смогут отправлять вам документы тем способом, которым им удобнее.

А как вам кажется, что должно произойти, чтобы факсы окончательно вымерли?

Why the Fax Machine Refuses To Die

Во главу угла Элейн ставит фирменный подход, предложенный в компании Cooper,— проектирование, ориентированное на задачу, и отталкиваясь от него рассуждает о том, как правильно определить требования и цели пользователей, учесть бизнес-модель и специфику, предоставляемых услуг, а также технические возможности. Элейн последовательно рассматривает каждый аспект.

Элейн обращает внимание на тот факт, что количество прямых заходов на сайты отелей незначительно. Основная масса пользователей приходят с агрегаторов, попадая уже на определенный этап бронирования. Поэтому очень важно учесть, какая дополнительная информация может потребоваться пользователям для его успешного завершения. Нельзя допустить, чтобы пользователи отвлекались на поиски этой информации. Для этого нужно четко определить кто является целевой аудиторией вашего сервиса (молодожены, деловые люди, молодежь, семейные пары с детьми и пр), каковы их потребности, какая информация им может потребоваться.

Однако работа над системой бронирования подразумевает не только понимание целей и потребностей пользователей, но и учета технических требований и ограничений, накладываемых системой бронирования внутри самого отеля. Об этих и других деталях более подробно в статье Элейн Симпсон.

Hotel Booking From Start To Finish

Если у компании хорошо получается один продукт, это еще не значит, что она будет столь же успешна во всех других направлениях. Автомобильные компании Форд и Линкольн — отличный тому пример. Их показатель на рынке заметно упал в этом году: Форд скатился с 5-ой на 23-ю позицию, а Ликнкольн — с 8-ой на 17-ую. По мнению специалистов из Cooper, причина такой неожиданной клиентской антипатии во многом связана с «раздражающим поведением» бортовых интерактивных систем, которые в автомобильной промышленности называют «телематикой». Они включают в себя систему навигации, телефон, интернет-браузер, климат-контроль и различные развлекательные ресурсы. С помощью телематики водители управляют почти всеми системами своей машины. Так что, когда такой важный элемент подводит, то общее впечатление от продукта становится отрицательным.

Статья рассказывает о том, какие аспекты оказывают решающую роль на опыт взаимодействия водителей с автомобилем, и предлагает варианты преодоления сложностей, возникающих в ходе такого взаимодействия. Как пример, производителям автомобилей необходимо осознать, что «смарткары», как окрестили современные автомобили, напичканные электроникой,— это не просто компьютер на колесах с педалями, поэтому в решении «бортовых» проблем дорогая обивка салона не поможет. Основная проблема компаний «с историей» в том, что они скептически относятся к цифровой эре и продолжают делать все по старинке. А так как телематика может отвлекать водителей от дороги и тем самым служить причиной аварий, то это вопрос жизни и смерти — сделать хорошую бортовую систему.

Will Ford learn that software isn’t manufactured?

Так зачем же проектировать оригинальный сервис, если можно просто скопировать все у конкурента? Однако любая копия — всего лишь копия. Она как восковая фигура в музее мадам Тюссо: похожа на настоящего человека, но не более того. Внешний вид (дизайн и лейаут) скопировать не сложно, но это еще далеко не весь UX, определенных штрихов будет не хватать. Так, например, что случится, если пользователь неверно введет свой email, какое сообщение об ошибке он увидит? Нельзя скопировать все сценарии, они как подводная часть айсберга скрыты от взгляда. Как отметил Джефф Вин (чью речь вы можете посмотреть на видеозаписи ниже):

Слепое копирование UX чужого хорошо спроектированного сервиса не гарантируют такой же успех вашего, так как «подражатель» никогда не понимает, почему было спроектировано так, а не иначе.

Где нет понимания, там нет и UX. А какую точку зрения поддержали бы вы?

UX: It’s a Highly Defensible Investmen

Интересные размышления на тему противостояния вебсайтов и приложений. Автор поднимает вопрос: вымирающее ли животное браузер, которое требуется занести в красную книгу или все-таки у него есть шанс на выживание. Статья содержит много примеров из жизни, цифр и диаграмм, а также данных по … Китаю, как одной из самых продвинутых стран в плане технологий. Не забыт в статье и HTML5. Одним словом, приготовьтесь к длительному, но познавательному чтению.

Future Trends: Are Browsers Becoming a Thing of the Past?

Спасибо вам за то, что читаете нас. Мы потихоньку растем, набираемся опыта, в том числе и взаимодействия

Можете смело поздравлять нас с некруглой датой: 4 года!

Ким Билер, Apt Media: В борьбе за правое дело не может быть проигравших. Пока мы не опускаем руки и рассказываем про юзабилити клиентам и пользователям, мало-помалу они сами проникаются идеей. Но это не та сфера, где возможны коренные изменения за одну ночь, это постепенный процесс. Довольно часто во время проектов я вижу, как клиенты выбирают более умеренные, «безопасные» решения, оставляя в стороне коренные преобразования. Но со временем они вернутся и скажут: «Помните в прошлый раз мы отказались от этого? Так вот, теперь мы хотим что-то в этом духе».

The fight for better experiences (подстрочник видео)

Разговоры о внедрении HTML 5 ведутся уже очень давно. В блоге Hongkiat опубликована подборка веб-приложений, которые на деле активно используют эту версию языка разметки.

Действительно ли убийца Flash уже стоит на пороге? Знакомьтесь с возможностями HTML 5 и примеряйте их к своим проектам.

HTML5-Powered Web Applications: 19 Early Adopters

Женевьев Белл работает антропологом в корпорации Intel. Ее задача понять потребности и мотивы пользователей, их мысли и чувства для того, чтобы создавать более качественные продукты. Казалось бы, Intel, как производитель процессоров, должен меньше всего переживать о пользователях конечных продуктов в отличие от производителей планшетов и телефонов. Однако, по словам Белл, инженерам нужно понять, что процессор должен обходиться в своей работе без кулера не потому, что это сберегает энергию, а потому что так пользователям с ним больше нравится работать.

Белл делится 10 предсказаниями о том, чего ждать от технологий в будущем. Интернет уже и так перестал ассоциироваться с настольным компьютером и браузером. Он продолжит врываться в нашу жизнь и менять ее. Однако скучать в новой жизни нам не придется, об этом позаботятся смартфоны. Глагол «скучать» будет означать «забыл смартфон дома». Мы будем стремиться всегда оставаться на связи, и при этом пытаться найти место, где сможем побыть наедине с собой и природой. Уже сейчас многие выбирают место для отдыха в самых отдаленных уголках третьего мира, лишь бы отдохнуть от социальных сетей и бесконечных контактов.

Что еще ждет нас в будущем? Новые технологии, устройства, пользовательский опыт? Читайте в статье Женевьев Белл.

Genevieve Bell, Intel anthropologist — 10 visions of the future

Однако Кэмерон предлагает пойти дальше. С одной стороны, нужно лишить отдельные сервисы контроля над нашими данными: например, если вы пользуетесь сервисом наподобие Last.fm, то он владеет огромным объемом информации о ваших музыкальных вкусах. Вы не можете легко перенести эту информацию на другой аналогичный сервис, что позволяет Last.fm удерживать вас от перехода к другим аналогичным сервисам. Пользователю нужно предоставить полный контроль над своим «освобожденным» контентом. С другой стороны, нужно дать возможность авторам сохранить определенный контроль за их произведениями. Сейчас очень сложно установить изначальный источник многих публикаций, изображений и других материалов в Сети. Если гарантировать то, что за публикацией будет всегда сохраняться информационный шлейф от ее создателя, можно мотивировать авторов активнее делиться созданным контентом: например, при помощи RSS авторы могли встраивать рекламу в контент вне зависимости от контекста его отображения.

Orbital Content

«Зачем тратить на мебель лишние материалы? Пусть она раскладывается из пола,»— решил японский дизайнер Син Ямашита и объединил эти два предмета обихода в единое целое. Модульный пол-трансформер позволяет выдвигать отдельные панели, собирая из них столы, кресла, журнальные столики и прочие нужные в хозяйстве вещи. Может, и в ваших интерфейсах можно обойтись без некоторых лишних элементов?

Floor Transforms into Furniture