Когда я начал писать об архитектуре веб-сайтов, мне в голову пришла идея проекта строительства небоскреба.
Я подумал об огромном небоскребе с ресторанами, розничными магазинами, офисами, спортивными залами и жилыми помещениями — о большом автономном, компактном сообществе само по себе.
Никто и никогда не начнет процесс строительства такого небоскреба, пока все не будет должным образом спланировано и затянуто.
Я не архитектор или строительный подрядчик, но я все же вижу бесчисленные требования, которые вам нужно выполнить, прежде чем приступить к строительству. Детали планирования помещений, поиск хороших строительных материалов, управление различными командами, участвующими в строительстве здания, разрешения на зонирование, распределение финансирования, планирование стихийных бедствий на случай землетрясений, список можно продолжить.
Все считают дизайн важной составляющей вещей; будь то дизайн небоскреба или шины вашего автомобиля.
Дизайн — это не только привнесение удобства, инноваций и комфорта в жизнь людей, но и во многих случаях, таких как небоскребы и автомобильные шины, от этого зависят жизнь и безопасность людей.
Я не архитектор.
Я айтишник. Точнее, я концепт-дизайнер .
В течение многих лет я разрабатывал стратегии и проводил исследования для очень крупных и амбициозных веб-проектов.
Концептуальный дизайн — это основа надежной архитектуры веб-сайта. Как и при строительстве небоскреба, вам нужен надежный план для создания крупномасштабных веб-сайтов.
В этой статье я расскажу о процессе нашей компании по созданию больших веб-сайтов.
Архитектор сайта
Давайте сначала выясним, чья роль заключается в том, чтобы делать то, что называется архитектурой веб-сайта.
На мой взгляд, эту работу выполняет архитектор веб-сайтов.
Я намеренно избегаю упоминания здесь дизайнеров UI / UX и разработчиков IA, потому что архитектура веб-сайта выходит за рамки — или, скорее, охватывает — пользовательский интерфейс, взаимодействие с пользователем и информационную архитектуру сайта.
Архитектор веб-сайта должен иметь четкое представление о юзабилити, глубокие знания инструментов веб-разработки, технологий онлайн-маркетинга и всего остального, что связано с созданием и обслуживанием веб-сайта.
Так же, как архитектор небоскреба или жилого дома, она должна хорошо разбираться в инструментах, материалах и процессах строительства, чтобы эффективно и результативно планировать продукт.
Этот человек, наш архитектор веб-сайтов, должен обладать сильным логическим мышлением, аналитическим складом ума, разбираться в коммерческих аспектах веб-сайтов и быть внимательным к деталям.
Конечно, для гарантированно качественного продукта архитектор может / должен проконсультироваться с другими специалистами: дизайнерами, разработчиками и т. Д.
Как видите, идеальный веб-архитектор, по моему мнению, должен быть специалистом широкого профиля, потому что, как вы скоро увидите ниже, от этого никуда не деться.
Обзор процесса создания архитектуры веб-сайта
Я дам вам лишь общий обзор процесса создания архитектуры веб-сайта моей компании.
Процесс разделен на эти 11 этапов:
- Краткое описание проекта
- Определение цели веб-сайта
- Определите целевую аудиторию
- Анализ конкурентов
- Цель-проблема-решение пользователя
- Отображение сценария
- Ментальная карта
- Информационная архитектура
- Прототипирование
- Тестирование юзабилити прототипа
- Спецификация проекта
Как видите, все эти этапы связаны друг с другом, и мы организовали их последовательно.
Обсудим каждый этап.
Этап 1: Краткое описание проекта
Сбор необходимых данных от клиента и вашей команды обычно может занять 2 дня. Хотя вы должны быть максимально тщательными, также имейте в виду, что всегда есть место для доработки и дополнительного сбора данных на других этапах процесса архитектуры веб-сайта, поэтому не сбивайтесь с пути, если некоторые фрагменты информации не получат убежища. t был передан вам.
Определите цели и ожидаемые результаты
Каковы цели и ожидаемые результаты клиента в рамках этого проекта, и как он видит конечный результат проекта?
Вы должны четко понимать критерии оценки этих целей и ожидаемых результатов, чтобы убедиться, что вы оба находитесь на одной волне.
Вы должны быть как можно более конкретными; цели и результаты должны поддаваться количественной оценке и измерению.
Мозговой штурм с клиентом
Попросите клиента рассказать вам все, что у него на уме. Слушайте, что он говорит, терпеливо и вдумчиво. Делать заметки. Сосредоточьтесь на том, что они говорят, и не поддавайтесь желанию вмешаться. Ваши идеи и замечания могут подождать.
Если клиент увлечен своими идеями для проекта, он может часами говорить об этом, что совершенно нормально.
Когда клиент действительно вовлечен в проект, с ним очень приятно работать и работать с ним.
Резюме идеи клиента
В конце сеанса мозгового штурма вы должны попросить клиента резюмировать все — если ему удастся свести свою идею к одному предложению, то идея ясна. В противном случае вам потребуется лучшая ясность и сосредоточенность.
Определите целевую аудиторию
Кто является целевой аудиторией клиента? Кто будет использовать этот сайт и какую выгоду они могут получить от него?
Клиент должен иметь четкое представление о том, кто является конечным пользователем, чтобы мы могли создать для него веб-сайт. В противном случае это похоже на игру в дартс с закрытыми глазами: вы знаете, где находится цель, но поразить ее будет практически невозможно.
Вы также можете начать обсуждение того, что клиент уже знает о своей целевой демографической группе: пол, возраст, местоположение и т. Д.
Определите конкурентов
Кто прямые и косвенные конкуренты сайта? Заказчик и архитектор веб-сайта должны быть осведомлены о существующей конкурентной среде.
Всегда есть конкуренты. Даже если идея сайта полностью уникальна, есть как минимум косвенные конкуренты.
Познакомьтесь с лицами, принимающими решения
Встречайтесь с людьми, которые принимают решения. Обсудите крайние сроки, лимит бюджета, наличие ресурсов и так далее.
Организационные вопросы, дело.
Результаты и итоги
На некоторые из ваших вопросов придется подождать, пока на них вы не ответите в процессе создания архитектуры веб-сайта. На этапе брифинга по проекту вы получите базовые данные, которые позволят вам получить общее представление о том, что ваш клиент уже знает о своем проекте.
Очень важно понять потребности и ожидания клиента на этой ранней стадии и выбрать правильное направление для проекта прямо на старте. Цена, которую вы платите за то, что не уделили достаточно времени этому простому, но важному первому этапу, экспоненциально растет по мере развития процесса веб-архитектуры и создания веб-сайтов.
Результатом этапа брифинга является письменный документ с подробной информацией, предоставленной вам клиентом и лицами, принимающими решения. Этот документ должен быть одобрен и проверен клиентом. Это может быть дизайн-бриф.
Этап 2: определение цели веб-сайта
Веб-сайту нужны цели. Цели клиента могут быть следующими: монетизировать сайт, увеличить долю офлайн-рынка с помощью онлайн-маркетинга, лучше привлекать клиентов в Интернете и т. Д.
Цели определяют направление всего процесса создания веб-сайта.
Помимо определения целей веб-сайта, вам также необходимо определить критерии успеха в соответствии с клиентом.
Хороший способ установить цели — использовать критерии SMART. То есть каждая цель должна быть:
- Специфический
- Измеримый
- Достижимый
- Соответствующий
- Ограниченный по времени
Например:
- Получите доход в размере 50 000 долларов в течение 5 лет за счет рекламы, информационных продуктов, таких как электронные книги, и платных планов подписки.
- Помогите пользователям выбрать, какое животное им принадлежит
- Предоставлять пользователям советы по вопросам домашних животных
- Создайте маркетинговую платформу для товаров для домашних животных
Результаты и итоги
В результате у вас будет документ, содержащий 2 списка:
- Список целей проекта
- Список целей клиента
Этот документ нуждается в подписании со стороны клиента / лиц, принимающих решения.
Этап 3: определение целевой аудитории
На этом этапе проводится исследование целевой аудитории. Нам нужно определить, какие типы пользователей будут заходить на сайт, а также определить потребности каждой группы.
Соберите данные о характеристиках
Нам нужно создать общий образ для каждой группы. Дизайн пользовательского интерфейса во многом зависит от результатов этого этапа. Чтобы начать с этого, нам сначала нужно определить общие характеристики нашей аудитории.
Определите социально-демографические характеристики: мы должны выяснить пол, возраст, уровень образования и род занятий нашей целевой аудитории. Ориентация на подростков (15-18) будет отличаться от сайта, рассчитанного на людей старше 60 лет.
Определите психологические характеристики: мы должны определить образ жизни, личность, темперамент, мотивацию, систему ценностей, философию и т. Д. Нашей целевой аудитории. Эта информация даже более важна, чем социально-демографические характеристики с точки зрения дизайна пользовательского интерфейса. Если, например, наши пользователи являются первыми пользователями, пользовательский интерфейс и предварительная стратегия будут отличаться от других веб-сайтов.
Определите характеристики желаний / потребностей : мы должны выяснить, почему наш пользователь хотел бы зарегистрироваться на нашем веб-сайте, какие проблемы они хотят решить с помощью нашего сайта и т. Д. Мы определяем их болевые точки и стремимся решить их с помощью нашего веб-сайта.
Эта информация жизненно важна, но ее трудно найти. Если вы работаете над проектом по редизайну веб-сайта , клиент может уже иметь эту информацию, если у него есть инструменты обратной связи с пользователями .
Иногда он может быть у конкурента (но удачи, если он поделится им с вами). В этом случае вам необходимо провести исследования пользователей и опросы.
Характеристики географического положения: страна, город, регион, континент — все это полезная информация. Быть онлайн не исключает полностью фактор местоположения.
Иногда геотаргетинг — это первое, о чем следует подумать при создании национального сайта, государственного сайта или любого другого сайта, зависящего от местоположения.
Более того, контент и копирайтинг веб-сайтов во многом определяется местонахождением аудитории.
Это понадобится вам, когда вы находитесь на этапе информационной архитектуры (IA) .
Создавайте образы пользователей
Когда портрет целевой аудитории четко определен, мы можем создавать персонажей.
Основная цель веб-архитектора здесь — определить все возможные группы пользователей, начиная с самой большой (основной) группы и заканчивая самой маленькой.
Затем мы создаем персонажа для каждой группы.
Каждый из разрабатываемых вами персонажей должен иметь:
- Имя и Фамилия (Не используйте имена реальных людей, чтобы избежать искажения истории)
- Фото
- Возраст
- Расположение
- Занятие
- Семейное положение
- Хобби
- Навыки
- Проблемы, которые им нужно решить
- Личный и профессиональный опыт
Чтобы получить лучшее представление о вашей целевой аудитории, вы можете взять интервью у потенциальных пользователей. На данный момент речь идет о маркетинговых исследованиях.
Результаты и итоги
После завершения этого этапа у вас должны появиться две вещи:
- Документ с общей характеристикой целевой аудитории.
- Персоны
Этап 4: Анализ конкурентов
Чтобы обеспечить успех проекта, вам нужно знать своих конкурентов и иметь хорошие идеи, как их опередить. Вы должны обнаружить их сильные и слабые стороны.
Существует несколько методологий, используемых при проведении анализа конкурентов, включая опрос участников рынка, а также исследования в Интернете и печатных СМИ.
Если вы создаете локальный веб-сайт, не ограничивайте себя только своей страной. Просмотрите международные веб-сайты, которые делают похожие вещи. Скорее всего, где-то в мире уже запущены аналогичные или аналогичные проекты. Некоторые из этих проектов могут быть довольно вдохновляющими.
Например, мы работали над социальной сетью для любителей домашних животных для клиента из России. Прямых конкурентов на местном рынке мы не обнаружили. Однако есть несколько зарубежных сайтов и косвенные местные конкуренты. Они есть:
| КОНКУРЕНТ | ХАРАКТЕРИСТИКИ |
|---|---|
| www.dogster.com | международный, популярный, качественный |
| www.dogster.ru | Русский проект, достаточно популярный, удовлетворительное качество |
| www.catster.com | международный, популярный, качественный |
Конкуренты вашего веб-сайта могут быть прямыми или косвенными конкурентами.
- К прямым конкурентам можно отнести любой веб-сайт, работающий на одну и ту же базу пользователей и предлагающий аналогичные продукты. Например, прямым конкурентом Microsoft Windows является Apple Mac OS.
- Косвенные конкуренты — это конкуренты, которые предлагают похожие товары, но лишь частично удовлетворяют потребности целевой аудитории.
анализ SWOT
Существуют разные подходы к выявлению и анализу конкурентов. Мне больше всего нравится SWOT-анализ .
SWOT — что означает S trengths, W eaknesses, O pportunities и Т hreats — помогает указать сильные и слабые стороны ваших конкурентов, и что более важно, помогает вам в выяснении возможности проекта.
Анализируя конкурентов, вы можете обнаружить полезные функции и идеи, которые стоит адаптировать к вашему собственному веб-сайту — общие универсальные функции сайта, такие как системы комментирования, веб-формы и т. Д. В таких случаях нет необходимости изобретать велосипед.
Все хорошие идеи, которые у вас возникнут на этапе анализа конкурентов, потребуются для этапа составления интеллект-карт (который мы обсудим позже).
Результаты и итоги
Теперь у вас должно быть:
- Список прямых и косвенных конкурентов
- SWOT-анализ для каждого конкурента
- Резюме исследований (созданные идеи, рыночные возможности и т. Д.)
Этап 5: цель-проблема-решение пользователя
Исходя из созданных нами образов, мы можем приступить к работе над целью-проблемой-решением.
Цели пользователя
У каждого человека есть краткосрочные и долгосрочные цели.
Также могут быть подцели. Например, человек может желать улучшить свою карьеру, но сначала ему нужно найти работу. Подцель — найти работу, чтобы улучшить свою карьеру.
В рамках нашего веб-проекта мы определяем цели, проблемы человека и ищем решения для них.
Все цели должны быть хорошо продуманы. Нечеткие цели не помогут, так как невозможно решить все задачи в рамках одного сайта. Сосредоточьтесь на основных целях и составьте краткий список целей.
Некоторые клиенты думают, что если пользователи слушают музыку в Интернете, их сайт также должен предоставлять такую услугу, даже если их сайт не пытается решить эту проблему. Чем больше функций мы добавляем, тем более размытыми становятся наши основные цели.
Проблемы пользователей
Когда у нас есть список конкретных целей, мы можем определить конкретные проблемы.
Например, целью пользователя на нашем веб-сайте может быть поиск подрядчика, который сможет выполнить его строительный проект. Эта цель более сложная, чем кажется: как найти подходящего подрядчика для конкретного строительного проекта пользователя? Важно ли, чтобы подрядчик находился близко к месту строительства? Как мы позволим им быстро оценить многих кандидатов? Благодаря таким вопросам вы легко сможете генерировать идеи.
Наши решения
Когда мы закончили определение целей и проблем, пришло время спроектировать и разработать решения для них с помощью дизайна архитектуры веб-сайта.
Этот процесс приносит большую пользу архитектору веб-сайта, потому что он пытается решить проблемы, с которыми сталкиваются ее пользователи.
Результаты и итоги
В результате у нас будет матрица цель-проблема-решение, разработанная для каждого персонажа, который мы разработали для нашего веб-сайта.
Этап 6: Отображение сценария
Отображение сценария — это этап, посвященный выявлению возможных пользовательских потоков.
Еще раз, нам нужно мыслить как конечный пользователь и создавать вероятные сценарии его действий на нашем сайте.
У каждой цели каждого персонажа есть свой набор карт сценариев.
Эти сценарии помогают выявить слабые места в наших существующих идеях и знаниях. Сценарии также помогают архитектору веб-сайта впоследствии разрабатывать хорошие пользовательские потоки.
Результаты и итоги
У нас должны быть намечены сценарии для критических целей сайта, которые мы установили на предыдущем этапе.
Вот пример сценария:
Пользовательская цель:
Выбери собаку
Сценарий:
- Перейти на главную страницу
- Перейти в раздел «Зоопедия» на сайте.
- В разделе «Зоопедия» найдите темы и обсуждения о породах собак.
- Читайте интересующие темы и обсуждения
- Перейдите в раздел «Читать также», расположенный в конце темы, потому что там больше информации.
- Выберите 3 предпочитаемые породы собак
- Вернуться на веб-страницу верхнего уровня «Зоопедия»
- Читать еще
- Найдите ссылки на людей, продающих собак этих пород.
- Примите обоснованное окончательное решение
- Сходите в зоомагазин, чтобы купить питомца
Когда мы писали этот сценарий, мы в итоге добавили следующие функции сайта:
- Рубрикатор «Зоопедия»
- Виджеты «Читайте также»
- Ссылки на зоомагазины и продавцов собак на страницах с информацией о породах.
Как видите, сценарии помогают нам находить возможности для улучшения.
Смотрите также:
- Карты путешествий клиентов
Этап 7: ментальная карта
Когда у нас есть куча идей, это становится полезным, когда мы начинаем визуализировать и связывать их.
Этап майндмэппинга посвящен созданию прочной системы логически связанных идей, а также помогает нам вырезать ненужные вещи. Это популярный инструмент концептуализации дизайна.
Для создания интеллект-карт мы должны использовать Xmind.
Найдите свой список идей и разделите их на логические категории. Например, предположим, что мы работаем над веб-сайтом о недвижимости. Разделы сайта недвижимости могут быть:
- Каталог недвижимости
- Форумы сообщества
- Статьи / Новости
- Информационный центр
Отнесите все свои идеи к одной из этих категорий.
Если идея подходит более чем к одной категории, выберите наиболее подходящую для нее.
Мозговой штурм поможет отсеять бесполезные и ненужные функции, веб-страницы и т. Д.
Каждый раздел сайта должен быть логически спланирован. Не забывайте о функциях, зависящих от раздела (например, в нашем примере пользователь может оценивать каждое свойство). Отметьте это соединение стрелкой, чтобы запомнить зависимость (в нашем примере это перейдет в Каталог свойств).
Вы можете создать свои собственные символы для обозначения различных функциональных разделов. Например, если веб-архитектор не определился с тем, к какому разделу принадлежит определенная функция сайта, он может отметить это знаком вопроса. Эти символы действительно важны, если проект большой.
Результаты и итоги
В результате мы видим взаимосвязь функций и разделов сайта с высоты птичьего полета.
Этап 8: Информационная архитектура
Теперь, когда у нас есть подробная интеллектуальная карта нашего веб-сайта, мы можем начать работу над информационной структурой веб-сайта, которая станет основой его прототипа.
IA веб-сайта может быть создан с помощью программного обеспечения для создания блок-схем, такого как Visio .
Результаты и итоги
После этого этапа у вас должен получиться дизайн информационной архитектуры (ИА).
Смотрите также:
- 6 типов веб-дизайна для вашего сайта
- 7 примеров навигации по сайту, которые вдохновят вас на создание убийственной структуры
Этап 9: прототипирование / каркасное построение
На этом этапе вам понадобится программное обеспечение для создания прототипов. Я рекомендую Axure, хотя есть и ряд других подобных программ.
Прототип домашней страницы не обязательно предварительно создавать. Например, в случае интернет-магазина или блога, страница продукта или страница сообщения в блоге должна быть первой, потому что это важные страницы, и обычно они будут целевыми страницами большинства пользователей сайта.
Архитектор веб-сайта будет опираться на интеллект-карту и диаграммы информационной архитектуры для разработки этого прототипа.
При создании каждого прототипа веб-страницы вы должны сосредоточиться на том, как пользователь может достичь своих целей. Перед созданием прототипа вам следует освежить свои знания о целевой аудитории, используя предыдущие этапы процесса построения архитектуры сайта.
Главное меню навигации создается первым. Нам нужно выяснить количество пунктов меню и количество выпадающих меню.
Прототип раздела заголовка
Затем мы разрабатываем раздел заголовка, который обычно содержит следующие элементы:
- Главное меню навигации
- Форма поиска
- Контактная информация
- Логотип веб-сайта
Прототип контекстных областей
Теперь мы начинаем проектировать контекстные области, которые будут отличаться в зависимости от веб-страницы, которую вы прототипируете. Мы создадим блоки контента, некоторые из которых будут постоянными для каждой страницы, а некоторые — нет.
Прототип нижнего колонтитула веб-сайта
Нижний колонтитул обычно остается неизменным на каждой веб-странице. Обычно нижний колонтитул дублирует главное меню. Он также содержит вспомогательную информацию, такую как политика конфиденциальности веб-сайта, ссылки на социальные сети, контактная информация, информация об авторских правах и т. Д.
Отзыв клиента
Первый прототип веб-страницы следует показать лицам, принимающим решения, и объяснить им причину макета. Клиент может пересмотреть и предложить некоторые корректировки. Это нормально, потому что сделать это на прототипе с низкой точностью намного проще, чем если бы у нас был прототип с более высокой точностью.
После утверждения первой страницы мы можем переходить к следующим прототипам. Все идеи, представленные в нашей интеллект-карте, должны быть найдены в этих прототипах. Крайне важно не забыть о мельчайших деталях, так как в конечном итоге они могут обернуться к черту.
Протестируйте прототипы на картах сценариев
Наши сценарии помогут протестировать макеты, чтобы убедиться в логической последовательности каждого действия.
Это самый трудоемкий компонент данного этапа, требующий большого терпения и внимательности. В случае крупных веб-сайтов может быть более 100 уникальных прототипов интерфейса.
Результаты и итоги
Результатами после этого этапа являются прототипы / каркасы с низкой точностью для всех типов веб-страниц.
Примеры:
Таких прототипов для вышеприведенного примера проекта 90. Как видите, каждый прототип был разобран подробно. Таким образом, при разработке функциональных прототипов и готовых веб-дизайнов не возникало вопросов и неуверенности.
Этап 10: юзабилити-тестирование прототипа
Это один из лучших способов быстро проверить эффективность архитектуры веб-сайта и внести изменения, прежде чем что-то пойдет дальше.
Axure генерирует HTML из прототипов, что делает их интерактивными и готовыми к тестированию на пользователях.
Юзабилити-тестирование на этом этапе поможет вам заметить пробелы и недостатки в архитектуре.
В целях тестирования мы приглашаем некоторых представителей целевой аудитории и наблюдаем, как им удается достичь определенных страниц и результатов на сайте.
Затем можно опросить пользователей относительно сайта в целом.
После юзабилити-тестирования вносим окончательные исправления.
Результаты и итоги
В результате мы проверим и улучшим удобство использования прототипов наших веб-страниц и получим лучшее представление о том, как пользователи будут взаимодействовать с сайтом.
Этап 11: Спецификация проекта
Завершающим этапом процесса создания архитектуры веб-сайта является создание документа спецификации проекта . Он должен содержать подробное описание каждого этапа процесса создания архитектуры сайта.
Спецификация проекта — это результат всех этапов, которые вы прошли. Обычно он содержит подробное описание каждого прототипа, пользовательских потоков и т. Д.
Спецификации должны быть полными и однозначными. Будьте подробными и подробными, но при этом максимально краткими и лаконичными.
Спецификация проекта должна содержать всю информацию о программном обеспечении и веб-технологиях, необходимую для веб-сайта.
Требования к дизайну должны быть четкими.
После утверждения спецификации проекта начинается разработка веб-сайта.
