Использование ПО с открытым исходным кодом для создания Web-сайта для совместной работы: Часть 2. Дизайн для пользователей

Исследуйте процесс проектирования Web-сайта для ограниченного сообщества пользователей, который поможет вам учесть опыт использования приложений.

Элистер Льюис-Боуэн, старший инженер-программист, IBM

Элистер Льюис-БоуэнЭлистер Льюис-Боуэн (Alister Lewis-Bowen) работает старшим инженером-программистом в IBM Internet Technology Group. Он занимается Интернет и web-технологиями как сотрудник IBM UK с 1993. Элистер был переведен в США для работы над Web-сайтами спортивных событий, спонсируемых IBM, а затем как старший Web-мастер ibm.com. В настоящее время он помогает создавать семантические Web-прототипы.



Стефен Эванчик, инженер-программист, IBM

Стефен ЭванчикСтефен Эванчик (Stephen Evanchik) работает инженером-программистом в IBM Internet Technology Group. Он принимает участие во многих проектах с открытыми исходными кодами, самым известным из которых является его IBM TrackPoint-драйвер в ядре Linux. Стефен в настоящее время работает с появляющимися семантическими Web-технологиями.



Луис Вайцман, старший инженер-программист, IBM

Луис ВайцманЛуис Вайцман (Louis Weitzman) работает старшим инженером-программистом в IBM Internet Technology Group. В течение 30 лет он работал на стыке дизайна и вычислений. Помогал разрабатывать XML, фрагментированную систему управления содержимым, используемую для ibm.com, а в настоящее время участвует в обеспечении процесса проектирования новых проектов.



25.12.2006

Введение

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

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

На рисунке 1 приведен обзор нашего процесса, состоящего из четырех основных фаз:

  • Анализ
  • Проектирование
  • Создание прототипа
  • Разработка

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

Рисунок 1. Четыре фазы проектирования: анализ, проектирование, создание прототипа и разработка
Рисунок 1. Четыре фазы проектирования: анализ, проектирование, создание прототипа и разработка

Более крупная версия рисунка

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

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

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

Фаза анализа

Фаза анализа фокусируется на сборе информации для лучшего понимания проекта. На этой фазе собирается информация о бизнес-целях и задачах пользователей.

Firmitas, Utilitas, Venustas

Витрувий, известный архитектор, утверждал в своей книге "De architectura", что структура должна выражать три качества (firmitas, utilitas, venustas) - она должна быть прочной (или долговечной), полезной и красивой. Это истинно для любого хорошего проекта. Он должен быть долговечным и не ломаться. Он должен обеспечивать некоторую полезность и потребительскую ценность. Наконец, он должен быть красивым и очаровывать пользователя, для того чтобы он снова захотел использовать данный артефакт.

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

Решение задачи началось с анализа существующего Web-сайта. Мы оценивали Web-сайт в терминах четырех основных компонентов:

Такая методология основана, главным образом, на рекомендациях TSDesign User Experience Audit (см. раздел "Ресурсы"). Эти категории анализа используются в нашем процессе как способ организации оценок, рекомендаций и проектных решений. Мы интегрировали информацию из анализа и предоставленных полезных рекомендаций. Здесь кратко рассмотрены бизнес-цели и цели пользователей, а также каждая область анализа.

Бизнес-цели

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

  • Более интенсивная совместная работа с клиентами по решениям компании и стратегиям.
  • Сбор информации от пользователей.
  • Распространение информации об организации и предстоящих событиях.
  • Заинтересованность пользователей.

Пользовательские цели

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

Для нашего дизайна к пользовательским целям относятся:

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

Аудитория - это описание всех пользователей, пришедших на сайт, а также причин, почему они это сделали. Идентифицированные типы пользователей затем объединяются в основные роли. Затем пользователи-прототипы для каждой категории идентифицируются как персонажи, что определено у Купера (Cooper) (см. раздел "Ресурсы"). Метод Купера GOAL-DIRECTED® (ориентирование на цели) основывается на персонажах, выражающих специфические интересы и являющихся вымышленными людьми, которые полагаются на созданные продукты, службы и системы.

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

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

Рисунок 2. Преобразование аудитории пользователей в удобные персонажи
Рисунок 2. Преобразование аудитории пользователей в удобные персонажи

Содержимое

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

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

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

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

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

Рисунок 3. Панель навигации, до и после
Рисунок 3. Панель навигации, до и после

Навигация и иерархия

Навигация и иерархия важны для облегчения выполнения пользователями своих задач; они могут помочь создать естественный и простой в использовании интерфейс. Они должны быть понятными, простыми и предсказуемыми. Должно быть очевидно, где окажется пользователь после нажатия на ссылку. Круг (Krug) сравнивает навигацию в "реальном мире" с навигацией по Web-сайту (см. раздел "Ресурсы"). Он отмечает, что в интерактивном режиме (online) не имеют смысла масштаб, направление и месторасположение. Для преодоления этого противоречия Web-сайты должны следовать нескольким общим методикам и соглашениям, включая:

