Студент Потсдамского университета Шон Густафсон разработал полнофункциональный интерфейс, который позволяет с помощью жестов делать что угодно — набирать текст или рисовать. Секретный ингредиент — крошечная камера для отслеживания пальцев, которая всегда должна висеть на шее. Для активации интерфейса нужно показать букву 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:
Кроме скриншотов и своих впечатлений Мортен опубликовал набор стенсилов для Google Drawings.
В первые дни продаж iPad в США Apple продала более 300 тысяч устройств и это количество будет только расти. Как мы уже писали, iPad может изменить всю компьютерную индустрию. Предлагаем вашему вниманию подборку стенсилов для проектирования интерфейсов для iPad.
На конференции UX Australia 2009 Кит Лэнг рассказал о том, как геометрическая форма элементов интерфейса по-разному воспринимается человеком. Например, округлые прямоугольники выглядят естественно дружественно, а некоторые другие фигуры — жёстко и неприятно. Однако и им можно найти применение. Кит привёл очень интересный пример, как можно извлечь выгоду от использования агрессивных «колючих» кнопок.
На этой картинке обе кнопки одинаково округлы и милы.
А тут кнопка удаления «зубастая».
Во втором случае дважды подумаешь перед тем как нажать на кнопку, готовую откусить тебе палец.
Пользователи интернета тратят 80% времени, изучая информацию на «первом экране». Несмотря на то, что прокруткой они тоже пользуются, только 20% их внимания приходится на то, что расположено ниже «первого экрана».
В веб дизайне существует большая неразбериха с т.н. «первым экраном» и важностью показа самой главной информации в области, изначально видимой пользователем. (Т.е., фактически определение таково: «первый экран» обозначает «видимый без дополнительных действий».)
Прочитать перевод статьи Якоба Нильсена “Scrolling and Attention” на Хабрахабр
5-ти минутный видеоролик “The Right Way to Wireframe” сделан на основе одноименного воркшопа Фреда Бичера, Руса Ангера, Тодда Заки, автора книги “Prototyping“, и Вила Эванса на конференциях SXSW 201 и interaction10. Вы сможете увидеть результаты работы специалистов на каждом из этапов процесса проектирования: от анализа требований и изучения аудитории, до создания графического дизайна.
Влад Головач в блоге компании Usethics опубликовал рецензию на Balsamic Mockups:
“В комментариях к моим стенаниям про средства прототипирования один из читателей признался, что пользуется Balsamic Mockups. Примерно год назад я рассматривал этот вариант и он мне не показался; но время идет, так что дай, думаю, попробую снова, более внимательно. Специально для таких случаев Balsamiq раздает бесплатную лицензию в обмен на публичную рецензию, так что вот, пишу.
Начну с хорошего. Встроенные контроллеры для таблиц, вкладок и меню, серьезно экономящие время по сравнению с рисованием на бумаге. При изменении размеров объектов хорошо и наглядно показываются размеры в пикселях, что защищает от появления в прототипе либо слишком больших, либо слишком маленьких объектов (это серьезная проблема при рисовании на бумаге). Динамическая привязка объектов к координатам других объектов позволяет без всяких усилий делать ровно даже без сетки. Очень милая функция, при желании делающая любую (почти) вставленную растровую картинку монохромной. Контроллеры часто управляются тестом внутри (например, для полоски вкладок достаточно в полоске напечатать названия всех вкладок разделенными запятыми, а программа сама построит картинку этих вкладок; весьма удобно). Многие сравнительно простые элементы управления (вроде слайдера) рисуются очень быстро.”
Serena Prototype Composer предназначен не только для визуального прототипирования, но и ведения полноценной документации по проекту. Вы можете описать всех участников разработки и при необходимости легким нажатием кнопки извещать их по почте об изменениях, внесенных в прототип.
Командная работа подразумевает возможность редактирования и просмотра прототипа всеми участниками группы разработки, некий механизм контроля версий.
Работа с визуальной частью прототипа включает в себя возможность создания шаблонов, импорт существующих веб-страниц (и автоматическое преобразование их составных частей во внутренние объекты с возможностью дальнейшего редактирования), скриншоты страниц.
Возможна более сложная динамика по сравнению с Axure Pro, но в ней соответственно сложнее разобраться.
До 2008 года продукт был платным, в 2008 году компания Serena сделала подарок разработчикам.
Читайте описание работы в Serena Prototype Composer в блоге mobilelive.
В 8-ми минутном сюжете “Переключаясь на экономию энергии” канал Евроньюс показал весь цикл Human-Centered Design от исследования пользователей, проектирования интерфейсов для iPhone до юзабилити-тестирования в реальных и в лабораторных условиях, eye-tracking и т.д.
В сюжете показано, как команда под руководством Джулио пытается сделать систему, которая называется Energy Life, как можно более интуитивной. Главная проблема по их мнению – это понятный интерфейс.
“Мы уже убедились, – говорит Джулио, – что сенсорный экран и трехмерные изображения – по сути дела, аналог общения в реальной жизни, – способствуют наилучшему восприятию информации об энергопотреблении. Но вот оптимально доступный для понимания язык интерфейса,… названия и формулировки – на этом мы пока спотыкаемся”.
За помощью в том, как лучше отобразить информацию об энергопользовании, Джулио обратился к своим соотечественникам, итальянцам.
После каждого обновления программы Energy Life группа исследователей в Университете Падуи проводит около 20 тестов, отслеживая реакции добровольцев. Участники эксперимента выполняют серию задач, помогающую определить их энергпотребление дома; исследователи же в это время следят за тем, как они взаимодействуют с программой на телефоне.
“Мы используем самые разные методики, – говорит профессор психологии университета Лучано Гамберини, – от структурированного видеоанализа до элементов когнитивных наук, и даем советы разработчикам в реальном времени. Каждый день мы заново обкатываем программу с теми изменениями, которые программисты внесли в нее накануне и сообщаем им: “осторожно, в этой операции трое из пяти испытуемых допустили ошибки”.
Видео сценариев использования программы
Сюжет на сайте Евроньюс на русском языке
Сайт проекта BeAware
Модульная система — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.
Задачи сетки:
Ускорение работы
Мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.
Сбалансированность и пропорциональность
Элементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и проч.
Ускорение и шаблонирование, единообразность элементов
Разработав сетку, мы делаем основу для решений на будущее. Грамотные гайды содержат детальное описание модульных сеток. Касательно веб-дизайна, мы можем с легкостью предусмотреть тривиальные макеты для всего сайта и сделать заготовку для единичных случаев.
Основываясь на собственном дизайнерском опыте, наш соотечественник, Алексей Черенкевич опубликовал в ЖЖ цикл статей о назначении и принципах построения модульных сеток.
38 попугаев (Введение)
Алгоритм
Микромодуль и оптические компенсации
Особенности работы с модульной сеткой при разработке «резиновых» сайтов
PaperGrid — сетка на бумаге
Цикл ещё не закончен. Статьи будут появляться дальше
Когда перед вами не стоит задача создать интерактивный прототип, то вы можете открыть Photoshop, которому на днях исполнилось 20 лет и нарисовать wireframe там. Именно для этого создан UI Design Wireframe Kit, все объекты которого полностью масштабируемые, а некоторые выполнены как SmartObjects.
В прошлом, 2009-м году вышла 2-я версия программы «ЭКСПЕРТ», которую хорошо знают бухгалтеры, юристы, кадровики и все те, кто много времени проводит в работе с нормативными законодательными документами РБ.
В статье на сайте dev.by рассказывается, как в Студии Дмитрия Борового разрабатывали новый интерфейс этой системы.
Наше сотрудничество с магазином OZ.by продолжается. Стала доступна для предзаказа книга Билла Скотта и Терезы Нейл «Проектирование веб-интерфейсов» на русском языке.
Авторы - специалисты по проектированию пользовательских интерфейсов - предлагают более 75 шаблонов проектирования взаимодействия для создания собственных удобных и привлекательных веб приложений. Приводимые шаблоны иллюстрируют шесть ключевых принципов проектирования, позволяющих в полной мере использовать возможности современных веб технологий и обеспечить эффективность процесса взаимодействия с пользователем. Обсуждается и ряд антишаблонов, которых следует избегать при проектировании интерфейсов.
Для наглядности изложения каждый шаблон сопровождается конкретным примером действующего сайта. Большим подспорьем при чтении книги послужат цветные версии иллюстраций, которые можно скачать с сайта издательства либо воспользоваться галереей иллюстраций оригинального издания по адресу http://www.flickr.com/photos/designingwebinterfaces/.
Издание содержит всю необходимую дизайнеру и разработчику информацию для принятия правильных решений по созданию или обновлению интерактивного сайта или насыщенного веб приложения. Представленные в книге шаблоны послужат прекрасным дополнением к инструментарию и полезным справочным материалом как новичку, так и опытному специалисту.
Посмотреть содержание, несколько страниц из книги и сделать предзаказ вы сможете на странице книги на OZ.by
