Monday, June 04, 2007

Подумайте о слушателях

Летом прошлого года прошло замечательное событие — EPAM Software Engineering Conference'2006.

Из официального пресс-релиза:
В мероприятии приняло участие более 300 сотрудников компании из пяти стран, в которых находятся центры разработки EPAM Systems. В течение двух дней прозвучало более 40 докладов, охвативших широкий спектр тем: управление проектами, управление качеством, вопросы интеграции приложений, бизнес-анализ, управление требованиями заказчика, вертикальные решения, применение многократно используемых компонентов и т.д.
Конференция прошла "на ура".

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

О презентационных материалах

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

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

Главным упущением в оформлении презентаций, на наш взгляд, было:
  • отсутствие индикатора, отображающего количество оставшихся слайдов до конца презентации (мы слышали, как люди говорили: "Не знаешь, сколько слайдов до конца?" или "Уже долго рассказывает, полчаса осталось, как думаешь, дошли ли до половины?" и т.д.);
  • наличие большого количества нечитающегося текста на одном слайде ("Что там написано, не видишь?");
  • мешанина в слайдах — когда слушатели не понимают, что докладчик говорит уже о другой проблеме;
  • неоправданное количество эффектов ("Ух!");
  • много текста, мало иллюстраций ("А картинки у них вообще будут?").

Советы дизайнерам презентаций: подумайте о слушателях

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

Слушатели должны иметь что-то на руках для прочтения. Это два.

Самую сложную информацию слушатели должны воспринимать через иллюстрации. Это три.

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

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

Советы докладчикам: подумайте о слушателях еще раз

Cлушатели должны слушать вас, а не читать с экрана. Это раз.

Слушатели должны иметь возможность задать вопросы. Это два.

Слушатели ожидают от докладчика интересной презентации, не разочаруйте их. Это три.

Слушатели смогут слушать вас всего 3 минуты, не отвлекаясь (доказано!). Не дайте им отвлечься. Это четыре.

Слушатели любят слышать рассказ, а не чтение с листка. Не читайте по листику или с экрана. Это пять.

Обязательно возьмите с собой:
  • Бэдж
  • Визитки
  • Указку (лазерную или любую другую)
  • Раздаточный материал (в достаточном количестве)
  • Флэшку с презентацией (даже если вы посылали ее по электропочте)
  • Распечатку самой презентации для себя(а вдруг понадобится)
  • Носовой платок (салфетки)
Есть еще примерно 450367 советов на тему, как разработать и провести классную презентацию, но мы предложим вам начать именно с вышеописанных десяти.

Презентация "Modeling of Usable User Interfaces"

Примеры хорошо огранизованной презентации приведены ниже: Понятная обложка
Слайд №1 — Заглавный слайд презентауции. Индикатор отображения пройденных страниц пуст.

Секция №1
Слайд №7 — Пример отображения заглавного слайда секции.

Отображение термина
Слайд №19 — Термины лучше сопровождать иллюстрацией.

Диаграмма в презентации
Слайд №32 — Понятные и простые диаграммы всегда и везде! Ого, почти половина слайдов позади!


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , , ,

Аргентина-Ямайка 5:0

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

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


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

Пример хорошего информационного дизайна приведен ниже (не ручаюсь за точную передачу визуального решения, но идея, я думаю, понятна): Отображение результатов воллейбольного матча. Информационный дизайн. Почему этот дизайн хороший: 1. Наличие самого дизайна — уже похвально (то есть не обычная табличка 7:4)
2. Узкая полоска, которая располагается слева или справа экрана незаметна и в тоже время, всегда можно узнать текущую информацию о партии
3. Четко видно, кто как играет во время всей партии — сначала бразильцы набирают очки без проблем, русские подтягиваются, но потом, вроде бы, бразильцы опять начинают давить.
4. Другая информация (подачи, замены, таймауты) тоже, скорее всего, отображается на этом условном временном графике (я не сильно разбираюсь в волейболе :))