Соответствующие названия
При наличии обозначений элементов, которые соответствуют использованию элементов, пользователи будут понимать, где они находятся и куда могут перейти после нажатия на ссылку. Способность правильно указывать, куда ссылка приведет пользователя, очень важна. Это можно сделать, предоставляя "суть" целевой страницы.
Соответствующие пути
Предоставление соответствующих путей к элементам в иерархии помогает пользователям создать правильную мысленную модель Web-сайта и понять, в каком месте сайта они находятся.
Ощущение места
Хорошее приложение всегда обеспечивает хорошее чувство места, то есть пользователи знают, где они находятся и в каком контексте. Кроме того, они будут знать, куда идти дальше. Это можно сделать при помощи визуальных элементов (брендинг) и путем указания месторасположения страницы в иерархии сайта.
Перемещение по иерархии
Содержимое Web-сайта должно быть соответствующим образом оформлено гиперссылками. В некоторых случаях предопределяются пути, для того чтобы помочь пользователям определить, где они находятся в информационном пространстве, и предоставить быстрый способ возвращения по иерархии. Например, ссылки на остальные части нашего Web-сайта должны были быть активными ссылками. Имена членов сообщества должны были быть ссылками на личные профили.

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

Рисунок 4. Цвет для создания ощущения места при навигации
Рисунок 4. Цвет для создания ощущения места при навигации

Взаимодействие

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

Четкость инструкций
Предоставление пользователям простых и понятных инструкций. В этом случае работает принцип "чем меньше, тем лучше", а простота инструкций гарантирует, что пользователи прочтут и выполнят их. Хотя большинство действий были действительны только для оперативного персонала, все они обозначались простыми словами и единообразно отображались на сайте.
Четкая обратная реакция
Важно обеспечить пользователям постоянную и понятную обратную реакцию для любых действий, которые они могут инициировать. Сообщения пользователю должны быть пересмотрены на согласованность языка и терминологии. Обратная реакция не должна ни в коем случае запутать пользователя.
Эффективное завершение
Система должна поддерживать эффективное завершение задач. Предоставляйте пользователям альтернативные способы завершения (или нет) конкретной задачи. Обеспечьте соответствующую обратную реакцию, сигнализирующую о завершении задач.
Обработка ошибок
Везде, где это возможно, избегайте ситуаций, в которых могут возникнуть условия для появления ошибок. Но если ошибки все-таки возникают, их обработка должна быть простой и понятной. Любые сообщения пользователю не должны быть надменными, а также не должны обвинять его в создании текущей ситуации.
Предопределенное событие
Предопределенное событие - это управление ожидаемым результатом (например, предоставление указания последствий возможных действий пользователя). Предоставьте механизм уведомления пользователей о последствиях их действий.
Отсутствие тупиковых ситуаций
Интерфейс не должен заводить пользователей в тупиковые ситуации, в которых они не будут знать, что делать и куда идти дальше.
Ощущение продвижения
Взаимодействие с приложением должно вызывать у пользователей ощущение продвижения в процессе выполнении их задач.
Сотрудничество
Совместная работа не всегда является целью дизайна, но в объединенном сетями мире все более обычным становится ее поддержка в проектах. Там, где возможно, поддерживайте совместную работу пользователей для стимулирования чувства принадлежности к сообществу. Члены сообщества могут оказывать поддержку друг другу посредством использования пользовательских комментариев и обзоров.

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

Рисунок 5. Модифицированная карта сайта для легкого поиска нужной информации
Рисунок 5. Модифицированная карта сайта для легкого поиска нужной информации

Визуальный язык

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

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

Использование цвета помогает определить бренд и визуальный язык. Как показано на рисунке 6, цвет помогает создать чувство места на Web-сайте.

Рисунок 6. Использование цвета для создания чувства места для различных типов страниц
Рисунок 6. Использование цвета для создания чувства места для различных типов страниц

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


Фаза проектирования

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

Содержимое

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

Рисунок 7. Схема содержимого и взаимоотношение с другими элементами
Рисунок 7. Схема содержимого и взаимоотношение с другими элементами

Навигация и иерархия формируют основу Web-сайта, где мы выделяем основные категории информации и их атрибуты. Затем они организуются в карту Web-сайта и набор меню, кнопок и связанных ссылок. Имеется три уровня навигации, которые отражаются в карте сайта, показанной на рисунке 8.

Рисунок 8. Организация страниц по уровням навигации
Рисунок 8. Организация страниц по уровням навигации

Более крупная версия рисунка

Взаимодействие

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

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

Рисунок 9. Последовательность взаимодействия для простой задачи
Рисунок 9. Последовательность взаимодействия для простой задачи

Визуальный язык

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

