Usability.by

На сайте kreativr.deдоступна для скачивания библиотека элементов интерфейса iPad для Axure .

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

Рето Веттах рассказал о физических и тактильных интерфесах. О том, почему надо перестать игнорировать тело, об интерактивных проектах Потсдамского Университета и об open sourse платформе для прототипирования физических, жестовых интерфейсов.

Становится нормальной практикой, когда компания производитель мобильной ОС выпускает программное обеспечение или аппарат, чтобы показать (задать) уровень взаимодействия со своим устройством или операционной системой. Так сделали Google с телефоном Nexus One и похожим способом решили поступить в Microsoft, создав приложение для подсчёта очков в гольфе для Windows Phone 7.

Кроме этого приложения были опубликованы около десяти постов посвященных «Дню дизайна приложений для Windows Phone 7». Эта страница является отличным ресурсом для любого WP7 разработчика и дизайнера.

via Хабрахабр

На сайте DeepApple опубликована ссылка на PSD с элементами интерфейса iPhone 4:

“Не Xcode единым — макетировать интерфейс iPhone-программы можно не только средствами Apple, привычный Photoshop выглядит более чем достойной альтернативой. А если вы нацелились на iPhone 4 с его роскошным Retina Display, то здесь никак не обойтись без последней работы студии Teehan+Lax — втиснутые в гигантский PSD-файл размерами 4074 × 2986 точек все базовые элементы графического интерфейса iOS, перерисованные под экранные 640 × 960 пикселей iPhone 4.

Объем собственно файла получился не менее устрашающим — в разархивированном виде iPhone_4_GUI_PSD_Retina_Display.psd занимает на жестком диске 62,7 Mb. Распространяются эти шестьдесят два целых и семь десятых мегабайта совершенно бесплатно, но с предложением заплатить за титанические усилия дизайнеров Teehan+Lax сколько не жалко. На данный момент времени среднестатистический взнос «сколько не жалко» составляет 10 долларов и 55 центов.”

На Хабрахабре опубликовали перевод статьи Люка Вроблевского “Gradual Engagement Boosts Twitter Sign-Ups by 29%”:

“Недавно (весной этого года) Твитер перепроектировал процесс регистрации, чтобы увеличить количество новых пользователей. И хотя в новой версии в регистрацию добавилась ещё одна страница, то есть дополнительный шаг, конверсия всё равно выросла на 29%. Почему это произошло? Благодаря постепенному вовлечению.

Постепенное вовлечение — это процесс перемещения пользователя по приложению или сайту, фактически “пробуя” его и видя все его преимущества. В обычном процессе регистрации пользователю показывают форму, которую необходимо заполнить. Здесь наоборот, регистрация или отложена на потом, или происходит в фоне, а первый опыт пользователя сфокусирован на том, чтобы показать, как использовать сервис и зачем он вообще нужен.

Правильное постепенное вовлечение рассказывает пользователю об основной сущности сервиса путём простых взаимодействий. Если вы при этом осчастливите человека — даже лучше. Уилл Райт, создатель Sims & Spore, верит, что игры должны позволять человеку выигрывать в течении первых 5 секунд. Это хорошая философия, чтобы добиться постепенного вовлечения. На самом деле вы можете позволить людям за одно-два простых взаимодействия сделать то, в чём смысл вашего сервиса. Это наилучший вариант.”

Давайте рассмотрим оба эксперимента.

В блоге Usemenot опубликован перевод статьи Джареда Левандовски “Doing More With Less Time”:

“Как бы мы не хотели, чтобы все проекты имели достаточное количество требований, пользовательских исследований и отдельных UX-фаз в проектировнии. Часто, в реальном мире, перед UX-специалистами поставлена задача сделать много работы, за короткий промежуток времени. Это приводит к тому, что мы должны изобрести что-то новое, что поможет нам сфокусироваться на проблеме и увеличить собственную эффективность при работе над ней, чтобы представить достойные результаты в те временные рамки, в которые мы поставлены.

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

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

Прочитать весь перевод

Юрий Ветров опубликовал обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов за май-июнь 2010.

Рекомендуем нашим читателям ознакомиться с этой публикацией.

Прочитать обзор

На Хабрахабре опубликован перевод статьи “Design Better And Faster With Rapid Prototyping”:

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

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

Читать весь текст перевода

Студент Потсдамского университета Шон Густафсон разработал полнофункциональный интерфейс, который позволяет с помощью жестов делать что угодно — набирать текст или рисовать. Секретный ингредиент — крошечная камера для отслеживания пальцев, которая всегда должна висеть на шее. Для активации интерфейса нужно показать букву L с помощью не ведущей руки, а другой рукой рисовать словно мышью. Система работает на удивление надёжно.

via Хабрахабр

На Хабрахабре опубликован перевод статьи “The Small Print: Writing UI Instructions”

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

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