Телеканал: Планета-Cпорт (Россия)
Вид спорта: Волейбол
P.S. Наши проиграли 3-1 по партиям.





RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , ,

Прослушайте свое приложение!

При проектировнии системы необходимо уделять внимание мелочам. Даже таким, на первый взгляд, незначительным, как системные звуки браузера. Как известно, Windows Explorer (и конечно же IE, так как они интегрированы друг с другом) по умлочанию содержит ряд звуков, которые могут слегка испортить впечатление о системе, если она спроектирована не совсем правильно.

Подумать только! Даже Google грешит подобной проблемой. Оденьте наушники, запустите IE, введите свой ник и пароль и нажмите ввод — что вы слышите? Правильно — два щелчка.

Откуда же взялся второй щелчок? Попробуем разобраться. Дело в том, что системный звук Start Navigation ассоциирован, например, с такими событиями как навигация на другую страницу и отправка формы. Вот как раз отправка формы и вызывает большое количество вопросов. Если AJAX-приложение зачем-то пытается пересабмитать данные в другую форму программным образом, оно в итоге вызывает метод form.submit() и происходит второй а то и третий щелчок.

Для мазохистов-любителей предлагаю запустить подобный код в IE.

Строчи пулемет!

RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , , ,

О Verdana

Verdana — шрифт без засечек, который был специально разработан для Веб. Впервые Verdana был доставлен с IE в 1996 и стал лидером по использованию в Веб по всему миру.


Verdana
Автор: на самом деле первоначальным автором являлся Tom Rickner, но официальным автором на сегодня является Matthew Carter
Владелец: Microsoft Corp. Verdana имеет один гиганский недостаток, он очень широкий и посему практически непригоден для приложений с интенсивной плотностью данных в формах...

Что можно порекомендовать?

Tahoma — шрифт без засечек, который был разработан для отображения UI (сравните с Verdana, особенно строчные литеры). Рождение растровой Tahoma на самом деле произошло в 1994 году. Популярность пришла в 2000, когда векторная версия шрифта стала использоваться по умолчанию в UI таких ОС как Windows 2000, Windows XP и Windows Server 2003 (он заменил MS Sans Serif). Tahoma
Автор:все тот же Matthew Carter
Владелец: Microsoft Corp.

Tahoma унаследовала все достоинства Verdana и устранила ее недостатки. Это прекрасно! К слову говоря, многие забывают про другой мегашрифт.

Да, это Arial: Arial — современный шрифт без засечек, который вобрал в себя последние шрифтовые тенденции 20-го столетия.

Arial индустриален и универсален: вы можете использовать его как в Веб, так и в печати и графическом дизайне. Arial
Автор:Robin Nicholas и Patricia Saunders
Владелец: Agfa Monotype Corp.

Arial любят за его плотность, хотя при маленьких кеглях это скорее недостаток, чем достоинство.
Вердикт: Verdana несомненно устарел. Используете Verdana 2.0—Tahoma. Ну а вечный Arial вообще вне конкуренции. Хотя на вкус и цвет товарища нет.
Ваше личное дело, какой шрифт использовать в ваших приложениях.

Читайте и комментируйте оригинальную статью на ui.by

Labels: , ,

Monday, May 07, 2007

Четыре правила UI дизайна

Как построить хороший дизайн? Почему один дизайн хорош, а другой плох? С чего начать?
Эти и масса других вопросов возникает в голове молодых дизайнеров на начальном этапе. Самое смешное, что ответить на них в двух словах невозможно.


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

    Приминительно к дизайну в целом:
  • 1. Proximity
  • 2. Repetition
  • 3. Arranging
  • 4. Contrast
    Приминительно к UI дизайну:
  • 1. Organizing and Grouping
  • 2. Consistency
  • 3. Alignment
  • 4. Whitespace
Остановимся подробнее на правилах UI дизайна. И сразу начнем с картинок. Этот немного упрощенный пример, который был продемонстрирован на Конференции по разработке ПО в EPAM Systems, хорошо иллюстрирует все правила. Исходный вайфрэйм:
process-1.gif 
I. Элементы формы организованы. Под организацией понимается логическое структурирование элементов на экране. Посмотрите на форму и подумайте, на какие части или смысловые группы можно ее разбить.
process-2.gif 
II. Элементы формы сгруппированы. Группировка, вдобавок к организации, хорошо работает в формах, логически объединяя связанные элементы.
process-3.gif 
III. Элементы формы выровнены. Выравнивание — очень мощный прием. Невозможно создать удобную форму, если пропущен данный этап.
process-4.gif 
IV. Элементы формы приведены к одному стилю. Приведение к общему знаменателю позволяет решить ряд задач, таких, например, как узнаваемость и типизация блоков. Согласитесь, что при прочих равных поля формы и их названия должны выглядеть одинаково.
process-5.gif 
V. В элементы формы добавлено пространство. Добавление пространства позволяет рассредоточить информацию на экране и сосредоточится не на форме в целом, а на отдельных ее элементах. С приходом моды на Web 2.0 методика особенно популярна :)
process-6.gif Итак, применив все правила на практике, имеем неплохой вайфрэйм, готовый к употреблению :)


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , ,

О терминах

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


  • GUI / Графический пользовательский интерфейс — Разновидность пользовательского интерфейса, при котором система средств для взаимодействия пользователя с системой основанною на использовании графических образов.

  • IA / Информационная архитектура — одна из дисциплин проектирования пользовательских интерфейсов, представляющая собой совокупность методов и приёмов структурирования и организации информации.
  • Usability / Юзабилити — концепция разработки пользовательских интерфейсов систем, ориентированная на максимальное психологическое и эстетическое удобство для пользователя.
  • Design / Дизайн — понятие, объединяющее художественно-эстетическое творчество и умения с научно-обоснованной инженерной практикой в сфере массового индустриального производства и окружающего нас мира. Иными словами дизайн – это искусство создавать что-то одновременно красивое, удобное и функциональное, учитывая современные тенденции в мире, культурные особенности пользовательских групп и т.п.
  • Designer / Дизайнер — человек, профессионально занимающийся дизайном. Профессия дизайнера включает в себя ряд специалиазаций: промышленный дизайнер, дизайнер-полиграфист, дизайнер пользовательских интерфейсов, веб-дизайнер и т.д.
  • Web Designer / Веб-дизайнер — дизайнер, осуществляющий свою деятельность преимущественно в сети, а именно – например, создание дизайна веб-сайтов.
  • UI Designer / Дизайнер пользовательских интерфейсов, UI-дизайнер — дизайнер, занимающийся проектированием пользовательских интерфейсов.
  • Information Architect / Информационный архитектор — специалист в области структурирования, реорганизации и правильной подачи информации. Часто работает в паре с UI дизайнером для построения пользовательского интерфейса.
  • Front-end Developer / Front-end разработчик — специалист, разрабатывающий набор прототипов информационных систем под руководством UI-дизайнера. Ему, как правило, необходимы навыки в HTML, DHTML, XTML, CSS, Macromedia Flash, ActionScript, системах управления контентом, кросс-браузерной верстке.

RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: ,

Раз-два-три-четыре-пять

В широком смысле, дизайн пользовательского интерфейса — это комплексный и многоаспектный итерационный процесс проектирования интерфейса взаимодействия (точки соприкосновения) человека и системы, который обычно включает в себя пять следующих дисциплин:
  • Сбор и изучение функциональных требований к системе, анализ типичных пользователей;
  • Информационная архитектура и построение скелетов пользовательского интерфейса;
  • Юзабилити-тестирование;
  • Создание графического дизайна пользовательского интерфейса;
  • Прототипирование пользовательского интерфейса.

