Usability.by GUI | Usability.by - Part 2
Улучшаем взаимодействие пользователей с вашим сервисом Повышаем конверсию
в продажи, заявки или
звонки
Проектируем
новые
продукты
Компания 1Point осуществляет весь спектр услуг в области юзабилити, дизайна, user experience
и веб-аналитики

Категория ‘GUI’

Делайте больше, используя меньше времени

Делайте больше, используя меньше времени

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

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

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

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Обзор свежих материалов от Юрия Ветрова. Май-июнь 2010

Обзор свежих материалов от Юрия Ветрова

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

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Разрабатываем быстрее и качественнее при помощи прототипов

Разрабатываем быстрее и качественнее при помощи прототипов

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

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

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Мобильный интерфейс для управления жестами

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

via Хабрахабр

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Написание инструкций пользовательского интерфейса

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

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

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Программа для проектирования сайтов и интерфейсов на iPad

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

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

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Паттерн «Активные ссылки»

Паттерн 'Активные ссылки' Паттерн 'Активные ссылки'

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

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

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

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

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

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Критический взгляд на интерфейс

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

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

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

iPad User Experience Guidelines доступен для чтения

iPad User Experience Guidelines

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Дизайн пользовательских интерфейсов. Семинар сотрудников студии Артемия Лебедева в БВШД

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Прототипирование в Google Drawings

Прототипирование в Google Drawings

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

Мортен Джаст изучал 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.

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Элементы интерфейса для проектирования под iPad

Элементы проектирования для iPad

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Агрессивные «колючие» кнопки против закруглённых

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

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

закруглённая кнопка

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

зубастая кнопка

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Прокрутка и внимание

Прокрутка и внимание

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

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

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Журнал Wired для планшетных компьютеров

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

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Правильный подход к проектированию (Axure Edition)

5-ти минутный видеоролик «The Right Way to Wireframe» сделан на основе одноименного воркшопа Фреда Бичера, Руса Ангера, Тодда Заки, автора книги «Prototyping«, и Вила Эванса на конференциях SXSW 201 и interaction10. Вы сможете увидеть результаты работы специалистов на каждом из этапов процесса проектирования: от анализа требований и изучения аудитории, до создания графического дизайна.

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Balsamic Mockups

Balsamic Mockups

Влад Головач в блоге компании Usethics опубликовал рецензию на Balsamic Mockups:
«В комментариях к моим стенаниям про средства прототипирования один из читателей признался, что пользуется Balsamic Mockups. Примерно год назад я рассматривал этот вариант и он мне не показался; но время идет, так что дай, думаю, попробую снова, более внимательно. Специально для таких случаев Balsamiq раздает бесплатную лицензию в обмен на публичную рецензию, так что вот, пишу.

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

Прочитать всю рецензию

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Создание прототипа в Serena Prototype Composer

Создание прототипа в Serena Prototype Composer

Serena Prototype Composer предназначен не только для визуального прототипирования, но и ведения полноценной документации по проекту. Вы можете описать всех участников разработки и при необходимости легким нажатием кнопки извещать их по почте об изменениях, внесенных в прототип.

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

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

Возможна более сложная динамика по сравнению с Axure Pro, но в ней соответственно сложнее разобраться.

До 2008 года продукт был платным, в 2008 году компания Serena сделала подарок разработчикам.

Читайте описание работы в Serena Prototype Composer в блоге mobilelive.

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Юзабилити-тестирование в эфире Евроньюс

В 8-ми минутном сюжете «Переключаясь на экономию энергии» канал Евроньюс показал весь цикл Human-Centered Design от исследования пользователей, проектирования интерфейсов для iPhone до юзабилити-тестирования в реальных и в лабораторных условиях, eye-tracking и т.д.

В сюжете показано, как команда под руководством Джулио пытается сделать систему, которая называется Energy Life, как можно более интуитивной. Главная проблема по их мнению – это понятный интерфейс.

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

За помощью в том, как лучше отобразить информацию об энергопользовании, Джулио обратился к своим соотечественникам, итальянцам.

После каждого обновления программы Energy Life группа исследователей в Университете Падуи проводит около 20 тестов, отслеживая реакции добровольцев. Участники эксперимента выполняют серию задач, помогающую определить их энергпотребление дома; исследователи же в это время следят за тем, как они взаимодействуют с программой на телефоне.

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

Видео сценариев использования программы

Сюжет на сайте Евроньюс на русском языке
Сайт проекта BeAware

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua

Модульные сетки

Модульные сетки. Компоновка страницы

Модульная система — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.

Задачи сетки:

Ускорение работы
Мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.

Сбалансированность и пропорциональность
Элементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и проч.

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

Модульные сетки. Пример

Основываясь на собственном дизайнерском опыте, наш соотечественник, Алексей Черенкевич опубликовал в ЖЖ цикл статей о назначении и принципах построения модульных сеток.

38 попугаев (Введение)
Алгоритм
Микромодуль и оптические компенсации
Особенности работы с модульной сеткой при разработке «резиновых» сайтов
PaperGrid — сетка на бумаге

Цикл ещё не закончен. Статьи будут появляться дальше

Twitter Facebook Google Buzz Вконтакте МойМир Google Bookmarks delicious Memori.ru БобрДобр.ru Mister Wong Technorati МоёМесто.ru I.ua