Все об адаптивном дизайне в маленькой адаптивной книжке

Книги, Общедоступность, Гаджеты, Экранные интерфейсы

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

Последний модный термин, относящийся к этой тематике — «Responsive design». Помимо тянущихся столбцов «отзывчивый» дизайн предлагает огромный простор для творчества: от динамически тянущихся картинок до полностью изменяемой в зависимости от размеров окна структуры страницы. Еще один интересный вариант «резиновости» — изменяющие размер видеоролики. О том, как их реализовать, написано в статье в блоге Web Designer Wall.

Итан Маркотт написал книгу, в которой детально описаны все элементы responsive design. Сама книга тоже имеет не совсем стандартный формат: помимо бумажной версии есть электронная, в частности вариант в формате epub содержит видеоролики с примерами.

Responsive web design (страница книги на сайте издательства)
CSS: Elastic Videos

Поделиться:

Мобильная вувузела немецких юзабилистов

Социальные сети, Гаджеты, Исследования

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

На прошедшей в Ванкувере конференции CHI’11 группа немецких исследователей представила мобильное приложение, позволявшее болельщикам обмениваться во время матчей чемпионата мира по футболу невербальными сообщениями. На базе данных, полученных после запуска приложения, они исследовали вопрос, есть ли толк от подобной обратной связи, и улучшает ли она в целом опыт просмотра спортивного мероприятия. Оказалось, что пользователи такого сервиса чувствовали себя более вовлеченными в процесс и получали больше удовольствия от него. Кроме того, такие приложения могут давать много пищи для размышления организаторам различных мероприятий.

Real-Time Nonverbal Opinion Sharing through Mobile Phones during Sports Events [PDF, 864 КБ]

Поделиться:

Планшеты и игровые консоли: движение к симбиозу

Видео, Гаджеты, Инновации и идеи

Планшеты — новая кровь игровой индустрии. В частности, многие игры под планшеты отличаются нестандартными для традиционных приставок способами управления, о чем Алексей Копылов рассказывал на конференции Flash GAMM. Но планшеты становятся не только интересным игровым устройством сами по себе, но и приобретают функцию контроллера для других устройств.

Сразу две ведущие технологические компании продемонстрировали новинки, которые объединяют планшетные компьютеры и игровые консоли. Apple объявила об улучшенной поддержке вывода изображения на телевизор в iOS 5, а компания производитель игр Firemint представила гоночный симулятор, который будет использовать iPad для управления и отображения вспомогательной информации, а телевизор — как основное устройство вывода.

В свою очередь, Nintendo, напротив, тихонько заходит на рынок планшетов с черного хода, выпуская игровой контроллер Nintendo Wii U, который, по сути, тоже представляет собой планшет. 6.2-дюймовый сенсорный экран можно использовать в стандартных сценариях применения планшетов, таких как веб-серфинг. Но кроме этого устройство также обладает аппаратными кнопками, как на обычных джойстиках, и фронтальной видеокамерой. Таким образом, Nintendo вполне может занять интересную нишу, что позволит ему отобрать часть рынка планшетов у Apple.

iPad Games on Apple TV: Firemint Announces Real Racing 2 HD with iOS 5 AirPlay Mirroring
Nintendo Wii U controller, first hands-on!

Поделиться:

Что в коробке, мне скажи, да всю правду доложи…

Гаджеты, Инновации и идеи

Много раз мы думали, когда же технологии помогут нам в поиске потерявшихся дома вещей. Любопытный вариант решения этой проблемы предлагают студенты Школы рекламы в Майами. Они предложили компании Rubbermaid, производящей самые разные аксессуары для хранения домашней утвари, вещей, инструментов и прочего, интересную идею сервиса.

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

Наводим порядок с помощью iPhone

Поделиться:

Превью интерфейса Windows 8

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

Сенсорные дисплеи занимают все большее место в жизни пользователей, и разработчики Windows 8 в своей первой презентации интерфейсов новой операционной системы уделяют основное внимание работе на планшетных компьютерах и их старших и младших сенсорных братьях.