Фаза 1. Сбор функциональных требований

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

Фаза 2. Информационная архитектура

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

Фаза 3. Юзабилити-тестирование

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

Фаза 4. Графический дизайн пользовательского интерфейса

Графический облик интерфейса создает UI-дизайнер. Это наиболее творческая работа, требующая большого опыта, усидчивости и скрупулезности. На этом этапе интерфейс системы приобретает необходимый законченный вид. Часто заказчик уже имеет брэнд бук или стайл гайд (brand book и style guide — набор описательной документации для дизайнера о корпоративных стандартах заказчика), задача дизайнера — угодить всем, разработать такой дизайн, который бы соответствовал всем требованиям системы, удовлетворял бы заказчика и сочетался бы с задумками информационного архитектора. На данном этапе может понадобиться помощь смежных специалистов: иллюстратора (художника), 3D-моделлера и других.

Фаза 5. Прототипирование пользовательского интерфейса

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


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: ,

Раз и навсегда. Мифы о дизайнерах

Давайте развеем самые популярные мифы о дизайне и дизайнерах.

Миф 1. Дизайнер — это человек, умеющий рисовать. Есть очень мало общего между профессией дизайнера и иллюстратора (или художника, если хотите). Можно сказать так: иллюстратор — это человек рисующий, а дизайнер — это человек придумывающий.


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

Миф 2. По сравнению с другими специальностями работа дизайнера проста и не требует никакого умственного напряжения. Так могут говорить только люди, далекие от самой профессии. Я бы сказал так: нет более сложной и одновременно более интересной профессии, чем дизайнер. Если сомневаетесь, обратитесь к переводу слова «design»:

Design [di’zain]
сущ.: замысел, план, цель, умысел, интрига(!);
гл.: задумывать, придумывать, разрабатывать, замышлять, проектировать, конструировать;
Дизайнер стоит в одном ряду с архитектором, скульптором, модельером и прочими замечательными профессиями. Профессия дизайнера уникальна широтой охвата предметных областей и технологий. Профессиональный дизайнер никогда не привязывается к конкретным технологиям и идеям, сначала он придумывает, что необходимо разработать и доказывает почему это необходимо разрабатывать, а уже потом как это необходимо реализовать. В конце концов, дизайнер может обратиться к иллюстратору для того, чтобы нарисовать иллюстрацию или каким-либо образом оформить его идею, но сама идея, способы достижения цели, интерактивные составляющие идеи, смысл и взаимодействие отдельных ее компонентов — все это прорабатывается именно дизайнером и вынашивается в его голове.

Миф 3. Дизайнером не становятся, дизайнером надо родиться.
Отчасти это так, но только лишь отчасти. Не буду утверждать, что дизайнером может стать любой, однако, доля правды в этом есть. Я не знаю ни одного заведения (высшего, среднего — любого) в этой стране, которое бы по-настоящему обучало профессии дизайнера. Частично это происходит потому, что очень сложно отстроить сам процесс обучения таких специалистов, другой проблемой является отсутствие понимания самой профессии и базы для воспитания таких специалистов.

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

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

RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: ,

Голосуй или проиграешь

Бесконечно можно смотреть на то, как горит огонь, течет река и программисты проектируют формы... О формах и их проектировании также можно писать бесконечно. Виной тому — сложность процесса и зачастую непонимание авторов насколько важно относиться к проектированию.


Так, 40% менеджеров, получивших форму, приведенную на рис. 1, не смогли понять в какую ячейку следует вносить оценки.

«Evaluation Form». Начальная версия
Рис. 1. «Evaluation Form». Начальная версия

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

Переделка формы заняла всего 5 минут: «Evaluation Form».Переработанная версия
Рис. 2. «Evaluation Form». Переработанная версия


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , , ,

Выпадающее меню Skype

Кажется, ну что можно улучшить в выпадающем меню — вроде бы все уже придумано? Ан-нет. Великолепную идею использования иконок в выпадающем меню показывает Skype:
Выпадающее меню Skype

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

Очень практично!
RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , , ,

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

Когда мы говорим про оценку (review, inspection) пользовательского интерфейса, то чаще всего подразумеваем экспертную оценку интерфейса специалистами по юзабилити или по проектированию интерфейсов. Традиционно считается, что оценки пользовательского интерфейса неспециалистами опасна, так как она может ввести проектировщика и проектную команду в заблуждение и даже нанести вред проекту.


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

Так чьей же помощью может воспользоваться проектировщик взаимодействия для оценки пользовательского интерфейса?

Самооценка Вроде бы самое очевидное, но требует определенной организованности и силы воли. Главное не лениться. Перед тем как показывать интерфейс (прототип, экраны, и т.д.) кому-либо другому следует ещё раз внимательно просмотреть все самому. Часто можно найти и исправить какие-либо мелкие недоработки.

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

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

Специалисты в предметной области приложения Что-то среднее между бизнес аналитиками и потенциальными пользователями. В случае специфической и сложной предметной области могут быть ценными советчиками.

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

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

Графические дизайнеры Удовлетворенность пользователя ¬ третий компонент юзабилити. И эстетическая удовлетворенность – часть удовлетворенности пользователя. То, что хорошо выглядит кажется более легким в использовании. Привлекайте по возможности графического дизайнера в начале работы над проектом, а потому периодически пользуйтесь его советами.

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

Потенциальные пользователи системы Система или отдельные сценарии ее использования, в случае большой системы, демонстрируется и подробно объясняется потенциальным пользователям. После происходит обсуждение увиденного. Оценка интерфейса потенциальными пользователями близка к таким юзабилити методам как: Contextual Interview, Focus Group, Active Participation Testing.

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


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , ,

Tuesday, April 03, 2007

Альтернативные методы юзабилити тестирования

В этой статье вы найдете краткое описание нескольких интересных методов юзабилити тестирования "по дешевке" или "партизанского юзабилити".


Тестирование сценариев
Разрабатываемую систему можно начинать тестировать ещё до создания бумажных прототипов. Пользователям представляются разработанные сценарии использования. Лучше не заставлять их читать сценарии самим, а провести презентацию. После проводится обсуждение представленного, сценарии исправляются основываясь на полученных отзывах.


