Конец года: что нам дал HTML5 и чего ожидать от него в 2012 году?

Остальное, Экранные интерфейсы

.net magazine подготовил подборку из 20 сайтов, которые смогли в прошедшем году больше всех продвинуть развитие HTML5 и другие технологии из подготавливаемого W3C нового пакета стандартов и удачно продемонстрировать перспективы и возможности этих технологий. По всей видимости, официальным стандартом они станут в 2014 году. Однако большинство разработчиков браузеров постоянно развивают поддержку предварительной версии стандарта и переходят на регулярные автоматические обновления. Хотя, конечно, не обходится и без сложностей: Microsoft объявил о принудительном обновлении IE6, но новым претендентом на место «современного IE6» является, например браузер в ОС Android, который на многих телефонах может не обновляться в течение всего цикла жизни аппарата.

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

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

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

Посмотрите только на реализованные без капли 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

Поделиться:

Пощупай Windows Phone 7 на своем iPhone или Android

Гаджеты, Экранные интерфейсы

Windows разместил в свободном доступе интерактивный прототип интерфейса Windows Phone 7, с которым можно ознакомиться прямо в браузере на других популярных смартфонах.

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

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

Поделиться:

Серия статей об интерфейсах Windows Phone 7

Гаджеты, Экранные интерфейсы

Сергей Корогод начал публиковать на IXBT.com целую серию статей об интерфейсах Windows Phone 7 и проектировании для него.

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

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

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

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

Поделиться:

Google представил новую навигацию по порталу

Видео, Экранные интерфейсы

Полгода назад корпорация Google взялась за редизайн своих ключевых сервисов. Совсем недавно они представили пользователям тулбар черного цвета, расположенный вверху страницы поиска, почты и других сервисов. В результате все основные сервисы должны были получить красивые, интуитивные, а главное, единообразные интерфейсы. На днях компания объявила о запуске нового тулбара, который поможет объединить все сервисы, позволит пользователям быстро переключаться между ними и делиться найденной полезной информацией с нужными людьми через Google+.

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

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

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

Поделиться:

Доводим до совершенства поле ввода страны: пример оптимизации паттерна

Экранные интерфейсы

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

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

Redesigning The Country Selector

Поделиться:

Пригласите вашего пользователя к действию правильно

Книги, Гаджеты, Экранные интерфейсы

UX Booth опубликовали отрывок главы из книги Терезы Нил (Teresa Neil) Mobile Design Pattern Gallery («Галерея шаблонов для проектирования мобильных приложений»). Книга рассматривает типичные проблемы, с которыми сталкиваются разработчики мобильных приложений. На сайте UX Booth можно прочитать про приглашения  к действию (инструкции, подсказки, туры), которые позволяют вашим пользователям познакомиться с возможностями приложения и снижают количество отказов.

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

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

A Look Inside Mobile Design Patterns

Поделиться:

Селективное внимание и что оно значит для проектирования

Видео, Исследования, Экранные интерфейсы

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

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

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

Selective Attention and User Experience

Поделиться:

Простой как никогда интернет-банкинг

Видео, Экранные интерфейсы

Проект BankSimple — сервис, который сам не является банком, однако предоставляет простой и быстрый интерфейс для работы с рядом продуктов от банков-партнеров. Точнее, будет предоставлять в США в ближайшее время.

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

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

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

Поделиться:

Элегантная реализация «ленивой регистрации»

Экранные интерфейсы

Хорошо известно, что пользователи не любят проходить регистрацию или другие процедуры, не связанные напрямую с их целью на сайте. Пример элегантного решения этой проблемы — сервис приема онлайн-платежей Stripe. Чтобы начать пользоваться сервисом, нужно всего лишь нажать на кнопку Get started with Stripe. А уже попав внутрь и поработав с сервисом пользователь может при желании сохранить свой аккаунт при помощи формочки из двух полей в правой части экрана.

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

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

Поделиться:

Объявления в стиле Twitter

Экранные интерфейсы

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

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

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

Поделиться:

Чем отзывчивый веб-дизайн отличается от адаптивного, как его сделать на практике и зачем

Подкасты, Процессы и методики, Экранные интерфейсы

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

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

Real Life Responsive Design: Ethan Marcotte

Поделиться:

Коллекция интерфейсных стандартов от крупнейших IT-корпораций

РЕКОМЕНДУЕМ, Экранные интерфейсы

Джастин Мифсуд — автор блога Usability Geek собрал коллекцию стандартов и сборников руководящих принципов от основных игроков рынка — разработчиков настольных и мобильных операционных систем и других сред.

Official Usability, User Experience & User Interface Guidelines From Companies

Поделиться:

Доклады о проектировании в стиле Metro на конференции Build Windows

События, Видео, Экранные интерфейсы

Недавно в Анахайме, Калифорния, Майкрософт провел конференцию Build Windows. Одной из горячих тем было проектирование и дизайн интерфейсов для среды, выполненной в стиле Metro, который Майкрософт использует в новейших своих операционных системах: Windows Phone 7 и Windows 8.

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

Еще несколько интересных докладов было посвящено, соответственно, особенностям сенсорного управления в 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

Поделиться:

Windows 8 — интерфейсные новинки в недавно выпущенной dev-версии

Видео, Гаджеты, Экранные интерфейсы

Microsoft опубликовал дистрибутив новой операционной системы Windows 8 для разработчиков. Ее уже можно бесплатно скачать и установить, но не забывайте, что это пока еще тестовая версия. Параллельно с этим были продемонстрированы планшеты Samsung, на которых будет устанавливаться эта система.

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

Что же есть в 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

Экранные интерфейсы

Вокруг идеи Майкрософта использовать их фирменный «ленточный» интерфейс, знакомый по современным версиям MS Office, в проводнике Windows в Сети разгорелись нешуточные споры. Одни спешат хоронить Windows, другие становятся на защиту этого подхода.

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

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

The New Windows Explorer UI
Improvements in Windows Explorer

Поделиться:

Хороший слайдер — логарифмический слайдер

Инфодизайн, Экранные интерфейсы

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

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

Такой же прием использовали в iPad-приложении для рисования Procreate. Ползунок, задающий, например, толщину кисти более тонко регулирует ее на нижнем конце и более резко — на верхнем.

Logarithmic Sliders

Поделиться: