Концепт интерфейса для чтения книг на iPad

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

Сайты, представленные в подборке, используют такие возможности, как работа оффлайн, встроенный поиск в реальном времени, тег <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

Если бюджет проекта не позволяет создать для мобильных устройств нативное приложение, мобильную версию сайта или сайт с отзывчивым дизайном, то с помощью нескольких нехитрых ходов можно сделать ваш веб-сайт вполне дружественным для сенсорных экранов.

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

Итак, главное правило — используйте крупные кнопки и много свободного пространства между соседними элементами навигации. Вы можете проверить, насколько ваш сайт удобен для работы на iPad с помощью сервиса iPadPeek.

Improve Your Site’s iPad Usability in 1 Simple Step

Так методом проб и ошибок подбирают себе одежду онлайн шопперы. Однако теперь они также могут прибегнуть к удобному сервису-помощнику по подбору правильного размера — UPcload. Идея довольно простая — вам нужно сфотографироваться на вашу веб-камеру с CD-диском в руках. Последний используется для определения масштаба. Сервис сам рассчитает ваши объемы и рекомендуемые размеры.

Пока сервис проходит бета-тестирование в партнерстве с брендом North Face.

UPcload (сайт сервиса)
Order Perfect Jacket Size From The North Face Using Your Webcam

Интересно, что интерактивный прототип довольно хорошо передает ощущение от работы с операционной системой.

Откройте эту ссылку на смартфоне:
http://m.microsoft.com/windowsphone/en-us/demo/index.html или используйте QR-код.

Первые две опубликованные статьи: общий рассказ о визуальном языке Metro и принципах, заложенных в пользовательский интерфейс WP7, а также конспект выступления Меган Донахью на конференции UX Russia 2011 (видео | презентация [PDF, 10.6 MB]).

В статье о принципах интерфейса WP7 рассказано об особенностях шрифтового и графического оформления интерфейса в стиле Metro, основных блоках интерфейса телефонов (главный экран, меню, экран блокировки, панель статуса, уведомления и т. д.), дополнительных способах управления (аппаратные кнопки, голосовое управление), а также специфических метафорах и идиомах взаимодействия, характерных для этой ОС (хабы, панорама, поворотный модуль pivot).

Сергей обещает опубликовать еще несколько статей:

В следующем материале речь пойдет об обновлении Mango, и там подробно будет рассмотрено, что нового версия 7.5 привнесла в построение системы и в интерфейс, ибо важных изменений было действительно очень много. А уже после этого вернемся к пользовательскому интерфейсу Windows Phone 7, но совсем с другой стороны: мы поговорим о субъективных впечатлениях от работы с ним.

Новая концепция дизайна Microsoft Metro и пользовательский интерфейс Windows Phone 7
Меган Донахью из Microsoft о принципах и приоритетах языка дизайна Metro при создании системы и приложений к ней

Теперь под логотипом Google рядом со строкой поиска будет располагаться выпадающее меню, где вы найдете ссылки ко всем используемым вами сервисам Google. А справа от строки поиска будет поле для обновления статуса в Google+.

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

The Next Stage in Our Design (Официальный блог Google)
Как включить новый дизайн Google

Кристиан Хольст — один из авторов исследования E-Commerce Checkout Usability — описал для Smashing Magazine процесс оптимизации стандартного паттерна для выбора страны. Безусловно, длинные выпадающие списки почти всегда неудобны.

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

Redesigning The Country Selector

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

Об этих и других приглашениях к действию подробнее читайте на сайте UX Booth.

A Look Inside Mobile Design Patterns

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

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

Selective Attention and User Experience

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

Будет интересно дождаться чего-то подобного и в России.

Сайт проекта BankSimple

Еще 12 примеров этого приема есть в довольно старой, но не утратившей актуальности статье 12 Excellent Examples of “Lazy Registration”.

Faster Signup With Primed Accounts
12 Excellent Examples of “Lazy Registration”

Компания Parcsis, к которой примкнули дизайнеры из Turbomilk, запустила интересный сервис объявлений, который позаимствовал многие идеи из Твиттера. Селлобай (так называется сервис) разительно отличается от привычных сайтов вроде Craiglist или, например, «Из рук в руки». Но сервис больше интересен даже не самим сайтом, а мобильными приложениями. Преимущества своего подхода и интересные находки авторы очень доходчиво продемонстрировали во вводном ролике к сайту.

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