5-секундный тест
Этот вид тестирования разработан компанией User Interface Engineering (user/">http://www.uie.com). Перед тем, как показать пользователю страницу сайта, его информируют о том, что страница будет показана всего на 5 секунд и просят постараться запомнить увиденное. После показываются ключевые экраны сайта (на бумаге или на экране). Через 5 секунд экраны убираются через и пользователь описывает увиденное (словами или на бумаге). Исследователи также могут задать несколько общих вопросов на понимание пользователем назначения показанной страницы.

Метод лучше всего использовать для тестирования ключевых информационных страниц, которые имеют ярко выраженное основное назначение. (Например, страница сбора пожертвований на сайте Красного Креста).
Оригинальная статья: Оригинальная">http://www.uie.com/articles/five_second_test


Коридорный тест
Радикальная интерпретация Джоэлом Спольски знаменитой статьи Якоба/">Якоба Нильсена о том, почему 5 пользователей достаточно для тестирования.

Вместо подбора репрезентативных представителей пользователей для быстрого тестирования и получения качественных данных используются те, кто есть под рукою. Достаточно просто выдернуть первого встреченного в коридоре (отсюда и «коридорное тестирование»), сидящего в соседнем офисе или даже за соседним столом. Провести 5 таких тестов и выявить основные юзабилити проблемы. Оригинальная статья: http://www.joelonsoftware.com/articles/fog0000000043.html


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , , , , ,

Monday, April 02, 2007

Обзор инструментов для UI-дизайнера и Информационного архитектора

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


1. Microsoft Visio
Компания: Microsoft
URL: http://office.microsoft.com/en-us/visio

Итак, начнем со старого доброго MS Visio. Visio—наше все. Этот векторный редактор для создания диаграмм превратился в стандарт де-факто для UI дизайнеров и инфо-архов.


2. Axure RP
Компания: Axure
URL: http://www.axure.com

Это хорошо известный и легкий инструмент для UI проектирования, вайфрэймов и разработки прототипов, поддерживает создание дизайна страниц, виджеты, экспорт в Microsoft Word и т.д.


3. Adobe Creative Studio
Компания: Adobe
URL: http://www.adobe.com/products/photoshop/photoshop

Вы можете сказать мне, что Adobe CS не предназначен для полноценного создания вайфрэймов и прототипов, но я хочу напомнить, что миллионы дизайнеров во всем мире стали использовать CS в качестве главного инструмента построение UI.


4. Elegance Tech Lucid Spec
Компания: Elegance Tech
URL: http://www.elegancetech.com/LS/LS.aspx

Подобно Axure, LucidSpec предлагает возможность создания статического прототипа приложения. К сожалению, продукт не является стопроцентным «simulation tool». Попробуйте.


5. iRise Studio, iRise Manager, iRise Server, iRise Reader, iRise iDoc
Компания: iRise
URL: http://www.irise.com/products/diagram.php

Вот как представляет свои продуйты iRise на своем сайте:
“iRise simulations are so close to the final applications that people can't tell the difference between the two. SunTrust recently unveiled their new banking application-a critical element in retaining acquired customers through a merger with NCF Bank-that was simulated first. In addition to look & feel, the user experience between the simulation and the final website are nearly identical.”

Действительно классные инструменты! Полнофункциональный подход. Поддержка многих функций.


6. Serena Composer
Компания: Serena
URL: http://www.serena.com/US/products/composer/

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


7. Simunication Enterprise Simulator
Компания: Simunication
URL: http://www.simunication.com/

Хороший веб-инструмент со сложным UI :)
Процесс построения UI включает в себя создание вариантов использования (use cases), затем моделирования UI на основе этих вариантов использования.
Несомненным плюсом является то, что прототипы распространяются через веб — иными словами, заказчику нужен лишь браузер, чтобы изучить их.


8. Sofea Profesy
Компания: Sofea
URL: http://www.sofeainc.com/

Profesy похож на Composer, поэтому перенял его достоинства и недостатки.


9. Intuitect Professional
Компания: Intuitect
URL: http://www.intuitect.com/products/intuitect-professional.php

Intuitect Professional позволяет создавать карты сайта, вайфрэймы, прототипы и диаграммы. К недостаткам можно отнести слабую функциональность в некоторых областях. К достоинствам — легкость и возможность использования в качестве add-оn к Visio.


10. OmniGroup OmniGraffle
Компания: OmniGroup
URL: http://www.omnigroup.com/applications/omnigraffle/

Это скорее редактор бизнесc-графики, чем инструмент проектирования UI.
На данный момент я нашел только родную версию для Mac OS X. Инструмент является лучшим редактором бизнесс-графики для этой ОС.


См. также:
Бизнесс-графика, Вайфрэйминг, Диаграммы:
  • http://www.smartdraw.com/

  • http://www.mindjet.com/

  • http://www.mockupscreens.com/


  • Анализаторы кликов:
  • http://www.labsmedia.com/clickheat/

  • http://crazyegg.com/

  • http://clickdensity.com/

  • RSS-подписка
    Читайте и комментируйте оригинальную статью на ui.by

    Labels: , , , , ,

    Tuesday, March 13, 2007

    Ты меня понимаешь?

    Уважаемые читатели! В связи с перенастройкой сервера на новую кодировку некоторые комментарии безвозвратно утеряны. Приносим свои извинения.

    Теперь блог www.ui.by можно читать на Livejournal и Blogger!