Новый рабочий стол заимствует множество идей из интерфейса Windows Phone 7: теперь виджеты и иконки приложений будут представлены в виде панелей-плиток, а переключаться между приложениями можно будет, проводя пальцем от края экрана к его середине.

Правда, место нового интерфейса в системе в целом пока не совсем ясно, так как классический рабочий стол останется доступен в системе. Есть опасения, что плитки будут запускаться как оболочка-надстройка над более традиционным интерфейсом, какие зачастую бывают довольно неуклюже интегрированы с основной системой. Но это наверняка не последнее превью интерфейса Windows 8, и у разработчиков есть еще много идей, о чем намекает «цензурированная» часть коллажей на стене комнаты, где записывался видеоролик.

Интерфейс Windows 8 (заметка на Хабрахабре)
Previewing ‘Windows 8’ (статья в Microsoft News Center)

Поделиться:

Android vs. iOS, кто сильнее?

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

Android и iOS — наиболее популярные платформы для смартфонов. Для них доступно огромное количество приложений. Однако зачастую Android остается в тени iOS. Есть ли тому адекватные причины? Почему не милы пользователям интерфейсы под Android, действительно ли приложения менее удобны, виновата ли в том сама экосистема Android? Или виной тому нерадивые разработчики и предрассудки пользователей?

Ответить на эти вопросы беспристрастно помогло A/B тестирование с учетом времени, необходимого для ответа, и ошибок, совершаемых пользователями, а также опрос пользователей для выяснения их предпочтений. Подробные результаты опубликованы в статье от авторов средства удаленного тестирования IntuitionHQ.

Android vs iOS; A Usability Battle

Поделиться:

Воображаемый интерфейс

Видео, Гаджеты, Инновации и идеи, Исследования

Немецкие исследователи предлагают вовсе избавить гаджеты от экранов и взаимодействовать с воображаемыми интерфейсами. А ведь для таких действий, как регулировка громкости, действительно необязательно видеть реальные элементы управления.

Инновационный контроллер пока не существует в природе, но исследователи из института Хассо-Платтнера провели тщательные эксперименты с целью проверки реалистичности концепции. Исследование показало, что большинство людей способно довольно точно воспроизводить в воздухе буквы, простые рисунки и т.д. Быть может, скоро, чтобы набрать номер на своем телефоне, достаточно будет буквально ткнуть пальцем в небо.

Imaginary interfaces (Страница проекта)
Imaginary Interfaces: Spatial Interaction with Empty Hands and without Visual Feedback (научная статья) [1 MB]

Поделиться:

Дизайн с душой

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

В блоге lovely ui регулярно публикуются скриншоты красивых мобильных интерфейсов.

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

Shopping list on Pepper Plate Recipe, Menu & Cooking Planner

Поделиться:

Прототипы мобильных приложений в облаке

Гаджеты, Инструментарий

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

В частности, при прототипировании мобильных приложений некоторые используют специализированные системы, позволяющие быстро создать вместе с прототипом основу для кода будущего приложения. Например, такими возможностями обладает iOS-приложение DAPP, но оно обладает особенностью, которая одновременно является его основным преимуществом и основным недостатком: сам процесс прототипирования в DAPP происходит непосредственно на iPhone.

Но в скором времени, похоже, появится более удобный вариант. Компания Exadel — разработчики инструмента для прототипирования Tiggr, о котором мы писали совсем недавно, объявили сегодня в email-рассылке, что планируют выпуск приложения, аналогичного DAPP. Но в отличие от DAPP это будет веб-приложение, которое позволит размещать созданный прототип в облаке, то есть на сервере в Сети, а уже оттуда запускать его на телефоне. Для большинства это будет гораздо удобнее: дело только за удачной реализацией. А если Exadel это не удастся, то идею наверняка подхватит кто-нибудь еще.

Поделиться:

Как упростить ввод поисковых запросов на мобильниках

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

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