Selloby
Selloby: сервис частных объявлений в стиле twitter (заметка на Хабрахабре)

В качестве гостя в подкасте принимает участие Итан Маркотт — автор книги Responsive web design.

Real Life Responsive Design: Ethan Marcotte

Official Usability, User Experience & User Interface Guidelines From Companies

Сэмюэл Моро в этом видео рассказывает об общей идеологии и принципах дизайна в стиле метро.

Еще несколько интересных докладов было посвящено, соответственно, особенностям сенсорного управления в Metro, использованию тайлов — прямоугольников с информацией, из которых состоит экран системы, — и оповещений, а также проектированию для Windows-телефонов.

Designing Metro style: principles and personality
Designing Metro style apps that are touch-optimized
Using tiles and notifications
Windows Phone user experience design

А в статье Терезы Нил — соавтора книги «Проектирование веб-интерфейсов» — приведены примеры по каждой из эвристик из реальных интерфейсов.

6 Tips for a Great Flex UX: Part 5. Review Usability Best Practices

Большинство аналитических статей о развитии интернет-коммерции сходятся в одном: будущее за мобильными магазинами. Обязательный элемент почти любого электронного магазина — корзина. Советами о том, как реализовать мобильный интерфейс корзины, делятся в блоге об интернет-коммерции GetElastic.

В статье рассказано, какие функции менее важны в мобильном контексте, а какие нужно не забыть реализовать, как расставить акценты и наиболее эффективно помочь пользователю завершить заказ.

Mobile Cart Page Design and Testing Tips

В первую очередь, бросается в глаза внимание, уделяемое рынку планшетов. Как Microsoft, так и Apple стремятся к сближению взаимодействия традиционных PC и новых форм-факторов, в первую очередь, планшетных компьютеров. Многие обеспокоены тем, что Microsoft перестарается с приспособлением к планшетам, и система будет мало пригодна для работы на обычных компьютерах. Однако авторы обзора от Engadget скорее стараются развеять эти опасения.

Пока нам не удалось раздобыть совместимую [с планшетом от Samsung Series 7 — прим. Fresh] мышь, но мы потестировали клавиатуру Series 7, и, как и при первых тестах этого устройства, она отлично справлялась с задачей.

Что же есть в Windows 8 такого, чего нет у конкурентов? Он обладает широкими возможностями персонализации. Например, можно настроить экран, отображаемый, когда устройство заблокировано, выведя на него, например, виджет с количеством непрочитанных писем. Также есть возможность вместо традиционного пароля установить пароль-картинку, на которой нужно нажать в определенном порядке в нужные места. Хотя с точки зрения жестов пока нам не показали ничего особенно нового, разве что возможность масштабировать стартовый экран, зато в Win 8 будут встроенные возможности рукописного ввода, который вполне сносно работает, по заверениям авторов из Engadget. Конечно, Microsoft и дальше развивает идею виджетов на рабочем столе: если в Windows Vista они были довольно неуклюжи, то в интерфейсе Aero, развитием которого стал Windows 8, они играют центральную роль на главном экране системы.

Кроме того, переключаться между приложениями теперь можно будет, потянув за левый край экрана. Из-за правого края вытаскивается системный тулбар, а сверху и снизу — инструменты текущего приложения.

Windows 8 for tablets hands-on preview
Windows 8 — версия для разработчиков (обсуждение на Хабрахабре)
Дополнение: Microsoft анонсировала Windows 8, Samsung показала «монстро-планшет». Нужно ли Apple бояться?

Со времени когда мы публиковали первые наброски этого интерфейса, он стал существенно более детализированным. В блогах обсуждается статистика, которую специалисты Майкрософта разместили в официальном блоге о разработке Windows 8. Эта статистика говорит о том, что сейчас подавляющее большинство людей пользуется в проводнике только контекстным меню. Соответственно, желание отображать все функции в «шапке» окна выглядит странно. Тем более, что там есть кнопки, которые редко используются. Но, с другой стороны, риббон-интерфейс хорошо решает проблему «видимости» имеющейся в системе функциональности. Соответственно, он может быть весьма полезен для неопытных пользователей. Автор заметки на Usability post заключает, что точно судить об успешности такого решения пока рано, и, во всяком случае, Майкрософт ищет собственные подходы, а не повторяет за конкурентами.

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

The New Windows Explorer UI
Improvements in Windows Explorer