Прочитать перевод на Хабрахабре

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

Из других «вкусностей»:

• выравнивае по гайдлайнам
• управление цветами обводки/заливки/текста
• управление размером шрифта
• экспорт в Фотоальбом, ПНГ и формат Бальзамик Мокапс популярный в кругах разработчиков
• опции заморозки и клонировая шаблона
• возможность создать ссылку из одного документа на другой

Прочитаnь описание программы и задать вопросы автору вы можете в топике на Хабрахабре

На Хабрахабре опубликован перевод описания паттерна «Активные ссылки» из библиотеки паттернов Quince:

«Ссылки — это просто или совсем не просто?

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

Мы говорим о хорошем интерфейсе. И говорим о нем на профессиональном
языке, глядя в сторону опыта западных специалистов. Стало быть, одной примитивной классификации: ссылка или не ссылка (а например кнопка), нам очень скоро станет недоставать. В статье идет описание одного из вида — ссылок, называемого Активными ссылками.

— При нажатии на ссылку произойдет создание резервной копии? – это Активная ссылка
— Поля форм, заполнятся автоматически-определяемыми значениями? – это Активная сылка
— А может еще что-то…

У вас есть несколько команд, которые нужно отобразить совместно, или визуально выделить одну из них.»

Прочитать перевод на Хабрахабре

На Хабрахабре опубликован перевод заметки Азы Раскина “How To Critique An Interface“:

“Людей далёких от дизайна часто просят высказать своё мнение об интерфейсе. Быть может вы директор компании, а исполнитель просит оценить ваш новый сайт. Или вы руководитель проекта и недоумённо смотрите на макеты вашего дизайнера. Как вы оцениваете дизайн? На что обращаете внимание? И как вам ответить что-то более внятное, чем «Вот выглядит клёво!» или «Убери это с глаз долой!».

Сложно ответить на эти вопросы в такой короткой статье, но я приведу хотя бы несколько советов”

Прочитать весь перевод

Мы уже публиковали ссылку на интересную статью Алексея Копылова об iPad и заметку об элементах интерфейса для проектирования под него. Сегодня мы делимся с вами ссылкой на iPad User Experience Guidelines, доступ к которому ещё совсем недавно был платным.

Фрагмент (15 минут) семинара Анны Клейменовой и Лены Дроновой (Студия Артемия Лебедева) о дизайне пользовательских интерфейсов и интерактивных взаимодействий в рамках выступления в Британская высшая школа дизайна.

Мы периодически публикуем информацию об инструментах прототипирования и сегодняшняя заметка тоже об этом.

Мортен Джаст изучал Google Drawings, новое дополнение к Google Docs, и решил попробовать его как инструмент для прототипирования. По ощущениям дизайнера, создавать wireframes в Google Drawings у него местами получилось лучше чем в Omnigraffle или Fireworks.

В статье A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio он называет 5 причин, почему Google Drawings лучше Visio или Omnigraffle:

1. Совместное творчество. Команда может работать над одним документом и видеть изменения друг друга.
2. Wireframes физически находится в облаке. У вас нет необходимости пересылать друг другу версии файлов, которые мгновенно устаревают.
3. Риск потерять данные равен нулю. Сохранение версии происходит после каждой операции.
4. Это бесплатно.
5. У большого количества людей уже есть аккаунт Google, поэтому им не требуется регистрация.

Кроме скриншотов и своих впечатлений Мортен опубликовал набор стенсилов для Google Drawings.

В первые дни продаж iPad в США Apple продала более 300 тысяч устройств и это количество будет только расти. Как мы уже писали, iPad может изменить всю компьютерную индустрию. Предлагаем вашему вниманию подборку стенсилов для проектирования интерфейсов для iPad.

На конференции UX Australia 2009 Кит Лэнг рассказал о том, как геометрическая форма элементов интерфейса по-разному воспринимается человеком. Например, округлые прямоугольники выглядят естественно дружественно, а некоторые другие фигуры — жёстко и неприятно. Однако и им можно найти применение. Кит привёл очень интересный пример, как можно извлечь выгоду от использования агрессивных «колючих» кнопок.

На этой картинке обе кнопки одинаково округлы и милы.

А тут кнопка удаления «зубастая».

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

via Хабрахабр и 37signals

Пользователи интернета тратят 80% времени, изучая информацию на «первом экране». Несмотря на то, что прокруткой они тоже пользуются, только 20% их внимания приходится на то, что расположено ниже «первого экрана».

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

Прочитать перевод статьи Якоба Нильсена “Scrolling and Attention” на Хабрахабр

Журнал Wired, пишущий о влиянии компьютерных технологий на культуру, экономику и политику, и компания Adobe представляют версию журнала для планшетных компьютеров. На видео вы сможете увидеть интерактивные возможности взаимодействия читателя с журналом.