Новый интерфейсный паттерн «Tap-Ahead», на который уже заявлен патент, неплохо справляется с этими проблемами, превращая их в достоинства.

Концепция Tap-Ahead предлагает отказаться от вывода результатов поиска при первом выборе предложенного запроса. Вместо этого нужно дать пользователям возможность последовательно сужать поисковый запрос и только в конце получить выдачу с результатами поиска. На приведенной картинке это реализовано в виде стрелочек, при клике на которые отображается список еще более конкретных запросов. При клике же по самому слову уже загружается сама выдача. Таким образом, можно просматривать результаты по популярным запросам, набрав буквально пару букв.

Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern

Поделиться:

Фреш по пятницам: iPhone для Буратино

Видео, Гаджеты, Юмор

Доминик Вилкокс создал уникальный прорывной аксессуар для работы с сенсорными дисплеями в ванной — айНос. Проблема мокрых пальцев решена навсегда!

Поделиться:

Студенты Стэнфорда приучают гаджеты к тесному общению

Видео, Гаджеты, Инновации и идеи

Используя технологию Near Field Communication, студенты Стэнфорда демонстрируют свое видение будущего мобильных коммуникаций. Эта технология позволяет избежать длительных процедур установки связи между устройствами, свойственных, например, Bluetooth. Для того, чтобы «подружить» два гаджета, достаточно просто приложить один к другому: например, два смарфтона, или смартфон — к пульту от телевизора. При этом устройство считывает со специального чипа в другом устройстве информацию о протоколах и ключах для связи с ним.

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

New Stanford computing lab imagines the mobile-social future

Поделиться:

Кнопки на сенсорных дисплеях скоро будут шершавыми

Гаджеты, Инновации и идеи

Винсан Левеск и его коллеги из Университета Британской Колумбии в Ванкувере создали технологию, позволяющую динамически регулировать фрикционные свойства отдельных участков сенсорного дисплея.

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

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

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

A Touch Screen that Plays Sticky (статья в Technology review)
Enhancing Physicality in Touch Interaction with Programmable Friction (научная статья из трудов конференции CHI 2011) [PDF, 1.79МБ]

Поделиться:

Опыт использования iPod Touch в школе

Гаджеты

Шерил Кабаба — проектировщик взаимодействия из Adaptive path — рассказала в блоге компании о своем участии в эксперименте по внедрению iPod Touch в образовательный процесс одной из школ. Так как современные дети в любом случае очень много времени проводят за экраном, а приобретенные навыки будут полезны им во взрослой жизни, не стоит запрещать использовать гаджеты в школе. Нужно сделать этот процесс контролируемым.

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

iPod Touch: Devices in the Classroom

Поделиться:

Приложения для смартфонов: веб или нативные платформы?

Подкасты, Гаджеты

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

Здесь имеется несколько аспектов, среди которых можно выделить возможность работы в автономном (оффлайновом) режиме, скорость работы приложения и доступ к датчикам, push-уведомлениям и другим полезным функциям устройства. Современные веб-технологии позволяют реализовать автономный режим в рамках стандартных веб-приложений.

Со скоростью работы же все несколько сложнее. Хотя интерпретация JavaScript постоянно оптимизируется разработчиками, при работе с онлайн-приложением скорость неизбежно зависит еще и от скорости соединения. В статье Андре Шарлана и Брайана Леру подробно анализируются особенности работы нативных и веб-приложений. В частности рассматривается интересный вариант, который может позволить соединить лучшее из обоих миров: специальные фреймворки позволяют исполнять приложения, написанные на HTML, CSS и JavaScript, в виде локально установленных приложений на различных мобильных платформах. Это позволяет снизить затраты на портирование приложений с одной системы на другую (как в веб-приложениях), но при этом приложение устанавливается и работает локально. Кроме того, специальный API позволяет JavaScript’у получать данные от датчиков телефонов.

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

Mobile Application Development: Web vs. Native

Дополнение: та же тема поднималась и в последнем подкасте от UIE с участием Джоша Кларка — автора книги «Tapworthy: Designing Great iPhone Apps».