Цвет
Это хорошее визуальное средство, помогающее создать индивидуальность и внешний вид Web-сайта. Для поддержки простоты, одной из целей проектирования, используется белый фон с нейтральным серым цветом, что определяет простой, ясный внешний вид. Цель - позволить читателю сконцентрироваться на содержимом и взаимодействии с ним.
Текстовое оформление
Еще одно средство определения стиля Web-сайта. Опять же, целью является отображение простого, понятного и расширяемого набора шрифтов. Используемые шрифты также должны работать на разных платформах или, как минимум, замещаться общими шрифтами. Пример приведен на рисунке 10.
Рисунок 10. Рекомендации по стилю шрифтов для Web-сайта
Рисунок 10. Рекомендации по стилю шрифтов для Web-сайта
Изображения, пиктограммы и логотип
Иконография - это еще один технический прием, который вы можете использовать для формирования в проекте уникального бренда и ощущения места.
Схема и координатная сетка
Схема объединяет все компоненты вместе. Использование координатной сетки является хорошим методом обеспечения порядка для того, что в противном случае могло бы быть сложным представлением.

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


Фаза создания прототипа

На фазе создания прототипа информация, собранная в предыдущих фазах, используется для создания альтернативных проектных решений. Эти альтернативы могут иметь множество форм, начиная с грубых прототипов (легких в изготовлении (как на рисунке 11)) и заканчивая высококачественными прототипами, имеющими механизм взаимодействия с пользователем. Как описано у Бергера (Berger), существует много типов прототипов, от абстрактных до более конкретных (см. раздел "Ресурсы"). К различным технологиям создания прототипов относятся:

  • Интерактивная сортировка карт
  • Бумажные прототипы
  • Каркасные модели
  • Модели в виде электронных таблиц Excel
  • Модели в Photoshop
  • Флэш-демонстрации
  • Реализации, основанные на кодировании

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

Рисунок 11. Технологии создания прототипов
Рисунок 11. Технологии создания прототипов

При создании прототипов существует компромисс между обеспечением высокой степени детализации и возможностью исследования большего числа альтернатив в заданный временной период. Важны прототипы обоих типов. Однако на ранних стадиях проектирования слишком большая отображаемая детализация может увести от цели прототипа и направить внимание не на те аспекты дизайна. Как проиллюстрировал Йин Йин Вонг (Yin Yin Wong) в своей статье по быстрому созданию прототипов (см. раздел "Ресурсы"), существует широкий диапазон доступных технологий графического дизайна, которые могут использовать разработчики. Например, если вы занимаетесь схемой, то можете сконцентрировать дискуссию путем организации вашего прототипа при помощи текстовых блоков, которые отображают информационную структуру без излишних подробностей, как показано на рисунке 12.

Рисунок 12. Прототип, использующий текстовые блоки для иллюстрации информационной структуры
Рисунок 12. Прототип, использующий текстовые блоки для иллюстрации информационной структуры

Марк Реттиг (Marc Rettig) (см. раздел "Ресурсы") описывает мотивации для использования прототипов низкой точности:

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

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

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

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

После получения требований к страницам из моделей низкой точности мы использовали прототипы для иллюстрации этапов выполнения индивидуальной задачи с высокой точностью. Эти прототипы были статичными, с высокой разрешающей способностью и с большой детализацией визуального языка. На рисунке 13 показан пример прототипа с высокой разрешающей способностью страницы конференции Web-сайта.

Рисунок 13. Прототип с высокой разрешающей способностью
Рисунок 13. Прототип с высокой разрешающей способностью

Фаза разработки

Последней фазой процесса является создание Web-сайта. На фазе разработки Web-сайт фактически создается и тестируется. Первые три фазы предоставляют принципы реализации проекта. Фаза разработки концентрируется на этой реализации.

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


Резюме

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

После проектирования Web-сайта мы начинаем фазу реализации. В следующих двух статьях данной серии описывается процесс установки среды разработки для Windows (часть 3) и Linux (часть 4). После работы с этими статьями вы будете иметь рабочую среду, необходимую для начала работы с Drupal и для создания вашего собственного Web-сайта. В следующих статьях будет рассматриваться специфика разработки основанного на Drupal Web-сайта.

Ресурсы

Научиться

Получить продукты и технологии

  • Drupal: Система управления содержимым с открытым исходным кодом.
  • MySQL: Система управления базами данных с открытым исходным кодом.
  • PHP: Web-язык для поддержки динамического содержимого.
  • PHPMyAdmin: PHP-программа, предназначенная для администрирования MySQL через Web.
  • MySQL Query Browser: Графическое клиентское приложение для работы с базами данных MySQL и выполнения запросов.
  • MySQL Administrator: GUI-программа для администрирования MySQL-сервера.
  • Apache: Web-сервер с открытым исходным кодом.
  • Eclipse: Среда разработки с открытым исходным кодом.
  • CVS: Система управления исходными кодами, интегрированная в Eclipse для отслеживания изменений кода.

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source
ArticleID=185503
ArticleTitle=Использование ПО с открытым исходным кодом для создания Web-сайта для совместной работы: Часть 2. Дизайн для пользователей
publish-date=12252006