Поделиться:

Принципы дизайна веб-форм для мобильных устройств

Гаджеты

Специалисты компании UXDepot перевели хорошую статью Chui Chui Tan, в которой говорится о том, как правильно проектировать формы для мобильных устройств.

Статья на Хабрахабре
Оригинал статьи

Поделиться:

Типология пользователей мобильным интернетом

Гаджеты, Исследования

Немецкое маркетинговое агентство MRM Worldwide провели масштабное исследование пользователей мобильного интернета в Германии и Великобритании. Рассматривались такие параметры, как социально-демографические данные, используемые устройства, особенности использования мобильного интернета, используемые приложения, хобби, потребительское поведение пользователей. В итоге были получены сравнительные данные по двум странам и по категориям пользователей.

Всего были выделены четыре группы пользователей:

• Новичок (15% всех пользователей мобильного интернета) использует мобильного сервисы избирательно, не осознает всю широту их возможностей. Это наиболее возрастная группа, среди них только малая часть пользуется смартфонами, и это единственный сегмент, в котором Nokia все еще занимает ключевые позиции.
• Рационалист (50%) регулярно пользуется мобильным интернетом, но все-таки не осознает реальную пользу, которую можно извлечь. Среди них пользователей смартфонов лишь около половины.
• Ежедневный пользователь (20%) хорошо понимает возможности мобильного интернета, но он для них выступает всего лишь дополнением к «традиционному» настольному браузингу. Как и «неутомимиые», в основном владеют смарфтонами на базе iOS и Android, но для них характерны несколько другие паттерны использования. Большинство из них пользуется социальными медиа.
• Неутомимый (12%): для него мобильный интернет — часть его стиля жизни. Очень активно используют социальными сетями и электронными медиа. 70% из них младше 34 лет.

Отчет бесплатен, но для ознакомления с ним MRM требует пройти регистрацию. А для того, чтобы скачать документ с основными выводами исследования нужно опубликовать твит с рекламой отчета.

Mobile & attitudes

Поделиться:

Сила мысли не понарошку: обзор прибора для управления сигналами мозга

Гаджеты, Инновации и идеи, Исследования

Недавно на habrahabr.ru появилось увлекательное повествование от первого лица о «личном знакомстве» с мозгокомпьютерным интерфейсом. Автор подробно рассказывает историю от момента заказа и оплаты через PayPal до появления на пороге курьера с черным чемоданчиком внутри которого и находился прибор. Технические характеристики, правила эксплуатации, обзор ПО прилагаются к истории. В комплекте к устройству  —  игры, которые помогают тренировать определенные навыки: поиграйте с компьютером в пинг-понг, почувствуйте себя джедаем или просто вспомните старый добрый тетрис, все это можно сделать одной силой мысли. Есть и другие игрушки и интересные сервисы, которые помогут вам развивать свой виртуальный телекинез, следить за активностью мозга, и пр.

На десерт автор оставляет личные ощущения. Как и после любой интенсивной активности, голова после «телекинеза» побаливает, и без тренировок прибором так просто не овладеть.

Обзор мозгокомпьютерного интерфейса Emotiv Epoc

Поделиться:

Часы-интегратор от HP

Гаджеты

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

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

Ну и конечно HP наверняка будет использовать такое устройство, интегрирующее всю экосистему их продуктов, как конкурентное преимущество, ведь они давно стараются использовать различные возможности для встраивания своей оргтехники в зоопарк различных устройств. Для большинства потребителей такие часы — более понятная и надежная вещь, чем какие-то облачные сервисы. Другое интересное решение, которое недавно показал HP — планшетный компьютер HP TouchPad на базе Palm webOS, который может обмениваться sms сообщениями со спаренным мобильным телефоном, если его просто поднести к нему.

HP’s bizarre «connected watch»

Поделиться:

Начать новую жизнь с понедельника. Как?

Остальное, Гаджеты

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

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

Сайт системы Greengoose

Поделиться: